Session1 HTML Bài 1.1 Từ Cơ Bản Đến Nâng Cao

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.63 MB, 11 trang )

Session 1

Introduction to HTML
Working with HTML Elements

Objectives:
At the end of this session, you will be able to:
Write simple HTML documents
Use Hyperlinks
Use <meta> tag
Use special characters in HTML
Use Basic Tags
Insert Images
The steps given in this session are detailed, comprehensive and carefully thought through. This has
been done so that the learning objectives are met and the understanding of the tool is complete.
Please follow the steps carefully.
In order to execute the programs follow the steps given below:
1. Create a folder BDWS under C:\Temp, then create a folder Session1 in BDWS and save all the
.html files in this folder only.
2. Invoke Textpad application by clicking on the “Start” button and then “Programs\Text Editor”.
3. Use Textpad to write all .html files.
4. Use Internet Explorer or Firefox to display all .html files.

Part I:
Do workshop in CD

Part II:
Example 1: An HTML code to illustrate an anchor tag
<html>
<head>
<title>First Linked Document</title>

</head>
<body>

To Open the new Document

<a href="Test.htm">Click here</a>

</body>

1

</html>

Note: Before you run the above code, the file “test.html”, must exist. It has the following contents
(type these contents in a new Textpad file and save the file as “Test.html” in the folder “Session1”):
<html>
<head>
<title>A sample HTML Document</title>
</head>
<body>

My First Heading

My first paragraph

</body>
</html>

The syntax is:
<a href="Test.htm">Click here</a>

It will create “Click here” as the hyperlink and on clicking this link it will take you to the page
“Test.htm”.

Figure 1.1 a: Output of Example 1 (before clicking on the link)

2

Figure 1.1 b: Output of Example 1 (after clicking on the link)
Example 2: Scrolling to a location in the same document
In the code given below four anchor references are defined as follows:
Overview
Benefits
Features
Technical Specifications
<html>
<head>
<title>Linking in the Same Document</title>
</head>
<body>

HUBS DETAILS

<a href="#Overview">Overview</a>

<a href="#Benefits">Benefits</a>

<a href="#Features">Features</a>

<a href="#Technical Specifications">Technical Specifications</a>

<a name="Overview">Overview

BayStack SNMP, Advanced, and SA 10Base-T Stackable Hubs from Bay
Networks offer simple, scable solutions for supporting small and growing
Ethernet networks......

<a name="Benefits">Benefits</a>

Scalable from 12 to 260 Nodes Baystack 10BASE-T Hubs deliver a simple
and cost-effective method for starting and growing Ethernet networks......

<a name="Features">Features</a>

The BayStack 10BASE-T Hubs deliver simple, scalable, plug-and play
solutions for small and growing Ethernet net-work environments.....

<a name="Technical Specifications">Technical Specifications</a>

Technical Specifications for the BayStack 10BASE-T Hubs are shown in
Table 1.....

</body>
</html>

Figure 1.2: Output of Example 2
Example 3: Using Special Characters in the HTML document
<html>
<head>
<title>Learning HTML</title>
</head>
<body>

</body>
</html>

4

Figure 1.3: Output of Example 3
Example 4: Using <META> Element
<html>
<head>
<meta name="description" content="Your description" />
<meta name="keywords" content="Your keywords" />
<meta http-equiv="Refresh" content="2"/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Using META Element</title>
</head>
<body>

This page is refreshed after every 2 seconds

This page supports Unicode

</body>
</html>

When the above page (Example4.htm) is displayed in the browser, notice the status bar. The page
gets refreshed after every 2 seconds.

5

Figure 1.4: Output of Example 4
Example 5: HTML code to incorporate Font tag, Break tag, Paragraph tag and its attributes.
<html>
<head>
<title>HTML Code to Incorporate Different Tags</title>
</head>
<body>

To specify the beginning of the paragraph and the end of
paragraph, and tag is used.

The paragraph tag displays a blank line both on the top
and the bottom of the paragraph. .

</body>
</html>

6

Figure 1.5: Output of Example 5
Example 6: Write HTML code to right align a block of text using DIV tag
<html>
<head>
<title>Using DIV Tag</title>
</head>
<body>
<div id="content" align="right">

Aligning a Block of Content to the Right

You can use a DIV tag to align a block of content to the right.

The content can include anything you like, including tables, images,
lists, and so on. Note, however, that right-aligned lists often do
not look very neat.

</div>
</body>
</html>

7

Figure 1.6: Output of Example 6
Example 7: Write HTML code to incorporate all the text-formatting tags
<html>
<head>
<title>Using Text Formatting</title>
</head>
<body>

This Is My 7 th Program Using HTML

H2O Is The Chemical Name For Water


*
*********
*********
*
*
*
*
*
*

*
*********
*********
*
*
*
*
*
*
*
*********
*********
</pre>
<s>This Text Will Appear With Strike Effect</s>
</body>
</html>

8


Figure 1.7: Output of Example 7
Example 8: To insert an image into HTML document
<html>
<head>
<title>Inserting Images</title>
</head>

<!--set background image of Web page-->
<body background="background.gif">
Inserting Images


<hr>
<img src="fpt_aptech.jpg" border="1" alt="FPT Aptech" width="438" height="88">
Create a link of an image

<a href="#"><img src="click.gif" alt="Click here"></a>
</body>
</html>

9


Figure 1.8: Output of Example 8

10


Part III: Try It Yourself
1. Write a web page that contains description of your family and also of your pets. Clicking the
link “Describe Family” should take you to the description of the family. Clicking the link
“Describe Pet” should take you to the description of your pet.
Hint: Use the anchor and paragraph elements.
2. Write the HTML statements that would give the following line on a web page.
For more information, please send an e-mail to me, 
Hint: Put the following statement in the <BODY> section of the HTML file.
<a href="mailto:"></a>

5. Write HTML code to display the following text using superscripts.
The Value of 2 to the power of 3 is:
23 = 8
6. Write HTML code to display the following text using subscripts.
The Value of Log to the base 10 is:

Log10 = 1
7. Write HTML code to insert an image into the web page. Align the image with the description of
the image.
8. Do practical assignments in CD.

11