Session 1: Introduction to HTML Spring 2011 Today’s Agenda  Cover useful terminology for today’s session • HTML, browsers, servers, etc.  HTML Tags 

Transcript Session 1: Introduction to HTML Spring 2011 Today’s Agenda  Cover useful terminology for today’s session • HTML, browsers, servers, etc.  HTML Tags 

Session 1: Introduction to HTML
Spring 2011
1
Today’s Agenda
 Cover useful terminology for today’s session
• HTML, browsers, servers, etc.
 HTML Tags
 Get started on your e-portfolio
 Go LIVE on the web!
2
3
Browsers
 Software to view Web pages
Internet Explorer
Google Chrome
Firefox
Safari
4
HTML
HyperText Markup Language
5
Versions of HTML
HTML 1
HTML 2
HTML 3
HTML 4
XHTML
HTML5
XHTML
6
Text Editors
Used to write HTML code
Pico (UNIX)
Notepad
7
Uploading vs. Downloading
8
Web Servers (or “Hosts”)
Computers that house Web sites
The Internet
ISP’s
server
UH
Server
Today you’ll upload
HTML files to the UH
web server using FTP
(File Transfer Protocol)
Other users will request your
web pages through their
ISP’s server using HTTP
(Hypertext Transfer Protocol)
9
Image Source: http://www.jjc.edu/academics/divisions/career-technical/cios/Pages/default.aspx
Domain name
Examples:
hawaii.edu
nasa.gov
ebay.com
kitv.com
ala.org
amazon.com
10
Student Benefits
Domain Name
AND
Server Space
11
URL
(Uniform Resource Locator)
http://www2.hawaii.edu/~yokokudo/index.htm
a
b
c
d
a: Protocol
b: Domain name (server name)
c: Directory name (space in the UH server reserved for you)
d: File name
http://www.hawaii.edu/lis/webteam/
12
13
Tags
Opening Tag
Closing Tag
<i> I love libraries! </i>
I love libraries!
14
HTML document structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html>
<head>
<title> …document title… </title>
</head>
<body>
…your page content…
</body>
</html>
15
16
Before starting
1. Please use Firefox or Chrome for today’s exercises.
2. Open up Control Panel in your PC. Within Control
Panel search for “Folder Options”. Open it and click on
the View tab and un-check the box for “Hide
extensions for known file types”.
This is to avoid problems with naming or re-naming
the file extension (ex. .txt, .doc, .htm, .html, etc.):
17
Exercise
To establish your space on the UH server and create
a home page:
Open http://www.hawaii.edu/account/ in Firefox
1 Sign in with your UH username and password.
2 Under “Personal Home Page Options” click on the link “Create
Homepage.”
3 Write down your homepage URL address:
e.g. http://www2.hawaii.edu/~yourusername
(Notice that index.html is not added to the end of the address, but
rather it is implied.)
4 Click on the link to your new homepage!
18
Troubleshooting
 When saving the template files in Internet Explorer,
they will be named .htm by default. To be consistent
with how the code was written in the template, you
must rename the file extension: .html or else the links
in your navigation bar will not work.
 Our current recommendation is to save the files from
Mozilla Firefox or Chrome in order to avoid this issue.
Firefox saves the files as .html by default.
19