HTML
vivekji334455@[Link]
TI61CBP47X
Proprietary
This content. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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
vivekji334455@[Link]
TI61CBP47X
● Comments
● HTML Elements
● Basic Tags
● Attributes
Proprietary
This content. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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.
vivekji334455@[Link]
● It is a language to create web pages
TI61CBP47X
● 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. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[Link] prohibited.
Sharing or publishing the contents in part or full is liable for legal action.
Features Of HTML
● Learning curve is very easy (easy to modify)
● Creating effective presentations
● Adding Links wherein we can add references
vivekji334455@[Link]
● Can display documents on platforms like Mac , Windows, Linux etc
TI61CBP47X
● Adding videos, graphics and audios making it more attractive.
● Case insensitive language
Proprietary
This content. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[Link] prohibited.
Sharing or publishing the contents in part or full is liable for legal action.
HTML Editors
● Simple editor: Notepad
● Notepad++
● Atom
vivekji334455@[Link]
TI61CBP47X
● Best editor: Sublime Text.
Proprietary
This content. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[Link] prohibited.
Sharing or publishing the contents in part or full is liable for legal action.
HTML Skeleton
<!DOCTYPE html>
<html>
<head>
vivekji334455@[Link]
TI61CBP47X <title></title>
</head>
<body>
</body>
</html>
Proprietary
This content. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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
vivekji334455@[Link]
TI61CBP47X
<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
Proprietary
This content. © Great for
file is meant Learning. Allabout
personal Rights
use bythe
Reserved. document)
Unauthorized use or distribution only.
vivekji334455@[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>
vivekji334455@[Link]
TI61CBP47X
○ <a href="[Link] To Google</a>
○ <img src="[Link]">
Proprietary
This content. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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 debugging our code
● Three ways to comment:
vivekji334455@[Link]
TI61CBP47X
○ Single line
○ Multiple line
○ Comment tag //Supported by IE
Proprietary
This content. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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 define semantics
● Can be nested and empty
vivekji334455@[Link]
TI61CBP47X 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
file first Learning.
is meant Paragraph
© Great for All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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
vivekji334455@[Link]
TI61CBP47X ○ Always end before the new line
○ Example :
■ <p >
■ <div>
■ <h1>...<h6>
■ <ol>
■ <ul>
Proprietary
This content. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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
vivekji334455@[Link]
TI61CBP47X ○ Always starts from where the previous element ended
○ Example :
■ <span>
■ <strong>
■ <em>
■ <img>
■ <a>
Proprietary
This content. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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
○ Whatever is written this tag comes up in the web page’s tab
vivekji334455@[Link]
TI61CBP47X
○ 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. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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
vivekji334455@[Link]
TI61CBP47X ○ Stands
for break line
○ Moving to next line
● <img> tag
○ To add images in the web page
Proprietary
This content. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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
vivekji334455@[Link]
TI61CBP47X● <strong>tag
○ 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. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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>
vivekji334455@[Link]
● <ul> tag
TI61CBP47X
○ 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. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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 <span> tags
vivekji334455@[Link]
TI61CBP47X
○ 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. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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
vivekji334455@[Link]
TI61CBP47X
○ Used to add links in a web page
○ <a href=”url”> Name of the link </a>
Proprietary
This content. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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
vivekji334455@[Link]
<tr> : for marking the table row
TI61CBP47X
<th> : for table header
<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. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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">
vivekji334455@[Link]
TI61CBP47X
● <input>: used to accept data from the user
● Some types of inputs are:
Proprietary
This content. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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"
vivekji334455@[Link]
TI61CBP47X 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. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[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
vivekji334455@[Link]
TI61CBP47X ● 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.:
● required: The Boolean attribute which makes a field mandatory:
● email: the browser will ensure that the field contains an @ symbol.
Proprietary
This content. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[Link] prohibited.
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)
vivekji334455@[Link]
● <img src=”url” width=”100”>
TI61CBP47X
○ 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. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[Link] prohibited.
Sharing or publishing the contents in part or full is liable for legal action.
vivekji334455@[Link]
TI61CBP47X
Thank You
Proprietary
This content. © Great for
file is meant Learning. All Rights
personal use Reserved. Unauthorized use or distribution only.
by vivekji334455@[Link] prohibited.
Sharing or publishing the contents in part or full is liable for legal action.
