Scribd
Upload
15 views

HTML, Css

Uploaded by

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

HTML, Css

Uploaded by

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

https://shorturl.

at/3ICHe 5 Jun 2024

Introduction to HTML
CSS
Types
Ruleset
Selectors
Colours
Text formatting
Text Decoration
Text shadows
Links
Forms
Hosting
Task Assigned

<!DOCTYPE html>

<html>

<head>

<style>

.box{

border: 2px double gray;

height: 200px;

width: 200px;

background-color: orange;

position: relative;

top: 0px;

left: 0px;

transition-duration: 1s;

transition-delay: 1s;

transition: height 2s, width 1s left


1s;
}

.box:hover{
width: 400px;

height: 100px;

font-size: 120%;

.item{

list-style-type: none;

height: 20px;

width: 100px;

background:
linear-gradient(blue,yellow);
color: white;

padding: 5px;

transition-duration: .1s;

.item:hover{

font-size: larger;

padding: 10px;

background:
linear-gradient(brown, navy);
border-radius: 5px;

margin-left: 10px;

color: beige;

</style>

</head>

<body>

<ol>

<li class="item">CPU</li>

<li class="item">Monitor</li>
<li class="item">Keyboard</li>

<li class="item">Mouse</li>

<li class="item">Projector</li>

<li class="item">Speakers</li>

<li class="item">Camera</li>

<li class="item">Printer</li>

<li class="item">Scanner</li>

<li class="item">Mic</li>

</ol>

<div class="box">

hi

</div>

</body>

</html>

HTML
- It stands for HyperText Markup Language.
- It is standard markup language used to create web pages.

Fetures of HTML
- HTML is highly flexible and simple.
- HTML is supported on almost every web browser.
- HTML is user friendly.

Disadvantages of HTML
- It can create only static and plain web pages.
- We need to write a lot of code for making simple page.
- Security fetures of HTML are not good.

History if HTML
- 1989 GML Generalised Markup Language
- 1991 SGML Standard GML
- 1994 HTML
- 2008 HTML 5
- 2016 HTML 5.1

HTML is completely enclosed in tags

what is tag ?
- Text placed between '<' and '>' is called as tag
Eg <html>

Tags are classified into two types


1. Paired tags
2. Non-Paired tags

1. Paired tags
- The tags that have both opening and closing
tags are called as paired tags
Eg
<html>
...
...
...
</html>

<body>
...
...
...
</body>
Note:- The closing tags start with '/'

2. Non-Paired tags
- The tags that have only opening tag but no
closing tag are called as non-paired tags
- These are also called as
i) Singular tags
ii)Self closed tag
iii)Empty tag
iv)Forcefully closed tag

Eg <br> or <br/> Break tag(line break)


<hr> or <hr/> Hrizontal rule (h. line)
<img> or <img/> image tag

Structure of HTML

<html>
<head>
<title>...</title>
</head>
<body>

</body>
</html>

Html Tables
Forms
List tags
CSS:-
- CSS stands for Cascading Stylesheet
- It is a stylesheet language used for describing
the presentation of docuemnt in markup language like HTML
- CSS is a cornerstone technology for world wide web
alongside HTML and Javascript.
- CSS is designed to enable separation of presentation
and contents.
- All styles are stored in CSS files.
- CSS files must have extension as '.css' only.

Why CSS ?
- it allows much ritcher presentation appearance.
- It reduces workload by centrallizing command for
visual appearance instead of scatterd ones.
- Same styles can be reused for multiple documents.

History:-
- First version of CSS was released in 1996.
- Second version of CSS was released in 1998,
with improved table fetures.
- Third version of CSS was released in 2008 and
currently in use with improved support for modules,
it also supports modern browsers.
- Fourth version was released in 24th March 2017,
which is faster than CSS3.

Types of CSS
- Inline CSS Highest Priority
- can be applied to only that tag
- Internal CSS Medium Priority
- Can be applied to only that document.
- External CSS Lowest Priority
- can be applied globally

***index.html***
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<style>
p{
font-size: 50px;
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<h1>Good Morning</h1>
<h4 style="background-color: violet;">First CSS Session</h4>
<p>CSS gives ritcher presentataion</p>
<p>One more p tag</p>
</body>
</html>

***style.css***
h1
{
color:red;
}

h4
{
font-size: 50px;
}

body
{
background-color: yellow;
}

CSS Syntax(rule-set)
- CSS Syntax is selector and declaration block.
- The selector points to the HTML element
you want to style.
- each declaration includes CSS property and
value pair.
- Properties and values are separated by colon (:)
- Each property and value separated by semicolon(;)

Eg
h1
{
color : red;
font-size : 12px;
}

where
h1 is selector
color is property
red is value
font-size is property
12px is value

CSS Selectors
- CSS Selectors are used to select the contents you want to style
- Types
i) Element selector
ii)Id selector
iii)class selector
iv)Univarsal selector
v) Group selector
i) Element selector
- the element selector selects the html element by name
Syntax
element
{
style1;
style2;
...
}

p
{
text-align : center;
color : blue;
}

ii)Id selector
- it uses id attribute of html element
- to select a selector with specific id (#) is used.

Syntax
#id
{
style1;
style2;
...
}

#warning
{
color : orange;
}

iii)Class selector
- the class selector selects html elements
with specific class attribute.
- it is used with a "period" symbol (. DOT)
followed by class name
Syntax
.class_name
{
style1;
style2;
...
}

.cool
{
text-align : right;
color : #002366;
}
- class selector for specific element
if you want to specify only one specific element should be
affected then you should use element name with class name.

h1.cool
{
---
}

iv) Universal Selector


- The universal selector is used as wildcard selector.
- It selects all elements in page.
- It is denoted by '*' symbol

*
{
style1;
style2;
...
}

v) Group selector
- Group selector is used to select all elements
with same style definition
- commas are used to separate selectors in grouping.

Eg
h2
{
text-align : center;
color : maroon;
}

h3
{
text-align : center;
color : maroon;
}

h4
{
text-align : center;
color : maroon;
}

h2, h3, h4
{
text-align : center;
color : maroon;
}
Colors:-
- Colors are specified using predefined color names
or color values

Color values
RGB -> Red Green Blue
RGBA -> Red Green Blue Alpha
HSL -> Hue Saturation Lightness
HSLA -> Hue Saturation Lightness Alpha
HEX -> Hexadecimal

Alpha -> Transperancy


-> 0 -> Transperant
-> 1 -> Not Transperant

<body>
<h1 style="color:#00ff00">Observe This color</h1>
<h1 style="color:hsl(0, 100%, 50%)">Observe This color</h1>
<hr>
<div style="background-color: black;">
<h1 style="color:rgb(255,0,0)">Observe my color</h1>
<h1 style="color:rgba(255,0,0,1)">Observe my color</h1>
<h1 style="color:rgba(255,0,0,0.8)">Observe my color</h1>
<h1 style="color:rgba(255,0,0,0.6)">Observe my color</h1>
<h1 style="color:rgba(255,0,0,0.4)">Observe my color</h1>
<h1 style="color:rgba(255,0,0,0.2)">Observe my color</h1>
<h1 style="color:rgba(255,0,0,0)">Observe my color</h1>
</div>
<div>
<h1 style="color:rgb(255,0,0)">Observe my color</h1>
<h1 style="color:rgba(255,0,0,1)">Observe my color</h1>
<h1 style="color:rgba(255,0,0,0.8)">Observe my color</h1>
<h1 style="color:rgba(255,0,0,0.6)">Observe my color</h1>
<h1 style="color:rgba(255,0,0,0.4)">Observe my color</h1>
<h1 style="color:rgba(255,0,0,0.2)">Observe my color</h1>
<h1 style="color:rgba(255,0,0,0)">Observe my color</h1>
</div>
</body>

CSS text formatting


color
- color property is used to set color of text.

text alignment
- 'text-align' property is used to set horizontal
alignment of text
- values are left, right, center, justify

Eg text-align : center
text-align : left / start
: right /end
: justify

direction:-
- it is used to change direction of text
i.e. left to right (ltr)
OR
right to left (rtl)
unicode-bidi : bidi-override used to handle bidirections of text

vertical text
- writing-mode : vertical-lr
: vertical-rl

<h1 style="writing-mode:vertical-lr">Pranit Thakur</h1>


<h1 style="writing-mode:vertical-rl">Pranit Thakur</h1>

Text Decoration
text-decoration is used to set or remove text-decoration
eg underline, overline, line-through

text-decoration : underline
: overline
: line-through
: none

<p style="color:blue; text-decoration:underline">Guess me</p>


<p style="color:blueviolet;text-decoration:overline">I am overlined
text</p>
<p style="color:violet; text-decoration:line-through">I am
deprecated</p>
<a href="#" style="color:black;text-decoration:none">Guess me</a>

Text shadow:-
- text-shadow property adds shadow effects to text.

text-shadow : xoffset yoffset blur/height color;


text-shadow : shadow1, shadow2, shadow3,...

<style>
.sd1 {
text-shadow: 10px 10px 0px gray;
}

.sd2 {
text-shadow: 0px 0px 2px gray;
}

.firy {
text-shadow: 0px 0px 2px red;
font-family: 'Lucida Calligraphy';
}
/*
body{
background-color: black;
}*/
.nospecs {
color: rgba(255, 0, 0, 0);
text-shadow: 0px 0px 4px red;
}

.sm {
color: white;
text-shadow: 0px 0px 2px violet,
1px 1px 2px indigo,
2px 2px 2px blue,
3px 3px 2px green,
4px 4px 2px yellow,
5px 5px 2px orange,
6px 6px 2px red;
}
</style>

Links
- Links can be styled with color, font-family, background, etc
- Links have following states
a : link -> a normal or unvisited link
a : visited -> visited by user
a : hover -> mouse pointer on link
a : active -> moment it is clicked

Eg
a:link
{
color : pink;
}

a:visited
{
color : green;
}

a:hover
{
color : red;
}

a:active
{
color : blue;
}

<style>
a {
text-decoration: none;
border: 1px solid gray;
border-radius: 5px;
background: radial-gradient(blue, orange);
padding: 5px;
}

a:link {
color: pink;
}

a:visited {
color: green;
}

a:hover {
color: red;
}

a:active {
color: blue;
}
</style>

CSS inputs
- forms
- forms can be styled with input elements
input
{
color : red;
}
- to style specific input elements
input[type=text]
{
color : blue;
}
input[type=password]
{
width : 50%;
}
---
---

***index.html***
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form class="box">
<h1>Login</h1>
<input type="text" placeholder="Username" name = "uname" id =
"uname">
<input type="password" placeholder="Password" name = "upwd" id =
"upwd">
<input type="submit" value="Login">
</form>
<button onclick = "clickMe()">Click Me</button>
</body>
</html>

***style.css***
body {
background: radial-gradient(circle, white, black);
font-family: sans-serif;
}

h1 {
text-transform: uppercase;
font-weight: normal;
color: white;
}

.box {
background-color: black;
width: 300px;
margin: 50px auto;
padding: 40px;
border-radius: 20px;
text-align: center;
}

input {
margin: 20px auto;
text-align: center;
width: 200px;
padding: 14px 10px;
border-radius: 24px;
background: none;
}
input[type="text"], input[type ="password"]{
border: 2px solid skyblue;
color : lightyellow;
}
input[type = "submit"]
{
border: 2px solid burlywood;
color:white;
cursor: pointer;
}

Trial Hosting:-
1. Login to github.com
2. Create a repository
3. Copy url
4. Inialyse Local repository
>git init
5. add files to repository
> git add .
6. check status
> git status
7. Commit
> git commit -m "initial commit"
8. Add remote reposiotry
>git remote add origin <copied url>
9. push code to repository
>git push -u origin master
10. Select source
-> settings
-> pages
-> source -> master branch

POC
Create informative website using HTML and CSS for
Group of hotels
Group of Institutions
Group of Hospitals
- Choose any one

Design minimum 10 + 1 home pages

Application should contain


1. Basic information
2. About, Contact, Portfolio pages
3. various departments and subdepartments
4. Back and home buttons
5. Common Headers and footers

Use various images, attractive backgrounds


scrolling text and images

For hint may refer


https://www.apollohospitals.com/
https://www.tajhotels.com/
https://www.paruluniversity.ac.in/
https://www.oberoihotels.com/
https://sanjivani.org.in/
https://sahyadrihospital.com/

You might also like