Scribd
Upload
19 views

Css

HTML is the standard markup language used to define the structure of web pages. HTML elements tell the browser how to display content such as headings, paragraphs, links, etc. All HTML elements can have attributes that provide additional information. Common HTML tags were described such as <html>, <head>, <title>, <body>, <p>, <img>, <a>, etc. CSS is used to style and lay out HTML elements on the page using properties like color, font, width, padding, position, and display. CSS positioning methods include normal flow, relative, absolute, and fixed positioning. Flexbox and Grid layout are also covered as methods to structure groups of elements on the page.

Uploaded by

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

Css

HTML is the standard markup language used to define the structure of web pages. HTML elements tell the browser how to display content such as headings, paragraphs, links, etc. All HTML elements can have attributes that provide additional information. Common HTML tags were described such as <html>, <head>, <title>, <body>, <p>, <img>, <a>, etc. CSS is used to style and lay out HTML elements on the page using properties like color, font, width, padding, position, and display. CSS positioning methods include normal flow, relative, absolute, and fixed positioning. Flexbox and Grid layout are also covered as methods to structure groups of elements on the page.

Uploaded by

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

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

<!-- THIS IS HTML COMMENT -->


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

You might also like