Webpage Creation Bootcamp: Day 1 - Basic Training
From Academic Computing
Contents |
[edit] Purpose
Students will be introduced to basic XHTML and basic concepts associated with Web surfing so that they can easily conceptualize how markup (XHTML) works.
[edit] Prerequisites
To participate fully in the course, students should have some basic computing skills (such as copying, pasting, saving, etc.). Students should also have a webpage/site idea so that the course has more meaning to them. The idea is not necessary, but simply a useful way to learn faster.
[edit] Things you should know about the web...
[edit] Browsers
Web browsers are applications that look at the XHTML, HTML, etc. of a document and display that document. The people who markup documents must and should do certain things to make displaying documents easier for the browser. Common broswers include Microsoft Internet Explorer, Safari, Netscape Navigator, and Mozilla.
[edit] URI (URL, web-address)
Every resource available on the Web -- HTML document, image, video clip, program, etc. -- has an address associated with it, called a Universal Resource Identifier, or "URI".
URIs typically consist of three pieces:
- The mechanism (or "naming scheme") used to access the resource.
E.g.: http (web), mailto (email), ftp (File Transfer Protocol) - The name of the computer hosting the resource.
E.g.: helios.acomp.usf.edu, www.acomp.usf.edu, mit.edu - The name of the resource itself, given as a path.
E.g.: /index.html, ~lori/color/
Consider the URI that designates the color test tool:
http://fox.org/~lori/color/
This URI may be read as follows: There is a document available via the HTTP protocol, residing on the machine fox.org, accessible via the path "/~lori/color/".
Here is another example of a URI. This one refers to a user's mailbox:
For questions, please send email to <a href="mailto:help_ac@usf.edu">Academic Computing Help Desk</a>.
You may be familiar with the term "URL" and not the term "URI".
URLs form a subset of the more general URI naming scheme.
[edit] Basic XHTML
XHTML stands for eXtensible Hypertext Markup Language. This is what we’re going to use to markup documents to be viewed on the Internet.
This will be an iterative process. (i.e. We’ll go through this many times, adding more to your page and knowledge each time)
- The basis of XHTML/HTML
<element attribute=”value”>content </element> - Element?
An element is a basic instruction to your web browser. It consists of a start tag, an end tag, and the content between. The start tag may include attribute-value pairs. - Tags?
Tags are enclosed in brackets <…>. Start tags tell the browser to start doing something, <…>, and end tags tell the browser when to stop, </…>. <p> tells the browser to start a paragraph and </p> tells the browser to end a paragraph. You cannot use an end tag without a start tag or vise-versa.
Tags enclose content, which can include text and other elements. For example, the html tags enclose the entire document, telling the browser how the document should be processed. The head element encloses meta data (title, language, author, etc.) in the heading. - Attribute
An attribute adds value to an element. Attributes occurs as attribute-value pairs (e.g. title="Chapter7"). - HTML and XHTML
- XHTML elements must be properly nested
<p><em>Properly nested means to close the inner tag before the outer tag!</em></p> - XHTML documents must be well-formed
<html><head></head><body>No missing html, head, or body tags!</body></html> - Element names and attributes must be in lowercase
<html><head></head><body><p id="first">No one likes the shift key! (Except for punctuation marks.)</p></body></html> - All XHTML elements must be closed
<p>No more “Paragraphs close themselves.”</p>
<hr />This includes elements that have no end tags.<br />
- XHTML elements must be properly nested
[edit] A Simple Page
<html>
<head>
<title>A simple page</title>
</head>
<body>
<p>Stuff for your page goes here! </p>
</body>
</html>
You notice that all elements are closed, well formed, in lower case, and properly nested.
[edit] White space
White space is spaces, tabs, and line breaks, and means nothing to the browser. It is simply something people use to make their markup more readable. For example: <html><head><title>An example of insufficient white space</title></head><body>stuff</body></html>
The example using no white space is less legible. It’s hard to see where one element begins and where another ends. Failure to use indentation and other white space also makes it harder to detect problems in your markup such as improperly nested elements and unclosed elements.
[edit] Single-tag elements
You should have noticed an anomaly. <br /> doesn’t have an end tag or a start tag. Actually, <br>, <hr>, <img>, and a handful of other elements are a little strange because they don’t enclose any content. <br> is a line break, <hr> is a horizontal rule, <img> is an image. None of these elements enclose content. So, what happens with these elements to make them XHMTL compatible is that the start and end tags are collapsed into one. In other words, the break element starts and stops in one tag. So, instead of <br> of HTML, we have <br /> in XHTML.
[edit] Attributes
Attributes give extra instructions to the browser and are only included in the start tag. For example, when you open the document and specify the language (<html lang="en">) you don’t repeat the attributes in the close tag (</html>).
- Attribute names must be in lower case.
<acronym title="Three-Letter Acronym">TLA</acronym> - Attribute values must be quoted.
<img src=”nyao.jpg” alt=”Cat picture” width=”20” height=”10” /> - Attribute minimization is forbidden.
<form><input readonly=”readonly” />You can’t have attributes without a value.</form> - The id attribute uniquely identifies an element within a document.
<img src=”blah.gif” alt=”Silly pic” id=”Silly_pic” name=”Silly_pic”>
[edit] Hyperlinks!
What’s a webpage without a hyperlink? Nothing! Well, at least not terribly interactive. Here are four examples of hyperlinks:
- <a href=”http://www.somewhere.com” title=”Somewhere_in_ Cyberia">Somewhere.com</a>
- <a href=”mailto:noone@somewhere.com” title=”E-mail”>e-mail no one</a>
- <a href=”#ch7” title=”Chapter7”>Go to Chapter 7</a>
More content here… la dee dah…
<a name="ch7" title="Chapter7">Chapter 7</a>
First, the elements for hyperlinks are called anchors—anchor tags mark the source or destination of a hypertext link. They are a little useless without attributes. The normal attributes are href (hypertext reference), title, and name.
- Your typical hyperlink. The value of the href element is the URL/URI of the page you’re referencing. The content is what will show up as the link (i.e. the underlined parts that indicate a link). This style of link, when followed by someone viewing your page, takes the viewer away to the document referenced in the "href" attribute.
- An e-mail link. When someone clicks on this link (“e-mail no one”) their e-mail program will start with the e-mail address “noone@somewhere.com” already in the “To:” field.
- A named link. Use the “name” attribute to travel within a document, or when you want to go to a particular section of a document. You call the named link with the “#” sign.
The first anchor element links to the second element.
[edit] Absolute and Relative links
An absolute link references a document anywhere in the Web. For example, say you want to reference the W3. You’d have to use an absolute link. You can use absolute links within your site, but, if you re-locate your site (e.g. from http://helios.acomp.usf.edu/~yourname to http://aol.com/yourname), you’d have to go through and change every single one of your absolute links so they reflect that change.
Relative links refer to links within your site. You don’t have to put the “http://somewhere.com” in the href.
<a href=”http://w3.org/” alt=”The W3 Consortium”>The W3</a> <a href=”index2.html” alt=”Frames Version here”>Click for Frames</a>
[edit] Fragment identifiers
Some URIs refer to a location within a document. This kind of URI ends with "#" followed by an anchor identifier (called the fragment identifier). For instance, here is a URI pointing to an anchor named section_2:
http://helios.acomp.usf.edu/~me/thesis/chapter7.html#section_2
[edit] Relative URIs
A relative URI doesn't contain any naming scheme information. Its path refers to a resource on the same host as the current document. Relative URIs may contain fragment identifiers.
Relative URIs are resolved to full URIs using a base URI. As an example of relative URI resolution, assume we have the base URI "http://helios.acomp.usf.edu/~me/index.html". The relative URI in the following markup for a hypertext link:
<a href="diary.html">My Journal</a>
would expand to the full URI "http://helios.acomp.usf.edu/~me/diary.html", while the relative URI in the following markup for an image
<img src="~/images/bday.jpeg" alt="" title="My 16th Birthday Portrait">
would expand to the full URI "http://helios.acomp.usf.edu/images/bday.jpeg"
[edit] A More Complex Page
<html lang="en">
<head>
<title>A little bit more…</title>
</head>
<body style="color:#FFFFFF; background-color:#000000">
<h1>This is a little more complex.</h1>
<p>This uses many tags and attributes. <br />
We will show you how to do formatting with Cascading Style
Sheets on Day 2!</p>
<hr />
<a name="anchor" title="An anchor tag">
<h2>Examples of Anchor tags</h2> </a>
<a href="http://www.usf.edu">USF is a great school</a><br />
<a href="mailto:srosenbe@ritchie.acomp.usf.edu">Mail me!</a>
<p>Go to the <a href="#anchor">beginning</a> of this
section.</p>
<hr />
<p> <acronym title="Cascading Style Sheets">CSS</acronym> is
really the best (and eventually the only way) to format your
webpage. </p>
<p>You can see how much CSS can really do at some webpages:
<a href="http://css.nu/" target="_new">The CSS Pointers
Group</a>,
<a href="http://www.scythes.net/doujin_box/" target="_new">
Doujin Box</a>.</p>
<p>You can see that with CSS you can virtually control how the
browser looks, at least the part that's interacting with your
page. Be careful with this. Some people have their browser in
colors other than grey. If make your page into black and
chartreuse, you're going to have some really ugly color
mismatches with the person who uses rose or lilac as their
browser color.</p>
<hr />
<h2>Let's try listing items!</h2>
<h3>Things that are not right about this document</h3>
<ol>
<li>Using hard to read colors</li>
<li>Being hard to navigate (though there is nothing to
navigate)</li>
<li>Questionable sense of aesthetics</li>
<li>Non-parallel items in lists</li>
</ol>
<h3>Things that are good about this document</h3>
<ul>
<li>Well-formed</li>
<li>No dangling tags! <span style="background-
color:#FFFF00; color:#000000">(Now English majors can
get you on tags as well as participles)</span></li>
<li>All element names and attributes are in lower case</li>
<li>Elements are properly nested</li>
<li>Lots of white space</li>
</ul>
<hr />
<p>That's enough for one example!</p>
</body>
</html>
We’ve used examples of all the elements we’ve talked about in this example. (Now we know lots of elements!)
[edit] What about images?
The web has three big formats: PNG, JPEG, GIF. Use JPEG for photos and PNG for buttons, icons, charts, graphs, or anything without a wide range of color. If you’re using a lot of images, say, for navigation, it’s better to use PNG because their file size is smaller than a JPEG of the same image, and the quality is generally higher. GIF is useful for simple animation and is popularly used in advertising.
Okay, so the basic basic format of an image is
<img src=”title_graphic.png” alt=”Kea Livingston's Home Page” />
The “img” denotes that this is an image element. The “src” tells the source of the image (or where the image file is located). “title_graphic.png” is the filename of the image. Because this is a single entity, (it doesn’t enclose anything), you close the image tag within itself. The “alt” attribute is required—it provides information a user would need if the image were not present. E.g., if you have an arrow icon at the bottom of a page that takes you to the next chapter/section/page, the alt text might say, “next chapter.” (<img src=”rightarrow.png” alt=”next chapter”>
The basic format is
<img src=”kitten.jpg” width=”100” height=”50” alt=”Siamese” title=”Tama, a Siamese kitten” />
You should always specify the height and width because they will affect how fast your page displays. Be careful with this because if you change the height and width, you’ll change how the picture will display. For example, if your picture is 100x50, but you use width="200" height="50", your image is going to look stretched. This doesn’t affect the image; it only affects how the image is displayed. Note: you should avoid using this as a shortcut for resizing images; web browsers don't do a good job of it.
If you hold your mouse pointer over an image with title or alt, the text you input for it will pop-up. “Title” is exactly that: the image’s title. While it’s not required, it’s good to include. “Alt”, however, is a requirement. “Alt,” or alternative, is how readers (computer programs that read a webpage out-loud) read a webpage.
[edit] Tables
So, you say, what's this “tables” thing. Well, it’s where you store data. Basically, anything you’d put in a table in a word processor, or a spread-sheet, or any number of things in which you would like to present a lot of data in an easily read format.
A basic table looks like:
<table>
<tr>
<td>Cell 1, Row 1</td>
<td>Cell 2, Row 1</td>
</tr>
<tr>
<td>Cell 1, Row 2</td>
<td>Cell 2, Row 2</td>
</tr>
</table>
Tables on the web are different because they start with the row first and then the cell data. So, instead of A1 (where “A” is the cell and “1” is the row), html tables are 1A (where “1” is the row and “A” is the cell). Tables can be really difficult if you don’t understand that fundamental difference.
First is the opening tag for the table element, <table>. Next is the table row element, <tr>. Then we insert the table data (cells) with <td>. After we put all the data in the table row that we want, we close the table row element with </tr>. If we want a new row, we start the table row element again and insert more data.
And a more complex example of a table:
<table border="1" cellpadding="5" cellspacing="2">
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
</tr>
<tr>
<td>Cell 1, Row 2</td>
<td>Cell 2, Row 2</td>
<td>Cell 3, Row 2</td>
</tr>
<tr>
<td colspan="2">A cell spanning two columns, Row 3</td>
<td>Cell 3, Row 4</td>
</tr>
<tr>
<td rowspan="2">A cell spanning two rows</td>
<td>Cell 2, Row 4</td>
<td> Cell 3, Row 4</td>
</tr>
<tr>
<td>Cell 2, Row 5</td>
<td>Cell 3, Row 5</td>
</tr>
</table>
