Front End Development - HTML
keerukeeru5@[Link]
AQEMOHFL9W
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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
keerukeeru5@[Link]
AQEMOHFL9W
● Comments
● HTML Elements
● Basic Tags
● Attributes
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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.
keerukeeru5@[Link]
● It is a language to create web pages
AQEMOHFL9W
● 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
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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
keerukeeru5@[Link]
● Can display documents on platforms like Mac , Windows, Linux etc
AQEMOHFL9W
● Add videos, graphics and audios making it more attractive.
● Case insensitive language
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
Sharing or publishing the contents in part or full is liable for legal action.
HTML Editors
● Simple editor: Notepad
● Notepad++
● Atom
keerukeeru5@[Link]
AQEMOHFL9W
● Best editor: Sublime Text.
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
Sharing or publishing the contents in part or full is liable for legal action.
HTML Skeleton
<!DOCTYPE html>
<html>
<head>
keerukeeru5@[Link]
AQEMOHFL9W <title></title>
</head>
<body>
</body>
</html>
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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
keerukeeru5@[Link]
AQEMOHFL9W
<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
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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>
keerukeeru5@[Link]
AQEMOHFL9W
○ <a href="[Link] To Google</a>
○ <img src="[Link]">
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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:
keerukeeru5@[Link]
AQEMOHFL9W
○ Single line
○ Multiple line
○ Comment tag //Supported by IE
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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
keerukeeru5@[Link]
AQEMOHFL9W 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 is content.
Proprietary
This our first Paragraph
© Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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
keerukeeru5@[Link]
AQEMOHFL9W ○ Always end before the new line
○ Example :
■ <p >
■ <div>
■ <h1>...<h6>
■ <ol>
■ <ul>
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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
keerukeeru5@[Link]
AQEMOHFL9W○ Always starts from where the previous element ended
○ Example :
■ <span>
■ <strong>
■ <em>
■ <img>
■ <a>
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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
keerukeeru5@[Link]
AQEMOHFL9W
○ 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
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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
keerukeeru5@[Link]
AQEMOHFL9W ○ Stands
for break line
○ Moving to next line
● <img> tag
○ To add images in the web page
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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
keerukeeru5@[Link]
● <strong>
AQEMOHFL9W tag
○ Defines the text to be bold
○ Replaced <b>tag //HTML5
● <em> tag
○ Defines the text to be bold
○ Replaced <i>tag //HTML5
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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>
keerukeeru5@[Link]
● <ul> tag
AQEMOHFL9W
○ Stands for unordered list
○ To define series of events that take place where order is not
important.
○ Example your hobbies
○ <ul>.........</ul>
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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
keerukeeru5@[Link] <span> tags
AQEMOHFL9W
○ 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
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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
keerukeeru5@[Link]
AQEMOHFL9W
○ Used to add links in a web page
○ <a href=”url”> Name of the link </a>
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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
keerukeeru5@[Link]
AQEMOHFL9W ■ <td> : for table column data
○ Everything is always enclosed within <tr>
■ <thead> : to keep all header data
■ <tbody> : to keep all body data
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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">
keerukeeru5@[Link]
AQEMOHFL9W ○ <input>: used to accept data from the user
○ Some types of inputs are:
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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"
keerukeeru5@[Link]
AQEMOHFL9W
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
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
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
keerukeeru5@[Link]
AQEMOHFL9W
● 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: theThis
browser will ensure that the field contains an @ symbol.
file is meant for personal use by keerukeeru5@[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)
keerukeeru5@[Link]
● <img src=”url” width=”100”>
AQEMOHFL9W
○ 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
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
Sharing or publishing the contents in part or full is liable for legal action.
Conclusion
● Introduction to HTML
● Comments
● HTML Elements
● Basic Tags
keerukeeru5@[Link]
AQEMOHFL9W
● Attributes
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
Sharing or publishing the contents in part or full is liable for legal action.
keerukeeru5@[Link]
AQEMOHFL9W
Thank You
Proprietary
Thiscontent. © Great Learning.
file is meant All Rights
for personal useReserved. Unauthorized use or distributiononly.
by keerukeeru5@[Link] prohibited.
Sharing or publishing the contents in part or full is liable for legal action.