File paths và head html

Công nghệ Lập trình HTML

27/09
Thạch
HTML
0
585

Các hướng dẫn xây dựng Web được tổ chức tốt và dễ hiểu với rất nhiều ví dụ về cách sử dụng HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML và hơn thế nữa.

Đường dẫn tệp HTML

Đường dẫn tệp mô tả vị trí của tệp trong cấu trúc thư mục của trang web.

Ví dụ về đường dẫn tệp

Con đường	Sự miêu tả
<img src = "picture.jpg">	Tệp "picture.jpg" nằm trong cùng thư mục với trang hiện tại
<img src = "images / picture.jpg">	Tệp "picture.jpg" nằm trong thư mục hình ảnh trong thư mục hiện tại
<img src = "/ images / picture.jpg">	Tệp "picture.jpg" nằm trong thư mục hình ảnh ở thư mục gốc của web hiện tại
<img src = "../ picture.jpg">	Tệp "picture.jpg" nằm trong thư mục một cấp so với thư mục hiện tại

Đường dẫn tệp HTML

Đường dẫn tệp mô tả vị trí của tệp trong cấu trúc thư mục của trang web.
Đường dẫn tệp được sử dụng khi liên kết với tệp bên ngoài, như:

trang web
Hình ảnh
Trang định kiểu
JavaScripts

Đường dẫn tệp tuyệt đối

Đường dẫn tệp tuyệt đối là URL đầy đủ của tệp:

Thí dụ

<img src="https://sinitc.com/images/picture.jpg" alt="Mountain">

Đường dẫn tệp tương đối

Đường dẫn tệp tương đối trỏ đến tệp liên quan đến trang hiện tại.
Trong ví dụ sau, đường dẫn tệp trỏ đến tệp trong thư mục hình ảnh nằm ở thư mục gốc của web hiện tại:

Thí dụ

<img src="/images/picture.jpg" alt="Mountain">

Trong ví dụ sau, đường dẫn tệp trỏ đến tệp trong thư mục hình ảnh nằm trong thư mục hiện tại:

Thí dụ

<img src="images/picture.jpg" alt="Mountain">

Trong ví dụ sau, đường dẫn tệp trỏ đến tệp trong thư mục hình ảnh nằm trong thư mục một cấp so với thư mục hiện tại:

Thí dụ

<img src="../images/picture.jpg" alt="Mountain">

Thực hành tốt nhất

Cách tốt nhất là sử dụng đường dẫn tệp tương đối (nếu có thể).
Khi sử dụng đường dẫn tệp tương đối, các trang web của bạn sẽ không bị ràng buộc với URL cơ sở hiện tại của bạn. Tất cả các liên kết sẽ hoạt động trên máy tính của riêng bạn (localhost) cũng như trên miền công cộng hiện tại và các miền công cộng trong tương lai của bạn.

HTML - Phần tử Head

HTML <head>yếu tố là một container cho các yếu tố sau: <title>, <style>, <meta>, <link>, <script>, và <base>.

Phần tử HTML <head>

Phần <head>tử là vùng chứa siêu dữ liệu (dữ liệu về dữ liệu) và được đặt giữa <html>thẻ và <body>thẻ.
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, bộ ký tự, kiểu, tập lệnh và các thông tin meta khác.

Phần tử <title> HTML

Phần <title>tử xác định tiêu đề của tài liệu. Tiêu đề phải ở dạng chỉ văn bản và nó được hiển thị trên thanh tiêu đề của trình duyệt hoặc trong tab của trang.
Phần <title>tử này là bắt buộc trong các tài liệu HTML!
Nội dung của tiêu đề trang rất quan trọng đối với việc tối ưu hóa công cụ tìm kiếm (SEO)! Tiêu đề trang được sử dụng bởi các thuật toán của công cụ tìm kiếm để quyết định thứ tự khi liệt kê các trang trong kết quả tìm kiếm.
Phần <title>tử:

xác định tiêu đề trong thanh công cụ của trình duyệt
cung cấp tiêu đề cho trang khi nó được thêm vào mục yêu thích
hiển thị tiêu đề cho trang trong kết quả của công cụ tìm kiếm

Vì vậy, hãy cố gắng đặt tiêu đề chính xác và ý nghĩa nhất có thể!
Một tài liệu HTML đơn giản:

Thí dụ

<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
</head>
<body>

The content of the document......

</body>
</html>

Phần tử HTML <style>

Phần <style>tử được sử dụng để xác định thông tin kiểu cho một trang HTML:

Thí dụ

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

Phần tử <link> HTML

Phần <link>tử xác định mối quan hệ giữa tài liệu hiện tại và tài nguyên bên ngoài.

Các <link> thẻ thường được sử dụng để liên kết đến các style sheet bên ngoài:

Thí dụ

<link rel="stylesheet" href="mystyle.css">

Phần tử <meta> HTML

Phần <meta>tử này thường được sử dụng để chỉ định bộ ký tự, mô tả trang, từ khóa, tác giả của tài liệu và cài đặt chế độ xem.
Siêu dữ liệu sẽ không được hiển thị trên trang, nhưng được sử dụng bởi các trình duyệt (cách hiển thị nội dung hoặc tải lại trang), bởi các công cụ tìm kiếm (từ khóa) và các dịch vụ web khác.

Các ví dụ

Xác định bộ ký tự được sử dụng:

<meta charset="UTF-8">

Xác định từ khóa cho công cụ tìm kiếm:

<meta name="keywords" content="HTML, CSS, JavaScript">

Xác định mô tả về trang web của bạn:

<meta name="description" content="Free Web tutorials">

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 sau mỗi 30 giây:

<meta http-equiv="refresh" content="30">

Đặt chế độ xem để làm cho trang web của bạn trông đẹp trên tất cả các thiết bị:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ví dụ về <meta>thẻ:

Thí dụ

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

Đặt chế độ xem

Chế độ xem là vùng hiển thị của người dùng trên một trang web. Nó thay đổi theo thiết bị - nó sẽ nhỏ hơn trên điện thoại di động hơn là trên màn hình máy tính.
Bạn nên đưa <meta>phần tử sau vào tất cả các trang web của mình:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Điều này cung cấp cho trình duyệt hướng dẫn về cách kiểm soát kích thước và tỷ lệ của trang.
Phần width=device-widththiết lập chiều rộng của trang tuân theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị).
Phần initial-scale=1.0đặt mức thu phóng ban đầu khi trang được tải lần đầu tiên bởi trình duyệt.

Tóm tắt chương

Phần <head>tử là vùng chứa siêu dữ liệu (dữ liệu về dữ liệu)
Phần <head>tử được đặt giữa <html>thẻ và <body>thẻ
Phần <title>tử là bắt buộc và nó xác định tiêu đề của tài liệu
Phần <style>tử được sử dụng để xác định thông tin kiểu cho một tài liệu
Các <link> thẻ thường được sử dụng để liên kết đến các style sheet bên ngoài
Phần <meta>tử này thường được sử dụng để chỉ định bộ ký tự, mô tả trang, từ khóa, tác giả của tài liệu và cài đặt chế độ xem
Phần <script>tử được sử dụng để xác định JavaScripts phía máy khách
Phần <base>tử chỉ định URL cơ sở và / hoặc mục tiêu cho tất cả các URL tương đối trong một trang

Phần tử đầu HTML

Tag	Description
<head>	Xác định thông tin về tài liệu
<title>	Xác định tiêu đề của một tài liệu
<base>	Xác định địa chỉ mặc định hoặc mục tiêu mặc định cho tất cả các liên kết trên một trang
<link>	Xác định mối quan hệ giữa tài liệu và tài nguyên bên ngoài
<meta>	Xác định siêu dữ liệu về tài liệu HTML
<script>	Xác định một tập lệnh phía máy khách
<style>	Xác định thông tin kiểu cho một tài liệu