Session
2: Basic HTML Workshop Handout & Exercise
What is HTML?
Hypertext
Markup Language, or HTML for short, is what tells a web browser how a page
should look. An HTML document contains two components: content (e.g., course
schedule information) and HTML commands that specify the placement and
formatting of the content (e.g., display the course name in bold, the
instructor's name in italics, and show all the classes in a grid layout).
HTML Elements
1. HTML tags are surrounded with angle
brackets (< >).
2. HTML tags are not technically case
sensitive, but for good practice (xHTML compliance), always use lowercase.
3. HTML tags are often in pairs with a
starting tag and ending tag (<body></body>).
4. HTML tags must have a closing tag. For paired tags, this means the second tag: </p>, for others, the closing slash is in the tag itself: <br /> (xHTML compliance)
5. "Nested" HTML tags should close
in the reverse order of the opening tags:
<body>
<strong>Curriculum
Vitae</strong>
</body>
6. Some tags can have properties (or
"attributes") which further refine the effects of the tag:
<p
class="pink">
<img
alt="logo">
Basic HTML Tags
<html>
<head>
<title> …document title…
</title>
</head>
<body>
…your page content…
</body>
</html>
All
HTML pages will have these tags. The <html> tag tells the browser to read and render
the page in HTML. The ending </html> tag tells the browser that this is the
end of the page. The <title>
tag denotes the title displayed on the top left of the browser. It must be
placed inside the <head>
tag, which is closed </head>
before the body of the page begins. All of the content of the page, the text,
images, media, etc, is enclosed between <body> and </body>.
In the Beginning
Download
your “index.html” file from your UH server space (see last week’s handout for
uploading/downloading instructions). Right click on the file and choose
“Open with Notepad.” If the code
looks compacted click on “Format” in the top menu and then click on “word
wrap.”
Your
code should already look like this:
<HTML>
<HEAD>
<TITLE>[Your
title here]</TITLE>
</HEAD>
<BODY>
[your sentence here]
</BODY>
</HTML>
Conforming to XHTML
Your first task is to convert all the tags
to lower case . This is so that your code is now conforming to the new
standard.
<html>
<head>
<title>[Your
title here]</title>
</head>
<body>
</body>
</html>
< Save your changes in Notepad.
From this point
All
the additions from this point on will be done within the <body> </body> tags.
All the content for the page goes within this tag.
Paragraph
To denote a paragraph, type <p> and </p> around the text included in the paragraph. This results in double spacing between text blocks, as the <p> tag inherently has a line break after it.
We will now add a paragraph to our index.html
file:
<body>
<p>[Write
a brief statement about yourself here!]</p>
</body>
< Save your changes and refresh your web browser.
Links
HTML
uses the tag called a hyperlink to link to another page on the Web. You will
learn about 3 kinds of links:
· To a web page in the same folder
· To a web page in a different folder
· To an outside web page on the Internet
To
do this, you will use the "anchor" tag (hence the <a>)to specify the page address, and
the text you want to serve as the link.
<a href="the address of the
webpage or website goes in the quotes">the text that will show up on
the page goes between the brackets</a>
Example:
<a href="http://www.hawaii.edu/slis">Go
to the LIS home page</a>
address text in page
Linking to a page in the same folder:
<a
href="resume.html">My Resume</a>
If you have a page named “resume.html” in the same folder as your “index.html,” clicking the above link in your index page( “index.html” ) will send the user to your resume page. This is called a document-relative link.
Linking to a page in a different folder:
If you create a lot of folders on the server, you might need to know this document-relative shortcut: ../
<a href="../resume.html">My Resume</a> This tells the browser that the link is in one folder above the current folder.
In this example, your directory structure might look like this:
public_html (folder)
index.html
resume.html
You are on this page
images
(folder)
images.html
pic.jpg
For this example you are on the images.html page that is in the images folder. The link
<a href="../resume.html">My Resume</a>
tells the browser to move one folder up, to public_html in order to find the webpage resume.html. Conversely, if you want to send the user from index.html to images.html you would use this:
<a href="images/images.html">My Pictures</a>
This link tells the browser to go to the images folder in order to find the images.html webpage.
We will now add three document-relative
links to our page:
Add the link code above your paragraph. This will eventually become the navigation portion of your webpage.
<body>
<a
href="index.html">Home </a>
<a
href="courses.html">Courses</a>
<a
href="personal.html">Personal</a>
<p> [Write a brief statement about
yourself here!]</p>
</body>
< Save your changes in Notepad. Go back to the desktop and double-click the “index.html” file – this should open it in an internet browser – do you see the links? When you make new pages for your own website, you can link to them in this way! Ask the nearest Web Team helper to help you if you want to make new pages for your website now.
Linking to an outside webpage on the Internet
Finally, we will add an outside link to your page. This will require a full http address, and will direct your users to a page outside of your website.
Add an outside link to the end of the
paragraph you just created, after your contact (it doesn’t have to be this one,
it could be any link you like!):
<body>
<a
href="index.html">Home </a>
<a
href="courses.html">Courses</a>
<a
href="personal.html">Personal</a>
<p> [Write a brief statement about
yourself here!]</p>
<p>
<a href="http://www.hawaii.edu/slis">Go to the LIS home
page</a>
</p>
</body>
< Save your changes and refresh your web browser. Always test out your links.
Images
<img src="uhath.gif" />
This
tag, short for “image source” will load the requested file by following the
path (address) that you give it. The above URL is a document-relative link,
this means that the server will look for an image in the same folder as the page itself. It is common practice to place all pictures in an images folder. If you decide to do
this, your link will look like this:
<img src="images/uhath.gif" alt="logo" />
The
uhUNIX server reads folders in the above manner; other servers may need a
backslash in front of the folder name: <img src="/images/uhath.gif" />
Don’t
forget the alt! tag. This enables
people to read what your picture is about, instead of looking at it. This is
useful if the user is visually impaired and using a screen reader, which will
read the alt text, or for a broken
image link, or for a user with a slow connection who doesn’t load browser
images.
<img
src="images/uhath.gif" alt="logo" />
Add your image (or use the one we provided)
right after the opening paragraph but before the external link to the LIS
homepage.
<body>
<a
href="index.html">Home</a>
<a
href="courses.html">Courses</a>
<a
href="personal.html">Personal</a>
<p> [Write a brief
statement about yourself here!]</p>
<img src=”images/[filename].jpg” />
<p>
<a href="http://www.hawaii.edu/slis">Go to the LIS home
page</a>
</p>
</body>
< Save your changes and refresh your web browser. Note that we created ours in a folder called images. To create an images folder into which you will place all your pictures.
Go
to the SSH File Transfer window, and 
get
into your public_html directory.
In the toolbar above the left window you will see a picture of an icon
with a little asterisk-looking thing on it, this means “New Folder” – click it!
Name your new folder images. From now on, put all your image files in here; it’s a good way to keep organized when you start to have lots of files.
Don’t forget to check the permissions of the file and the folder, by right-clicking it, going to properties, and checking “read” for all the people. (For Mac, it’s “info” and check the “read” boxes.)
Creating <div>ision
The
last tag we will add is the <div> tag – short for division. This tag puts
all content (that is, the words, pictures, etc that you want on your page) into
a container. The <div>
tag creates an invisible section for you to put your content into. Think of it
as an invisible shoebox that holds your content. Once we have that shoebox
created, we can then tell the browser how we want the things inside the box to
be styled or formatted using another language called CSS.
CSS
stands for Cascading Style Sheets and is another computer language that is used
in concert with HTML. CSS elements
determine the style and formatting to be applied to HTML tags such as
specifying font size, color, etc. For
now, just think of <div> as a way to organization your
content.
We will now add three <div>sections to our page:
Finally, your code should look something like this:
<html>
<head>
<title>Caitlin’s
Page</title>
</head>
<body>
<div>
<a
href="index.html>Home</a><br />
<a
href="courses.html">Courses</a><br />
<a
href="personal.html">Personal</a><br />
</div>
<div>
<p>Hello
my name is Caitlin Nelson and I am writing about myself. </p>
<a
href="http://www.hawaii.edu/slis/webteam">Web Team</a>
<div>
<img
src="palmtree.jpg"alt=”a picture of a palm tree”/>
</div>
</div>
</body>
</html>
Notice that the third tag is inside the second one! This is called a “nested tag.” Think of these tags as boxes inside boxes – or to use a dresser metaphor: the whole page is the clothes dresser, each div is like a drawer, and a div-within-a-div is like a smaller basket or section inside that drawer – they’re all used to keep different sections separate for later organization. You will see that this separation is important when we get to CSS in the next two sessions.
< Save your changes in Notepad.
This is the code that we will use in the upcoming sessions to begin building your e-portfolio / website. Your next mission will be to start choosing colors for your page: text color, link color, background color, etc. Take a look at some of these color charts, and pick some colors that you like – think about things as a whole scheme, not just individually. And remember: think of your users!
Also, we will be working with font size in the next session. Think about how you want your fonts to look, what kind and what size for the different kinds of text in your page. Here are some pages about fonts for you to look at for next time.