Tài liệu học HTML cơ bản dành cho lập trình viên học lại từ đầuKhi bắt đầu làm quen với lập trình web thì HTML chính là nội dung đầu tiên mà bạn phải học, sau đó bạn sẽ kết hợp với CSS để tạo ra những sản phảm rất là độc đáo. Nghe nói thì hay nhưng bạn mới học nên có lẽ hơi mơ hồ phải không nào :D Ok trong serie này ta sẽ cùng nhau khám phá nhé.
Trang 1
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>
<h1>To Open the new Document</h1>
<h3><a href ="Test.htm">Click here</a></h3>
</body>
Trang 2
</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>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</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)
Trang 3
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>
<h1 align ="center">HUBS DETAILS</h1>
<a href ="#Overview">Overview</a><br>
<a href ="#Benefits">Benefits</a><br>
<a href ="#Features">Features</a><br>
<a href ="#Technical Specifications">Technical Specifications</a><br>
<h2><a name ="Overview">Overview</h2><br>
<p>BayStack SNMP, Advanced, and SA 10Base-T Stackable Hubs from Bay
Networks offer simple, scable solutions for supporting small and growing Ethernet networks
</p>
<h2><a name ="Benefits">Benefits</a></h2><br>
<p>Scalable from 12 to 260 Nodes Baystack 10BASE-T Hubs deliver a simple and cost-effective method for starting and growing Ethernet networks
Trang 4
</p>
<h2><a name ="Features">Features</a></h2><br>
<p>The BayStack 10BASE-T Hubs deliver simple, scalable, plug-and play
solutions for small and growing Ethernet net-work environments
</p>
<h2><a name ="Technical Specifications">Technical Specifications</a></h2><br>
<p>Technical Specifications for the BayStack 10BASE-T Hubs are shown in Table 1
</p>
</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>
<p><code>If A > B Then <BR> A = A - 1</code></p>
<p><code>If A < B Then <BR> A = A + 1</code></p>
</body>
</html>
Trang 5
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>
<p>This page is refreshed after every 2 seconds</p>
<p>This page supports Unicode</p>
</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
Trang 6
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>
<p>
<font face ="Times New Roman" size ="5" color ="darkblue">
<b><i>To specify the beginning of the paragraph and the end of paragraph, < P > and < /P > tag is used.</i></b>
</font>
</p>
<p>
<center><font face ="Arial" size ="4" color ="red">
<b><i>The paragraph tag displays a blank line both <BR> on the top and the bottom of the paragraph .</i></b>
</font></center>
</p>
</body>
</html>
Trang 7
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">
<h1>Aligning a Block of Content to the Right</h1>
<p>
</p>
<p>
</p>
</div>
</body>
</html>
Trang 8
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>
<p>This Is My 7 <sup>th</sup> Program Using HTML</p>
<p>H<sub>2</sub>O Is The Chemical Name For Water</p>
<pre>
</pre>
<s>This Text Will Appear With Strike Effect</s>
</body>
</html>
Trang 9
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">
<h1>Inserting Images</h1>
<hr>
<img src ="fpt_aptech.jpg" border ="1" alt ="FPT Aptech" width ="438" height ="88">
<h2>Create a link of an image</h2>
<a href ="#"><img src ="click.gif" alt ="Click here"></a>
</body>
</html>
Trang 10
Figure 1.8: Output of Example 8
Trang 11
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, abc@google.com
Hint: Put the following statement in the <BODY> section of the HTML file
<a href ="mailto:abc@google.com" abc@google.com</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