Scribd
Upload
146 views75 pages

Horizontal Rule

The document provides information on various HTML tags for formatting text and creating structures like lists, tables, images and links. It includes tags for headings, paragraphs, horizontal rules, preformatted text, ordered and unordered lists, definition lists, images, hyperlinks, tables, forms, frames and more. Each tag is explained along with its attributes and sample code structures. The document also includes activities for the reader to practice implementing different tags.

Uploaded by

Psalmer Cris
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
146 views75 pages

Horizontal Rule

The document provides information on various HTML tags for formatting text and creating structures like lists, tables, images and links. It includes tags for headings, paragraphs, horizontal rules, preformatted text, ordered and unordered lists, definition lists, images, hyperlinks, tables, forms, frames and more. Each tag is explained along with its attributes and sample code structures. The document also includes activities for the reader to practice implementing different tags.

Uploaded by

Psalmer Cris
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 75

HORIZONTAL RULE <HR>

<HR> - horizontal rule, creating a straight line - it is a type of an EMPTY TAG

ATTRIBUTES: <HR>
Size height of hr (5)

Color color name (primary / hexa color) Width length of the line (100)

SAMPLE STRUCTURE
<HTML> <HEAD> <TITLE> HORIZONTAL RULE </TITLE> </HEAD> <BODY> <HR SIZE = 5 COLOR = GREEN > <H1> MY SAMPLE HORIZONTAL RULE </H1> </BODY> </HTML>

PREFORMATTED <PRE></PRE>
<pre> - tag defines a block of preformatted text.

SAMPLE STRUCTURE
<HTML> <HEAD><TITLE>PREFORMATTED</TITLE> </HEAD> <BODY> <PRE> FIRST NAME SURNAME </PRE> </BODY> </HTML>

CREATING LIST
Two types of LIST > UNORDERED LIST > ORDERED LIST

UNORDERED LIST <UL></UL>


<ul></ul> (unnumbered list) list type round, square, or disk bullets. <li> (list item) list of item Attribute: Type = square / disc / round

SAMPLE STRUCTURE

<HTML> <HEAD><TITLE> LIST </TITLE> </HEAD> <BODY> <H1>UNNUMBERED LIST</H1> <UL> Laboratories here in INFORMATICS <LI> LAB 4 <LI> LAB3 <LI> LAB 5 <LI> LAB 6 <LI> SR (SHOW ROOM) </UL> </BODY> </HTML>

ORDERED LIST <OL></OL>


<ol></ol> (ordered list) list type A,a,I,I <li> (list item) list of item Attributes: Type = a/A/i/I

SAMPLE STRUCTURE

<HTML> <HEAD><TITLE> LIST </TITLE> </HEAD> <BODY> <H1> ORDERED LIST </H1> <OL>Lecture room here in INFORMATICS <LI> LEC2 <LI> LEC3 <LI> LEC4 <LI> LEC5 <LI> LEC6 </OL> </BODY> </HTML>

ACTIVITY 3
1. 2.

3.

CREATE A PYRAMID IMAGE USING <HR> TAG CREATE 10 list of MOVIES using UNORDER LIST FORMAT. CREATE 10 list of SPORTS using ORDERED LIST FORMAT.

NESTED LIST
Nested list are list that performs specific tasked type by the user inside another loop. (its a combination of <ul> or <ol> / both <ul> / both <ol>) Attributes: For <ul> </ul> Type = square/round/disc For <ol> </ol> Type = A/a/i/i

SAMPLE STRUCTURE
<HTML> <HEAD><TITLE>NESTED LIST</TITLE></HEAD> <BODY> <OL type = A>INFORMATICS VALENZUELA <LI> FIRST FLOOR <UL type = disc> <LI> LEC2 <LI> LEC3 <LI> LAB4 <LI> LAB3 </UL> </OL> </BODY> </HTML>

DEFINITION LIST <DL></DL>


<dl></dl> (definition list) produces an automatically 2 column list with items on the left and definition on the right.

DEFINITION TERM <DT>


<dt> (defined term) text is a term to be defined and should be displayed in the left hand column of a definition list.

DEFINITION DATA <DD>


<dd> (definition data) test is a definition of a term and should be displayed in the right-hand column of a definition list.

SAMPLE STRUCTURE

<HTML> <HEAD> <TITLE> DEFINITION LIST / DEFINITION OF TERM </TITLE></HEAD> <BODY> <DL>CS 114 A , B and C <DT> INSTRUCTOR <DD> Ms. Jessica Crystin Lu </DL> </BODY> </HTML>

ACTIVITY 4
Create

your RESUME

MARQUEE
<marquee></marquee> - create a scrolling or moving text from one part of the screen and floats across to the left or right.

ATTRIBUTE
Behavior = slide / scroll / alternate Direction = left / right / up / down Scrollamount = n (Speeds up, in pixel) Width = n (length where the marquee will move towards the screen, in percentage) Loop = n (no. of times will pass across the screen)

SAMPLE STRUCTURE
<HTML> <HEAD><TITLE> My Marquee </title> </head> <body>

<marquee behavior = "alternate" direction = "down" scrollamount = "25" width = "85%"> HELLO WORLD</marquee> </body> </HTML>

IMAGES
<img src = URL> used to place an image in a document. Extension name that can accept are: .jpg / jpeg (joint photographic experts group) .gif (graphics interface format) .png (portable network graphics)

ATTRIBUTES
Width

= changing the size of the image in terms of pixel or % of the browser (horizontal) Height = changing the size of the image in terms of pixel or % of the browser (vertical) Align = left, right title = alternate word will be replaced if the image fails to load. Border = n (size of line)

SAMPLE STRUCTURE
<HTML>

<HEAD><TITLE> IMAGES </title> </head> <body> <IMG SRC = "HEART1.PNG" ALIGN = "RIGHT" BORDER = "5 TITLE = MY HEART> </body> </HTML>

LINKS
<A> </A> - ANCHOR TAG ATTRIBUTE: HREF = URL (UNIFORM RESOURCE LOCATOR) NOTE: HREF HYPERLINK REFERENCE

TWO TYPES OF LINKS


RELATIVE
y

AND ABSOLUTE

ABSOLUTE HYPERLINK GIVE THE COMPLETE ADDRESS OF THE DOCUMENT. y <A HREF = APPLE.JPG>APPLE</A> y RELATIVE HYPERLINK GIVE THE COMPLETE ADDRESS OF THE DESTINATION DOCUMENT IN THE CURRENT LOCATION. y <A HREF = WWW.YAHOO.COM>YAHOO</A>

TWO TYPES OF LINKS



y

Within a page <a href = #name> your link name here </a>
Name any label or name you want

<a name = #name> your link name here </a>


Fits at the place in the document where you want to jump to.

Another file or page <a href = url> your link name here</a> URL the exact location of the file that you are going to call or to link

SAMPLE STRUCTURE
<HTML> <HEAD> <TITLE> MY LINKS </TITLE> </HEAD> <BODY> <H1> MY FAVORITE WEBSITES: </H1> <A HREF = HTTP://WWW.YAHOO.COM>YAHOO!</A> <A HREF = HTTP://WWW.GOOGLE.COM>GOOGLE!</A> <A HREF = HTTP://UNIMOBILE.COM>MOBILE!</A> </BODY> </HTML>

USING IMAGES AS ICON


<A HREF = NAME OF PICTURE LOCATION OF SITE> <IMG SRC = URL (NAME OF PICTURE)> </A>

ACTIVITY 5
Create

a PHOTO GALLERY with navigator link.


y

Minimum of 50 pictures

EMBBED
<EMBED></EMBED> INSERTING SOURCE OF VIDEO .WMV, .MP4,.FLV ATTRIBUTE: SRC = URL (UNIFORM RESOURCE LOCATOR)

TABLE <TABLE></TABLE>
<TABLE> </TABLE> tag define the table

ATTRIBUTE
Width

= in percentage pr pixel of the browser Specifies the size of the table (horizontal size) Height = in percentage pr pixel of the browser Specifies the size of the table (vertical size) Align = left/right/center alignment Border = n Thickness / size of the table border, a binder around the table

ATTRIBUTE
Bgcolor = color (primary /# hexa color) Background color of the entire table Bordercolor = color (# hexa color) Sets the color of the entire border Cellspacing = n Spaces between each border Cellpadding = n Distances between the edge of the cell and the edge of the content

TABLE HEADING <TH>


(table heading) creates a row or column heading in a table

ATTRIBUTE:
Bgcolor = primary / # hexa color Background = url (image) Rowspan = n Colspan = n Align = right / left / middle

TABLE ROW <TR>


(table row or table line) specifies the start and end of a line ATTRIBUTE: Align = left / right / center Bgcolor = color / (# hexa color) Set the background color Background = url Set a background image

TABLE DATA <TD>


(table data / table column) specifies the column of the text

ATTRIBUTE: Colspan = n Rowspan = n Align = LEFT / RIGHT / MIDDLE

SAMPLE STRUCTURE

<HTML> <HEAD><TITLE>TABLE FORM</TITLE></HEAD> <BODY> <TABLE BORDER = 5 BORDERCOLOR = GREEN> <TR> <TD> FIRST COLUMN, FIRST ROW <TD> SECOND COLUMN, FIRST ROW <TD> THIRD COLUMN, FIRST ROW </TR> <TR> ROW </TR> </TABLE> </BODY> </HTML> <TD> FIRST COLUMN, SECOND ROW <TD> SECOND COLUMN, SECOND <TD> THIRD COLUMN, SECOND ROW

ACTIVITY 4
CREATE 2011 CALENDAR

FRAMESET <FRAMESET></FRAMESET>
<frameset></frameset> takes the place of <body> or a frame formulated body and divides the screen according to the specified rows or columns. Note: the tag <frameset> set at the <head> tag.

ATTRIBUTES
Rows = n%, n%,* Specifies the percentage of the body to be covered by the row type of frame. Cols = n%, n%,* Specifies the percentage of the body to be covered by the column type of frame. Border = n size of border

SAMPLE
<FRAMESET COLS = 25%, 75%> </FRAMESET>

FRAME <FRAME>
<frame> defines what document to be labeled, name for the frame

ATTRIBUTE
Src = url (UNIFORM RESOURCE LOCATOR)

Name = window name Target = name of window Scrolling = no declared if you want your window not to have a scrolling bar

SAMPLE STRUCTURE(CREATE 3 DIFFERENT WEBPAGES)


(BLACK.HTML) <html> <head><title>BLACK</title></head> <body BGCOLOR = "BLACK"> <font face = "ROCKWELL" SIZE = "25" COLOR = "GREEN"> BLACK WEBPAGE </FONT>

</body>

</html>

(RED.HTML) <html> <head><title>RED</title></head>


<body

BGCOLOR = "RED"> <font face = "ROCKWELL" SIZE = "25" COLOR = "GREEN"> RED WEBPAGE </FONT>
</body>

</html>

(VIOLET.HTML) <html> <head><title>VIOLET</title></head>


<body

BGCOLOR = "VIOLET"> <font face = "ROCKWELL" SIZE = "25" COLOR = "PINK"> VIOLET WEBPAGE </FONT>
</body>

</html>

(HOME.HTML) <HTML> <HEAD><TITLE>HOME PAGE</TITLE></HEAD>


CREATE A HOME PAGE

<BODY> <A HREF = "BLACK.HTML" TARGET = "SET"> BLACK </A> <A HREF = "RED.HTML" TARGET = "SET"> RED </A> <A HREF = "VIOLET.HTML" TARGET = "SET"> VIOLET </A>

</BODY> </HTML>

CREATE ANOTHER WEBPAGE


(SET.HTML) <HTML> <HEAD><TITLE>HOME PAGE</TITLE></HEAD>
<BODY> </BODY> </HTML>

<A HREF = "HOME.HTML" TARGET = "SET"> HOME </A>

CREATE A FRAME PAGE (FRAMESET)


(FRAME.HTML) <html> <head><title>FRAMESET</title> <FRAMESET COLS = "25%, 75%"> <FRAME SRC = "HOME.HTML"> <FRAME SRC = "SET.HTML" NAME = "SET"> </FRAMESET>

</head> <body> </body> </html>


FORM <FORM> </FORM>


<form> tag is used to create a form in your document. - It serves as the container in which various type of form controls is included like: TEXT, SUBMIT, RESET, RADIO, CHECK BOXES etc.

- Form tag cannot be nested that means it cannot contain another <form> tag under the previous <form> tag.

ATTRIBUTE
Name = provides a name for the form Method = provides the value to specify what particular HTTP method is to be used when the form is submitted. * the possible values are get and post. Action = provides the URL (uniform resource locator) of the form handler of the form which is a script that will process the form data.

INPUT <INPUT>
<input> tag used to create a text box, radio button, check box, submit and reset button, file upload and even image.

ATTRIBUTE: TYPE = type of object to be use NAME = provides the name for the input tag

VALUE = provides the input tag value. text, check box, radio button provides initial value submit, reset & generic provides name that is displayed at the center of the button.

TYPES OF INPUT TAG


<input type = text> tag used to create a one line text field in which information like name and address are entered.

<input type= password> tag used to create a one line password text field in which characters entered are by asterisk (*) on in solid dot.

<input type = checkbox> tag used to create a small square filled with a check mark. This type of input tag used when you want your user to have several option to choose.

<input type = radio> tag used to create a small rounded filled with a dot.

<input type = file> tag used to provide the ability to have control that can upload a file. It looks like a text field but has browse button beside.

<input type = submit> tag used to create a button that will submit all the information of the form

<input type = reset> tag used to create a button that will reset all the information of the form.

<input type = button> tag used to create an ordinary button that has no default function. this input tag sometime used in the client side script like java script to trigger events.

<input type = image> tag used to act like a submit button but allows to substitute the standard button with an image.

<input type = hidden> tag used to create a control that holds data that cannot be seen or viewed by users.

You might also like