Bài giảng Lập trình Web (GV Nguyễn Hoàng Tùng)

LẬP TRÌNH WEB
 Nguyễn Hồng Tùng
 Bộ mơn Kỹ thuật phần mềm

 www.nhtung.com


Thơng tin chung
Tên mơn học: Lập trình Web.
Mã mơn học: CON501.

Số tín chỉ: 3 (45 tiết)
Lý thuyết: 25 tiết
Thực hành: 40 tiết

Đối tượng: Sinh viên chuyên ngành Tin học năm 3.

16/08/2014

Lập trình Web

2


Nội dung học phần

Ngôn ngữ HTML

1
2

Ngôn ngữ XHTML + HTML5

3

Thiết kế Cascading Style Sheet (CSS)

4

Cơ bản về JavaScript

5

16/08/2014

Biểu mẫu (FORM)

Lập trình Web

3


Tiêu chuẩn đánh giá sinh viên
Dự lớp: Đầy đủ theo quy chế (điểm danh đột xuất).
Đánh giá:
Kiểm tra thực hành (40%).
Thi thực hành trên máy (60%).

Đánh giá theo thang điểm 10.

Không xử lý ngoại lệ đối với trường hợp vắng kiểm tra khơng

lý do.

16/08/2014

Lập trình Web

4


Tài liệu học tập
Slide bài giảng,
Learn HTML and CSS with w3schools,

Learn JavaScript and Ajax with w3schools,
Trang web: ,
...

16/08/2014

Lập trình Web

5


Thơng tin giảng viên
Nguyễn Hồng Tùng
Bộ mơn Kỹ thuật phần mềm – Khoa KTCNMT – ĐHAG.

DĐ: 0975.058.876
Email:

Trang web: .

Địa điểm làm việc: Phịng ND205, Khu trung tâm.

16/08/2014

Lập trình Web

6


Nội quy lớp học

16/08/2014

Lập trình Web

7


Giải đáp thắc mắc về mơn học

16/08/2014

Lập trình Web

8


NGƠN NGỮ HTML

 Nguyễn Hồng Tùng
 Bộ mơn Kỹ thuật phần mềm

 www.nhtung.com


Nội dung chính của slide này
HTML là gì?
Thẻ và thuộc tính của thẻ

Thuộc tính chung (Global attributes)
Thuộc tính sự kiện (Event attributes)
MIME-type

Trang web HTML đầu tiên
Phân loại các thẻ HTML theo chức năng.

16/08/2014

Lập trình Web

2


HTML là gì?
HTML: HyperText Markup Language – Ngơn ngữ đánh dấu
siêu văn bản.

Do Tim Berner Lee phát minh và được W3C (World Wide
Web Consortium) đưa thành chuẩn năm 1994.

HTML sử dụng các thẻ (tags) để định dạng dữ liệu.

HTML không phân biệt chữ hoa, chữ thường.
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 chỉ dẫn đến kết quả hiển thị không đúng với
dự định.

16/08/2014

Lập trình Web

3


Lịch sử phát triển
1989: HTML ra đời bởi Tim Berners-Lee dựa trên cơ sở của
ngôn ngữ SGML (Standard Generalized Markup Language),

1990: HTML 1.0 được đưa vào sử dụng,
1994: HTML 2.0,
1996: HTML 3.2,

1999: HTML 4.01 (chuẩn phổ biến),
2000: XHTML 1.0 (chuẩn phổ biến),
2001: XHTML 1.1,
Tim Berners-Lee

2002: XHTML 2.0,
2008: HTML 5 ra đời với nhiều tính năng nổi bật.
16/08/2014

Lập trình Web

4


Thẻ và thuộc tính của thẻ
Có nhiều thẻ, mỗi thẻ có 1 tên và mang ý nghĩa khác nhau.
Có 2 loại thẻ: thẻ mở và thẻ đóng

Cách viết thẻ:
Thẻ mở: <tên_thẻ>

• Ví dụ: <u>,

, <img>,…

Thẻ đóng tương ứng: </tên_thẻ>
• Ví dụ: </u>,

,...

Chú ý: Ln có thẻ mở nhưng có thể khơng có thẻ đóng tương
ứng.
• Ví dụ: <img>, <input>,
,... khơng có thẻ đóng.

Các thẻ có thể lồng nhau, nhưng khơng đan xen lẫn nhau.
16/08/2014

Lập trình Web

5

Thẻ và thuộc tính của thẻ
Một thẻ có thể có các thuộc tính để bổ sung tác dụng cho thẻ.
Mỗi thuộc tính phải có tên (tên_tt) và giá trị (giá_trị).
tên_tt="giá_trị" (giá trị phải để trong cặp dấu nháy đơn hoặc đơi)

Các thuộc tính ln phải khai báo trong thẻ mở.
Viết thẻ có thuộc tính:
<tên_thẻ tên_tt1="giá_trị1" tên_tt2="giá_trị2"...>

VD:

Hello!

Chú ý:
Có thể thay đổi thứ tự, số lượng các thuộc tính.
Sự hỗ trợ các thẻ, thuộc tính ở mỗi trình duyệt là khác nhau.
Chỉ giống nhau ở các thẻ, thuộc tính cơ bản.
16/08/2014

Lập trình Web

6


Thuộc tính chung (Global attributes)
Thuộc tính chung áp dụng cho tất cả các thẻ HTML.
Danh sách các thuộc tính chung thường dùng:

16/08/2014

Lập trình Web

7


Thuộc tính sự kiện (Event attributes)
Sự kiện là những hành động do người dùng hoặc hệ thống
gây ra. Các hành động do người dùng gây ra có thể là di
chuyển chuột, nhấn chuột, nhả chuột, nhấn phím, nhả phím,
copy, kéo giãn cửa sổ, di chuyển cửa sổ,… Các sự kiện do
hệ thống gây ra có thể là nạp tài liệu, đóng cửa sổ,...
Khi một sự kiện xảy ra, nó sẽ tự động thực thi các câu lệnh
javascript tương ứng với sự kiện đó.
Mỗi sự kiện khi xảy ra chúng đều có một cái tên và thường
bắt đầu bằng từ on, ví dụ như onclick, onchange,...
Cú pháp: tên_sự_kiện="mã_javascript"
VD: onclick="alert('Bạn đã click chuột vào đây!');"
16/08/2014

Lập trình Web

8


Thuộc tính sự kiện (Event attributes)
Danh sách các thuộc tính sự kiện thường dùng:

16/08/2014

Lập trình Web

9

MIME-type
MIME: Multipurpose Internet Mail Extensions – là một chuẩn
Internet về định dạng cho thư điện tử.

MIME là một chuẩn mã hóa dùng để bổ sung cho giao thức
SMTP trong gửi mail để gửi kèm các thông điệp đa phương
tiện, MIME sử dụng mã hóa Base64 để chuyển các file phức
tạp sang ASCII.
MIME cho phép 07 loại dữ liệu: Application, Audio, Image,
Message, Multipart, Text, Video.
Xem thêm: />
16/08/2014

Lập trình Web

10


MIME-type

16/08/2014

Lập trình Web

11


Trang web HTML đầu tiên

Công cụ soạn thảo HTML:
Notepad, Notepad++, Dreamweaver, MS FrontPage,...

Trình duyệt web:
Internet Explorer, Mozilla Firefox, Opera, Google Chrome,...

16/08/2014

Lập trình Web

12


Trang web HTML đầu tiên
Mở Notepad++, gõ vào văn bản HTML bên dưới, sau đó lưu
lại với tên hello.html

Tập tin HTML thường có phần mở rộng là .htm, .html

Để gõ dấu tiếng Việt phải lưu văn bản dưới dạng UTF-8 và
phải có thẻ meta utf-8 để hiển thị tiếng Việt trên trình duyệt.
16/08/2014

Lập trình Web

13


Trang web HTML đầu tiên
Nội dung trang web hello.html khi mở với trình duyệt Firefox.

Phải đảm bảo rằng trang web sau khi thiết kế phải chạy ổn
định trên hầu hết các trình duyệt (cross-browser).

16/08/2014

Lập trình Web

14


Phân loại các thẻ HTML theo chức năng
Basic

Lists

Meta Info

Tables

Formatting

Styles and Semantics

Forms and Input

Programming

Frames
Images

Audio, Video
Links
16/08/2014

Lập trình Web

15


Nhóm thẻ cơ bản (Basic)

16/08/2014

Lập trình Web

16


Nhóm thẻ thơng tin (Meta Info)

16/08/2014

Lập trình Web

17