HTML CSS JS
Structure/layout Style Logic
HTML
Hyper Text Markup Language
HTML i s t he code t ha t i s us ed t o
stru c tur e a w eb page and i ts con t en t .
The componen t us ed t o de s ign t he
stru c tur e of w eb s i t e s a r e called HTML t ag s .
Fi rst HTML File
inde x . h t ml
It i s t he defa u l t name fo r a w eb s i t e ' s homepage
HTML Tag
A con t aine r fo r s ome con t en t o r o t he r HTML t ag s
<p> This is a paragraph < / p >
Con t en t
Elemen t
Basic HTML Page
<!DOCTYPE html> t ell s b r o ws e r y o u a r e us ing HTML 5
< h t ml > r oo t of an h t ml doc u men t
<head> con t aine r fo r me t ada t a
< t i t le > M y Fi rst Page </ t i t le > page t i t le
</ head >
< bod y >
</ h t ml >
< p > Techie
CodeBuddy </ p >
</ bod y >
Q u ick Poin ts
H t ml t ag i s pa r en t of head & bod y t ag
Mo st of h t ml elemen ts ha v e opening & clo s ing t ag s
w i t h con t en t in be tw een
Some t ag s ha v e no con t en t in be tw een , eg - < b r >
We can us e in s pec t elemen t / v ie w page s o ur ce t o edi t h t ml
Commen ts in HTML
Thi s i s pa rt of code t ha t s ho u ld no t be pa rs ed .
<!-- Thi s i s an HTML Commen t -->
HTML is NOT case sensitive
< h t ml > = < HTML >
<p> = <P>
<head> = <HEAD >
<body> = <BODY >
Basic HTML Tag s
HTML A ttr ib ut e s
A ttr ib ut e s a r e us ed t o add mo r e info r ma t ion t o t he t ag
< h t ml lang =" en ">
Heading Tag
Used to display headings in HTML
h1 ( mo st impo rt an t )
h2
h3
h4
h5
h6 ( lea st impo rt an t )
Paragraph Tag
Used to add paragraphs in HTML
< p > Thi s i s a s ample pa r ag r aph </ p >
Anchor Tag
U s ed t o add link s t o y o ur page
< a h r ef =" h tt p s :// google . com "> Google </ a >
Image Tag
Used to add images to your page
< img sr c ="/ image . png " al t =" Random Image ">
r ela t i v e ur l
Br Tag
U s ed t o add ne xt line ( line b r eak s ) t o y o ur page
<br>
Bold , I t alic & Unde r line Tag s
U s ed t o highligh t t e xt in y o ur page
< b > Bold </ b >
< i > I t alic </ i >
< u > Unde r line </ u >
Big & Small Tag s
U s ed t o di s pla y big & s mall t e xt on y o ur page
< big > Big </ big >
< s mall > Small </ s mall >
Hr Tag
U s ed t o di s pla y a ho r i z on t al ru le r , us ed t o s epa r a t e con t en t
<hr>
Subscript & Superscript Tag
U s ed t o di s pla y a ho r i z on t al ru le r , us ed t o s epa r a t e con t en t
< su b > su b s c r ip t </ su b >
H 2O
< su p > su pe rs c r ip t </ su p >
n
A +B
Pre Tag
Used to display text as it is (without ignoring spaces & next line)
<pre> This
is a sample
text.
</ p r e >
Page Layout Techniques
using Semantic tags for layout
using the Right Tags
<header>
<main>
< foo t e r >
Inside Main Tag
Section Tag For a section on your page
<section>
Article Tag For an article on your page
< a rt icle >
Aside Tag For content aside main content(ads)
<aside>
Revisiting Anchor Tag
<a href="https://google.com" target="_main"> Google </a>
for ne w tab
<a href="https://google.com"> <img src="link"> </a>
clickable pic
Revisiting Image Tag
<img src="link" height=50px >
set height
<img src="link" width=50px >
s e t w id th
Div Tag
Div is a container used for other HTML elements
Block Element (takes full width)
List : Div Tags <main>
<address> <fieldset>
< a rt icle > <figcaption>
<aside> <figure>
<blockq uote> < foo t e r >
<canvas> <form>
<dd> < h 1 >-< h 6 >
<div> <header>
<dl> <hr>
<dt> <li>
Span Tag
Span is also a container used for other HTML elements
Inline Element (takes width as per size)
<code> < v a r>
List : Span Tags <dfn>
<a> < em>
<abbr> <i>
<acronym> <img>
<b> < inp ut >
<bdo> <kbd>
<big> <label>
<br> <map>
< b utt on > < object>
< ci t e > <tt>
List in HTML
Lists are used to represent real life list data.
u no r de r ed o r de r ed
<ul> <ol>
<li> Apple </li> <li> Apple </li>
<li> Mango </li> <li> Mango </li>
</ u l > </ 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 HTML Name Roll No
Anshika 1804
< t able >
<tr>
<th> Name </th>
<th> Roll No </th>
</tr>
<tr>
<td> Anshika </th>
< t h > 1804 </ t h >
</tr>
</ t able >
Caption in Tables
<caption> Student Data </caption>
S tu den t Da t a
Name Roll No
Anshika 1804
thead & tbody in Tables
<thead> to wrap table head
<tbody> to wrap table bod y
colspan attribute
colspan="n"
used to create cells which spans over multiple columns
Da ta
Anshika 1804
Saksh 1890
For m in HTML
Forms are used to collect data from the user
Eg- sign up/login/help requests/contact me
<form >
form content
</ fo r m >
Action in Form
Action attribute is used to define what action need s to be
performed when a form is submitted
<form action="/action.php" >
For m Elemen t : Input
<input type="text" placeholde r="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">
</ di v >
<div id="id2"> class="group1">
</ di v >
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">
</ t e xt a r ea >
\
Select
<select name="city" id="city">
<option value="Delhi"> Delhi </option>
<option value="Mumbai"> Delhi </option>
<option value="Banglore"> Delhi </option>
</ s elec t >
iframe Tag
website inside website
<iframe src="link"> Link </option>
Video Tag
<video src="myVid.mp4"> M y Video </video>
Attributes
- controls
- height
- width
- loop
- autoplay
