HTMLC - University of Wisconsin–Milwaukee

Download Report

Transcript HTMLC - 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
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
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
Text Tags
Font Size and Color
Headings
Paragraphs
Line breaks and Extra space
Background Color
Linking to other Pages
Adding images to your Web Page
Text Tags
Bold text:
<B></B>
Example: <B>Hello</B>
It will show up on your page like:
Italics:
Hello
<I></I>
Example: <I>Hello</I>
It will show up on your page like:
Hello
Underline text: <U></U>
Example: <U>Hello</U>
It will show up on your page like:
Center text:
Hello
<CENTER></CENTER>
Font Size and Color
<FONT SIZE="x">text to change</FONT>
"x" will be replaced by a number with a + or - sign in front of it
Examples:
<FONT SIZE=“+2”>Text to make bigger</FONT>
It will show up on your page like:
Text to make bigger
<FONT SIZE=“-2”>Text to make smaller</FONT>
It will show up on your page like:
Text to make smaller
Font Size and Color
<FONT COLOR="color"> </COLOR>
We replace “color” with a color name or hexadecimal color value
Examples:
<FONT COLOR=“red”>Hello</FONT>
It will show up on your page like:
Hello
<FONT COLOR=“#FF0000”>Hello</FONT>
It will show up on your page like:
Hello
For more colors and hexadecimal codes:
http://www.pageresource.com/html/hexcodes.htm
Font Size and Color
You can also use size and color declarations
inside the same tag:
<FONT SIZE=“+2” COLOR=“red”>Hello</FONT>
It will show up on your page like:
Hello
Headings
Six levels of headers – lowest numbers are
largest font.
<H1>My favorite websites</H1>
Headers can ALIGN center, right or left.
<H2 ALIGN=center>Spring 2004</H2>
Paragraphs
New paragraph: <P> </P> (can also ALIGN right, left, or center)
The paragraph tag does not require a closing tag since it will end
whenever a new paragraph tag is encountered.
Example:
<P>
This is Paragraph 1
<P>
This is Paragraph 2
=
<P>
This is Paragraph 1
</P>
<P>
This is Paragraph 2
</P>
Line breaks and extra space
•
•
•
The tag for a line break is <BR>.
When you insert this tag in your document,
the contents will go to the next line.
The <BR> tag does not need a closing tag
Example:
Hello<BR>Hello again!
It will show up on your page like:
Hello
Hello again!
Line breaks and extra space
Space: &nbsp;
Example: To place 3 additional spaces
between “Hello” and “World!”
Hello &nbsp;&nbsp;&nbsp;World!
Some Body tags attributes

Background Color:
<BODY BGCOLOR=“Blue”>

Using an image as background:
<BODY BACKGROUND = “clouds.gif”>

To choose a default color for text, set the
TEXT attribute in the BODY tag
–
<BODY TEXT=“black”>
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=“me.jpg”>
Links to other Web pages:
–
<A HREF=“http://www.uwm.edu”>University of
Wisconsin-Milwaukee</A>
Images, links, etc.

Comments are text that wont show up on the
page
–
–
Begin comment <!-End comment -->
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
References
http://www.w3.org/MarkUp/Guide/
http://www.pageresource.com/html/index2.htm