Introduction to HTML

(HTML)

Hyper text markup language

TERMS TO KNOW BEFORE STARTING HTML:

Internet Web page Websites Web browser

INTERNET:

The Internet is a global network connecting millions of computers.

All countries are linked into exchanges of data, news and opinions.

Web page

A file usually written in HTML that can be read by a Web browser.

A WEB BROWSER

Browsers are basically software programs that allow you to search for and view various kinds of information on the Web, such as web sites, video, audio, etc.

A WEBSITE :

A Website is a collection of documents known as webpages. The main page in a website is called a homepage, and other pages in a website are called subpages. These are connected by hyperlinks.

HTML(Hypertext Markup Language)

HTML is a language for describing web pages.

HTML is the language which browser understands.

Intro:

Hyper text markup language

Hypertext is simply a piece of text that works as a link.

A Markup Language is a set of markup tags

HTML is “Interpreted” by your browser

The browser reads and interprets the HTML text (code) in real time

Not all browsers interpret EXACTLY the same way, so results may vary!

However, it is very easy to make changes to the HTML code and immediately see the effect….very nice for debugging!

Remember!

HTML tags are keywords surrounded by angle brackets like <html>

HTML tags normally come in pairs like <b> and </b>

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

Start and end tags are also called opening tags and closing tags

Structure and Syntax

HTML has a very particular structure and syntax The HTML Section The Header Section The BODY Section

Basic structure of HTML document

Contains information which is

not directly displayed in the

browser, but browsers may use it

in other ways.

Contains the content to be displayed in

the browser and also the code that tells the browser how to render the content.

head

body

Basic Document Structure

<HTML><HEAD> <Title> </Title></HEAD><BODY>

</BODY></HTML>

signifies an HTML document

instructions about the document

visible pages elements go here

end of the HTML document

Common Tags

Always include the <HTML>…</HTML> tags HTML documents

HEAD section Information about the document Information in header not generally rendered in display

window TITLE element names your Web page

BODY section Page content Includes text, images, links, forms, etc. Elements include backgrounds, link colors and font faces P element forms a paragraph, blank line before and after

<Head> Section:

<html><head> <title>My First HTML

Document</title></head>

<body></body>

</html>

Titles in HTML

titles appear in the title bar of the pagetitles create a frame of reference for the user

example:<TITLE>My First Web Page</TITLE>

<BODY> Section:

Paragraphs: HTML documents are divided into paragraphs. <P> tag forms a paragraph, blank line before and

after.Headings

Simple form of text formatting Vary text size based on the header’s

“level”(h1,h2,h3,h4,h5,h6). Can vary significantly between browsers

Simple HTML Commands

HTML commands (also called “tags”) are always enclosed in angle brackets. E.g., <title>

Tags are case insensitive, so <title> and <TITLE> mean the same thing.

Location of HTML Tags

The effect of an HTML tag is usually independent of where it appears when you are editing the HTML file (e.g., does it appear at the start of a line, in the middle, end of a line). So this is just as good.

<title>War and Peace

</title>

A Simple HTML Example

<html><head><title> War and Peace </title></head><body><h1> Chapter 1 </h1> The end.</body></html>

Says this is a HTML document

The following goes in the header

Start the main body

Chapter 1 gets made into a main heading

Close the main body, and the html document

Empty HTML Elements

HTML elements with no content are called empty elements.

A very few elements are declared as EMPTY. This means three things: They do not contain any text. They are used

simply as markers. EMPTY elements are not permitted to have an

end-tag. They are closed in start tag.For Example : <br/> and <hr/>

<BODY> Section:

<html><head> <title>My First HTML

Document</title></head><body>

<h1> Hello World!!!</h1> <p> This is my first WEB PAGE</p>

</body></html>

Levels of Heading tag:

<h1> .. </h1><h2 > .. </ h2><h3 > .. </ h3><h4 > .. </ h4><h5 >.. </ h5><h6 > .. </ h6>

<html><head> </head><body>

<center><h1> Level 1 Header </h1><h2 > Level 2 Header </ h2><h3 > Level 3 Header </ h3><h4 > Level 4Header </ h4><h5 > Level 5 Header </ h5><h6 > Level 6 Header </ h6></center>

</body></html>

EXAMPLE:

Header elements H1 through H6

Text Styling

Text Styling

Underline style <U>…</U>

Align elements with ALIGN attribute right, left or center

Close nested tags in the reverse order from which they were opened

Emphasis (italics) style <EM>…</EM>

Strong (bold) style <STRONG>…</STRONG>

Example:

<html><body><p><b>This text is bold</b></p><p><strong>This text is

strong</strong></p><p><i>This text is italic</i></p><p><em>This text is

emphasized</em></p></body>

</html>

Stylizing text on Web pages

HTML Text Formatting TagsTag Description

<b> </b> bold text

<big> </big>big text.(causes the size of text to be increased by one font size. )

<em> </em> emphasized text

<i> </i> italic text

<small> </small>small text(causes the size of text to be decreased by one font size)

<strong> </strong> strong text

<sub> </sub> subscripted text

<sup> </sup> superscripted text

<ins> </ins> inserted text

<del> </del> deleted text

Example:

Example:

<html> <body>

<p><big>This text is big</big> </p> <p><small>This text is small</small></p>

<p>This is<sub> subscript</sub> </p> <p>This is<sup>superscript</sup></p>

<p>This is<del>deleted</del></p> <p>This is<del>deleted</del> but <ins> insert </ins> is used</p>

</body> </html>

Output:

Text in HTML

simple text is enclosed in paragraph tags

example:

<P>The rain in Spain <P>stays mainlyonly the plain.

appears as:

The rain in Spain stays mainly on the plain.

The closing </p> tag is optional.

Text in HTML

break tags help to format lines

example:

<P>Roses are red,<BR/>violets are blue,<BR/>sugar is sweet . . .</P>appears as:

Roses are red,violets are blue,sugar is sweet . . .

Attributes of Tags:

“Attributes are the properties of tag.”

Attributes give certain characteristics to a tag (e.g., height, width, color, etc.

Attributes are always specified in the start tag.

Attribute values should always be enclosed in quotes.

Syntax:

The general syntax is as follows:

<tag attribute1 = "value" attribute2 = "value" ... >

</tag>

Text in HTML

font faces and other attributes may be specified

example:

<P><FONT FACE=“Arial”>The rain in Spain stays mainlyon the plain.</FONT></P>appears as: (in Arial)

The rain in Spain stays mainly on the plain.

Words To Know:

HTML Tag : Tags are elements of the HTML document used to specify how

the document should be displayed by the browser. Tags look like this: <tag>

Elements: Tags are also called element. An HTML element starts with a start tag / opening <tag> An

HTML element ends with an end tag / closing </tag>. . The element content is everything between the start and the

end tag.

Attribute : Used to modify the value of the HTML element. Elements will

often have multiple attributes. For now just know that a tag is a command the web browser

interprets, an element is a complete tag, and an attribute customizes or modifies HTML elements.

HTML Comments

Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.

Comments are written like this:



Editing HTML

HTML files or documents Written in source-code form using text editor Notepad: Start-Programs-Accessories

HTML files .htm or .html extensions Name your files to describe their functionality File name of your home page should be index.html

Errors in HTML Usually not fatal

Design

Introduction to HTML