Anda di halaman 1dari 23

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. <command>Some Content</command>
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 <html></html> 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 <head></head>. 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.

<head></head>

<title></title>

<body></body>

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.
<hn align=value>your text here</hn>

Creating Paragraphs
Is defined as a group of text. Paragraph text inserts a space before and after the group of text. <p align=left></p>

Inserting Line Breaks


The <br> command is used to break a line within a group of text or paragraph. The <br> tag is an example of an empty tag.

Required HTML Tags


<html> <head> <title>Insert Page Title</title> </head> <body> Type page content here </body> </html>

Lists
Ordered list: This is generally a numbered list and requires start <OL> and end </OL> tags. Each item in the list begins with <LI> Unordered list: This is generally a bulleted list and requires start <UL> and end </UL> tags. Each item in the list begins with <LI>. Definition list: this is the list of terms with indented definitions. This list requires a start tag <DL>. Additionally, the tag <DT> is required for the term and <DD> is required for the definition.

Text Formatting
Bold: to bold text requires start <B> and </B> 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 <I> and end </I> tags. Underline: to underline text, use the start <U> and end </U> tags.

Changing Font Size and Color


Start <FONT> and end </FONT> tags.
Example: <FONT SIZE = 3> <FONT COLOR = RED> <FONT FACE = ARIAL> Headings: <H1> .</H1>

Aligning a Paragraph
<p align =left> <p align =right> <p align=center>

Quoting Passages
<blockqoute> </blockqoute

Horizontal Rule
<hr>

Invisible Comments
<!-- as a starting tag and --> as an end tag.

Changing the Background Color of a Page


<body bgcolor=red>

Activity 2
1. Launch your text editing program. 2. Create the template:
<html> <head> <title> </head> <body> </body> </html>
</title>

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 <b> </b> <i> </i> <u> </u> <strike> </strike> Displays the text in boldface Displays the text in italics Displays the text with an underline Displays the text with strikethrough

<sup> </sup>
<sub> </sub>

Displays the text in superscript


Displays the text in subscript

<strong> </strong>
<big> </big> <em> </em> <small> </small>

Displays the text with strength


Displays the text with an increase in size Displays the text with emphasis Displays the text with a decrease in size

Specifying Font Size


<font size = value>

Specifying Font Face


<face = value>

Preformatting Text
<pre> </pre>

Specifying Text Color


<font> </font>

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 <BR>. 3. Press the [enter] key. 4. Add another <BR> and press the [ENTER] key. 5. Type <P>My teachers name is .</P>. Press [Enter]. 6. Type <P>My Favorite subject is </P>. 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 <CENTER> I like school because:</CENTER> 3. Type a BREAK <BR> tag and press [ENTER]. 4. Type <OL> to begin your ordered list. Press [ENTER]. 5. Type <LI> to begin the first item in the list. 6. Type It is fun. Press [ENTER]. 7. Type <LI> and then type My teachers are good teachers. Press [ENTER]. 8. Type <LI> and then type I have an opportunity to learn about .Press [ENTER]. 9. Type </OL> to end list. 10. Save your file. 11. Display the file in your browser.

Anda mungkin juga menyukai