A. KIẾN THỨC CHUNG

1. Từ viết tắt

HTML – Hyper Text Markup  Language – Ngôn ngữ đánh dấu siêu văn bản

– W3C – World Wile Web Consortium – Tập đoàn

– Padding : đệm.

– ol (Ordered List – Danh sách thứ tự), ul (Unordered List – DS không thứ tự), dl (Definition List – DS định nghĩa), td (Table data – Ô dữ liệu)

2. Kiến thức

– File HTML là một file Text có chứa các thẻ (Tag) đánh dấu

–  Thẻ – tag dùng để định dạng văn bản, và được hiển thị bởi trình duyệt Web (Web Browser)

– Các trình duyệt thường không báo lỗi cú pháp HTML. Nếu viết sai cú pháp, kết quả hiển thị không đúng với dự định.

– Trang HTML có phần mở rộng (đuôi) là .HTM hoặc .HTML

– Trình soạn thảo: Notepad, EditPlus, Turbo Pascal,…Microsoft FrontPage, Macromedia Dreamweaver

– Phiên bản: HTML5 – 2012, XHTML5 2013

– Cấu trúc tài liệu:

1

– KHAI BÁO

  • HTML5
  • HTML 4.01

4.01 Transitional//EN”
http://www.w3.org/TR/html4/loose.dtd”>

  • XHTML 1.0

1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

– Thẻ (Tag):

  • Dùng để định dạng tài liệu
  • Không phân biệt HOA – thường
  • Văn bản nằm giữa thẻ bắt đầu và thẻ kết thúc
  • Có thể lồng các thẻ nhưng không được chồng chéo
  • Thẻ đơn: Chỉ có thẻ bắt đầu:
    ,
  • Thẻ kép: có thẻ bắt đầu và thẻ kết thúc
  • Chú ý: trong XHTML các phần tử phải có thẻ đóng, Phần tử rỗng:

– Địa chỉ:

– Tham khảo tại: http://www.w3.org

– Thường sử dụng thuộc tính style để định dạng font thay cho tag cũ.

3. Màu cơ bản:

– black – #000000 – rgb(0,0,0)

– white – # ffffff – rgb(f,f,f)

– grey – #d0d0d0

– blue – #0000ff

– red: #ff0000

B. CÁC THẺ CƠ BẢN

1. Các thẻ cơ bảnCapture

2. Các thẻ định dạng văn bản

Capture

3. Định dạng ký tự đặc biệt

Capture

4. Thẻ tạo liên kết

– Liên kết ngoài : <a href=“URL”> Text đại diện </a>

Untitled

– Liên kết trong :

  • Vị trí đi đến: <a name=“TenViTri”>Vi tri bat dau
  • Vị trí đại diện: <a href=“#TenViTri”> Text đại diện
  • Lên đầu trang, tới trang…, tới chương…

– Kết hợp liên kết ngoài và liên kết trong :

  • <a name=“TenViTri”>Vi tri bat dau
  • <a href=“URL#TenViTri”> Text đại diện

– Tạo liên kết mở rộng:

Capture

– Thẻ alt dùng để hiển thị đại diện khi ảnh bị sai

  • alt=”Loi.gif”>

5.  Frame

– Trình bày nhiều trang HTML trong cùng một trang, mỗi tài liệu HTML là một Frame.

– Thẻ chia màn hình ra nhiều frame (dòng, cột)

cols=”25%,75%“>

– Ví dụ:

Untitled

6. Table

– Bảng định nghĩa bởi thẻ

  • Bảng chia thành dòng:
  • Dòng chia thành ô:   (table data)
  • Tạo heading cho cột:  
  • Ô bị mất:hoặc ;nbsp;
  • Tạo đường viền: <table border=1>, Không đường viên: không tạo border.
  • Số khoảng trắng từ nội dung ô tới đường viền:
    cellpadding=10>
  • Khoảng cách giữa các ô dữ liệu trong bảng:
    cellspacing=10>
  • Merge: colspan=2 hoặc rowspan=2

– Ví dụ các dạng bảng:

Untitled

– Nội dung trong ô: Text, hình ảnh, đường thẳng, list, form, table con…

– Ví dụ Merge bảng:

Untitled

7. Danh sách

– Danh sách có 3 dạng:

  • Danh sách có thứ tự (Ordered List) :
  • Danh sách không thứ tự (Unordered List) :
  • Danh sách định nghĩa (Definition Lists) :
  • Phần tử trong danh sách
  • Phần tử trong ds định nghĩa:và
  • Dạng khác:

Untitled

8. Thẻ form

– Nhận dữ liệu từ người dùng

Gồm:  text fields, textarea fields, drop-down menus, radio buttons, checkboxes,…

– Thẻ: <form>…

– Thuộc tinh: name=, method=

– Tạo các định dạng bằng thẻ: <input type=…>

– Mở một web khi chọn button:

action

=abc.com.vn>

– Ví dụ tổng hợp:

Untitled

9. Thẻ image

– Thêm hình ảnh định dạng *.gif hay *.jpg

– Thẻ: <image src=URL>

– Thuộc tính:

  • Width = number pixels / number %
  • Height = number pixels / number %
  • Align = “left/right/top/middle/bottom”
  • Alt=“Chuỗi đại diện khi không tải được hình”

– Thẻ


: chia hình ra làm nhiều phần

10. Thẻ body

– Màu nền: bgcolor=…>

– Ảnh nền: background=…>

11. Thẻ head

– Không được hiển thị trong nội dung web. Gồm: thông tin về tiêu đề, địa chỉ nền, styles, meta, font nền, …

– Thẻ title: tên thanh tiêu đề : Đại học Cần Thơ

– Thẻ meta: cung cấp thông tin tổng quát cho Search Engine

  • Mô tả: <meta name=”description” content=“Trang chu cua Website Khoa CNTT – Truong DHCT”>
  • Từ khóa tìm kiếm: <meta name=”keywords” content=“University, Cantho, Computer, Information Technology”>
  • Mở một trang web sau n giây: <meta http-equiv=”Refresh“ content=”5; url=http://www.cit.ctu.edu.vn”>

12. Thẻ Style

– Dùng trong CSS

  • Có thể định dạng trong file ở ngoài: <link rel=”stylesheet” type=”text/css“ href=“abc.css”>
  • Có thể khai báo bên trong phầntrang Web,
    <style type=”text/css”>
    body {background-color: red}
    p {margin-left: 20px}
  • Có thể sử dụng thẳng trong nội dung trang Web: 

Paragraph1

13. Thẻ Sript

– Có thể nhúng vào trang Web những đoạn Script viết bằng các ngôn ngữ như : JavaScript, VBScript.

Capture

14. Thẻ Font

– Cả trang: . Một đoạn văn bản:

– Thuộc tính: face=”Times New Roman” size=4 color=green

– Tag mới (sử dụng phổ biến):

 

style=”font-family

=arial
font-size=150%
color=blue>…

C. BÀI TẬP NÂNG CAO