Just Enough HTML - University of Wisconsin–Milwaukee

Download Report

Transcript Just Enough HTML - University of Wisconsin–Milwaukee 

Just Enough HTML
How to Create Basic
HTML Documents
The World Wide Web




The World Wide Web is a collection of
millions of documents which reside on the
internet and are written in HTML
The World Wide Web was invented by Al
Gore.
Just joking.
Tim Berners-Lee is the actual creator or the
Web
What is HTML?



HyperText Markup Language
A Language for formatting web documents
Features:
–
–
Hypertext – links within pages that lead to other
web pages on the internet
Universality – virtually any computer can read any
web page (but not necessarily in the same way)
Writing HTML




Can use any text editor or word processor
Can also use web page editing software such
as FrontPage or Dreamweaver
Web Page editing software simply generates
an HTML text document for you
Document formatting is specified using HTML
Tags.
Writing HTML


Tags are commands written between angle
brackets < >
Many commands require opening and closing
tags. Closing tags use the same command
word preceded by a slash:
–


<B>Hello world!</B> This is my web page.
Many tags have attributes that add additional
formatting to the text.
Many attributes can have values
–
<FONT COLOR=“red”>My Classes:</FONT>
Starting Your Web Page
<HTML>
<HEAD>
<TITLE>Appears in the title bar and is used by
search engines</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
The Body of the Web Page





Six levels of headers – lowest numbers are
largest font.
<H1>My favorite websites</H1>
<H2 ALIGN=center>Fall 2003</H2>
New paragraph: <P> </P> (can also ALIGN
right, left, or center)
Space: &nbsp; (non-breaking space)
Formatting Text




Some of these tags may be deprecated by
W3C, but browsers still recognize them.
The font tag will specify what fonts you prefer
to use. <FONT SIZE=6 FACE=“Garamond”
COLOR=“#FF0000”>This is Garamond in
red.</FONT>
Bold <B> </B> or <STRONG> </STRONG>
Italic <I> </I> or <EM> </EM>
Formatting Text

To choose a default color for text, set the
TEXT attribute in the BODY tag
–

</BODY>
To change the text color within the body, use
the COLOR attribute of the FONT tag.
–

<BODY TEXT=“black”>
<FONT COLOR=“blue”> </FONT>
FONT tag also has SIZE and FACE attributes
Formatting Text



Underline: <U>Just Enough Unix</U>
New Line (Break): <BR>
Comments are text that wont show up on the
page
–
–

Begin comment <!-End comment -->
Blink (Netscape only): <BLINK> </BLINK>
Images, Links, Etc…

Horizontal Rule (a dividing line):
–
–

Insert an image onto the page:
–

<HR>
<HR SIZE=10> 10 specifies the height in pixels
<IMG SRC=“images/me.jpg”>
Links to other Web pages:
–
<A HREF=“http://www.uwm.edu”>University of
Wisconsin-Milwaukee</A>
Background Colors

Background Color:
–
–
<BODY BGCOLOR=“Lime”>
Sixteen predefined color names for background,
text, etc.

–
Silver, Gray, White, Black, Maroon, Red, Green, Lime,
Purple, Fuchsia, Olive, Yellow, Navy, Blue, Teal, Aqua
Other colors must be specified giving RGB
components in Hexidecimal (a 16 digit number
system 0-9 and A-F)

http://html-color-codes.com/
Background Images


Using an image as background:
<BODY BACKGROUND = “images/clouds.gif”>
Saving and Viewing



Save file as index.html
View by opening your web browser, selecting
File -> Open ->path to index.html
After the permissions have been set so that
the page is viewable by anyone on the
internet, view by opening browser and typing
in your URL in the address text box.
–
http://www.uwm.edu/~yourloginname