2. Click to edit Master title style
2
N A M E : M D A F FA N E Q U E M A R
R O L L N O : 2 2 D P I T 0 0 5 H Y
E n r o l l m e n t : A 2 2 1 2 5 8
D E PA R T M E N T: P O LY T E C H N I C
C o u r s e : D I P L O M A I N I T
2
Self intro
4. Click to edit Master title style
4
Training detail
*Topic: Web designing
*Mode of Training: Online
*Platform: codingIdol
*Start date:1st August 2023
*End date:31st August 2023
*Duration:4 weeks
4
5. Click to edit Master title style
5
Table of Content
*WEB DESIGNING
*HTML
*CSS
5
6. Click to edit Master title style
6
WHAT IS Web desiging
• Des ign And Layout Webs ites .
• Think Thr ough The N avigation of A s ite To Pr ovide The Bes t U s er
Exper ienc e
• D es ign Sample Pages And C r eate Moc k ups .
• Work In Adobe Programs To c reate Vis uals ,Graphic s,Or Animations .
• R egis ter Web D omains
• C oor dinate W ith Wr iter s And D es igner s To C r eate A Site.
• In Web D es igning N or mally We U s e H TML,C SS And Boots tr ap.
6
7. Click to edit Master title style
7
HTML
• HTML s t a n d s for Hyper Text markup language.
• To understand "HTML" from front to b a c k , l e t ' s l o o k at each word that makes up the abbreviation:
• Hypertext: t e x t (often w i t h embeds such as images, too) that is organized in order to connect related i t e m s .
• M a r k u p : a s t y l e guide for typesetting anything to be printed in hardcopy or soft c o p y format.
• Language: a language t h a t a computer system understands and uses t o i n t e r p r e t commands.
• HTML determines the structure of web pages. T h i s structure alone is not enough to make a web page look good and
interactive. So y o u ' l l use assisted technologies such as CSS and JavaScript to m a k e your HTML b e a u t i f u l and
add i n t e r a c t i v i t y , respectively.
7
8. Click to edit Master title style
8
History of HTML:
• HTML was created by Sir Tim Berners-Lee in late 1991 but was not officially released. It was published in 1995 as
HTML 2.0. HTML 4.01 was published in late 1999 and was a major version of HTML.
• HTML5
• October 28, 2014
• HTML5 was published as a W3C Recommendation.
• November 1, 2016
• HTML 5.1 was published as a W3C Recommendation.
• December 14, 2017
• HTML 5.2 was published as a W3C Recommendation and it is stable till now.
8
9. Click to edit Master title style
9
BASIC STRUCTURE OF HTML (CODE)
9
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
</head>
<body>
<h1> internship report</h1>
<p> sahil is a good boy</p>
</body>
</html>
10. Click to edit Master title style
10
CSS
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media.
• CSS saves a lot of work. It can control the layout of multiple web pages
all at once.
• External stylesheets are stored in CSS files.
• CSS is the language we use to style an HTML document.
• CSS describes how HTML elements should be displayed.
10
11. Click to edit Master title style
11
TYPES OF CSS
1.IN LIN E C SS: * An inline CSSis used toapply a unique style toasingle HTML element.
* Aninline CSSusesthestyle attribute of an HTMLelement.
*Thiskindofstyleisspecifiedwithin an HTMLtagusingthestyle attribute.
2. INTERNAL CSS: This can be used when a single HTML d o cu men t must be styled uniquely.
The CSS r u le set should be within the HTML file in th e head section i.e
CSS is embedded within the HTML file.
3.EXTERNAL CSS: This can be used when a single HTML d o cu men t must be styled uniquely.
The CSS ru le set should be within the HTML file in th e head section i.e
th e CSS is embedded within the HTML file.
11
12. Click to edit Master title style
12
INLINE CSS
<!doctype html>
<html>
<head>
< t i t l e > I n l i n e css</title>
</head>
<body>
<p style = "color:red; font-size:50px; font-style:italic; text-align:center;">
MUDASSIR IS A GOOD BOY
</p>
</body>
</html>
12
13. Click to edit Master title style
13
INTERNAL CSS
< ! D O C T Y P E html>
<html>
<head>
<style>
body {background-color: powderblue;} h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
< h 1 > t h i s is a heading</h1>
< p > t h i s is a paragraph.</p>
</body>
</html>
13
14. Click to edit Master title style
14
EXTERNAL CSS
background-color: powderblue;
}
h 1 {
color: blue;
}
p {
color: red;
}
/ / SAVE THIS C S S FILE WITH style.css N A M E
14
15. Click to edit Master title style
15
HTML FILE FOR EXTERNAL CSS
< ! D O C T Y P E html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
< h 1 > t h i s is a heading</h1>
< p > t h i s is a paragraph.</p>
</body>
</html>
15
16. Click to edit Master title style
16
Thanks for
your precious
time
17. Click to edit Master title style
17
Content Title 03
Caption01 appears here Caption03 appears here Caption04 appears here
17
18. Click to edit Master title style
18
Content Title 04
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed
pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.
Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy
pede. Mauris et orci.
18
19. Click to edit Master title style
19
Content Title
Caption01 appears
here
Caption02 appears
here
Caption03 appears
here
Caption04 appears
here
Caption05 appears
here
19
20. Click to edit Master title style
20
Table
Title Title Title Title
20
