Scribd
Upload
40 views26 pages

HTML 3

This document provides a tutorial on HTML. It begins with an introduction and outlines the course, including an overview of HTML, how to save and view web pages, basic HTML structure, and various HTML tags. It then demonstrates HTML tags for text formatting, headers, and other elements. The document serves as an introduction to HTML with examples of code and the resulting browser output.

Uploaded by

Roshin Varghese
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
40 views26 pages

HTML 3

This document provides a tutorial on HTML. It begins with an introduction and outlines the course, including an overview of HTML, how to save and view web pages, basic HTML structure, and various HTML tags. It then demonstrates HTML tags for text formatting, headers, and other elements. The document serves as an introduction to HTML with examples of code and the resulting browser output.

Uploaded by

Roshin Varghese
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/ 26

1

A tutorial on

Prepared by:- Shilpa Jackson


2

Course outline

 Course Introduction
Course Software
History of HTML
How to save and view web pages
Basic HTML structure
HTML tags
Demonstration
HTML Exercise

Prepared by:- Shilpa Jackson


3

Introduction to HTML

Prepared by:- Shilpa Jackson


4
5

What is the full form of HTML?


1) High-level text markup language.
2) Hyper text markup languagep
3) Hi-text markup language.
4) None of these
6

What is a Markup Language?


• A markup language is a
computer language that uses tags to define
elements within a document. It is human-readable,
meaning markup files contain standard words,
rather than typical programming syntax. While
several markup languages exist, the two most
popular are HTML and XML
7

HTML definition
• HTML stands for Hyper Text Markup
Language. HTML is the standard markup
language for creating Web
pages. HTML describes the structure of a Web
page.
8

Course Software

Web browser
Text Editor

Prepared by:- Shilpa Jackson


9

History of HTML

Prepared by:- Shilpa Jackson


10

Save and view HTML files

Prepared by:- Shilpa Jackson


11

What does an HTML tag look like?


12

HTML Tags

Empty/Non-
Container
Container
Tags
Tags

Prepared by:- Shilpa Jackson


13

Prepared by:- Shilpa Jackson


14

Basic HTML structure

Prepared by:- Shilpa Jackson


15

HTML Tags
<HTML> These tags enclose the entire Web page document.
…………
</HTML>

<HEAD> These tags enclose the Head part of the document


.............
</HEAD>

<TITLE> These tags enclose the title of the document. This text
…………… appears in the title bar in the browser and on the
</TITLE> bookmark list if someone bookmarks your web page.

<BODY>…… Contains all the contents of html document such as


</BODY> text,image,table,list etc

Prepared by:- Shilpa Jackson


16

Sample HTML coding


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Example page</title> <meta http-
equiv="Content-Type" content="text/html;
charset=windows-1252">
</head>
<body> <h1>This is a heading</h1> <p>This is an
<b>example</b> of a basic HTML page.</p>
</body>
</html>
17

• The DOCTYPE line describes what version of HTML the


page was written in so that an Internet browser can
interpret the text that follows.
• The <html> opening tag lets the browser know that it is
reading HTML code.
• The <head> section contains information about the page,
such as its title, meta tags, and where to locate the CSS file.
• The <body> section contains everything that's viewable on
the browser. For example, all the text seen here is
contained in the body tags.
• The <h1> tag is the visible heading of the page.
• The <p> tag is a paragraph of text. Most web pages (like
this one) have several paragraph tags.
• Contained in the paragraph is the <b> tag that bolds the
word example in the paragraph.
• Finally, the closing tags wrap each of the above tags.
18
19

The <title> element must be located inside

a) The <body> element


b) The <head> element
c) The <title> element
d) None of these
20

Header Tags

<H1>Header 1 -- Giant-sized and bold </H1>


<H2>Header 2 -- Large and bold </H2>
<H3>Header 3 -- Normal-sized and bold </H3>
<H4>Header 4 -- Small and bold </H4>
<H5>Header 5 -- Very Small and bold </H5>
<H6>Header 6 -- Tiny and bold </H6>

Prepared by:- Shilpa Jackson


21

Header tags (Output)

H1 = Giant-sized and bold


H2 = Large and bold
H3 = Normal-sized and bold
H4 = Small and bold
H5 = Very Small and bold

H6 = Tiny and bold

Prepared by:- Shilpa Jackson


22

Text Formatting Tags


Tags Results

<I>..</I> These tags enclose the entire Web page document.Italics

<B>…..</B> These tags enclose the Head part of the document.BOLD

<U>...</U> These tags enclose the title of the document. Underline


This text appears in the title bar in the browser and on the
bookmark list if someone bookmarks your web page.
<P> …</P> Paragraph
……<br>…. Line break

Prepared by:- Shilpa Jackson


23

Text Formatting Tags

Tags Result
<FONT FACE = “fontname”> … </FONT> To change the font of the enclosed
text
<FONT SIZE=n> …. </FONT> To change the size of text
<FONT COLOR=“red”>…. </FONT> To change the font color

Prepared by:- Shilpa Jackson


TEXT.html Browser output 24
<HTML>
<HEAD>
<TITLE>TEXT SAMPLE</TITLE>
</HEAD>

<BODY BGCOLOR="CYAN">
<MARQUEE>WEB TECHNOLOGY</MARQUEE>

<H1 ALIGN="CENTER">INTRODUCTION TO
WEB TECHNOLOGY</H1>

<H2 ALIGN="CENTER">HYPER TEXT MARKUP


LANGUAGE</H2>

<P> <FONT face="arial" COLOR="RED"


size="3">The web has gone through many
changes over the past few decades, but HTML
has always been the fundamental language used
to develop webpages.</FONT></P>

<P ALIGN="JUSTIFY"> Interestingly, while


websites have become more advanced and
interactive, HTML has actually gotten simpler. If
you compare the source of an <B>HTML5</B>
page with a similar page written in <I>HTML 4.01
or XHTML 1.0</I>, the HTML5 page would
probably contain less code. <BR>This is because
modern HTML relies on <U>cascading style
sheets</U> or <U>JavaScript</U> to format
nearly all the elements within a page.</P>"

<H6>VISIT AGAIN</H6>
</BODY>
Prepared by:- Shilpa Jackson
</HTML>
25

HTML EXERCISES

Prepared by:- Shilpa Jackson


26

Thank
You

You might also like