Web Design With XHTML

LESSON 2
CREATING A BASIC PAGE STRUCTURE

If you followed the first Lesson, you should have been familiar with some of
these terms. I will advise that you get a jotter to note something down
THE GLOBAL STRUCTURE
The Global Structure is the overall structure of an XHTML document which
consists of the elements required to display a web page.
DTD:The DTD is used to determine the elements and attributes allowed in an
XHTML document
Namespace: The name space declaration informs the browser about the
language used.
<head></head>: The head section that contais information such as title of
the web page, character set and style sheet.
<title></title>:
The title of the web page
<body></body>: The Body Section that consists of the elemnts to be

displayed on the web page.
<p></p>:
</html>
paragraph containing some text to be diplayed

The closing HTML tag.
DOCUMENT TYPE DEFINITION (DTD)

DTD is an XHTML element used to determine the elements, attributes
and characters of a document.
The DTD should be the first line of an HTML or an XHTML document.
A DTD can either be strict or Flexible
RULES IN WRITING AN XHTML DOCUMENT

1. Doctype is required
-<! DOCTYPE html
PUBLIC "-//W3c//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. All tags and attributes must be written in lower case e.g.
<p>This is a paragraph</p>
3.All elements must be properly enclosed e.g.
<head> Title of Web Page</head>

4.The attribute values must always be quoted e.g.
<img src="url" alt="text"/>
5.All elements must be properly nested e.g.
<p><em>This is an emphasized word.</em><p>
6.Attribute values must not be minimized e.g.
<input checked="checked">
7. The style sheet or CSS must be separated from the presentation
<style type="text/css">
HOW TO CREATE A BASIC PAGE
Creating a Basic Web Page Structure
1.Declare a DTD and a name space

a. Open a blank document in the notepad application
b. Click the first line and enter the DTD
c. Type <! DOCTYPE html
d. Press Enter and type
PUBLIC "-//W3c//DTD XHTML 1.0 Strict//EN"
Press Enter and type
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
e. Press Enter and type
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
to declare Namespace
2. Enter the head section of your webpage

a. Press Enter and type <head>
b. Press Enter and type <meta http-equiv+"content-type"
content+"text\html; charset=utf-8" and press Enter
c. type
<title>My First Webpage </title> to enter the title of your Webpage and
Press Enter
d. Press Enter and type </head> to close the head section
3. Enter the body section of your web page

a. Press Enter and type <body>
b. Press Enter and type </body> NB: you can type anything you want inbetween the opened and closed body tag. To start a new line, you can use
paragraph element <p> and close it </p>
c. Press Enter and type </html> to end the document.
4.Save and view the File

a. Choose File---Save as to open Save As dialog box
b. In the File name textbox type "Index.html" NB: Open a new folder and save
it insid
c. From the save as drop down list, select all files and click Save.
d. Open your browser and choose File----Open
e. In the Open dialog box. click Browse and open the document you saved.
IMAGES
The <img> tag requires the src attribute, which specifies the path to an
image.
Adding Text and Images
1. Create a paragraph about your Webpage
a. Click after the <body> and press Enter
b. Type <p> to insert a new paragraph

c. Type in whatever you want in the paragraph
d. Type </p> to close paragraph
e. Choose the File-----Save
f. Refresh your browser to display the paragraph or open your webpage
again.
2. Embed your webpage banner at the top of your web page

a. Switch to the notepad and click after the <body> tag and press Enter
b. Type
<p><img src="your picture's name.jpeg" alt+"webpage banner"/></p>
NB: Your picture must be inside the folder that has your webpage file
"index.html".
(any picture for now)your picture's name must be correctly spelled and must
have correct file
extension e.g. .jpeg,.gif. etc.
c. Save your File
d. Switch to your web browser and Refresh your Web browser
3. Insert comments for the footer section

a. Switch to the notepad and click after the paragraph containing
press Enter
text and
b. Type  to label the section as page footer

c. Press Enter and type 
d. Click Save and Switch to web browser and refresh
That will be all for this lesson, If you encounter any problem, comment below
and you will be replied shortly.
Watch out for Lesson3- Structuring Content. Please share for others to
benefit.
LESSON 3
STRUICTURING CONTENT
Having followed the previous lessons, You now intend to organise the page in
such a way that each section is different from the other.
A badly designed and disordered web page may discourage potential users
from visiting your website. You will learn how to iclude headings, line breaks,
horizontal rules and list in this lesson.
CREATING HEADINGS AND HORIZONTAL RULES
you learntb how to create a basic document structure in the last lesson
consisting of some text and graphics. You would now like to arrange the
contents in such a way that each section is distinguishable from the other
sections.
Headings
A heading is a line of text used to indicate athe nature of information given in
the subsequent paragraph. There are six levels of headings in XHTML, from
<h1> which is the most important type of heading to <h6>, least important.
A browser will render the more important ones using a larger font size and
the less important ones using a smaller font size.
Horizontal Rules
It is a long line used to visually divide sections of a web page. You can specify
the height, width and position of a horizontal rule on a web page.
How to create Headings and Horizontal Rules
Create Headings
1. Determine the location for your heading
2. Determine the level of heading you would like to use
3. Enter the opening tag <hn> for the chosen heading level where n is a
number between 1 and 6
4. After the opening heading tag, input the required text.
5. After the text, Close the tag </hn>
6. Save the file and test on your browser.
Create horizontal rules

1. Determine the location
2. In the chosen location add the <hr/> tag for every horizontal rule you want
to create
CREATING LINE BREAKS
Line Breaks
when younuse the <p> tag to make a string of text appear on a different line,
it leaves a blank space above and below the block of text. Using the <br>
tag, you can break a line of text where you want it to and start a new one
without any space in between.A <br/> tag is an empty element and has to be
enclosed inside a <p> tag or other block level tags.
Most times, decreasing the size of your browser may create unwanted line
breaks, you acn prevent that by using the character entity.
Create Line Breaks
1. Identify the lines you want a line break in between
2. type <br/> in the determined locations
CREATING LISTS
Lists are used to present infromation that can be grouped under a particular
category or heading.The are three types of lists
Bulleted/Unordered List: It is used to list items that don't have to be in
particular order.Bullets are used to lists items. Unordered lists are
represented eith <ul></ul> and each item is represented within <li></li>
Numbered/Ordered List: It is used to list items in sequential order. Ordered
lists are represented by <ol></ol> and each item is represented within
<li></li> tags.
Defintion List: A defintion list is useful when you add information to describe
the list items.They are represented with <dl></dl> tags. The term is written
inside <dt></dt> tags and the description enclosed between <dd></dd>
tags.
How to create Lists
1. Type the appropriate opening tag
Begin with <ul> to create an unordered list

Type <ol> to cretae an ordered list
2. Addd items with each opening with <li> and closing with </li>
3. Add the appropraite closing tag, </ul> or </ol>
4. Save and test on your browser.
Below is a picture which reresenst the html file and the coresponding
webpage.
Lesson 4 coming soon- Applying styles using Css
Please comment below!

Web Design With XHTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Web Design With XHTML

Transféré par

Droits d'auteur :

Formats disponibles

LESSON 2

CREATING A BASIC PAGE STRUCTURE

The title of the web page

<body></body>: The Body Section that consists of the elemnts to be

paragraph containing some text to be diplayed

DOCUMENT TYPE DEFINITION (DTD)

The DTD should be the first line of an HTML or an XHTML document.

A DTD can either be strict or Flexible

RULES IN WRITING AN XHTML DOCUMENT

-<! DOCTYPE html

PUBLIC "-//W3c//DTD XHTML 1.0 Strict//EN"

<head> Title of Web Page</head>

HOW TO CREATE A BASIC PAGE

Creating a Basic Web Page Structure

1.Declare a DTD and a name space

2. Enter the head section of your webpage

3. Enter the body section of your web page

4.Save and view the File

b. Type <p> to insert a new paragraph

2. Embed your webpage banner at the top of your web page

3. Insert comments for the footer section

b. Type  to label the section as page footer

Create horizontal rules

Begin with <ul> to create an unordered list

Vous aimerez peut-être aussi