Building Your Home Page: An HTML Primer

1
Building Your Home Page An HTML Primer

• Presented by the CSIP Web Team

Greg Slabaugh Yun-Hui Fan Jordan Rosenthal Robert
Morris Samuel Li
John Glotzbach Jialin Tian Adriane
Durey Charlotte Doughty Dr. Mersereau
2
Introduction

• This presentation is not
• FrontPage, DreamWeaver, Composer, etc.
• WYSIWYG
• JavaScript, Java, VB Script, ASP, CGI, VRML,
• This presentation is
• Basic HTML concepts
• Edit with text editor

3
Outline

• Structure of the HTML file
• Title of document
• Format of body
• Text formatting
• Document structure
• Document objects (lists, links, images and tables)

4
HTML File Structure
HTML tags are used to instruct the browser how to
format the text within the start and end
tags. Format ... The
name of the tag is not case-sensitive. The HTML
file contains a header and a body.
5
HTML File
HTML
6
HTML Header
The header contains the title of the document
along with keywords and other information related
to the document.
Web Page Title
7
HTML Body
The body of the HTML file contains the
information you want the reader to view. The
effect of many HTML tags can be modified using
optional tag attributes.
...
8
HTML Body
...
The pre-defined colors include black, silver,
gray, white, maroon, red, purple, fuschia, green,
lime, olive, yellow, navy, blue, teal, and aqua.
Custom colors are defined as rrggbb, where rr,
gg, and bb are hexadecimal intensity values.
9
HTML Body
...
10
Text Formatting

• Using formatted text is essential in many
  documents. Formatting options include
• Bold text
• Underlined text
• Italicized text
• Centering text
• Forced line breaks

11
Text Formatting
Underlined text
Bold-faced
text
Italicized text

Centered text
SIZE4 COLORnavy Text in a new font
12
Document Structure
Many documents have a structure with sections of
paragraphs along with a heading for each section
or sub-section. To create this type of document
with HTML, use the heading tags and the paragraph
tag.
13
Document Structure
Section Heading Paragraph
1 Paragraph 2 2nd level
heading 3rd level heading Second
Section Heading ...
HTML provides 6 levels for headings, H1 through
H6.
14
Lists

• Lists are a great way to concisely display
• information. List types include
• Ordered Numbered List
• Unordered Bulleted List
• (More)

15
Lists Ordered Lists

• 2. Tacos
  4. Burritos
  6. Enchiladas

16
Lists Ordered Lists

• 2. Tacos
  4. Burritos
  6. Enchiladas

Ordered list types include A, a, I, i,
and 1. 1 is the default.
17
Lists Unordered Lists

• • Tacos
  • Burritos
  • Enchiladas

18
Lists Unordered Lists

• • Tacos
  • Burritos
  • Enchiladas

Unordered list types include square, disc,
and circle disc is the default.
19
Lists Nesting

• • Tacos
  • Burritos
  • • Chicken
    • Steak
    • Broccoli
  • Enchiladas

20
Hyperlinks

• Hyperlinks are what make the web great. A
• hyperlink links to information, such as
• Another web page
• A location in a web page
• A persons email address
• A file on the web

21
Hyperlinks Syntax

• Hyperlink syntax
• Yahoo!

22
Hyperlinks URLs

• URLs
• Absolute URLs Full path specified
• Yahoo!
• Relative URLs Relative path specified
• My Resume
• Web browsers automatically look for index.html
• or index.htm in the directory specified in the
• hyperlink unless given a filename.

Location of this page
Location of res.html
23
Hyperlinks Name Attribute

• Name attribute
• Turns anchored text into a hypertext destination
• Used to make internal links
• Jump To Section 3
• Section 3

Example
24
Hyperlinks Email and Files
Email My Email Other files paper.pdfMy cool paper PDF 500 KB HREF paper.psMy cool paper PS 1.2 MB
C source code code.mMatlab source code
25
Images

• Native formats
• JPEG Used for larger images, 256 colors
• GIF Used for icons, buttons, animations, images
  with transparent background
• Tag
• .gif
• no closing tag
• Can make a hyperimage
• image.jpg

26
Images Optional Attributes

• ALT Alternate text that is shown instead of,
  or in
• addition to the image
• WIDTH, HEIGHT Specify the width and height of
  the image
• image.jpg

27
Tables
Tables are a powerful way to organize text and
images on a web page

• Cool Table
• Column 1Column 2
• Yellow5
• Green3

28
Tables

• Column 1Column 2
• Yellow center5
• Both Columns
• YoR

Also note that tables can be nested
29
Template

• Available on CSIP web site
• Uses HTML tags that are described in this
• presentation

Template
30
Your ECE Web Page

• To use the template as your web page
• 1. Request a web account
• http//www.ece-help.gatech.edu/home_page/request.
  html
• (Requires ECE UNIX account)
• 2. Save template locally. In your browser, go to
• http//csip.ece.gatech.edu/Information/WWW_Templa
  tes
• IE Select View-Source and then File-Save
  As, and
• save as index.html.
• Netscape Select View Page Source, highlight
  and copy the
• text, paste into your text editor and save the
  text as index.html.
• 3. Once your web account has been set up, ftp to
  users.ece.gatech.edu and put the index.html file.
• 4. Your web page is http//www.ece.gatech.edu/log
  in, where login is your ECE UNIX login name.

31
Learning More
Online resources http//www.cwru.edu/help/introH
TML/toc.html http//www.htmlhelp.com/ http//www
.willcam.com/cmat/html/crossref.html http//www.d
avesite.com/webstation/html/