HTML Basics Building

1
HTML Basics Building publishingyour own
website
2
What this presentation includes

• Background about the World Wide Web
• What is HTML?
• Building a simple web page
• A look at more complicated HTML
• Publishing your web page

3
Basic Premise Underlying the World-Wide
WebNonlinearity

• Books/magazines Present information in linear
  form typical reader starts at first page and
  continues to last page.
• Web Pages Online information is nonlinear it
  can be traversed in any order desired by the user
  using the links you provide within your web pages.

4
What Web Pages Really Are

• Web pages are simply documents that use certain
  formatting commands to tell computer browsers how
  to display the information on screen.
• Most common method of developing web pages is to
  use HTML.

5
What is HTML?

• HyperText Markup Language
• A method of publishing documents that includes
  commands telling computers how to display the
  document on screen
• HTML is platform-independent a document
  formatted in HTML can be viewed using a web
  browser on virtually any Windows, Mac, Linux, or
  Unix computer

6
Creating HTML Documents

• Can be created in any text editor (Note Pad) or
  word processor (MS Word)
• Special software applications make the job of
  publishing/managing a website easier, but arent
  necessary for small, simple websites
• Microsoft Front Page
• Macromedia Dreamweaver
• Adobe Go Live

7
HTML Tags
ltTitlegt steph moore My home page at NM
Techlt/Titlegt

• Tags these are the coded instructions that
  accompany the text of a web page. Tags are what
  make your web page work!
• These particular tags (in blue text) tell your
  browser to put the text between them into the top
  bar of your browser

8
ltTitlegt steph moore My home page at NM
Techlt/Titlegt
9
HTML Document Structure

• Head Contains codes for displaying the
  documents background, text and link colors font
  family and size the title of the page and other
  formatting information.
• Body This is where the actual content of the
  document appears. Content includes text,
  graphics, and links -- each with the appropriate
  tag(s) to indicate how it should be displayed.

10
A Very Simple HTML Page
ltHTMLgt ltHeadgt ltTitlegt Sulcata Station
lt/Titlegt lt/Headgt ltBodygt ltH1gt Welcome to Sulcata
Station! lt/H1gt ltpgt ltpgt This website is devoted to
providing accurate, researched information on
the proper care and feeding of Geochelone sulcata
tortoises, which are also known as African
Spurred Tortoises, African Spur-Thighed
Tortoises, African Desert Tortoises, or by
various other names. You will find accurate,
useful information here on how to feed, house,
and otherwise care for your sulcata tortoises, no
matter what your level of expertise. We keep
sulcata tortoises, and we work closely with other
sulcata keepers around the world. lt/pgt lt/Bodygt
11
What it looks like in your Browser
12
Note what the tags have done
13
Links the crucial piece of HTML

• Links take you to other webpages within the same
  site, or to completely different websites.
• Code used to specify links
• lta href http//www.websitename.comgt
• ONLY your browser sees this particular code!
• You must add some text so that the user can
  actually see the link

14
Making Links Visible to Users

• Links become visible to users when you include
  text and then close your ltagt tag
• lta hrefhttp//www.sulcata-station.orggtSulcata
  Stationlt/agt
• lta href http//www.nmt.edu/gtNew Mexico
  Techlt/agt

15
How Links are coded on your webpage

• ltHTMLgt
• ltHeadgt
• ltTitlegt Sulcata Station lt/Titlegt
• lt/Headgt
• ltBodygt
• ltH1gt Welcome to Sulcata Station! lt/H1gt
• ltpgt lta hrefhttp//www.sulcata-station.orggt
  Sulcata Station lt/agtlt/pgt
• ltpgt lta href http//www.nmt.edu/gt New Mexico
  Tech lt/agtlt/pgt
• ltpgt
• lt/Bodygt

16
What it looks like in your browser
17
More Complicated HTML Page
18
What it looks like in your Browser
19
Publishing Your Web Page

• Now that youve built your web page or web site,
  you have to publish it.
• Publishing transferring the page file(s) to a
  web server so that other people can see it.

20
FTP (File Transfer Protocol)

• Most commonly used method of publishing web pages
• Allows you to transfer page files, images, PDFs,
  movies, and so on from your computer to a web
  server
• Freeware utilities are available
• FTP Commander

21
(No Transcript)
22
Setting up FTP

• FTP utilities require some set-up
• FTP Server Address
• Login Name
• Login Password

23
FTP Server Name and FTP Port these should be
available from whatever website host you use.
24
Where to put your files
Some hosts provide a specific directory for web
pages (frequently called public_html)
25
Subdirectories for Photos, etc.

• Files where I put PDF, Word, and other
  downloadable documents
• Images Photos and any other image files
• Make SURE that your links include the directory
• www.sulcata-station.org/images/tortpix1.jpg
• is the correct link
• www.sulcata-station.org/tortpix1.jpg is NOT