, ,

Address: [go: up one dir, main page]

Include Form Remove Scripts Session Cookies

,

, , , and as well as layout elements like

. It also covers lists, tables, forms, and multimedia elements. The document is intended as a reference for someone learning HTML.">, , ,

, , , and as well as layout elements like

. It also covers lists, tables, forms, and multimedia elements. The document is intended as a reference for someone learning HTML.">

Open navigation menu

Scribd

Search

0 ratings0% found this document useful (0 votes)

305 views48 pages

Class Notes On HTML and Css

This document provides an overview of HTML elements and tags used to structure web pages. It discusses basic tags like <html>, <head>, <body>, <p>, <h1-6>, <img>, and <a> as well as layout elements like <header>, <main>, <footer>. It also covers lists, tables, forms, and multimedia elements. The document is intended as a reference for someone learning HTML.

Uploaded by

Hussain Shabbir

Copyright

© © All Rights Reserved

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

0 ratings0% found this document useful (0 votes)

305 views48 pages

Class Notes On HTML and Css

This document provides an overview of HTML elements and tags used to structure web pages. It discusses basic tags like <html>, <head>, <body>, <p>, <h1-6>, <img>, and <a> as well as layout elements like <header>, <main>, <footer>. It also covers lists, tables, forms, and multimedia elements. The document is intended as a reference for someone learning HTML.

Uploaded by

Hussain Shabbir

Copyright

© © All Rights Reserved

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

You are on page 1/ 48

HTM L CS J

S S

S tru c tur e / la y o ut Sty l Logic

e
Level 1
HTM L
H y pe r Te xt Ma r k u p Language

HTML is t he code t ha t is 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 design 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

I t is 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 ags

< p > Thi s is a pa r ag r aph </ p >

Con t en t

Elemen t
Basic HTML Page
<!DOCTYPE h t ml > 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 > con t ain s all da t a r ende r ed b y t he b r o ws e r

< p > hello w o r ld </ p > pa r ag r aph t ag

</ bod y >

</ h t ml >
Q u ick Poin ts

H t ml t ag is pa r en t of head & bod y t ag

Mo st of h t ml elemen ts have opening & clo s ing tags

w i t h con t en t in be tw een

Some tags have no con t en t in be tw een , eg - < b r >

We can use 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
This is pa rt of code t ha t s ho u ld no t be pa rs ed .

HTML is NOT case s en s i t i v e

< h t ml > = < HTML >

< p > = <P >

< head > = < HEAD >

< bod y > = < BODY>

Level 2
Basic HTML Tags
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 t o di s pla y heading s in HTML

h1 ( mo st impo rt an t )

h2
h3

h4
(least impo rt an t )
h5
Par agr aph Tag
Used t o add pa r ag r aph s in HTML

< p > This is a s ample pa r ag r aph </ p >

Ancho r Tag
Used 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 t o add images t o y o ur page

< img sr c ="/ image . png " al t =" Random Image ">

r ela t i v e ur l
B r Tag
Used t o add ne xt line ( line br eak s ) t o y o ur
page

<br>
Bold , I t alic & Unde r line Tags
Used 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 Tags
Used 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 >

H r Tag
Used 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>
S u b s c r ip t & S u pe rs c r ip t Tag
Used 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 t o display t e xt as i t is ( w i t ho ut ignoring spaces & ne xt
line)

< p r e > This

is a
sample
t e xt .
</ p r e >
Level 3
Page La y o ut
Techniq u e s
using Semantic tags for
la y o ut
using t he Right Tags

<header>
<main>
< foo t e r >
Inside Main
Tag
Section Tag Fo r a section on y o ur page

<section>

A rt icle Tag Fo r an a rt icle on y o ur

page

< a rt icle >

Aside Fo r con t en t aside main
Tag content(ads)
<aside>
Revisiting Anchor
Tag
<a h r ef =" h tt p s :// google . com " t a r ge t ="_ main "> Google </ a >

for new t ab

<a h r ef =" h tt p s :// google . com "> <img sr c =" link ">
</ a >

clickable
pic
Revisiting Image
Tag
<img sr c =" link " heigh t=50px
>

s e t height

<img sr c =" link " w id t h = 50 p x

>

s e t w id t h
Div
Tag
Div is a container used for o t he r HTML
elements

Block Elemen t (takes full width)

Li st : Div
Tag s
<address> <fieldset> <nav>

< a rt icle > < figcapt ion> < noscr ipt >

<aside> <figure> <ol>

< blockqu ot e> < foo t e r > <p>

<canvas> <form> <pre>

<dd> < h 1 >-< h 6 > <section>

<div> <header> < t able >

<dl> <hr> < t foo t >

<dt> <li> <ul>

<main> <video>
Span
Tag
Span is also a container used for o t he r HTML
elements

Inline Elemen t (takes w id t h as pe r size)

< code> < o ut p ut >
Li st : Span <dfn> <q>
Tags <em> <samp>
<a> <i> < s c r ip t >
< abb r> <img> <selec t>
<acronym> < inp ut > <small>
<b> <kbd> <span>
<bdo> <label> <strong>
<big> <map> <sub>
<br> < object > <sup>
< b utt on > < tt > < t e xt a r ea >
< ci t e > < v ar > < time>
Level P r o
List in
HTML
Lists a r e used t o r ep r e s en t r eal life li st
da t a .

unordered or der e
d
< u l> < ol>
<li> Apple </ li > <li> Apple </ li >

<li> Mango </ li > <li> Mango </ li >

< / u l> < / ol>

Tables in
HTML
Tables a r e used t o r ep r e s en t r eal life table
da t a .
< tr > used t o display table
row
< t d> used t o display table
da ta
< t h> used t o display table
header
Tables in Name Roll No
HTML Shradha 1664
< table >
< tr >
< t h > Name </ t h >
< t h > Roll No </ t h >
</tr>
< tr >
< t d > Shradha </ t h >
< t h > 1664 </ t h >
</tr>
< / t able>
Caption in
Tables
<caption> S tu den t Da t a </ cap t ion >

S tu den t Da t a
Name Roll No
Shr adha 1664
thead & tbod y in
Tables
<t head > t o wr ap table
head

< t bod y > t o wr ap table

body
colspan a ttr ib ut e
col s pan ="n "
used t o c r ea t e cells which spans o v e r multiple
columns

Dat a
Shr adha 1664

Aman 1890
Fo r m in
HTML
Fo r m s a r e used t o collect da t a from t he
us e r

Eg- sign u p/ login/ help r equ ests / cont act me

<form>

for m cont ent

</ fo r m >
Action in
Fo r m
Action a ttr ib ut e is used t o define w ha t action needs t o
be performed when a form is su bmi tt ed

<form ac t ion ="/ ac t ion . php " >

Fo r m Elemen t : Inp ut

< inp ut ty pe =" t e xt " placeholde r =" En t e r

Name ">
Label

<label fo r =" id 1 ">

< input ty pe=" r adio" v alu e=" class X " name=" class "
id=" id1 " >

</ label >

<label fo r =" id 2 ">

< input ty pe=" r adio" v alu e=" class X " name=" class "
id=" id2 " >

</ label >

Cla ss &
Id
<div id =" id 1 " cla ss =" g r o u p 1 ">

</ di v >

<div id =" id 2 "> cla ss =" g r o u p 1 ">

</ di v >
Checkbox

<label fo r =" id 1 ">

< input ty pe=" checkbox " v alu e=" class X " name=" class "
id=" id1 " >

</ label >

<label fo r =" id 2 ">

< input ty pe=" checkbox " v alu e=" class X " name=" class "
id=" id2 " >

</ label >

Textarea

<textarea name="feedback" id="feedback" placeholde r="Please add

Feedback ">

</ t e xt a r ea >
Select

<select name =" ci ty " id =" ci ty ">

<option v al u e =" Delhi "> Delhi

</option>

< option v alu e=" M u mbai" > Delhi

< / option>

< option v alu e=" Banglor e" > Delhi

< / option>

</ s elec t >

iframe
Tag
w ebsite inside website

< ifr ame sr c=" link" >

Link < / option>
Video
Tag
<video sr c =" m y Vid . mp 4 "> M y Video
</ v ideo >

Attributes

- controls
- height
- width
- loop
- autoplay
All the v e ry best in y o ur
f utur e journey :)

- Aman bhaiya & Shradha

didi

You might also like

W3Schools C
No ratings yet
W3Schools C
78 pages
01 HTML (1)
No ratings yet
01 HTML (1)
96 pages
Javascript
No ratings yet
Javascript
145 pages
SQL Material
No ratings yet
SQL Material
176 pages
HTML
No ratings yet
HTML
76 pages
Nodejs at A Glance
No ratings yet
Nodejs at A Glance
66 pages
WT Course Material
No ratings yet
WT Course Material
164 pages
PHP Tutorial
No ratings yet
PHP Tutorial
432 pages
CSIT128 All Slides
No ratings yet
CSIT128 All Slides
421 pages
Built-In Objects in Javascript
No ratings yet
Built-In Objects in Javascript
39 pages
WIDT UNIT-III
100% (1)
WIDT UNIT-III
50 pages
HTML Intuitive Guide I PDF
No ratings yet
HTML Intuitive Guide I PDF
218 pages
Jquery Print
No ratings yet
Jquery Print
101 pages
Computer Network Lab PDF
No ratings yet
Computer Network Lab PDF
79 pages
Jntu Mca Linux Lab Programs
No ratings yet
Jntu Mca Linux Lab Programs
23 pages
Mind Map Database
No ratings yet
Mind Map Database
6 pages
!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
No ratings yet
!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
113 pages
JavaScript Tutorial
No ratings yet
JavaScript Tutorial
366 pages
HTML Interview Questions and Answers
No ratings yet
HTML Interview Questions and Answers
56 pages
P2S1 It RM
No ratings yet
P2S1 It RM
129 pages
Intro To JavaScript Ojects
No ratings yet
Intro To JavaScript Ojects
85 pages
Client Side Scripting - 6thecture
No ratings yet
Client Side Scripting - 6thecture
101 pages
.What Is HTML?: Example Explained
100% (1)
.What Is HTML?: Example Explained
162 pages
04 Javascript
No ratings yet
04 Javascript
51 pages
Lecture 1 HTML & Css
No ratings yet
Lecture 1 HTML & Css
92 pages
HTML
No ratings yet
HTML
68 pages
Lec4 Web Programming
No ratings yet
Lec4 Web Programming
37 pages
HTML Css W3schools
No ratings yet
HTML Css W3schools
54 pages
Unit - 2 PHP Basics: Learning Objectives
No ratings yet
Unit - 2 PHP Basics: Learning Objectives
45 pages
Node JS
No ratings yet
Node JS
95 pages
PHP File Handling: Reading From Files With PHP Function
No ratings yet
PHP File Handling: Reading From Files With PHP Function
13 pages
Java Web Development Course: Writing CSS Codes
100% (1)
Java Web Development Course: Writing CSS Codes
50 pages
HTML
No ratings yet
HTML
33 pages
Bootstrap
No ratings yet
Bootstrap
17 pages
Chapter Three: Javascript
No ratings yet
Chapter Three: Javascript
23 pages
CSS Notes & HTML Notes
100% (1)
CSS Notes & HTML Notes
5 pages
More Elements in HTML: A. Multiple Choice Questions
100% (1)
More Elements in HTML: A. Multiple Choice Questions
5 pages
Unit Ii: Advanced Concepts in HTML
No ratings yet
Unit Ii: Advanced Concepts in HTML
26 pages
AJP Lab Manual
No ratings yet
AJP Lab Manual
21 pages
WT Practical
No ratings yet
WT Practical
55 pages
Features of Java - Core Java Tutorial - Studytonight
100% (1)
Features of Java - Core Java Tutorial - Studytonight
4 pages
HTML Tutorials - I-Tech Software Education
100% (1)
HTML Tutorials - I-Tech Software Education
50 pages
Java EE694c
100% (1)
Java EE694c
8 pages
WD File
No ratings yet
WD File
59 pages
SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021
No ratings yet
SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021
8 pages
OOP in C++
88% (8)
OOP in C++
23 pages
UIJAVAKIT
100% (1)
UIJAVAKIT
33 pages
Javascript Programs
No ratings yet
Javascript Programs
6 pages
JavaScript Notes
No ratings yet
JavaScript Notes
31 pages
Salary - SQL Interview Queries Examples For Fresher and Exprinced Set-4 Interview Questions PDF
No ratings yet
Salary - SQL Interview Queries Examples For Fresher and Exprinced Set-4 Interview Questions PDF
8 pages
Javascript Notes
No ratings yet
Javascript Notes
54 pages
Html5 Overview
No ratings yet
Html5 Overview
1 page
Pgdca 2 Sem PDF
No ratings yet
Pgdca 2 Sem PDF
11 pages
WD - Final Question Bank Students
100% (1)
WD - Final Question Bank Students
1 page
HBase Administration Cookbook
From Everand
HBase Administration Cookbook
Yifeng Jiang
No ratings yet
Mastering Java Persistence: From Basics to Expert Proficiency
From Everand
Mastering Java Persistence: From Basics to Expert Proficiency
William Smith
No ratings yet
Building Websites with VB.NET and DotNetNuke 4
From Everand
Building Websites with VB.NET and DotNetNuke 4
Daniel N. Egan
1/5 (1)
C & Data Structures
From Everand
C & Data Structures
Prof. P. Padmanabham
No ratings yet
The Datadog Handbook: A Guide to Monitoring, Metrics, and Tracing
From Everand
The Datadog Handbook: A Guide to Monitoring, Metrics, and Tracing
Robert Johnson
No ratings yet
Java servlet Second Edition
From Everand
Java servlet Second Edition
Gerardus Blokdyk
No ratings yet

Footer menu

About

About Scribd, Inc.
Everand: Ebooks & Audiobooks
SlideShare
Join our team!
Contact us

Support

Help / FAQ
Accessibility
Purchase help
AdChoices

Legal

Terms
Privacy
Copyright
Do not sell or share my personal information

Social

Instagram Instagram
Facebook Facebook
Pinterest Pinterest

Get our free apps

About

About Scribd, Inc.
Everand: Ebooks & Audiobooks
SlideShare
Join our team!
Contact us

Legal

Terms
Privacy
Copyright
Do not sell or share my personal information

Support

Help / FAQ
Accessibility
Purchase help
AdChoices

Social

Instagram Instagram
Facebook Facebook
Pinterest Pinterest

Get our free apps

Documents

Language:

Copyright © 2025 Scribd Inc.

We take content rights seriously. Learn more in our FAQs or report infringement here.

We take content rights seriously. Learn more in our FAQs or report infringement here.

Language:

Copyright © 2025 Scribd Inc.