Download miễn phí Giáo trình Thiết kế web với ngôn ngữ HTML
MỤC LỤC
Chương 1: Giới thiệu ngôn ngữ HTML 1
1. Tổng quan 1
1.1 Giới thiệu 1
1.2 Cấu trúc cơ bản của một trang web 1
2. Các thẻ HTML 1
2.1 Các thẻ định cấu trúc tài liệu 1
2.1.1 1
2.1.2 2
2.1.3 2<br />2.1.4 <BODY> 2<br />2.2 Các thẻ định dạng khối 3<br />2.2.1 <P> và <BR> 3<br />2.2.2 <H1>, <H2>, <H3>, <H4>, <H5>, <H6> 4<br />2.3 Các thẻ định dạng danh sách 5<br />2.3.1 Danh sách có trật tự 5<br />2.3.2 Danh sách không có trật tự 5<br />2.3.3 Danh sách định nghĩa 5<br />2.4 Các thẻ định dạng ký tự 6<br />2.4.1 Các thẻ định dạng in ký tự 6<br />2.4.2 Các thẻ canh lề 7<br />2.4.3 Các thẻ ký tự đặc biệt 7<br />2.4.4 Trang trí màu sắc trong thiết kế website 8<br />2.4.5 Thẻ xác định kiểu chữ <FONT> 9<br />2.4.6 Văn bản siêu liên kết 9<br />2.4.7 Kết nối mailto 10<br />2.4.8 Vẽ một đường thẳng nằm ngang 10<br />2.5 Các thẻ chèn âm thanh, hình ảnh 11<br />2.5.1 Giới thiệu 11<br />2.5.2 Chèn âm thanh vào Website 12<br />2.5.3 Chèn hình ảnh, đoạn video vào Website 13<br />2.6 Các thẻ định dạng bảng biểu 14<br />2.7 FORM 17<br />2.7.1 Thẻ FORM 17<br />2.7.2 Tạo một danh sách lựa chọn 18<br />2.7.3 Tạo hộp soạn thảo văn bản 19<br />Chương 2: CSS (Cascading Style Sheets) 19<br />2.1 Giới thiệu chung 19<br />2.2 Sử dụng thuộc tính Style 19<br />2.3 CSS nhúng bên trong trang Web 19<br />2.4 Liên kết đến file CSS 20<br />2.5 Khảo sát file CSS 21<br />2.5.1 Cấu trúc cơ bản của một file CSS 21<br />2.5.2 Một số thuộc tính cơ bản 22<br />2.5.2.1 Các thuộc tính của hộp nhập 22<br />2.5.2.2 Các thuộc tính của đường viền 22<br />2.5.2.3 Thuộc tính Border-width 23<br />2.5.2.4 Thuộc tính height 23<br />2.5.2.5 Thuộc tính Margin 23<br />2.5.2.6 Thuộc tính Padding 23<br />2.5.2.7 Thuộc tính Width 24<br />2.5.2.8 Thuộc tính color và Background 24<br />2.5.2.9 Các thuộc tính về font 24<br />2.5.2.10 Các thuộc tính Text 26<br />2.5.3 Tạo file CSS với công cụ Rapid CSS 2006 (HS nghiên cứu) 27<br />Chương 3: JavaScript 33<br />2.1 Giới thiệu chung 33<br />2.2 Cách thức nhúng JavaScript vào file HTML 33<br />2.3 Sử dụng thẻ SCRIPT 33<br />2.4 Sử dụng một file nguồn JavaScript 33<br />2.5 Hiển thị một dòng Text trên Website 34<br />2.6 Giao tiếp với người sử dụng thông qua hộp thoại 34<br />2.6.1 Hàm Alert 34<br />2.6.2 Hàm Prompt 35<br />2.6.3 Hàm Comfirm 36<br />2.7 Biến trong JavaScript 36<br />2.7.1 Biến và phân loại biến 36<br />2.7.2 Kiểu dữ liệu 37<br />2.8 Xây dựng các biểu thức trong JavaScript 37<br />2.8.1 Định nghĩa và phân loại biểu thức 37<br />2.8.2 Các toán tử 37<br />2.8.2.1 Gán 37<br />2.8.2.2 So sánh 38<br />2.8.2.3 Số học 38<br />2.8.2.4 Chuỗi 38<br />2.8.2.5 Logic 38<br />2.8.2.6 Bitwise 39<br />2.9 Các cấu trúc lệnh của JavaScript 39<br />2.9.1 Lệnh điều kiện if . else 39<br />2.9.2 Câu lệnh lặp 40<br />2.9.2.1 Lệnh For 40<br />2.9.2.2 Lệnh While 40<br />2.9.2.3 Lệnh Break 41<br />2.9.2.4 Lệnh Continue 41<br />2.10 Các câu lệnh thao tác trên đối tượng 42<br />2.10.1 Lệnh For.in 42<br />2.10.3 New 43<br />2.10.4 Lệnh With 44<br />2.11 Hàm trong JavaScript 44<br />2.11.1 Hàm do người dùng định nghĩa 45<br />2.11.2 Các hàm có sẵn 46<br />2.11.2.1 Hàm eval 46<br />2.11.2.2 Hàm Parseint 47<br />2.11.2.3 Hàm Parsefloat 47<br />2.12 Mảng 48<br />2.13 Sự kiện 49<br />2.14 Các đối tượng trong JavaScript 55<br />2.14.1 Đối tượng Navigator 56<br />2.14.2 Đối tượng Windows 57<br />2.14.3 Đối tượng Location 58<br />2.14.4 Đối tượng Frame 58<br />2.14.5 Đối tượng Document 59<br />2.14.6 Đối tượng Form 60<br />2.14.7 Đối tượng History 73<br />2.14.8 Đối tượng Math 73<br />2.14.9 Đối tượng Date 74<br />2.14.10 Đối tượng String 75<br />Chương 4: Ngôn ngữ kịch bản ASP 77<br />4.1 Giới thiệu 77<br />4.2 ASP file là gì? 77<br />4.3 ASP làm việc như thế nào? 77<br />4.4 Cài đặt ASP trên máy tính 78<br />4.5 Ngôn ngữ kịch bản VBScript 79<br />4.5.1 Biến 79<br />4.5.2 Mảng 80<br />4.5.2.1 Mảng một chiều 80<br />4.5.2.2 Mảng đa chiều 80<br />4.5.3 Hằng số 80<br />4.5.4 Cấu trúc điều khiển lệnh 80<br />4.5.4.1 Cấu trúc điều kiện IF THEN ELSE IF 80<br />4.5.4.2 Cấu trúc lựa chọn SELECT CASE END SELECT 81<br />4.5.4.3 Cấu trúc lặp tuần tự FOR NEXT 81<br />4.5.4.4 Cấu trúc lặp DO WHILE LOOP 81<br />4.5.4.5 Cấu trúc lặp WHILE WENT 81<br />4.5.4.6 Cấu trúc lặp DO LOOP UNTIL 82<br />4.5.5 Một số hàm cơ bản trong ASP 82<br />4.5.5.1 Hàm xử lý chuỗi 82<br />4.5.5.2 Các hàm xử lý số 82<br />4.5.5.3 Các hàm chuyển đổi kiểu 82<br />4.5.5.4 Các hàm format 83<br />4.5.5.5 Các hàm ngày tháng 83<br />4.5.5.6 Các hàm kiểm tra 83<br />4.5.5.7 Thủ tục và hàm người dùng 84<br />4.5.6 Sử dụng thẻ #include 86<br />4.5.7 Các đối tượng xây dựng sẵn trong ASP 87<br />4.5.7.1 Đối tượng Request 87<br />4.5.7.2 Đối tượng Response 88<br />4.5.7.3 Đối tượng Session 88<br />4.5.7.4 Đối tượng Application 89<br />4.5.7.5 File Global.asa 89<br />4.5.7.6 Đối tượng Dictionary 91<br />4.5.7.7 Đối tượng Server 91<br />4.5.8 Database và ASP 91<br />4.5.8.1 SQL-Ngôn ngữ truy vấn có cấu trúc 92<br />4.5.8.2 Truy xuất dữ liệu từ một trang ASP 93<br />4.5.8.3 ADO là gì? 93<br />4.5.8.4 Đối tượng Connection 93<br />4.5.8.5 Đối tượng Recordset 94<br />4.5.8.6 Sử dụng ADO với câu lệnh truy vấn SQL 95<br />4.5.8.7 Một số bài tập ứng dụng 96<br />4.5.9 Xây dựng ứng dụng ASP hoàn chỉnh 97<br />4.5.9.1 Xây dựng Website quản lý sinh viên. 97<br />4.5.9.2 Xây dựng Website tin tức. 97<br />4.5.9.3 Xây dựng Website trưng cầu ý kiến. 97<br />4.5.9.4 Xây dựng Website thư viện ảnh. 97<br />5. Xây dựng website quản lý văn bản<br /> <br /> <br /><br />
<br /> <span style="display:none" id="idgoc">http://cloud.liketly.com/flash/edoc/jh2i1fkjb33wa7b577g9lou48iyvfkz6-swf-2014-02-11-giao_trinh_thiet_ke_web_voi_ngon_ngu_html.m9Pk3qh7Yp.swf /tai-lieu/de-tai-ung-dung-tren-liketly-57896/</span><br /><b>Để tải bản Đầy Đủ của tài liệu, xin Trả lời bài viết này, Mods sẽ gửi Link download cho bạn sớm nhất qua hòm tin nhắn.</b><br>Ai cần download tài liệu gì mà không tìm thấy ở đây, thì đăng yêu cầu down tại đây nhé:<br><a href="http://ket-noi.com/forum/viewtopic.php?f=131&t=100854" target="_blank" class="link link--external" rel="nofollow ugc noopener">Nhận download tài liệu miễn phí</a><h3>Tóm tắt nội dung tài liệu:</h3>thúc việc thực hiện của vòng lặp for hay while. Chương trình được tiếp tục thực hiện tại câu lệnh ngay sau chỗ kết thúc của vòng lặp.<br />
Cú pháp<br />
break;<br />
Đoạn mã sau lặp cho đến khi x lớn hơn hay bằng 100. Tuy nhiên nếu giá trị x đưa vào vòng lặp nhỏ hơn 50, vòng lặp sẽ kết thúc<br />
Ví dụ: <br />
x=1;<br />
while (x<100)<br />
{<br />
if (x<50) break;<br />
x++;<br />
}<br />
2.9.2.4 Lệnh Continue<br />
Lệnh continue giống lệnh break nhưng khác ở chỗ việc lặp được kết thúc và bắt đầu từ đầu vòng lặp. Đối với vòng lặp while, lệnh continue điều khiển quay lại ; với for, lệnh continue điều khiển quay lại incrExpr.<br />
Cú pháp<br />
continue;<br />
Ví dụ:<br />
Đoạn mã sau tăng x từ 0 lên 5, nhảy lên 8 và tiếp tục tăng lên 10<br />
x=0;<br />
while (x<=10)<br />
{<br />
document.write(“Giá trị của x là:”+ x+””);<br />
if (x==5)<br />
{<br />
x=8;<br />
continue;<br />
}<br />
x++;<br />
}<br />
2.10 Các câu lệnh thao tác trên đối tượng<br />
JavaScript là một ngôn ngữ dựa trên đối tượng, do đó nó có một số câu lệnh làm việc với các đối tượng.<br />
2.10.1 Lệnh For...in<br />
Câu lệnh này được sử dụng để lặp tất cả các thuộc tính (properties) của một đối tượng. Tên biến có thể là một giá trị bất kỳ, chỉ cần thiết khi bạn sử dụng các thuộc tính trong vòng lặp. Ví dụ sau sẽ minh hoạ điều này<br />
Cú pháp<br />
for ( in )<br />
{<br />
//Các câu lệnh<br />
}<br />
Ví dụ<br />
Lấy ra tất cả các thuộc tính của đối tượng Window và in ra tên của mỗi thuộc tính. <br />
For in Example <br />
document.write("The properties of the Window object are: ");<br />
for (var x in window)<br />
document.write(" "+ x + ", ");<br />
2.10.2 This<br />
Từ khoá this được sử dụng để chỉ đối tượng hiện thời.<br />
Cú pháp:<br />
this [.property]<br />
2.10.3 New<br />
Biến new được thực hiện để tạo ra một thể hiện mới của một đối tượng<br />
Cú pháp:<br />
objectvar = new object_type ( param1 [,param2]... [,paramN])<br />
Ví dụ: <br />
New Example <br />
function person(first_name, last_name, age, sex)<br />
{<br />
this.first_name=first_name;<br />
this.last_name=last_name;<br />
this.age=age;<br />
this.sex=sex;<br />
}<br />
//nhap vao so nguoi n<br />
if (n>0)<br />
for (var i=1; i<=n; i++)<br />
{<br />
//khoi tao nguoi thu i<br />
//nhap vao ten<br />
//nhap vao ho<br />
//nhap vao tuoi<br />
person=new person(<br />
}<br />
person1= new person("Thủy", "Đậu Bích", "23", "Female");<br />
person2= new person("Chung", "Nguyễn Bảo", "24", "Male");<br />
person3= new person("Bình", "Nguyễn Nhật", "24", "Male");<br />
person4= new person("Hoàn", "Đỗ Văn", "24", "Male");<br />
document.write ("1. " + person1.last_name + " " + person1.first_name + "" );<br />
document.write("2. " + person2.last_name +" "+ person2.first_name + "");<br />
document.write("3. "+ person3.last_name + " " + person3.first_name + "");<br />
document.write("4. " + person4.last_name + " " + person4.first_name + "");<br />
Chú ý:<br />
Sau khi tạo đối tượng person có các thuộc tính firstname, lastname, age, sex. Chú ý rằng từ khoá this được sử dụng để chỉ đối tượng trong hàm person. Sau đó ba thể hiện của đối tượng person được tạo ra bằng lệnh new<br />
2.10.4 Lệnh With<br />
Lệnh này được sử dụng để thiết lập đối tượng ngầm định cho một nhóm các lệnh, bạn có thể sử dụng các thuộc tính mà không đề cập đến đối tượng.<br />
Cú pháp:<br />
with (object)<br />
{<br />
// statement<br />
}<br />
Ví dụ:<br />
Ví dụ sau chỉ ra cách sử dụng lệnh with để thiết lập đối tượng ngầm định là document và có thể sử dụng cách write mà không cần đề cập đến đối tượng document<br />
With Example <br />
with (document)<br />
{<br />
write(“This is an exemple of the things that can be done ”);<br />
write(“With the with statment. ”);<br />
write(“This can really save some typing”);<br />
}<br />
2.11 Hàm trong JavaScript<br />
2.11.1 Hàm do người dùng định nghĩa<br />
JavaScript cũg cho phép sử dụng các hàm. Mặc dù không nhất thiết phải có, song các hàm có thể có một hay nhiều tham số truyền vào và một giá trị trả về. Bởi vì JavaScript là ngôn ngữ có tính định kiểu thấp nên không cần định nghĩa kiểu tham số và giá trị trả về của hàm. Hàm có thể là thuộc tính của một đối tượng, trong trường hợp này nó được xem như là cách của đối tượng đó.<br />
Lệnh function được sử dụng để tạo ra hàm trong JavaScript.<br />
Cú pháp:<br />
function fnName([param1],[param2],...,[paramN])<br />
{<br />
//các câu lệnh<br />
}<br />
Ví dụ:<br />
Ví dụ sau minh hoạ cách thức tạo ra và sử dụng hàm như là thành viên của một đối tượng. Hàm printStats được tạo ra là cách của đối tượng person<br />
Function Example <br />
function person(first_name, last_name, age, sex, printStats)<br />
{<br />
this.first_name=first_name;<br />
this.last_name=last_name;<br />
this.age=age;<br />
this.sex=sex;<br />
this.printStats=printStats;<br />
}<br />
function printStats()<br />
{<br />
with (document)<br />
{<br />
write (" Name :" + this.last_name + " " + this.first_name + "" );<br />
write("Age :"+this.age+"");<br />
write("Sex :"+this.sex+"");<br />
}<br />
}<br />
person1= new person("Thuy", "Dau Bich", "23", "Female");<br />
person2= new person("Chung", "Nguyen Bao", "24", "Male");<br />
person3= new person("Binh", "Nguyen Nhat", "24", "Male");<br />
person4= new person("Hoan", "Do Van", "23", "Male");<br />
person1.printStats();<br />
person2.printStats();<br />
person3.printStats();<br />
person4.printStats();<br />
2.11.2 Các hàm có sẵn<br />
2.11.2.1 Hàm eval<br />
Hàm này được sử dụng để đánh giá các biểu thức hay lệnh. Biểu thức, lệnh hay các đối tượng của thuộc tính đều có thể được đánh giá. Đặc biệt hết sức hữu ích khi đánh giá các biểu thức do người dùng đưa vào (ngược lại có thể đánh giá trực tiếp).<br />
Cú pháp:<br />
Tên_biến=eval (bất kỳ biểu thức hay lệnh hợp lệ trong Java)<br />
Ví dụ:<br />
New Example <br />
function person(first_name, last_name, age, sex)<br />
{<br />
this.first_name=first_name;<br />
this.last_name=last_name;<br />
this.age=age;<br />
this.sex=sex;<br />
}<br />
person1= new person("Thủy", "Đậu Bích", "23", "Female");<br />
person2= new person("Chung", "Nguyễn Bảo", "24", "Male");<br />
person3= new person("Bình", "Nguyễn Nhật", "24", "Male");<br />
person4= new person("Hoàn", "Đỗ Văn", "24", "Male");<br />
//đoạn code thay thế cho ví dụ trước<br />
for(i=1;i<=4;i++)<br />
{<br />
human=eval("person"+i);<br />
document.write(i + ". " + human.last_name +" " + human.first_name + "");<br />
}<br />
2.11.2.2 Hàm Parseint<br />
Hàm này chuyển một chuỗi số thành số nguyên với cơ số là tham số thứ hai (tham số này không bắt buộc). Hàm này thường được sử dụng để chuyển các số nguyên sang cơ số 10 và đảm bảo rằng các dữ liệu đưọc nhập dưới dạng ký tự được chuyển thành số trước khi tính toán. Trong trường hợp dữ liệu vào không hợp lệ, hàm parseInt sẽ đọc và chuyển dạng chuỗi đến vị trí nó tìm thấy ký tự không phải là số. Ngoài ra hàm này còn cắt dấu phẩy động.<br />
Cú pháp:<br />
parseInt (string, [, radix])<br />
Ví dụ:<br />
perseInt Exemple <br />
document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) + "");<br />
document.write("Converting 1100 binary to base-10: " + parseInt(1100,2) + "");<br />
Kết quả:<br />
2.11.2.3 Hàm Parsefloat<br />
Hàm này giống hàm parseInt nhưng nó chuyển chuỗi thành số biểu diễn dưới dạng dấu phẩy động.<br />
Cú pháp<br />
parseFloat (string)<br />
Ví dụ:<br />
Ví dụ sau minh hoạ cách thức xử lý của parseFloat với các kiểu chuỗi khác nhau.<br />
perseFload Exemple <br />
document.write("This script will show how diffrent strings are ");<br />
document.write("Converted using parseFloat");<br />
document.write("137= " + parseFloat("137") + "");<br />
document.write("137abc= " + parseFloat("137abc") + "");<br />
document.write("abc137= " + parseFloat("abc137") + "");<br />
document.write("1abc37= " + parseFloat("1abc37") + "");<br />
2.12 Mảng<br />
Mặc dù JavaScript không hỗ trợ cấu trúc dữ liệu mảng nhưng Netscape tạo ra cách cho phép bạn tự tạo ra các hàm khởi tạo mảng như sau:<br />
function InitArray(NumElements){<br />
this.length = numElements;<br />
for (var x=1; x<=numElements; x++){<br />
this[x]=0<br />
}<br />
return this;<br />
}<br />
Nó tạo ra một mảng với kích thước xác định trước và điền các giá trị 0. Chú ý rằng thành phần đầu tiên trong mảng là độ dài mảng và không được sử dụng.<br />
Để tạo ra một mảng, khai báo như sau:<br />
m...</FONT></P></BODY>
