Building a Web Page

1
Building a Web Page
2
Create A New Folder

• Right click on the desktop and select New /
  Folder
• Name the folder playpen

3
View file extensions

• From the Start Menu, select Accessories / Windows
  Explorer
• Display the desktop.
• Select your newly created directory playpen.
• From the menu bar, select Tools / Folder Options
• Under the View Tab uncheck Hide Extensions for
  Known File Types.
• Select the OK button.

4
Creating a Web Page

• Open Notepad (From the Start Menu, select
  Accessories / Notepad.)
• Type in the following
• Your Name Here
• Robotics and the Internet
• CSCI 179.001

5
Saving a Web Page from Notepad

• From the Menu Bar, select File / Save.
• Verify you are in your new playpen folder or
  directory.
• Set the following
• File Name index.html
• Save as type All Files
• Encoding ANSI
• Press the SAVE button.

6
View Your Web Page In A Browser

• Go back to Windows Explorer and make sure your
  file is named index.html, not index.txt.
• Double click the file index.html and the default
  browser should open with your page displayed.
• What do you see?

7
General formatHTML Page

• lthtmlgt
•  
• ltheadgt
•  
• lt/headgt
•  
• ltbody bgcolorffffff text000000
  link8866ff alinkff0000 vlinkff00ffgt
•  
• lt/bodygt
•  
• lt/htmlgt

8
Some Sample HTML Tags

• Page title
• lttitlegt lt/titlegt
•  
• First level header
• lth1gt lt/h1gt
•  
• Paragraph
• ltpgt lt/pgt
•  
• Emphasis
• ltemgt lt/emgt

9
Logical Styles

• Bold
• ltstronggt lt/stronggt
•  
• Code
• ltcodegt lt/codegt
•  
• Keyboard
• ltkbdgt lt/kbdgt
•  

10
Even More Sample HTML Tags

• Variable
• ltvargt lt/vargt
•  
• Citation
• ltcitegt lt/citegt
•  
• Sample Output
• ltsampgt lt/sampgt
•  

11
Creating a Web Page

• In Notepad, add appropriate HTML tags to
  index.html
• Use the body tag to specify the colors you
  selected earlier.
• ltBODY link0x0000bb" alink0x0000ff"
  vlink0x6600ee text0x000000gt
• Save the file.
• Open a browser such as Netscape or IE and look at
  your new webpage (index.html)

12
Lists in HTML

• Ordered List
• ltolgt
• ltligt lt/ligt
• lt/olgt
•  
• Definition List
• ltdlgt
• ltdtgt lt/dtgt
• ltddgt lt/ddgt
• lt/dlgt
•  
• And even more...
•  
• Unordered List
• ltulgt
• ltligt
• lt/dlgt
•  
• Hypertext anchor

13
Lists And More in HTML

• Unordered List
• ltulgt
• ltligt lt/ligt
• lt/ulgt
•  
• Hypertext anchor
• lta href"doc.html"gt lt/agt
•  

14
Lists And More in HTML

• Inline Image
• ltimg src"name.format"gt
• Comment
• lt!-- text --gt

15
Tables in HTML

• lttablegt ... lt/tablegt
• defines a table in HTML.
• If the BORDER attribute is present, your browser
  displays the table with a border.
• lttable width"550" border"0gt
• ltcaptiongt ... lt/captiongt
• 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 ALIGNBOTTOM
  can be used to position the caption below the
  table.
• NOTE Any kind of markup tag can be used in the
  caption.

16
Tables in HTML

• ltTRgt ... lt/TRgt
• 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).
• ltTHgt ... lt/THgt
• 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.

17
Tables in HTML

• ltTDgt ... lt/TDgt
• 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.

18
Tables Attributes in HTML

• Attributes defined within ltTHgt ... lt/THgt or ltTDgt
  ... lt/TDgt cells override the default alignment
  set in a ltTRgt ... lt/TRgt.
• Attribute Description
• ALIGN (LEFT, CENTER, RIGHT)
• Horizontal alignment of a cell.
• VALIGN (TOP, MIDDLE, BOTTOM)
• Vertical alignment of a cell.

19
Tables Attributes in HTML

• Attribute Description
• COLSPANn
• The number (n) of columns a cell spans.
• ROWSPANn
• The number (n) of rows a cell spans.
• NOWRAP
• Turn off word wrapping within a cell.

20
In Class Assignment

• Modify your index.html file so that it includes
  an ordered list of your three favorite foods.
• Add a definition list. Have at least two terms
  (Summer Reality and Dream Summer ) and for each
  term define your next summer plans.
• 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.

21
In Class Assignment

• Email your web page to us and send a copy to
  yourself.
• Our emails are
• reiser_at_cs.unca.edu
• bruce_at_cs.unca.edu