Bài 3: Đặt tên tập tin, thẻ và phần tử HTML

Bài 3: Đặt tên tập tin, thẻ và phần tử HTML
html, css, html can ban

Bắt đầu bước chân đầu tiên trong một hành trình dài, đầu tiên sẽ học và làm việc với HTML.

Trong phần này sẽ tìm hiểu về các nội dung sau:
- Tạo một trang web đơn giản (tổng quan về HTML)
- Định dạng văn bản
- Liên kết
- Hình ảnh
- Bảng
- Form
- Các vấn đề liên quan đến HTML khác

Tạo một trang web đơn giản (tổng quan về HTML)

 
Như đã biết, làm web là làm ra một trang web (web page), một website hoặc một ứng dụng web (web application, web app).
Giờ sẽ tự tay làm một trang web, sau khi làm, sẽ rút ra được các kiến thức sau:
- Muốn làm trang web thì cần những gì
- Làm như thế nào
- Làm sao để xem kết quả
- HTML là gì
- Thẻ HTML (HTML tag) là gì
- Phần tử HTML (HTML element) là gì
- Thuộc tính HTML (HTML attribute) là gì
- Cấu trúc của một trang HTML
- Quá trình xử lý mã HTML diễn ra như thế nào
- Một số khái niệm liên quan khác

Để bắt đầu, sẽ làm một trang web đơn giản, đây là trang web tĩnh, trang web này chỉ có nội dung là một đoạn thơ.

Chuẩn bị nội dung cho trang web

Nhập nội dung

 
Mở chương trình Notepad, nhập vào nội dung sau (lưu ý nhập đúng nội dung, đúng định dạng):
 
NGAY DAU TIEN DI HOC
Ngay dau tien di hoc
Me dat tay den truong
Em vua di vua khoc
Me do danh ben em
Tac gia: Vien Phuong
 
Lưu lại thành tập tin index.html
 
Vào trình đơn File\Save của Notepad, lưu lại thành tập tin, để trong ổ đĩa\thư mục bất kì, tốt nhất là tạo một thư mục mới có tên là hoc-lam-web để lưu tập tin, đặt tên tập tin là index.html. Chú ý: khi lưu, để chắc chắn phần mở rộng của tập tin là “.html” chứ không phải là “.html.txt” thì trong lúc lưu, tới phần nhập tên cho tập tin, mục File name, nhớ bao phần tên và phần mở rộng bằng dấu nháy kép (“”), ví dụ “index.html”.
 
Cách đặt tên thư mục/tập tin
Việc đặt tên thư mục/tập tin theo quy ước giúp hình thành tính cẩn thận, tính chuyên nghiệp, dễ dàng làm việc với các thành viên khác trong nhóm và hạn chế việc phát sinh các lỗi không đáng có.
Sau đây là một số quy ước nên theo:
- Sử dụng phần mở rộng của tập tin (filename extension) chính xác, ví dụ các tập tin HTML sẽ có phần mở rộng là .html, hoặc hình ảnh thì sẽ có phần mở rộng là .gif, .png, .jpg hoặc .jpeg.
- Không đặt tên thư mục/tập tin có dấu tiếng Việt, có thể đặt tên tập tin bằng tiếng Anh, hoặc tiếng Việt không dấu, ví dụ login.html hoặc dang-nhap.html.
- Không nên đặt tên thư mục/tập tin có chứa khoảng trắng, với các tên gồm nhiều từ thì nên nối các từ đó bằng kí tự gạch nối (-) (hyphen), hoặc gạch chân ( _ ) (underline, underscore), ví dụ dang-nhap.html hoặc dang_nhap.html
- Không sử dụng các kí tự đặc biệt (special characters) để đặt tên, ví dụ không sử dụng các kí tự sau: %, ?, #, /, :, ;, *. Nên đặt tên bằng các kí tự thông thường (letter), kí số (number), dấu gạch nối, dấu gạch chân, dấu chấm.
- Một số hệ thống có phân biệt chữ hoa và chữ thường, ví dụ DANG-NHAP.htmlsẽ khác với dang-nhap.html vì vậy nên sử dụng toàn bộ là chữ thường.
- Tên tập tin nên đặt ngắn gọn, giúp dễ đọc, dễ quản lý.
- Tự lựa chọn và hình thành cho mình phong cách đặt tên cho chuyên nghiệp, thống nhất, điều này giúp việc lập trình dễ dàng hơn, ví dụ sẽ ít bị gõ sai tên các tập tin khi cần tham chiếu đến nó.
 
Thử mở tập tin index.html bằng trình duyệt
 
Để mở tập tin index.html bằng trình duyệt, chỉ cần bấm đúp chuột (double click) vào tập tin index.html, hoặc bấm chuột phải vào tập tin, chọn Open with, chọn một trình duyệt bất kì, nội dung là đoạn thơ sẽ xuất hiện trên trình duyệt.
 
Tuy nhiên, để ý là, mặc dù trong cửa sổ soạn thảo Notepad, phần nội dung đã được ngắt dòng rồi, nhưng kết quả thì không như vậy, tất cả nằm trên cùng một dòng nối tiếp nhau.
 
Những thứ sẽ bị trình duyệt bỏ qua khi hiển thị
- Chuỗi khoảng trắng (spaces): khi gặp một chuỗi khoảng trắng (nhiều khoảng trắng liên tiếp), trình duyệt sẽ chỉ ghi nhận khoảng trắng đầu tiên để hiển thị, các khoảng trắng sau đó sẽ bị bỏ qua
- Kí hiệu xuống hàng (line break, carriage return): khi gặp kí tự xuống hàng (hoặc nhiều kí tự xuống hàng liên tiếp), trình duyệt sẽ chuyển thành một khoảng trắng.
- Các tab cũng được chuyển thành một khoảng trắng
- Vì đặc tính bỏ qua chuỗi khoảng trắng, kí hiệu xuống hàng, và tab, nên phần văn bản hoặc các phần tử nội tuyến (inline element) khác sẽ được đặt cạnh nhau, liên tục, và chỉ bị ngắt dòng khi gặp một phần tử khối (block element) kế tiếp.
- Các thẻ (tag) mà trình duyệt không hiểu cũng bị bỏ qua. Tuy nhiên, một số trình duyệt sẽ xem nội dung của các thẻ mà nó không nhận ra là dạng văn bản thông thường và trình duyệt sẽ hiển thị nội dung này ra giao diện.
- Phần chú thích (comment) sẽ bị bỏ qua không hiển thị
 
[Kết quả]
 
NGAY DAU TIEN DI HOC Ngay dau tien di hoc Me dat tay den truong Em vua di vua khoc Me do danh ben em Tac gia: Vien Phuong
 
Rút ra được điều gì từ ba bước trên?
 
- Ba bước trên mới làm được một việc là nhập nội dung văn bản vào một tập tin, sau đó mở tập tin đó bằng trình duyệt để xem kết quả.
 
- Tuy nhiên, kết quả hiển thị tại trình duyệt lại không giống như khi ở cửa sổ Notepad, các dấu xuống hàng (line break) đã bị bỏ qua.
 
- Nếu chỉ thực hiện như ba bước vừa rồi thì không thể hiển thị nội dung lên trình duyệt một cách chuyên nghiệp, có bố cục, có định dạng và cấu trúc theo ý muốn, để làm được điều này cần sử dụng tới một công cụ để hiển thị nội dung lên trình duyệt, đó chính là HTML. Nội dung ở đây có thể là văn bản, hình ảnh, video, quy trình xử lý nghiệp vụ.
 
 
Vì vậy, bước tiếp theo sẽ bổ sung thêm một số thứ vào tập tin index.html, để biến nó trở thành một tài liệu HTML thực sự, từ đó có thể thực hiện định dạng phần nội dung theo ý muốn, và trình duyệt sẽ biết cách để hiển thị theo đúng các định dạng mà người lập trình đã đưa ra.
 
Văn bản là gì
Văn bản (text)[1] là những thứ có thể đọc được. Cụ thể hơn, văn bản chính là tập hợp các kí tự (letter) hoặc các từ (word) có ngữ nghĩa.
Trong thông tin và truyền thông[2], văn bản là từ, là câu, là đoạn, không bao gồm thông tin định dạng và được lưu dưới dạng mã ASCII (để máy tính có thể hiểu và xử lý được). Những thứ không phải là văn bản bao gồm: các đối tượng đồ họa (graphic), các số (không ở dạng ASCII), và mã chương trình (dạng nhị phân).
Ví dụ một đoạn văn bản,
[Words, sentences, paragraphs. This book, for example, consists of text. Text processing refers to the ability to manipulate words, lines, and pages. Typically, the term text refers to text stored as ASCII codes (that is, without any formatting). Objects that are not text include graphics, numbers (if they're not stored as ASCII characters), and program code.]
 
 
 
[1] https://en.wikipedia.org/wiki/Text
[2] https://www.webopedia.com/TERM/T/text.html
 

Cấu trúc cơ bản của một tài liệu HTML

Đ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.
 
Vậy phần tử HTML là gì?
 
Phần tử HTML (HTML element) là một thùng chứa (container), nó được sử dụng để chứa văn bản, và chứa các phần tử HTML khác.
 
Hiểu nôm na, vì là thùng chứa, nên nội dung bên trong của mỗi cái thùng này sẽ chịu tác động bởi hình thù của cái thùng. Mà hình thù của cái thùng được quyết định bởi nguyên liệu tạo ra cái thùng đó. Để tạo ra các thùng khác nhau, sử dụng nguyên liệu là các loại thẻ HTML. Để tạo ra một phần tử HTML (thông thường) chỉ cần sử dụng cặp thẻ HTML để bọc lại hai đầu.
 
Vậy thẻ HTML là gì?
 
Thẻ HTML (HTML tag) là các từ khóa (keyword), được sử dụng để báo cho trình duyệt biết cách định dạng và hiển thị các nội dung. Trình duyệt sẽ không hiển thị các từ khóa này ra ngoài giao diện. Thẻ HTML thường gồm hai phần: phần mở thẻ gọi là thẻ mở (opening tag, start tag) và phần đóng thẻ gọi là thẻ đóng (closing tag, end tag).
 
Xem hình minh họa cú pháp của một thẻ HTML thông thường,
 
 
 
 
Cũng có thể hiểu nôm na, HTML sẽ sử dụng các thẻ (tag)[1] để “đánh dấu” chỗ này là tiêu đề, chỗ khác là một đoạn văn bản, chỗ này sẽ hiển thị hình ảnh, chỗ khác sẽ hiển thị một video.
 
Để ý trong cú pháp của một thẻ sẽ thấy, thẻ mở và thẻ đóng của mỗi thẻ sẽ có “tên thẻ” giống nhau, chỉ khác nhau là trong thẻ đóng có thêm dấu xuyệt “/” (forward-slash). Ví dụ: <html></html>, hoặc <p></p>. Đừng nhầm dấu xuyệt (/) với dấu xuyệt ngược (\) (backslash).
 
Khi lập trình, nên viết tên thẻ ở dạng chữ thường, mặc dù trình duyệt không phân biệt chữ hoa và chữ thường. Ví dụ, nên viết thẻ là <strong> thay vì <Strong> hoặc <STRONG>. Khi viết thẻ mở thì viết luôn thẻ đóng, để tránh quên thẻ đóng, dễ sinh ra lỗi.
 
Như vậy với cặp thẻ HTML, chúng ta đã tạo ra được một cái thùng rỗng, giờ chỉ việc bỏ nội dung vào giữa cặp thẻ này để tạo ra các phần tử HTML.
 
Hình dưới đây là cú pháp một phần tử HTML thông thường (gọi là phần tử HTML thông thường vì còn có các phần tử HTML đặc biệt),
 
 
 
 
Như vậy, một phần tử HTML sẽ bắt đầu là thẻ mở, tới phần nội dung, và cuối cùng là thẻ đóng.
 
Thẻ HTML và phần tử HTML có là một?
 
Thẻ HTML (HTML tag) và phần tử HTML (HTML element) là hai khái niệm khác nhau, tuy thực tế, mọi người vẫn hay sử dụng để thay thế cho nhau. Nói chung, cả hai đều là những thứ để tạo ra một trang web. Tuy nhiên, thẻ HTML là công cụ để  tạo ra phần tử HTML.

Nguồn: LeGiaCong Blog