This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Monday, 2 April 2018

Season 2: HTML Tutorial


I. HTML Attributes (Thuộc tính HTML)

Tất cả các phần tử HTML có thể có thuộc tính
Thuộc tính cung cấp thông tin bổ sung về một phần tử
Thuộc tính luôn được chỉ định trong thẻ bắt đầu
Thuộc tính thường đi kèm trong cặp tên/giá trị như: name="value"


The href Attribute (Thuộc tính href)


Các liên kết HTML được định nghĩa bằng thẻ <a>. Địa chỉ liên kết được chỉ định trong thuộc tính href

<a href="#">This is a link</a>

The src Attribute (Thuộc tính src)


Ảnh trong HTML được định nghĩa bởi thẻ <img />. Đường dẫn của ảnh nằm trong thuộc tính src

<img src="img_girl.jpg">

Độ rộng và chiều cao của thuộc tính


Hình ảnh trong HTML có một tập các thuộc tính về chiều rộng (width) và chiều cao (height)

<img src="img_girl.jpg" width="400" height="500">

The alt Attribute (thuộc tính alt)


Thuộc tính alt quy định các văn bản thay thế sẽ được sử dụng, khi hình ảnh không thể được hiển thị. Giá trị của thuộc tính có thể được đọc bởi các trình đọc màn hình. Bằng cách này, ai đó sẽ "lắng nghe" trang web, ví dụ như một người mù, có thể "nghe" mà không thể nhìn thấy !

<img src="img_typo.jpg" alt="Girl with a jacket">

The style Attribute (Thuộc tính style)


Đây là thuộc tính viết css nhanh cho 1 thẻ HTML
<p style="color:red">I am a paragraph</p>

The lang Attribute (thuộc tính ngôn ngữ)


Ngôn ngữ của tài liệu HTML có thể được khai báo trong thẻ <html> qua thuộc tính lang. Việc mô tả ngôn ngữ của tài liệu rất quan trọng với các công cụ tìm kiếm hoặc trình đọc màn hình
<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

The title Attribute (thuộc tính tiêu đề)


Khi có thuộc tính này, kết hợp với việc di chuyển chuột tới vị trí thẻ chỉ định, ta sẽ thấy một đoạn trích dẫn nhỏ được hiển thị (tooltip)
<p title="I'm a tooltip">
This is a paragraph.
</p>

Tiêu chuẩn cho thuộc tính


HTML5 không phân biệt thuộc tính chữ hoa hay chữ thường, tuy nhiên bạn nên sử dụng chữ thường để đáp ứng chuẩn XHTML

Chuẩn HTML5 không yêu cầu cặp thẻ "" cho thuộc tính, nhưng bạn nên cần nó để đáp ứng chuẩn XHTML hoặc trường hợp nội dung thuộc tính có chứa dấu cách

Ví dụ: 
Bad:
<a href=https://www.facebook.com></a>

Good
<a href="https://www.facebook.com"></a>

Problem without quotes
<p title=About me>

Single or Double Quotes? (trích dẫn đơn hay kép) 


Nháy kép thường được dùng nhiều hơn, tuy nhiên trong một vài trường hợp nháy đơn cũng sẽ được sử dụng
<p title='John "ShotGun" Nelson'>
<p title="John 'ShotGun' Nelson">

Bảng thuộc tính


Attribute Description
alt Chỉ định văn bản thay thế cho hình ảnh, khi hình ảnh không thể hiển thị
disabled Chỉ định phần tử đầu vào bị vô hiệu hóa
href Chỉ định url cho liên kết
id Chỉ định ID duy nhất cho phần tử
src Chỉ định url cho hình ảnh
style Chỉ định css cho thẻ
title Chỉ định thêm thông tin về một phần tử

II. HTML Paragraphs

Đoạn trong HTML được quy định bởi thẻ <p>. Các trình duyệt sẽ tự động thêm một khoảng trắng trước và sau mỗi đoạn văn.

Hiển thị HTML


Bạn không thể chắc chắn HTML sẽ được hiển thị như thế nào. Màn hình lớn hoặc nhỏ, và cửa sổ thay đổi kích cỡ sẽ tạo ra các kết quả khác nhau.

Với HTML, bạn không thể thay đổi đầu ra bằng cách thêm các khoảng trắng hoặc xuống dòng bằng phím enter. Trình duyệt sẽ chỉ nhận dạng được xuống dòng với thẻ <br /> hoặc kết thúc thẻ <p>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser 
ignores it.
</p>

Đừng quên đóng thẻ 


Hầu hết trình duyệt vẫn hiển thị đúng ngay cả khi ta quên thẻ đóng, tuy nhiên nhìn thật khó chịu và không chuyên nghiệp
<p>This is a paragraph.
<p>This is another paragraph.

Phẩn tử <pre> 


Sử dụng phần tử này thì văn bản của bạn sẽ được giữ nguyên định dạng
<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>
III. HTML Styles 

 Dùng để định dạng màu sắc, font chữ.. cho phần tử HTML, vấn đề này sẽ được nói rõ hơn trong phần css vì đây là cách đơn giản để chèn css cho một phần tử

IV. HTML Text Formatting (thẻ định dạng văn bản) 

Trong HTML bạn có thể định dạng chữ đậm, chữ nghiêng, chữ gạch chăn,... bằng cách đặt chúng trong các cặp thẻ sau
  • <b> : Chữ đậm
  • <strong> : Chữ quan trọng
  • <i> : Chữ nghiêng
  • <em> : Chữ nhấn mạnh
  • <mark> : Chữ đánh dấu
  • <small> : Chữ nhỏ
  • <del> : Chữ đã bị xóa
  • <ins> : Chữ gạch chân
  • <sub> : Chỉ số dưới
  • <sup> : Chỉ số trên
  • <s> : Chữ gạch ngang
  • <u> : Chữ gạch chân
<!DOCTYPE html>
<html>

<body>
    <p>This text is normal.</p>
    <p><b>This text is bold.</b></p>
    <strong>This text is strong</strong>
    <i>This text is italic</i>
    <em>This text is emphasized</em>
    <h2>HTML <small>Small</small> Formatting</h2>
    <h2>HTML <mark>Marked</mark> Formatting</h2>
    <p>My favorite color is <del>blue</del> red. Example &lt;del&gt;</p>
    <p>My favorite <ins>color</ins> is red. Example &lt;ins&gt;</p>
    <p>This is <sub>subscripted</sub> text.</p>
    <p>This is <sup>superscripted</sup> text.</p>
    <p><s>My car is blue.</s></p>
    <p><u>Underline Text</u></p>
</body>

</html>
V. HTML Quotation and Citation Elements (Trích dẫn HTML)

HTML <q> for Short Quotations


Sử dụng thẻ <q> trình duyệt sẽ tự thêm cặp dấu "" với phần tử được chỉ định.
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

HTML <blockquote> for Quotations


Sử dụng <blockquote>, khi bạn cần trích dẫn 1 đoạn văn từ nguồn khác
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

HTML for Abbreviations 


Sử dụng cho cụm từ viết tắt
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

HTML for Contact Information 

 
Sử dụng để xác định thông tin liên hệ cho một người nào đó
<address>
Written by John Doe.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

HTML <cite>  for Work Title 


Dùng để định nghĩa tiêu đề
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML for Bi-Directional Override 


Dùng để ghi đè theo 2 chiều
<bdo dir="rtl">This text will be written from right to left</bdo>
To be contined ...
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js