What is HTML
o HyperText Markup Language.
o HyperText: Linking between pages.
o Markup Language: Text between tags which defines structure.
o Language to create web pages.
o HTML defines how the eb page looks and how to display content with the help of
elements.
o It forms or defines the structure of Web Page.
o Needed to be save in .html extension form.
HTML Features
o Easy to learn and modify.
o Create effective presentations
o Add links wherein we can add references
o Can display documents on platforms like Mac, Windows, Linux, etc.
o Add videos, graphics, and audios making it more attractive.
o Case insensitive language.
HTML Editors
o Notepad
o Notepad++
o Atom
o Sublime Text (Best one)
HTML Skeleton
<!DOCTYPE html> //instruction to the browser about the HTML version
<html> // root element which acts as a coontainer to hold all the code. Browser should know
that this a HTML document. Permitted content: one head tag followed by one body tag
<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).
<title></titlle>
</head>
<body> /* everything written here will be displayed in the browser. Contains text, images,
links, which can be achieved through tags.
Example:
1. <p> This is our first paragraph. </p>
2. <a href=http://www.google.com>Go To Google</a>
3. <img src=”photo.jpg”>
</body>
</html>
HTML Comments
o Comments don’t render on the browser
o Helps to understand our code better and makes it readable
o Helps to debug our code
o Three ways to comments:
Single line
Multiple line
Comment tag //Supported by IE
HTML Element
o Elements are created using tags
o Elements are used to define semantics
o Can be nested and empty
Basic Structure:
<p color=”red”> This is our first paragraph </p>
o Contains following things:
Start tak: <p>
Attributes: color=”red”
End tak: </p> //optional (because some tags are self closing tags)
Content: This is our first paragraph
Element Types
o Block Level:
Takes full block or width and adds structure in the web page
Always starts from new line
Always end before the new line
Example:
<p>
<div>
<h1>...<h6>
o Stands for heading tak
o Defines heading of a page
o h1 represents most important heading in the page
o h6 represents leas important heading in the page
<strong> tag
o Defines the text to be bold
o Replaced <b> tag //HTML5
<em> tag
o Defines the text to be italic
o Replaced <i> tag //HTML5
<ol> tag
o Stands for ordered list
o To define series of events that takes place in some order
o Example: making a tea (like a flow chart)
o <ol>....</ol>
<ul> tag
o Stands for unordered list
o To define series of events that takes place where order is not
important
o Example: your hobbies
o <ul>...</ul>
<li> tag
o Defines the list item
o Used inside the ‘ol’ and ‘ul’ tak to define the events
o <li></li>
<div> and <span> tags
o Both of these are used to group different tags
o Acts like a container
o Effective while styling
o <div>...</div>
o <span>...</span>
o Difference:<div> is block level and <span> is inline level
o Inline Level:
Takes up what is requires and adds meaning to the web page
Always starts from where the previous elemens ended.
Example:
<span>
<strong>
<em>
<img>
<a>
Basic Tags:
o Enclosed within <>
o Different tags render different meaning
o <title> tag
Whatever is written in this tak comes up in the web page’s tab
Defines the title of the page
Syntax:<title>Home </title>
o <p> tag
Defines the paragraph
Syntax: <p> This is a paragraph </p>
Self Closing Tags:
o <hr> tag:
Stands for horizontal rule
Dividing the web page
o <br> tag:
Stands for break line
Moving to the next line
o <img> tag:
To add images in the web page
