Session 1: Introduction HTML
Objectives
The
overall objective of the LIS Web Team HTML Workshop series is that you will be
able to create, upload, and maintain your own websites using basic HTML
code.
The
main goal of this first session is that you will know the key vocabulary and
concepts underlying the Internet
structure and web page
creation. By the end of the class you will have an actual web page and a handy
list of useful resources.
Part
1
INTERNET and HYPERTEXT
MARKUP LANGUAGE
What is the Internet?
The Internet
“Internet” comes from the inter-communication or inter-connection of
various “computer
networks.”
Computer network
A computer network is a
number of computers that can communicate with each other, for example through
telephone wires or wireless radio waves.
Each computer has a unique address that distinguishes it from all other
computers on that network, and this is how the computers communicate with each
other. In turn, the computers in that network share a
common address that separates them from other networks. Each network might belong to a larger
network, and that larger network might belong to an even larger one.
The Internet is simply a
worldwide network of networks that are connected with each other.
Functions of
the Internet
·
WWW (World Wide
Web)
·
E-mail
·
Net News
·
Chat
·
FTP (File Transfer
Protocol)
By connecting your computer to the
Internet, you can browse websites that exist in any network of this worldwide
network. Creating your web pages and making them public means to put them on
the network of the Internet.
How
are Web
pages created and how do they work?
The Web (World Wide Web or WWW)
The Web is the system that “web pages” are built upon.
In the early 1990’s, Tim Berners-Lee, a physicist at the
CERN laboratory in
Web Pages
A web page is an electronic document…containing text, maybe
pictures, it can even have animation and sound.
Although a webpage may look like it is one file it is usually made of
separate files: text files, image files,
audio files, video files. The glue that
holds all these files together is called a markup language. The most popular tool to help you do this is “HTML (Hypertext
Markup Language).”
Web sites (websites)
Websites are
collections of web pages. The first or main page in a website is called home
page. The sub pages link from this page.
HTML (Hypertext Markup Language)
HTML is the basic
programming language used for creating web pages. It is formed from the two
parts: tags and data. Hypertext is a document that enables to jump to other
parts or pages by clicking.
Hyperlinks (Links)
Hyperlinks “are
clickable text or graphics that enable you to access additional Internet
resources.” Also known as links. Most web pages use hyperlinks to other web
pages.
Browsers (Internet browsers)
Browsers are software your computer uses to
view web pages created by various programming languages including HTML. Well-known browsers include Netscape
Navigator, Internet Explorer, Firefox and Safari.
As
you create your web pages,
it is important to “test” them in different browsers. Your page may not look the same. Be aware that versions of the same browser
from the same software company may differ from each other as well. For example, earlier versions of Internet
Explorer cannot do things that the latest version is able to do.
How can web pages be put on the Web?
Web Servers
Web servers are computers that house one or more Web sites. When a browser on a PC asks to view a web page from over the network, the server is responsible for sending the page to the requesting PC.
UH
has its own servers and you can connect to them through the Internet. You can also create your own website on the UH
server. If
you have a UH email account your also have a place reserved on the UH web
server for your own personal website.
The
UH system’s servers use an operating system that is different from Windows or
Mac. It is called UNIX.
The computer you may be using could be a Windows or Mac computer, but it
can still communicate with a UNIX server because of “protocols.”
Protocols
Protocols are a set of rules that have been agreed upon that
determine how data should be transmitted. The web uses “HTTP protocol” to
transmit HTML documents.
So
that computers can talk to each other we have protocols, that is why you can
use a Windows or Mac computer (as a client) to talk with a UNIX machine (the
server). There are many types of
protocols and they provide many useful services for reading, editing and
writing information on the web. The
protocols are used in various software.
Another important protocol is “FTP”, which is used to transfer HTML files or images to the web
severs.
URL (Uniform Resource Locator)
an Internet
address that tells your web browser where to look on the Internet (which network or server) to find a specific
web page.
http://www2.hawaii.edu/~yokokudo/index.htm.
a. b. c. d.
a. Protocol.
b. Domain name (server name)
c. Directory name (the space reserved for you)
d. File name
When you enter
this URL on a browser, the browser will
connect to the
server named “www2.hawaii.edu” by
the “http”
protocol, and find a file named “index. htm”
in the “~yokokudo”
directory.
*You do not need
to enter “index.htm.”- The browser will
recognize it as “index.htm”
when you do not type in a file name.
Exercise: Creating Your Homepage
The following are the steps for creating
your personal homepage or index.html page on the UH server.
To
establish your space on the UH server and create a home page:
·
Go to http://www.hawaii.edu/account/
- Sign in with your UH username and
password.
- Under “Personal Home Page Options”
click on the link “Create Homepage.”
- Put in a title, choose a logo, and
type in some text in the comment box. Press continue. Write down your home
page URL address (e.g. http://www2.hawaii.edu/~yourusername).
- Open a new browser window. Type in
the address of your new homepage.
- Once you make your homepage, the
address will be http://www2.hawaii.edu/~your username. Notice that
index.html is not added to the end of the address, but rather it is
implied.
Uploading/Downloading with SSH Secure File
Transfer Client
Now
that you have set up your homepage, let’s take a look at the actual file
structure of you site, and the index.html file that will be your main file for
these sessions.
(1)
Find “SSH Secure File Transfer Client” either on the desktop or in the
“programs” menu and start the program.
(If you need this software on your computer, you can download it for
free from UH at http://www.hawaii.edu/help/software/supported.html
- for Mac computers, you should use “Fugu” which is the same kind of program.)
(2) Click on the QUICK CONNECT icon. You will get a box into which you can type
the name of the uhunix server and your account or login name. The “Host Name” is uhunix2.its.hawaii.edu; the “user name” is your UH username.
Click CONNECT when you are done.
You will then get a box asking for your
password. Type in your password and
click OK.
If you get a message telling you that this is the first time you are requesting an encrypted connection with the server and whether it is ok to save a host key to your local database, go ahead and click YES.
(3) Now you should see folders on the left and right of the screen. Those on the left are on the computer, those on the right are on the server (live on the internet!).
(4) Find the folder that says public_html. Anything in this folder is visible to the public as web pages – all your webpages will go in here from now on. Double-click on public_html.
(5) Find the file named “index.html” This is your
homepage! Homepages (the very first page
for your website) are almost always named index.html – this is the default name
that the browser looks for when it starts to load your site. Now, look on the left side of the program –
find the folder on your computer that you want to store your web files in, and
open that folder. Click and hold on
index.html, drag it over to the left side of SSH, and drop it into the folder
you want.
You
should see lines of text in the bottom-most area – those lines are showing you
that your file is downloading, and where it went to. When the line says “complete,” your download is finished!
CONGRATULATIONS! You have now downloaded your index.html file. In order to
upload it, you would simply drag the file from the left side, back to the right side again.
Setting
Permissions
Once the file has been placed on the
server and into the appropriate folder, the permissions can be changed allowing
you to store the file on the server where no one can see it, or making
available for all to see. To set the permissions, right-click the file. A small
menu will appear with “Properties” on the bottom. Open the properties and at the
bottom you will see a set of boxes under the heading “Permissions.”
By
clicking on the boxes, you can make the file readable, writable, or executable
to the owner (yourself), a group (like if you were in an office
network, and it were your whole department), or others (meaning the
entire internet-viewing public, anywhere in the world!). Generally, you want to
ensure that you, the creator, have full access by check marking all three
options for owner. To make it viewable to everyone else, check mark the “Read”
box under “Other.”
Part
II: PLANNING A WEBSITE
The
Heart of Your Web Page
Studies show
that visitors spend less than 30 seconds checking out your web page. In fact,
according to expert Jakob Nielsen, author of Designing Web Usability (2000), “it is almost twice as common for
users to fixate on the text as on the images upon their initial visit to a
page. In general, users were first drawn to headlines, article summaries, and
captions.” Apparently, the web reading habits are “non-linear” and involve much
more scanning for bits of info. Clarity in this format is everything, much like
a newspaper article.
Although
designing your web page can sound much more exciting than playing with the
text, it is best to get a handle on your content first. Like a news writer, you
want to answer the Who, What, Where, When questions as quickly as
possible.
Millhollon
and Castrina’s Web Writing Checklist (pp.
33 & 34)
q One idea per paragraph.
q Short sentences without dumbing down.
Avoid compound sentences.
q Think about adding attractive visual
highlights to your words.
q Use bullets whenever possible.
q Insert headings and subheadings to break
up and highlight key text.
q Keep headlines simple and direct.
Meaningful words preferred over clever ones.
q Follow a logical system of
subordination. (e.g. main headings larger than the subheadings).
q Separate paragraphs with white spaces.
q
Avoid too many hyperlinks on one page.
Let’s Look at Some Web Pages
Queen’s Borough Public Library, http://www.queenslibrary.org/
Glen Eira Library & Information Service, http://www.gleneira.vic.gov.au/library/
Rudy’s
Alaska Fishing Page, http://www.alaska.net/~guidesak/rudy/rt.htm
The
Bus:
Brainstorming
1. Jot down every concept you want in your
website or web page.
2. Make sure you have a print copy of your
ideas and write down the keywords next to each topic.
3. Look over the keywords. Which ones should
be headings and which ones should be hyperlinks?
Copyright
and the Web
- Life plus 70 years (
- Protects words used, not the idea
itself.
- Paraphrase & reference (can
provide a link).
- Be careful for the use of copyrighted images-
Follow terms and conditions provided.
Key
HTML Techniques for Web Page Design
References
Millhollon,
Mary, and Jeff Castrina. Easy Web Page Creation.
Microsoft:
Willard, Wendy. Web Design: A Beginner’s Guide.
Osborne:
Online:
W3 Schools: HTML
Tutorial. http://www.w3schools.com/html/
HTML Goodies:
Basic Tutorial. http://www.htmlgoodies.com/primers/html/article.php/3478131
HTML
tutorial. http://www.htmlcodetutorial.com/
Also, for plain and clean sites, check
out former student Nobuko Miyairi’s homepage:
http://www2.hawaii.edu/~nmiyairi.
and see Dr. Nahl’s website: http://www2.hawaii.edu/~nahl/.
Exercise
– Planning
Although its always tempting to jump in and start writing your web site, taking time to plan out the structure of your website will save you time in the long run and give you an opportunity to explore different ideas. Prepare a draft of your website using a piece of paper and the following list.
Jot down concepts - -
Pick keywords - - Create headings - - Create hyperlinks
Image
Title
Classes Homework Experience About Me Main content
Contact
How will I write the HTML for my site?
About
HTML Editors: Editors
are software packages used to help you write HTML code and create HTML files.
Text Editors: Text editors are good at handling just
letters and numbers. Basic text editors
for the PC are Notepad and Wordpad (for longer documents than Notepad). Common basic text editors for Mac are
SimpleText and TextEdit.
Text Editors with features: Some software companies took the concept
of the basic text editor and added features such as the automatic insertion of
tags. Some of these software packages
even allow you to test your code by letting you look at it through a browser
without having to exit the editor.
Macromedia Homesite lets you do this.
Others are Arachnophilia and BBEdit.
Advanced Editors:
Advanced
HTML editors (or web authoring tools) include Dreamweaver, Microsoft FrontPage,
NetObjects Fusion, Adobe GoLive, and Word WYSIWYG. These packages let you leave the realm of
typing out code instructions and allow you to focus on creating objects and
working on layout. They are more similar
to desktop publishing packages or word processing software. When you decide to bold text or create a
table, these packages will automatically insert all the necessary codes to do
these tasks. The downside, aside from
greater cost, is that these packages often insert a lot of proprietary and
unnecessary coding into your HTML file.
Sometimes the coding fails to work and needs to be fixed with a text
editor. This is why it is very important
to understand how to develop HTML with a simple text editor first before moving
on to the fancier software packages.
Exercise – Getting Set Up
Take a look at the code of the index.html page that was automatically created when you created your webpage through UH. To do this (with any HTML file), right click on the file, choose “Open With,” then choose “Notepad” or “Wordpad.” These programs will allow you to edit the code of your file. You may need to go to “Format” in the file menu, and click “Word Wrap” – that will show all the code on one page, not going all off to the side.
When you look at the file, there’s a bunch of code! As of 2006, this code is outdated, and needs to be cleaned up. What we want to start with is a fresh slate, so go ahead and delete everything