Canh lề văn bản trong trang we

Ớ Trong khi trình bày trang web, ựể có bố cục ựẹp ta cần phải chú ý ựến việc căn lề văn bản. Một số thẻ như <p>, <h1>Ầ<h6>, <img /> ựều có thuộc tắnh align = left / right /

center ựể canh chỉnh.

Ớ Ngoài ra, ta có thể sử dụng thẻ <center>Ầ</center> ựể căn giữa trang 1 khối văn bản

c. Các kắ tựựặc biệt

Ớ Ký tự & ựược sử dụng ựể chỉ chuỗi ký tự ựi sau ựược xem là một thực thể duy nhất. Ớ Ký tự ; ựược sử dụng ựể tách các ký tự trong một từ.

STT Ký tự Tên chuỗi Mã ASCII

1 < < <

2 > > >

3 & & &

4 Ộ " "

5 Ổ '

(not work in IE)

' 6 Ký tự trắng     7 ằ ¢ ¢ 8 ặ £ £ 9 ầ ¥ ¥ 10 ậ § § 11 ẹ © © 12 ệ ® ® 13 x × × 14 ọ ÷ ÷ Ớ Vắ dụ:

Mã nguồn Kết quả

<body>

<p>Thẻ <hr/> tạo ra ựường kẻ ngang </p>

</body>

Thẻ <hr/> tạo ra ựường kẻ ngang

<body>

<p> Thẻ <hr/> tạo ra ựường kẻ ngang </p> </body>

d. Sử dụng màu sắc trong thiết kế

Ớ Một màu ựược tổng hợp từ ba thành phần màu chắnh là: đỏ (Red), Xanh lá cây (Green), Xanh nước biển (Blue), viết tắt là RGB

Ớ Trong HTML một giá trị màu là một số nguyên dạng hexa (hệ ựếm cơ số 16) có ựịnh dạng như sau: #RRGGBB

Ớ Màu sắc có thể ựược xác ựịnh qua thuộc tắnh bgcolor= hay color=, sau dấu bằng có thể là giá trị RGB hay tên tiếng Anh của màu. Với tên tiếng Anh, ta chỉ có thể chỉ ra 16 màu trong khi với giá trị RGB ta có thể chỉ tới 256 màu.

Ớ Một số giá trị màu cơ bản:

Màu sắc Giá trị Tên tiếng anh

đỏ #FF0000 RED

đỏ sẫm #8B0000 DARKRED RED

Xanh lá cây #00FF00 GREEN

Xanh nhạt #90EE90 LIGHTGREEN

Xanh nước biển #0000FF BLUE (adsbygoogle = window.adsbygoogle || []).push({});

Vàng #FFFF00 YELLOW

Vàng nhạt #FFFFE0 LIGHTYELLOW

Da cam #FFA500 ORANGE

Nâu #A52A2A BROWN

Màu xanh hải quân #000080 NAVY

đen #000000 BLACK

Xám #808080 GRAY

Tắm #FF00FF MAGENTA

Tắm nhạt #EE82EE VIOLET

Hồng #FFC0CB PINK

Màu xanh hải quân #4169E1 ROYALBLUE

Màu xanh hải quân #7FFFD4 AQUAMARINE

III.4.4 Các thẻ liên kết

a. Siêu văn bản

Ớ Cú pháp:

Ớ Các thuộc tắnh của thẻ

Tên thuộc tắnh Ý nghĩa

HREF Quy ựịnh ựịa chỉ (url) mà liên kết trỏ tới

NAME đặt tên cho vị trắ ựặt thẻ

TABINDEX Thứ tự di chuyển khi nhấn phắm tab

TITLE Văn bản hiển thi khi di chuyển chuột trên siêu liên kết

TARGET Quy ựịnh liên kết sẽ ựược mở ra ở ựâu: _self (trang hiện tại), _blank (cửa sổ mới), .

Ớ Vắ dụ

Mã nguồn Kết quả

<body>

o Khi liên kết từ tài liệu này sang tài liệu khác ở cùng chung thư mục, chỉ cần chỉ ra tên file trong thông số HREF là ựủ

o Khi liên kết từ tài liệu này sang tài liệu khác không ở cùng chung thư mục, cần phải cung cấp ựường dẫn tuyệt ựối hoặc tương ựối.

Vắ dụ: đường dẫn tương ựối là <a href=ỢẦ\index.htmlỢ>Dantri</a> đường dẫn tuyệt ựối là <a href=ỢD:\Web\index.htmlỢ>Dantri</a>

b. Kết nối mail (adsbygoogle = window.adsbygoogle || []).push({});

Mã nguồn Kết quả

<body>

<address> Vui lòng gởi mail cho tôi qua

ựịa chỉ

buudung@gmail.com </a> </address> </body>

Vui lòng gởi mail cho tôi qua ựịa chỉbuudung@gmail.com

III.4.5Các thẻ chèn hình ảnh

a. Thẻ <img Ầ />

Ớ Cú pháp

Ớ Các thuộc tắnh của thẻ <imgẦ/>

Tên thuộc tắnh Ý nghĩa

ALIGN Căn hàng văn bản bao quanh ảnh ALT

Nội dung sẽ ựược hiển thị khi ựường dẫn tới tập tin hình ảnh không tồn tại, hoặc chức năng show picture của trình duyệt bị tắt ựi hay trên trình duyệt không hỗ trợ ựồ họa

BORDER đặt kắch thước ựường viền cho ảnh

WIDTH độ rộng của ảnh. Nếu không có thuộc tắnh width, height thì mặc ựịnh sẽ lấy kắch thước gốc của file hình.

HEIGHT độ cao của ảnh

HSPACE Chỉ ựịnh khoảng trống bên trái và phải của ảnh VSPACE Chỉ ựịnh khoảng trống bên trên và dưới của ảnh TITLE Nội dung hiển thị khi ựưa trỏ chuột lên hình. Ớ Vắ dụ

Mã nguồn Kết quả

<body>

Ớ Lưu ý

o Nếu ảnh không hiện lên trang web thì thay vào ựó sẽ hiện tiêu ựề ảnh.

o Ảnh cho vào trang web nên lưu dưới dạng .PNG (hỗ trợ tắnh năng trong suốt, nhưng không hiển thị tốt trên IE6.) hoặc .JPEG (hỗ trợ màu sắc sâu và sắc nét hơn) và dung lượng file hình ảnh không nên lớn quá.

o Tên của các file nên sử dụng chữ thường. Vắ dụ: myphoto.jpg

b. Image Map

Ớ Cú pháp:

Ớ Thuộc tắnh của thẻ

Tên thuộc tắnh Ý nghĩa

SHAPE Kiểu hình (Rect / Circle / Poly) (adsbygoogle = window.adsbygoogle || []).push({});

COORDS

Tọa ựộ của hình

Hình chữ nhật: Tọa ựộ ựiểm ựầu, ựiểm cuối

Hình tròn: Tọa ựộ tâm, ựộ dài bán kắnh

đa giác: Các ựỉnh của vùng hình ựa giác

ALT Chỉ ựịnh văn bản sẽ hiển thị nếu chức năng show picture của trình duyệt bị tắt ựi hoặc trên trình duyệt không hỗ trợ ựồ họa HREF địa chỉ của file cần chèn vào tài liệu

Ớ Vắ dụ:

Mã nguồn Kết quả

<body>

</map>

</body>

Khi kắch chuột vào vùng chứa:

mặt trời trên hình sẽ hiển thị hình mặt trời ựược phóng lớn

sao thủy trên hình sẽ hiển thị hình sao thủy ựược phóng lớn

III.4.6 Các thẻ chèn âm thanh

Ớ Một số ựịnh dạng video: .avi, .wmv, .mpg / .mpeg, .mov, .rm / .ram, .swf / .flv, .mp4 Ớ Một số ựịnh dạng âm thanh: .mp3 / .mpga, .wma, .wav, .mid / .midi

a. Chèn âm thanh

Ớ Cú pháp 1: (sử dụng cho trình duyệt IE và Mosaic)

Trong ựó:

o Filename: đường dẫn tới tên tập tin âm thanh bạn muốn chèn vào (có ựuôi .mid hoặc .wav)

o LOOP: Số lần phát lại bản nhạc này (1,2,3...) hoặc lặp lại vô tận infinite hay -1. Ớ Cú pháp 2: (sử dụng cho trình duyệt IE và Netscape)

Trong ựó:

o Filename: đường dẫn ựến tập tin âm thanh

o WIDTH và HEIGHT: Kắch thước của thanh ựiều khiển, bằng số pixel hay giá trị tương ựối (%)

o AUTOSTART: Có tự ựộng chơi bản nhạc (true) hay không (false) (adsbygoogle = window.adsbygoogle || []).push({});

o LOOP: Có lặp lại bản nhạc này (true) hay không (false).

o HIDDEN: Ẩn thanh ựiều khiển (true). (Tương tự như dùng thẻ <BGSOUND>) Ớ So sánh giữa 2 thẻ

o Thẻ <BGSOUND> sẽ bắt trang Web tự ựộng nạp file nhạc ựược liên kết khi ta mở trang và tự ựộng chơi bản nhạc ựó, bạn không thể ựiều khiển dừng lại hay phát lại theo ý thắch, bởi nó không hiện ra thanh ựiều khiển. Nhưng ựối với thẻ

<EMBED> thì khác, nó cho phép bạn chọn chế ựộ hiện thanh ựiều khiển ựể người truy cập có thể tùy ý chơi nhạc.

o Thẻ <BGSOUND> sẽ tạm ngừng chơi nhạc nếu như cửa sổ trình duyệt bị thu nhỏ (minimize) và sẽ chơi tiếp tục khi cửa sổ ựược mở trở lại (restore hay maximize). Nếu có nhiều trang web sử dụng thẻ <BGSOUND> thì chỉ có cửa sổ

active sẽ chơi nhạc, các cửa sổ khác sẽ tạm ngưng phát nhạc. Còn thẻ

<EMBED> thì vẫn chơi nhạc bất kể tình trạng của cửa sổ như thế nào.

Ớ Vắ dụ

Mã nguồn Kết quả

<body>

Chỉ duyệt ựược trên IE.

Nếu duyệt trên Firefox thì bản nhạc trên sẽ không ựược phát.

<body>

autostart="false"></embed> </body>

Duyệt trên IE và Firefox sẽ có khung ựiều khiển hiện ra, nhấn nút play ựể nghe nhạc.

b. Chèn ựoạn phim

Ớ Cú pháp:

Trong ựó

o file.avi: đường dẫn ựến tập tin phim

o filename: đường dẫn chỉ ựến tập tin hình ảnh (*.gif, *.jpg). Hình ảnh dùng tạm thời trong khi chờ ựợi tập tin phim kia ựược tải về.

o CONTROLS: Cho phép hiện thanh ựiều khiển.

Ớ Ngoài ra, bạn cũng có thể dùng thẻ <EMBED> ựể ựưa video bạn lên web (thông dụng)

c. Chèn các thành phần Multimedia khác

Ngoài ra bạn có thể chèn các ựối tượng Multimedia khác như các tập tin Real Media (*.ra), đoạn phim QuickTime (*.mov), ựoạn phim WindowMedia (*.asf)... nhưng máy tắnh bạn phải cài ựặt những chương trình hỗ trợ này.

Tên thuộc tắnh Ý nghĩa Thẻ <object>

CLASSID Tên ựịa chỉ của Object trong registry của máy tắnh CODEBASE đường dẫn mặc ựịnh của các thuộc tắnh khác

ARCHIVE Nếu có sử dụng file kèm theo, thì ựây là ựường dẫn chứa các file ựó ựược nén lại thành một file bởi Winzip

WIDTH / HEIGHT Chiều rộng và cao của Object (adsbygoogle = window.adsbygoogle || []).push({});

STANDBY Dòng text hiển thị trong quá trình chờ download file.

Thẻ <PARAM>

NAME Tên của biến

VALUE Giá trị của biến

Ớ Thẻ <EMBED> ựược lồng vào trong thẻ <OBJECT> nhằm ựể trình duyệt nào không hiểu thẻ OBJECT ( như trình duyệt Netscape) sẽ tìm kiếm và thi hành nó. Ngược lại trình duyệt nào hiểu thẻ OBJECT (IE) sẽ bỏ qua thẻ EMBED nằm trong nó. đây chỉ là cách chèn cơ bản, các dòng thẻ <PARAM...> cụ thể do những chương trình chèn vào quyết ựịnh.

Ớ Vắ dụ

Chèn 1 hình ảnh

<OBJECT HEIGHT=100% WIDTH=100% TYPE="image/jpeg" DATA= "baby.jpg">

</OBJECT>

<OBJECT HEIGHT="100%" WIDTH="100%" DATA="http://www.w3schools.com">

</OBJECT>

Chèn audio .wav (sử dụng QuickTime)

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">

Chèn video .wmv (sử dụng Windows Media Player)

type="video/x-ms-asf" url="3d.wmv" data="3d.wmv" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="url" value="3d.wmv">

pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed> </object>

Chèn video .mp4 (sử dụng QuickTime)

classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="movie.mp4">

Chèn flash video .swf

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swfl ash.cab#version=7,0,19,0" width="160" height="600" title="Dong Ho"> <param name="movie" value="DongHo.swf" />

<param name="quality" value="high" /> <embed src="DongHo.swf" quality="high"

pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="600"> </embed> (adsbygoogle = window.adsbygoogle || []).push({});

</object>

Tên thẻ Các ựịnh dạng có thể chèn vào trang

<bgsound Ầ/> Chèn file audio (IE)

Chèn siêu liên kết (giống như thẻ <a>Ầ</a>) Chèn file ảnh: .jpeg, .jpg, Ầ

Chèn file audio: .wav, .mp3, Ầ

Chèn file video / flash: .wmv, .mp4, .swf, Ầ <imgẦ/> Chèn file ảnh: .jpeg, .jpg

Chèn file video:.avi Ớ Vắ dụ: Trong HTML5

Chèn 1 audio

Chèn 1 video

</video>

III.5 Tables

Ớ Ứng dụng

o đối với những trang Web có sử dụng nhiều ảnh ựồ họa, ựể tải các ảnh lớn và từng phần hình ảnh nhanh hơn, bạn nên chia ảnh lớn thành từng mảnh nhỏ và sẽ ựược trình duyệt tải về lần lượt. Bạn có thể làm giảm kắch thước các ảnh GIF ựộng bằng cách xén những phần ựộng và tĩnh ra, bởi nhiều khi toàn bộ ảnh chỉ có một chỗ nhỏ là ựộng. để lắp ghép thật ăn khớp với nhau, bạn nên dùng Bảng, nhớ thêm thuộc tắnh CELLPADDING=0 và CELLSPACING=0 ựể các ảnh ựược gắn khắt vào nhau. Ớ Cú pháp Tên thẻ Ý nghĩa <TABLE>Ầ</TABLE> định nghĩa 1 bảng <TR>Ầ</TR> định nghĩa 1 hàng trong bảng <TD>Ầ<TD/> định nghĩa 1 ô trong bảng

<TH>Ầ</TH> định nghĩa ô chứa tiêu ựề của bảng <CAPTION>Ầ</CAPTION> Tiêu ựề của bảng

Ớ Thuộc tắnh của thẻ <TABLE>

Tên thuộc tắnh Ý nghĩa

ALIGN Canh lề cho bảng (left/center/right)

BORDER

Kắch thước ựường kẻ chia ô trong bảng, ựược ựo theo pixel. Giá trị 0 có nghĩa là không xác ựịnh lề, giữa các ô trong bảng chỉ có 1 khoảng trắng nhỏ ựể phân biệt. Nếu chỉ ựể border thì ngầm ựịnh là 1. Với bảng có cấu trúc phức tạp nên ựặt lề ựể người xem có thể phân biệt rõ các dòng và cột

BORDERCOLOR Màu ựường kẻ

BORDERCOLORDARK (adsbygoogle = window.adsbygoogle || []).push({});

BORDERCOLORLIGHT Màu phắa tối và phắa sáng cho ựường kẻ nổi BACKGROUND địa chỉ ựến tệp ựặt làm nền cho bảng

BGCOLOR Màu nền

CELLSPACING Khoảng cách giữa các ô trong bảng

CELLPADDING Khoảng cách giữa nội dung và ựường kẻ trong mỗi ô của bảng

Ớ Thuộc tắnh của thẻ <TR>Ầ</TR>

Tên thuộc tắnh Ý nghĩa

ALIGN / VALIGN Canh lề cho dòng và nội dung trong dòng (align / valign)

Ớ Thuộc tắnh của thẻ <TD>Ầ</TD>

Tên thuộc tắnh Ý nghĩa

ALIGN / VALIGN Canh lề cho cột và nội dung trong cột (align / valign)

BORDER

Kắch thước ựường kẻ chia ô trong cột, ựược ựo theo pixel. Giá trị 0 có nghĩa là không xác ựịnh lề, giữa các ô trong bảng chỉ có 1 khoảng trắng nhỏ ựể phân biệt. Nếu chỉ ựể border thì ngầm ựịnh là 1

BORDERCOLORDARK

BORDERCOLORLIGHT Màu phắa tối và phắa sáng cho ựường kẻ nổi BACKGROUND địa chỉ ựến tệp ựặt làm nền cho bảng

BGCOLOR Màu nền

COLSPAN Chỉ ựịnh ô sẽ kéo dài trong bao nhiêu cột ROWSPAN Chỉ ựịnh ô sẽ kéo dài trong bao nhiêu hàng Ớ Vắ dụ: Mã nguồn Kết quả <body> <TABLE border=Ợ1Ợ> <TR> <TH> Họ và tên </TH> <TH> Lớp </TH> <TH> Quê quán </TH> </TR> <TR> <TD> Nguyễn Thị Ngọc Anh </TD> <TD> 09CđT2 </TD> <TD> đà Nẵng </TD> </TR> <TR>

<TD> Nguyễn Mai Hương </TD> <TD> 09CđT2 </TD> <TD> Bình định </TD> </TR> </TABLE> </body> Mã nguồn <body>

</TR> <TR VALIGN=ỢTopỢ> <TD ALIGN=ỢRightỢ>hinh3.jpg</TD> <TD ALIGN=ỢLeftỢ>hinh4.jpg</TD> </TR> </TABLE> </body> <body>

</TR>

<TD ALIGN=ỢLeftỢ><IMG SRC="images/hinh4.jpg" WIDTH=73 HEIGHT=50/></TD> </TR> </TABLE> </body> Kết quả III.6 Frames

Ớ Frame giúp phân chia 1 trang web thành các khung, cho phép người truy cập cùng lúc có thể xem nhiều trang mà không cần cuốn màn hình, mỗi khung chứa 1 trang web riêng Ớ Bạn có thể tạo 2 khung: 1 khung là tóm tắt mục lục (như trong quyển sách chẳng hạn)

hơn khi thiết kế chọn tiêu ựề rồi mở trang sách ựể ựọc, sau ựó lại phải nhấn nút Back ựể quay lại trang mục lục.

Ớ Trong trang tạo khung, bạn không ựược trình bày gì khác ngoài cặp thẻ ựể tạo khung. Do ựó, khi sử dụng frame thì không ựược sử dụng thẻ <BODY>Ầ</BODY>, vì nội dung mỗi khung ựã ựược liên kết ựến 1 file HTML nào ựó. để tạo khung ta dùng tag <FRAMESET> và </FRAMESET>. (adsbygoogle = window.adsbygoogle || []).push({});

Ớ Nhược ựiểm khi sử dụng Frame:

o Người duyệt web phải theo dõi nhiều tài liệu HTML

o Khó có thể in ấn toàn bộ trang web

III.6.1 Thẻ <frameset>Ầ</frameset>

Ớ Cú pháp:

Ớ Thuộc tắnh của thẻ

Tên thuộc tắnh Ý nghĩa

COLS Chia dọc cửa sổ thành các phần với kắch thước chỉ ựịnh (theo pixel, % hoặc *)

ROWS Chia ngang cửa sổ thành các phần với kắch thước chỉ ựịnh (theo pixel, % hoặc *)

BORDER Chỉ ựịnh ựộ dày nét của ựường ngăn cách các khung bên trong BORDERCOLOR Chỉ ựịnh màu của ựường viền khung

FRAMEBORDER Cho phép hiển thị khung hay không, giá trị của nó là no (0) hoặc yes (1). Ớ Vắ dụ: Mã nguồn Kết quả <HTML> <HEAD> <TITLE>HTMLStudy</TITLE> </HEAD> <FRAMESET COLS="30,50,*"></FRAMESET> </HTML>

Tạo 3 khung theo chiều ựứng, khung ựầu rộng 30 pixel, khung giữa rộng 50 pixel và khung thứ ba là phần còn lại của cửa sổ.

<HTML> <HEAD> <TITLE>HTMLStudy</TITLE> </HEAD> <FRAMESET ROWS="40%,*"></FRAMESET> </HTML>

Tạo 2 khung theo chiều ngang, khung ựầu cao 40% chiều rộng cửa sổ và khung thứ 2 là phần chiều cao còn lại của cửa sổ

III.6.2 Thẻ <frame Ầ />

Ớ Bạn có thể lồng các cặp thẻ này vào nhau ựể tạo khung theo chiều ngang và dọc bất kỳ. Sau khi tạo khung xong, bạn phải ựịnh dạng từng khung vừa tạo bằng thẻ sau:

Ớ Thuộc tắnh của thẻ

Tên thuộc tắnh Ý nghĩa

Di chuyển vùng làm việc

Di chuyển vùng làm việc