Bài tập - Tài liệu học tập BaiTap

BÀI TẬP THỰC HÀNH 01 HTML Bài 1: Các thẻ HTML  Tạo tập tin bai1.htm, nhập thể nội dung trang web mẫu: nmvi@agu.edu.vn Bài 2: Liên kết tài liệu (sử dụng tập tin bai2.htm cho sẵn)  Đặt điểm neo (bookmark) vị trí đầu trang, tiêu đề khoa  Chèn danh sách không thứ tự vào đầu trang web tạo liên kết (hyperlink) đến tiêu đề khoa  Chèn liên kết quay trở đầu trang cuối phần giới thiệu khoa nmvi@agu.edu.vn Bài 3: Liên kết (sử dụng lại tập tin bai2.htm câu trên)  Đầu trang: chèn liên kết mở cửa sổ trống sau: Text đại diện Địa liên kết Trang chủ ĐHAG http://agu.edu.vn Báo sinh viên http://enews.agu.edu.vn Phòng CTSV http://sao.agu.edu.vn Phòng Đào tạo http://aao.agu.edu.vn Thư điện tử http://mail.agu.edu.vn  Cuối trang: chèn đường kẻ ngang liên kết email (đến địa email anh/chị) mẫu: nmvi@agu.edu.vn Bài 4: Hình ảnh (sử dụng tập tin ảnh trang web cho thư mục bai4 Lưu ý sử dụng đường dẫn tương đối cho thích hợp, khơng chép file thay đổi cấu trúc thư mục)  Tạo tập tin bai4.htm, chèn định dạng hình cho sẵn thư mục images mẫu:   Đặt liên kết cho click vào hình mở trang giới thiệu tương ứng, cho sẵn thư mục intro Cuối trang thư mục intro, chèn hình homepage.png, cho click vào hình quay trở trang bai4.htm Ví dụ: Bài 5: (tự thực hành) Anh/chị tự thiết kế trang web giới thiệu thân, cung cấp thông tin như: o Họ tên o Hình đại diện o Địa liên lạc o Điện thoại o Email o Những thông tin khác sở thích cá nhân, mơ ước, … nmvi@agu.edu.vn BÀI TẬP THỰC HÀNH 02 HTML Bài 1: Table Tạo tập tin bai1.htm, kẻ bảng tô màu hình (sử dụng màu tùy thích): Bài 2: Table Tạo tập tin bai2.htm, kẻ bảng nhập liệu mẫu: Bài 3: Form Tạo tập tin bai3.htm, thiết kế form mẫu: nmvi@agu.edu.vn Bài 4: Form Tạo tập tin bai4.htm, thiết kế form mẫu: Bài 5: Frame Tạo tập tin bai5.htm, chia cửa sổ trình duyệt thành khung mẫu:  Khung dùng hình tùy ý banner.jpg cho sẵn  Khung bên trái trang chứa liên kết đến tập (bài đến 4)  Khung bên phải hiển thị nội dung trang web tương ứng với liên kết chọn  Khung chèn trang chứa thông tin sinh viên nmvi@agu.edu.vn Bài 6: Tự thực hành Tạo form mẫu nmvi@agu.edu.vn BÀI TẬP THỰC HÀNH 03 CSS Bài 1: Các cách nhúng CSS vào tập tin HTML (sử dụng tập tin bai1.htm cho sẵn) Dùng thẻ liên kết tập tin CSS bên vào trang HTML:  Tạo tập tin dinhdang.css, nhập vào nội dung sau: body{ background-color: lavender; font-family: Verdana; font-size: 10pt; }  Mở tập tin bai1.htm chế độ soạn thảo, bổ sung vào phần dòng liên kết đến tập tin dinhdang.css sau:  Chạy tập tin bai1.htm trình duyệt để kiểm tra kết Dùng thẻ nhúng trực tiếp CSS vào trang HTML:  Mở tập tin bai1.htm chế độ soạn thảo, bổ sung vào phần nội dung sau: p{ text-indent: 50; color: darkblue; } p:first-letter { font-size: xx-large; font-weight: bold; color: blue; }  Chạy tập tin bai1.htm trình duyệt để kiểm tra kết Dùng thuộc tính style cho thẻ HTML riêng lẻ:  Mở tập tin bai1.htm chế độ soạn thảo, bổ sung vào thẻ nội dung sau: Thiết kế web - yếu tố cần thiết cho người  Chạy tập tin bai1.htm trình duyệt để kiểm tra kết nmvi@agu.edu.vn Bài 2: Định dạng table Tạo tập tin bai2.htm, kẻ bảng định dạng mẫu: Hướng dẫn:  CSS table{ border: 5px groove #6633FF; padding: 1px; } th, td{ border: thin solid #FFFFFF; padding: 5px; } /* định dạng lớp head cho dòng tiêu đề */ tr.head{ color: #FFFFFF; font-weight:bold; text-align:center; background-color: #6633FF; } /* định dạng lớp odd cho dòng lẻ */ tr.odd{ background-color:#FFEEFF; } /* định dạng lớp even cho dòng chẵn */ tr.even{ background-color:#CCCCFF; }  HTML STT Mã sinh viên Họ tên Lớp 1 CST101207 Nguyễn Thị Phương Thảo CD35ST 2 CST107327 nmvi@agu.edu.vn Trương Quốc Bảo CD35ST Bài 3: Định dạng liên kết  Tạo liên kết (navigation bar) dạng cột mẫu:  Tạo liên kết (navigation bar) nằm ngang mẫu: Lưu ý: SV định dạng trạng thái liên kết tùy ý (màu sắc, font chữ, trang trí, …) nmvi@agu.edu.vn 10 Bài 3: Sử dụng tập tin bai3.htm cho sẵn:   Yêu cầu:  Viết hàm tính số câu click nút Kết Hướng dẫn: Duyệt phần tử thuộc loại radio, phần tử checked có giá trị tăng số câu lên Bài 4: Sử dụng tập tin bai4.htm cho sẵn:  Yêu cầu: Dùng javascript để kiểm tra  Họ tên bắt buộc nhập  Chọn năm sinh: ứng viên phải >=16 tuổi (so với năm hành)  Mức lương phải số (nếu có)  Phải chọn hình thức làm việc nmvi@agu.edu.vn 18  Khi click nút Gửi, mở cửa sổ hiển thị thông tin người dùng nhập form: Cảm ơn! Bên thông tin đăng ký bạn: Họ tên: Năm sinh: Giới tính: Mức lương đề nghị: Hình thức làm việc: Thơng tin bổ sung: Bài 5: Sử dụng tập tin bai5.htm cho sẵn:  Yêu cầu: Dùng javascript để kiểm tra  Email nhập vào phải hợp lệ  Điện thoại phải số, độ dài từ 10 đến 11  Các trường có dấu * khơng bỏ trống  Khi click nút Đăng ký, mở cửa sổ hiển thị thông tin người dùng nhập form: Cảm ơn bạn tham gia chương trình! Email: Điện thoại: Địa chỉ: Chúng gởi mẫu thử đến địa thời gian sớm nmvi@agu.edu.vn 19 BÀI TẬP THỰC HÀNH 06 PHP-MySQL Lưu ý: Để làm tập chương này, SV cần cài đặt Vertrigo (hoặc phần mềm khác tương đương cho đảm bảo đủ thành phần: Web server, PHP, MySQL) Lưu chạy làm:  Nếu lưu làm thư mục gốc www (ví dụ C:\Program Files\VertrigoServ\www), chạy trang php theo địa http://localhost/tên_trang http://127.0.0.1/tên_trang  Nếu lưu làm thư mục khác (ví dụ Z:\ThucHanhPHP), ta cần đặt alias để ánh xạ đến thư mục làm cách vào menu Vertrigo, chọn Settings\Aliases and dirs, tiến hành bước hình minh họa Chạy trang php theo địa http://localhost/alias/tên_trang http://127.0.0.1/alias/tên_trang nmvi@agu.edu.vn 20 BÀI TẬP CƠ BẢN Bài 1: Xử lý liệu đơn giản từ form:  Tạo trang form.htm đơn giản sau:  Khi nhấn Gửi thơng tin form chuyển sang trang xulyform.php để in thông tin VD: Bài 2: Xử lý tập tin upload lên server  Tạo thư mục upload thư mục làm bạn, dùng để chứa tập tin người dùng upload lên server  Viết trang upload.php: tạo form cho người dùng chọn tập tin Chọn file:  Viết trang xulyupload.php: đọc số thông tin tập tin chép vào thư mục lưu trữ upload tạo Bài 3: Làm quen thao tác đọc ghi sở liệu với PHP MySQL  Tạo sở liệu bai3 gồm bảng sau: linhvuc  Tên field Kiểu Ghi MaLinhVuc varchar(2) primary key TenLinhVuc varchar (20) Viết trang formlinhvuc.htm: Tạo form cho phép nhập sau: THÊM LĨNH VỰC Mã lĩnh vực Tên lĩnh vực nmvi@agu.edu.vn 22  Viết trang themlinhvuc.php: Lấy thông tin nhập từ formlinhvuc.htm để ghi vào sở liệu, sau đọc hiển thị tất lĩnh vực từ csdl lên trang web mẫu: