HTML
What is HTML?
000 HTML stands for hypertext markup language.
• It is the standard markup language for creating web pages.
• It describes the structure of a web page.
• It consists of series of elements.
• The elements tell the browser how to display the content.
Why CSS and JavaScript:
•
HTML is used for defining a layout of the page - A bare bone page
structure.
•
Css is used to add styling to that barebone page created using HTML.
•
JavaScript is used to programs logic for the page layout. Eg) what to do
with the user input?
Choosing a text editor:
•
One can use any text editor of his/her choice.
•
HTML can even be written in Notepad. Text editors like VS code just
make things easier.
Notes:
* *
not sensitive
NITE HTML is case -
: .
The <! DOCTYPE HTML> declaration defines that this document is an
: HTML5 document.
The HTML element is the root element of an HTML page.
The <head> element contains meta information about the HTML page.
: The <title> element specifies a title for the HTML page.
The <body> element defines the document's body and is a container
: for all the visible content such as headings, paragraphs, images,
hyperlinks etc.
The <h1>,<h2>..... define headings.
The <p> element defines paragraph.
: Important points:
Head and body tags are children of HTML tag.
HTML is the parent of Head and Body tags.
: Most of the HTML elements have opening and closing tag with content in
between opening and closing tags.
Some HTML tags have no content . These are called Empty elements. eg.
: <br>
We can either use .htm or .html extension.
You can use "Inspect Element" or "view Page source " option from chrome
: to Look into a website's HTML code.
Html element = start tag + content + End tag
Comments in HTML:
Comments in HTML are used to mark text which should not be parsed .
They can help document the source code.
< !-- HTML comment - ->
Heading tag:
The used From < hi > to < h6 >
heading tag is to mark
headings in HTML .
,
we
have tags from the most
important to the least important headings .
< hi >
important < 1h1 >
most
Heading
< h2 > < 1h27
Another
heading 11-2 No : we should not use HTML
headings
4h37 < 1h33 to make text thick or bold
Another Hz
heading
.
4h4 > Another < 1h4 >
heading Hy
> 1h5 >
heading
< us Another <
its
< h6 > Another 1+6 21h6 >
heading
Paragraph tag:
used add
Paragraph tags are to
paragraphs to an HTML
page .
<
p> This is a
paragraph < Ip >
Anchor tag:
anchor used add to content
The
tag is to links an
existing on an HTML
page .
"
2 "
a
href =
[Link] > click me < la >
Image tag:
9. is used add HTML
mage tag to
images to an
page .
< "
ing image jpg >
"
src = -
relative url of an
image
Pre tag:
and order to
HTML
always ignores extra spaces new lines .
In
display things as it
is we use the
pre tag
-
.
,
pre >
<
This is written
using pre
tag
< / >
pre
Customisation:
"
② < i> and < / i >
background
0 "
style = color :
Any
color
;
-
color :
Any color ;
>
This used to
change the font color Static font
syntax is as
b> and >
well as the background color .
① < < / b
① Chr > : Bold front
→ Used ⑨ < sub > and < / sub >
to create a line after text
① < br>
subscript
:
→
Used to create a
space after text p> and < lsup >
as ;
upersoipt
1) < > instead of bold > < /
strong big >
Use ① < and
.
big
2) Use < em > instead of italic .
Bigger font
0 < small > and < / small >
6
Smaller font
output
These elements /
tags are
used to format front .
Image and video insertion:
[Link] }
" '
Inserting thumbnail and <
-
video with a controls .
⑨ a
href =
" "
> < video / < la >
"
src = tutorial
.mp4 poster = walli Text
image
jpg controls > video failed to load < / video > This the Text / to direct
uses
ing .
link
the user to the
specified .
NOI ,
Use i -
frame for youtube : 0
open link in new tab ;
Embed video You "
youtube
"
→ from →
target =
-
blank
will default
get access to all the
'
settings
'
④ <
imy
"
alt
wall i.
jpg anime
-
.
src =
"
wallpaper >
Inserting an
image
0
width ,
height
0 alt
96 only parameter
you change one ,
text if doesn't load
the
aspect ratio remains
Displays image .
intact .
e doesn't load .
Lists in HTML:
③
lists used
are to
display content which
list
represents a .
Unordered list : used to list unordered items
< we >
< Li > Home < Ili >
Cli > About < / Li >
i
< lol > ordered list : used to list ordered items
Col >
Cci > Phone < Ici >
Cci > Pc Lili>
Cci > < Ili >
laptop
< lol >