TRƯỜNG ĐẠI HỌC TÂY NGUYÊN
BÀI GIẢNG
THIẾT KẾ VÀ LẬP TRÌNH WEB
CƠ BẢN
Đắk lắk, năm 2014
TRƯỜNG ĐẠI HỌC TÂY NGUYÊN
Nguyễn Thị Như
BÀI GIẢNG
THIẾT KẾ VÀ LẬP TRÌNH WEB
CƠ BẢN
Đắk lắk, năm 2014
i
LỜI MỞ ĐẦU
Thiết kế và lập trình web là môn học rất được yêu thích vì sản phẩm là một website thể
hiện được tư tưởng, sở thích, kỹ năng cũng như kiến thức của sinh viên ngành Công nghệ
thông tin.
Tập bài giảng này dành cho sinh viên yêu thích thiết kế và lập trình web với những kiến
thức cơ bản, nếu là sinh viên công nghệ thông tin thì thông thường là sinh viên năm thứ 3, sau
khi đã có kiến thức cơ bản về lập trình và mạng máy tính.
Nếu là người mới bắt đầu học web thì nên đọc từ đầu vì kiến thức trong bài giảng được
sắp xếp từ các thành phần cơ bản đến nâng cao. Nếu đã am hiểu và có khả năng lập trình và
thiết kế web thì người đọc có thể tra cứu, xem, đọc phần nội dung cần thiết.
Khi sử dụng bài giảng này, người học cần có các kiến thức cơ bản về lập trình và mạng
máy tính.
Để có thể nắm bắt được nội dung bài giảng được tốt, người học nên đọc trước nội dung
bài học, chuẩn bị máy tính với phần mềm trình duyệt web và trình soạn thảo văn bản như
notePad, EditPlus, Dreamweaver,…để có thể thực hành ngay với các ví dụ và bài tập trong
bài giảng.
Sinh viên tham gia học phần này cũng được yêu cầu kỹ năng học và làm việc theo nhóm.
Vì vậy, sinh viên cần chủ động tìm hiểu nội dung, công cụ và chuẩn bị tinh thần, thái độ phù
hợp để kết hợp với các sinh viên khác làm việc theo nhóm.
Bài giảng được chia thành bốn phần, gồm 10 chương tương ứng với bốn mảng kiến thức
được yêu cầu cho học phần Thiết kế và lập trình web cơ bản, bao gồm :
Phần A : Ngôn ngữ HTML, gồm ba chương :
Chương 1 : Ngôn ngữ HTML .
Chương 2 : Định dạng văn bản web.
Chương 3 : Các đối tượng trên tài liệu web.
Phần B : CSS, gồm ba chương.
Chương 4 : Tổng quan về CSS.
Chương 5 : Các đối tượng trên web.
Chương 6: Định vị và bố cục : định vị các đối tượng và bố cục các phần tử của trang web.
Phần C : Ngôn ngữ kịch bản Javascript, gồm 2 chương.
Chương 7 : Cấu trúc cơ bản của ngôn ngữ.
Chương 8 : Lập trình tương tác với các đối tượng trên web.
Phần D : Ngôn ngữ XML, gồm 2 chương.
Chương 9 : Tài liệu XML.
Chương 10 : DTD.
Cuối cùng là tài liệu tham khảo.
Phụ lục
Nội dung bài giảng đề cập đến các kiến thức cơ bản về thiết kế và lập trình để có thể tạo
ra được trang web tĩnh. Bao gồm :
Tìm hiểu ngôn ngữ HTML là ngôn ngữ được sử dụng để tạo ra cấu trúc và nội dung của
trang web, đây là ngôn ngữ nền tảng để tạo ra trang web.
ii
Một website mang tính chuyên nghiệp khi nó được định dạng và có bố cục ổn định, đây
chính là nội dung của phần thứ hai trong bài giảng: sử dụng CSS để thực hiện các khai báo
định dạng chung và tạo các layout (bày trí) cho các thành phần cũng như toàn bộ trang.
Một trang web đẹp và ổn định, mang tính chuyên nghiệp sẽ tạo được cảm giác thân thiện,
tin cậy cho khách hàng. Vì vậy, người làm web cũng cần các kỹ năng thiết kế trang web cũng
như các đối tượng thành phần trên trang, như : tìm hiểu về định vị và bố cục để tạo cho các
trang có được định dạng đồng nhất, bố cục các trang ổn định, sự lựa chọn màu sắc phù hợp
khi phối màu và xác định vị trí cũng như khoảng cách các đối tượng trên web được cân đối.
Phần lập trình Javascript được sử dụng để bổ sung vào việc thao tác với các phần tử trên
web thông qua mô hình DOM, kiểm tra thông tin phía người sử dụng và cho phép thực hiện
các tương tác cơ bản phía trình khách.
Ngôn ngữ XML và DTD được sử dụng như là ngôn ngữ giao tiếp trung gian để lấy dữ
liệu phía cơ sở dữ liệu lên Server để đưa về Client. Ở đây, mới giới thiệu XML, cách lấy dữ
liệu đưa về hiển thị cho Client, còn DTD được sử dụng để kiểm tra tính hợp lệ của tài liệu
XML
Trong mỗi mục, phần kiến thức đều có các ví dụ minh họa, người học nên tìm hiểu và
thực hiện các ví dụ để hiểu sâu sắc hơn các kiến thức đã đề cập trong nội dung bài giảng.
Cuối mỗi chương đều có phần bài tập để người học có thể thực hành và trải nghiệm với
các kiến thức quan trọng trong nội dung chương đã tìm hiểu.
Bài giảng này đã đề cập đến các kiến thức cơ bản nhất của thiết kế và lập trình web tĩnh.
Tuy nhiên, công nghệ thông tin là ngành luôn thay đổi nên việc cập nhật thường xuyên các
kiến thức trong lĩnh vực mình nghiên cứu là việc làm thường xuyên. Bài giảng này cũng đã
cập nhật khá đầy đủ các kiến thức mới như : HTML5, CSS3, kỹ thuật thiết kế trang web cho
các thiết bị với màn hình có độ phân giải và kích thước khác nhau, lập trình tương tác với các
sự kiện (event) dựa trên mô hình DOM mới hiện nay.
Bài giảng được bố cục theo phần, chương, đề mục nội dung.
Đầu mỗi chương có nêu phần kiến thức sẽ đề cập trong chương, được đánh dấu đầu đoạn,
đỗ màu nền và in nghiêng.
Trong mỗi mục hoặc mục con của nội dung: kiến thức về nội dung và các yêu cầu sẽ
được trình bày, cú pháp sẽ được trình bày nếu có, tiếp đó sẽ là các ví dụ minh họa.
Các mục được đánh số thứ tự dựa trên chương theo trình tự : thứ tự chương, thứ tự mục,
thứ tự mục con.
Hình ảnh, bảng biểu và các ví dụ cũng được đánh số theo chương với trình tự : thứ tự
chương, thứ tự hình của bảng biểu hoặc ví dụ.
Cú pháp sẽ được đặt trong khung có viền xung quanh và đỗ màu nền.
Các ví dụ là code chương trình sẽ được đóng khung, in nghiêng để phân biệt với phần nội
dung.
Cuối mỗi chương sẽ là phần tổng kết để nhắc lại các kiến thức chính yếu đã trình bày
trong chương. Cuối chương là phần bài tập để người học khắc sâu kiến thức và trải nghiệm
thực hành tạo ra sản phẩm.
Trang 1
MỤC LỤC
DANH MỤC TỪ VIẾT TẮT ............................................................................................ 7
PHẦN A: NGÔN NGỮ HTML ........................................................................................ 8
CHƯƠNG 1: CẤU TRÚC CƠ BẢN CỦA NGÔN NGỮ HTML ..................................... 8
1.1. KHÁI NIỆM ......................................................................................................... 8
1.1.1. Internet và các dịch vụ ................................................................................. 8
1.1.2. Các khái niệm về web.................................................................................. 9
1.1.3. Các thẻ HTML ........................................................................................... 11
1.1.4. Các thuộc tính của thẻ ............................................................................... 11
1.2. CẤU TRÚC CƠ BẢN CỦA TRANG WEB......................................................... 11
1.3. TỔ CHỨC LƯU TRỮ DỮ LIỆU WEBSITE ...................................................... 13
1.3.1. Phân loại nội dung ..................................................................................... 13
1.3.2. Tổ chức site hỗn hợp ................................................................................ 13
1.3.3. Địa chỉ file ................................................................................................. 13
CHƯƠNG 2: ĐỊNH DẠNG VĂN BẢN ........................................................................ 16
2.1. ĐỊNH DẠNG CHUNG VỀ MÀU SẮC .............................................................. 16
2.2. ĐỊNH DẠNG ĐOẠN ......................................................................................... 16
2.2.1. Các cấp tiêu đề........................................................................................... 16
2.2.2. Ngắt dòng .................................................................................................. 17
2.2.3. Phân đoạn .................................................................................................. 18
2.3. ĐỊNH DẠNG KÍ TỰ .......................................................................................... 19
2.3.1. Định dạng font chữ .................................................................................... 19
2.3.2. Định dạng cách hiển thị chữ ...................................................................... 19
2.3.3. Tạo chỉ số trên , chỉ số dưới ...................................................................... 20
2.4. VĂN BẢN ĐỊNH DẠNG TRƯỚC ...................................................................... 20
2.4.1. Bổ sung chú giải cho văn bản .................................................................... 21
2.4.2. Chèn đường kẻ ngang (Horizontal Line) .................................................. 21
2.5. ĐÁNH DẤU Ý NGHĨA ...................................................................................... 21
2.5.1. Thẻ nhấn mạnh .......................................................................................... 21
2.6. TRÍCH DẪN ...................................................................................................... 23
2.6.1. Trích dẫn khối văn bản .............................................................................. 23
2.6.2. Từ viết tắt .................................................................................................. 23
2.6.3. Câu trích dẫn và định nghĩa ....................................................................... 24
2.6.4. Các thẻ đánh dấu sự thay đổi về nội dung ................................................. 25
2.7. KÍ TỰ ĐẶC BIỆT (KÍ TỰ ESCAPE) ................................................................. 26
CHƯƠNG 3: CÁC ĐỐI TƯỢNG TRÊN WEB ............................................................. 30
3.1. DANH SÁCH ..................................................................................................... 30
3.1.1. Danh sách không có thứ tự(UnOrdered List) ............................................ 30
3.1.2. Danh sách có thứ tự ................................................................................... 31
3.1.3. Danh sách định nghĩa ................................................................................ 32