Scribd
Upload
253 views

Objectives of The Lab:: IEEM 230. HTML Basics

The document provides an introduction to HTML basics including: 1. The objectives are to learn the client-server model of how the web works and basic HTML tags for formatting text, lists, tables, images and links. 2. HTML uses tags like <p> and </p> to format paragraphs, <b> for bold, and <i> for italics. Tags are also used for lists, tables, images and links. 3. An example HTML document is provided with comments explaining the various tags.

Uploaded by

api-3745065
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
253 views

Objectives of The Lab:: IEEM 230. HTML Basics

The document provides an introduction to HTML basics including: 1. The objectives are to learn the client-server model of how the web works and basic HTML tags for formatting text, lists, tables, images and links. 2. HTML uses tags like <p> and </p> to format paragraphs, <b> for bold, and <i> for italics. Tags are also used for lists, tables, images and links. 3. An example HTML document is provided with comments explaining the various tags.

Uploaded by

api-3745065
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

IEEM 230.

HTML Basics

Objectives of the lab:

Learn how the web works


- The client-server model

Learn basic HTML language, and be able to write HTML documents using a text editor.
- simple formatting
- lists
- controlled layouts using tables
- images
- links and URL’s

Reference:

HTML = HyperText Markup Language

Simple HTML documents contain two things: (1) the text, and (2) information about how the text
should be formatted (called TAG’s).

The TAG’s provided in the following HTML example file will be sufficient for the purpose of
this lab. To make it easier to read, all TAG’s are red, and comments are in blue.

------- Simple example of HTML ---

<html>
<!-- this is a comment. Each HTML file begins with an “html” tag, and ends with a “/html” tag>
<!-- html documents have two sections: “head” and “body”>
<head>
<title> IEEM 230: basic html tags
</title>
<!—title is what appears on the title bar of the window >
</head>

<body>
<p>
<b> IEEM 230 Lab 1: Simple HTML reference </b>
<p>
<hr>
<b> <i> Simple formatting tags </i> </b>
<p>

<!-- the “b” and “/b” tags enclose bold face text >
<!-- the “i” and “/i” tags enclose text in italics >

<!-- the “br” tag causes a line break (the following text is printed on a new line)>
<!-- the “p” and “/p” tags enclose each paragraph>

<font size=+1 color=red> The “font” tag </font> can control the size and color of text. It has
two useful options: size=+N (N is an integer) will increase or decrease the size of text to the N-th
larger font size; size=-N will decrease font size. The color=C changes the color of the text.
HTML recognizes all common color names, or you can specify the RGB value of the color in
Hexadecimal.
<p>
<hr>
<p>
<b> <i> Controlling the layout of text in a page </i> </b>
<p>
<b> 1. Horizontal bars. </b> To break a page into sections, create a horizontal bar using the
“hr” tag.
<p>

<b>2. Lists of items. </b> You can create a list of items using the following.
<!-- the “ol” and “/ol” tags enclose an ordered, or numbered list of items >
<!-- the “li” and “/li” tags enclose each list-item>

<!-- the “ul” and “/ul” tags enclose an un-ordered, or bullet list of items >
<!-- “li” and”/li” enclose each list-item>

<p>
<!-- below is an example of a numbered list with two items>
<ol>
<li> First item in an ordered list. </li>
<li> Second item in a ordered list </li>
</ol>

<br>
<!-- below is an example of a bullet list with two items>
<ul>
<li> One item in an unordered list </li>
<li> Another item in the unordered list </li>
</ul>
<p>

<b>3. Tables. </b>Often you will need to display items in a table. To do so, use a “table” tag.
Another common use of tables is to divide the entire page into a few segments, with each segment
having its own data to display. A table is made of rows, and each row has one or more columns,
or cols.
<p>
<b>Example of a table:</b> <br>

<table border=1 cellspacing=1>


<tr>
<td> First col of First row </td>
<td> Second col of First row </td>
</tr>

<tr>
<td> First col of Second row </td>
<td> Second col of Second row </td>
<tr>
</table >

You can experiment with different values for “border=N” and “cellspacing=N”.
<p>
<hr>
<p>
<b> <i> Commonly used links </i> </b>
<p>
<ul>
<li> Link to another document: “a href=URL” Text of the link “/a” <br>
Example: <a href=http://www.ust.hk/itsc/webguide/reference/html-tools.html>
ITSC web-page building guide
</a>
</li>

<li> Email links: “a href=mailto” text of link “/a” <br>


Example: <a href=mailto:[email protected]> Email Some body </a>
</li>

<li> Include a picture in a document: “img src=URL” tag: <br>


Example: <img src=shark.jpg>
</li>
</ul>

<p>
The URL,(Universal Resource Locator) is the <b> <i>name and location </b> </i> (on the
internet) of the linked file. Its format is: http://computer_name/full_path_name_of_file. The URL
of a link is also displayed by the web client, e.g. Internet explorer shows it as the “Location:”
URL can be absolute (e.g. the first item in the list above), or relative to the location of the current
file (e.g. the “img src=shark.jpg” example in the list above).
<p>

<hr>
<p>
<!-- Each html file ends with the closing of the “body” and the “html” tags.>
</body>

</html>

The Client-Server Model -- how the web works

The function of the internet requires at least two programs: A web client (e.g. Internet Explorer),
and a web server (e.g. Apache, or Microsoft IIS). The server program is always running on a
computer which is also called your web-server.
web client

1. user enters URL 2. Client sends request on internet:


(i) Locate the server: iesu5.ieem.ust.hk
(ii) Request server to send file: dfaculty/ajay/index.html

3. Web server (always running):


Apache (i) Receives request
(ii) Finds files “dfaculty/ajay/index.html” on its hard disk
(iii) Sends file to web-client (via internet)
Server: iesu5

4. Web client
(i) Receives and displays contents of index.html

Exercises:

1. On your web client program, type the Location:


http://www-ielm.ust.hk/dfaculty/ajay/courses/ieem230/labs/shark.jpg

(i) Save the image (use mouse-right-click on the image) on the Desktop, with filename: shark.jpg

2. Start PHP Designer 2005 software. Choose ‘HTML’. Copy and paste the HTML text in this
lab-sheet (all text between the “html” and “/html” tags above). Save as lab1q1.html to the
Desktop. Open the file using Internet explorer.

3. (i) Create your own web-page with (at least) the following
- one image
- one table
- one mailto
- one URL linking to another web-page in UST.

(ii) Load the page to your iHome account, into a folder called “ie230” and in a file called
“lab1.html”
[Notes: you will also need to upload the image file]

You might also like