200 likes | 324 Views
Basic HTML Workshop. Session 1: Introduction to HTML Spring 2011. 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!. Useful Terminology in Web Development. Browsers.
E N D
Basic HTML Workshop Session 1: Introduction to HTML Spring 2011
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!
Browsers • Software to view Web pages Internet Explorer Firefox Google Chrome Safari
HTML HyperText Markup Language
Versions of HTML HTML 1 HTML 2 HTML 3 HTML 4 XHTML HTML5 XHTML
Text Editors Used to write HTML code Pico (UNIX) Notepad
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) 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
Student Benefits Domain Name AND Server Space FREE!
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/
Tags Opening Tag Closing Tag <i> I love libraries! </i> I love libraries!
HTML document structure <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> …document title… </title> </head> <body> …your page content… </body> </html>
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.):
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!
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.