classmate
Date
Page
Chapter o - Intraducton
HTML → Hyper Text Mark up Langusge
HTML is the language of web. It is used
the
to create websites
We use HTML tags to define look 8& feel of a wiehsile
With understanding of these tags and How to put them
together, we can create beaulifil welstes easely
Then Why CSS & Java Script
HIML is word for defining layout of a page- A barebone
page stucture
C55 is used to add styling to that batebone pаде
created using HTML
Java script is sused to program lopic for the page layout eg
What happens when a 'user favcrs on a that, when
to hide or show ekments etu
A Beautiful analogy
HTML = Cor body (only metal)
CSS = Car baint, decoraltion et.
M
JavaScrift = Car ingine + Intrior lagic
We will Start learning how to build beautiful layouts in
this course.
clAsSma
te
Date
Page
Installing
VS Code
We han use any feat editor of our choice. Here I
Am using Vs "lode because it is light weight, opcneas
8 from Microsoft
Go to gole type VS Code & install it
Note : You wan write HTML even inm Notiepad. Text editors uke
Vs Code just makes these things easicr
classmate
Date
Page
Chapler1- Creating owr frat website
We stant bulding ia wehsite by creating a file named index html
nde hAml is a
the wehsite root
special filkame which is presented when
addeess is typed-
A Basic HTML Page
<! Doctype himl 7 specifies this is an himl5 doc
<html>" → root of an HiML bage
<head → Contains metadata
page
<title > Harry's Welsite L/title> + Contains title
</heod>
<body>→ The pody
of the page (rondered by the browser)
main
< h17 This is A heading 4/h17 heading tag
<P> My paragraph </p> → paragraph tag
</body> → Closing bady tag
</html>→
A tag is like a contauner for either content or other HTML
tags Home about
園
HTML Docunent Browser Rendered paye
Imp Notes
Head & body tags are HTML tag
childun of
HTML is the parent of Head & Body tags
2 Most of the HIML elements have apening & closing tag with content in
betwcen ofening 8 closing tags.
Some HIML tags have no Content.These are called Emply elements eg<br>
ClASSmate
Date
Page
We lan either use.htm or html extension
or "Views Pge Sowrca" option fro
m
ے You use Inapet Ekement" ite'
can
chrome to look into a wels s HTML Code
HTML element = Stant tag + lontint + End tag
Comments in HTML
Comments in HTML are used to mark text which Should
not be parsed. They can help document the soure code.
<!-- HTML (omment -->
Case Sensitivity
HTML is a case imsensitive language 2H17 And sht
tags ore the same.
classmate
Date
Page
Chapter 1- Practice Set
1
Inspect your fovorite welrite and change Something on the
page which is displayed.
Go to your favorite webaute and try to views the page
Source and write the exact lines of code Docs'it
Clone the website? why?
Write Any HIML code inside a text file. Dees it Work
3
if you write it using notkpad?
ClASSmat
e
Date
Page
Chapter 2 - Basic HTML Tags
We van add elemunts inside the bodly tag to define the
page layaut
HTML Element
Everything from starting to the ending tog
<body> Opening tag
Contkent
</body> → Closing tag
HTML Attributes
Vsed to add more inprmasion corcsponding to an HINL
anchor tag
tag
Example : La href = "nttp /|alewi havny.com/ "> Harry </a>
heef allribute
We can either use single or double greoks in attributes
The Heading Tag
Heading fag iswised to mark headings in HTML:
from hs to ho, we have tags for the most important
to the least least imprlant heading
<h2 Most Imporfant headung </h2 Note: We should not use
<h2 Another heading H₂ /h27 HrML headings to make
<h3> Another heading Hz </hs teat thick or bold.
<h4> Another heading Hy /h4>
<hs? Arother heading Hs hs
2 h67 Arother heading He /he>
classmate
Date
Page
The Parageaph Tag
Pacagriph
page tags Sere usied to ast paragrapes to An ITML
<P7 This is a poreagraph 4/p>
The Anchor Tag
The Anchor Lag is used to add links to an existing
Content inside on HTML page
<a href="https:// gogle: Com"> Click me 2/a>
The img Tag
ing tag is used to add images in an HTML page
image: Sig">
<ing sre=" im
L relative url of an imege
Bold, italic and undertine tags
We ran use bald, itale and undertine tags to highlight the
teat ss follows
<by This is bold 4/6>
<iz This is italicc/i>
<uz Tris is undertine /4>
br fag
The br tag is used to create line breaks in an HTML
document
ClasS
mate
Date
Page
big and small tags
We lan make the text a bil larger and a bit small
using big and small tags respectively
hr tag
<ha> fag in HTML is Maed to create a horijontal ruke
often used to seperate the content
Subscript & superscript
We can add sutsoript and superscripts in HIML as follouw:
< Sub7 this 2/sub> is sulsvript
<sup> this <1sup> is superscrift
pre tag
ATML alumys ignors extra spaces and newtines. In ordet
to display ia picce of tert as is, we use prc tag
<pre>
This is written
using bre Rendered as-is
tag
</prez
ClAssmate
Date
Page
Chapter 2- Practice Set
Create HTML page with a heading (title heading),
an a
primary heading wand a sul-heading
Which tags idid you use
2 Create a page with 5 walpapet images taken from the
internet
3
Use br vand hr tags to
with linebreaks.
desplay a pice of text
Try to write the follwing Chemical equation using HTM
C + Q₂ C0₂
5
Tay to write a wikipedia article using HTML.
ClAsSma
te
Date
Page
Chapter 3- Creating a page layou!
When we right tag in right ploce, it resulls in
use the
a better page layout betler indeaing by bearch inginu
and better user experience
We use the folwing tag to get the job done
<header Contains nav tag
< maun >
Wehsite Lageut
<footer>
Inside the main tag we insert the fullowing tags:
<main? The moin opening tag
< Section> → A page section
< artide> → a self conteined Conent
<aside → Conkent aside from the content (eg Ada ete)
/moin> + The main closing tag
it
Creating page like this is not necessary
a but
creates a readable & sthuctured layout
Also they Dre uiseful for SEO.
Link attributes
<a href="/Conlad"> Cortact us </a> Contact page opent in Sam tis
→
ca hry ="/ contal" torget= "_blank"> Contad us <lax
I opens in a news tabe
We lan fut any content inside an anchor tag (inges
hesdings et are all allowed)
classmate
Date
Page
If the page is inside a divectory, we neid to make sure
that we link to the correct page
↳ Same applies to inng thg as well
ne san add links to images like this
<a hef="/abeut"><ing src='aspy witth="120"> </a>
↳→ Height will be set autormatically
The Piv tag
divr tag is often used as a container for other elkments
div is a block level element
Always takes full width
The span tag
Gpan is an inline Conlainer
L Takes as much width as necessary
clAssmate
Date
Page
Chafter 3- Practice bet
Create an SED friendly wesbite using HIML
Gcate an HTML fage which opens google wten
clicked on an image
3 Create a website which has your s top used
welsites bookmarked. The links Should open in
a new tab.
classmate
Date
Page
Chopter 4 - Lists,tables & forms
Lists
Lists are sused to display content which reprcsintsa list
Vnordered list: Used to list unordered iteme
Luls
<li> Home </li>
<liz About 4/ li>
</ul>
ordered list: used to list ordered items
Lol>
<li> Phone /li>
<li> Pc </li>
<li> Laptop </liz
</01>
Tables
The ctable tag is ised to defne tables in HTML
It is msed to format 8 desplay tabular data
to tag: used to display table row
tt taf: used to display table data
th tag : used in place of fakle data for displaying
table headers
We can define as many table rows iss we want.
ClAsS
mate
Date
Page
To add a caption to the table, wwe use (Caption
tag inside table.
thead tag: used to wrap table head (Caphion 8 tr with th)
tbody tay: used to wrap the table body
Colspan attravute
Thie altebalk is waed to cesate cells spanning mulfil
columns
<th Colspon == "3"> Harry </th>
L Spans 3 Glunns
HTML Forms
An HTML form is used to collet imput from the user
form tog 'is wised for the same
<form>
Element of the form--
</form>
There are different form elements for difererd Rinds of
siser input
input element: Can be of type tent, checkbox, radio,button and
Submit We aso have a file tybe
tertarea clement: Defines a multi line text inbut Cols and rove
altubules ran be used to size the textarea.
ते
selet chemont : Defines a drep down lisk
classmate
Date
Page
Nole : you dont have to remumher all the tags, you will
automalicaly memerige them with practice
Embedding Videos
Video tag is used to play videos in HTML
<Video Src ='harry. mpt > Error <(/video>
Altribulu for video
We can use:
a
Width: To adjist width of a vido (Height austomaticallyVidissajusls)
the
We can use awtoplay/ loop to autoplay ot loop the
classmate
Date
Page
Chapter 4- Practice Set
1 Create an HTML page with video embeded inside it
"Replace this video in I with a YouTube video
3 Cecate an HTML form for s traved website to
book va Vacation
4
Cecate a table disblaying score of vickel players in
a match using HTML
classmate
Date
Page
Chapler 5- SEo
We will focus only on HIML standbaint of SEO. We will
not be looking ino Reyword bulding and Conkent optiniga
aspect of SEO
Tybes of SEO
On pagl SEO
Ho Can be done by HTML derelafers
page SEO
HTML SEO
HTML derlopers can implement 5E0 using the follwing
techniques?
17
Set the title very nice & to the paint
2 Set the mita desciption
Π
< meta name ="desription" Conkent =
32 set a nice URL slug
47 set the meta keywerds tag.
5. set the meta author tag
< meta name="author" content = Harry">
62 Set a faricon
CLASS
mate
Date
Page
Compress images I other resources
Remove unused HTML/ ess & Js files + Compress thum
9
Add alt teat to images
