Webcourse html can ban

  • 59 trang
  • file .pdf
Lập trình và Thiết kế Web 1
Bài 3
Thiết kế trang Web – HTML Căn bản
Khoa CNTT – ĐH.KHTN
© 2007 Khoa Công nghệ thông tin
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Nội dung
 Giới thiệu về HTML
 Cấu trúc của 1 tài liệu HTML
 Các Tag cơ bản
 Các Tag danh sách
 Tag liên kết trang
 Tag kẻ bảng
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Nội dung
 Giới thiệu về HTML
 Cấu trúc của 1 tài liệu HTML
 Các Tag cơ bản
 Các Tag danh sách
 Tag liên kết trang
 Tag kẻ bảng
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Giới thiệu về HTML
 HTML (Hyper Text Markup Language) - Ngôn ngữ
đánh dấu siêu văn bản
 Là một ngôn ngữ dùng để xây dựng một trang Web.
 Chứa các thành phần định dạng để báo cho trình
duyệt Web biết cách để hiển thị một trang Web.
 Một trang web thông thường gồm có 2 thành phần
chính:
– Dữ liệu của trang web (văn bản, âm thanh, hình ảnh...)
– Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các dữ
liệu trên hiển thị trên trình duyệt.
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Giới thiệu về HTML – Trình duyệt, trình soạn thảo
Trình duyệt web (Browser) Trình soạn thảo (Editor)
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Giới thiệu về HTML – Thẻ (Tag) HTML


Welcome to HTML


My first HTML document




Hiển thị ví dụ trong IE
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Giới thiệu về HTML – Thẻ (Tag) HTML
Dòng chữ này được in đậm
Dữ liệu
 Tên Tag  luôn mang tính gợi nhớ
– Ví dụ: B ~ Bold, I ~ Italic, P ~ Paragraph
 Đôi khi không cần Tag đóng
,

 Cú pháp chung
Dữ liệu
– Ví dụ :
Thuong mai Dien tu 1

Thuong mai Dien tu 2

[Kết quả chạy trên trình duyệt IE]
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Giới thiệu về HTML – Thẻ (Tag) HTML.Cú pháp
Mã HTML Hiển thị
Đây là một dòng được in Đậm Đây là một dòng được in Đậm

Mức chữ ở tiêu đề 3

Mức chữ ở tiêu đề 3
Mã HTML Hiển thị
Hello
Hello

Lưu ý :
• Giá trị Thuộc tính của Thẻ nên đặt trong dấu nháy đơn hoặc nháy kép
• Không phân biệt chữ HOA và thường
• Bỏ qua các khoảng trắng thừa và các dấu ngắt dòng, xuống dòng
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Giới thiệu về HTML – Thẻ (Tag) HTML.Cú pháp
 Lưu ý: Các Tag nên lồng nhau tuyệt đối
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Giới thiệu về HTML – Thẻ (Tag) HTML.Ví dụ


Welcome to HTML
Có bao nhiêu

Thẻ HTML ?

My first HTML document




© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Nội dung
 Giới thiệu về HTML
 Cấu trúc của 1 tài liệu HTML
 Các Tag cơ bản
 Các Tag danh sách
 Tag liên kết trang
 Tag kẻ bảng
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Cấu trúc 1 tài liệu HTML


Phần đầu
Tiêu đề
trang HTML
Bắt đầu và
Kết thúc của
trang HTML
Nội dung 1 Nội dung
Nội dung 2 trang HTML
Nội dung 3


© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Cấu trúc 1 tài liệu HTML
 : Định nghĩa phạm vi của văn bản HTML
 : Định nghĩa các mô tả về trang HTML.
Thông tin trong tag này không được hiển thị trên trang web
: Mô tả tiêu đề trang web
 : Xác định vùng thân của trang web, nơi
chứa các thông tin
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Cấu trúc 1 tài liệu HTML – Ví dụ


Welcome to HTML


My first HTML document




© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Nội dung
 Giới thiệu về HTML
 Cấu trúc của 1 tài liệu HTML
 Các Tag cơ bản
 Các Tag danh sách
 Tag liên kết trang
 Tag kẻ bảng
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Các Tag Cơ bản
 Các Tag xử lý văn bản
 Tag hình ảnh
 Tag âm thanh
© 2007 Khoa CNTT - ĐHKHTN
Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
Các tag xử lý văn bản – Khối, chuổi văn bản
 Các thẻ định dạng khối văn bản
– Tiêu đề (Heading) :

,

,

,

,

,

– Đoạn văn bản (Paragraph):


– Danh sách (List Items):


  • – Đường kẻ ngang (Horizontal Rules):

     Các thẻ định dạng chuổi văn bản
    – Định dạng chữ : , ,
    – Tạo siêu liên kết :
    – Xuống dòng :

    © 2007 Khoa CNTT - ĐHKHTN
    Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
    Các tag xử lý văn bản – Ví dụ về Heading
     HEADING


    Introduction to HTML


    Introduction to HTML - H1


    Introduction to HTML - H2


    Introduction to HTML - H3


    Introduction to HTML - H4


    Introduction to HTML - H5

    Introduction to HTML - H6



    © 2007 Khoa CNTT - ĐHKHTN
    Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
    Các tag xử lý văn bản – Ví dụ về Paragraph
     PARAGRAPH -




    Welcome to HTML


    My first HTML document



    This is going to be real fun

    Using another heading



    Another paragraph element




    © 2007 Khoa CNTT - ĐHKHTN
    Lập trình và Thiết kế Web 1 – Bài 3 : Thiết kế trang Web – HTML Căn bản
    Các tag xử lý văn bản – Ví dụ về Paragraph
     HORIZONTAL RULES


    – Thuộc tính :
    • align : Canh hàng đường kẻ ngang so với trang web
    • width : Chiều dài đường kẻ ngang
    • size : Bề rộng của đường kẻ ngang
    • noshade : Không có bóng




    © 2007 Khoa CNTT - ĐHKHTN