Bài 2: Các thẻ HTML cơ bản | eCode | Đào tạo lập trình và marketing online

Headings (Tiêu đề)

Phần tử này được sử dụng để trình bày tiêu đề cho phần nội dung hiển thị trên trang web.

Những phần tiêu đề được hiển thị to và in đậm hơn để phân biệt chúng với các phần còn lại của văn bản. Chúng ta cũng có thể hiển thị phần tiêu đề theo một trong sáu kích thước từ h1 đến h6. Tất cả những gì chúng ta làm là định rõ kích thước h1, h2… Thẻ H1 dành cho các tiêu đề quan trọng nhất và giảm dần đến h6

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Thẻ khối <span>, <div>

Có những trường hợp chúng ta muốn chia văn bản trong một trang web thành những khối thông tin logic khi đó phần tử div và span được sử dụng để nhóm nội dung lại với nhau. Thẻ div rất thường được sử dụng trong thiết kế layout website.

Phần tử div dùng để chia tài liệu thành các thành phần có liên quan với nhau.
Phần tử span dùng để định nghĩa nội dung trong dòng(in-line) còn phần tử div dùng để định nghĩa nội dung mức khối (block-level)

Ví dụ:

<html>
  <head>
    <title>Learning HTML</title>
  </head>
  <body>
    <div>
       division 1
    <p>The div element is used to group elements</p>
    <p>Typically, div is used for block level elements</p>
    </div>
    <div align="right">
       division 2
    <p>This is a second division
    </p>
    <h2>Are you having fun?</h2>
	</div>
    <p>The second division is right aligned.
    <span>Common formatting</span> is applied to all the elements in the division
    </p>
  </body>
</html>

Danh sách không thứ tự

Đây là loại danh sách đơn giản nhất mà bạn có thể thêm vào tài liệu HTML. Danh sách không thứ tự là một “bulleted list”. Các mục được bắt đầu bằng dấu chấm tròn “bullet”. Danh sách không thứ tự được nằm trong cặp thẻ <ul>…</ul>. Mỗi mục trong danh sách được đánh dấu bằng thẻ <li>. li được viết tắt của từ list Item. Thẻ kết thúc </li> là tùy chọn (không bắt buộc).

Ví dụ:

 <ul>
      <li>Monday</li>
      <li>Tuesday</li>
      <li>Wednesday</li>
      <li>Thursday</li>
      <li>Friday</li>
</ul>

Danh sách có thứ tự

Danh sách có thứ tự nằm trong cặp thẻ <ol>…</ol>. Danh sách có thứ tự cũng hiển thị các mục danh sách. Sự khác nhau là các mục danh sách hiển thị theo thứ tự được tạo ra một cách tự động.

Ví dụ:

<ol>
      <li>Monday</li>
      <li>Tuesday</li>
      <li>Wednesday</li>
      <li>Thursday</li>
      <li>Friday</li>
</ol>

Danh sách định nghĩa

Danh sách định nghĩa được dùng để tạo ra một danh sách các điều khoản và các định nghĩa của chúng. Danh sách định nghĩa nằm trong cặp thẻ <dl>…</dl>. Thẻ <dt> được dùng để chỉ ra điều khoản còn thẻ <dd> được dùng để chỉ ra định nghĩa cho điều khoản đó.

Ví dụ:

<dl>
      <dt>Sunday</dt>
      <dd>The first day of the week</dd>
      <dt>HTML</dt>
      <dd>HyperText Markup Language</dd>
      <dt>Internet</dt>
      <dd>A network of networks</dd>
      <dt>TCP/IP</dt>
      <dd>Transmission Control Protocol / Internet Protocol</dd>
</dl>

Thẻ đường ngang <hr>

Thẻ <hr>(horizontal rule) được dùng để kẻ một đường ngang trên trang. Nó chỉ có thẻ bắt đầu, không có thẻ kết thúc và không có nội dung.

Sử dụng font

Thẻ <FONT> dùng để điều khiển sự hiển thị văn bản trên trang web. Chúng ta cũng có thể chỉ định các thuộc tính như kích thước, màu sắc, kiểu…

Chúng ta có thể đặt các thuộc tính <FONT> cho cả tài liệu bằng cách đặt phần tử vào bên trong thẻ <BODY>. Ngoài ra, thuộc tính FONT có thể đặt cho từng từ, từng block trong trang.

Thuộc tính	Mô tả
COLOR	Được dùng để chỉ màu của font. Chúng ta có thể dùng tên màu hoặc giá trị thập phân để xác định màu.
SIZE	Được dùng để chỉ kích thước của font. Chúng ta có thể xác định các kích thước FONT từ 1 cho đến 7. Kích thước lớn nhất là 7 và nhỏ nhất là 1. Chúng ta có thể dùng một kích thước chuẩn và chỉ ra những kích thước tiếp theo liên quan đến kích thước chuẩn. Ví dụ, nếu kích thước chính là 3, thì SIZE=+4 sẽ tăng lên 7 SIZE=-1 sẽ giảm xuống 2
FACE	Được dùng để chỉ định kiểu font (phông chữ)

Các thuộc tính của FONT có thể kết hợp trong cùng một thẻ.

Sử dụng màu sắc

Chúng ta có thể thêm màu vào trang và vào các phần tử trong trang. COLOR là thuộc tính có thể được sử dụng với nhiều phần tử như phần tử FONT và BODY.

Có 3 kiểu màu chính: đỏ, xanh và xanh da trời. Mỗi màu chính được xem như một bộ hai số của hệ 16.

#RRGGBB

Số thập lục phân 00 chỉ 0% của màu trong khi đó số thập lục phân FF chỉ 100% của màu. Giá trị cuối cùng là một mã sáu chữ số chỉ màu.

Mã thập lục phân	Màu
#FF0000	Red
#00FF00	Green
#0000FF	Blue
#000000	Black
#FFFFFF	White

Ví dụ:

<html>
  <head>
    <title>Learning HTML</title>
  </head>
  <body>
    <h2>
      <font color="LIMEGREEN">Welcome to HTML</font>
    </h2>
    <p>
      <font color="red">This is good fun</font>
    </p>
  </body>
</html>

Sử dụng hình ảnh trong tài liệu HTML

Ngày nay có nhiều định dạng đồ họa đang được sử dụng. Tuy nhiên, trên Web có khác đôi chút. Ba định dạng đồ họa thông thường được hiển thị trên hầu hết các trình duyệt là:

Ảnh GIF (Graphics Interchange Format) (.GIF): là định dạng thông thường nhất được dùng trong những tài liệu HTML. Những file GIF được định dạng không phụ thuộc vào định dạng nền và hỗ trợ 256 màu. Ưu điểm của các file GIF là khá dễ để chuyển tải, ngay cả kết nối sử dụng MODEM tốc độ chậm
Ảnh JPEG (Joint Photographic Expert Group) (.JPEG): là một định dạng ảnh nén mất thông tin. Điều này có nghĩa là ảnh sau khi bị nén không giống như ảnh gốc. Tuy nhiên trong quá trình phát lại thì ảnh tốt gần như ảnh gốc. Khi bạn lưu một file với định dạng JPG, bạn có thể định tỉ lệ nén. Tỉ lệ càng cao thì ảnh càng ít giống ảnh gốc. JPEG hỗ trợ hơn 16 triệu màu và thường được sử dụng cho các ảnh có màu thực.

Cả hai file ảnh dạng JPEG (đuôi mở rộng là .jpg) và các dạng GIF đều nén ảnh để đảm bảo chế độ chuyển tải qua internet được nhanh hơn. Ảnh JPG có thể được nén nhiều hơn nhưng chậm hơn trong quá trình hiển thị so với ảnh .GIF. Có lẽ đó là lý do tại sao ảnh .GIF được phổ biến trong tài liệu HTML.

PNG (Portable Network Graphics): định dạng cho một file PNG là “lossless” (không mất thông tin). Trong nén “lossless”, dữ liệu ảnh được nén mà không bỏ chi tiết. Các file PNG hỗ trợ ảnh màu thực và dải màu xám. Các file PNG cũng có thể được nén và chuyển qua mạng.

Khi quyết định định dạng đồ họa, chúng ta nên nhớ một vài yếu tố:

Chất lượng của ảnh – Chất lượng của ảnh có quan trọng trong quá trình hiển thị không?
Độ lớn dữ liệu – Kích cỡ file càng lớn thì thời gian truyền càng cao.
Các yêu cầu hiển thị - Ảnh hỗ trợ trong suốt, hiển thị tuần tự hay xen kẽ.

Chèn ảnh

Thẻ IMG dùng để chèn những ảnh vào trong tài liệu HTML. Chúng ta cũng có thể đặt thẻ IMG tại vị trí mà ảnh được hiển thị. Thẻ IMG không có nội dung, nó hiển thị nội dung bằng cách xác định thuộc tính SRC. Cú pháp là:

Trong đó SRC (source) là thuộc tính và giá trị là một URL, chỉ vị trí chính xác của file ảnh.

Đôi khi, chỉ hình ảnh không thể nói lên tất cả. Chúng ta cần phải cung cấp cho người dùng một vài giới thiệu về mục đích của hình ảnh. Bạn có thể canh lề ảnh cùng với văn bản.

Thuộc tính ALIGN của thẻ IMG có thể được sử dụng để điều chỉnh canh lề của ảnh với văn bản xung quanh.

Trong đó, vị trí của ảnh có thể là trên(TOP), dưới(BOTTOM), ở giữa(MIDDLE), trái(LEFT) hoặc phải(RIGHT).

Ví dụ:

<html>
  <head>
    <title>Logo Image</title>
  </head>
  <body>
    <h1>
      <font size="3" color="FORESTGREEN">
        <b>Inserting an Image</b>
      </font>
    </h1>
    <hr />
    <img src="https://www.google.com.vn/images/srpr/logo11w.png" alt="”Beautiful" />
  </body>
</html>