You are on page 1of 14

A Presentation on

Web Development
Presented by
Shivam Kumar Tripathi

Under the guidance of


Dr. Ashutosh K Rao ( Associate Professor) HOD
Mr. Nitin Dixit (Assistant Professor)
Deptt. of Computer Science and Engineering
Institute of Technology and Management, Gida, Gorakhpur

Dr. A.P.J. Abdul Kalam Technical University, Lucknow , Uttar Pradesh


CONTENT
CONTENT
1. INTRODUCTION TO HTML
2. HTML TAGS
3. HTML BASIC STRUCTURE
4. HTML HEAD
5. HTML BODY
6. HTML HEADINGS
7. HTML PARAGRAPHS
8. C.S.S
9. CSS SYANTAX
10. HTML LINK TO CSS
11. PROJECT
INTRODUCTION TO HTML

HTML
Hyper Text Markup Language

 INTRODUCTION TO HTML - HTML is stand for Hyper Text Markup


Language
 HTML describe the structure of web pages
 HTML Element represented by the Tag < >
The doctype is not actually a tag, but a
Doctype declaration, telling the browser what kind of
html you are using. The doctype above
declares HTML

Html The <html> element defines the whole


HTML document

Head The <head> element contains special


elements that instruct the browser where to
find style sheets

<body></body>The <body> element


Body contains the document content (what is
shown inside the browser window)
Element tags
Basic Structure
Head

Preview
Body
<!DOCTYPE html >
<html>
<head>
<title>learn html </title>
</head>
<body>
<h1>my first page </h1>
<p>Manish Kumar Pandey</p>

</body>
</html>
Headers
<h1> Header 1 </h1>
<h2> Header 2 </h2>

Preview
<h3> Header 3 </h3>
<h4> Header 4 </h4>
<h5> Header 5 </h5>
<h6> Header 6 </h6>
Paragraph
<p>My name is Manish Kumar Pandey</p>
<p> I am from gorakhpur </p>

Preview
C.S.S

I. CSS Stand for Cascading Style Sheet


II. Style define how to display HTML Element
III. Styles are noramally stored in Style Sheet.
CSS Syntax

Example
p {
  color: red;
  text-align: center;
}
SIMPLE PAGE USING CSS & HTML
HTML CODE
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="newcss.css">
</head>
<body>
<h1>This is a heading
</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS CODE
Body
{background-color: powderblue;}h1
{color: blue;}
p
{color: red;}
THANK YOU

You might also like