Bài giảng Lập trình mạng (Phần 1)

seudo- classes. Pseudo-
classes cho phép xác định các hiệu ứng định dạng cho một đối tƣợng liên kết ở một trạng 
thái xác định nhƣ khi liên kết chƣa đƣợc thăm (a:link), khi rê chuột lên liên kết 
(a:hover), khi liên kết đƣợc thăm (a:visited) hay khi liên kết đang đƣợc kích hoạt – đang 
giữ nhấn chuột (a:active). Với điều khiển pseudo- classes cùng với các thuộc tính CSS đã 
học chắc chắn sẽ mang lại rất nhiều ý tƣởng về trang trí liên kết cho trang web. 
Sau đây chúng ta sẽ tiến hành một số ví dụ để tìm hiểu thêm về các khả năng trang 
trí cho một liên kết dựa trên pseudo-classes. 
Ví dụ này chúng ta sẽ áp dụng 3 màu sắc khác nhau cho từng trạng thái liên kết: 
các liên kết chƣa thăm có màu xanh lá; các liên kết mouse over sẽ có màu đỏ tƣơi; các 
liên kết đã thăm sẽ có màu đỏ. 
Ví đụ 2.31: 
a:link { 
 color:#00FF00 
} 
a:hover { 
 color:#FF00FF 
} 
a:visited { 
 color:#FF0000 
} 
2). Tạo và sử dụng lớp (class) 
Nhƣ chúng ta đã biết mỗi lệnh trong CSS sẽ định dạng cho một hoặc nhiều thành 
phần HTML nào đó trong trang web (các thẻ trong HTML). Nhƣng có khi trong thiết kế 
 72 
chúng ta mong muốn một số thành phần nào đó sẽ có những định dạng khác nhƣ khác về 
màu sắc, đƣờng viền, size chữ  
Ví dụ 2.32 : ta viết CSS sau: 
p {color: black; font-size: 12px} 
Khi đó tất cả các thành phần p sẽ có màu đen, kích cỡ size 12px. Nhƣng chúng ta 
muốn một số thành phần p có màu xanh, một số thành phần p khác lại có màu vàng. 
Class và ID đƣợc gắn thêm vào thẻ HTML giúp ta có thêm lựa chọn để giải quyết vấn 
đề trên. Lúc này class và id trở thành các CSS selector. 
Class hay còn gọi là lớp dùng để chỉ một lớp các đối tƣợng có chung các thuộc tính. 
Các đối tƣợng trong cùng một class có tính thừa kế lẫn nhau, chính vì vậy trong một trang 
HTML của Chúng ta có thể có rất nhiều các đối tƣợng có thể thuộc một class nào đó. Ví dụ 
sau đây sẽ minh chứng cho về tính thừa kế và việc định nghĩa nhiều đối tƣợng cùng thuộc 
một class nào đó. 
Để tạo và áp dụng Class đơn giản chúng ta thêm thuộc tính Class = ―Tên class‖ vào thẻ tƣơng 
ứng 
Để định nghĩa class chúng ta sử dụng (.Tên class ) nhƣ là một selector. 
Ví dụ 2.32: 
Ta sẽ định dạng cho một thành phần p có màu xanh, và một thành phần p có màu 
vàng. Và một thành phần p đƣợc hiển thị bình thƣờng nhƣ sau: 
Đoạn văn bản hiển thị bình thƣờng màu đen 
Đoạn văn bản hiển thị màu xanh 
Đoạn văn bản hiển thị màu vàng 
Nhƣ vậy ở trên chúng ta cần phải định nghĩa 2 lớp đó là class blue và yellow. Để định 
nghĩa 2 lớp này ta làm nhƣ sau: 
.blue{ color: blue} 
.yellow{ color: yellow} 
3). Tạo và sử dụng định danh (id) 
id hay là index(chỉ số) đƣợc dùng để xác định một đối tƣợng duy nhất nào đó. Do đó 
trong một trang HTML mỗi đối tƣợng chỉ có duy nhất một id, nếu có 2 đối tƣợng trở lên có 
id giống nhau trong cùng một trang thì điều đó có nghĩa là trang đó của chúng ta không 
validate HTML. 
Cách sử dụng id hoàn toàn giống class, ta chỉ thay dấu . bằng dấu # trƣớc tên id khi định 
nghĩa. 
Ví dụ 2.33: 
Đoạn văn bản hiển thị màu đỏ 
#red{ color: red} 
 73 
Sự khác biệt lớn nhất giữa class và Id là ID là duy nhất, còn class thì có nhiều. Trong 
một trang web không thể tồn tại hai id có cùng tên. Nhƣng có thể sử dụng nhiều css có 
cùng tên cho các thành phần khác nhau. 
Điểm khác biệt thứ 2 giữa class và id là có thể sử dụng nhiều class cho một thành 
phần nào đó, còn id thì chỉ một. Đoạn mã sau cho thấy cách sử dụng 2 class có tên bor và 
top cho một thành phần p 
2.20.4. Định dạng bằng CSS 
Nhƣ phần trên đã giới thiệu, css có thể giúp chúng ta trình bầy một tài liệu HTML 
sinh động, đẹp mắt, với các thuộc tính phong phú và đa dạng của css có thể giúp chúng ta 
định dạng, căn chỉnh các tài liệu trên trang web một cách đơn giản và chuyên nghiệp và có 
thể áp dụng cho toàn bộ website. Phần trên chúng ta đã nghiên cứu các thuộc tính hay dùng 
trong css giúp định dạng và căn chỉnh một tài liệu html. Trong phần này chúng ta sẽ tìm 
hiểu một số ví dụ cụ thể dùng css định dạng các tài liệu trong html nhƣ định dạng văn bản, 
định dạng hình ảnh,  
Định dạng văn bản 
Các đoạn văn trong các văn bản trên web cần phải đƣợc trình bầy thống nhất nhƣ màu 
chữ, cỡ chữ, kiểu chữ, căn lề, khoảng cách dòng  
Ví dụ 2.34: sau đây sẽ tạo ra một css giúp căn chỉnh các đoạn văn trong tài liệu 
HTML 
p { font-family: Times New Roman; 
font-size: 14pt; 
 text-align: justify; 
 line-height: 150%; 
text-indent: 6; 
 margin-top: 6 ; 
color:#008080 
} 
Định dạng hình ảnh 
Ví dụ 2.35: sau đây sẽ định dạng kích thƣớc của các hình ảnh khi chèn vào trang web 
img { 
clip:rect(50px 218px 155px 82px); 
} 
Tạo đƣờng viền 
Ví dụ 2.36: này sẽ định dạng đƣờng viền có bo góc 
.rounded_corner { 
-moz-border-radius:10px; 
 74 
-webkit-border-radius:10px; 
width:400px; 
height:100px; 
background-color:#000; 
} 
Định dạng liên kết 
Ví dụ 2.37: này sẽ định dạng cho văn bản liên kết trên web 
a { 
border:1px solid #000; 
font-size:14px 
} 
a:link { 
color:#00FF00; 
} 
a:hover { 
background-color:#00BFF3; 
color:#FF00FF; 
font-size:1.2em; 
text-decoration:blink 
} 
a:visited { 
background-color:#FFF568; 
color:#FF0000; 
text-decoration:none 
} 
a:active { color:#662D91; font-variant:small-caps } 
2.21. Công cụ trong thiết kế Web 
2.21.1. Tổng quan về các loại công cụ 
Ngày nay có rất nhiều công cụ hỗ trợ chúng ta trong việc thiết kế và xây dựng 
website. Nhờ có các công cụ này mà việc tạo một website đã trở nên trực quan hơn, đơn 
giản hơn, và trang web trở nên đẹp hơn. 
Hiện có nhiều loại công cụ khác nhau đƣợc giới thiệu với nhiều loại tính năng khác 
nhau với những mức độ chuyên nghiệp khác nhau. Việc lựa chọn công cụ nào là tùy thuộc 
tào khả năng và trình độ của ngƣời thiết kế tuy nhiên chúng ta thấy hầu hết các công cụ 
thuộc vào một trong các nhóm công cụ sau: 
 75 
- Công cụ soạn thảo 
- Công cụ tạo và xử lý ảnh tĩnh 
- Công cụ tạo và xử lý ảnh động 
- Công cụ download, upload trang web 
2.21.2. Công cụ soạn thảo 
Các công cụ soạn thảo giúp cho chúng ta có thể dễ dàng tạo ra một trang web bằng 
việc kích chuột và lựa chọn các đối tƣợng, chƣơng trình sẽ tự động giúp sinh mã nguồn 
HTML để tạo ra các trang web tƣơng ứng. Các chƣơng trình này còn giúp chúng ta dễ 
dàng tạo bố cục các trang một cách trực quan. Ngoài ra các chƣơng trình còn hỗ trợ việc 
viết các mã nguồn html để tạo các trang web hay lập trình bằng các ngôn ngữ khác nhƣ 
javascript, vbscript ... 
Hiện có 2 công cụ đƣợc nhiều ngƣời lựa chọn sử dụng đó là Microsoft FontPage và 
Adobe Dreamweaver 
Microsoft FontPage 
Microsoft Frontpage là một phần mềm thiết kế web chuyên nghiệp của hãng phần 
mềm Microsoft. Phần mềm này đƣợc đi kèm với bộ Office, bao gồm những tính năng vƣợt 
trội nhƣng lại rất dễ sử dụng. 
Với Frontpage chúng ta có thể dễ dàng tạo một trang web đơn, một web site, hoặc 
dùng để cập nhật cho những trang web đã có sẵn mà không cần có những kiến thức nhƣ là 
Java, lập trình hoặc thậm chí ngôn ngữ HTM. Vì Frontpage biến việc thiết kế web đơn giản 
nhƣ khi ta soạn thảo một văn bản trong Microsoft Word vậy. 
Hình 2.24. Microsoft Fontpage sử dụng trong thiết kế 
 76 
Hình 2.25. Microsoft Fontpage soạn thảo mã nguồn 
Dreamweaver 
Là một phần mềm thiết kế Web chuyên nghiệp, Tƣơng thích với nhiều đối tƣợng 
nhúng (Flash, Shockwave, Active X, ), Hỗ trợ các công cụ thiết kế trang Web động rất 
hiệu quả. 
Cũng nhƣ Frontpage, Dreamweaver cho phép chúng ta dễ dàng tạo và thiết kế một 
trang web hay website bằng cả 2 hình thức thiết kế trực quan nhƣ word và vết bằng lệnh 
của ngôn ngữ lập trình nhƣ HTML, javascript, vbscript, php, asp 
 77 
Hình 2.26. Màn hình soạn thảo trang web của DreamWeaver 
2.21.3. Công cụ tạo và xử lý ảnh tĩnh 
Hình ảnh là một phần không thể thiếu đƣợc trong trang web, hình ảnh giúp ta mô tả 
các nội dung một cách sinh động, đơn giản và dễ hiểu hơn. 
Ngày nay có nhiều công cụ giúp ta xử lý hình ảnh nhƣ, lắp gép, tạo và chỉnh sửa ảnh, 
một trong những công cụ dễ làm, chuyên nghiệp đƣợc nhiều ngƣời lựa chọn đó là phần 
mềm Photoshop. 
Adobe Photoshop là một phần mềm xử lý ảnh chuyên nghiệp. Photoshop cho phép 
ngƣời sử dụng tút sửa ảnh (retouching), ghép ảnh (composing), phục chế ảnh (restoration), 
tô màu tranh ảnh (painting) một cách dễ dàng và hiệu quả. 
Phần mềm này là một công cụ không thể thiếu của các nhiếp ảnh gia, các nhà thiết kế 
đồ hoạ, thiết kế web và biên tập video. 
Ngoài ra Adobe Photoshop CS4 còn phối hợp rất tốt với các phần mềm khác của 
hãng Adobe nhƣ: 
- Phần mềm vẽ trang trí và minh họa Adobe Illustrator. 
- Phần mềm sắp chữ và trình bày Adobe InDesign. 
- Phần mềm tạo hình ảnh động Adobe Flash 
- Phần mềm thiết kế trang web Adobe Dreamweaver 
2.21.4. Công cụ Flash, tạo và xử lý ảnh động 
Ảnh động là không thể thiếu đƣợc trên trang web chẳng hạn nhƣ banner, logo, hay 
các đoạn phim trên web. Việc đƣa ảnh động vào web giúp cho trang web sinh động hơn, 
đẹp hơn và dễ chuyển tải các nội dung hơn, có thể thực hiện các mô phỏng trực quan sinh 
động. 
Flash là một phần mềm cho phép tạo và xủ lý ảnh động cho trang web tốt nhất hiện 
nay. Adobe Flash (trƣớc đây là Macromedia Flash và trƣớc đó FutureSplash), hay còn gọi 
một cách đơn giản là Flash, đƣợc dùng để chỉ chƣơng trình sáng tạo đa phƣơng tiện 
(multimedia) lẫn phần mềm dùng để hiển thị chúng Macromedia Flash Player. Chƣơng 
trình điện toán này đƣợc viết và phân phối bởi Adobe Systems (công ty đã mua 
Macromedia). Flash dùng kỹ thuật đồ họa vectơ và đồ họa điểm (raster graphics). Ngoài ra 
Flash còn có một ngôn ngữ văn lệnh riêng gọi là ActionScript và có khả năng truyền và tải 
luồng âm thanh hoặc hình ảnh. Đúng ra thì từ Macromedia Flash nên đƣợc dùng để chỉ 
chƣơng trình tạo ra các tập tin Flash. Còn từ Flash Player nên đƣợc dành để chỉ ứng dụng 
có nhiệm vụ thi hành hay hiển thị các tập tin Flash đó. Tuy vậy, chữ Flash đƣợc dùng để 
chỉ cả hai chƣơng trình nói trên. 
 78 
Flash là công cụ để phát triển các ứng dụng nhƣ thiết kế các phần mềm mô phỏng. Sử 
dụng ngôn ngữ lập trình ActionScript để tạo các tƣơng tác, các hoạt cảnh trong phim. Điểm 
mạnh của Flash là có thể nhúng các file âm thanh, hình ảnh động. Ngƣời lập trình có thể 
chủ động lập các điều hƣớng cho chƣơng trình. Flash cũng có thể xuất bản đa dạng các file 
kiểu html, exe, jpg,...để phù hợp với các ứng dụng của ngƣời sử dụng nhƣ trên Web, CD, 
Các tập tin Flash, thƣờng thƣờng mang phần mở rộng là .swf và có thể hiện thị bởi 
các chƣơng trình duyệt trang Web hay ứng dụng Flash Player. Các tập tin Flash thƣờng là 
hoạt họa, quảng cáo hay các thành phần trang trí của các trang Web. Gần đây Flash còn 
đƣợc sử dụng để tạo ra các ứng dụng Internet phong phú. Với một kích thƣớc tƣơng tự, 
một tập tin Flash có thể chứa nhiều thông tin hơn là một tập tin hình dạng GIF hay dạng 
JPEG. 
2.21.5. Công cụ Download, Upload trang Web 
 Với một ngƣời làm về web thì việc trao đổi thông tin trên mạng là cần thiết chẳng 
hạn nhƣ phải upload toàn dữ liệu lên web, hay Download tài liệu về. Hiện có nhiều công cụ 
giúp chúng ta thực hiện việc truyền file. Một trong những công cụ đó là CuteFTP 
Professional. 
CuteFTP Professional là một phần mềm để chuyển files qua nhiều giao thức internet 
giữa máy tính của Chúng ta tới các máy tính bất kỳ nơi nào trên internet một cách an toàn 
và hiệu quả. Chức năng Connection Wizard tích hợp trong phần mềm sẽ hƣớng dẫn kết nối 
tới một site fxp trong vài giây và giao diện thân thiện của phần mềm sẽ giúp Chúng ta 
chuyển file dễ dàng ngay khi Chúng ta là ngƣời mới sử dụng. Kể cả việc xuất một trang 
web, download những hình ảnh kỹ thuật số, phần mềm, file nhạc mới nhất hoặc chuyển file 
có dung lƣợng lớn giữa các văn phòng chi nhánh. 
 79 
Hình 2.27. Giao diện của chƣơng trình CuteFTP Professional 
CuteFTP Professional cung cấp các công cụ đơn giản mà mạnh mẽ để giải quyết 
những thách thức phức tạp trong quản lý dữ liệu và giúp hoàn tất các yêu cầu về HIPAA, 
GLBA về Sarbanes-Oxley. 
- CuteFTP Professional đƣợc giới chuyên môn đánh giá cao nhất về độ an toàn và 
tiện ích nó mang lại khi vận chuyển files. Đƣợc bình chọn đứng thứ 2 trong toptenreviews 
2007 
- Tƣơng thích với Windows 98/ME/NT/2000/XP 
- Tƣơng thích với Windows 2003 & IIS6 
- Dễ dàng với RFC 959, 2228, 2389, 2289 & hơn nữa 
- Dễ dàng với OpenSSL Libraries 0.9.7d 
- Dễ dàng với ZLIB Libraries 1.2.1 
- Dễ dàng với với những phƣơng thức chuyển thông tin mới nhất (Secure Shell) 
- Khởi động nhanh (Delay Loaded Components) 
 80 
Câu hỏi và Bài tập chƣơng 2 
1. Tiêu đề trong trang Web có mấy mức chính? 
2. Nêu các thuộc tính của thẻ Paragraph (). Hãy tạo một trang web đơn giản trong 
đó có sử dụng tiêu đề mức 2 và thẻ Paragraph (). 
3. Tạo một trang web đơn giản tự giới thiệu về mình, chúng ta bao nhiêu tuổi, chúng 
ta làm gì, sở thích của bạn. 
4. Áp dụng những gì đã học ở trên, hãy tạo một danh sách nhƣ sau: 
 Top level 1 
 Top level 2 
1. Second Level 
o Fact 1 
o Fact 2 
 Top level 3 
5. Áp dụng những gì đã học ở trên, hãy tạo bảng giống nhƣ sau: 
Tổng kết năm học 2003 - 2004 
Thống kê HS giỏi HS khá HS trung bình 
Lớp 1A 35 4 0 
Lớp 1B 20 10 12 
Lớp 1C 5 25 20 
6. Hãy cho biết tại sao các ảnh dƣới đây có thể đƣợc nhúng vào trong một tài liệu 
HTML? Viết đoạn code đƣợc dùng để nhúng các ảnh đó. 
7. Tạo một trang web và chèn các ảnh sao cho ảnh nằm ở phía bên trái, và các đoạn 
văn bản nằm bên phải. 
8. Tạo một trang web và chèn các ảnh sao cho ảnhh đƣợc căn giữa và các đoạn văn 
bản nằm ở trên hoặc ở bên dƣới. 
 81 
9. Tạo một trang khác giới thiệu chi tiết hơn về mình và có liên kết tới trang giới 
thiệu chính của mình. 
10. Chèn 2 ảnh vào trong trang giới thiệu chính sao cho khi click vào ảnh đó thì trang 
giới thiệu chi tiết đƣợc mở ra. Yêu cầu: ảnh thứ nhất sử dụng đƣờng dẫn tuyệt đối, ảnh thứ 
hai sử dụng đƣờng dẫn tƣơng đối tới trang cần liên kết. 
11. Tạo một trang thứ ba trong đó có chèn một đoạn Video clips ở giữa trang. 
12. Sửa trang giới thiệu tóm tắt về mình sao cho nền của trang đó là một ảnh bất kỳ, 
trang giới thiệu chi tiết có nền màu xanh nƣớc biển nhạt. 
13. Dùng thẻ IFRAME để nhúng trang thứ 3 vào trong trang giới thiệu tóm tắt (trang 
chủ). 
14. Tạo ra một trang web mới dùng để đăng nhập có giao diện nhƣ ở hình dƣới (sử 
dụng FORM). 
15. Tạo một file css để đặt mặc định kiểu font và màu cho các phần giới thiệu của bạn. 
16. Hãy tạo ra trang web cho phép đăng ký thông tin ngƣời dùng trên mạng theo mẫu 
sau: 
17. Hãy tạo trang web cho phép nhập thông tin về hàng hóa nhƣ sau: 
 82 
18. Hãy thiết kế một website giải trí có bố cục nhƣ sau 
Top 
Left 
Main 
Right 
Bottom 
Trong đó: 
- Phần top hiển thị nội dung trang banner.htm 
- Phần left hiển thị nội dung trang login.htm 
- Phần Right hiển thị nội dung trang menuright.htm 
- Phần Bottom hiển thị nội dung trang address.htm 
- Phần main hiển thị các trang khi liên kết đến