Structure Tags
Download
Report
Transcript Structure Tags
INP150 Section 11
Examination Review
HTML
HyperText Markup Language
– HyperText Markup Language (HTML)
is a document-layout and hyperlinkspecification language. It allows you to
define the appearance of your
document by using embedded
directions in the form of HTML tags.
Structure Tags
<html>
<head>
<title>...</title>
</head>
<body>
<!- - These tags put comments in html -->
</body>
</html>
Headings
<h1>Most Prominent
Header</h1>
<h2> ... </h2>
<h3> ... </h3>
<h4> ... </h4>
<h5> ... </h5>
<h6>Least Prominent Header</h6>
Headers & Text Defaults
Headers default to Times New
Roman and fonts of 24, 18, 14,
12, 10, 8.
Text defaults to SIZE="3",
which is approximately 12pt.
Spacing & Blank Lines
Spacing and Blank Lines
<p>…</p>
Paragraph break; end the line and inserts one line of white
space. Note that many tags such as <h1> through <h6> and
<address> will force a <p> as part of their style.
<br />
Forced Line Break; adds no extra white space. Useful for text
such as postal addresses where the line breaks are important.
<hr />
Horizontal Rule; draws a horizontal line the width of the
browser window
Working With Text
Logical vs. Physical
A physical style tag is simply a tag
that formats the text as described the
physical style.
A logical style leaves the style of
formatting up to the browser
Common Text Elements & Styles
<b>…</b>
<i>…</i>
<u>…</u>
<tt>…</tt>
<em>…</em>
<strong>…</strong>
bold [physical]
italics [physical]
underline [physical]
typewriter type [physical]
emphasis [logical]
more emphasis [logical]
Some Additional Text Styles
<sub> </sub> subscript
[physical]
<sup> </sup> superscript
[physical]
<strike> </strike>
strikethrough [physical]
<cite></cite> citations
[logical style]
– text formatted with the <cite>…</cite> tag will
Handling Special Characters
Some characters cannot be typed directly
into an HTML document
– For example, the “<” and “>” are inserted by
typing < and > respectively. A few
common symbols are characters are:
<
>
symbol
&
©
less than symbol
greater than
ampersand symbol
copyright symbol
non-breaking
Other Formatting Tags
<pre>…</pre>
– Pre-formatted Text. Produces text in a
fixed-width font, and maintains spaces,
line breaks and tabs.
<blockquote>…</blockquot
e>
– For an indented paragraph of text
without numbers or bullets
Sizes, Colors & Fonts
Colors
The colors are actually represented
by hexadecimal notation (base 16) in
a RGB triplet
– The first two numbers define the
amount of red
– The second pair the amount of green
– The third pair the amount of blue
silver (#C0C0C0)
Named Colors
aqua (#00FFFF) gray (#808080)
navy (#000080) silver (#C0C0C0)
black (#000000) green (#008000)
olive (#808000) teal (#008080)
blue (#0000FF) lime (#00FF00)
purple (#800080) yellow (#FFFF00)
fuchsia (#FF00FF) maroon (#800000)
red (#FF0000)
white (#FFFFFF)
The Body Tag
The <body> tag has a number of attributes that
allow you to set a variety of default characteristics
for the entire document
–
–
–
–
–
–
text
link
alink
vlink
bgcolor
background
set the color of the text
set the color of links
set the color of the active link
set the color of visited links
set the background color
set the background image
<body text=“black” link=“blue” vlink=“red”
bgcolor=“white”>
• BACKGROUND attribute uses the URL or pathname to
an image file instead of a color setting
– <body background=“brick.gif”>
The Font Tag
You use the <font>...</font> tag to
vary the color and size of text within
a document:
• COLOR -- Set the font color
• SIZE -- Set the font size
• FACE -- Set the font type
<font size="7"
color="lime"
face="palatino, times">
Using the Font Tag
The COLOR attribute for the <FONT> tag uses
the same system described above.
The SIZE attribute defines the size of the font in
terms of seven virtual font sizes (1-7). You can
set an absolute value for the font size
(SIZE=value) or a relative font size (SIZE=+ or
- value) depending on the size of the text
surrounding the tag.
The FACE attribute defines what font type to
use for the text. If the font is available on the
viewer’s browser, the text will be displayed in
that font. You can list more than one font.
Lists
Ordered and Unordered
<ul>
</ul>
– unordered (unnumbered) list
<ol>
</ol>
– ordered (numbered) list
<li>
</li>
– list item
Definition Lists
<dl>…</dl>
– definition list
<dt>…</dt>
– the term being defined
<dd>…</dd>
– the definition part of the list
Links
Anchor Tags
The general form of the anchor tag looks like this:
– <a href=“filename or url”>link text</a>
You can also link to a URL (Uniform Resource
Locator):
– <A HREF=“http://www.umich.edu/”>University of
Michigan</A>
• The URL here is the text in double quotes, and it always has
the same form:
– protocol://host.domain.name:port/path/to/your/reference
Internal Links: Named Anchors
<h1>Table of Contents</h1>
<a href="#intro">Introduction</a><br>
<a href="#descrip">Characters</a><br>
<a href="#devel">Development</a><br>
<a href="#climax">Climax</a><br>
<a href="#denoue">Denouement</a><br>
<h1><a name="intro">introduction</a></h1>
Relative & Absolute References
Absolute:
– Meet a JavaCat <a href=
"http://www.chalcedony.com/pixel/">
Pixel</a>
Relative
– A List of participating
<a href="countries.html">countries</a>
Relative Links
Inside the current folder there is a file
called index.html
– "index.html"
Inside the current folder there is a folder
called images that contains a file called
image.gif
– "images/image.gif"
The folder that contains the current folder
contains a folder called info that contains a
file called data.html
– "../info/data.html/
Images
Adding Images
To include an image in your document,
you use a tag such as the following:
– <img src="image-filename" />
Image sources can be local, that is,
stored on the same computer file system,
or remote, as in
<img src="http://www.umich.edu/images/banner2.jpg">
Image Attributes
The <IMG> tag attributes:
– align -- the alignment of the text around the image (right, left,
top, middle, bottom)
– alt -- alternate text to display if image cannot be shown
– border-- border width around the image in pixels
– height -- height of the image in pixels
– width -- width of the image in pixels or percentage
– src -- designates the image file to display
– hspace -- the amount of space in pixels between the image and
text to the left
– vspace -- the amount of space in pixels between the image and
text below
For example:
<img src=“images/macaw.gif” alt=“[image of a macaw parrot]”
align="left" border="5" height="600" width="400"
hspace="10" vspace="10">
Tips for Working with Images
1.
2.
3.
4.
5.
ALT tags substitute for missing images
You can eliminate the border around an image with
border="0"
To horizontally center an inline image in the browser
window you have to isolate the image from surrounding
text
The HEIGHT and WIDTH values can be smaller or larger
than the actual image. The browser will scale the image to
fit the defined space
If you set WIDTH=percentage (e.g. WIDTH=“100%”),
the browser will scale the image to a percentage of the
browser window width.
Clickable Image Maps
<map name="hobbies">
<area shape="rect" coords="18,60,86,150" href="#sports">
<area shape="rect" coords="155,18,210,96" href="#art">
<area shape="rect" coords="143,97,215,150" href="#history">
<area shape="rect" coords="254,30,323,150" href="#coins">
<area shape="rect" coords="324,48,443,150" href="#fish">
<area shape="rect" coords="407,192,503,240" href="#models">
</map>
<center><img src="images/bookshlf.jpg"
usemap="#hobbies"></center>
Using Pixel Shims
<img src="images/pixelshim.gif"
width=100 height=150 hspace=3
align=left>
Tables
Using Tables for Layout
<table width="90%" border=5 >
<tr>
<td><img src="alaska.jpg"
width="418"
height="222"
alt="bi-plane token"> </td>
</tr>
</table>
Tables and Text
<table width="423" border="5" align="left"
hspace="10" vspace="10">
<tr>
<td><img src="sample.jpg" width="418"
height="222" alt="[A Picture]"></td>
</tr>
<tr border="2">
<td>…</td>
</tr>
</table>
Nesting Tables
<table width=80% border=5>
<tr>
<td>…</td>
</tr>
<tr>
<td... </td>
<td width=432 ">
<table width=432 border=10>
<tr>
<td colspan=3>…</td>
</tr>
<tr>
<td colspan=2 width=256>…</td>
<td rowspan=3 width=160>…</td>
</tr>
<tr>
<td colspan=2 width=256>…</td>
</tr>
<tr>
<td width=28>… </td>
<td width=128>…</td>
</tr>
</table>
</td>
</tr>
</table>
Background Colors & Images
<table width="80%" border=10>
<tr>
<td colspan=2 width=256 bgcolor="blue" ><img
src="greyrace.jpg" width=256 height=152 alt="dogs
racing"></td>
…
<td colspan=2 width=256
background="images/six_paws.gif">A pack of greyhounds
enter the home stretch</td>
…
</tr>
…
</table>
Frames
A Common Frameset
<html>
<head>
<title>most common frameset setup</title>
</head>
<frameset rows="20%, 55%, 25%">
<frame name="banner" src="banner.html">
<frameset cols="45%, 55%">
<frame name="index" src="tablcontnts.html">
<frame name="content" src="contents.html">
</frameset>
<frame name="footer" src="buttons.html">
</frameset>
</html>
Special Case: Equal Rows &
Cols
<frameset frameborder=0
rows='20%,20%,20%,20%,20%'
cols='20%,20%,20%,20%,20%'>
<frame name='border1' src='greyhound.html'
scrolling='no' marginwidth=1
marginheight=1>
…
frame name='border25' src='greyhound.html'
scrolling='no' marginwidth=1
marginheight=1>
</frameset>
Formatting Options
<frame name="contents"
src="contents.html" scrolling="no"
noresize bordercolor="white">
Forms
A Basic Form
<form method="post" action=http://stu.wccnet.org/cgibin/formmail.pl>
<input type="hidden" name="recipient"
value="[email protected]" />
Please Complete this form:
Your email address:
<input type="text" name="from" size="30"
maxlength="100"value="[email protected]">
Your phone number is:
<input type="text" name="phone" size="30"
maxlength="15" /></p>
<input type="submit" />
<input type="reset" /
</form>
Checkboxes
<input type="checkbox" name="factors"
value="p"> Price
<input type="checkbox" name="factors"
value="f"> Features
<input type="checkbox" name="factors"
value="e"> Ease of Use
<input type="checkbox" name="factors"
value="a"> Adaptability
Radio Buttons
<input type="radio" name= "os"
value="W" checked> Windows
<input type="radio" name="os "
value="M"> Mac
<input type="radio" name="os "
value="L"> Linux
<input type="radio" name="os "
value="O"> Other
Tab Stops
Name: <input type="text"
name="firstname" size="20"
tabindex="1" >
E-mail Address: <input type="text"
name="email" tabindex="3">
Hobbies: <input type="text"
name="hobbies" tabindex="2">
List Boxes
<select name="Woodtype" multiple>
<option value="Mahogany">Mahogany
<option
value="Maplewood">Maplewood
<option value="Pine" selected>Pine
<option value="Cherry">Cherry
</select>