Scribd
Upload
3 views30 pages

Html & css

The document provides a comprehensive overview of HTML and CSS, detailing the structure of HTML documents, various HTML tags, and their functions such as headings, paragraphs, lists, and forms. It also covers CSS coding principles including borders, padding, margins, text formatting, and layout techniques like Flexbox. Additionally, it discusses advanced CSS properties like overflow, z-index, and navigation styling.

Uploaded by

vanshikasingh404
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
3 views30 pages

Html & css

The document provides a comprehensive overview of HTML and CSS, detailing the structure of HTML documents, various HTML tags, and their functions such as headings, paragraphs, lists, and forms. It also covers CSS coding principles including borders, padding, margins, text formatting, and layout techniques like Flexbox. Additionally, it discusses advanced CSS properties like overflow, z-index, and navigation styling.

Uploaded by

vanshikasingh404
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/ 30

HTML

STRUCTURE/LAYOUT
HTML(HYPER TEXTMARKUP
LANGUAGE)
HTML is a code that is used to structure
A web page and its content.

The component is used to design the


Structure of websites are called HTML tags.
First html file:- HTML tags

Index.html A container for some content or

It is the default page for your Other html tags.

Website’s homepage. <p>This is a paragraph</p>

element
BASIC HTML PAGE:-
<!DOCTYPEhtml>
<html> root of an html document
<head> container for megadata
<title>------doc-----</title>
</head>
<body> contains all the data rendered by
browser
<p>hello world</p> paragraph tag
</body>
</html>
• This part • <html>=<HTM • This is used to
should not L> add some extra
• <p>=<P> information to
be praised. • <head>=<HE tags.
• <!--- AD>
comment--- • <body>=<BO
Html is BASIC
Comment DY>
s>
not case HTML
in html
sensitive TAGS
IMAGE
HEADING TAG PARAGRAPH TAG ANCHOR TAG
TAG
• Use to display • Use to add • Use to add link to • Use to add image
heading in html. paragraph in your page. to your page.
• H1(most imp.) html. • <img
• H2 • <p>--abc---</p> • <a src=“/image.png”
• H3 href=“https://goo alt=“random
• H4 gle. image”>
• H5 • com”>
• H6(least imp.)

Br tag/hr tags Highlight tags OTHERS


• Add break in lines. • <b>BOLD</> • <big>big</big>
• <br></br> • <i>ITALIC</i> • <small>small</
• Use to show • <u>UNDERLINE</ small>
horizontal ruler . u> • <pre>use to
• <hr> • <sub>h2o</sub> insert text without
• H2O ignoring space
• <sup></sup> and next
Pag
e • Using semantic tags for layout.
layo • <header>,<main>,<footer>
ut
tech
niqu
e
• For section<section>
Insi
de • For an article<article>
Mai • For content aside main content(ads)<aside>
n
tag
• <a href="https://google.com”
Revi
sitin
target=“_main”>google</a>
g • <a href="https://google.com” ><img
Anc src=“link”</a>
hor
tag

Revi • <img src=“link” height=50px>


sitin
g • <img src=“link” width=50px>
Img
tag
Div • Div is a container used
for

Tag • Other html element.


• Block element (takes
full width)

List : Div Tag


<address> <dl> <header> <p>

<article> <dt> <hr> <pre>

<aside> <fieldset> <li> <section>

<blockquote> <figure> <main> <table>

<canvas> <footer> <nav> <tfoot>

<dd> <form> <noscript> <ul>

<div> <h1>--<h6> <ol> <video>


Span • span is a container used
for

Tag • Other html element.


• inline element (takes full
width)

List : Span Tag


<a> <button> <select> <samp>

<abbr> <code> <script> <strong>

<acronym> <i> <output> <sub>

<b> <img> <dfn> <sup>

<bdo> <input> <em> <q>

<big> <label> <kbd> <small>

<br> <map> <object>


LIST IN HTML
Lists are used to represent real life list data.

UNORDERED ORDERED
<ul> <ol>
<li><li> <li><li>
<li><li> <li><li>
</ul> </ol>
TABLE IN Student
HTML Data ROLL
NAME
<TABLE>
NO
GUNGUN 8756
<tr>
<li>NAME</li>
<li>ROLL NO</li>
Caption in tables
</tr>
<caption>Student
<tr> Data</caption>
<li>GUNGUN</li>
<li>8756</li> <thead>- to wrap table
</tr> head.
<tbody>- to wrap table
</table> body
HTML
FORM IN HTML ACTION IN HTML
Forms are used to collect data Action attribute is used to
from the define what
User. Action needs to be performed
when a
Eg- signup/login/help Form is submitted.
request/contact me

<form action=“/action.php” >


<form>
From content
</form>
Form Element : Input
<input type= “text” placeholder= “enter name” >

LABEL
<label for = “id1”>
<input type= “radio” value= “classX” name=“class” id=“id1”>
</label>

<label for= “id2”>


<input type = “radio” value= “classX” 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= “classX” name=“class”
id=“id1”>
</label>

<label for= “id2”>


<input type = “checkbox” value= “classX” name=“class”
id=“id2” >
</label>

TEXTAREA
<textarea name= “feedback” id=“feedback” placeholder=“pls add
feedback”
</textarea>

IFRAME TAG
Website inside website.
<iframe src= “link”>link</option>
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= “muvid.mp4> My Video </video>

Attributes

-controls
-height
-width
-loop
-autoplay
CSS CODING
 BORDERS:-
Border-style:;(solid ,dotted ,dashed ,groove ,hidden ,none ,double ,rigid )
(solid-dotted , solid-dashed, dashed-groove------)
Border-left-color:;(red, green, yellow, blue, pink, white, black )
Border-right-color:;(red, green, yellow, blue, pink, white, black )
Border-top-color:;(red, green, yellow, blue, pink, white, black )
Border-bottom-color:;(red, green, yellow, blue, pink, white, black )
Border-width:; ( 2px, 4px, 5px, 6px, -------)
Outline-style:;(same as same)
Outline-color:;(any)
Outline-offset:; ( 2px, 4px, 5px, 6px, -------)
Outline-width:; ( 2px, 4px, 5px, 6px, -------)
CSS
 Writing mode values:-
Writing-mode : vertical-rl ;
: vertical-lr ;
: sideways – rl ;
: sideways – lr;
: horizontal – tb;
 Column count:3;
column- gap : 100px;
column – rule – width: 2px;
column – rule – style : solid/dashed/double/groove;
column – rule – color : red;
column – width: 150px ;
column – span: all/none ;
CSS CODING
 Padding:; ( 2px, 4px, 5px, 6px, -------)
 Padding-top:; ( 2px, 4px, 5px, 6px, -------)
 Padding-bottom:; ( 2px, 4px, 5px, 6px, -------)
 Padding-left:; ( 2px, 4px, 5px, 6px, -------)
 Padding-right:; ( 2px, 4px, 5px, 6px, -------)

MARGIN
 Margin:; ( 2px, 4px, 5px, 6px, -------)
 Margin-top:; ( 2px, 4px, 5px, 6px, -------)
 Margin-right:; ( 2px, 4px, 5px, 6px, -------)
 Margin-left:; ( 2px, 4px, 5px, 6px, -------)
 Margin-bottom:; ( 2px, 4px, 5px, 6px, -------)
CSS CODING

TEXT FORMATTING
Text-align:;(left, right ,center)
Text-transform:;(lowercase, capitalize)
Text-shadow:;(top right obesity grey)
Text-decoration:;(underline ,line-through)
Text-indent:; (any size)
Letter-spacing:; (any size)
Line-height:; (any size)
Direction:; ( rtl , ltr )
Word-spacing:; (any size)
CSS CODING
 BACKGROUND:-
Background – img : url();
Background-color:;(any)
Background-attachment:;(scroll/fixed)
Background-repeat:;(repeat /no-repeat /repeat-x /repeat-y )
Background-position:;(left-top /left-center /left-right)
(right-top /right-center /right-right)
(center-top /center-center /center-right)
Background-sixe;(cover, contain, auto)
CSS CODING
A{
Color;:
Background-color:;
}
A:hover{
Color;:
Background-color:;
}
P{
Font-family:;
Font-size:;
Font-weight:;
}
CSS CODING
Z-INDEX:-
IT decide the stack level of elements.
overlapping elements with larger z-index cover those with a smaller
one.
z-index:0
z-index: 1/2/3------- (most)
z-index: -1/-2/-3------- (least)

FLEXBOX(Flexible box layout):-


It is a one dimensional layout method for arranging items in rows
or
columns.
CSS CODING
 FLEXBOX DIRECTION:-
Flexbox direction : row;
Flexbox direction: row-reverse;
Flexbox direction: column;
Flexbox direction: column-reverse;

FLEXBOX PROPERTY :-
Justify-content : alignment along the main axis.
flex-start/flex-end/centre/space-evenlt;
Flex-wrap : nowrap / wrap / wrap-reverse
Align-items : alignment across the cross axis.
Align-content : alignment of space between & around the content
css
 BOX MODEL:- CLEAR FLOAT :-
h2{ Img {
Background – color Float : left;
:red ; Margin – right :20px;
Padding : 30px; }
.abc{
Border: 4px solid
black; Clear : left ;
Margin : 50px ; : right ;
} : both ;
}
css
FLOAT:- MAX-WIDTH / MIN-WIDTH :-
IMG{ P{
Border : 1px solid red;
float: left;
Max/min – width : 500px;
} Margin : 0 ;
.box{ }
Height : 30px;
Background-color: red;
Width : 50px; ADVANCED COLOR:-
Body{
Float : left;
Background – color: #000000;
Margin-left : 10px; : #ffffff;
} : rgb(255 ,
35 ,44)
}
GRADIENT COLOR:-
Background – image :
linear/ radial-Gradient(red, yellow,
green)
css
<div>
<p></p>
</div>
Body { Overflow : scroll ; }
Div{
Background – color : lightgreen;
width : 400px ;
height : 150px;
overflow : hidden / scroll / unherit / auto
/visible ; }

OPACITY :-
H{opacity : 0.1 ;
<img src = “ ”>
}
css
 OVERFLOW :-
The overflow properly specifies whether to clip content or to add scroll
bars . When the content of an element is too big to fit a specifies area .
The overflow properly has the following values.
 VISIBLE :-
Default the overflow is not clipped . It renders outside the element’s box
.
 HIDDEN :-
The overflow is clipped and the rest of the content will be invisible.
 SCROLL :-
The overflow is clipped to set the rest of content.
 AUTO :-
The overflow is clipped a scrollbar should be added to see the rest of the
content.
TEXT – OVERFLOW VALUES
Text – overflow : ellipsis;
: “[ * * ]” ;
: clip;

Basic Navigation using HTML CSS

<body>
<ul>
<li> home </li>
<li> about us </li>
<li> services </li>
<li> products </li>
<li> contact us </li>
</ul>
Ul{
Margin: 0px;
Padding: 0px;
List – style: none;
Height: 36px;
Background – color : #000000;
Font – family : arial;
Font – size: 13px;
}
Li{
Float: left;
Border: 2px solid black;
}
.a{
Display: block;
Padding: 28px;
Color: #ffffff;
Text-decoration: none;}
A:hover{
Background- color: blue;}
Z-index

You might also like