HTML cơ bản

Trần Đức Lĩnh

Khái niệm: HTML viết tắt cho "HyperText Markup Language", lưu ý rằng nó chỉ là ngôn ngữ "Đánh dấu siêu văn bản", KHÔNG PHẢI LÀ NGÔN NGỮ ĐỂ LẬP TRÌNH!!!

HTML hoàn toàn khác biệt so với XML, một loại ngôn ngữ "Đánh dấu mở rộng". Mục đích của XML không nằm trong bài viết này, kham khảo qua wikipedia thông qua (XML là gì?).

Trong khi XML dùng để lưu dữ liệu thì HTML dùng để hiển thị dữ liệu.

HTML là điều bắt buộc phải biết nếu như muốn tiếp xúc, quản trị website. Nhưng đừng lo lắng, chỉ cần học 1 ngày có thể nắm cơ bản rồi.

Con cừu phía trên dễ thương nhỉ? Nếu biết rằng nó không phải là một bức ảnh động, không phải là một đoạn video, mà chỉ có những đoạn mã chưa tới 110 dòng, ít hơn cã một bài văn miêu tả chính nó thì sẽ như thế nào?

Vì thế, đừng sợ khi học HTML, những "chuyên mục -- bài viết" liên quan rồi hẵng sợ.

Chuyên mục liên quan: CSS, JavaScript.
Chuyên mục bổ trợ: Màu sắc và thiết kế, Đồ họa website.

1) Khai báo HTML (Declaration).

Đơn giản và dễ hiểu thôi, các phiên bản OS (Operating-System) trên thiết bị di động, các phần mềm của facebook luôn cập nhật, thì HTML cũng vậy.

Từ HTML (1991), HTML+ (1993), HTML 2.0 (1995), HTML 3.2 (1997),...HTML 5.0 (2012), HTML 5.3 (2018)... Thì người dùng sử dụng nhiều vẫn là HTML 5.0.

Cú pháp khai báo, nhận biết HTML 5.0.

<!DOCTYPE html>

2) Các thẻ tiêu đề (Headings).

Chỉ có 6 thẻ tiêu đề trong HTML từ <h1> đến <h6>. Thẻ đóng-mở.

Tiêu đề 1

Tiêu đề 2

Tiêu đề 3

Tiêu đề 4

Tiêu đề 5
Tiêu đề 6

Cú pháp.

<h1>Tiêu đề 1</h1>
    <h2>Tiêu đề 2</h2>
    <h3>Tiêu đề 3</h3>
    <h4>Tiêu đề 4</h4>
    <h5>Tiêu đề 5</h5>
    <h6>Tiêu đề 6</h6>

Liên quan trong Microsoft Word

  • Font size (Ctrl + Shift + P)

3) Thẻ chứa văn bản (Paragraphs).

Các đoạn văn bản được bao bọc bởi thẻ <p>. Thẻ đóng-mở.

Give me a second I I need to get my story straight My friends are in the bathroom getting higher than the Empire State My lover she's waiting for me just across the bar My seat's been taken by some sunglasses asking about a scar, and I know I gave it to you months ago I know you're trying to forget...

Cú pháp

<p>
    Give me a second I
    I need to get my story straight
    My friends are in the bathroom getting higher than the Empire State
    My lover she's waiting for me just across the bar
    My seat's been taken by some sunglasses asking about a scar, and
    I know I gave it to you months ago
    I know you're trying to forget...
</p>

Liên quan trong Microsoft Word

  • Như viết văn bản thông thường.

4) Thẻ chứa đường dẫn (Links).

Trong HTML, thẻ chứa đường dẫn sẽ là thẻ <a>. Thẻ đóng-mở.

  • Có vẻ cần lưu ý, thẻ này cần 1 thuộc tính kèm theo:

    • href="..." : Nơi gán đường dẫn.

Cú pháp.

<a href="https://www.youtube.com/watch?v=Sv6dMFF_yts">Fun.: We Are Young ft. Janelle Monáe</a>

Liên quan trong Microsoft Word

  • Add a Hyperlink (Ctrl + K).

5) Thẻ lấy hình ảnh

Lấy ảnh trong HTMl sẽ là thẻ <img>. Thẻ đóng.

  • Có vẻ cần lưu ý, thẻ này cần 2 - 4 thuộc tính kèm theo:

    • src="...png/jpg" : Nơi chứa đường dẫn đến bức ảnh.
    • alt="..." : Nếu không lấy được ảnh thông qua đường dẫn, đoạn văn bản sẽ thay thế bức ảnh.
    • width="..." : Chiều rộng bức ảnh.
    • height="...." : Chiều dài bức ảnh.
Image Error

Cú pháp.

<img src="https://i.pinimg.com/280x280_RS/9b/ac/5d/9bac5d9a9d805d04b8e9d03c265d23c9.jpg"
    alt="Image Error" 
    width="80px" 
    height="80px"/>

Liên quan trong Microsoft Word

  • INSERT > Pictures.

6) Thẻ gạch ngang (Horizontal Rules).

Thẻ gạch ngang là một đườn thẳng tách ngang trong văn bản, trong HTMl sẽ là <hr/>. Thẻ đóng.

Give me a second I


I need to get my story straight

Cú pháp.

<p>Give me a second I</p>
<hr/>
<p>I need to get my story straight</p>

Liên quan trong Microsoft Word

  • Border > Horizontal Line

7) Thẻ xuống dòng (Line Breaks).

Trong HTML thẻ này có dạng là <br/>. Thẻ đóng.

Give me a second I
I need to get my story straight
My friends are in the bathroom getting higher than the Empire State
My lover she's waiting for me just across the bar
My seat's been taken by some sunglasses asking about a scar, and
I know I gave it to you months ago
I know you're trying to forget...

Cú pháp.

<p>
    Give me a second I<br/>
    I need to get my story straight<br/>
    My friends are in the bathroom getting higher than the Empire State<br/>
    My lover she's waiting for me just across the bar<br/>
    My seat's been taken by some sunglasses asking about a scar, and<br/>
    I know I gave it to you months ago<br/>
    I know you're trying to forget...<br/>
</p>

8) Các thẻ định dạng chữ (Text Formatting).

Các thẻ định dạng chữ này thường đi chung với thẻ chứa văn bản <p>. Thẻ đóng-mở.

  • Các thẻ này trong HTML bao gồm:

    • <b> hoặc <strong> : In đậm hoặc quan trọng.
    • <i> hoặc <em> : Nghiêng hoặc nhấn nhá.

Give me a second I


I need to get my story straight


...


I know I gave it to you months ago

I know you're trying to forget...

Cú pháp.

<p>Give me a <b>second</b> I</p><br/>
<p>I need to get my <strong>story</strong> straight</p><br/>
<p>...</p><br/>
<p>I know I gave it to you <i>months</i> ago</p>
<p>I know you're <em>trying</em> to forget...</p>