Hướng dẫn học HTML cơ bản: Hướng Dẫn học HTML căn bản

1/ Định dạng HTML :

a) HTML là gì ?

- HTML là chữ viết tắt của Hyper Text Markup Language (Ngôn ngữ hiển thị siêu văn bản).

- HTML là một định dạng text chứa nhiều cặp tag.

- Những tag có nhiệm vụ báo cho trình duyệt biết trang web phải hiển thị như thế nào

- Một file HTML được lưu dưới dạng là .htm hoặc .html

- Một file HTML có thể được tạo bởi notepad, Adobe Dreamweaver, wordpress, ...

b) Chuẩn bị:

_Nếu bạn sử dụng Window hãy mở Notepad bằng cách Start => Run => (gõ)notepad => Enter

_Nếu bạn sử dụng Mac mở Simple Text.

_Với OSX bạn mở TextEdit và thay đổi lựa chọn sau: Select (trong cửa sổ preference) > Plain Text thay vì Rich Text và chọn "Ignore rich text commands in HTML files".

*Lưu ý: hoặc bạn cũng có thể tải một số phần mềm hổ trợ cho việc viết HTML như Adobe Dreamweaver,......

c) Cấu trúc của HTML :

_Thẻ đầu tiên trong một file HTML là <html>: Thẻ này có ý nghĩa báo cho trình duyệt biết đây là chỗ bắt đầu của tài liệu HTML

_Thẻ cuối cùng của một file HTML là</html>, thẻ này nói cho trình duyệt biết đây là điểm kết thúc của tài liệu HTML.

*Lưu ý: <ten_the> là thẻ mở, </ten_the>có thêm dấu " / " là thẻ đóng.

VD: <html>...</html> ; <head>...</head> ; .....

_Đa số thẻ đều có thẻ mở và thẻ đóng, chỉ trừ một số thẻ đặc biệt.

Và những thẻ có thẻ đóng thẻ mở gọi là thẻ đôi, và thẻ không cần thẻ đóng gọi là thẻ đơn.

2/ Một số thẻ HTML căn bản:

a) Một số thẻ quan trọng:

_ Sau đây là một số thẻ quan trọng trong HTML :

+<html> : đã giải thích ở trên ;

+<head>: thẻ này có tác dụng khai báo một số thông tin cho trình duyệt, không hiển thị lên web +<body>: thẻ này nó sẽ hiển thị nội dung của web

b) Một số thẻ khác:

*Thẻ đôi: là thẻ có thẻ mở và thẻ đóng. VD: <title>tiêu đề</title>

*Thẻ đơn: là thẻ không cần thẻ đóng

*Chú thích : Thẻ h1 -> h6: Thẻ h1 lớn hơn h2, h2 lớn hơn h3, .....,h5 lớn hơn h6

**Thẻ ghi chú (comment) : Lý do mình không đưa thẻ này lên cái bảng trên vì nó không được hiển thị lên trình duyệt, nó chỉ dùng để bạn ghi chú thôi, nó sẽ "ẨN" trên trình duyệt.
+ cấu trúc của thẻ :


c) Bố cục cơ bản của HTML:

_Dưới đây là bố cục cơ bản của một tài liệu html:

<html>

<head>

Cần khai báo cái gì cho trình duyệt thì vô đây.

</head>

<body>

Nội dung web thế nào thì cho vô đây.

</body>

</html>

d) Thử tí cho nóng đi :))

B1 : Mở notepad, Save As lại với tên "hoclamweb.html" hay gì cũng được miễn là phải có dạng " .html" . Nếu bạn muốn viết tiếng việt thì điều chỉnh phần Encoding từ "ANSI" thành "UTF-8"

B2 : Gõ mấy dòng code sau:

<html>

<head>

</head>

<body>

Trong này là đoạn văn:

<b>trong này nó đậm hơn.</b>

<i>ở đây thì nó nghiêng nè</i>

<u>còn chữ ở trong này thì có dấu gạch chân</u>

</p>

Trong này là đoạn văn: <br/>

<b>trong này nó đậm hơn.</b> <br/>

<i>ở đây thì nó nghiêng nè</i> <br/>

<u>còn chữ ở trong này thì có dấu gạch chân</u>

<br/>

</p>

</body>

</html>

*Bạn để có ý thấy 2 đoạn văn trên khác nhau ở đâu chứ. Khác ở chỗ đoạn văn dưới có thêm thẻ <br/>

B3 : Chạy thử đoạn code trên:

_Yeah !! VÀ ĐÂY LÀ THÀNH QUẢ !!

^.^ Và bài học thứ nhất đến đây là kết thúc !!
Hẹn gặp các bạn ở những bài sau .....

Nguồn : Kei-kun

Hướng dẫn học HTML cơ bản

Thứ Sáu, 1 tháng 5, 2015

Hướng Dẫn học HTML căn bản