1 session 1: introduction to html spring 2011. 2 today’s agenda cover useful terminology for...
TRANSCRIPT
![Page 1: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/1.jpg)
1
Session 1: Introduction to HTMLSpring 2011
![Page 2: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/2.jpg)
2
Today’s AgendaCover useful terminology for today’s
session• HTML, browsers, servers, etc.
HTML TagsGet started on your e-portfolioGo LIVE on the web!
![Page 3: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/3.jpg)
3
![Page 4: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/4.jpg)
4
Browsers
Software to view Web pages
Internet Explorer Firefox
SafariGoogle Chrome
![Page 5: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/5.jpg)
5
HTML
HyperText Markup Language
![Page 6: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/6.jpg)
6
Versions of HTML
HTML 1HTML 2HTML 3HTML 4XHTML HTML5
XHTML
![Page 7: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/7.jpg)
7
Text EditorsUsed to write HTML code
Notepad
Pico (UNIX)
![Page 8: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/8.jpg)
8
![Page 9: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/9.jpg)
9
Web Servers (or “Hosts”)Computers that house Web sites
Today you’ll upload HTML files to the UH web server using FTP (File Transfer Protocol)
UH Server
Other users will request your web pages through their ISP’s server using HTTP (Hypertext Transfer Protocol)
The Internet
ISP’s server
Image Source: http://www.jjc.edu/academics/divisions/career-technical/cios/Pages/default.aspx
![Page 10: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/10.jpg)
10
Domain name
Examples:
hawaii.edu nasa.gov ebay.com
kitv.com ala.org amazon.com
![Page 11: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/11.jpg)
11
Domain NameAND
Server SpaceFREE!
![Page 12: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/12.jpg)
12
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/
![Page 13: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/13.jpg)
13
![Page 14: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/14.jpg)
14
Tags
I love libraries!<i> </i>
Opening Tag Closing Tag
I love libraries!
![Page 15: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/15.jpg)
15
HTML document structure
<html>
<head>
<title> …document title… </title>
</head>
<body>
…your page content…
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
![Page 16: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/16.jpg)
16
![Page 17: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/17.jpg)
17
Before starting1. 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.):
![Page 18: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/18.jpg)
18
Exercise
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!
To establish your space on the UH server and create a home page:
Open http://www.hawaii.edu/account/ in Firefox
![Page 19: 1 Session 1: Introduction to HTML Spring 2011. 2 Today’s Agenda Cover useful terminology for today’s session HTML, browsers, servers, etc. HTML Tags Get](https://reader030.vdocuments.net/reader030/viewer/2022032708/56649e7a5503460f94b7a24d/html5/thumbnails/19.jpg)
19
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.