MCS-170 The Nature of Computer Science
Chapter 2 - Part 2
1. Web Page Review
- A Web page is written using HTML, a document formatting language
- A URL
is a name for a Web page
on the Internet (e.g., http://www.gac.
edu/~sskulrat).
- HTML - primarily structured through the use of tags
- HTML Document: begins with <html> and has two parts:
- <head> stuff defining owner, title, etc (NOT
formatted) </head>
- <body> stuff that user sees on page (IS Formatted) </body>
- Body Tags: Many different
types, many need to be opened/closed in pairs.
- Ex: What does <p> signify?
<hr>? <br>?
<h1>? <i>?
<span>?
- Ex: Where do we use the style parameters? Answer: Inside tags. Here is an
example.
2. HTML Links
- Use the tag <a> with the form:
<a
href="URL ADDRESS">Text for label</a>
- Example: <a
href="http://www.amazon.com">Books</a>. On the displayed web page a user
will see "Books" as a link. When clicked on, the user will link to the
amazon.com web page.
- Relative
links:
- <a
href="myFavoriteMovies.html">. This will link to a web
page that is in the same directory as the current page. There is no
need for the complete URL address in this case.
- <a
href="projects/lab1.html">. This will link to a file in
a sub-directory of the directory of the current page.
- Mail links: <a
href="mailto:sskulrat@gustavus.edu">. This will
link to a mail program that will alow the page user to send email to
the listed person.
- In-Class - try writing HTML links of these various types. (You may use the HTML file "index.html" in the same directory as
this page and use the sub-directory "alice", which has "gallery.html".
3. HTML Images
- Use the tag <img> with the form <img src="URL ADDRESS"
alt="text description" />. Note
the similarity to link tags, except that image tags do not come in
pairs.
- Example: <img
src="bugs.gif"
alt="Bugs Bunny Image" />. This
would refer to an image file that is in the same directory as the web
page (same rules for relative addresses apply as in links)
- Note: Most browsers can handle only JPEG
or GIF images, so image files
should be restricted to these types.
- In-Class - try putting the bugs.gif
image on our web page.
4. HTML Lists
- Ordered List - use <ol> tag for list and <li> tag for
each list item
<ol>
<li> list item 1 </li>
<li> list item 2 </li>
</ol>
gives:
- list item 1
- list item 2
<ul>
<li> list item 1 </li>
<ul>
<li> list item
1.1 </li>
</ul>
<li> list item 2 </li>
</ul>
gives:
5. HTML Tables
- Use <table> and </table> tags to define table.
(To define a table with a border, use <table border = 1>)
- Use <tr> and </tr> tags to define each row of data.
- Use <td> and </td> to define each table data element.
- Example: Here is a table with one row:
<table>
<tr> <td> Hr <\td> <td>
Mo <\td> <td> Tu
<\td> <td> We <\td>
<td> Th <\td> <td> Fr
<\td>
<\tr>
<\table>
6. Making A Web Page Accessible on the Internet
- How is a web page accessed over the web?
- In URL address http://www.gac.edu/~sskulrat/index.html,
the term www.gac.edu
refers to a computer (called a "Web server") that resides at a physical
location and holds all of the web pages for that web site. What
comes after the server address is a file name ("~sskulrat/index.html")
that is located in that computer's set of web pages.
- Each web server stores its pages in a particular way. For
example, at Gustavus, the web server will first look in a special
directory called "www-docs" in a user's home directory.