I. HTML File Paths
Đường dẫn của tài liệu HTML mô tả vị trí của một tập tin trong một cấu trúc thư mục của trang web.
Các đường dẫn tệp được sử dụng khi liên kết tới các tệp bên ngoài như:
- Trang web
- Hình ảnh
- CSS
- JavaScript
1. Đường dẫn tuyệt đối (Absolute File Paths)
Là một đường dẫn đầy đủ đến tập tin
<img src="https://site.com/images/picture.jpg" alt="Mountain">2. Đường dẫn tương đối
Một đường dẫn tập tin tương đối trỏ đến một tệp liên quan đến trang hiện tại. Đường dẫn tương đối được sử dụng khá nhiều khi lưu trữ file trên hosting tránh trường hợp di chuyển file làm sai đường dẫn
Giả sử tôi có một sơ đồ thư mục như sau
\----root
+---html_1.html
+---images
+---picture.jpg
+---html
+---picture.jpg
+---html_2.html
+---images
+---picture.jpg
* Với trang html_1.html
- Gọi đến file ảnh
Cách 1:
<img src="/images/picture.jpg" alt="Mountain">dấu / trước images trỏ đến thư mục gốc (root) của trang web. Tiếp theo sẽ là images/picture.jpg đúng theo đường dẫn. Nói đơn giản src="/ sẽ trở về thư mục root rồi tiếp tục khai triển
Cách 2:
<img src="images/picture.jpg" alt="Mountain"> <img src="html/picture.jpg" alt="Mountain"> <img src="html/images/picture.jpg" alt="Mountain">Trong trường hợp không có dấu / File html_1.html, thư mục images, thư mục html cùng nằm trong thư mục root. Đường dẫn tương đối bắt đầu từ tên thư mục cùng cấp với file html_1.html rồi tiếp tục khai triển
* Với trang html_2.html
Tương tự để bắt đầu từ thư mục root
<img src="/images/picture.jpg" alt="Mountain">Với thư mục cùng cấp
<img src="picture.jpg" alt="Mountain"> <img src="images/picture.jpg" alt="Mountain">Trở ra trước 1 thư mục
<img src="../images/picture.jpg" alt="Mountain">Trở ra trước 2 thư mục
<img src="../../images/picture.jpg" alt="Mountain">Nắm được vững đường dẫn tương đối sẽ giúp ích cho bạn rất nhiều trong code dự án. Bạn có thể thực hành trên pc của mình ví dụ ổ C thư mục root là C:\
II. HTML Head
- Phần tử <head> vùng chứa cho siêu dữ liệu (HTML Metadata)
- Siêu dữ liệu HTML là dữ liệu về tài liệu HTML. Siêu dữ liệu không được hiển thị.
- Siêu dữ liệu thường xác định tiêu đề tài liệu, tập hợp ký tự, kiểu, liên kết, tập lệnh, và các thông tin meta khác.
- Các thẻ sau đây mô tả siêu dữ liệu: <title>, <style>, <meta>, <link>, <script>, và <base>.
1. Phần từ <title>
- Định nghĩa một tiêu đề trong tab trình duyệt
- Cung cấp một tiêu đề cho trang khi nó được thêm vào mục yêu thích
- Hiển thị một tiêu đề cho trang trong kết quả công cụ tìm kiếm
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> The content of the document...... </body> </html>2. Phần tử <style>
Phần tử này đã được nhắc đến, dùng để viết css trực tiếp trong tài liệu HTML
3. Phần tử <link>
Phần tử này dùng để gọi đến file css từ nguồn bên ngoài vào tài liệu HTML
4. Phần tử <meta>
Phần tử <meta> được sử dụng để xác định bộ ký tự nào được sử dụng, mô tả trang, từ khoá, tác giả và các siêu dữ liệu khác.
Siêu dữ liệu được sử dụng bởi các trình duyệt (cách hiển thị nội dung), bằng các công cụ tìm kiếm (từ khoá) và các dịch vụ web khác
Xác định bộ ký tự sử dụng
<meta charset="UTF-8">Xác định mô tả trang web của bạn
<meta name="description" content="Free Web tutorials">Xác định từ khoá cho công cụ tìm kiếm
<meta name="keywords" content="HTML, CSS, XML, JavaScript">Xác định tác giả của một trang
<meta name="author" content="John Doe">Làm mới tài liệu mỗi 30 giây
<meta http-equiv="refresh" content="30">Phần tử này đặc biệt quan trọng trong việc SEO trang web
5. Viewport
HTML5 giới thiệu một phương pháp để cho phép các nhà thiết kế web kiểm soát khung nhìn, thông qua thẻ <meta>.
Chế độ xem là khu vực có thể nhìn thấy của người dùng trong một trang web. Nó thay đổi theo thiết bị và sẽ nhỏ hơn trên điện thoại di động so với trên màn hình máy tính. Khai báo như sau
<meta name="viewport" content="width=device-width, initial-scale=1.0">Phần width = device-width đặt chiều rộng của trang theo chiều rộng màn hình của thiết bị (sẽ khác nhau tùy thuộc vào thiết bị).
Phần đầu ban đầu = 1.0 phần thiết lập mức độ phóng ban đầu khi trang được trình duyệt tải lần đầu tiên.
Phần tử này đã được giới thiệu, dùng để viết code js
7. Phần tử <base>
Phần tử này như một khai báo biến, nó giúp ta xác định url cơ sở của trang web
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<base href="https://hung1001.github.io/image/" target="_blank">
</head>
<body>
<img src="1.jpg">
<p>Since we have specified a base URL, the browser will look for the image "1.jpg" at "https://hung1001.github.ios/images/1.jpg"</p>
<p><a href="https://hung1001.github.io">hung1001</a></p>
<p>The link above opens in a new window. This is because the base target is set to "_blank".</p>
</body>
</html>
8. Có thể bỏ những thành phần nào ?
Trong HTML5, bạn có thể bỏ đi <html>, <head> and <body>, tài liệu HTML vẫn hoạt động đúng, tuy nhiên điều đó là không nên 1 chút nào !
III. HTML Layouts
Trong HTML5 cung cấp cho bạn 1 số thẻ quy định nội dung bố cục trang web
Trong đó
- <header> - Định nghĩa tiêu đề, làm banner
- <nav> - Menu chính của trang
- <section> - được sử dụng để tạo thành một khu vực bao gồm những nội dung giống nhau
- <article> - được sử dụng cho các nội dung khép kín, độc lập
- <aside> - được sử dụng để chứa những thông tin bên cạnh nội dung chính
- <footer> - được sử dụng cho phần cuối trang hoặc hoặc phần cuối của một thẻ
- <chi tiết> - Xác định phần chi tiết bổ sung
- <summary> - Định nghĩa tiêu đề cho phần tử <details>
IV. HTML Responsive Web Design
Vậy để 1 trang web responsive cần làm những gì ?
Cài đặt Viewport đã trình bày ở trên
<meta name="viewport" content="width=device-width, initial-scale=1.0">Responsive Ảnh
Nếu bạn sử dụng css cho ảnh với width:100%, ảnh sẽ được tự động kéo dãn
<img src="img_girl.jpg" style="width:100%;">Trong trường hợp bạn dùng max-width:100%, ảnh cũng sẽ được co dãn nhưng chỉ trong phạm vi chiều rộng của ảnh
<img src="img_girl.jpg" style="max-width:100%;height:auto;">Dùng thẻ <picture>
Vấn đề này đã được nhắc đến ở bài trước
Sử dụng media queries
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.left {
background-color: #2196F3;
padding: 20px;
float: left;
width: 20%;
/* The width is 20%, by default */
}
.main {
background-color: #f1f1f1;
padding: 20px;
float: left;
width: 60%;
/* The width is 60%, by default */
}
.right {
background-color: #4CAF50;
padding: 20px;
float: left;
width: 20%;
/* The width is 20%, by default */
}
/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
.left,
.main,
.right {
width: 100%;
/* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
<body>
<h2>Media Queries</h2>
<p>Resize the browser window.</p>
<p>Make sure you reach the breakpoint at 800px when resizing this frame.</p>
<div class="left">
<p>Left Menu</p>
</div>
<div class="main">
<p>Main Content</p>
</div>
<div class="right">
<p>Right Content</p>
</div>
</body>
</html>
Vấn đề này sẽ nói đến kỹ hơn khi đến bài cssV. HTML Computer Code Elements
HTML5 cung cấp các thẻ giúp hiển thị code để phân biệt với văn bản thường
1. Thẻ <kbd>
Đại diện cho đầu vào nhập từ người dùng như bàn phím
<!DOCTYPE html> <html> <body> <h2>The kbd Element</h2> <p>The kbd element represents user input:</p> <p>Save the document by pressing <kbd>Ctrl + S</kbd></p> </body> </html>2. Thẻ <samp>
Dùng để thể hiện đầu ra của chương trình
<!DOCTYPE html> <html> <body> <h2>The samp Element</h2> <p>The samp element represents output from a program or computing system:</p> <p>If you input wrong value, the program will return <samp>Error!</samp></p> </body> </html>3. Thẻ <code>
Dùng để biểu diễn đoạn code
<!DOCTYPE html> <html> <body> <h2>The code Element</h2> <p>Programming code example:</p> <code> x = 5; y = 6; z = x + y; </code> </body> </html>Chú ý thẻ code không giữ nguyên định dạng văn bản, để giữ nguyên định dạng bạn cần đặt cặp thẻ code vào trong cặp thẻ pre đã được đề cập ở bài viết trước
4. Thẻ <var>
Dùng cho biến
<!DOCTYPE html> <html> <body> <h2>The var Element</h2> <p>Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.</p> </body> </html>Đón đọc các bài viết tiếp theo...
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên