Tài liệu giới thiệu các khái niệm cơ bản về HTML và thiết kế website, bao gồm thành phần của một trang web, kiến thức về tên miền, địa chỉ IP và kiến trúc client-server. Nó cũng mô tả quy trình thiết kế website từ phân tích yêu cầu đến triển khai và bảo trì, cùng với các công cụ hỗ trợ giúp viết mã HTML. Cuối cùng, tài liệu giải thích cấu trúc thẻ HTML, thuộc tính và các thành phần liên quan đến văn bản trong HTML.

1. BÀI 1
CƠ BẢN VỀ HTML

2. MỤC TIÊU BÀI HỌC
Những khái niệm về website:
Thành phần của trang web
Tên miền, địa chỉ IP
Client – server
Công việc thiết kế website
Những kiến thức cơ bản về HTML
Những khái niệm về website:
Thành phần của trang web
Tên miền, địa chỉ IP
Client – server
Công việc thiết kế website
Những kiến thức cơ bản về HTML
Slide 1 - Cơ bản về HTML 2

3. KHÁI NIỆM VỀ WEBSITE

4. KHÁI NIỆM VỀ WEBSITE
Tập hợp các trang web (webpages)
Chứa văn bản, đối tượng đồ họa
(âm thanh, hình ảnh, …)
Được lưu trữ trên máy chủ web
(web server)
Truy cập thông qua Internet và trình
duyệt web (phần mềm ở client)
Website
Slide 1 - Cơ bản về HTML 4
Truy cập thông qua Internet và trình
duyệt web (phần mềm ở client)
Cách thức hiển thị trang web: Web Client
(trình
duyệt)
Web Client
(trình
duyệt)
Web serverWeb server
HTML
URL
Máy chủ chứa web

5. TÊN MIỀN, ĐỊA CHỈ IP
Mỗi một máy tính tham gia vào mạng máy tính đều
được gán một địa chỉ IP. Các máy tính khác nhau sẽ
có địa chỉ IP khác nhau
Có 2 phiên bản địa chỉ IP: 32 bit và 64 bit
Tên miền là tên tương ứng với địa chỉ IP
Máy chủ DNS là nơi thực hiện nhiệm vụ ánh xạ giữa
tên miền và địa chỉ IP
Mỗi một máy tính tham gia vào mạng máy tính đều
được gán một địa chỉ IP. Các máy tính khác nhau sẽ
có địa chỉ IP khác nhau
Có 2 phiên bản địa chỉ IP: 32 bit và 64 bit
Tên miền là tên tương ứng với địa chỉ IP
Máy chủ DNS là nơi thực hiện nhiệm vụ ánh xạ giữa
tên miền và địa chỉ IP
Slide 1 - Cơ bản về HTML 5
64.233.181.9964.233.181.99 www.google.comwww.google.com
DNSDNS
Địa chỉ IP Tên miền

6. CLIENT – SERVER – WEB HOST
Client – Server là loại kiến
trúc thông dụng cho nhiều
loại ứng dụng mạng, trong
đó:
Server – máy chủ: Là máy
tính chuyên cung cấp tài nguyên,
dịch vụ cho máy tính khác.
Một máy chủ có thể được dùng
cho một hoặc nhiều mục đích
khác nhau. Phải được duy
trì kết nối internet 24h/ ngày
Client – máy trạm: Là máy tính khai thác các dịch vụ được cung cấp bởi
máy chủ. Việc khai thác này thường được thực hiện thông qua các phần
mềm
Client – Server là loại kiến
trúc thông dụng cho nhiều
loại ứng dụng mạng, trong
đó:
Server – máy chủ: Là máy
tính chuyên cung cấp tài nguyên,
dịch vụ cho máy tính khác.
Một máy chủ có thể được dùng
cho một hoặc nhiều mục đích
khác nhau. Phải được duy
trì kết nối internet 24h/ ngày
Client – máy trạm: Là máy tính khai thác các dịch vụ được cung cấp bởi
máy chủ. Việc khai thác này thường được thực hiện thông qua các phần
mềm
Slide 1 - Cơ bản về HTML 6

7. THIẾT KẾ WEBSITE

8. THIẾT KẾ WEBSITE
Xác định yêu
cầu & phân
tích
Tổ chức và
phác thảo
website
Bảo trì
Thiết kế
Graphic
Thiết kế
HTML/ CSS/ Js
Viết mã lập
trình
Kiểm thử
Triển khai
Slide 1 - Cơ bản về HTML 8
Thiết kế website

9. THIẾT KẾ WEBSITE
Xác định yêu cầu và phân tích:
Là quá trình thu thập và phân tích chi tiết tất cả các
yêu cầu liên quan đến website cần xây dựng
Mục tiêu là trả lời cho các câu hỏi sau:
• Mục đích của website là gì ?
• Đối tượng sử dụng website ?
• Website bao gồm các nội dung gì, liên kết giữa các nội
dung ra sao ?
• Yêu cầu về hình thức cho website là gì ?
• …
Đưa ra sitemap (cấu trúc website) cho toàn bộ
website
Slide 1 - Cơ bản về HTML 9
Xác định yêu cầu và phân tích:
Là quá trình thu thập và phân tích chi tiết tất cả các
yêu cầu liên quan đến website cần xây dựng
Mục tiêu là trả lời cho các câu hỏi sau:
• Mục đích của website là gì ?
• Đối tượng sử dụng website ?
• Website bao gồm các nội dung gì, liên kết giữa các nội
dung ra sao ?
• Yêu cầu về hình thức cho website là gì ?
• …
Đưa ra sitemap (cấu trúc website) cho toàn bộ
website

10. THIẾT KẾ WEBSITE
Thiết kế Graphic:
Thiết kế là quá trình xác định rõ về mặt nội dung và
hình thức cho website
Sản phẩm của quá trình thiết kế Graphic:
• Thiết kế dạng prototype (phác thảo) giao diện cho từng
trang web (mock-up)
• Thiết kế mịn giao diện từng trang web (photoshop,
flash, firework, …)
Slide 1 - Cơ bản về HTML 10
Thiết kế Graphic:
Thiết kế là quá trình xác định rõ về mặt nội dung và
hình thức cho website
Sản phẩm của quá trình thiết kế Graphic:
• Thiết kế dạng prototype (phác thảo) giao diện cho từng
trang web (mock-up)
• Thiết kế mịn giao diện từng trang web (photoshop,
flash, firework, …)

11. THIẾT KẾ WEBSITE
Thiết kế HTML/ CSS/ Js:
Đây là giai đoạn kết nối giữa giai đoạn thiết kế và giai
đoạn viết mã cho trang web
Sử dụng mã HTML/ CSS/ Js … để chuyển giao diện
graphic của web sang dạng chuẩn HTML
Thực hiện đúng chuẩn trong bản thiết kế: kích thước
web, khoảng cách các thành phần trên trang web,
hình ảnh, …
Chạy trên trình duyệt: không xảy ra
hiện tượng xô lệch web
Slide 1 - Cơ bản về HTML 11
Thiết kế HTML/ CSS/ Js:
Đây là giai đoạn kết nối giữa giai đoạn thiết kế và giai
đoạn viết mã cho trang web
Sử dụng mã HTML/ CSS/ Js … để chuyển giao diện
graphic của web sang dạng chuẩn HTML
Thực hiện đúng chuẩn trong bản thiết kế: kích thước
web, khoảng cách các thành phần trên trang web,
hình ảnh, …
Chạy trên trình duyệt: không xảy ra
hiện tượng xô lệch web

12. THIẾT KẾ WEBSITE
Viết mã lập trình:
Sử dụng các công cụ hỗ trợ và ngôn ngữ lập trình để
tạo ra website theo như thiết kế
Slide 1 - Cơ bản về HTML 12

13. THIẾT KẾ WEBSITE
Kiểm thử:
Là quá trình kiểm tra tính năng, nội dung và giao diện
của các trang Web dựa trên các yêu cầu đã được phân
tích ở bước đầu tiên
Việc kiểm thử cần được thực hiện trên nhiều trình
duyệt web khác nhau, nhiều loại mạng khác nhau
Triển khai và bảo trì:
Triển khai là quá trình đưa website lên một Web
server cụ thể nào đó trên mạng
Bảo trì là công việc duy trì cập nhật nội dung/hình
thức của trang web
Slide 1 - Cơ bản về HTML 13
Kiểm thử:
Là quá trình kiểm tra tính năng, nội dung và giao diện
của các trang Web dựa trên các yêu cầu đã được phân
tích ở bước đầu tiên
Việc kiểm thử cần được thực hiện trên nhiều trình
duyệt web khác nhau, nhiều loại mạng khác nhau
Triển khai và bảo trì:
Triển khai là quá trình đưa website lên một Web
server cụ thể nào đó trên mạng
Bảo trì là công việc duy trì cập nhật nội dung/hình
thức của trang web

14. THIẾT KẾ WEBSITE
Công cụ thiết kế website:
Là các phần mềm hỗ trợ việc thiết kế website (giao
diện hình ảnh, mã)
Bao gồm các tính năng sau:
• Soạn thảo HTML
• Tạo giao diện trang Web theo kiểu WYSIWYG
• Chạy Website trên máy cục bộ
Các công cụ thông dụng:
• Adobe Dreamweaver
• PHPEditor
• Microsoft FrontPage
Slide 1 - Cơ bản về HTML 14
Công cụ thiết kế website:
Là các phần mềm hỗ trợ việc thiết kế website (giao
diện hình ảnh, mã)
Bao gồm các tính năng sau:
• Soạn thảo HTML
• Tạo giao diện trang Web theo kiểu WYSIWYG
• Chạy Website trên máy cục bộ
Các công cụ thông dụng:
• Adobe Dreamweaver
• PHPEditor
• Microsoft FrontPage

15. CƠ BẢN VỀ HTML

16. CƠ BẢN VỀ HTML
Là ngôn ngữ đánh dấu siêu văn bản (HyperText Markup
Language)
Là cơ sở hoạt động của web
Trình duyệt đọc và xử lý mã HTML để bố cục và định dạng cho
các thành phần (văn bản, hình ảnh, video, …) trên trang web
Xây dựng trên các thẻ dạng <>…</>:
Thẻ đóng và thẻ mở
Ví dụ: <html>…</html>
Tạo và chỉnh sửa HTML bằng các công cụ soạn thảo văn bản:
Notepad
TextEdit
Là ngôn ngữ đánh dấu siêu văn bản (HyperText Markup
Language)
Là cơ sở hoạt động của web
Trình duyệt đọc và xử lý mã HTML để bố cục và định dạng cho
các thành phần (văn bản, hình ảnh, video, …) trên trang web
Xây dựng trên các thẻ dạng <>…</>:
Thẻ đóng và thẻ mở
Ví dụ: <html>…</html>
Tạo và chỉnh sửa HTML bằng các công cụ soạn thảo văn bản:
Notepad
TextEdit
Slide 1 - Cơ bản về HTML 16

17. CƠ BẢN VỀ HTML
Cấu trúc thẻ & thuộc tính
HTML sử dụng thẻ hoặc từ khóa (đặt trong dấu < và >)
Thẻ mở kèm theo thẻ đóng: <body>…</body>
Thẻ đóng: <br />
Mã HTML
Slide 1 - Cơ bản về HTML 17
File BasicHTML.html trong
thư mục dw01lessons
Kết quả hiển thị

18. CƠ BẢN VỀ HTML
Cấu trúc trang HTML:
<!DOCTYPE html>: định nghĩa kiểu tài liệu, giúp trình duyệt hiển thị web
chính xác
<html>…</html>: nội dung mô tả trang web
<body>…</body>: hiển thị nội dung trang web
<h1>…</h1>: thẻ HTML, hiển thị nội dung như một nhóm
<p>…</p>: thẻ HTML, hiển thị nội dung như một đoạn văn bản
Phần mô tả
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>tiêu đề website</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Phần nội dung
Cấu trúc trang HTML:
<!DOCTYPE html>: định nghĩa kiểu tài liệu, giúp trình duyệt hiển thị web
chính xác
<html>…</html>: nội dung mô tả trang web
<body>…</body>: hiển thị nội dung trang web
<h1>…</h1>: thẻ HTML, hiển thị nội dung như một nhóm
<p>…</p>: thẻ HTML, hiển thị nội dung như một đoạn văn bản
Slide 1 - Cơ bản về HTML 18
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>tiêu đề website</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Phần nội dung

19. CƠ BẢN VỀ HTML
Viết mã HTML trên trình soạn
thảo Notepad
Viết mã HTML trên trình soạn
thảo Notepad
Slide 1 - Cơ bản về HTML 19
Trang web hiển thị trên trình
duyệt firefox
Trang web hiển thị trên trình
duyệt firefox

20. CƠ BẢN VỀ HTML
Phân cấp thẻ trong HTML:
Thẻ HTML tuân theo thứ tự phân cấp thẻ
<html>các thẻ khác nằm dưới</html>
Slide 1 - Cơ bản về HTML 20

21. NHỮNG THÀNH PHẦN CỦA HTML

22. NHỮNG THÀNH PHẦN CỦA HTML
Nguyên tắc chung khi làm việc với thành phần
HTML:
Sử dụng nguyên tắc thẻ mở, thẻ đóng
Nội dung hiển thị nằm giữa 2 thẻ
Một số thành phần không có nội dung hiển thị
Một số thành phần HTML bắt buộc phải có thuộc tính
Ví dụ:
Nguyên tắc chung khi làm việc với thành phần
HTML:
Sử dụng nguyên tắc thẻ mở, thẻ đóng
Nội dung hiển thị nằm giữa 2 thẻ
Một số thành phần không có nội dung hiển thị
Một số thành phần HTML bắt buộc phải có thuộc tính
Ví dụ:
Slide 1 - Cơ bản về HTML 22
Thẻ mở Nội dung hiển thị Thẻ đóng
<p> Đoạn văn bản hiển thị trên web </p>
<a href="default.htm"> Nhấn để tới trang chủ </a>
<br>

23. NHỮNG THÀNH PHẦN CỦA HTML
Thuộc tính của thành phần HTML:
Thuộc tính cung cấp thêm thông tin về một yếu tố
Thuộc tính luôn luôn quy định trong thẻ bắt đầu
Thuộc tính đến trong tên / cặp giá trị như: name="value”
Một số thuộc tính thường gặp của thành phần HTML:
<a href="http://www.w3schools.com">This is a link</a>
Thuộc tính của thành phần HTML:
Thuộc tính cung cấp thêm thông tin về một yếu tố
Thuộc tính luôn luôn quy định trong thẻ bắt đầu
Thuộc tính đến trong tên / cặp giá trị như: name="value”
Một số thuộc tính thường gặp của thành phần HTML:
Slide 1 - Cơ bản về HTML 23
Thuộc tính Định nghĩa
class Quy định một hay nhiều lớp thuộc tính cho thành phần (liên
quan tới CSS)
id Chỉ định duy nhất một thuộc tính id cho thành phần (liên quan
tới CSS)
Style Xác định các thuộc tính dạng CSS Inline cho thành phần
title Quy định cụ thể thông tin thêm cho thành phần (dạng tooltips)

24. THÀNH PHẦN LÀM VIỆC VỚI VĂN BẢN
Một số thành phần HTML làm việc với văn bản:
HTML Headings
HTML Paragraphs
HTML Text Formatting
HTML Links
Một số thành phần HTML làm việc với văn bản:
HTML Headings
HTML Paragraphs
HTML Text Formatting
HTML Links
Slide 1 - Cơ bản về HTML 24

25. THÀNH PHẦN LÀM VIỆC VỚI VĂN BẢN
HTML Headings:
Được sử dụng để định nghĩa thành phần tiêu đề
Được định nghĩa từ thẻ <h1> đến <h6>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
HTML Headings:
Được sử dụng để định nghĩa thành phần tiêu đề
Được định nghĩa từ thẻ <h1> đến <h6>
Slide 1 - Cơ bản về HTML 25
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

26. THÀNH PHẦN LÀM VIỆC VỚI VĂN BẢN
HTML Paragraphs:
Tài liệu HTML được chia thành nhiều đoạn
Đoạn được định nghĩa bởi cặp thẻ <p></p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
HTML Paragraphs:
Tài liệu HTML được chia thành nhiều đoạn
Đoạn được định nghĩa bởi cặp thẻ <p></p>
Slide 1 - Cơ bản về HTML 26
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

27. THÀNH PHẦN LÀM VIỆC VỚI VĂN BẢN
HTML Text Formatting:
Sử dụng <b> and <i> cho định dạng đầu ra, như
dạng bold, italic
<p><b>This text is bold</b></p>
<p><strong>This text is
strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer
output</code></p>
<p>This is_subscript and
^superscript</p>
Slide 1 - Cơ bản về HTML 27
<p><b>This text is bold</b></p>
<p><strong>This text is
strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer
output</code></p>
<p>This is_subscript and
^superscript</p>

28. THÀNH PHẦN LÀM VIỆC VỚI VĂN BẢN
HTML Links:
Sử dụng <a> để định nghĩa dạng siêu liên kết (link)
Liên kết có thể sử dụng thông qua một từ, cụm từ, hình ảnh, khi xảy
ra sự kiện click sẽ chuyển tới tài liệu khác
Theo mặc định, các liên kết sẽ xuất hiện như sau trong tất cả các
trình duyệt:
• Một liên kết unvisited được gạch dưới và màu xanh
• Một liên kết đã xem được gạch dưới và màu tím
• Một hoạt động liên kết được gạch dưới và màu đỏ
HTML Links:
Sử dụng <a> để định nghĩa dạng siêu liên kết (link)
Liên kết có thể sử dụng thông qua một từ, cụm từ, hình ảnh, khi xảy
ra sự kiện click sẽ chuyển tới tài liệu khác
Theo mặc định, các liên kết sẽ xuất hiện như sau trong tất cả các
trình duyệt:
• Một liên kết unvisited được gạch dưới và màu xanh
• Một liên kết đã xem được gạch dưới và màu tím
• Một hoạt động liên kết được gạch dưới và màu đỏ
Slide 1 - Cơ bản về HTML 28
<a href="http://www.w3schools.com"
target="_blank">Visit
W3Schools.com!</a>

29. TỔNG KẾT
Trang web là một trang nội dung, có thể chứa: ký tự,
hình ảnh, âm thanh, flash và các đối tượng đồ họa
khác. Hầu hết các trang web được trình bày dựa trên
chuẩn HTML
HTML là ngôn ngữ đánh dấu siêu văn bản (HyperText
Markup Language), là cơ sở của trang web
Khi sử dụng HTML cần tuân thủ theo luật phân cấp
thẻ
Khi thiết kế website, nên bắt đầu bằng việc tạo một
site tương ứng với nó trước
Trang web là một trang nội dung, có thể chứa: ký tự,
hình ảnh, âm thanh, flash và các đối tượng đồ họa
khác. Hầu hết các trang web được trình bày dựa trên
chuẩn HTML
HTML là ngôn ngữ đánh dấu siêu văn bản (HyperText
Markup Language), là cơ sở của trang web
Khi sử dụng HTML cần tuân thủ theo luật phân cấp
thẻ
Khi thiết kế website, nên bắt đầu bằng việc tạo một
site tương ứng với nó trước
Slide 1 - Cơ bản về HTML 29