Scribd
Upload
46 views52 pages

Can You Recall What Attributes Are?

Attributes provide additional information about HTML tags and are placed within the start tag. The <body> tag is a container tag that can contain attributes to specify styles and formatting. Common attributes for the <body> tag include bgcolor to set the background color, text to set the text color, and link, vlink, and alink to set colors for links, visited links, and active links. Headings range from <h1> to <h6> and are used to structure and outline content. Paragraphs are created using the <p> tag.

Uploaded by

Sheila Bliss J. Goc-ong
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
46 views52 pages

Can You Recall What Attributes Are?

Attributes provide additional information about HTML tags and are placed within the start tag. The <body> tag is a container tag that can contain attributes to specify styles and formatting. Common attributes for the <body> tag include bgcolor to set the background color, text to set the text color, and link, vlink, and alink to set colors for links, visited links, and active links. Headings range from <h1> to <h6> and are used to structure and outline content. Paragraphs are created using the <p> tag.

Uploaded by

Sheila Bliss J. Goc-ong
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/ 52

Can you recall what attributes are?

Where are they placed?

Can you recall what attributes are? Where are they placed?
Attributes provide additional information about the tag and is placed on the start tag. Since container tags have start tag and the <body></body> tag is a container tag, it contains attributes

Structure of a Tag
<html>

-start tag - attributes - content - end tag

<head> <title>Bliss Inc. </title> </head> <body bgcolor="red text="yellow">My first paragraph.</body> </html>

More about Body Tags and Headings

Attribute Table for <BODY> </BODY>


Attribute Name Definition Values

Indicates the background images of the web page background Ex.<body background = redflower.jpg>

Filename (path could be included) of the image file

bgcolor

Indicates the background Assigned name or the color of the web page hexadecimal value of the Ex.<body bgcolor =red> color Indicates the color of the Assigned name or the text in the web page hexadecimal value of the Ex.<body text=black> color

text

Attribute Table for <BODY> </BODY>


Attribute Name Definition Values

link

Indicates the color of the hyperlinks in the web page Ex.<body link=blue>

Assigned name or the hexadecimal value of the color

vlink

Indicates the color of the Assigned name or the visited hyperlinks in the web hexadecimal value of the page color Ex. <body vlink=#FF0000>

alink

Indicates the color of the Assigned name or the active hyperlinks (when hexadecimal value of the clicked) in the webpage color Ex. <body alink=#000000>

Headings
Heading are containers tags which format
text using pre defined values for size and color. There are 6 heading tags available. <h1> </h1> <h4> </h4> <h2> </h2> <h5> </h5> <h3> </h3> <h6> </h6> Extra lines are placed after headings when displayed on Web Browser.

Sample

Note: Use HTML headings for headings only. Dont use headings to make text BIG or bold. Search engine use headings to index the structure and content of web pages. skim

Heading Alignment
Attribute Table for <h1> </h1>
Attribute Name Definition Values
left right center justify

align

Indicates the horizontal alignment of heading


Ex. <h1 align=left> This is aligned left </h1>

title

Indicates the text that appears when the mouse hovers over the heading
Ex. <h1 title=Hello there!> Put the mouse over me !!! </h1>

any text

Tags for writing paragraphs

Creating a new paragraph

<p> </p>
Aligning a paragraph

- used the paragraph tag pair <p align=left"> </p> <p align="right"> </p> <p align=center"> </p>

Note: Remember to close the container tag that you opened. You can type the open and close tags first before typing the contents in between the tags.

Sample Codes

Sample Output

Line Breaks
<br> tag creates a line break or new line
<br /> use this tag to have multiple line space

Note: You can use line breaks to create spaces in your web page.

Multiple Line Breaks


<br /> use this tag to have multiple line space

Horizontal Rule Tag


<hr> tag allows to underline headings or to add a borderline.

Note: <hr> is an empty tag. No need to put closing tag.

Attribute Table for <hr>


Attribute Name Definition Values
left right center

align Size
height

Indicates the horizontal alignment of the horizontal rule


Ex. <hr align=center>

Indicates the size of the horizontal rule in pixels


Ex. <hr size=12>

Number of pixels

Width
Length

Indicates the width of the horizontal rule in pixels or percent of the width displayed by the web browser.
Ex. <hr width=300>

Number of pixels or number express in percent

Attribute Table for <hr>


Attribute Name Definition Values
none

noshade

Indicates if the default shading in the horizontal rule is to be removed.


Ex. <hr no shade>

color

Indicates the color of the horizontal line


<hr color=green>

Assigned name or hexadecimal value of the color

Modifying a Horizontal Rule

List
Presenting data in an enumerated format Types of List
Ordered List - numbered list Unordered List-bulleted list Definition List

Ordered List
This type of list where each item is numbered usually starting at 1 (but can be change using the start attribute)

Ordered list uses the container tag

<ol> <li> </ol>

Sample Codes
Note: By default the ordered list starts with number 1 with Arabic numerals like 1,2,3

Attribute Table for <ol> </ol>


Attribute Name Definition
Indicates the type of numbering to be used in the list

Values
1, a, A, I, I

type

Ex. <ol type=A> </ol>


Indicates the value or number of the first item in the list Any number

start

Ex. <>ol type=1 start =3> </ol>

Unordered List
List that enumerates each item using bullet Ordered list uses the container tag

<ul> <li> </ul>

Sample Code

Ordered List
The ordered list has different types of numbering and can be specified by keying the specified value for the type attribute: 1 a A i I for regular numbering (1,2,3 etc) for lowercase alphabet (a,b,c,d etc) for uppercase alphabet (A, B, C, etc) for lowercase Roman Numeral (i, ii, ii, etc.) for uppercase Roman Numerals (I, II, III etc)

Unordered List
The unordered list has different types of bullet to be used and can be specified by keying the specified value for the type attribute: disc for round bullets

<ul type=disk>

circle for circular bullets

<ul type=circle>

square for square bullets <ul type=square>

Attribute Table for <ul> </ul>


Attribute Name Definition
Indicates the type of numbering to be used in the list

Values
disc circle square

type

Ex. <ul type=disc> </ul>

Placing a List Inside a List

Mix Ordered List and Unordered List

Invisible Comments
To ignore some output, you may used comment. Can be used to explain complicated codes, note details when codes was edited and removed.

<! -->
Sample Code

Definition List
It is an effective tool for making your own definition of terms list or glossary. This type of list uses the container tag <dl> </dl> Unlike the previous list, the definition list uses the empty tags <dt> for the item itself and <dd> for the definition of the item.
Sample Code

Quoting Passages
You can place quotes in intended form and shrink it to be set apart from main paragraph by using the tag pair

<blockquote> </blockquote>

Performing Text
You can preformat text by using the Preformat Tag pair <pre> </pre> The result will be displayed according to your desired appearance.

Typography
Adding styles and effects Terms to be used:

Typography appearance and arrangement of


the characters that make up you text

Typeface the actual appearance, like


Jokerman

Type style this is the variation given to text like


boldface, italic, underline etc.

Font combination of typeface and type style

Tags commonly used for formatting


Tags <b> </b> <i> </i> <u> </u> <strike> </strike> > Definition Displays the text in bold face Displays the text in italic Displays the text with an underline Displays the text with strikethrough

<sup></sup>
<sub></sub> <em></em> <strong></strong> <big></big> <small></small>

Displays the text in superscript


Displays the text in subscript Displays the text with emphasis Displays the text with strength Displays the text with an increase in

size
Displays the text with a decrease in size

Tags commonly used for formatting


Tags <b> </b> <i> </i> <u> </u> <strike> </strike> > Definition Displays the text in bold face Displays the text in italic Displays the text with an underline Displays the text with strikethrough

<sup></sup>
<sub></sub> <em></em> <strong></strong> <big></big> <small></small>

Displays the text in superscript


Displays the text in subscript Displays the text with emphasis Displays the text with strength Displays the text with an increase in

size
Displays the text with a decrease in size

Sample Tags commonly used for formatting


<pre> Displays the text in <b> bold face </b> Displays the text in <i> italic </i> Displays the text with an <u> underline </u> Displays the text with <strike> strikethrough </strike> Displays the text in <sup> superscript </sup> Displays the text in <sub> subscript </sub> Displays the text with <em> emphasis </em> Displays the text with <strong> strength </strong> Displays the text with an <big> increase in size </big> Displays the text with a <small> decrease in size </small> </pre>

Sample Output Tags commonly used for formatting

Specifying the Font Size


To control the size of your font, you can add the attribute as follows:

<font size=value> </FONT> like: <font size=7> </FONT>


This value can be numbers 1 to 7. The default size is 3 which automatically be displayed if you will not specify the size.

Specifying the Font Size Sample


<pre> <FONT SIZE=1> This is font size 1 </FONT> <FONT SIZE=2> This is font size 2 </FONT> <FONT SIZE=3> This is font size 3 </FONT> <FONT SIZE=4> This is font size 4 </FONT> <FONT SIZE=5> This is font size 5 </FONT> <FONT SIZE=6> This is font size 6 </FONT> <FONT SIZE=7> This is font size 7 </FONT> </pre>

Specifying the Font Size Sample Output

Specifying the Font Face


To specify the desired font face, you can add the attribute as follows:

<FONT FACE=value> </FONT> like: <font size=Jokerman> </FONT>

Specifying the Font Face Sample


<pre> <FONT FACE=ARIAL> This is ARIAL </FONT> <FONT FACE=COURIER> This is Courier </FONT> <FONT FACE=VERDANA> This is Verdana </FONT> <FONT FACE=TAHOMA> This is Tahoma </FONT> </pre>

Specifying the Font Face Sample

Specifying the Text color


The container tag

<FONT COLOR=value> </FONT>


like: <FONT COLOR="RED"> This is Red </FONT>

Specifying the Text color Sample


<h4> <h4> <h4> <h4> <h4> <h4> <h4>
<FONT COLOR="BLUE"> This is Blue </FONT> <FONT COLOR="fff0000"> This is Red </FONT> <br> <br>

<FONT COLOR="GREEN"> This is Green </FONT>


<FONT COLOR="aa33cc"> This is Violet </FONT> <FONT COLOR="BLUE+YELLOW"> This is Brownish </FONT> <FONT COLOR="RED+BLUE"> This is Purplish </FONT> <br> <FONT COLOR="RED+YELLOW"> This is Goldish </FONT> <br>

<br>
<br> <br>

Specifying the Text color Sample Output

Nesting Font Face, Size and Color


Used the container tag with the following attributes

<FONT FACE=value" SIZE="value" COLOR="value"> </Font> <FONT FACE="ARIAL" SIZE="5" COLOR="GREEN"> This is Arial, Size 5 and Color Green</Font>

Nesting Font Face, Size and Color Sample


<FONT FACE=Verdana SIZE=6 COLOR=RED> This is Verdana, Size 6 and Color Red </Font> <br> <FONT FACE=Jokerman SIZE=5 COLOR="#80000"> This is Jokerman, Size 5 and Color Maroon </Font><br> <FONT FACE=Tahoma SIZE=4 COLOR="#c0c0c0"> This is Tahoma, Size 4 and Color Silver </Font> <br>

Nesting Font Face, Size and Color Sample Output

Performing Text Sample


The text is display in columns.

<pre>
Math Pilipino English PE NSTP Programming

</pre>

Performing Text Output

You might also like