WebPageDesign.ppt

(1)

Web Page Design Lessons

Lesson 1: Introduction to HTML

Lesson 2: HTML Tags

<font> <body> <h(n)> <hr> <img> html colors <marquee>

<table> List Tags

Formatting tags <frame> superscript bold <a> subscript italic

  center

(2)

Web Page Design

(3)

Objectives

 _{Define Web Page Development terms}

 _{Understand the Web Structure of a simple web page}

setup

 Know the HTML tags use in the HTML document page

structure

 _{Identify the parts of an HTML document}

 _{Understand the uses and function of HTML found on}

the html document page structure

(4)

Web Structure

Site Root Directory

(index.htm) Home Page

html documents

images

css

(5)

Web Terms

 _{HTML - short for Hyper Text Markup Language, the}

language used in creating documents on the World Wide Web..

 _{Web Browser - A software that enables the user to}

view Web pages that are created in HTML codes.

 _{Tags - codes found inside an HTML document.}

<HTML> <HEAD> <TITLE> <BODY> </HTML> </HEAD> </TITLE> </BODY> Opening

tags Clos

(6)

(7)

Explanation of document structure tags

<HTML>...</HTML> Encloses the entire HTML

document.These tags let the browser know to start

reading and displaying the information presented within.

<HEAD>...</HEAD>The <HEAD> element contains all information about the document in general. It contains HTML elements that describe the document's usage and relationship with other documents

<TITLE>...</TITLE> The <TITLE> is contained in the <HEAD> of the document. It is displayed at the top of the browser window and on the bookmark list, so it is

(8)

Explanation of document structure tags

(9)

(10)

Viewing your Web Page

HTML document when typed using Notepad

HTML codes display when viewed using a

(11)

Web Page Design

Lesson 2: HTML tag

(12)

Font tag

(Text)

The text that you are going to use on your web page is controlled by the font tag,

SYNTAX: <font>…</font> The <font> tag attributes are:

face="font name"

(13)

Font tag

<Html>

<font face="verdana" size=4

color="blue">assumption antipolo</font> </body>

</html>

(14)

HTML color value

HTML Color Values

HTML colors can be defined as a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB).

The lowest value that can be given to one light source is 0 (hex #00) and the highest value is 255 (hex #FF).

(15)

Body tag

The <body> tag is a container where you put text and images you want to appear of your web

page.

SYNTAX: <body>…</body>

The <body> tag attributes are: background="image.gif" bgproperties=“fixed"

(16)

Header Tag

The <hn> tag is use to format text on your web pages. This tags whose function is to create

headings, subheadings titles on your page

SYNTAX: <hn>…</hn>

(17)

Header Tag

<Html>

<h1>assumption antipolo</h1> <h2>assumption antipolo</h2> <h3>assumption antipolo</h3> <h4>assumption antipolo</h4> <h5>assumption antipolo</h5> <h6>assumption antipolo</h6> </body>

</html>

(18)

Image Tag

The <img> tag allows you to add image on your page.

SYNTAX: <img>

The <img> tag attributes are:

src=“path and name of the image file” width=“n" in pixels and in percentage(%) height=“n" in pixels and in percentage(%) border=“n" in pixels.

align="center, left or right”

(19)

Image Tag

<html>

</body> </html>

(20)

Horizontal Rule Tag

The <hr> tag is used to create a horizontal line on your page.

SYNTAX: <hr>

The <hr> tag attributes are: width=“n" in pixels

size=“n" in pixels.

align="center, left or right” noshade

(21)

Horizontal Rule Tag

<html>

<body>

</body> </html>

(22)

Web Page Design

Lesson 3: HTML tag

(23)

Marquee tag

The <marquee> display a scrolling text inside your web Page.

SYNTAX: <marquee>…</marquee> The <marquee> tag attributes are:

width= vertical dimensions.(value is in pixels)

height=horizontal dimensions.(value is in pixels)

direction=“left, right, up and down“ behavior=“scroll, slide and alternate"

(24)

Marquee tag

save this file under filename:marquee.htm

<marquee bgcolor=#ffff00>assumption antipolo</marquee><marquee>assumption antipolo</marquee> <marquee width=200px height=200px bgcolor=#ff0000

direction="down">assumption antipolo</marquee>

<marquee bgcolor=#00ffff behavior=“alternate">assumption antipolo</marquee>

(25)

List tags

Unordered list - display a bulleted list inside your document page.

SYNTAX: <ul>…</ul>

<li> refers to the items that will be displayed on your unordered list tag.

(26)

List tags

<html>

---M E N

U--- <ul type=square>

<li>Tinolang Manok <li>Adobong Manok <li>Sinigang na Manok <li>Pritong Manok

<li>Manok na ginawang Bola </ul>

</body>

</html>

(27)

List tags

Ordered list - display a numbered list of item inside your document page.

SYNTAX: <ol>…</ol>

<li> refers to the items that will be displayed on your unordered list tag.

(28)

List tags

<html>

---M E N

U--- <ol type=I>

<li>Ginataang Isda <li>Pritong Isda <li>Inihaw na Isda <li>Tinapang Isda

<li>Isda na ginawang Bola </ol>

</body>

</html>

(29)

List tags

Definition list - display a list of terms and definition in your web page.

SYNTAX: <dl>…</dl>

(30)

List tags

(31)

List tags

<html>

<head><title> definition list tag</title></head> <body>

Definition of Terms:<br>

<dl>

<dt>Web Browser

<dd>A software that enables the user to view web pages that are created in HTML codes. <dt>HTML

<dd>HTML stands for Hyper Text Markup Language. It is a scripting language whose primary purpose is to create pages that are used on the WWW (World Wide Web). HTML pages or documents consist of codes called Tags embedded in the text of a document.

<dt>Tags

<dd>are codes in an HTML document which the internet browser reads and then interprets for succeeding display to a reader. An HTML document should always start with the tag [HTML], followed by the [HEAD], [TITLE] and the [BODY] that only occur once.

</dl>

</body>

</html>

(32)

Table tag

The <table> specify a container for data the will be viewed as tables inside your web document. SYNTAX: <table>…</table>

Inside the <table> tag rows and columns are included:

<tr> refers to the table row of the table. <td>refers to the table cell of the table.

(33)

Table tag

The <table> Attributes:

Align=“left, center and right” default value is left. bgcolor=“color name or Hex number“

border=“pixels” Specifies the border width. The value="0“ displays table with no border, the default value of the <table> tag.

cellpadding=“pixels/%” Specifies the space between the cell walls and contents.

(34)

Table tag

The <table> Attributes:

frame=“above, below, hsides, lhs, rhs, vsides, box, border” Specifies which sides of the border side will appear. The "border" attribute can be used in specifying the width of the

border.

(35)

Table tag

</td> </tr> </table>

</body>

</html>

(36)

Table tag

<html>

<table border=5 cellpadding=30px> <tr>

</td> </tr> </table>

</html>

(37)

Table tag

Cellpadding=30px

The space between the cell walls and the

(38)

Table tag

<html>

</tr> </table>

(39)

(40)

Table tag

<html>

</tr> </table>

(41)

Table tag

Cellspacing=30px

(42)

Table tag

(43)

Table tag

<html>

<td colspan=2 align="center">Assumption Antipolo logo</td></tr> <tr>

<tr>

<td colspan=2 align="center">Sumulong Highway, Antipolo City</td></tr>

</table>

(44)

Table tag

(45)

Table tag

<html>

<table border=2 cellpadding=4>

<tr>

<td>assumption antipolo</td></tr> <tr>

<td>sumulong highway, antipolo city</td></tr> <tr>

(46)

Web Page Design

Lesson 4: HTML tag

Formatting tags <frame> superscript bold <a>

(47)

Formatting tags

Formatting tags allow you to add or change the style view of your web page window.

<b>…</b> bold <i>…</i> italic

<u>…</u> underline <sup>…</sup> superscript <sub>…</sub> subscript <br> line break

(48)

Formatting tags

<html> <head><title)Formatting tags</title></head> <body>  Assum<b>ption Anti</b>polo<br> Assumption <i>Antipolo</i><br> Assumption <u>Antipolo</u><p> Assumption <sup>Antipolo</sup><br> <sub>Assumption</sub> Antipolo<br>

Assumption Antipolo

</body> </html>

(49)

Frameset tags

Frames allow you to subdivide your web page window to multiple windows.

SYNTAX: <frameset>…</frameset> The <frameset> tag attributes:

cols=“%" rows=“%"

border=“n" in pixels.

bordercolor="color name or hex number " frameborder="yes"|"no"

(50)

The Element Frame

Defines a rectangular subspace within a

Frameset document. Each FRAME must be contained within a <frameset> that defines the dimensions of the frame.

Frameset tags

The <frame> tag attributes: name=“name”

marginheight =“n" in pixels. marginwidth =“n" in pixels.

(51)

Frameset tags

The <frame> tag attributes: frameborder=“yes” | “no” noresize

(52)

Frameset tag

(53)

Frameset tag

Vertical Frames (columns)

<html>

<head><title>Vertical Frame</title></head> <frameset cols=25,50,25>

</html>

A comma-separated list of widths for division of window in columns.

(54)

Frameset tag

(55)

Frameset tag

Horizontal Frames (rows)

<html>

<head><title>Horizontal Frame</title></head> <frameset rows=25,50,25>

</html>

(56)

Frameset tag

(57)

Frameset tag

Horizontal and Vertical Frames (rows & columns)

<html>

<head><title>Horizontal and Vertical Frames</title></head> <frameset rows=130,*>

<frame>

</html>

The asterisk * replaces the

remaining percentage to 100%.)

(58)

Frameset tag

<html>

</html>

Filename: blue.html

<html>

<head><title>Yellow Page </title></head>

</html>

(59)

Frameset tag

<html>

</html>

(60)

Frameset tag

(61)

Frameset tag

<html>

<head><title>Vertical Frame</title></head>

</frameset>

(62)

Anchor tags

The anchor tag <a> is used to create links to HTML files internal (on current page or within current website) or external (other websites)

SYNTAX: <a>…</a>

The <a> tag attributes:

* href=“Specifies a hypertext link to another

resource, such as an HTML document or image.”

(63)

Anchor tags

The <a> tag attributes:

* target=“Is used with frames to specify the frame in which the link should be rendered or appear.”

(64)

Anchor tag

Open the file yellow.html

<html>

<head><title>Yellow Page</title></head> <body bgcolor=“yellow”>

(65)

Anchor tag

<html>

<a href="yellow.html">Yellow</a><br> <a href="blue.html">Blue</a><br>

</html>

(66)

Anchor tag

Open the file combined.html with a browser

The text link

(67)

Anchor tag

<html>

<a href=“yellow.html”

target=“_blank”>Yellow</a><br>

</html>

save this file The "_blank" value opens

(68)

Anchor tag

Open the file combined.html using notepad. <html>

<head><title>Horizontal and Vertical Frames</title></head>

(69)

Anchor tag

Open the file combined.html using notepad. <html>

<head><title> Horizontal and Vertical Frames </title></head>

</html>

(70)

Anchor tag

<html>

target=“_blank”>Yellow</a><br> <a href="blue.html“

target=“_blank”>Blue</a><br> <a href="red.html“

target=“_blank”>Red</a><br> </body>

(71)

Anchor tag

<html>

target=“right”>Yellow</a><br> <a href="blue.html“

target=“right”>Blue</a><br> <a href="red.html“

target=“right”>Red</a><br> </body>

</html>

(72)

Anchor tag

Creating a document jump link using the <a>

name attibute.

<a href="#introduction">Introduction</a>

(73)

Web Page Design

Lesson 5: HTML tag

(74)

Web Terms

 URL - URL stands for Uniform Resource

Locator or web page address locator.

 CGI - Stands for Common Gateway Interface

is a standard protocol for interfacing external application software with an information

(75)

Web Terms

Example of a URL

http://www.assumptionantipolo.edu.ph/webpage/index.html.

Explanation of the URL

http:// tells the web browser that the URL is of a web page.

www.assumptionantipolo.edu.ph is the domain name of the server where the web page is stored.

/webpage/ shows which directory the URL is located in on the server.

(76)

Form tag

The <form> tag allows you to add forms to your web pages using the form elements. Form

elements are elements that allows the interact with the computer by entering information to the computer. This elements are associated with the <input> tag.

SYNTAX: <form>…</form>

The <form> tag attributes

Attribute Value Explanation

(77)

Form tag

The <form> tag attributes

Attribute Value Explanation

method get The HTTP method for

post sending data to the action url. The default value is

get.

method="get": This method sends the form contents in the url.

method="post": This method sends the form contents in the body of the request.

(78)

Form tag

How to use the <form> tag and its attributes.

• Inform the browser that you are going to

use or starting a form in your web page.

(79)

Form tag

<form method="post" action="mailto:your email address">

•The command informs the browser that you are starting or using a form.

•The command informs the browser that the

(80)

Form tag

The <input> is use to define the type of elements will be use to enter data or information in the

computer.

SYNTAX: <input>

The <input> tag attribute

(81)

Form tag

Types of Elements: button

checkbox file

hidden image

password radio

(82)

Form tag

Text Element

A text area entry field allows multiple lines of entry to be entered by the Web Surfer. Typical uses are to provide comments the Web surfer can enter.

<form>

(83)

Form tag

The <form> tag allows you to add a guestbook, order forms, surveys to your web pages .

SYNTAX: <form>…</form>

<FORM>

<SELECT

onChange="document.bgColor=this.options[this.selectedIndex].value" >

<OPTION VALUE="FFFFFF">White <OPTION VALUE="FF0000">Red <OPTION VALUE="00FF00">Green <OPTION VALUE="0000FF">Blue </SELECT>

(84)

Web Page Design

Lesson 5: HTML tag

(85)

Division tag

The <div> tag is use as a container for other tags. The same use and function of the body tag. The div elements are block elements to group other tags together.

SYNTAX: <div>…</div> The <div> tag attributes

id