[HTML CSS căn bản] Bài 2: Code cho phần head

Chào các bạn, chúng ta lại gặp lại nhau trong serie chia sẻ HTML CSS căn bản trên laovu.com. Trong bài trước mình đã giới thiệu qua với các bạn cách để tạo ra một dự án website, bài hôm nay mình sẽ hướng dẫn bạn code cho phần head trong file index.html, nếu các bạn chưa đọc thì xin hãy đọc lại bài

HTML CSS căn bản (Phần 1) – Khởi tạo một dự án website

Code cho phần head

Trong phần head có rất nhiều loại thẻ với nhiều mục đích sử dụng khác nhau, tuy nhiên ở đây mình chỉ nhắc đến những thẻ cần thiết đủ để các bạn sử dụng trong website của mình thôi nhé.

Tránh dài dòng mình xin vào chủ đề chính luôn, trong phần head của file index.html gồm có những thẻ cơ bản sau:

Thẻ title: Đây là thẻ chứa tiêu đề của trang web, đây là tên của trang web hoặc là đoạn mô tả ngắn gọn nhất nội dung mà website muốn truyền tải.

code:

<title>Tiêu đề của website</title>

Sau khi chèn thẻ tiêu đề thì nó sẽ hiển thị ở đây:

Thẻ title của website

Thẻ metal charset: đây là thẻ khai báo cho trình duyệt biết website của bạn đang sử dụng bảng mã ký tự gì trong ngôn ngữ siêu văn bản HTML.

code:

<meta charset="utf-8" />

Ở đây website chúng ta sử dụng tiếng việt cho nên bảng mã sử dụng sẽ là charset=”utf-8″ nhé

Thẻ meta description: Là thẻ chứa đoạn tóm tắt nội dung trang, đoạn này nhằm mục đích khai báo với các công cụ tìm kiếm giúp đánh giá website của bạn đúng với lĩnh vực mà website của bạn đang hướng tới.

code:

<meta name="description" content="Đoạn mô tả website ví dụ: đây là website chuyên cung cấp các dịch vụ thiết kế web" />

Giải thích thẻ meta description, phần name=”description” đây là phần khai báo tên thẻ, giúp trình duyệt hiểu được đây là một thẻ meta description, phần content=”” là phần chứa nội dung của thẻ.

Thẻ metal keywords: tương tự như thẻ metal description nó cũng nhằm mục đích là khai báo với các công cụ tìm kiếm, tuy nhiên ở đây nó khai báo các từ khóa của trang web, các từ khóa chứa trong thẻ này sẽ giúp các công cụ tìm kiếm dễ dàng nhận diện website của bạn hơn, lưu ý là nên để những từ khóa mà website của bạn hướng tơi.

Có thể để nhiều từ khóa trong thẻ metal keywords và mỗi từ khóa sẽ được phân tách với nhau bằng dấu (,).

code:

<meta name="keywords" content="Wordpress, theme wordpress, html, css, html css free, SEO, dịch vụ SEO, Thiết kế website chuẩn SEO">

Thẻ meta lang: Là thẻ khai báo ngôn ngữ mà website sử dụng, ở đây website sử dụng Tiếng Việt cho nên chúng ta sẽ khai báo là content=”Vi“.

code:

<meta http-equiv="Content-Language" content="Vi">

Thẻ link: Đây là thẻ dùng để nhúng các file từ bên ngoài vào file HTML như file stylecss.css, javarscript.js, icon.ico…

Thẻ link nhúng file css:

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

Trong đó: rel=”stylesheet” thể loại của file được nhúng vào kiểu của nó là stylesheet, href=”style.css” là đường dẫn tới file được nhúng vào.

Thẻ script: Thẻ này hỗ trợ khai báo các thuộc tính hoặc dùng để nhúng các thuộc tính vào mã html của bạn.

Thẻ script nhúng file javascript:

<script src="javascript.js"></script>

Trong đó: src=”javascript.js” là đường dẫn tới file js.

Hoặc thẻ script cũng được dùng để khai báo trực tiếp một đoạn javascript vào bên trong html mà không cần phải nhúng đường dẫn file vào.

code:

<script type="text/javascript">
    document.write("Hello World!")
</script>

Trên đây là toàn bộ phần code cơ bản trong phần head mà một website cần. Toàn bộ code trong bài học này như sau:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Language" content="Vi">
  <link rel="stylesheet" href="style.css">
  <script src="javascript.js"></script>
  <title>Đây là tiêu đề trang web</title>
  <meta name="description" content="Đoạn mô tả website ví dụ: đây là website chuyên cung cấp các dịch vụ thiết kế web" />
  <meta name="keywords" content="Wordpress, theme wordpress, html, css, html css free, SEO, dịch vụ SEO, Thiết kế website chuẩn SEO">
  </head>
  <body>
    <div>
      <h1>Tiêu đề trang web đầu tiên của tôi</h1>
      <p>Nội dung trang web đầu tiên của tôi<p>
    </div>
  </body>
</html>

Xong vậy là mình đã chia sẻ xong những nội dung cần thiết trong phần head trong một website, ở bài tiếp theo mình sẽ hướng dẫn các bạn code menu của web site nhé, xin chào và hẹn gặp lại!

Tôi là một freelance, mọi kiến thức mà tôi chia sẻ cho bạn đều là miễn phí!

Chia sẻ: