Tài liệu: Thực hành sử dụng các thẻ html cơ bản

Tài liệu
Hà Nội Aptech

Tóm tắt nội dung

Thực hành sử dụng các thẻ html cơ bản
Thực hành sử dụng các thẻ html cơ bản

Nội dung

Mục tiêu bài học

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.

  1. 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:\)
  2. Chạy chương trình Notepad bằng cách kích vào nút “Start” và chọn “Accessories”.
  3. Gõ đoạn mã ở ví dụ 1
  4. Kích vào File chọn Save As
  5. 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

  1. Lưu nó trong thư mục đăng nhập của mình
  2. Chạy Internet Explorer.
  3. Kích vào File → Open, chọn Browse và chọn file từ thư mục D:\HTML-DHTML-JS-Examples

Thực hiện trong 1h30’ đầu

Một đoạn mã HTML đặt tiêu đề ở giữa trình duyệt
                Aligning the heading at the center           

ON LINE EXAM

Kết quả của ví dụ 2

Đoạn mã HTML kết hợp thẻ font, thẻ ngắt, thẻ đoạn và các thuộc tính củ a chúng.
                HTML Code to incorporate different tags                     

To specify the beginning of the paragraph and the end of paragraph, <P> and </P> tag is used.

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

Các thẻ được sử dụng trong đoạn mã HTML ở trên:

  • ...

Trong thẻ TITLE được hiển thị trên thanh tiêu đề của cửa sổ trình duyệt

  • ...

Để tạo đoạn.

Thẻ

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 đó.

  •  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

  •  and 

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

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
Viết đoạn mã HTML để canh lề phải một khối văn bản bằng cách sử dụng thẻ DIV
    

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.

Kết quả của ví dụ 4

Tạo một dòng kẻ, với kích thước bằng nữa kích thước của cửa sổ và có độ dày là 5 pixels
               

Horizontal Rule that is half the size of the window and with a thickness of 5 pixels


Kết quả hiển thị như hình

Kết quả của ví dụ 5

Viết đoạn mã HTML để kết hợp tất cả các thẻ định dạng được thảo luận sau đây:
< html>               

This Is My 7 th Program Using HTML

H2O Is The Chemical Name For Water

                    ********** *********               * **               * * *               ********** *********               ***               ***               ********** *********                 
This Text Will Appear With Strike Effect

This Is My 7 th Program Using HTML

H2O Is The Chemical Name For Water

                     ********** *********                * **                * * *                ********** *********                ***                ***                ********** *********                  
This Text Will Appear With Strike Effect
  • Chỉ số trên -
     ... 

Cú pháp là:

This Is My 5 th Program Using HTML

  • Chỉ số dưới -
     ... 

Cú pháp là:

H2O Is The Chemical Name For Water

  • Gạch ngang văn bản -
      

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:

 This Text Will Appear With Strike Effect      
  • Văn bản định dạng trước - Các thẻ

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

Một danh sách có sắp xết bắt đầu từ C và được in hoa.

Đ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

                

Countries

  1. AUSTRALIA
  2. SOUTH AFRICA
  3. ENGLAND

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

Để chèn một hình ảnh vào tài liệu HTML

Sample

                Inserting an Image                 

Inserting an Image


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

Thực hiện trong 1h30’ tiếp theo

  1. 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.

  1. 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

  1. 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.

  1. 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

Tự thực hành

  1. 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

  1. 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

  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 đó.



Nguồn: voer.edu.vn/m/thuc-hanh-su-dung-cac-the-html-co-ban/e8904e8e


Chưa có phản hồi
Bạn vui lòng Đăng nhập để bình luận