Front End Development - HTML
santoshsharma78889@[Link]
SYDLRO2G34
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Table of Content
● What is HTML?
● Features
● HTML Editor
● HTML Skeleton
santoshsharma78889@[Link]
SYDLRO2G34
● Comments
● HTML Elements
● Basic Tags
● Attributes
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
What is HTML?
● Stands for HyperText Markup Language
● HyperText: Link between web pages.
● Markup Language: Text between tags which defines structure.
santoshsharma78889@[Link]
● It is a language to create web pages
SYDLRO2G34
● HTML defines how the web page looks and how to display content
with the help of elements
● It forms or defines the structure of our Web Page
● Need to save your file with .html extension
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Features Of HTML
● The learning curve is very easy (easy to modify)
● Create effective presentations
● Add links wherein we can add references
santoshsharma78889@[Link]
● Can display documents on platforms like Mac , Windows, Linux etc
SYDLRO2G34
● Add videos, graphics and audios making it more attractive.
● Case insensitive language
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
HTML Editors
● Simple editor: Notepad
● Notepad++
● Atom
santoshsharma78889@[Link]
SYDLRO2G34
● Best editor: Sublime Text.
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
HTML Skeleton
<!DOCTYPE html>
<html>
<head>
<title></title>
santoshsharma78889@[Link]
SYDLRO2G34
</head>
<body>
</body>
</html>
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
<!DOCTYPE html>
Instruction to the browser about the HTML version.
<html>
Root element which acts as a container to hold all the code
Browser should know that this a HTML document
Permitted content: One head tag followed by one body tag
santoshsharma78889@[Link]
SYDLRO2G34
<head>
Everything written here will never be displayed in the browser
It contains general information about the document
Title, definitions of css and script sheets
Metadata(information about the document)
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
<body>
● Everything written here will be displayed in the browser
● Contains text, images, links which can be achieved through tags.
● Examples:
○ <p> This is our first paragraph. </p>
santoshsharma78889@[Link]
SYDLRO2G34
○ <a href="[Link] To Google</a>
○ <img src="[Link]">
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
HTML Comments
● Comments don’t render on the browser
● Helps to understand our code better and makes it readable.
● Helps to debug our code
● Three ways to comment:
santoshsharma78889@[Link]
SYDLRO2G34
○ Single line
○ Multiple line
○ Comment tag //Supported by IE
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
HTML Element
● Elements are created using tags
● Elements are used to define semantics
● Can be nested and empty
santoshsharma78889@[Link]
SYDLRO2G34 Basic Structure
<p color=”red”> This is our first Paragraph </p>
● Contains following things:
○ Start tag: <p>
○ Attributes: color =”red”
○ End tag: </p> // optional
○ Content: This
This is iscontent.
Proprietary
file our
meant first
© Great
Paragraph
Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Element Types
● Block Level :
○ Takes up full block or width and adds structure in the web page
○ Always starts from new line
santoshsharma78889@[Link]
SYDLRO2G34○ Always end before the new line
○ Example :
■ <p >
■ <div>
■ <h1>...<h6>
■ <ol>
■ <ul>
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Element Types
● Inline Level:
○ Takes up what is requires and adds meaning to the web
page
santoshsharma78889@[Link]
SYDLRO2G34 ○ Always starts from where the previous element ended
○ Example :
■ <span>
■ <strong>
■ <em>
■ <img>
■ <a>
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Basic Tags:
● Enclosed within <>
● Different tags render different meaning .
● <title> tag
santoshsharma78889@[Link]
SYDLRO2G34
○ Whatever is written this tag comes up in the web page’s tab
○ Defines the title of the page
○ Syntax: <title>Home </title>
● <p> tag
○ Defines the paragraph
○ Syntax:<p > This is our first Paragraph </p>
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
List of Self closing tags
● <hr> tag
○ Stands for horizontal rule
○ Dividing the web page
● <br> tag
santoshsharma78889@[Link]
SYDLRO2G34 ○ Stands for
break line
○ Moving to next line
● <img> tag
○ To add images in the web page
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
● <h1> tag …… <h6>tag
○ Stands for heading tag
○ Defines heading of a page
○ h1 represents most important page in the page
○ h6 represents least important page in the page
santoshsharma78889@[Link]
● <strong> tag
SYDLRO2G34
○ Defines the text to be bold
○ Replaced <b>tag //HTML5
● <em> tag
○ Defines the text to be bold
○ Replaced <i>tag //HTML5
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
● <ol> tag
○ Stands for ordered list
○ To define series of events that take place in some order
○ Example making a tea (like a flow chart)
○ <ol>.........</ol>
santoshsharma78889@[Link]
● <ul> tag
SYDLRO2G34
○ Stands for unordered list
○ To define series of events that take place where order is not
important.
○ Example your hobbies
○ <ul>.........</ul>
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
● <li> tag
○ Defines the list item
○ Used inside the ‘ol’ and ‘ul’ tag to define the events
○ <li></li>
● <div> and <span>
santoshsharma78889@[Link] tags
SYDLRO2G34
○ Both of these are used to group different tags .
○ Acts like a container.
○ Effective while styling.
○ <div>.........</div>
○ <span>....</span>
○ Difference <div> is block level and <span> is inline level.
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
● <img> tag
○ Used to add images in a web page
○ Syntax: <img src=”url”>
○ Self closing tag.
● <a> tags
santoshsharma78889@[Link]
SYDLRO2G34
○ Used to add links in a web page
○ <a href=”url”> Name of the link </a>
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
● <table> tag
○ Used to create a table on a web page
○ Need other tags for completing the creation of a table
■ <tr> : for marking the table row
■ <th> : for table header
santoshsharma78889@[Link]
SYDLRO2G34 ■ <td> : for table column data
○ Everything is always enclosed within <tr>
■ <thead> : to keep all header data
■ <tbody> : to keep all body data
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
● <form> tag
○ Action attribute: It specifies the URL to send form data to
○ Method attribute: specifies the type of HTTP request(GET or
POST)
○ Example: <form action="/my-form-submitting-page"
method="POST">
santoshsharma78889@[Link]
SYDLRO2G34 ○ <input>: used to accept data from the user
○ Some types of inputs are:
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
● Text: used to store text data. Syntax: type="text"
● Password: used to enter a secure password. Syntax: type="password"
● Placeholder: temporary text in input fields. It is generally accompanied by
"text" and "password" attributes. Syntax: placeholder="insert- text-here"
● Button: used to include buttons in the form. Syntax: type="button"
santoshsharma78889@[Link]
SYDLRO2G34
value="insert-text-here"
● Submit button: For creating a submit button. All the data will get submitted
when it is clicked. Syntax: type="submit"
● Checkbox: to provide the ability to check multiple options. Syntax:
type="checkbox". To check options by default, set it with the checked attribute.
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
● Radio Button: allows one to choose a single option. Syntax: type="radio". Keep
the name attribute of all the options the same.
● <select>: For every possible option to select, use an <option> tag<option>
● Text Areas: multi-line plain-text editing control. Syntax: <textarea>. You can
specify how large the text area is by using the "rows" and "cols" attributes
santoshsharma78889@[Link]
SYDLRO2G34
● Labels: add captions for individual items in a form. Syntax: <label>. A label can
be used by placing the control element inside the <label> element, or by using
the "for" and "id" attributes.
● Validations ensure that users fill out forms in the correct format, e.g.:
a. required: The Boolean attribute which makes a field mandatory:
Proprietary content. © Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited.
b. email: This
thefile
browser will ensure that the field contains an @ symbol.
is meant for personal use by santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Attributes
● Properties associated with each tag.
● <tag name=”value”></tag> is the structure.
● Global Attribute:
○ Title : Add extra information (hover)
○ Style: Add style information(font,background,color,size)
santoshsharma78889@[Link]
● <img src=”url” width=”100”>
SYDLRO2G34
○ src is the attribute used in image tag to define path
○ Width is attribute used to define width in pixels
○ Alt i.e alternate text if image is not loaded
● <a href=”url”> Name of the link </a>
● href used to define path of the link.
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
Conclusion
● Introduction to HTML
● Comments
● HTML Elements
● Basic Tags
santoshsharma78889@[Link]
SYDLRO2G34
● Attributes
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.
santoshsharma78889@[Link]
SYDLRO2G34
Thank You
Proprietary
This content.
file is meant © Great Learning. Alluse
for personal Rights
byReserved. Unauthorized use or distribution prohibited.
santoshsharma78889@[Link] only.
Sharing or publishing the contents in part or full is liable for legal action.