1 evenzia technologies learning html, xhtml & css chapter 1

1

eVenzia Technologies

Learning HTML, XHTML & CSS

Chapter 1

eVenzia Technologies (XHTML & CSS Training course - Chapter 1) 2

Course ObjectiveFollowing 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

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.

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.


The Browser War

1. Internet Explorer

2. Chrome

3. Firefox

Statistics – 2010

IE Chrome FF August 30.7% 17% 45.8% July 30.4% 16.7% 46.4% June 31% 15.9.3% 46.6%

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.

Differences Between XHTML & HTML

The Most Important Differences:

XHTML elements must be properly nested

This text is bold and italic

This text is bold and italic

XHTML elements must always be closed

This is a paragraph

This is a paragraph

Differences Between XHTML & HTML

The Most Important Differences:

XHTML elements must be in lowercase

<BODY> This is a paragraph</BODY>

<body> This is a paragraph </body>


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


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

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 and tags is displayed as paragraphs.

The text between the and tags is displayed in a bold font.


What to Include in Every Web Site

Home Page Sitemap Contact Page FAQ Help Page About Us


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.


Creating a New Web Page

Download Emeditor Run The Program

Creating your first file File -> New -> HTML

Saving your fileFile -> Save -> file name (“index”) -> Save

HTML Document Code Structure

<html>

<body>

Your body contents here

</body>

</html>

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>

1 evenzia technologies learning html, xhtml & css chapter 1

Documents