Scribd
Upload
6 views

html&css

A website is a collection of web pages, which can be static or dynamic. The document outlines the website design and development process, popular domain extensions in India, and essential HTML elements and CSS styling techniques. It also includes examples of HTML forms, tables, and multimedia integration, along with explanations of various attributes and elements used in web development.

Uploaded by

abdulpreneur01
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views

html&css

A website is a collection of web pages, which can be static or dynamic. The document outlines the website design and development process, popular domain extensions in India, and essential HTML elements and CSS styling techniques. It also includes examples of HTML forms, tables, and multimedia integration, along with explanations of various attributes and elements used in web development.

Uploaded by

abdulpreneur01
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

WHAT IS WEBSITE?

a collection webpages is called website.

webpages?

A static website is one where web pages are delivered exactly as they are stored,
with no
real-time content changes.

A dynamic website generates content in real time, typically using databases and
scripting languages to provide interactivity and personalized experiences.

WEBSITE DESIGN AND DEVELOPMENT PROCESS

STEP1: information gathering


STEP2: Planning
STEP3: Designing
STEP4: Development
STEP5: Testing and delivery
STEP6: Maintance

MOST POPULAR DOMAIN EXTENSION IN INDIA:


.com - commercial
.in - Indian domain
.org - Oraganistaion
.edu - Education
.ac.in - University
.mil - military
.gov - goverment

SUB IMPORTANT FULL FORMS

www - world wide web


http - hyper text transfer protocol
https - hyper text transfer protocol secure
html - hyper text markup language
css- cascading stylesheet
php - hyper text preprocessor
asp - activer server page
aspx - active server page extension
seo - search engine optimization
Nan - not a number

HOW TO CREATE A FILE FOR HTML:

Make a folder then open vsCode create a new file (eg: index.html) then press
shift+! for root element and then start your content in body section.

<!DOCTYPE html> - defines that this document is an HTML5 document.


<html> element - root element
<head> - meta info about html page
<title> - its specifies title for html page
<body> - defines container for contents example: heading , paragraphs,images etc.

<p> text here </p> - use for paragraph

HEADING
<h1>text here</h1> to <h6>text here</h6>

<h1> heading </h1> - element


<br> - empty element

<br> - break

<i>Hello world</i> <br> - italic


<b>Hello world</b> <br> - bold
<u>Hello world</u> <br> - underline
<mark>Hello World</mark> - highlight
Rs <del>1200 </del>999 - delete
H<sub>2</sub>0 - subscript - bottom
a<sup>2</sup> -superscript - top
<marquee behavior="" direction="" onmouseover="this.stop()"
onmouseout="this.start()">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Dignissimos esse cumque dolorum, eum quisquam, commodi soluta atque a tempora porro
obcaecati odio, reprehenderit natus accusantium. Earum architecto deserunt sequi
itaque!</marquee>

Empty element:- Some Html elements have no content or donot have an end tag those
elements are empty element.
for example:- <br> <hr>

Attributes:- its provide additional information about element for example


name="value" href="".

<a> tag defines a hyperlink. the href attributes specifies the URL of the page the
link.

--------------------------------------------------
LOGIN--------------------------------------------------

<h1>LOGIN</h1>
<label>Username</label><br>
<input type="text" placeholder="Enter your username"> <br><br>
<label>Password</label><br>
<input type="password" placeholder="Enter your Password"><br><br>
<input type="button" value="Login">

------------------------------------------------
RegistrationForm-----------------------------------------

<h1>Students Registration form</h1>


<label>First Name:</label> <input type="text" placeholder="Enter your first
name"> <br><br>
<label>Last Name:</label><input type="text" placeholder="Enter your last name">
<br> <br>
<label>E-mail:</label> <input type="email" placeholder="Enter your email"><br>
<br>
<label>DOB:</label> <input type="date"><br> <br>
<label>Set Username:</label> <input type="text" placeholder="Enter username">
<br> <br>
<label>Set Password:</label> <input type="password" placeholder="Enter your
password"><br> <br>
<label>Gender</label><br>
<input type="radio">Male<br>
<input type="radio">Female<br>
<input type="radio">Other<br><br>
<label>Courses</label>
<select>
<option value="">Gwdd</option>
<option value="">AniVfx</option>
<option value="">VFX</option>
</select>

-------------------------------------------image in
html--------------------------------------------

<img src="folder/image name here" alt="Anime" width="200" height="200">

------------------------------------------video in
html-------------------------------------------

<video src="video.mp4" width="400" height="300" autoplay muted loop></video>

<video width="300" height="200" controls poster="file location here">


<source src="video.mp4" type="video/mp4">
</video>

src - for file location of video Audio and image


autoplay is use for automatically play video/audio
poster is use for put thumbnail in video
type is use for file type
loop is used for play video in loop
controls is used for make control on vidoe like play,muted,forward,fullscreen
etc.
muted is used for muted the video.

------------------------------------------Audio in
html-----------------------------------------

<audio controls >


<source src="Teri-Meri-Kahaani-Hai-Baarishon-Ka-Paani(PagalWorlld.Com).mp3"
type="audio/mp3">
</audio>

----------------------------------ol ul and li in
html--------------------------------------------

<ol type="A"> type- 1,A,a,i,I


<li>Ankit</li>
<li>Manoj</li>
</ol>

<ul type="square"> type- square,disc,circle


<li>Ankit</li>
<li>Manoj</li>
</ul>

ol- order list


ul- unorder list
li - list item

-------------------------------------------Table in
html------------------------------------------

<th></th> - table head


<td></td> - table data
<tr></tr> - table row

COLSPAN - It's Used to Merge Two or more columns


ROWSPAN - It's Used to merge Two or more Rows

<table border="1">
<th colspan="6">
Arena Animation
</th>
<tr>
<td colspan="6">
Ankit Verma &nbsp;&nbsp; Student of Arena Animation <br> DOJ: 2022 &nbsp;
&nbsp; &nbsp;&nbsp;Male
</td>
</tr>
<tr>
<td>Subject Code</td>
<td>Subject Name</td>
<td>Min Marks</td>
<td>Max Marks</td>
<td>Marks Obtained</td>
<td>Remark</td>
</tr>
<tr>
<td>101</td>
<td>Hindi</td>
<td>35</td>
<td>100</td>
<td>86</td>
<td>D</td>
</tr>
<tr>
<td>102</td>
<td>English</td>
<td>30</td>
<td>100</td>
<td>80</td>
<td>D</td>
</tr>
</table>

-----------------------------Datalist VS Select------------------------------

<h2>The datalist Element</h2>


<form>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Ankit">
<option value="Shubham">
<option value="Bipul">
<option value="Abhishek">
<option value="Dev">
</datalist>
<input type="submit" class="btn">
</form>

<h2>The Select Element</h2>


<form action="">
<select name="" id="">
<option value="">Ankit</option>
<option value="">Sshubham</option>
</select>
</form>

-----------------------------CELLPADDING AND
CELLSPACING--------------------------------------------

Cellpadding is used for gapping between text and border.


cellspacing is used for gapping between two table box(container/Row).

<table border="2" cellpadding="25" cellspacing="20">


<tr>
<td rowspan="2">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>

-----------------------------------
DOM---------------------------------------------------------------

document object modal

----------------------------------------Anchor
tag----------------------------------------------
Its used for connect pages.

index.html
<a href="gsap.html">Next page</a> (first page)

gsap.html
<a href="index.html">Back</a> (second page)

--------------------------------------
CSS3----------------------------------------------------

cas carding stylesheet

Its used for designing and decorating websites.


extension .css eg:- style.css

link html and css :- <link rel="stylesheet" href="index.css"> (write inside


head section)

internal link for css :- <style> " write your css here"</style> (write inside
head section)

for class we have to use "."


Eg:- html:- <div class="box"></div>
css:- .box{ }

for element we have to use


Eg:- html:- <p></p>
css:- p{ }

for id we have to use


Eg:- html:- <p id="box"></p>
css:- #box{ }

css properties

width: ; its used for width


height: ; its used for height
background-color: ; its used for background color
color: ; its used for text color
-----------------------------------------simple html and css form
-----------------------------------

HTML:-

<div class="box">
<h2>Login Form</h2>
<form action="">
<input type="text" placeholder="Enter your username"> <br><br>
<input type="password" placeholder="password"> <br><br>
<input type="checkbox"> Remember me <br><br>
<button>Login</button> <br><br>
</form>
</div>

CSS:-

.box{
width: 200px;
height: 200px;
background-color: bisque;
text-align: center;
}
button{
width: 150px;
background-color: green;
border: none;
color: aliceblue;
}

-----------------------------------------Image in
Css-----------------------------------------------------------

HTML:-

<div class="box"></div>

CSS:-

.box{
width: 400px;
height: 400px;
border: solid 2px black;
background-image: url(img/botdownloader.com-1703573408.486728.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

background-image: url() - Its used for image calling through Css.


background-repeat: ; - Its used for Repetation of image.
background-size : ; - Its used for background image size to fit in container you
can use px,percentages and cover to ajust image.
background-position: ; - Its used for postion your image inside a container.

-------------------------------------------Border in Css
------------------------------------------------------------
HTML:-

<div class="box"></div>

css:-

.box{
width: 400px;
height: 400px;
background-color: aqua;
border: solid 2px black;
border-radius: 50px;
}

border-bottom: solid 2px red;


border-top: ;
border-right: ;
border-left: ;
border-color: ;
border-width: ;
border-top-left-radius: ;
border-top-right-radius: ;
border-bottom-left-radius: ;
border-bottom-right-radius: ;

border - its used to creating a border.


border-radius its used to creating a radius in border (curve) you can use % and px
for it.

You might also like