Thực hành sử dụng các thẻ html cơ bản
Kết thúc chương này, bạn có thể: Sử dụng các thẻ cơ bản Chèn hình ảnh Các bước trong chương này được trình bày rất chi tiết, đầy đủ và rõ ràng. Bạn sẽ hiểu rõ hơn những nội dung trong bài lý thuyết và cách sử dụng công cụ. Hãy ...
Kết thúc chương này, bạn có thể:
- Sử dụng các thẻ cơ bản
- Chèn hình ảnh
Các bước trong chương này được trình bày rất chi tiết, đầy đủ và rõ ràng. Bạn sẽ hiểu rõ hơn những nội dung trong bài lý thuyết và cách sử dụng công cụ. Hãy thực hiện theo các bước dưới đây một cách cẩn thận.
- Tạo một thư mục, HTML-DHTML-JS-Examples trong ổ đĩa D: và lưu tất cả các file .html chỉ trong thư mục này. (Nếu không có đĩa D, hãy tạo trong ổ đĩa C:)
- Chạy chương trình Notepad bằng cách kích vào nút “Start” và chọn “Accessories”.
- Gõ đoạn mã ở ví dụ 1
- Kích vào File chọn Save As
- Lưu file với đuôi .html trong thư mục D:HTML-DHTML-JS-Examples. Chọn tên thích hợp,
lab21 (Lab21 để biết đây là ví dụ 1 trong bài Lab 2)
Hoặc
- Lưu nó trong thư mục đăng nhập của mình
- Chạy Internet Explorer.
- Kích vào File → Open, chọn Browse và chọn file từ thư mục D:HTML-DHTML-JS-Examples
<HTML>
<HEAD>
<TITLE> Aligning the heading at the center </TITLE>
</HEAD>
<H1 ALIGN="CENTER"> ON LINE EXAM </H1>
</HTML>
Kết quả của ví dụ 2
<HTML>
<HEAD>
<TITLE> HTML Code to incorporate different tags </TITLE>
</HEAD>
<BODY>
<P><FONT FACE="Times New Roman"><FONT SIZE=5>
<FONT 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></FONT></FONT>
<B><I>
<P><CENTER><FONT FACE="ARIAL"><FONT SIZE=4>
<FONT COLOR=RED>
The paragraph tag displays a blank line both <BR>
on the top and the bottom of the paragraph.
</FONT></FONT></FONT>
</CENTER>
</BODY>
</HTML>
Các thẻ được sử dụng trong đoạn mã HTML ở trên:
-
<TITLE>...</TITLE>
Trong thẻ TITLE được hiển thị trên thanh tiêu đề của cửa sổ trình duyệt
-
<P>... </P>
Để tạo đoạn.
Thẻ </P> có thể không cần chú ý. Việc bắt đầu một đoạn mới sẽ kết thúc đoạn trước đó.
-
<FONT FACE> and <FONT SIZE>
Đoạn đầu tiên được định dạng có font chữ Times New Roman và có cỡ chữ là 5. Đối với đoạn thứ hai thì được định dạng font chữ Arial và có cỡ chữ là 4
-
<B> and <I>
Các thẻ trên chỉ áp dụng cho đoạn thứ nhất để hiển thị kiểu chữ đậm và nghiêng
-
<CENTER>
Thẻ này làm cho đoạn thứ hai được canh giữa
Chú ý việc sử dụng các ký tự đặc biệt trong đoạn mã để hiển thị được các thẻ trong trình duyệt
Kết quả hiển thị trên trình duyệt với việc định dạng đoạn
Kết quả của ví dụ 3
<HTML> <DIV ALIGN=RIGHT> <H1>Aligning a Block of Content to the Right</H1> <P>You can use a DIV tag to align a block of content to the right.</P> <P>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.</P> </DIV> </HTML>
Kết quả của ví dụ 4
<HTML>
<BODY>
<P> Horizontal Rule that is half the size of the window and with a thickness of 5 pixels
<HR SIZE = 5 WIDTH = 50%>
</BODY>
</HTML>
Kết quả hiển thị như hình
Kết quả của ví dụ 5
< html>
<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>
<STRIKE> This Text Will Appear With Strike Effect </STRIKE>
</BODY>
</HTML>
<HTML>
<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>
<STRIKE> This Text Will Appear With Strike Effect </STRIKE>
</BODY>
</HTML>
- Chỉ số trên -
<SUP> ... </SUP>
Cú pháp là:
<P> This Is My 5 <SUP> th </SUP> Program Using HTML </P>
- Chỉ số dưới -
<SUB> ... </SUB>
Cú pháp là:
<P> H<SUB>2</SUB>O Is The Chemical Name For Water</P>
- Gạch ngang văn bản -
<STRIKE> </STRIKE>
Thẻ STRIKE được sử dụng để hiển thị đường gạch ngang văn bản trong trình duyệt. Thẻ này thường được sử dụng để đánh dấu văn bản
The syntax is:
<STRIKE> This Text Will Appear With Strike Effect </STRIKE>
- Văn bản định dạng trước - Các thẻ <PRE> và </PRE>
Nếu bạn muốn đoạn văn bản nào đó hiển thị trong cửa sổ trình duyệt với định dạng y như trong trình soạn thảo thì nên sử dụng thẻ định dạng văn bản trước.
Kết quả hiển thị đoạn mã HTML trên như hình
Kết quả của ví dụ 6
Đoạn mã HTML sau sẽ hiển thị một danh sách với các ký tự viết hoa do thuộc tính TYPE được thiết lập là "A" và bắt đầu từ "C" vì giá trị bắt đầu là 3. Đó là danh sách được bắt đầu từ ký tự thứ 3 trở đi
<HTML>
<BODY>
<H1>Countries</H1>
<OL START=3 TYPE="A">
<LI>AUSTRALIA</lI>
<LI>SOUTH AFRICA</LI>
<LI>ENGLAND</LI>
</OL>
</BODY>
</HTML>
Hình dưới đây hiển thị kết quả hiển thị ví dụ trên.
Kết quả của ví dụ 7
Sample
<HTML>
<HEAD>
<TITLE>Inserting an Image</TITLE>
</HEAD>
<H1><FONT SIZE=3 COLOR=DARKBLUE>
<B>Inserting an Image</B></FONT></H1>
<HR>
<BODY>
<IMG SRC="Sample.jpg">
</BODY>
</HTML>
Nếu thời gian cho phép, hãy thử tất cả các ví dụ trong chương này, chú ý đặc biệt đến danh sách và chèn hình ảnh vào tài liệu HTML
- Viết đoạn mã HTML để hiển thị văn bản sau với font chữ Impact, màu xám (gray)
The human face is a bigger challenge.
Gợi ý: sử dụng thẻ FONT.
- Viết đoạn mã HTML để hiển thị một đường kẻ ngang với mày xanh lá cây (green) và độ rộng chỉ 25%
Gợi ý: Sử dụng thẻ HR với thuộc tính WIDTH
- Viết đoạn mã HTML hiển thị trang web với văn bản màu xanh và màu nền là trắng
Gợi ý: Sử dụng thẻ BODY với thuộc tính TEXT và BGCOLOR.
- Chèn một hình ảnh vào một tài liệu HTML. Cung cấp một đoạn chú thích cho hình đó.
Gợi ý: Sử dụng thẻ IMG với thuột tính ALT
- Viết đoạn mã HTML để hiển thị văn bản sau sử dụng chỉ số trên
The Value of 2 to the power of 3 is:
23 = 8
- Viết đoạn mã HTML để hiển thị văn bản sau sử dụng chỉ số dưới
The Value of Log to the base 10 is:
Log10 = 1
- Viết đoạn mã HTML để chèn một hình ảnh vào trang web. Chú thích cho hình ảnh đó.
