Ở bài trước mình đã giới thiệu cho các bạn html là gì rồi, cũng đã nói sơ qua về bố cục html được viết như thế nào. Ở bài này chúng ta cùng bắt đầu viết nhưng đoạn html cơ bản đầu tiên. Nội dung
Để viết được html cần công cụ gì?
Công cụ ở đây thì bạn có thể sử dụng notepad mặc định của windows để viết cũng được nhưng nếu viết bằng notepad thì khá khó khăn + mất thời gian rất nhiều, mà các thẻ còn không có màu để nhìn cho rõ nữa. Vậy nên mình khuyên bạn ít nhất thì cũng viết bằng notepad++, notepad++ là bản cải tiến của notepad, bạn có thể tải về dùng miễn phí tại đây.
Có rất nhiền công cụ để viết html như PHPdesigner, Dreamweaver, NetBeans, Sublime Text…. Trong số này thì cá nhân mình vẫn thích dùng Sublime Text, vì cơ bản nó nhẹ, nhìn đẹp, rất chuyên nghiệp mà còn hỗ trợ nhiều thứ trong lúc viết code, các công cụ còn lại khá nặng nề, đó là theo ý kiến cá nhân mình. Nếu bạn muốn dùng thử Sublime Text thì vào đây để tải về dùng nhé.
Viết những dòng html cơ bản đầu tiên
Trước tiên mình tạo 1 file index.html để ngoài desktop. Khi mở file này lên bằng trình duyệt thì nó sẽ trống trơn, không có gì cả:
Mình sẽ viết theo bố cục cơ bản ở như ở bài trước mình đã đề cập, bạn mở file mới tạo = công cụ viết code nhé, ở đây mình dùng Sublime Text.
Code:
Serie học HTML cơ bản Chào mừng bạn đến với Serie học HTML cơ bản của BlogIT.vn
OK, giờ bạn F5 lại trang lúc nãy sẽ thấy
Tuyệt vời phải không nào, nhưng như vậy thì đơn điệu quá phải không. Giờ làm như thế nào để chữ to nhỏ, màu sắc…
Bạn thử copy dòng code này vào rồi F5 lại trang nhé:
Serie học HTML cơ bản Chào mừng bạn đến với Serie học HTML cơ bản của BlogIT.vnĐây là bài thứ 2 trong serie học HTML cơ bản
Dòng chữ in đậm Dòng chữ in nghiêng Xuống dòng Dòng này có màu đỏ
Ta được:
Bạn thấy trong code mình có để các thẻ ,
,
,
…
Vậy các thẻ này là gì? Mời các bạn cùng xem bài tiếp theo nhé.
Lời kết:
Ở bài này mình chỉ hướng dẫn các bạn sử dụng công cụ để viết code với viết những đoạn văn bản đơn giản đầu tiên, bài sau mình sẽ giới thiệu các bạn các thẻ và thuộc tính cơ bản trong html.
Nội dung
- Quy ước [coding convention] viết code HTML5
- Cách thức viết code một cách thông minh
- Sử dụng đúng DOCTYPE
- Sử dụng chữ viết thường cho tên các phần tử
- Cách viết không tốt:
- Cách viết rất không tốt:
- Cách viết tốt:
- Luôn sử dụng thẻ đóng cho tất cả các phần tử HTML
- Thẻ đóng rỗng cho các phần tử HTML
- Sử dụng chữ thường cho tên các thuộc tính
- Sử dụng nháy kép cho các giá trị thuộc tính
- Thuộc tính image
- Khoảng trắng và dấu bằng
- Tránh code dài trên một dòng
- Lùi đầu dòng và cách dóng
- Cách dòng và lùi đầu dòng như ví dụ dưới đây là không cần thiết:
- Cách viết tốt hơn:
- Ví dụ về Table:
- Ví dụ về danh sách:
- Các bạn có đặt ra câu hỏi nếu thiếu thẻ và ?
- Ví dụ:
- Điều gì sẽ xảy ra nếu thiếu thẻ ?
- Ví dụ:
- Thẻ Meta
- Các chú thích trong HTML
- Style Sheets
- Liên kết JavaScript trong HTML
- Truy cập vào các thành phần HTML bằng JavaScript
- Ví dụ:
- Viết thường tên các tệp tin
- Phần mở rộng của tệp tin
- Sự khác biệt giữa .htm và .html
- Khác biệt về mặt kỹ thuật
Quy ước [coding convention] viết code HTML5
Là một lập trình viên có bao giờ bạn đặt ra câu hỏi liệu cách thức viết code cũng như cú pháp mà mình sử dụng liệu đã theo đúng chuẩn HTML?
Vào giữa khoảng thời gian từ năm 2000 đến 2010, nhiều lập trình viên đã chuyển cách viết từ HTML sang XHTML.
Với XHTML đòi hỏi các lập trình viên phải viết code đúng cú pháp một cách nghiêm ngặt [well-formed].
HTML5 có cách
thức viết tự do hơn nên bạn cần phải tự tạo cho mình thói quen viết code theo đúng chuẩn.
Cách thức viết code một cách thông minh
Một điều dễ thấy trong sự thông minh của lập trình viên đó là họ sử dụng quy tắc viết code theo đúng chuẩn, chính vì thế người khác có thể dễ dàng hiểu và sử dụng code HTML của bạn.
Trong tương lai, những bộ máy tìm kiếm và phân tích có thể sẽ muốn đọc các
trang HTML của bạn. Vì một trang web tốt là một trang web: “Cho phép dữ liệu được chia sẻ và tái sử dụng trên các ứng dụng, các doanh nghiệp và cộng đồng”.
Sử dụng cú pháp gần với chuẩn XHTML sẽ là một lựa chọn thông minh của các lập trình viên.
Hãy luôn hình thành cho mình cách thức viết code của bạn thông minh, gọn gàng và đúng chuẩn định dạng.
Sử dụng đúng DOCTYPE
Luôn luôn khai báo DOCTYPE ở dòng đầu tiên trong đoạn code của bạn:
Nếu bạn muốn đồng nhất các thẻ khác trong đoạn code, bạn có thể viết thường!
Sử dụng chữ viết thường cho tên các phần tử
HTML5 cho phép bạn có thể sử dụng cả chữ hoa và chữ thường cho tên các phần tử.
Nhưng chúng tôi khuyên bạn nên sử dụng chữ viết thường cho tên các phần tử, bởi vì:
- Kết hợp cả chữ hoa và chữ thường sẽ không đẹp mắt.
- Các lập trình viên hay sử dụng chữ viết thường bởi rất giống chuẩn XHTML.
- Viết thường nhìn đoạn code sẽ rõ ràng hơn.
- Viết chữ thường sẽ nhanh và dễ dàng hơn.
Cách viết không tốt:
This is a paragraph.
Cách viết rất không tốt:
This is a paragraph.
Cách viết tốt:
This is a paragraph.
Luôn sử dụng thẻ đóng cho tất cả các phần tử HTML
Trong HTML5, bạn không cần phải sử dụng thẻ đóng cho tất cả phần tử [ Ví dụ: thẻ
].
Nhưng chúng tôi khuyên bạn nên sử dụng thẻ đóng cho tất cả các phần tử:
Cách viết không tốt:
This is a paragraph.
This is a paragraph.
Cách viết tốt:
This is a paragraph.
This is a paragraph.
Thẻ đóng rỗng cho các phần tử HTML
Trong HTML5, bạn có thể tùy ý đóng các phần tử rỗng.
Bạn có thể viết:
Bạn cũng có thể viết:
Sử dụng dấu gạch chéo [/] là bắt buộc trong XHTML và XML.
Nếu bạn muốn những phần mềm đọc XML có thể hiểu được trang của bạn, ý tưởng tốt nhất là giữ cả thẻ đóng của phần tử.
Sử dụng chữ thường cho tên các thuộc tính
HTML5 cho phép bạn có thể sử dụng cả chữ thường và chữ hoa cho tên các thuộc tính.
Nhưng chúng tôi khuyên bạn nên sử dụng chữ thường cho tên các thuộc tính:
- Kết hợp cả chữ hoa và chữ thường sẽ không đẹp mắt.
- Các lập trình viên hay sử dụng chữ viết thường bởi [rất giống chuẩn XHTML].
- Viết thường nhìn đoạn code sẽ rõ ràng hơn.
- Viết chữ thường sẽ nhanh và dễ dàng hơn.
Cách viết không tốt:
Cách viết tốt:
Sử dụng nháy kép cho các giá trị thuộc tính
HTML5 cho phép bạn gán giá trị cho các thuộc tính mà không cần dấu ngoặc.
Nhưng
chúng tôi khuyên bạn nên sử dụng dấu nháy kép cho các giá trị thuộc tính:
- Bạn cần sử dụng dấu nháy kép nếu giá trị chứa dấu cách.
- Lúc dùng dấu nháy kép, lúc không điều này tạo một thói quen không tốt cho người lập trình.
- Để giá trị trong dấu ngoặc sẽ dễ đọc và phân biệt hơn.
Ví dụ dưới không chạy vì thuộc tính class chứa giá trị có khoảng trắng:
Ví dụ này sẽ chạy khi:
Thuộc tính image
Luôn sử dụng thuộc tính alt với các ảnh chèn vào trang web. Đây là việc rất quan trọng khi hình ảnh chèn không hiển thị và cũng là cách để các máy tìm kiếm có thể dễ dàng tìm được nội dung ảnh bạn định nói gì.
Nên xác định kích thước các bức ảnh. Nó sẽ không làm trang web của bạn bị nhấp nháy vì trình duyệt có thể giữ chỗ không gian cho bức ảnh trước khi nó được nạp.
Khoảng trắng và dấu
bằng
Các khoảng trắng có thể đặt ở hai đầu dấu bằng
Nhưng nếu không để khoảng trắng sẽ làm cho đoạn code của bạn dễ đọc và các thuộc tính trở nên rõ ràng hơn:
Tránh code dài trên một dòng
Khi bạn sử dụng một trình soạn thảo HTML, nếu có một dòng code quá dài bạn sẽ phải trượt thanh cuận sang phải hoặc sang trái để có thể đọc hết dòng code đó. Điều này không hay chút nào.
Hãy cố gắng
tránh những dòng code dài hơn 80 ký tự.
Lùi đầu dòng và cách dóng
Không nên thêm dòng trống vào đoạn code nếu không cần thiết.
Để dễ đọc, thêm dòng trống để tách các đoạn code dài hoặc phân cách hợp lý giữa các thẻ.
Để dễ đọc, bạn có thể sử dụng 2 dấu cách để lùi đầu dòng. Không nên sử dụng TAB
Không thêm dòng trống hoặc dấu cách khi không cần thiết, nhất là khi gặp những dòng code ngắn hoặc những đoạn
code liên quan đến nhau. Chúng không thực sự cần thiết để tách tất cả các phần tử:
Cách dòng và lùi đầu dòng như ví dụ dưới đây là không cần thiết:
Famous Cities
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
Cách viết tốt hơn:
Famous Cities
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
Ví dụ về Table:
Name
Description
A
Description of A
B
Description of B
Ví dụ về danh sách:
- London
- Paris
- Tokyo
Các bạn có đặt ra câu hỏi nếu thiếu thẻ và ?
Theo chuẩn HTML5, bạn có thể không cần sử dụng thẻ và thẻ .
Đoạn code dưới đây vẫn hoàn toàn hợp lệ trong HTML5
Ví dụ:
Page Title
This is a heading
This is a paragraph.
Tuy nhiên chúng tôi khuyên bạn không nên bỏ thẻ và thẻ.
Phần tử
là khung của trang. Trong đó bạn có thể khai báo ngôn ngữ mà bạn đang dùng trong trang:
Việc khai báo một ngôn ngữ rất quan trọng đối với các công cụ tìm kiếm và các ứng dụng khi truy cập trang web của bạn.
Bạn có thể bỏ qua thẻ và tuy nhiên nó có thể làm treo DOM và phần mềm XML
Việc bỏ qua thẻ có thể khiến trang web của bạn gặp phải lỗi của các trình duyệt cũ[ các phiên bản IE9].
Điều gì sẽ xảy ra nếu thiếu thẻ ?
Theo chuẩn HTML5, bạn có thể bỏ qua thẻ .
Theo mặc định, trình duyệt sẽ tự động thêm thẻ trước thẻ .
Bạn có thể làm giảm việc phức tạp khi viết các các đoạn code HTML, bằng cách bỏ qua thẻ :
Ví dụ:
Page Title
This is a heading
This is a paragraph.
Việc bỏ bớt các thẻ dường như không quen thuộc với các lập trình viên. Tuy
nhiên chúng ta cần thời gian để làm quen với việc này.
Thẻ Meta
Phần tử là bắt buộc phải có trong HTML5. Bạn hãy đặt tên tiêu đề càng ý nghĩa càng tốt:
HTML5 Syntax and Coding Style
Để đảm bảo các công cụ tìm kiếm tìm trang của bạn một cách chuẩn xác, hãy thiết lập ngôn ngữ và các kí tự mã hóa mà trang sử dụng ở ngay những dòng đầu tiên của trang:
HTML5 Syntax and Coding Style
Các chú thích trong
HTML
Với các chú thích ngắn trên một dòng bạn nên sử dụng thẻ ở cuối dòng:
Với các chú thích dài, được viết trên nhiều dòng, bạn nên sử dụng cặp thẻ
Những chú thích dài sẽ dễ nhìn hơn, nếu bạn lùi đầu dòng bằng 2 dấu cách.
Style Sheets
Bạn có thể sử dụng các cú pháp đơn giản để liên kết với tệp tin CSS [không cần thiết
phải sử dụng thuộc tính type]:
Trong CSS, những đoạn code ngắn có thể gộp thành một dòng như thế này:
p.into {font-family: Verdana; font-size: 16em;}
Những đoạn code dài nên được viết thành nhiều dòng:
body {
background-color: lightgrey;
font-family: “Arial Black”, Helvetica, sans-serif;
font-size: 16em;
color: black;
}
- Đặt dấu mở ngoặc trên cùng dòng với thẻ cần trang trí.
- Sử dụng một dấu cách trước dấu ngoặc mở.
- Sử dụng 2 dấu cách để lùi đầu dòng các
thuộc tính bên trong.
- Sử dụng dấu 2 chấm và một dấu cách để tách biệt phần thuộc tính và giá trị.
- Sử dụng dấu cách sau dấu phẩy hoặc dấu chấm phẩy.
- Sử dụng dấu chấm phẩy sau mỗi cặp “thuộc tính/giá trị”.
- Chỉ sử dụng dấu ngoặc cho giá trị nếu trong giá trị có chứa dấu cách.
- Đặt dấu ngoặc đóng ngoặc ở một dòng riêng biệt, phía trước không có dấu cách.
- Không nên sử dụng 80 ký tự trên cùng một dòng.
Thêm dấu cách phía sau dấu phẩy
hoặc dấu chấm phẩy là quy tắc chung cho tất cả các loại văn bản.
Liên kết JavaScript trong HTML
Bạn có thể sử dụng cú pháp đơn giản để liên kết với tệp tin JavaScript [không cần thiết phải sử dụng thuộc tính type]:
Truy cập vào các thành phần HTML bằng JavaScript
Hậu quả của việc sử dụng những kiểu HTML “lộn xộn” có thể dẫn
đến các lỗi khi sử dụng JavaScript.
Ở ví dụ dưới đây cho thấy, cách đặt tên khác nhau sẽ tạo ra các kết quả khác nhau trong JavaScript:
Ví dụ:
This is paragraph 1.
This is paragraph 2.
// Only paragraph 2 will be overwritten
document.getElementById["demo"].innerHTML = "HELLO.";
Nếu có thể, hãy sử dụng các quy ước đặt tên giống nhau[như JavaScript] trong HTML
Viết thường tên các tệp tin
Hầu hết các máy chủ web [Apache, Unix] phân biệt chữ hoa và chữ thường với các tệp tin:
Một ảnh: là london.jpg không
thể truy cập được với tên là London.jpg.
Những máy chủ web khác [Microsoft, IIS] không phân biệt chữ hoa và chữ thường:
london.jpg có thể truy cập bằng tên London.jpg hoặc london.jpg.
Nếu bạn chuyển trang web từ một máy chủ không phân biệt chữ hoa và chữ thường sang một máy chủ phân biệt chữ hoa và chữ thường, có thể dẫn tới một vài lỗi nhỏ khiến cho trang web của bạn xuất hiện lỗi.
Để tránh dẫn tới những lỗi này, hãy luôn sử dụng chữ thường cho tên tệp tin
[nếu có thể].
Phần mở rộng của tệp tin
Các tệp tin HTML nên có phần mở rộng là .html [hoặc .htm].
Các tệp tin CSS nên có phần mở rộng là .css
Các tệp tin JavaScript nên có phần mở rộng là .js
Sự khác biệt giữa .htm và .html
Không có sự khác biệt nào giữa hai phần mở rộng .htm và .html. Trình
duyệt và máy chủ sẽ làm việc với cả 2 phần mở rộng như là một trang HTML.
Điểm khác biệt:
.htm là do “kế thừa” từ hệ điều hành DOS, khi mà phần mở rộng bị giới hạn là 3 ký tự.
.html là do “kế thừa” từ hệ điều hành Unix không bị giới hạn 3 ký tự.
Khác biệt về mặt kỹ thuật
Khi bạn truy cập vào một địa chỉ mà không có tên tệp tin [ví dụ //timoday.edu.vn/html/], website sẽ tự động hiển thị tệp tin mặc định. Tệp tin
mặc định phổ biến là index.html, index.htm, default.html và default.htm.
Nếu website của bạn đã được cấu hình tên tệp tin mặc định là “index.html”, bạn phải đặt tên tệp tin là “index.html”, không được đặt là “index.htm.”
Tuy nhiên, thông thường các website sẽ được cấu hình nhiều tệp tin mặc định thay vì sử dụng một, thậm chí bạn có thể tự cấu hình tệp tin mặc định khi cần thiết.
Dù vậy, phần mở rộng đầy đủ của một tệp tin HTML là .html và không có lý do gì để bạn không sử dụng
phần mở rộng này.
Chủ Đề