How do I create a Web Page?

• Web page: this is a plain text document on the World Wide Web. Every Web page is identified by a unique address, or URL. • HTML: is the language of the Web. HTML is a series of tags that are integrated into a text document. • Web browser: interprets the HTML tags within the pages so the text can be displayed on the screen. • Web server: displays Web pages and renders them into final form so they can viewed by anyone with an Internet connection and a Web browser.

What is a Web Design?

• Web design is the process of selecting, formatting, and arranging Web content in order to effectively express an idea.

HTML Tags • HTML commands are known as tags or markup. HTML tags define the structure of the Web elements or content. Some Content Opening tag

Closing tag

Types of HTML Tags There are two basic classification of HTML tags: 1. Empty tag – this type of HTML tag does not have a closing tag. 2. Container tag – this type of HTML tag is used to contain within its opening and closing tags content and other HTML tag.

Creating Your First Web Page To create a web page the following software are needed: 1. Web browser 2. HTML editor

To create a basic web page, the following commands will be used: Tag

Description

…

It is used to indicate that the text enclosed in this tag is in HTML format and that it can be viewed using a browser.

…

It is used to define the header area. The content of the header area is not displayed within the page of the browser.



It is placed inside the …. The information placed inside this tag will be displayed on the title bar of the browser window.

…

It is used to indicate that the text enclosed inside this tag will be displayed on the browser page.

Heading Tags • Is used to create hierarchy within the document such that some text are assigned as titles while others are assigned as topic or subtopic headers. your text here

Creating Paragraphs • Is defined as a group of text. Paragraph text inserts a space before and after the group of text.

…

Inserting Line Breaks • The
command is used to break a line within a group of text or paragraph. The
tag is an example of an empty tag.

Required HTML Tags Type page content here

Lists • Ordered list: This is generally a numbered list and requires start

and end

tags. Each item in the list begins with

• Unordered list: This is generally a bulleted list and requires start

and end

tags. Each item in the list begins with

. • Definition list: this is the list of terms with indented definitions. This list requires a start tag

. Additionally, the tag

is required for the term and

is required for the definition.

Text Formatting • Bold: to bold text requires start and end tags. Surround the text with these tags and your text display as bold in your browser. • Italics: to display italicized text, use the start and end tags. • Underline: to underline text, use the start and end tags.

Changing Font Size and Color • Start and end tags. Example: Headings:

….

Aligning a Paragraph •

•

•

Quoting Passages • …
Horizontal Rule •

---

Invisible Comments • as an end tag.

Changing the Background Color of a Page •

Activity 2 1. Launch your text editing program. 2. Create the template:

3. Save your text as HTML template.htm 4. Close your editing program.

Font Style and Effects • Typography – appearance and arrangement of the characters that make up your text. • Typeface – the actual appearance, examples are Times New Roman, Arial, etc. • Type Style – this is the variations given to the text such as boldface, italic, regular, etc. • Font – combination of typeface and type style.

Specifying Font Style Tags commonly used for formatting

Displays the text in boldface



Displays the text in italics



Displays the text with an underline

<strike>

Displays the text with strikethrough

<sup>

Displays the text in superscript

<sub>

Displays the text in subscript

<strong>

Displays the text with strength



Displays the text with an increase in size

<em>

Displays the text with emphasis

<small>

Displays the text with a decrease in size

Specifying Font Size •

Specifying Font Face •

Preformatting Text • <pre>

Specifying Text Color •

Activity 2-A 1. Launch your text editing program. 2. Open the HTML template document. 3. On the file menu, click Save As. Save the HTML template document as [your name]’s Web page.htm 4. Between the start and end TITLE tags, type [Your name]’s Web page. 5. Between the two BODY tags, type Welcome to my Web Page 6. On the file menu, click Save. 7. Launch your browser.

Activity 2-B 1. Launch your text editing program and open your Web page document. 2. At the end of the Welcome to my Web page line, add
. 3. Press the [enter] key. 4. Add another
and press the [ENTER] key. 5. Type

My teacher’s name is ….

. Press [Enter]. 6. Type

My Favorite subject is …

. Press [ENTER] 7. On the File menu, click Save, 8. Launch your browser.

Activity 2-C 1. 2.

Launch your text editing program and open your Web page. Click under the last sentence you entered (My Favorite subject is …) and type I like school because: 3. Type a BREAK
tag and press [ENTER]. 4. Type

to begin your ordered list. Press [ENTER]. 5. Type
1. to begin the first item in the list. 6. Type It is fun. Press [ENTER]. 7. Type
2. and then type My teachers are good teachers. Press [ENTER]. 8. Type
3. and then type I have an opportunity to learn about ….Press [ENTER]. 9. Type

to end list. 10. Save your file. 11. Display the file in your browser.