Writing a Web Page

Using html tags

html tags

•      Web documents have two parts

–   The text and images you want to display

–   The commands that indicate how you want it displayed

•      Commands are written between angle brackets <  and >

•      For many commands, there are opening and closing tags with the text in between

–   Example:  turn <B>bold on</b> bold off

 

Starting and ending the page

•      Start the page

<html><head> <title>text </head> <body>

•      End the page

  </body></html>

•      Headings

–    Range from 1 to 6  <h2>  text</h2>

•      White space

–    Browsers ignore spaces and line returns

–    A line return must be indicated with <BR>

–    A blank line is indicated with <P>

–    A horizontal line is <HR>

•      Comments are indicated with <!-- Text  -->

 

Text formatting

•      Bold, italics, or underline

<b><i><u> text </u></i></b>

•      Subscripts and superscripts

•    H<sub>2</sub>O;  x<sup>2</sup>

•      Centering   <center>  whatever  </center>

•      Preformatted text  <pre>  text  </pre>

•      Changing font size or color

  <font size =“+2”><font color = “red”> big and red</font></font>

•      Making text blink  <blink>  word </blink>

•      Changing background color  <bgcolor=“#rrggbb”>

–    000000 is black, ffffff is white

 

Images

•      Images must be saved in a separate file

•      Image formats

–    There are different ways of digitizing images.  Some take a lot more bits than others

–    Bipmapped files (.bmp) are huge, too big to be used on a web page

–    Images for webs should be saved in either .gif format or .jpeg format

–    .jpg format compresses the file, and some data is lost

•      There are programs that convert one format to another; I use Photoshop

 

Putting an image on your page

•      You use a tag to tell the browser where to find the file with the image you want.

   <IMG SRC=“filename.jpg”>

–   You can control where the image appears with <IMG SRC=“filename.jpg align=left>

•   This will put the image on the left side of the screen while the text flows to the right

 

Links and anchors

•      When a user clicks on a link, they jump from the present page to the linked page

•      To link to a local page:
   
<a href="folder/filename.html>  text</a>

•      To create a link to a far away page:
< a href = http://www.site.edu/folder/filename.html”>  text </a>

 

Lists

•      Two types of lists

–  Ordered lists <OL>  These lists will be numbered

–  Unordered lists <UL> These lists will have a bullet

•      Each list then will have a series of list items<LI>

•      You turn the list off at the end of the items with </OL> or </UL>

•      You can create nested lists

 

Tables

•      Begin the table with <table>, end it with </table>

•      Each row begins and ends with <TR> </TR>

•      Each column within a row begins and ends with </TD>  </TD>

 

Getting help from other pages

•      Most beginning html writers get a lot of help from pages other people have written.

•      You can see the source html for any page by clicking on view, then on source

•      You can download any image you find on another page by right clicking on the image, then clicking on save as

–   Be sure you notice where the image is saved and what it is called.

 

Finding help

•      The web is full of html tutorials

•      You can either look at the ones I suggest on your lab page, or do a search

•      One very good search engine is www.google.com