fbpx

Thiết kế Website bằng HTML cho người mới bắt đầu

Có ít nhất  1,7 tỷ website trên thế giới hiện nay. Thực tế tất cả các trang web này đều sử dụng HTML theo cách này hay cách khác. Vậy HTML là gì và làm thế nào để thiết kế website bằng HTML? Hãy cùng ETADO khám phá nhé!

1. Giới thiệu về HTML

HTML là gì?

thiet ke website bang htmlHTML, từ viết tắt của HyperText Markup Language, là ngôn ngữ máy tính để tạo các trang web và ứng dụng web. Bao gồm chủ yếu các chuỗi mã thường được viết trong tệp văn bản và được lưu dưới dạng HTML, mã được viết bằng ngôn ngữ HTML chuyển thành văn bản đẹp, được định dạng tốt hoặc kết hợp văn bản và phương tiện khi xem qua trình duyệt.

HTML được phát triển lần đầu tiên bởi nhà vật lý người Anh Tim Berners-Lee vào năm 1990 và nó đã trải qua rất nhiều phát triển kể từ đó phiên bản gần đây nhất có thể đạt được nhiều hơn nhiều so với tưởng tượng khi ngôn ngữ được phát minh lần đầu tiên.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu những điều cơ bản về ngôn ngữ HTML và tất cả những gì bạn cần biết để bắt đầu thiết kế website bằng HTML.

Phiên bản HTML

Đầu tiên, một bản tóm tắt nhanh chóng của tất cả các phiên bản HTML kể từ khi HTML được phát minh.

  • HTML 1.0: Đây là phiên bản barebones của HTML và là phiên bản đầu tiên của ngôn ngữ.
  • HTML 2.0: Phiên bản này được giới thiệu vào năm 1995. Nó dần dần phát triển, cho phép các khả năng bổ sung bao gồm tải lên tệp dựa trên biểu mẫu, bảng, bản đồ hình ảnh phía máy khách và quốc tế hóa.
  • HTML 3.2: Trong nỗ lực đảm bảo phát triển các tiêu chuẩn cho World Wide Web, World Wide Web Consortium (W3C) được thành lập bởi Tim Berners-Lee vào năm 1994. Đến năm 1997, họ đã xuất bản HTML 3.2.
  • HTML 4.0: Sau năm 1997, W3C đã phát hành HTML 4.0 – phiên bản áp dụng nhiều loại yếu tố và thuộc tính dành riêng cho trình duyệt. HTML 4.0 sau đó đã được phát hành lại với các chỉnh sửa nhỏ vào năm 1998.
  • HTML 4.01: Vào tháng 12 năm 1999, HTML 4.01 đã được phát hành.
  • XHTML: Các thông số kỹ thuật được giới thiệu vào năm 2000 và nó được khuyến nghị sử dụng làm tiêu chuẩn chung với HTML 4.01. Nó kết hợp XML để đảm bảo mã được viết đúng và đảm bảo khả năng tương tác giữa các ngôn ngữ lập trình.
  • HTML5 : W3C đã xuất bản HTML5 dưới dạng đề xuất vào tháng 10 năm 2014 và sau đó phát hành HTML 5.1 vào tháng 11 năm 2016.

Chọn Trình soạn thảo HTML của bạn

thiet ke website bang htmlNếu bạn đang nghĩ đến việc tạo các trang web bằng HTML, bạn cần một trình soạn thảo HTML. Có một số lợi ích khi sử dụng trình soạn thảo HTML.

Một trình soạn thảo HTML tốt sẽ giữ cho mã của bạn sạch sẽ và có tổ chức. Nó cũng sẽ phát hiện khi bạn mở một thẻ mới và tự động đóng nó để tránh bạn có mã lỗi và kết quả là làm giảm số lượng bạn phải gõ. Hầu hết các trình soạn thảo HTML ngày nay cho phép bạn xem trước trang web của mình để xem nó trông như thế nào trong trình duyệt web bằng tính năng WYSIWYG của họ.

Có nhiều trình soạn thảo HTML miễn phí và trả phí, dưới đây là một số tùy chọn hàng đầu bạn có thể chọn:

  • HTML-Kit
  • CoffeeCup
  • KompoZer
  • Komodo Edit
  • Notepad++
  • Bluefish
  • CodeLobster

2. Các khối xây dựng cơ bản của HTML

Khi bạn đã quyết định thiết kế website bằng HTML mà bạn muốn sử dụng, bước tiếp theo là tìm hiểu các khối xây dựng của HTML. Khi mã hóa bằng HTML, điều cần thiết là phải hiểu các khối xây dựng này. Chúng bao gồm các tags, thuộc tính và các yếu tố. Chúng tôi sẽ xem xét cơ bản về chúng dưới đây:

– Giới thiệu về các thẻ (tags)

Khi bạn đã vào HTML, điều đầu tiên bạn cần hiểu là các thẻ. Về bản chất, các thẻ tách văn bản bình thường khỏi mã HTML.

Do đó, khi nói đến HTML, các thẻ tạo ra sự khác biệt giữa việc tài liệu của bạn được hiển thị dưới dạng văn bản thông thường hay văn bản chuyển đổi văn hóa, về cơ bản là một mã văn bản xuất hiện để hiển thị một loạt các thứ (siêu liên kết, hình ảnh, phương tiện hoặc khác phương pháp định dạng) dựa trên những gì nó được hướng dẫn để hiển thị dựa trên các thẻ.

Chúng ta hãy xem từ “He is a boy” làm ví dụ:

  • Trong định dạng văn bản thông thường, bạn nhận được: He is a boy.
  • Trong định dạng văn bản in đậm, bạn nhận được: He is a boy.

Để đạt được những gì chúng tôi có ở định dạng in đậm, bạn phải sử dụng thẻ <b>.

Trong HTML thô, chúng tôi có <b>He is a boy</b> mà trình duyệt sau đó dịch sang đây: He is a boy.

Có một vài điều bạn nên hiểu về thẻ:

  • Các thẻ thực tế là khối xây dựng của HTML – bạn không thể làm HTML mà không có thẻ! Nếu bạn bị kẹt khi sử dụng thẻ nào, hãy chắc chắn kiểm tra bảng tuần hoàn HTML.
  • Hầu như mọi thẻ mở phải được đóng lại. Hãy nhớ rằng có những ngoại lệ. Một ví dụ về thẻ không cần phải đóng là thẻ trống, chẳng hạn như ngắt dòng: <br>.
  • Các thẻ được chứa trong dấu bé (“<“) và dấu lớn (“>”). Các thẻ đóng chứa một dấu gạch chéo xuất hiện trước khi tên của thẻ được đóng. Ví dụ về thẻ mở: <b>. Ví dụ về thẻ đóng </b>.
  • Mọi tệp HTML bắt đầu bằng thẻ mở <html> và kết thúc bằng thẻ đóng </html>. Dòng đầu tiên của tệp HTML phải khai báo loại tài liệu để trình duyệt biết bạn sử dụng “hương vị” HTML nào. Đây là lý do tại sao bạn thấy các trang HTML bắt đầu bằng Tiếng <!DOCTYPEhtml> trước khi mã HTML bắt đầu.

Trước khi nội dung được thêm vào, hầu hết các tệp HTML về cơ bản trông như thế này:

Phần sau thẻ <head> thường chứa thông tin về tài liệu như tiêu đề, thẻ meta và vị trí đặt tệp CSS của nó – nội dung không hiển thị trực tiếp trên trang trình duyệt. Phần giữa giữa <body> và </body> là nơi chứa nội dung chính của tệp HTML mà người xem sẽ thấy trong trình duyệt. Điều này bao gồm mọi thứ từ đoạn đầu tiên đến siêu liên kết đến định dạng đến đa phương tiện và mọi thứ khác.

– Giới thiệu về các yếu tố

thiet ke bang html

Trong HTML, một phần tử của người dùng, bao gồm thẻ mở và đóng cũng như nội dung giữa các thẻ.

Trong ví dụ về He is a boy (in đậm), chúng ta có điều này trong HTML: <b>He is a boy</b>. Văn bản “He is a boy” được bao quanh bởi một thẻ mở và đóng. Tất cả mọi thứ, bao gồm thẻ mở, nội dung và thẻ đóng là một yếu tố.

Khi một thẻ được mở, nội dung được giới thiệu và thẻ được đóng lại, chúng tôi có một yếu tố.

Một phần tử có thể ở dạng cơ bản hoặc ở dạng phức tạp. Tại sao? Bởi vì bất cứ điều gì ở giữa một thẻ mở và một thẻ đóng cũng như các thẻ đó là một yếu tố. Nó có nghĩa là chúng ta có thể có các yếu tố trong một yếu tố. Trong ví dụ hiện tại của chúng tôi, He is a boy (<b>He is a boy</ b>) là một yếu tố.

Bạn sẽ nhận thấy rằng chúng tôi đã nói trước đó rằng các tài liệu HTML có chứa thẻ <body> trước khi nội dung bắt đầu. Nội dung có thể bao gồm hàng trăm yếu tố khác nhau, nhưng tất cả các yếu tố này là một phần của yếu tố body trên cơ sở (vì phần tử body được mở, chứa nội dung và sau đó được đóng lại).

– Giới thiệu về các thuộc tính

Mặc dù các tài liệu HTML về cơ bản sử dụng các thẻ cho mọi thứ, đôi khi chúng tôi muốn truyền đạt thông tin bổ sung bên trong một yếu tố. Trong trường hợp này, chúng tôi sử dụng một thuộc tính. Thuộc tính được sử dụng để xác định các đặc tính của một phần tử, nó được sử dụng bên trong thẻ mở của phần tử. Các thuộc tính được tạo thành từ một tên và một giá trị.

Lưu ý rằng giá trị của một thuộc tính được đặt bên trong dấu ngoặc kép bằng cách sử dụng định dạng <tag property=mệnh giá giá trị>Văn bản của bạn</tag>.

Ví dụ :

<p align="centre">He is a boy</p>

Trong ví dụ này, chúng tôi đang hướng dẫn rằng “He is a boy” được căn giữa trong văn bản.

3. Bắt đầu với HTML

Giả sử bạn muốn thiết kế website bằng html cơ bản của riêng mình ngay hôm nay, làm thế nào để bạn bắt đầu? Từ việc tạo tiêu đề trang đến tạo biểu mẫu, chúng tôi sẽ hướng dẫn bạn cách bắt đầu với HTML bên dưới.

– Tạo phần tử <head> HTML

Khi thiết kế website bằng html, một trong những điều đầu tiên bạn sẽ tạo là phần tử <head>. Điều này chứa siêu dữ liệu (hoặc dữ liệu về tài liệu HTML). Điều này bao gồm các thông tin như bộ ký tự, tiêu đề tài liệu, kiểu tài liệu, tập lệnh,…

Một số thành phần trong <head> bao gồm tiêu đề, được tạo bằng thẻ <title>.

Ví dụ :

<title>Đây là tiêu đề trang của chúng tôi</title>

Tiêu đề này sẽ được hiển thị trong tab trình duyệt. Đó cũng là thứ sẽ được lập chỉ mục làm tiêu đề cho trang khi các bot công cụ tìm kiếm thu thập dữ liệu trang web của bạn.

Điều này cũng bao gồm phần tử <meta>, thường được sử dụng để chỉ định công cụ tìm kiếm thông tin có thể sử dụng để mô tả nội dung trong danh sách của họ. Điều này bao gồm mô tả, từ khóa, thông tin tác giả, … Phần tử <meta> cũng chỉ định bộ ký tự mà tài liệu HTML sử dụng.

– Tạo tiêu đề trong HTML

thiet ke website bang html

Tiêu đề đóng một vai trò quan trọng trong sự thành công của một trang web. Thứ nhất, chúng giúp người đọc dễ dàng bao quát nội dung các trang của bạn. Thứ hai, và có lẽ quan trọng hơn, chúng truyền đạt cấu trúc của các website của bạn đến các công cụ tìm kiếm và do đó thường ảnh hưởng đến cách nội dung của bạn được xếp hạng trong kết quả của công cụ tìm kiếm.

Điều đó nói rằng, điều quan trọng là tránh sử dụng các thẻ tiêu đề để làm cho văn bản của bạn lớn hoặc đậm. Có những thẻ khác có thể được sử dụng cho điều đó (chúng ta sẽ tìm hiểu sau trong phần này). Thay vào đó, thẻ tiêu đề chỉ nên được sử dụng cho cấu trúc.

Có sáu thẻ tiêu đề trong HTML: <h1> đến <h6>, với thẻ <h1> cho biết tiêu đề quan trọng nhất và thẻ <h6> cho biết tiêu đề ít quan trọng nhất.

Để tạo tiêu đề, chỉ cần quyết định tiêu đề bạn đang tạo, mở tiêu đề bằng thẻ tiêu đề thông thường và luôn nhớ đóng các thẻ sau khi bạn hoàn thành.

Ví dụ tiêu đề HTML :

  • <h1>Đây là Tiêu đề HTML đầu tiên của bạn</h1> (lớn nhất)
  • <h2>Đây là Tiêu đề HTML thứ hai của bạn</h2>
  • <h3>Đây là Tiêu đề HTML thứ ba của bạn</h3>
  • <h4>Đây là Tiêu đề HTML thứ tư của bạn</h4>
  • <h5>Đây là Tiêu đề HTML thứ năm của bạn</h5>
  • <h6>Đây là Tiêu đề HTML thứ sáu của bạn</h6>

– Tạo đoạn văn

Bước tiếp theo là bắt đầu tạo các đoạn văn. Đoạn văn có thể được tạo bằng thẻ <p>.

Ví dụ :

<p>Đây là đoạn đầu tiên của bạn.</p>
<p>Đây là đoạn thứ hai của bạn và bạn sẽ tạo thêm nhiều đoạn nữa.</p>

Hãy nhớ rằng viết bằng HTML rất khác với viết bằng văn bản thuần túy. Do đó, nếu bạn chia văn bản trong HTML mà không bắt đầu một đoạn mới, nó sẽ không thực sự quan trọng khi văn bản được trình duyệt hiển thị. Thay vào đó, bạn muốn sử dụng ngắt dòng, được biểu thị bằng thẻ <br>.

Ví dụ :

<p>Đây là một đoạn mới.
 Và tôi muốn sử dụng một số dòng mới.
 Vì vậy, tôi đang phá vỡ nó.</P>

Điều này sẽ không đi ra như sau:

Đây là một đoạn mới.
Và tôi muốn sử dụng một số dòng mới.
Vì vậy, tôi đang phá vỡ nó.

Thay vào đó, nó sẽ ra như thế này:

Đây là một đoạn mới. Và tôi muốn sử dụng một số dòng mới. Vì vậy, tôi đang phá vỡ nó.

Vì vậy, làm thế nào để bạn chia văn bản thành các dòng mới để nó sẽ hiển thị như thế này:

Đây là một đoạn mới.
Và tôi muốn sử dụng một số dòng mới.
Vì vậy, tôi đang phá vỡ nó.

Bằng cách sử dụng ngắt dòng.

Ví dụ :

<p> Đây là một đoạn mới. <br> Và tôi muốn sử dụng một số dòng mới. <br> Vì vậy, tôi đang phá vỡ nó. </ p>

Điều đó nói rằng, điều quan trọng cần lưu ý là thẻ ngắt dòng (<br>) là một thẻ trống, vì vậy bạn không phải đóng nó.

– Định dạng văn bản trong HTML

thiet ke website bang html

Bước tiếp theo là định dạng văn bản của bạn trong HTML. Đây là nơi bạn có thể cho biết liệu bạn có muốn văn bản của mình được in đậm, in nghiêng, gạch chân, ký hiệu, chỉ số trên, chỉ số dưới v.v. Đây là hướng dẫn cơ bản, vì vậy phần này sẽ không bao gồm tất cả định dạng. Thay vào đó, chúng tôi sẽ chỉ bao gồm một số thẻ định dạng cơ bản. Quá trình sử dụng các hình thức định dạng khác rất đơn giản – chỉ cần tìm thẻ bạn muốn và tiếp tục:

Sử dụng chữ đậm : <b>He is a boy</b> xuất ra: He is a boy

Sử dụng chữ nghiêng : <i>He is a boy</i> xuất ra: He is a boy

Văn bản gạch chân : <u>Anh ấy là con trai</u> xuất ra: He is a boy. Điều đáng chú ý là thẻ <u> không được dùng trong HTML 4.01 và được xác định lại để thể hiện văn bản khác biệt theo phong cách trong HTML5. Do đó, nên sử dụng CSS để chỉ ra văn bản cần gạch chân.

Sử dụng chỉ số dưới : <sub>He is a boy</sub> xuất ra: he is a boy

Sử dụng chỉ số trên: <sup>He is a boy</sup> xuất ra: he is a boy

Danh sách được sắp xếp và không theo thứ tự

Sớm hay muộn bạn sẽ phải tạo danh sách. Danh sách có thể được sắp xếp (tức là được đánh số) hoặc không có thứ tự (nghĩa là không đánh số).

Dưới đây là một ví dụ về danh sách được sắp xếp:

  1. Mục 1
  2. Mục 2
  3. Mục 3

Đây là cách tạo ra nó:

<ol>
<li>Mục 1</li>
<li>Mục 2</li>
<li>Mục 3</li>
</ol>

Dưới đây là một ví dụ về danh sách không có thứ tự:

  • Mục 1
  • Mục 2
  • Mục 3

Đây là cách tạo ra nó:

<ul>
<li>Mục 1</li>
<li Mục 2</li>
<li>Mục 3</li>
</ul>

– Danh sách lồng nhau

Tài liệu cũng có thể có những danh sách lồng nhau.

Thí dụ:

  • Mục 1
    • Mục 1 lồng nhau
    • Mục 2 lồng nhau
  • Mục 2
  • Mục 3

Điều này có thể được tạo ra với:

<ul>
<li>Mục 1
<ul>
<li>Mục 1 lồng nhau</li>
<li>Mục 2 lồng nhau</li>
<li>Mục 3 lồng nhau</li>
</ul>
</li>
<li>Mục 2</li>
<li>Mục 3</li>
</ul>

Như bạn có thể thấy, bạn chỉ cần mở một thẻ danh sách khác – được đặt hàng (<ol>) hoặc không có thứ tự (<ul>) – tùy thuộc vào những gì bạn muốn trước khi đóng mục bạn muốn lồng.

– Siêu liên kết

Web là một mạng lưới các trang được kết nối với nhau. Nếu bạn tạo một website – dù là nội bộ hay bên ngoài, hoặc cả hai – bạn sẽ phải liên kết đến các trang khác. Liên kết đến một trang nội bộ trên trang web của bạn hoặc đến một trang bên ngoài trên web được gọi là siêu liên kết (hyperlink). Mặc dù mọi người thường liên kết một văn bản, bất kỳ yếu tố HTML nào – ví dụ như hình ảnh – đều có thể được liên kết.

Thẻ <a> được sử dụng để xác định các liên kết trong HTML, trong khi thuộc tính của <href>, được sử dụng để chỉ định đích của liên kết. Liên kết sau đó được đưa vào một trích dẫn sau khi dấu bằng với dấu hiệu trước khi đóng thẻ.

Ví dụ :

Để tạo một siêu liên kết, cái này: <a href=https://etado.vn/>LIEN KET CUA BAN TAI DAY</a> sẽ xuất hiện dưới dạng LIEN KET CUA BAN TAI DAY

Bây giờ, giả sử bạn đang liên kết đến một tệp cục bộ trong đó bạn có tất cả các trang HTML của mình trong cùng một thư mục. Trong trường hợp này, bạn không phải bao gồm URL trang web. Chỉ cần thêm đường dẫn tập tin. Ví dụ: nếu liên kết đến một tệp có tiêu đề gioi-thieu-website.html, siêu liên kết của bạn sẽ trở thành <a href=”files/gioi-thieu-website.html”>LIEN KET CUA BAN TAI DAY</a>

Bạn có thể muốn chỉ định cách bạn muốn mở liên kết, ví dụ như trong một cửa sổ/tab mới. Bạn sẽ sử dụng thuộc tính đích cho điều đó.

Có các thuộc tính khác có thể được sử dụng để giao tiếp theo các cách khác nhau để mở một liên kết:

  • _blank – Mở trong một tab mới.
  • _elf – Mở trong cùng một tab.
  • _parent – Mở trong khung cha
  • _top – Mở trong toàn bộ cửa sổ
  • Tên khung – Mở trong khung có tên

– Sử dụng hình ảnh

Hình ảnh được thêm vào tài liệu HTML bằng thẻ <img>. Thẻ <img> là một thẻ trống, vì vậy nó không cần phải đóng.

Ví dụ :

<img src="heisaboy.jpg" alt="He is a boy">

Đây là một ví dụ cơ bản về việc bảo trình duyệt hiển thị một hình ảnh có tiêu đề là he heababoy.jpg. Được kéo từ cùng thư mục với tài liệu HTML. Thuộc tính của “alt” Cảnh báo cho trình duyệt hiển thị một văn bản (được gọi là “văn bản thay thế”) có tên là “He is a boy” nếu vì lý do nào đó trình duyệt hoặc cài đặt internet ngăn trình duyệt hiển thị hình ảnh. Nếu bạn muốn kéo một hình ảnh trong một thư mục khác, hoặc trên một trang web bên ngoài, địa chỉ/ đường dẫn đầy đủ phải được chỉ định.

– Tạo bảng

Khi bạn tìm hiểu sâu hơn về thiết kế website bằng html, bạn sẽ muốn tìm hiểu nhiều cách khác nhau để trình bày thông tin theo cách có tổ chức hơn. Một cách như vậy là thông qua việc sử dụng các bảng.

Các bảng được tạo bằng thẻ <table>. Mỗi tiêu đề trong một bảng được chỉ định bằng thẻ <th> (“table header”) trong khi mỗi hàng được chỉ định bằng thẻ <tr> (“table row”). Dữ liệu bảng sau đó được chỉ định bằng thẻ <td>.

Ví dụ :

<table>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>Input 1 under header 1</td>
<td>Input 1 under header 2</td>
<td>Input 1 under header 3</td>
</tr>
<tr>
<td>Input 2 under header 1</td>
<td>Input 2 under header 2</td>
<td>Input 2 under header 3</td>
</tr>
<tr>
<td>Input 3 under header 1</td>
<td>Input 3 under header 2</td>
<td>Input 3 under header 3</td>
</tr>
</table>

Điều này cho chúng ta một cái gì đó như thế này:

Như bạn có thể thấy, trong khi chúng ta có một bảng, nó hơi không có tổ chức. Để tổ chức, chúng ta có thể thêm một số kiểu dáng vào mã. Trong trường hợp này, chúng tôi đang tăng chiều rộng:

<table style="width:100%">
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>Input 1 under header 1</td>
<td>Input 1 under header 2</td>
<td>Input 1 under header 3</td>
</tr>
<tr>
<td>Input 2 under header 1</td>
<td>Input 2 under header 2</td>
<td>Input 2 under header 3</td>
</tr>
<tr>
<td>Input 3 under header 1</td>
<td>Input 3 under header 2</td>
<td>Input 3 under header 3</td>
</tr>
</table>

Điều này dẫn đến một cái gì đó có tổ chức hơn:

thiet ke website bang html

Kết luận

Tóm lại, thiết kế website bằng HTML phức tạp hơn những gì bạn có trong hướng dẫn này. Đừng từ bỏ hy vọng – nếu bạn có thể nắm bắt các khái niệm cơ bản trong hướng dẫn này, bạn sẽ có một khởi đầu tốt. Nó giống như biết ABC của một ngôn ngữ và mọi thứ khác trở nên dễ dàng hơn nhiều.

Vậy là ETADO đã cùng bạn tìm hiểu về cách thiết kế website bằng HTML cơ bản. Đã đến lúc bắt đầu tạo nên những website chuyên nghiệp cho doanh nghiệp của chính mình. Nếu bạn không phải là một nhà thiết kế website chuyên nghiệp, đừng lo, bạn có thể tạo cho mình một website chuyên nghiệp qua dịch vụ thiết kế website của chúng tôi.
Để biết thêm về các dịch vụ của chúng tôi, vui lòng liên hệ hotline 0865 622 633 hoặc gửi email về [email protected] để được giải đáp nhé!
Chia sẻ bài viết