Bài 1 | Xây dựng website đơn giản với HTML – SOGO xSchool
Một website đơn giản có thể được viết bằng ngôn ngữ HTML. Bài viết sau đây sẽ hướng dẫn bạn cách xây dựng một website đơn giản sử dụng ngôn ngữ HTML.
I. Tạo Website đơn giản bằng HTML
1. Các bước tạo một file .html
Để có thể bắt đầu viết HTML, bạn có thể sử dụng phần mềm soạn thảo văn bản cơ bản (plain text editor) như: Notepad, Notepad++, Sublime Text…để tạo một file đuôi .html (thay vì .txt).
- Bước 1: Mở Notepad hoặc Sublime Text, vào File -> New File để tạo File mới.
- Bước 2: Chép dòng lệnh code sau đây vào Notepad
- Bước 3: Chọn File -> Save as…Sau đó lưu file đuôi .html hoặc .htm. Thí dụ ta đặt: “index.html”. Như vậy ta đã hoàn tất tạo một file .html.
- Bước 4: Có thể sử dụng các trình duyệt hoặc double click vào file index.html này để mở file.
2. Cấu trúc file HTML (HTML Document Structure)
Tất cả các file HTML đều có cấu trúc bao gồm các thành phần tới thiểu như sau: <!DOCTYPE html>, <html>, <head>, và <body>… được gọi là các thẻ (tag).
a. Thẻ <!DOCTYPE html>
Thẻ <!DOCTYPE html> được dùng để khai báo version của ngôn ngữ HTML đang được sử dụng. Trong trường hợp này là version 5 mới nhất Thẻ này luôn được đặt ở dòng đầu tiên của file HTML.
b. Thẻ <html>
Tiếp theo đó là thẻ <html> dùng để báo hiệu bắt đầu file HTML.
c. Thẻ <head>
Bên trong thẻ <html>, thẻ <head> dùng cho phần đầu của trang, bao gồm các dữ liệu metadata (thông tin của trang web). Nội dung bên trong của thẻ <head> không được thể hiện trong trang web. Ngoại trừ tên (title) của trang sẽ được hiện lên phần trên cùng của tab trình duyệt.
d. Thẻ <body>
Tất cả những nội dung được thể hiện trên trang web nằm trong thẻ <body> .
e. Thí dụ cấu trúc của 1 website đơn giản
Thí dụ cấu trúc các dòng lệnh của một trang website đơn giản như sau:
See the Pen HTML Document Structure Demo by QUANG (@QUANGPHUONG) on CodePen.
Như thấy ở trên, dòng lệnh đầu tiên là thẻ <!DOCTYPE html>, sau đó là thẻ <html> với ngôn ngữ sử dụng là tiếng Anh (bằng dòng lệnhlang="en").
Bên trong thẻ <html> là thẻ <head> và <body>. Thẻ <head> bao gồm mã code ký tự bằng thẻ <meta charset="utf-8"> và tựa đề của trang web bằng thẻ <title>. Thẻ <body> bao gồm một tiêu đề bằng thẻ <h1> và một đoạn văn bằng thẻ <p>. Bởi vì cả tiêu đề và đoạn văn đều nằm trong thẻ <body> , chúng đều được thể hiện trên trang web.
Khi một thành phần (thẻ) được đặt trong một thành phần (thẻ) khác, chúng được gọi là nested. Thành phần con sẽ được đặt lùi (indent) để giúp cho các trúc file html gọn ghẽ hơn. Thí dụ trên cả hai thẻ <head> and <body> đều nằm trong thẻ <html> do là thẻ con của thẻ <html> .
II. Các thành phần cơ bản trong file HTML
1. Thành phần (Elements)
Thành phần (elements) cấu thành nên cấu trúc của trang web. Tên của thành phần được đặt trong dấu nhỏ hơn và lớn hơn < > . Thí dụ như đoạn văn (paragraph) <p>, thuộc tính (attribute) <a>, tiêu đề (heading) <h1>,<h2>,<h3>,<h4>.
2. Thẻ (Tags)
Thẻ (tag) được tạo bởi dấu nhỏ hơn và lớn hơn, bên trong là tên của thành phần. Thẻ tag thường đi thành cặp. Bao gồm thẻ bắt đầu (opening tag) và thẻ kết thúc (closing tags).
Opening tag đánh dấu bắt đầu của một element. Thí dụ: <p>. <p> là thẻ báo hiệu bắt đầu một đoạn văn (paragraph).
Closing tag đánh dấu kết thúc của một element. Thí dụ: </p>.</p> là thẻ báo hiệu kết thúc một đoạn văn (paragraph).
Nội dung bên trong opening và closing tags là nội dung của một element. Thí dụ của một element paragraph hoàn chỉnh như sau: <p>Hello world</p>.
3. Thuộc tính (Attributes)
Attributes được sử dụng để cung cấp thông tin thêm của một element.
Một số thuộc tính thông dụng như:
1. id attribute: dùng để đặt tên một element
2. class attribute: dùng để phân cấp (class) một element
3. src attribute: dùng để chèn nguồn cho nội dung nhúng (embedded content) trong trang web
4. href attribute: dùng để chèn đường dẫn (link) đến một trang web khác.
Attribute bắt đầu bằng một thẻ mở, sau đó là tên của element. Theo sau là dấu bằng và giá trị của attribute được đặt trong ngoặc kép.
Thí dụ một element <a> và href attribute như sau:
<a href="https://www.w3schools.com/">W3School</a>
See the Pen Attribute by QUANG (@QUANGPHUONG) on CodePen.
Đoạn lệnh nói trên sẽ thể hiện dòng chữ “W3School” trên trang web. Khi người dùng click vào dòng chữ “W3School” thì trình duyệt sẽ tự động chuyển đến trang web https://www.w3schools.com/.
4. Self-Closing Elements
Hầu hết các elements đều có opening và closing tags. Tuy nhiên cũng có 1 số element chỉ có opening tag mà không có closing tag. Các element này được gọi là “self closing elements”:
<br><embed><hr><img><input><link><meta><param><source><wbr>
Nguồn tham khảo:
*************
Xem thêm:
—————————————————————————————
SOGO – xSchool
Đối tác của trường Đại học trực tuyến FUNiX (thuộc khối giáo dục FPT Education).
SOGO hợp tác cùng FUNiX triển khai chương trình đào tạo Lập trình viên chuyên nghiệp – Java Developer dựa trên cơ sở hoàn thành 03 chứng chỉ đầu tiên của chương trình Cử nhân Đại học trực tuyến FUNiX (tổng cộng 8 Chứng chỉ để lấy bằng Đại học FPT).
Mục tiêu của chương trình này là giúp sinh viên có thể hoàn thành 3 chứng chỉ đầu trong thời gian từ 10 – 12 tháng và có thể đi làm ngay tại FPT Software với chức danh Java Developer Fresher.
Sau khi đi làm, sinh viên vẫn có thể tiếp tục học để hoàn thành 5 chứng chỉ còn lại của FUNiX và lấy bằng Đại học FPT (được Bộ giáo dục và đào tạo công nhận).
Chi tiết chương trình trở thành Java Developer chỉ trong 10 tháng.
Liên hệ ngay để biết thêm chi tiết đây:
Hotline: 0355 00 77 38
Facebook (SOGO xSchool): sogoxschool
Bạn cũng có thể thích
Bài 34 | JSON là gì? – Javascript cơ bản (Phần 10) – SOGO
Bài 33 | Javascript DOM là gì? – Javascript cơ bản (Phần 9) – SOGO
