Thiết Kế Web

HTML là gì? Cấu tạo một trang web dưới dạng HTML

Bài này mình sẽ giới thiệu cho các bạn HTML là gì? Và vai trò của HTML trong thiết kế website quan trong như thế nào. Có thể nào HTML là một phần không thể thiếu trong thiết kế website. …

Bài này mình sẽ giới thiệu cho các bạn HTML là gì? Và vai trò của HTML trong thiết kế website quan trong như thế nào. Có thể nào HTML là một phần không thể thiếu trong thiết kế website. Bây giờ chúng ta sẽ đi tìm hiểu cụ thế nhé.

1. HTML là gì?

HTML (tiếng Anh, viết tắt cho HyperText Markup Language, tức là “Ngôn ngữ Đánh dấu Siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web, nghĩa là các mẩu thông tin được trình bày trên World Wide Web. Được định nghĩa như là một ứng dụng đơn giản của SGML, vốn được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp, HTML giờ đây đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản mới nhất của nó hiện là HTML 4.01. Tuy nhiên, HTML hiện không còn được phát triển tiếp. Người ta đã thay thế nó bằng XHTML.

Dùng HTML động hoặc Ajax, có thể được tạo ra và xử lý bởi số lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản, bạn có thể gõ vào ngay từ những dòng đầu tiên, cho đến những công cụ xuất bản WYSIWYG phức tạp.

HTML nói chung tồn tại như là các tập tin văn bản chứa trên các máy tính nối vào mạng Internet. Các file này có chứa thẻ đánh dấu, nghĩa là, các chỉ thị cho chương trình về cách hiển thị hay xử lý văn bản ở dạng văn bản thuần túy. Các file này thường được truyền đi trên mạng internet thông qua giao thức mạng HTTP, và sau đó thì phần HTML của chúng sẽ được hiển thị thông qua một trình duyệt web, một loại phần mềm trực quan đảm nhiệm công việc đọc văn bản của trang cho người sử dụng), phần mềm đọc email , hay một thiết bị không dây như một chiếc điện thoại di động.

Ðể viết HTML cho trang Web, bạn hãy start chương trình NotePad của Microsoft có đi kèm theo với Windows. Ðó là một ASCII Editor. Viết xong, bạn hãy save nó vào một folder nào đó dễ nhớ. Tên của file này bắt buộc phải có tận cùng là .htm hoặc .html Ví dụ: file.htm. Ðể thưởng thức thành quả của mình, bạn hãy open file đó bằng một Browser.

2. Cấu trúc cơ bản:

ột document HTML luôn bắt đầu bằng <html> và kết thúc bằng </html> (trong đó bạn cũng có thể viết nhỏ hoặc viết hoa <html> và </html>). Nhờ có cặp TAG này mà Browser biắt được đó là HTML – document để trình duyệt. Những chữ đó chỉ để dành riêng cho Browser, người đọc chỉ nhận được những gì viết giữa cặp TAG <body> và </body>. Trong một document html, chú thích được dùng như sau:

Như vậy một trang web viết bằng html sẽ có cấu trúc như sau:

Bổ sung

Trong một HTML Document, ngoài phần body còn có phần head, được viết bởi cặp tag <head></head>. Nếu bạn sử dụng cặp tag này, bạn bắt buộc phải viết thêm một cặp tag nữa, đó là <title></title> Giữa <title> và </title> là tên của trang web được browser trình bày phía trên cùng của menubar. Như vậy một trang web với “đầu” sẽ có cấu trúc như sau:

Trong “head” ta còn có thể đưa rất nhiều thông tin vào cho browser, search engine… Cái đó sẽ được đề cập đến trong một mục riêng

3. Các thẻ cơ bản trong HTML:

Một tài liệu HTML được tạo nên từ các cặp thẻ html

  • Thẻ HTML được bắt đầu bằng dấu < (dấu nhỏ hơn) và kết thúc bằng dấu > (dấu lớn hơn)
  • Nội dung nằm giữa dấu <> là tên thẻ. Ví dụ <b>, ta đọc là thẻ b
  • Cặp thẻ HTML được tạo nên từ thẻ mở và thẻ đóng
  • Các tag đầu tiên trong một cặp là thẻ bắt đầu, các thẻ thứ hai là thẻ kết thúc
  • Thẻ Bắt đầu và thẻ kết thúc còn được gọi là thẻ mởthẻ đóng
  • Thẻ đóng kết thúc bằng dấu / (</tenthe>)
  • Nội dung của thẻ sẽ được nằm giữa thẻ đóng và thẻ mở
  • Một số thẻ chỉ có thẻ mở mà không có thẻ đóng (như các thẻ <img>, <br />,  <hr />)

Ví dụ:  Về cặp thẻ: <b>Nội dung thẻ</b>

Các thẻ thường sử dụng trong HTML

3.1. Các thẻ tiêu đề (HTML Headings):

  • Bao gồm các thẻ từ <h1> đến <h6>: thường được sử dụng để thể hiện cho tiêu đề bài viết, bản tin, các mục nhấn mạnh . . .
  • Font chữ (size) của nội dung trong các thẻ giảm từ <h1> đến <h6> (h1 lớn nhất, h6 nhỏ nhất).

Khi xuất ra ngoài thì các bạn sẽ thấy như sau:

  • Nội dung thẻ h1

  • Nội dung thẻ h2

  • Nội dung thẻ h3

  • Nội dung thẻ h4

  • Nội dung thẻ h5
  • Nội dung thẻ h6

3.2. Đoạn văn bản trong HTML (HTML Paragraphs):

Đoạn văn bản trong tài liệu HTML được định nghĩa bằng thẻ <p>

 3.3. Liên kết (HTML Links):

  • Một trang website bao gồm rất nhiều trang web (web page), các web page liên kết lại với nhau để tạo lên website.
  • Liên kết trong HTML được định nghĩa bằng cặp thẻ <a>

Các thuộc tính (Attribute) của thẻ <a>

  • href: quy định địa chỉ (url) mà liên kết trỏ tới
  • target: (đích) thuộc tính này sẽ quy định liên kết sẽ được mở ra ở đâu: _self (trang hiện tại), _blank (cửa sổ mới), . .

3.4. HTML Line Breaks <br/>:

Sử dụng <br /> để xuống dòng trong một đoạn văn bản

Tuy nhiên chúng ta không nên sử dụng thẻ <br /> trong tài liệu HTML (khuyến cáo)

3.5. HTML Lines (<hr />):

Thẻ <hr /> sẽ tạo một đường kẻ ngang trong trang HTML. <hr /> là thẻ đơn không có thẻ đóng

 3.6. HTML images (Hình ảnh):

Để chèn hình ảnh vào tài liệu HTML ta sử dụng thẻ <img>, đây là thẻ HTML không có thẻ đóng

Các thuộc tính của thẻ <img>

  • src=”images.jpg”: Chỉ ra đường dẫn tập tin hình ảnh (có thể là đường dẫn tuyệt đối hoặc tương đối, vấn đề này mình sẽ giải thích ở một topic khác)
  • alt=”Mô tả ”:  Nội dung sẽ được hiển thị khi đường dẫn tới tập tin hình ảnh không tồn tại
  • title=”Tiêu đề”: Nội dung hiển thị khi đưa trỏ chuột lên hình.
  • width, height: Độ rộng và độ cao của file hình được tính bằng px, nếu không có thuộc tính width, height thì mặc định sẽ lấy kích thước gốc của file hình

3.7. Các thẻ định dạng text (HTML Text Formatting):
<b> (bold): Chữ In đậm

<u> (Underline): Chữ gạch chân

<i> (italic): Chữ in nghiên

<big> (Big): Chữ lớn hơn

<sub> (Subscrip) Chỉ số dưới, ví dụ: H2O

<sup> (Superscript): Chỉ số trên, ví dụ: x2y

<strong> In đậm (nhấn mạnh <b>)

<em>(emphasized): Chữ in nghiêng, Nhấn mạnh hơn <i>

 Tổng kết: Bài viết này là những kiến thức cơ bản về HTML và cấu tạo cũng như các thẻ hổ trợ trong HTML. Hy vọng bài viết này sẽ là tài liệu bổ ích cho những bạn mới đầu làm quen với thiết kế website. Ở những bài viết sau chúng ta sẽ cũng tìm hiểu các vấn để khác nhằm để xây dựng một giao diện website hoàn chỉnh.

 

Thẻ:, ,
comments powered by Disqus
Powered by HTH Company