Transcript Basic Tags - Just Us Two Photography

ECA 228 Internet/Intranet
Design I
HTML Tags
<a> </a> anchor tags


Adds a link to the web page
Anything placed between the anchor tags becomes a
link
<a href=“http://www.yahoo.com”>Yahoo</a>

Attributes
–
–
–
href
name
target
ECA 228 Internet/Intranet Design I
<a> </a> anchor tags




cont …
Links can be made from
– text
– image
– list item
To link to another web site use an absolute link
To link to a page within your own site use a relative link
To create an email link use mailto:
<a href=“mailto:[email protected]”>Email me</a>
ECA 228 Internet/Intranet Design I
<font> </font> font tags


has been deprecated in favor of style sheets
Attributes
–
face

–
size

–
font name
n, +n, or – n, where n equals number of points
color

color name or rgb value
<font size = “+3” color = “#c0c0c0”>Text</font>
ECA 228 Internet/Intranet Design I
<img /> image


Used to place images on a web page
3 types of images can be used on a web page
–
.gif




line drawings or large areas of color
limited to 256 colors
can be transparent
can be animated
ECA 228 Internet/Intranet Design I
<img /> image

types of supported images cont …
–
.jpg


–
16 million colors
good format for photographs
.png


cont …
not fully supported
DO NOT use unsupported types of images
–
–
–
.bmp
.tif
.art
ECA 228 Internet/Intranet Design I
<img /> image

cont …
Attributes
–
–
–
–
–
–
src path to image name
width width in pixels
height height in pixels
alt alternative, descriptive text
border integer value
align used to float image to either side of a web
page
ECA 228 Internet/Intranet Design I
<img /> image

Attributes
–
–
cont …
cont …
vspace integer value to add space vertically
hspace integer value to add space horizontally
<img src=“images/myDog.jpg” width=“250”
height=“195” alt=“My Doggy” border=“1”
align=“right vspace=“6” hspace=“7” />

<br clear = “left | right | all” />
ECA 228 Internet/Intranet Design I
<ol> </ol> ordered list




creates a list of items using numbers or letters
Designate ordered list using <ol>
Place individual list items in <li> </li> tags
Attributes
–
type




1 * default
A
i
a
ECA 228 Internet/Intranet Design I
<ul> </ul> unordered list




creates a list of bulleted items
Designate ordered list using <ul>
Place individual list items in <li> </li> tags
Attributes
–
type



disc * default
circle
square
ECA 228 Internet/Intranet Design I
nested lists
<ul>
<li>Marley</li>
<li>Halle</li>
<ul>
<li>5 years old</li>
<li>63 lbs</li>
</ul>
<li>Boo</li>
</ul>
Marley
 Halle
o 5 years old
o 63 lbs
 Boo

ECA 228 Internet/Intranet Design I
<dl> </dl>


great for words and their definition or
descriptions
<dl>
–

opens list
<dt>
–

definition list
</dt>
contains the word or phrase to be defined
<dd> </dd>
–
contains the definition
ECA 228 Internet/Intranet Design I
<dl> </dl>
definition list
<dl>
<dt>Halle</dt>
<dd>A five year old Golden Retriever</dd>
<dt>Marley</dt>
<dd>A ten year old Border Collie</dd>
</dl>
Halle
A five year old Golden Retriever
Marley
A ten year old Border Collie
ECA 228 Internet/Intranet Design I
cont …
quoting text

<blockquote> </blockquote>
–
–
–
–

block level element
originally developed to indent large blocks of quoted
text
generally indented by browsers
can be nested
<q> </q>
–
–
used to quote text inline
can be nested
ECA 228 Internet/Intranet Design I
text formatting

<code> </code>
–

<pre> </pre>
–

line-through
<sup> </sup>
–

preformatted
<del> </del>
–

monospaced
superscript
<sub> </sub>
–
subscript
ECA 228 Internet/Intranet Design I
divisions and spans

<div> </div>
–
–
container tags used to designate blocks of material
within a web page
block level element

–
–
content starts on a new line
by itself, <div> does nothing but add a line break
used with stylesheets, <div> becomes a very
powerful way to format blocks of code
ECA 228 Internet/Intranet Design I
divisions and spans

cont …
<span> </span>
–
–
–
–
container tags used to identify spans of text or other
inline elements
cannot <span> block level elements
by itself, <span> does nothing to the way a page
renders in a browser
used with stylesheets, <span> becomes a powerful
way to apply style inline
ECA 228 Internet/Intranet Design I
special characters
CODE
RENDERS
&nbsp;
non-breaking space
&amp;
ampersand
&lt;
less than sign
&gt;
greater than sign
&quot;
straight quotes
&#145;
curly single quote
&#146;
curly single quote
&#147;
curly double quote
&#148;
curly double quote
ECA 228 Internet/Intranet Design I