Giới thiệu ngôn ngữ HTML


Tự học html css javascript 18/10/2015 Cùng chuyên mục

Ngôn ngữ đánh dấu siêu văn bản (HTML - Hyper Text Markup Language) là một ngôn ngữ đánh dấu được thiết kế để tạo ra các trang Web, trong đó các thông tin được trình bày trên World Wide Web ( gọi tắt là www - mạng lưới thông tin toàn cầu )

Ngôn Ngữ Đánh Dấu Siêu Văn Bản (HTML)

HTML là một ứng dụng đơn giản của SGML, được sử dụng trong các tổ chức công nghệ truyền thông. HTML đã trở thành một chuẩn cho trang web trên Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản mới nhất: HTML 5

HTML được lưu trữ như là các tập tin văn bản - trên các máy chủ, để người dùng có thể truy cập thông qua mạng internet - ngoài ra tập tin HTML còn được lưu trữ tại máy tính cá nhân - sử dụng trình duyệt để xem dữ liệu hiển thị như thế nào và sử dụng một editor ( phầm mềm soạn thảo mã như notepad, notepad++, codelobster, dreamweaver, ... ) để soạn mã HTML

Các file HTML chứa thẻ đánh dấu, là các chỉ thị cho chương trình về cách hiển thị, xử lý văn bản ở dạng thuần túy. Phần đuôi mở rộng của tập tin HTML thường có dạng .htm hay .html - ngoài ra còn có phtml ( nhũng mã nguồn php), cshtml ( nhũng mã nguồn asp.net - c#). 

Chức Năng Các Thẻ Và Phần Tử Trong HTML

Ngôn ngữ đánh dấu siêu văn bản chỉ rõ một trang Web được hiển thị như thế nào trong một trình duyệt. Sử dụng các thẻ và các phần tử HTML, bạn có thể:

  • Điều khiển hình thức và nội dung của trang.
  • Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử dụng các liên kết được chèn vào tài liệu HTML.
  • Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý các giao dịch…
  • Chèn các đối tượng như audio clip, video clip, các thành phần ActiveX và các Java Applet vào tài liệu HTML.

Trình Duyệt Là Gì?

Trình duyệt là một ứng dụng được cài đặt trên máy khách. Trình duyệt đọc mã nguồn HTML và hiển thị trang theo các lệnh trong đó. Trình duyệt được sử dụng để xem các trang web và điều hướng. Trình duyệt được biết đến sớm nhất là Mosaie, được phát triển bởi trung tâm ứng dụng siêu máy tính quốc gia (NCSA).

Ngày nay, có nhiều trình duyệt được sử dụng trên Internet. Trong đó phổ biến là: Google Chrome, Mozilla Firefox,  Microsoft Internet Explorer (IE), Opera, Safari, ... Đối với người dùng, trình duyệt dễ sử dụng bởi vì nó có giao diện đồ hoạ với việc trỏ và kích chuột.

Cấu Trúc Một Trang HTML

Gồm 3 phần cơ bản:

  1. Phần HTML: Mọi tài liệu HTML phải bắt đầu bằng thẻ mở <HTML> và kết thúc bằng thẻ đóng </HTML>. Cặp thẻ này báo cho trình duyệt biết nội dung giữa chúng là một tài liệu HTML
  2. Phần đầu: Phần đầu bắt đầu bằng thẻ <HEAD> và kết thúc bởi thẻ </HEAD>. Phần này chứa tiêu đề hiển thị trên thanh điều hướng của trang Web. Tiêu đề là phần khá quan trọng. Các mốc được dùng để đánh dấu một Website, trình duyệt sử dụng tiêu đề để lưu trữ các mốc này. Do đó, khi người dùng tìm kiếm thông tin, tiêu đề của trang Web cung cấp từ khoá chính yếu cho việc tìm kiếm.
  3. Phần thân: Phần này nằm sau phần tiêu đề. Phần thân bao gồm văn bản, hình ảnh và các liên kết mà bạn muốn hiển thị trên trang Web của mình. Phần thân bắt đầu bằng thẻ <BODY> và kết thúc bằng thẻ </BODY>

Ví dụ: Tạo trang web hiển thị nội dung "Hello World"

<HTML> <!--thẻ khai báo bắt đầu mã html-->
<HEAD> <!--thẻ khai báo bắt đầu phần head ( phần đầu ) -->
<TITLE>HTML - Hello World</TITLE> <!-- Tiêu đề trang web -->
</HEAD> <!-- kết thúc phần head -->
<BODY> <!-- bắt đầu phần thân -->
<H1> Hello World</H1>
</BODY> <!-- kết thúc phần thân -->
</HTML> <!-- kết thúc mã html-->

Kết quả

Chương trình HTML: Hello World  (html - hello world program)

Qui Trình Tạo Một Trang HTML:

Định Hình Trang Web

Để thiết kế một trang Web, trước tiên chúng ta cần phân tích và định hướng mục đích của trang Web. Điều này giúp ta có cái nhìn tổng quát về trang Web và sẽ thuận lợi cho việc tổ chức hay nâng cấp trang Web sau này:

  • Mục đích của trang Web ? có những chức năng và nhiệm vụ gì?
  • Thử đặt mình vào vị trí người xem, khách hàng, điều chỉnh cho  nội dung trình bày được thể hiện tốt nhất như: lựa chọn âm thanh, hình ảnh minh hoạ cho sinh động; thiết kế bố cục nội dung, trình bày sao cho hợp lý nhất.

Tổ Chức Tập Tin

Chia thư mục theo cấu trúc của trang Web, bạn có thể tạo một thư mục riêng rẽ cho tài liệu HTML, thư mục cho mã css, cho mã javascript, các resource (tài nguyên) như IMAGE, VIDEO,...

Tạo Trang Web

Sử dụng một trình soạn thảo văn bản như nodepad, notepad++, codelobster, dreamweaver, ... để soạn mã HTML theo cú pháp. Nếu sử dụng các trình soạn thảo mạnh như codelobster, dreamweaver,... việc soạn thảo trở nên nhanh chóng, dễ dàng ( hỗ trợ autocomplete, bảng màu, tạo bảng nhanh chóng, chèn các ký hiệu đặc biệt,... ).

Lưu Trang Web

  • Mỗi tập tin được lưu phần đuôi của nó có dạng .htm hay .html
  • Chọn thư mục thích hợp để lưu trang Web.
  • Khi đã tạo ra trang Web chúng ta cần xem nó như thế nào qua một trình duyệt như chrome. Bạn có thể tìm tới vị trí lưu trữ tập tin double click ( mở bằng trình duyệt mặc định ) hoặc click chuột phải lên tập tin chọn Open With => chọn một trình duyệt như Chrome, Firefox, Internet Explorer, Safari, Operamini,... (*) - mới nhất Việt Nam có Cốc Cốc. Nếu đã mở trình duyệt, nhấn tổ hợp phím Ctrl+O rồi tìm đến vị trí lưu trữ tập tin. 

Tổng Kết

Trong bài này các bạn nắm được:

  • Sơ lược về ngôn ngữ HTML
  • Hiểu biết về chức năng các thẻ trong HTML
  • Trình duyệt - mở một file html bằng trình duyệt
  • Cấu trúc một trang (tài liệu) HTML
  • Quy trình tạo một tập trang (tài liệu) HTML

Ở bài này, các bạn đã làm quen với mã HTML thông qua đoạn chương trình: Hello World. Trong bài sau, các bạn sẽ tìm hiểu cơ bản các thẻ trong HTML. 




Bình luận:


giới thiệu tự học html