HTML CSS JS
Structure/ Styl Logi
layout e c
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
index.html
I t is the default name for a website's
homepage
A container for some content or other
HTML tags
<p> This is a
paragraph </p>
Conten
t
HTML TAG
Eleme
nt
BASIC HTML PAGE
<!DOCTYPE tells the browser you are using
HTML5
html> root of an html
document
<html> container for
metadata
<head >
<title>My First page
title
Page</title>
</ head
<bod y>> contains all data rendered by the
browser
<p>hello paragraph
world</p> 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>
BASIC HTML
TAGS
HTML Attributes
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
h
2
h3 (least
important)
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="https://google.com">
Google </a>
IMAGE TAG
Used to add images to your page
<img src="/image.png" 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>
PAGE LAYOUT
TECHNIQUES
using Semantic tags for
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="https://google.com" target="_main">
Google </a>
for new tab
<a href="https://google.com"> <img
src="link"> </a>
clickable pic
DIV TAG
Div is a container used for other HTML
elements
Block Element (takes full width)
LIST : DIV
TAGS
<address> <fieldset <nav>
> <noscrip
<article>
<figcaptio t>
<aside> n> <ol>
<blockquot <figure>
e> <p>
<footer> <pre>
<canvas>
<form> <section
<dd>
<h1>- >
<div> <h6> <table>
<dl> <header> <tfoot>
<dt> <hr> <ul>
SPAN TAG
Span is also a container used for other HTML
elements
Inline Element (takes width as per size)
<CODE> <output>
List : Span Tags <dfn> <q>
<a> <em> <samp>
<abbr> < i> <script>
<acronym> <img> <select>
<b> <input> <small>
<bdo> <kbd> <span>
<big> <label> <strong>
<br> <map> <sub>
<button> <object> <sup>
<cite> <tt> <textarea>
<var> <time>
LIST IN HTML
Lists are used to represent real life
list data.
unorder ordere
ed d
<ul <ol
> >
<li> Apple <li> Apple
</ li > </ li >
<li> Mango <li> Mango
</ li > </ li >
</ </
ul> ol>
TABLES IN HTML
Tables are used to represent real life
table
<tr daus
taed
. to display table
> row
used to display table
<td data
<th used to display table
>
> header
Tables in NAME Roll No
HTML
<table>
John 1664
<tr>
<th> Name
</t h >
<th> Roll No
</t h >
</tr>
<tr>
<td> Shradha
</t h >
</
table> <t h> 1664
</t h >
CAPTION IN TABLES
<caption> Student Data
</caption>
Student Data
Name Roll
John 166No
4
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
John 166
4
Ama 189
n 0
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="/action.html" >
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"
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">
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>
VIDEO TAG
<video src="myVid.mp4">My Video </video>
A ttributes
controls
height
- width
loop
autoplay
TASK-1
Create a simple Student Registration Form using only
HTML. The form should include fields for name,
email, password, gender selection (radio button),
course selection (checkbox), and a submit button.
Task-2
Create a simple Tourist Places Webpage that showcases
three famous destinations with their images and
descriptions. Clicking on the images should redirect the
user to a webpage for more details.
TASK-3
Create a Favorite Movie List page that
displays a table of movies with their
posters, names, and release years.