Building a Web Page

Download Report

Transcript Building a Web Page 

Building a Web Page
Creating a WWW Home Page
 Open your homework file on your
workstation in Notepad
 Save it as a1.html
General format:
HTML Page
<html>
<head>
</head>
<body bgcolor=0xffffff text=0x000000
link=0x8866ff alink=0xff0000 vlink=0xff00ff>
</body>
</html>
Some Sample HTML Tags
Page title
<title>
</title>
First level header
<h1>
</h1>
Paragraph
<p>
</p>
Emphasis
<em>
</em>
Logical Styles
Bold
<strong>
</strong>
Code
<code>
</code>
Keyboard
<kbd>
</kbd>
Even More Sample HTML Tags
Variable
<var>
</var>
Citation
<cite>
</cite>
Sample Output
<samp>
</samp>
Creating a Web Page
 In Notepad, add appropriate HTML tags to
a1.html
 Use the body tag to specify the colors you
selected earlier.
 <BODY link=“0x0000bb" alink=“0x0000ff"
vlink=“0x6600ee“ text=“0x000000”>
 Save the file.
 Open a browser such as Netscape or IE and
look at your new webpage (a1.html)
Posting a Web Page
 ftp your a1.html file to the server.
 Make sure you put it or move it into
your
public_html/172/Assignment1
directory.
 Use a browser to test it
http://www.cs.unca.edu/~username/172/Assignment1/a1.html
 Exit ftp with the command bye
Lists in HTML
Ordered List
<ol>
<li> </li>
</ol>
Definition List
<dl>
<dt> </dt>
<dd> </dd>
</dl>
Lists And More in HTML
Unordered List
<ul>
<li> </li>
</ul>
Hypertext anchor
<a href="doc.html">
</a>
Lists And More in HTML
Inline Image
<img src="name.format">
Comment
<!-- text -->
Tables in HTML

<table> ... </table>




defines a table in HTML.
If the BORDER attribute is present, your browser displays
the table with a border.
<table width="550" border="0“>
<caption> ... </caption>



defines the caption for the title of the table.
The default position of the title is centered at the top of the
table. The attribute ALIGN=BOTTOM can be used to position
the caption below the table.
NOTE: Any kind of markup tag can be used in the caption.
Tables in HTML

<TR> ... </TR>



Specifies a table row within a table.
You may define default attributes for the entire row: ALIGN
(LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE,
BOTTOM).
<TH> ... </TH>



Defines a table header cell.
By default the text in this cell is bold and centered.
Table header cells may contain other attributes to determine
the characteristics of the cell and/or its contents.
Tables in HTML

<TD> ... </TD>



Defines a table data cell.
By default the text in this cell is aligned left
and centered vertically.
Table data cells may contain other
attributes to determine the characteristics
of the cell and/or its contents.
Tables Attributes in HTML


Attributes defined within <TH> ... </TH> or
<TD> ... </TD> cells override the default
alignment set in a <TR> ... </TR>.
Attribute Description

ALIGN (LEFT, CENTER, RIGHT)


Horizontal alignment of a cell.
VALIGN (TOP, MIDDLE, BOTTOM)

Vertical alignment of a cell.
Tables Attributes in HTML

Attribute Description

COLSPAN=n


ROWSPAN=n


The number (n) of columns a cell spans.
The number (n) of rows a cell spans.
NOWRAP

Turn off word wrapping within a cell.
Creating a WWW Home Page


In your telnet window change to your
public_html directory.
Create a file called index.html using
pico, a free text editor.

To bring up pico, type pico at the
command prompt.
Creating a WWW Home Page



Format index.html using Hypertext
Markup Language (HTML).
Save your file <cntl> o
Set file permissions for index.html

chmod 644 ~/public_html/index.html
In Class Assignment




Modify your index.html file so that it includes an
ordered list of your three most favorite foods.
Add a definition list. Have at least two terms
(reality and dreamworld) and for each term
define your summer plans (you may use a literary
license with the truth if you desire).
Add a hyperlink to your favorite sports team or
musical group.
Add a table to ensure that your text never is
longer than 500 pixels.
In Class Assignment

Using the web browser of your choice load
your new page
(http://candler.cs.unca.edu/~user
name)