(BQ) Bài giảng Chuyên đề 1: Lập trình Web - Phạm Văn Thuận với mục tiêu giúp sinh viên nắm được thiết kế trang web tĩnh, sử dụng HTML; thiết kế trang web động sử dụng PHP & hệ quản trị cơ sở dữ liệu MySQL. Cùng tìm hiểu và tham khảo nội dung thông tin tài liệu.
Trang 2Mục tiêu môn học
• Thiết kế trang web tĩnh, sử dụng HTML
• Thiết kế trang web động sử dụng PHP & hệ quản trị cơ sở dữ liệu MySQL
Trang 3 Tài liệu tham khảo chính:
• Website: www.w3schools.com
• www.3c.com.vn/Story/vn/hotrokhachhang/
ebooks/
• Robert Sheldon, “Beginning MySQL”
• Sams Teach Yourself MySQL in 10 minutes
• Andy Harris, “PHPMySQL programming for
the absolute beginner”
• ftp://dce.hut.edu.vn/thuanpv
Trang 4Nội dung môn học
Chương 1 HTML & CSS căn bản
Chương 2 Javascript cơ bản
Chương 3 Hệ quản trị cơ sở dữ liệu MySQL
Chương 4 PHP
Trang 5HTML căn bản
đánh dấu siêu văn bản
bản chứa các thẻ đánh dấu (markup tags) Thẻ đánh dấu này cho trình duyệt biết cách thể hiện trang web
• Notepad
• Frontpage
Trang 6Trang web Hello World
Trang 7HTML elements
phần tử HTML (HTML elements) Các phần tử này được định nghĩa bằng các thẻ (HTML tags)
Trang 9• Xuống dòng trong một đoạn
• Thẻ <br>
Trang 11Thuộc tính của các thẻ HTML
• Bổ sung các thông tin cho phần tử HTML (HTML elements)
• Khuôn dạng thuộc tính: name=“value” (ví dụ:
align=“center”)
• Thường được đặt trong thẻ mở đầu
Trang 13Các thẻ định dạng văn bản
• <b>, <big>, <strong>, <small>…
Trang 14Su dung tap lenh cua vi xu ly 8088/8086, hay viet chuong trinh con tao tre tuong
duong voi doan chuong trinh duoc viet bang ngon ngu C duoi day.
Trang 15Các thực thể ký tự (Character entities)
• Một số ký tự, ví dụ như “<“ có ý nghĩa đặc biệt
trong mã HTML nên không thể biểu diễn trực tiếp trong một đoạn văn bản
& Name ;
Trang 16Các thực thể ký tự (Character entities)
Trang 17Các thực thể ký tự (Character entities)
Trang 18Siêu liên kết (Hyperlink)
liệu khác (trang web, file văn bản, âm thanh, hình
Trang 19Siêu liên kết (Hyperlink)
<br><a href="#Chapter1">Nhay toi Chuong 1</a></br>
<br><a href="#Chapter2">Nhay toi Chuong 2</a></br>
Trang 23• colspan: định nghĩa số cột của cell
• rowspan: định nghĩa số dòng của cell
Trang 25HTML Lists
liệu HTML
• Danh sách không sắp xếp: <ul>, <li>
• Danh sách có sắp xếp: <ol>, <li>
Trang 27HTML Forms
nhập các thông tin thông qua các điều khiển
thành phần (textbox, radio, drop down list…)
<form>
<input>
<input>
</form>
<input type=“” name=“” value=“”>
•Type: text, radio, checkbox, submit
•Name: tên của điều khiển
•Value: giá trị
<select name=“”>
<option>
<option>
Trang 28Ho va ten <input type="text" size="30">
<br>Que quan <input type="text" size="30">
<br>Gioi tinh
<br><input type="radio" checked="checked" name="sex" value="male"> Nam </input>
<br><input type="radio" name="sex" value="female"> Nu</input>
</form>
<br>Nghe nghiep
<select name="occuptaion">
<option value="teacher">Giao vien</option>
<option value="Doctor">Bac si</option>
<option value="Engineer">Ky su</option>
</select>
</fieldset>
Trang 29 Lý do ra đời Style Sheet
• Giải quyết một vấn đề chung mà các trình duyệt web gặp phải
dung, bố cục và cách trình bày là do các trình duyệt đảm nhiệm, không sử dụng các thẻ định dạng
sung thêm các thẻ và thuộc tính (VD: thẻ font và thuộc tính màu)
W3C chuẩn hóa HTML, bổ sung style sheet để định nghĩa bố cục và cách trình bày nội dung
CSS căn bản
Trang 30CSS căn bản
• Style (phong cách) định nghĩa bố cục và cách
hiển thị cho trang web
• Style được chia thành các loại
<head> … </head>
Trang 31Phân cách bởi dấu “:”
Nhiều thuộc tính, phân cách bởi dấu “;”
Trang 35CSS căn bản
Id selector
p#para1 { text-align: center; color: red }
#green {color: green}
Style cho một thẻ với Id xác định
Style cho nhiều thẻ với Id xác định
<p id="para1">
Paragraph 1
</p>
Ví dụ
Trang 38CSS căn bản