HTML Example

Download Report

Transcript HTML Example 

eVenzia Technologies
Learning HTML, XHTML & CSS
Chapter 1
1
Course Objective
Following the completion of this course, you will
be able to write html code and do the following:









Creating paragraphs and line breaks
Create headings
Work with lists
Apply comments
Apply formatting to text
Create tables
Create links to other web pages and e-mail addresses
Insert graphics
Create character entities
eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
2
Basic Structure of a Web Page
A web page designed in HTML has to follow a certain structure in order
to be properly interpreted by the browser. First and most importantly,
the entire source code and text of the web page has to be enclosed in
the <HTML></HTML> tags. This tells the browser software that the
document it is reading is written in Hyper Text Mark-up Language and
should be interpreted as such. Without this tag, some browsers will not
be able to read your web page and it will be displayed as plain text to
the user, tags and all.
Within the <HTML></HTML> tags are 2 sections:
the Head Section and the Body Section.
eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
3
Basic Structure of a Web Page
The Head section
is defined by the <HEAD></HEAD> tags. Code within those tags define
how your document will be interpreted by the browser, how your
document will be displayed, and other information not seen by the user.

The Body section
is where the guts of your web page is coded. Any text,
graphics, sound, video and links to other pages go within the
<BODY></BODY> tags. Each page in your web site will follow this
same structure.

eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
4
The Browser War
1.
2.
3.
Internet Explorer
Chrome
Firefox
Statistics – 2010
IE



August
July
June
30.7%
30.4%
31%
Chrome
17%
16.7%
15.9.3%
FF
45.8%
46.4%
46.6%
eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
5
HTML <!DOCTYPE> Declaration

The doctype declaration should be the very first thing in an HTML
document, before the <html> tag.

The doctype declaration is not an HTML tag; it is an instruction to
the web browser about what version of the markup language the
page is written in.

The doctype declaration refers to a Document Type Definition
(DTD). The DTD specifies the rules for the markup language, so that
the browsers can render the content correctly.
eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
6
Differences Between XHTML & HTML
The Most Important Differences:

XHTML elements must be properly nested
<b><i>This text is bold and italic</b></i>
<b><i>This text is bold and italic</i></b>

XHTML elements must always be closed
<p>This is a paragraph
<p>This is a paragraph</p>
eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
7
Differences Between XHTML & HTML
The Most Important Differences:

XHTML elements must be in lowercase
<BODY> <P>This is a paragraph</P></BODY>
<body> <p>This is a paragraph</p> </body>
eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
8
What is HTML?

HTML is a language for describing web pages

HTML stands for Hyper Text Markup Language

HTML is not a programming language, it is a markup
language

A markup language is a set of markup tags
eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
9
What is an HTML File?

An HTML file is a text file with HTML tags

An HTML file name must end with .htm or .html

An HTML file can be created using a simple text editor

An HTML file is often called an HTML document or a
Web Page
eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
10
An HTML Document

When a browser displays a web page, it will not display
the markup tags.

The text between the <body> and </body> tags is
displayed in the web browser.

The text between the <p> and </p> tags is displayed as
paragraphs.

The text between the <b> and </b> tags is displayed in a
bold font.
eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
11
What to Include in Every Web Site






Home Page
Sitemap
Contact Page
FAQ
Help Page
About Us
eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
12
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 only allowed three letters in
file extensions.

With new software it is perfectly safe to use .html.
eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
13
Creating a New Web Page
Download Emeditor

Run The Program
Creating your first file

File -> New -> HTML
Saving your file
File -> Save -> file name (“index”) -> Save
eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
14
HTML Document Code Structure
<html>
<body>
Your body contents here
</body>
</html>
eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
15
Keywords & Description
<html>
<head>
<title>Page title is added here</title>
<meta name='description' content=‘Keywords'>
<meta name='keywords' content=‘Description'>
</head>
<body>
Your body contents here
</body>
</html>
eVenzia Technologies (XHTML & CSS Training course - Chapter 1)
16