Scribd
Upload
63 views44 pages

HTML Notes

HTMl notes for web development

Uploaded by

Charvik Reddy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
63 views44 pages

HTML Notes

HTMl notes for web development

Uploaded by

Charvik Reddy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 44

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

You might also like