Scribd
Upload
49 views23 pages

Munish Kumar (HTML)

The document provides an introduction to HTML (Hypertext Markup Language), the standard markup language used to create web pages. It describes HTML elements as the building blocks of web pages and explains how tags are used to define the structure and semantics of content. Examples are given of common HTML tags for headings, paragraphs, links, and images to illustrate their usage.

Uploaded by

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

Munish Kumar (HTML)

The document provides an introduction to HTML (Hypertext Markup Language), the standard markup language used to create web pages. It describes HTML elements as the building blocks of web pages and explains how tags are used to define the structure and semantics of content. Examples are given of common HTML tags for headings, paragraphs, links, and images to illustrate their usage.

Uploaded by

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

BASIC HTML

PREFACE
 Hypertext Markup Language (HTML) is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages
such as JavaScript. Web browsers receive HTML documents from a
web server or from local storage and render the documents into multimedia
web pages. HTML describes the structure of a web page semantically and
originally included cues for the appearance of the document. HTML elements
are the building blocks of HTML pages. With HTML constructs, images and
other objects such as interactive forms may be embedded into the rendered
page. HTML provides a means to create structured documents by denoting
structural semantics for text such as headings, paragraphs, lists, links, quotes
and other items. HTML elements are delineated by tags, written using
angle brackets. Tags such as <img /> and <input /> directly introduce
content into the page. Other tags such as <p> surround and provide
information about document text and may include other tags as sub-
elements. Browsers do not display the HTML tags, but use them to interpret
the content of the page. HTML can embed programs written in a
scripting language such as JavaScript, which affects the behavior and content
of web pages. Inclusion of CSS defines the look and layout of content. The
World Wide Web Consortium (W3C), former maintainer of the HTML and
current maintainer of the CSS standards, has encouraged the use of CSS
[2]
ACKNOWLEDGEMENT
I would like to take this opportunity to express my deep
sense of gratitude to all those people without whom
this project could have never been completed. First and
foremost I would like to thank my Parents for their
inexhaustible source of inspiration.
I would like to extend my gratitude to Mr. Ajay Dhiman
(MD) SR Institute Baijnath for his constant guidance and
providing a very nice platform to learn.
I would also like to thank Sunil Sir (our Trainer) for his
constant encouragement and moral support, without
which I could have never been able to give in my best.
INDEX

 WHAT IS HTML
 HTML ELEMENTS
 CREATED HTML
 PAGE COMPONENTS
 BASIC TAGS
 EXAMPLE OF USE OF HEADING
 PARAGRAPHY EXAMPLE
 LINK TAG
 EXAMPLE OF ANCHOR TAG
 IMAGE SOURCE TAG
 SPECIFY FILE LOCATION
 EXAMPLES OF USE OF LINKS
 END
WHAT IS HTML?
 Stands for Hyper Text Markup Language
 Computer language used to create web
pages
 HTML file = text file containing markup tags
such <p>
 Tags tell Web browser how to display a page
 Can have either *.htm or *.html file extension

5
HTML ELEMENTS
 Tags are the elements that create the
components of a page
 Tags surrounded by angle brackets < >
 Usually come in pairs
 Example: Start tag <p> and end tag
</p>
 Stuff between is called “element content”
 Tags are not case sensitive
 New standard is to use lower case

6
XHTML
 Lower case for tags = new standard

 Preparing for next generation of HTML called


XHTML

7
Your created HTML document
<html>
<head>
<title> …document title… </title>
</head>
<body>
…your page content…
</body>
</html>

8
PAGE COMPONENTS
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
 First line of code
 Declaration of version of HTML <html>
<head>
 <html>…</html> <title> …document
 Container for the document title… </title>
</head>
 <head>…</head> <body>
 <title> Title of page </title> …your page
content…
 <body>…</body> </body>
 Content of page </html>

9
10
BASIC TAGS
 Headings
 <h1>…</h1> to <h6>…</h6>
 Like in Word
 See example

 Paragraph
 <p>… </p>
 Inserts a line space before and after a paragraph
 See example

http://library.manoa.hawaii.edu/about/exhibits/index.html

11
EXAMPLE OF USE OF
HEADING

12
PARAGRAPH EXAMPLE

13
LINK TAG
 Link
 Anchor tag <a>…</a>
3 kinds
 Link to page in same folder
 Link to page in different folder

 Link to outside webpage on the Internet.

14
EXAMPLE OF ANCHOR TAG

<a href="http://www.hawaii.edu/slis">Go to the LIS home page</a>


address text in page

2 components
 Address
 Text or description – this is what you see

on the page

15
IMAGE SOURCE TAG
 Empty tag – no closing tag
 Components of Img tag
<img src="url“ alt = “description of image” />

 url = points to location of the image file


 alt = describes image for screen readers

16
SPECIFY FILE LOCATION
 Same folder: “pic.gif”
 Document-relative link
 Look for image in same folder

 Different folder named images:


“/images/pic.gif”

17
DIVISION TAG
 <div>…</div>
 Division or section of document
 Use to group elements to apply formatting or
style
 Example: all text within div tag will be fuschia
<div style="color: #FF00FF">
<h1> Title of section</h1>
<p> bla bla bla bla </p>
</div>

18
EXAMPLES OF USE OF
LINKS

19
YOUR SESSION1 HTML
DOCUMENT
<html>
<head>
<title> …document title… </title>
</head>
<body>
…your page content…
</body>
</html>

20
END PRODUCT
 <html>
 <head>
 <title>Caitlin’s Page</title>
 </head>
 <body>
 <div>
 <a href="index.html>Home</a><br />
 <a href="courses.html">Courses</a><br />
 <a href="personal.html">Personal</a><br />
 </div>
 <p>Hello my name is Caitlin Nelson and I am writing about myself.
Contact info:

 <a href="http://www.hawaii.edu/slis/webteam">Web Team</a>



 <div>
 <img src="palmtree.jpg"alt=”a picture of a palm tree”/>
 </div>
 </div>
 </body>
 </html>

21
NEXT MISSION
 Choose colors for your page
 Text color
 Link color
 Background color

 Choose font size


 Type of font
 Font size

22
23

You might also like