Create Your Own Web Page: An Introduction to HTML Instructor: Corey Johnson Assisted by: tba

Simple formatting for web pages Images, colors & backgrounds Hypertext links Tables Posting web pages Unix Accounts, Public HTML Overview Outline

What is HTML? Hypertext Markup Language  Hypertext, links from one page or location to another  Markup originally referred to the process of marking a manuscript copy for typesetting with directions for use type fonts, sizes, indentation, etc.

The Basic Structure of HTML ASCII text Elements Attributes

A Simple Webpage The title of the page The text and images of the webpage itself

Line Breaks and Paragraphs Line Break  is a hard return  Does not need a closing tag Paragraph Tag  provides a hard return plus one space  provides extra space  Centers Text

Line Breaks and Paragraphs (cont.) text Horizontal Rule (a line)

Formatting Text Italics Underline, Bold, subscript, superscript Fonts  Headings sizes h1 to h6 (h1 is largest)  Font 3  size can be from 1 to 7, with seven as the largest.  relative sizes “-2” or “+2” Style: Color: 

Colors and Backgrounds  Font Color: Backgrounds  Attribute of the tag.  Can be images or colors.

Lists Unordered list  Types – “disc”, “square”, “circle”  Ordered list  Types – “1”, “a”, “A”, “i”, “I”  Lists include list elements  List elements do not require and ending tag

Bulleted List, example. enter your point and another and maybe another

A numbered List enter your point and another and maybe another A nested bulleted list (within another list) a last point in the first list

Hypertext Links Absolute Link Washington State University Architecture Libary Relative Link Architecture Library

More on Links A link within a page  Electronic Journals  An link Joel Cummings Change link colors unfollowed links visited links mouse button pressed

Images Attributes:  align=“left”, “right”, “top”, “middle”, “bottom”  alt=“descriptive name”  width=“percentage” or “pixel number”  height=“percentage” or “pixel number”  border=“5” Including an Image that is also a link

Tables To start: To end: Defining properties of a table:  or 

Table row Table column Table column Heading (Optional) (empty cell) Tables (cont.)

Special Characters < = “<“ > = “>” & = “&” " = quote marks = A non-breaking space. List of special characters and their Escape Sequences 

Unix Accounts FTP your html files and images to the directory “public_html” of your unix accounts.  e.html (FTP 32 – WS_FTP) e.html To have the files in this directory available on the Web, type new_www at the % prompt within your unix account. To find these pages on the web, type in the url unix id]/firstpage.html

Thanks! Questions?