HTM CS J
L S S
Structure/layout Styl Logi
e c
Level
1
HTML
Hyper Text Markup Language
HTML is the code that is used to
structure a web page and its
content.
The component used to design the
structure of websites are called HTML
tags.
First HTML
File
[Link]
I t is the default name for a website's
homepage
HTML Tag
A container for some content or other HTML
tags
<p> This is a
paragraph </p>
Content
Elemen
t
Basic HTML Page
<!DOCTYPE tells browser you are using
HTML5
html> root of an html
document
<html> container for
<head > metadata
<title>My First page
Page</title> title
</ head
<body> > contains all data rendered by the
browser
<p>hello world</p> paragraph
tag
</body>
</html>
Quick
Points
Html tag is parent of head & body tag
Most of html elements have opening & closing
tags with content in between
Some tags have no content in between, eg -
<br>
We can use inspect element/view page source
to edit html
Comments in HTML
This is part of code that should not be
parsed.
<!-- This is an HTML Comment --
>
HTML is NOT case sensitive
<html> =
<HTML>
< p > = < P>
<head> =
<HEAD>
<body> =
<BODY>
Level
2
Basic HTML
Tags Attributes
HTML
Attributes are used to add more information to the
tag
<html lang="en">
Heading Tag
Used to display headings in
HTML
h (most
important)
1
h2
h3
h4 (least important)
h5
Paragraph Tag
Used to add paragraphs in
HTML
<p> This is a sample paragraph
</p>
Anchor Tag
Used to add links to your page
<a href="[Link] Google
</a>
Image Tag
Used to add images to your page
<img src="/[Link]" alt="Random
Image">
relative url
Br Tag
Used to add next line(line breaks) to your
page
<br>
Bold, Italic & Underline Tags
Used to highlight text in your
page
<b> Bold </b>
<i> Italic </ i >
<u> Underline </u>
Big & Small Tags
Used to display big & small text on your
page
<big> Big </big>
<small> Small </small>
Hr Tag
Used to display a horizontal ruler, used to separate
content
<hr>
Subscript & Superscript Tag
Used to display a horizontal ruler, used to separate
content
<sub> subscript </sub>
H2
O
<sup> superscript
</sup>
n
A+
B
Pre Tag
Used to display text as i t is (without ignoring spaces & next
line)
<pre> This
is a
sample
text.
</pre>
Level
3
Page Layout
Techniq
us uetsic tags for
ing Seman
layout
using the Right Tags
<header>
<main>
<footer>
Inside Main Tag
Section Tag For a section on your page
<section>
Article Tag For an article on your page
<article>
Aside Tag For content aside main
content(ads)
<aside>
Revisiting Anchor Tag
<a href="[Link] target="_main"> Google
</a>
for new tab
<a href="[Link] <img src="link">
</a>
clickable pic
Revisiting Image Tag
<img src="link" height=50px
>
set height
<img src="link" width=50px
>
set width
Div Tag
Div is a container used for other HTML
elements
Block Element (takes full width)
List : Div
Tag
< addrsess> <fieldset> <nav>
<article> <figcaption <noscript
> >
<aside>
<figure> <ol>
<blockquote
> <footer> <p >
<canvas> <form> <p r e >
<dd> <h1>-<h6> <section>
<div> <header> <table>
<dl> <hr> <tfoot>
<dt> <li> <ul>
Span Tag
Span is also a container used for other HTML
elements
Inline Element (takes width as per size)
<code <output>
List : Span >
<dfn> <q >
Tags <em> <samp>
<i> <script>
<a >
<img> <select>
<abbr>
<input> <small>
<acronym>
<kbd> <span>
<b >
<label> <strong>
<bdo>
<map> <sub>
<big>
<object <sup>
<br>
>
<button> <textarea
<tt>
<var >
<cite>
Level
P ro
List in HTML
Lists are used to represent real life list
data.
unordere ordere
d d
<ul> <ol>
<li> Apple </ li > <li> Apple </ li >
<li> Mango <li> Mango
</ li > </ li >
</ul> </ol>
Tables in HTML
Tables are used to represent real life table
data.
<tr> used to display table
row
<td> used to display table
data
<th> used to display table
header
Tables in Name Roll No
HTML
<table> Shradha 1664
<tr>
<th> Name </t h >
<th> Roll No </t h >
</tr>
<tr>
<td> Shradha
</t h >
<th> 1664 </t h >
</tr>
</table>
Caption in Tables
<caption> Student Data
</caption>
Student Data
Name
Sh radh Roll
1664No
a
thead & tbody in Tables
<thead> to wrap table
head
<tbody> to wrap table
body
colspan attribute
colspan="n"
used to create cells which spans over multiple
columns
Data
Shradh 1664
a
Ama 1890
n
Form in HTML
Forms are used to collect data from the
user
Eg- sign up/login/help requests/contact
me
<form>
form content
</form>
Action in
Form
Action attribute is used to define what action needs to
be performed when a form is submitted
<form action="/[Link]" >
Form Element :
Input
<input type="text" placeholder="Enter
Name">
Label
<label for="id1">
<input type="radio" value="class X" name="class"
id="id1">
</label>
<label for="id2">
<input type="radio" value="class X" name="class"
id="id2">
</label>
Class & Id
<div id="id1"
class="group1">
</div>
<div id="id2">
class="group1">
</div>
Checkbox
<label for="id1">
<input type="checkbox" value="class X" name="class"
id="id1">
</label>
<label for="id2">
<input type="checkbox" value="class X" name="class"
id="id2">
</label>
Textarea
<textarea name="feedback" id="feedback" placeholder="Please add
Feedback">
</textarea>
Select
<select name="city" id="city">
<option value="Delhi"> Delhi
</option>
<option value="Mumbai"> Delhi
</option>
<option value="Banglore"> Delhi
</option>
</select>
iframe Tag
website inside website
<iframe src="link">
Link </option>
Video Tag
<video src="myVid.mp4"> My Video
</video>
Attributes
- controls
- height
- width
- loop
- autoplay
All the very best in your
future journey :)
- Aman bhaiya & Shradha
didi