8/7/2019 01 - HTML Intro

1/21

WEB PROGRAMMING

HTML Introduction

8/7/2019 01 - HTML Intro

2/21

What is HTML?

HTML is a language for describing web

pages. HTML stands forHyperText Markup

Language

HTML is a markup language

A markup language is a set ofmarkup tags

HTML uses markup tags to describe web pages

8/7/2019 01 - HTML Intro

3/21

HTML Tags

HTML markup tags are usually called HTML tags

HTML tags are keywords surrounded byanglebrackets like

HTML tags normallycome in pairs like and

The first tag in a pair is the start tag, the second tagis the end tag

Start and end tags are also called opening tags andclosing tags.

8/7/2019 01 - HTML Intro

4/21

HTML Element

An HTML element starts with a start tag

An HTML element ends with an end tag The element content is everything between the start

and end tag

Some HTML elements have empty content

Some HTML elements have a missing end tag Note: The start tag can have additional information

(attributes)

8/7/2019 01 - HTML Intro

5/21

8/7/2019 01 - HTML Intro

6/21

Empty HTML Elements

HTML elements without content are called empty

elements. Empty elements have no end tag.
is an empty element without a closing tag.

In XHTML, XML, and future versions of HTML, allelements must be closed.

Adding a slash to the start tag, like
, is theproper way of closing empty elements, accepted byHTML, XHTML and XML

8/7/2019 01 - HTML Intro

7/21

8/7/2019 01 - HTML Intro

8/21

What Do You Need?

HTML Editor

Notepad FrontPage, etc

Browser

Mozilla Firefox

Opera

IE

8/7/2019 01 - HTML Intro

9/21

HTM or HTML Extension?

When you save an HTML file, you can use

either the .htm or the .html extension. We use .htm in our examples. It is a habit

from the past, when the software onlyallowed three letters in file extensions

8/7/2019 01 - HTML Intro

10/21

8/7/2019 01 - HTML Intro

11/21

8/7/2019 01 - HTML Intro

12/21

Headings

8/7/2019 01 - HTML Intro

13/21

HTML Paragraphs

Paragraphs are defined with the

tag.

Most browsers will display HTML correctly even ifyou forget the end tag.

The example above will work in most browsers, butdon't rely on it. Forgetting the end tag can produceunexpected results or errors.

Note: Future version of HTML will not allow you toskip end tags

8/7/2019 01 - HTML Intro

14/21

Paragraphs

This is a paragraph

This is another paragraph

This is a paragraph

This is another paragraph

8/7/2019 01 - HTML Intro

15/21

Problem with Paragraph

Ignore code with more than one space

How to show code sintax likeif($i % 2 == 0)

{

echo even}

8/7/2019 01 - HTML Intro

16/21

HTML Line Breaks

Use the
tag ifyou want a line break (a

new line) without starting a new paragraph The
tag is an empty tag. It has no end

tag like .

In future versions of HTML, tags with no end

tags (closing tags) are not allowed. Even if
works in all browsers, writing

instead is more future proof.

8/7/2019 01 - HTML Intro

17/21

Line Breaks

My favorite sports are :

Soccer
Baseball

Basketball

This is
a para
graph with linebreaks

8/7/2019 01 - HTML Intro

18/21

HTML Formatting Tags

HTML uses tags like and for

formatting output, like bold or italic text. These HTML tags are called formatting tags

Output examples :

This text is bold

This text is italic

This is subscript andsuperscript

8/7/2019 01 - HTML Intro

19/21

Text Formatting Tags

8/7/2019 01 - HTML Intro

20/21

HTML Fonts

With tag you can specify both the size

and the type of the browser output The Tag Should NOT be Used

TheWorldWideWeb Consortium (W3C) hasremoved the tag from itsrecommendations.

In future versions of HTML, style sheets(CSS) will be used to define the layout anddisplay properties of HTML elements.

8/7/2019 01 - HTML Intro

21/21

Fonts

I'm Verdana