Css

HTML
STEP 1. WHAT IS HTML ?

Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
STEP 2. WHAT IS HTML TAG ?
HTML tag is the container it's Contains everything you want.

According to the tag name
for every work have a separate TAG
ex : - for image showing in html have <img> tag
STEP #3 . Basic HTML Tag
<html> it is ROOT of any webpage

<head> Contains metadata/information for the document
<title> Defines a title for the document
<body> Defines the document's body (all information of webpage)
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
STEP 4 . What is an HTML Element?

<body>
<p>
Rohit kumar ----------->elements
</p>
</body>
An HTML element is defined by a start tag, some content, and an end tag:
STEP 5. WHAT IS ATTRIBUTES ?
<body style="color: red;" class="" id="" data-=""-----------------> attributes >

dfdsff ------------------>elements
</body>
All HTML elements can have attributes

Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
< in the html tag everything is attributes> </>
STEP 6. HTML COMMENTS


for inline and multiline
why comments is important
STEP 7 . Formatting
<b> Defines bold text

<strong> Defines bold text
<big> Not supported in HTML5. Use CSS instead.
STEP 8 . Defines big text
<center> Not supported in HTML5. Use CSS instead.

<code> Defines a piece of computer code
STEP 9 . Defines font, color, and size for text
<pre> Defines preformatted text

<q> Defines a short quotation
<small> Defines smaller text
<sub> Defines subscripted text
<sup> Defines superscripted text
STEP 10 . Defines teletype text
STEP # 11 . Forms and Input Tag Description
<form> Defines an HTML form for user input

<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<option> Defines an option in a drop-down list
<label> Defines a label for an <input> element
STEP 12 . Frame
<iframe> Defines an inline frame
STEP #13 . Images

<img> Defines an image
STEP *14 . Audio / Video
<audio> Defines sound content

<source>Defines multiple media resources for media elements (<video>, <audio> and
<picture>)
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines a video or movie
STEP #15 . Links
<a> Defines a hyperlink=
STEP 16 . Lists
<ul> Defines an unordered list

<ol> Defines an ordered list
<li> Defines a list item
STEP 17 . Tables
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
STEP 18 . Styles and Semantics
<style> Defines style information for a document

<div> Defines a section in a document
<span> Defines a section in a document
<header> Defines a header for a document or section
<footer> Defines a footer for a document or section
<main> Specifies the main content of a document
<section> Defines a section in a document
<article> Defines an article
<aside> Defines content aside from the page content
STEP 20 . Programming
<script> Defines a client-side script
Extra
* Meta Info
<head> Defines information about the document

<meta> Defines metadata about an HTML document
<base> Specifies the base URL/target for all relative URLs in a document
<basefont> Not supported in HTML5. Use CSS instead.
STEP 21. HTML END
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%
}
1 inline css
2 internal css
3 external css
4 css id (# we used )
5 css class (. we used )
6 background colour- bule etc,width:100%,height :100%
7 background image: url(----)
8 backgroung-repeat: no-repeat ,reapeat , repeat-x, repeat-y
9 background-size:100%, cover
9 background-attachment:fixed
10 font-family = anything ,notable ,sans-serif
11 font-style = italic
12 font-variant= small caps
13 font-size = 2em,20px,20%
14 font-weight= 100 to 900
15 latter-spacing: 2px
16 word-spacing= 2px
17 direction= ltr,rtl
18 text-indent= first line space in sentance (-)25%,50%,75%,100%
19 text-alin= right,left,center justify(jaha p pura space le lega wo pure line ki)
20 text-transform: uppercase,captalise ,loarcase
20 text-decoration :underline ,none,linethrugh,upperline
20b text-shedow
21 link css -> link,visited, over, active
-->a:
link{colour=red },a:visited{colour=red },a:over{colour=red },a:active{colour=red },
22 border:5px solid blue (it is short hand 1, size 2,style of border 3,color)
22 border radius:2px
2 3 ul{list-style-type: square;,disk ,dot}
24 ol{list-style-type: lower-alpha,uper-alpha,lower-roman,uper-roman,;}
25 padding: top right bottom left(5px 20px 5px 20 px),top-bottom right-left (10px
20px)
26 margin: top right bottom left(5px 20px 5px 20 px),top-bottom right-left (10px
20px)
27 scrollbars(overflow: visible , hidden, scroll, auto,)
28 position: relative jaha h wahi man leta h normal
29 position: absolute first wale div ko hi parent man leta h * (jab bhi postion
dete last wala div hi top p dhikta h )
*jese hi postion use karte h extra 4 property wo use kar sakte h (left:0 ,
right:0 , bottom:0
30 postion: fixed
31 positon: sticky ( for using in nav bars ) margin-top= 0
32 z-index: 1 to 10000 (jiska subse jada z index wo hi subse phele dhikta h)
33 preority bhadne k lie (!imporetant ) use karte h
34 display: none, inline(jitne m item h utna hi space leta h),block(jitne space
utna pura leta h)
, inline-block( isme chote chote space hi lete h )
35 cursor: auto, crosshair pointer,text ,e-resize etc
36 float-left : (use )
37 float-right ( isme use line ki space lega or left or right hoga use line m dono
left rigt ho jaynge )
38 text-alin = right,left,cent (isme pura line lega fir left hota h pure line m
left hoga or right )
38 display: inline , block, inline-block, none
38 position:relative
38 position:absolute (yaha p abosulte lagte hi )
FLEX BOX
39 display: flex (isem sare items line m aa jate h)
40 flex-direction: row, row-reverse,column ,column-reverse
flex likhte hi justify-content use kar sakte h
41 justify-content: center, flex-start,flex-end (justify content ko horizonatial k
lie use karte h)
42 justify-content: space-evenly,justify-content:flex-start,justify-content:flex-
end
43 justify-content: space-around
44 justify-content: space-between (sare box side or bich m space aa jayega )
45 alin-item: flex-strart, felx-end, stratch ( alin-item ko vertical k lie use
karte h )
alin-content: center (bich m wrap hote time space na le wo islye alien-content
use karte h )
45 alin-items: flex-start, flex-end , center (alin-item ko vertical k lie use
karte h)
46 @media all(min-width:700px){section{ isplay; flex;justify-content;alin-item
center}}
display flex usme lagte h jisme sare box ya div likhe jate h
47 flex-wrap:wrap
48 flex-flow; row-reverse wrap;,column wrap (short hand property use kartenh 2no
sath m)
49 flex =2 , flex-grow , flex-shrink, flex-basis ise m width use karte h
49 flex-basis: 30% ye barabar width:30% but flex-basis use kar sakte h jada
reseponsive k lie
GRID
50 display: grid
51 grid-templates-row: 150px 150px;
52 grid-templates-column: 150px 150px 150px (*1fr 1fr 1fr for taking full space );
repeat(3 ,1fr), repeat(auto-fill, 1fr)
53 gird-row-gap: 20px
54 gird-column-gap: 20px
55 grid-gap: 20px (yaha row or column dono ka sath m hogaya h) short hand property
h
56 jisko humne height de h define kia h wo (explict) and jisko nhi kia h (implecit
)
57 grid-row-start:1;grid-row-end:3; ->grid-row:1/2
58 grid-row-start:2;grid-row-end:4; ->grid-row:2/4
59 grid-column : pura spain ho jayega 1 to 4 tak *(1/-1)(1/span3)
60 grid-auto-rows: 150px (explict k ilawa sare abbb auto 150 ho jaynge ) subke
lkarne k lie use karte h
61 align-items: center start stratch end
62 justify-content:start , center
63 justify-items : start/end/stratch/center
64 grid-templates-column: repeat(auto-fill, minmax(1fr,1fr)) for responsive
65
66

Css

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css

Uploaded by

Copyright:

Available Formats

HTML

STEP 1. WHAT IS HTML ?

STEP 2. WHAT IS HTML TAG ?

HTML tag is the container it's Contains everything you want.

STEP #3 . Basic HTML Tag

<html> it is ROOT of any webpage

STEP 4 . What is an HTML Element?

STEP 5. WHAT IS ATTRIBUTES ?

<body style="color: red;" class="" id="" data-=""-----------------> attributes >

All HTML elements can have attributes

STEP 6. HTML COMMENTS

<b> Defines bold text

STEP 8 . Defines big text

<center> Not supported in HTML5. Use CSS instead.

STEP 9 . Defines font, color, and size for text

<pre> Defines preformatted text

STEP 10 . Defines teletype text

STEP # 11 . Forms and Input Tag Description

<form> Defines an HTML form for user input

<iframe> Defines an inline frame

STEP #13 . Images

STEP *14 . Audio / Video

<audio> Defines sound content

STEP #15 . Links

<a> Defines a hyperlink=

<ul> Defines an unordered list

STEP 18 . Styles and Semantics

<style> Defines style information for a document

<script> Defines a client-side script

<head> Defines information about the document

STEP 21. HTML END

You might also like