Advanced HTML

ADVANCED HTML
 HTML LAYOUT
 HTML FONTS
 HTML STYLES
 HTML HEAD
 HTML SCRIPTS
HTML LAYOUT
You may not want to see your webpage behaving differently when viewed at
different resolution or when a browser window is resized.
Absolute width – keeps the elements in your tables intact regardless of window
size or screen resolution. (Width in absolute pixel values)
<html>
<head><title>ABSOLUTE WIDTH </title></head>
<body><h1><center> ABSOLUTE WIDTH </center> </h1>
<table border=0 width=550 cellpadding=10 align=center>
<tr>
<td width=50% valign=top>
This is some text in two columns. This is some text in two columns. This is some text in two
columns.
columns.
columns.
</td>
columns.
columns.
columns.
</td>
</tr>
</table>
</body>
</html>
RELATIVE width – does not keep the elements in your tables intact. (Width in
Relative Percentage values)
<html>
<head><title>ABSOLUTE WIDTH </title></head>
<body><h1><center> RELATIVE WIDTH </center> </h1>
<table border=0 width=100% cellpadding=10 align=center>
<tr>
This is some text in two columns. This is some text in two columns. This is some text in two columns.
</td>
</td>
</tr>
</table>
</body>
</html>
HTML FONTS
In this lesson we will talk about how to set font styles in your page. We can
set the font face, font size and font color. Unfortunately, fonts depend
entirely on the user’s computer and browser. Setting fonts can become a
mess when you use fonts that are not common to other computers and
browsers. If the browser cannot display a specific font face and color, the
system will assume the default values.
TAGS & ATTRIBUTES

FONT TAG <font attribute=value1 attribute2=value2…> </font>
ATTRIBUTES DEFINITIONS POSSIBLE VALUES

FACE Specifies the face of the font. The Any font face
list is separated by commas and
the system selects the first
available font face in the list. The
default value is dependent on
the computer and the web
browser.
SIZE Specifies the size of the text. Integer from 1 to 7
The default size is 2. +x (default size +x)
-x (default size -x)
COLOR Specifies the color of the text. Common color name
Color is black or #000000 Hexadecimal value
<html><head><title> HTML FONTS</title></head>

<body>
<p> This is the default text. </p>
<p><font face= Times New Roman size=1 color=Cadetblue> This is Times New Roman. </font> </p>
<p><font face= Arial size=2 color=Darkorange> This is Arial. </font> </p>
<p><font face= Helvetica size=3 color=#9932CC> This is Helvetica. </font> </p>
<p><font face= Courier New size=4 color=Orangered> This is Courier New. </font> </p>
<p><font face= Verdana size=5 color=Midnightblue> This is Verdana. </font> </p>
<p><font face= Calibri size=6 color=#808000> This is Calibri. </font> </p>
<p><font face= Mistral size=+5 color=Magenta> This is Mistral.</font> </p>
<p><font face= Magneto size=+5 color=Plum> This is Magneto.</font> </p>
<p><font face= Forte size=+5 color=#00BFFF> This is Forte.</font> </p>
</body>
</html>
HTML STYLE
HTML styles can be applied to any tag. You ca use font properties of the text by
applying the style attribute to the <p> tag. You can also apply the style to the body
of the document and table.
In using style, you just write the style after the tag and state the attributes
associated with the. The syntax of HTML styles is a little bit different from the
standard tag attribute. Suppose you want to specify the properties of text, say the
FONT face is ARIAL and the COLOR is RED you use the following code:
<p style=”font:Arial; color:RED; size:12px”>

<body>
<p style="font-family: Arial, Helvetica, sans-serif; color: Red">
This is an example of inline html style.</p>
<p><font face=Arial color=Red>
This is its equivalent using the font tag</font></p>
</body>
</html>
Let’s dissect the code:

 Upon inspection you may think that the font tag is easier after all. TRUE the
style syntax is more complicated than the usual HTML tag. But once you get
the hang of it, trust me you will never look at font tags the same way again.
 The above code is an example of inline style command. When we say inline,
it means that the formatting takes place inside the tag itself.
 Style keyword comes after the tag followed by the “=” symbol. You place
the properties inside the block enclosed by the two quotation marks. Each
property is separated by semicolon. The general syntax is:
<tag style=”property1=value; property2=value”>
Same as HTML attributes, the order of properties is not significant.
 The font-family property looks for the first available font face that the
system can handle.

<body>
<p style="font-family: Arial, Helvetica, sans-serif; color: Red; letter-spacing:5px;

background-color=#999999; text-align=center"> SEE, STYLE can do more exciting stuff!</p>
<p style="font-family: Arial, Helvetica, sans-serif; color: #000000; letter-spacing:3px; text-align:center;

border:thin;border-top-style:dashed; border-bottom-style:dashed; border-color:#0033FF">
SEE, STYLE can do more exciting stuff!</p>
<p style="font-family: Arial, Helvetica, sans-serif; color: #990000; letter-spacing:5px; text-align:center;

border:thin;border-top-style:double; border-bottom-style:double; border-color:#009900">
SEE, STYLE can do more exciting stuff!</p>
</body>
</html>
Looking the code you maybe surprised that just displaying a few font effects,
you will need a very lengthy code. But do you really have to go to this
headache? No, you don’t have to. There is a much simpler and friendlier way to
do that, by using STYLE TAG.
STYLE TAG – the opening of the <style> tag and the </style> closing tag are
placed in the head of the document. STYLE RULES HAS TWO (2) PARTS:
SELECTOR - which indicates the element where the style applies to
DECLARATIONS – set of properties for the element, enclosed by two curly

braces.

<style type="text/css">
p
{
font-family:Arial, Helvetica, san-serif;
color:#990000;
text-align:center;
}
</style>
<body>
<p> This is the paragraph intend to the style rule p. </p>
</body>
</html>
What if you don’t want all your paragraphs to look the same? Suppose you have
three different paragraph styles to appear in a document.
CLASSES – are used to define different ways the same type of element displayed.
<html>
<head>
<style type="text/css">
p.par1
{
font-family: Calibri, Arial, sans-serif;
color:#990000;
text-align:center;
}
p.par2
{
font-family: Times New Roman, Arial, sans-serif;
color:#9370D8;
text-align:left;
}
p.par3
{
font-family: Courier New, Arial, sans-serif;
color:#FF69B4;
text-align:right;
}
</style>
</head>
<body>
<p class="par1"> First paragraph goes here</p>
<p class="par2"> Second paragraph goes here</p>
<p class="par3"> Third paragraph goes here</p>
</body>
</html>

Advanced HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Advanced HTML

Uploaded by

Copyright:

Available Formats

ADVANCED HTML

TAGS & ATTRIBUTES

ATTRIBUTES DEFINITIONS POSSIBLE VALUES

<html><head><title> HTML FONTS</title></head>

<html><head><title> HTML FONTS</title></head>

Let’s dissect the code:

<html><head><title> HTML FONTS</title></head>

<p style="font-family: Arial, Helvetica, sans-serif; color: Red; letter-spacing:5px;

<p style="font-family: Arial, Helvetica, sans-serif; color: #000000; letter-spacing:3px; text-align:center;

<p style="font-family: Arial, Helvetica, sans-serif; color: #990000; letter-spacing:5px; text-align:center;

DECLARATIONS – set of properties for the element, enclosed by two curly

<html><head><title> HTML FONTS</title></head>

You might also like