Giới thiệu HTML


Mục tiêu:

  • Hiểu được các khái niệm về Internet, WWW, HTTP, HTML, …
  • Cấu trúc tài liệu HTML đơn giản
  • Sử dụng một số thẻ cơ bản và các ký hiệu đặc biệt

  1. Các khái niệm cơ bản:

    2. Internet: là một hệ thống thông tin toàn cầu có thể được truy nhập công cộng gồm các mạng máy tính được liên kết với nhau
    WWW (World Wide Web):  là một không gian thông tin toàn cầu mà mọi người có thể truy nhập (đọc và viết) qua các máy tính nối với mạng Internet
    HTTP ( HyperText Transfer Protocol): giao thức truyền tải siêu văn bản, là một trong năm giao thức chuẩn về mạng Internet, được dùng để liên hệ thông tin giữa Máy cung cấp dịch vụ (Web server) và Máy sử dụng dịch vụ (Web client) và là giao thức Client/Server dùng cho World Wide Web-WWW
    URL (Uniform Resource Locator): một địa chỉ được sử dụng để nhận dạng, tham chiếu đến các trang và các tài nguyên trên Web
    HTML (HyperText Markup Laguage): Ngôn ngữ đánh dấu siêu văn bản, được sử dụng để tạo các tài liệu có thể truy cập trên Web. Tài liệu HTML được tạo ra bằng cách sử dụng các thẻ và các phần tử của HTML. File được lưu trên Web server với đuôi .htm hoặc .html.
    HTML Tag: (thẻ HTML) là các từ khóa (tên thẻ) được bao quanh bởi dấu ngoặc nhọn.
    Thẻ HTML thông thường đi theo cặp như <p> nội dung </ p>
    Thẻ bắt đầu: <p>, thẻ kết thúc giống thẻ bắt đầu nhưng có thêm dấu gạch chéo phía trước tên thẻ: </p>
    HTML Attributes: thuộc tính của thẻ, cung cấp thêm các thông tin về thẻ đó. Thuộc tính luôn nằm trong thẻ bắt đầu và cú pháp: name=”value”, ví dụ:
       thẻ <p> có thuộc tính align=”right”
    Web Browser: trình duyệt web (Chrome, IE, Firefox, Safari,…), dùng để truy xuất các tài liệu trên các Web Server

  2. Cấu trúc một tài liệu HTML đơn giản: 

    3. Tên file: MyFirstHTML.html

     
    Toàn bộ tài liệu HTML: bao bằng cặp thẻ <HTML> </HTML>
    Phần tiêu đề: bao bằng cặp thẻ <HEAD> </HEAD>
    Phần thân: bao bằng cặp thẻ <BODY> nội dung trang web </BODY>
    Kết quả hiển thị trên trình duyệt:

  3. Sử dụng một số thẻ cơ bản và các ký hiệu đặc biệt:

  • Thẻ <META> nằm bên trong thẻ <HEAD>, cung cấp thông tin về trang web, gồm tên tác giả, tên phần mềm dùng để viết trang đó, tên công ty, thông tin liên lạc ....



      hoặc:


  • Thẻ <BODY> chứa nội dung trang web với các thuộc tính:

                bgColor: màu nền trang
        Text: màu chữ trong trang
        Link: màu của siêu liên kết
        Vlink: màu siêu liên kết đã xem qua
        Background: chỉ hình ảnh làm nền cho trang

  • Chú thích trong tài liệu HTML: <!-- Chú thích ở trong này -->
  • Thẻ đoạn <P> được sử dụng để đánh dấu sự bắt đầu của một đoạn mới.

      Canh lề văn bản với thuộc tính align
align=”left”|”right”|”center”|”justify”
  • Thẻ <BR> bổ sung một ký tự xuống dòng tại vị trí của thẻ (ngắt dòng).
  • Thẻ Heading (tiêu đề) <H1> </H1> được sử dụng để cung cấp tiêu đề cho phần nội dung hiển thị trên trang web, bạn có thể hiển thị phần tiêu đề một trong sáu kích thước từ H1 đến H6
  • Thẻ <ADDRESS> được dùng để hiển thị các thông tin như tác giả, địa chỉ, chữ ký trong tài liệu HTML. Phần tử này thường hiển thị ở cuối trang và có thể chứa một hoặc một số phần sau: liên kết đến trang chủ, thông tin bản quyền, …
  • Thẻ <BLOCKQUOTE> được dùng để tạo một văn bản trích dẫn dài bên trong tài liệu. BLOCKQUOTE được hiển thị như một đoạn văn bản thụt vào đầu dòng. Nếu phần trích dẫn ngắn và không cần ngắt đoạn,thì sử dụng thẻ <Q> tốt hơn
  • Thẻ <PRE> hiển thị văn bản với định dạng đã được xác định trước
  • Thẻ <DIV> dùng để nhóm các thành phần nội dung thành một khối
  • Thẻ <SPAN> được sử dụng để nhóm nội dung trong 1 dòng văn bản
  • Thẻ <CENTER> canh giữa văn bản
  • Thẻ <FONT> được sử dụng để điều khiển cách hiển thị văn bản trên trang Web. Chúng ta có thể xác định các thuộc tính như kích thước, màu sắc, kiểu…
Color: màu chữ, xác định bằng tên hoặc chữ số thập lục phân
size: kích thước font chữ (có giá trị từ 1 ->7)
face: chỉ ra tên loại font sử dụng.
  • Thẻ <B> in đậm, <I> in nghiêng, <U> gạch chân
  • Thẻ <BIG> văn bản to hơn bình thường, <SMALL> văn bản nhỏ hơn bình thường
  • Thẻ <TT> cố định độ rộng văn bản
  • Thẻ <SUP> chỉ số trên
  • Thẻ <SUB> chỉ số dưới
  • Thẻ <EM> nhấn mạnh, <STRONG> in đậm
  • Thẻ <HR > tạo đường gạch ngang trong tài liệu 
  • Các ký hiệu đặc biệt:
Ký tự đặc biệtMã định dạng
Lớn hơn (>)&gt;
Nhỏ hơn (<)&lt;
Trích dẫn(“”)&quot;
Ký tự  "&"&amp;
Khoảng trắng&nbsp;

Ví dụ:

Kết quả trên trình duyệt:

Khi bạn nhập thẻ mở thì phải nhập liền thẻ đóng, để tránh việc thiếu thẻ.
Giá trị các thuộc tính nên đặt vào trong cặp dấu ngoặc kép.




  1. Giới thiệu một số trình soạn thảo HTML:
    2. Notepad++
    Dreamweaver 
    Eclipse
    …


  2. Cách tạo tài liệu HTML với Notepad++:
Cài đặt: chạy file setup và thực hiện từng bước theo hướng dẫn
Hướng dẫn tạo tài liệu HTML:
Sau khi cài đặt, bạn mở ứng dụng Notepad++, chọn lệnh File -> New để tạo tài liệu mới:
Khi tài liệu mới hiển thị, bạn tiếp tục chọn lệnh File -> Save As để lưu tài liệu dưới dạng file có đuôi kiểu .htm hoặc .html:
Bạn nhập tên file, chọn loại file, nhấn Save. Bây giờ bạn có thể bắt đầu soạn thảo 1 tài liệu HTML.



Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Bài đăng (Atom)