1: Notepad, giao thức file, khoảng trắng
Phần này sẽ trình bày một số vấn đề liên quan khác.
Để làm một trang web đơn giản, cần những gì
Để làm một trang web đơn giản cần ba thứ sau: ngôn ngữ viết mã (code), công cụ để viết mã, và công cụ để xem kết quả.
- Ngôn ngữ để viết mã là HTML
- Công cụ để viết mã là chương trình soạn thảo văn bản thô (plain text). Ví dụ: Notepad của Windows, TextEdit của Mac OS, Vi của Linux
- Công cụ để xem kết quả là trình duyệt, có thể sử dụng một trong các trình duyệt sau: Chrome, Firefox, Safari, Opera, Internet explorer
Tóm lại, để làm một trang web đơn giản, chỉ cần sử dụng Notepad để viết mã HTML, lưu lại thành một tập tin có phần mở rộng là .html. Sau đó, dùng trình duyệt để mở tập tin, và xem trang web kết quả.
Tại sao lại sử dụng Notepad để viết mã
Khi mới học làm web, nên sử dụng chương trình Notepad để viết mã. Nó có mấy cái lợi sau:
- Không phải đi kiếm đâu xa, máy tính chạy Windows nào cũng có Notepad
- Lập trình bằng Notepad bắt buộc phải gõ từng thẻ mở, thẻ đóng, do vậy mau nhớ ngôn ngữ HTML
- Người lập trình phải tự căn chỉnh việc xuống hàng, thụt đầu hàng cho các đoạn mã, từ đó nắm được cấu trúc của mã nguồn, bước đầu hình thành ý niệm về định dạng và tổ chức đoạn mã cho chuyên nghiệp
- Ngoài ra, nó còn tạo ra cảm giác thú vị, khi từ một đoạn mã có vẻ luộm thuộm, xấu xí, nhưng khi xem trên trình duyệt thì thấy nó đẹp không ngờ
- Người lập trình không phải bận tâm tìm hiểu cách sử dụng các phần mềm lập trình phức tạp, đôi khi làm che lấp đi bản chất, cách hoạt động vốn dĩ rất đơn giản của HTML
Giao thức File
Nếu chú ý trong khi dùng trình duyệt để mở trang web, địa chỉ của trang web (URL) trên thanh địa chỉ (address bar) sẽ không bắt đầu bằng “http://” hoặc “https://” như khi duyệt web thông thường, mà sẽ bắt đầu là “file://”, ví dụ như sau:
file:///C:/Users/Maxsys/Desktop/index.html
Tại sao vậy?
Lý do là: vì URL là một tham chiếu tới tài nguyên web, trong trường hợp này là tham chiếu tới một trang web. URL cho biết: vị trí của trang web trên hệ thống mạng và để lấy được trang web đó thì cần sử dụng giao thức gì. Vậy ở đây, trình duyệt đã không dùng giao thức http, hoặc https để lấy nội dung trang web mà dùng giao thức file.
Giao thức file[1] có tên đầy đủ là giao thức file URI, được đặc tả trong RFC 1630 và RFC 1738, sử dụng để truy cập và lấy về nội dung của thư mục hoặc tập tin bất kì. URI (Uniform Resource Identifier) – tạm dịch là “chuỗi định danh tài nguyên thống nhất” hay “chuỗi nhận dạng tài nguyên thống nhất”: là một chuỗi ký tự, được sử dụng để xác định, nhận dạng một tên hoặc một tài nguyên.
Ví dụ, trên máy tính đang chạy Windows, gõ dòng lệnh file:///C:/ vào cửa sổ Run và trình duyệt để xem kết quả.
Ví dụ khác, giả sử đã có tập tin index.html trong ổ đĩa C, gõ lệnh file:///C:/index.html vào cửa sổ Run và trình duyệt để xem kết quả.
Cú pháp của giao thức file[2] có dạng:
file://host/path
Trong đó,
- host là tên của máy tính dạng FQDN (tên miền dạng đầy đủ)
- path là đường dẫn thư mục
Nếu tham số host không được cung cấp, giao thức file sẽ ngầm hiểu là truy cập tại máy tính cục bộ (“localhost”), khi đó, cú pháp file://host/path sẽ bị lược bớt đi chữ host trở thành file:///path
Như vậy, khi mở một trang web bằng cách nhập vào đường dẫn kiểu như thế này: file:///C:/index.html, nghĩa là trình duyệt đã dùng giao thức file để truy cập và lấy về tập tin mã nguồn (index.html), sau đó sẽ biên dịch mã HTML và hiển thị nội dung của trang web.
Khoảng trắng
Như đã biết, khi biên dịch một tài liệu HTML, trình duyệt sẽ bỏ qua các kí tự xuống hàng và các khoảng trắng dư thừa. Nghĩa là, ba đoạn mã HTML sau sẽ cho ra cùng một kết quả:
Đoạn mã 1,
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<p>Xin chao</p>
</body>
</html>
Đoạn mã 2,
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<p>Xin chao</p>
</body>
</html>
Đoạn mã 3,
<!DOCTYPE html><html><head><title>My webpage</title></head><body><p>Xin chao</p></body></html>
Tuy nhiên, để viết mã chuyên nghiệp, nên chọn cách viết theo Đoạn mã 1. Cụ thể:
- Với các phần tử (trừ các phần tử rỗng), khi viết thẻ mở, thì viết luôn thẻ đóng, để tránh quên thẻ đóng, sẽ gây ra lỗi
- Các phần tử con sẽ được lùi một khoảng trắng (một tab) so với phần tử cha
- Luôn viết thẻ ở dạng chữ thường
2.1.10 Câu hỏi & bài tập
1. Phân biệt phần tử HTML và thẻ HTML?
2. Cho biết cấu trúc cơ bản của một tài liệu HTML5?
3. Cho biết tên tập tin nào sau đây hợp lệ? không hợp lệ? và lý do không hợp lệ?
Tên tập tin | Hợp lệ (đánh dấu x) | Không hợp lệ (đánh dấu x) | Lý do không hợp lệ |
Sunflower.html | |||
index.doc | |||
cooking home page.html | |||
Song_Lyrics.html | |||
games/rubix.html | |||
%whatever.html |
4. Các đoạn mã HTML sau bị lỗi gì? Sửa lại cho đúng.
a. <img "birthday.jpg">
b. <i>Congratulations!<i>
c. <a href="file.html">linked text</a href="file.html">
d. <p>This is a new paragraph<\p>
2.2 Hiển thị văn bản
Tới đây, đã có những khái niệm căn bản về cấu trúc của một tài liệu HTML và có thể tạo được một trang web đơn giản. Phần này sẽ tập trung vào việc hiển thị nội dung dạng văn bản của một trang web.
Để hiển thị văn bản, việc quan trọng là lựa chọn phần tử HTML cho phù hợp, Từ đó sẽ giúp trình duyệt có thể “hiểu” và hiển thị văn bản chính xác. Ngoài ra, việc sử dụng phần tử một cách hợp lý còn giúp trang web có thứ hạng cao trong kết quả của các trang tìm kiếm (ví dụ google) , được nhiều người biết đến, và các phần mềm phân tích nội dung có thể tự động phân tích trang web với độ chính xác cao.
Trong phần này sẽ đề cập đến các nội dung sau:
- Đoạn văn bản và đề mục
- Danh sách
- Phân vùng nội dung
- Div và span
- Các kí tự đặc biệt
2.2.1 Đoạn văn bản và đề mục
Đoạn văn bản
Theo nghĩa thông thường, đoạn văn bản (gọi tắt là đoạn) là tập hợp của nhiều câu, toàn bộ văn bản chính là tập hợp của các đoạn. Trong HTML, đoạn là một chuỗi các từ có chiều dài bất kì. Để tạo một đoạn, sử dụng phần tử p, đây là phần tử cơ bản nhất trong việc hiển thị văn bản. Chữ p là viết tắt của paragraph.
Lưu ý: tất cả nội dung văn bản đều phải được bọc lại bằng các phần tử, nếu không, phần văn bản đó sẽ không có ngữ nghĩa và người lập trình sẽ không thể kiểm soát được việc hiển thị.
Ở chế độ mặc định, phần tử p được hiển thị theo kiểu khối (block). Nghĩa là, nó sẽ luôn được hiển thị ở một hàng mới và sẽ chiếm toàn bộ chiều rộng khả dụng.
Phần tử p ngoài việc chứa văn bản (text), nó còn có thể chứa hình ảnh, các phần tử nội tuyến (inline); tuy nhiên, nó không thể chứa phần tử đề mục (heading), danh sách (list), phân vùng (sectioning), và các phần tử kiểu khối khác.
Ví dụ,
<p>Ngày đầu tiên đi học</p>
<p>Vậy, làm web là làm ra sản phẩm mà nó cung cấp các tài nguyên web cho người dùng. Sản phẩm này chính là các trang web được hiển thị trong các trình duyệt.</p>
Đề mục
Một văn bản không chỉ có các đoạn, hình ảnh, mà còn có hệ thống đề mục (hay hệ thống tiêu đề).
Đề mục (heading) là một từ, cụm từ, hoặc kí hiệu, giúp người đọc có thể tìm kiếm và định vị được thông tin.
Hệ thống đề mục thường gồm nhiều cấp khác nhau, thể hiện cấu trúc, bố cục hay bộ khung (outline) của một văn bản. Để dễ hiểu, hãy quan sát hệ thống heading trong Microsoft Word.
Để tạo đề mục, có thể sử dụng các phần tử: h1, h2, h3, h4, h5, h6. Đây là sáu loại đề mục khác nhau. Trong đó, phần tử h1 sẽ tạo ra đề mục mức cao nhất (heading level 1 – đề mục mức 1), h2 sẽ tạo ra đề mục mức 2, h3 sẽ tạo ra đề mục mức 3…v.v. Khi có các đề mục, trình duyệt sẽ sử dụng chúng để tạo ra bố cục cho văn bản. Các trang web tìm kiếm cũng sử dụng hệ thống đề mục trong thuật toán tìm kiếm của chúng.
Trong thực tế, nên sử dụng phần tử h1 cho đề mục mức cao nhất, sau đó tùy theo nội dung văn bản để sử dụng các đề mục mức thấp hơn.
Ví dụ,
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trang web dau tien</title>
</head>
<body>
<h1>1 Mở đầu</h1>
<h2>1.1 Về tài liệu này</h2>
<p>Tài liệu này thích hợp cho người chưa biết gì về làm web, và muốn học (hoặc tự học) để có thể theo nghề làm web.</p>
<h2>1.2 Làm web là làm gì</h2>
<p>Để trả lời câu hỏi “làm web là làm gì”, hãy bắt đầu từ nhu cầu của người sử dụng.</p>
<h1>2 HTML căn bản</h1>
<h2>2.1 Tạo một trang web đơn giản</h2>
<h3>2.1.1 Chuẩn bị nội dung cho trang web</h3>
<p>Bước 1. Nhập nội dung</p>
<p>Bước 2. Lưu lại thành tập tin index.html</p>
<h3>2.1.2 Cấu trúc cơ bản của một tài liệu HTML</h3>
<p>Điều quan trọng nhất cần biết là tài liệu HTML được tạo ra từ các phần tử HTML. Toàn bộ tài liệu HTML là tập hợp của rất nhiều các phần tử HTML khác nhau tạo thành.</p>
<h3>2.1.3 Thêm cấu trúc và ngữ nghĩa cho một tài liệu HTML</h3>
<p>Như đã biết, HTML là công cụ được sử dụng để hiển thị nội dung lên trình duyệt. Tuy nhiên, cần phải hiểu là HTML chỉ tập trung vào việc tổ chức nội dung sao cho nó có tính cấu trúc, có tính ngữ nghĩa. </p>
</body>
</html>
[Kết quả]
Đánh dấu kết thúc một chủ đề |
Để đánh dấu kết thúc một chủ đề/ý tưởng và chuyển sang chủ đề/ý tưởng khác, sử dụng phần tử hr, phần tử này sẽ tạo một đường kẻ ngang (horizontal rule) giữa hai chủ đề/ý tưởng. Ví dụ, [HTML] <h1>1 Mở đầu</h1> <h2>1.1 Về tài liệu này</h2> <p>Tài liệu này thích hợp cho người chưa biết gì về làm web, và muốn học (hoặc tự học) để có thể theo nghề làm web.</p> <h2>1.2 Làm web là làm gì</h2> <p>Để trả lời câu hỏi “làm web là làm gì”, hãy bắt đầu từ nhu cầu của người sử dụng.</p> <hr> <h1>2 HTML căn bản</h1> <h2>2.1 Tạo một trang web đơn giản</h2> [Kết quả]  |
.jpg)
.jpg)
0 Nhận xét