Nếu đặt thuộc tính href= của thẻ <a> giá trị mailto:address@domain thì khi kích hoạt kết nối sẽ kích hoạt chức năng thưđiện tử của trình duyệt.
<ADDRESS>
Trang WEB này được
<A href=”mailto:webmaster@hugo.com.vn” > WEBMASTER <\A> bảo trì <\ADDRESS> 3.4.9 VẼ MỘT ĐƯỜNG THẲNG NẰM NGANG Cú pháp: <HR
ALIGN = LEFT / CENTER / RIGHT
COLOR = color NOSHADE SIZE = n WIDTH = width > Ý nghĩa các tham số: ALIGN Căn lề (căn trái, căn phải, căn giữa)
COLOR Đặt màu cho đường thẳng
NOSHADE Khơng cĩ bĩng
SIZE Độ dày của đường thẳng
WIDTH Chiều dài (tính theo pixel hoặc % của bề rộng cửa sổ
3.5 CÁC THẺ CHÈN ÂM THANH, HÌNH ẢNH 3.5.1 GIỚI THIỆU
Liên kết với file đa phương tiện cũng tương tự như liên kết bình thường. Tuy vậy phải đặt tên
đúng cho file đa phương tiện. Phần mở rộng của file phải cho biết kiểu của file.
KIỂU PHẦN MỞ
RỘNG MƠ TẢ
Image/GIF .gif Viết tắt của Graphics Interchange Format. Khuơn dạng này xuất hiện khi mọi người cĩ nhu cầu trao đổi
ảnh trên nhiều hệ thống khác nhau. Nĩ được sử dụng trên tất cả các hệ thống hỗ trợ giao diện đồ hoạ. Định dạng GIF là định dạng chuẩn cho mọi trình duyệt WEB. Nhược điểm của nĩ là chỉ thể hiện được 256 màu.
Mở rộng của chuẩn này là GIF89, được thêm nhiều chức năng cho các ứng dụng đặc biệt như làm ảnh nền trong suốt - tức là ảnh cĩ thể nổi bằng cách làm màu nền giống với màu nền của trình duyệt.
Image/JPEG .jpeg Viết tắt của Joint Photographic Expert Group. Là khuơn dạng ảnh khác nhưng cĩ thêm khả năng nén.Ưu điểm nổi bật của khuơn dạng này là lưu trữ được hàng triệu màu và độ nén cao nên kích thước file ảnh nhỏ hơn và thời gian download nhanh hơn. Nĩ là cơ sở cho khuơn dạng MPEG. Tất cả các trình duyệt đều cĩ khả năng xem ảnh JPEG.
Image/TIFF .tiff Viết tắt của Tagged Image File Format. Được Microsoft thiết kếđể quét ảnh từ máy quét cũng như
tạo các ấn phẩm.
Text/HTML .HTML, .htm
PostScript .eps, .ps Được tạo ra để hiển thị và in các văn bản cĩ chất lượng cao.
Adobe Acrobat .pdf Viết tắt của Portable Document Format. Acrobat cũng sử dụng các siêu liên kết ngay trong văn bản cũng giống như HTML. Từ phiên bản 2.0, các sản phẩm của Acrobat cho phép liên kết giữa nhiều văn bản.
Ưu điểm lớn nhất của nĩ là khả năng WYSISYG.
Video/MPEG .mpeg Viết tắt của Motion Picture Expert Group, là định dạng dành cho các loại phim (video). Đây là khuơn dạng thơng dụng nhất dành cho phim trên WEB.
Video/AVI .avi Là khuơn dnạg phim do Microsoft đưa ra.
Video/QuickTime .mov Do Apple Computer đưa ra, chuẩn video này được cho là cĩ nhiều ưu điểm hơn MPEG và AVI. Mặc dù
Sound/AU .au
Sound/MIDI .mid Là khuơn dạng dành cho âm nhạc điện tử hết sức thơng dụng được nhiều trình duyệt trên các hệ thống khác nhau hỗ trợ. File Midi được tổng hợp số hố trực tiếp từ máy tính.
Sound/RealAudio .ram Định dạng audio theo dịng. Một bất tiện khi sử dụng các định dạng khác là file âm thanh thường cĩ kích thước lớn - do vậy thời gian tải xuống lâu, Trái lại audio dịng bắt đầu chơi ngay khi tải được một phần file trong khi vẫn tải về các phần khác.Mặc dù file theo định dạng này khơng nhỏ hơn so với các định dạng khác song chính khả năng dịng đã khiến định dạng này phù hợp với khả năng chơi ngay lập tức.
VRML .vrml Viết tắt của Virtual Reality Modeling Language. Các file theo định dạng này cũng giống như HTML. Tuy nhiên do trình duyệt cĩ thể hiển thị được cửa sổ 3 chiều nên người xem cĩ thể cảm nhận được cảm giác ba chiều.
3.5.2 ĐƯA ÂM THANH VÀO MỘT TÀI LIỆU HTML
Cú pháp:
<BGSOUND SRC = url
LOOP = n >
Thẻ này khơng cĩ thẻ kết thúc tương ứng (</BGSOUND>). Để chơi lặp lại vơ hạn cần chỉ định LOOP = -1 hoặc LOOP = INFINITE. ThẻBGSOUND phải được đặt trong phần mởđầu (tức là nằm trong cặp thẻ HEAD).
3.5.3 CHÈN MỘT HÌNH ẢNH, MỘT ĐOẠN VIDEO VÀO TÀI LIỆU HTML
Để chèn một file ảnh (.jpg, .gif, .bmp) hoặc video (.mpg, .avi) vào tài liệu HTML, bạn cĩ thể
sử dụng thẻ IMG. Cú pháp: <IMG ALIGN = TOP/MIDDLE/BOTTOM ALT = text BORDER = n SRC = url WIDTH = width HEIGHT = height
HSPACE = vspace VSPACE = hspace TITLE = title DYNSRC = url START = FILEOPEN/MOUSEOVER LOOP = n > Trong đĩ:
ALIGN = TOP/ MIDDLE/ BOTTOM/ LEFT/ RIGHT
Căn hàng văn bản bao quanh ảnh
ALT = text Chỉđịnh văn bản sẽđược hiển thị nếu chức năng show picture của browser bị tắt đi hay hiển thị
thay thế cho ảnh trên những trình duyệt khơng cĩ khả năng hiển thịđồ hoạ. Văn bản này cịn được gọi là nhãn của ảnh. Đối với trình duyệt cĩ khả
năng hỗ trợđồ hoạ, dịng văn bản này sẽ hiện lên khi di chuột qua ảnh hay được hiển thị trong vùng của ảnh nếu ảnh chưa được tải về hết. Chú ý phải đặt văn bản trong hai dấu nháy kép nếu triong văn bản chứa dấu cách hay các ký tự đặc biệt - trong trường hợp ngược lại cĩ thể bỏ dấu nháy kép.
BORDER = n Đặt kích thước đường viền được vẽ quanh ảnh (tính theo pixel).
SRC = url Địa chỉ của file ảnh cần chèn vào tài liệu.
WIDTH/HEIGHT Chỉđịnh kích thước của ảnh được hiển thị.
HSPACE/VSPACE Chỉ định khoảng trống xung quanh hình ảnh (tính theo pixel) theo bốn phía trên, dưới, trái, phải.
TITLE = title Văn bản sẽ hiển thị khi con chuột trỏ trên ảnh
DYNSRC = url Địa chỉ của file video.
START =
FILEOPEN/MOUSEOVER
Chỉ định file video sẽđược chơi khi tài liệu được mở hay khi trỏ con chuột vào nĩ. Cĩ thể kết hợp cả hai giá trị này nhưng phải phân cách chúng bởi dấu phẩy.
LOOP = n/INFINITE Chỉ định số lần chơi. Nếu LOOP = INFINITE thì file video sẽđược chơi vơ hạn lần.
3.6 CÁC THẺĐỊNH DẠNG BẢNG BIỂU
<TABLE> ... </TABLE> Định nghĩa một bảng
<TR> ... </TR> Định nghĩa một hàng trong bảng <TD> ... </TD> Định nghĩa một ơ trong hàng <TH> ... </TH> Định nghĩa ơ chứa tiêu đề của cột <CAPTION> ... </CAPTION> Tiêu đề của bảng
Cú pháp: <TABLE
ALIGN = LEFT / CENTER / RIGHT
BORDER = n BORDERCOLOR = color BORDERCOLORDARK = color BORDERCOLORLIGHT = color BACKGROUND = url BGCOLOR = color CELLSPACING = spacing CELLPADDING = pading >
<CAPTION>Tiêu đề của bảng biểu</CAPTION>
... Định nghĩa các dịng <TR ALIGN = LEFT/CENTER/RIGHT VALIGN = TOP/MIDDLE/BOTTOM> ... Định nghĩa các ơ trong dịng <TD
ALIGN = LEFT / CENTER / RIGHT
VALIGN = TOP / MIDDLE / BOTTOM
BORDERCOLOR = color BORDERCOLORDARK = color BORDERCOLORLIGHT = color BACKBROUND = url BGCOLOR = color COLSPAN = n ROWSPAN = n > ... Nội dung của ơ </TD> ... </TR> ... </TABLE>
Ý nghĩa các tham số:
ALIGN / VALIGN Căn lề cho bảng và nội dung trong mỗi ơ.
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ĩ một khoảng trắng nhỏ để phân biệt. Nếu chỉ để border thì ngầm định border=1. Với những 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 BORDERCOLORLIGHT
Màu phía tối và phía sáng cho đường kẻ nổi.
BACKGROUND Địa chỉ tới tập ảnh dùng 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.
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
BÀI THỰC HÀNH CHƯƠNG BÀI THỰC HÀNH CHƯƠNG BÀI THỰC HÀNH CHƯƠNG BÀI THỰC HÀNH CHƯƠNG 333 3
Các bước trong chương này được trình bày rất chi tiết, đầy đủ và rõ ràng. Bạn sẽ hiểu rõ hơn những nội dung trong bài lý thuyết và cách sử dụng cơng cụ. Hãy thực hiện theo các bước dưới đây một cách cẩn thận.
1. Tạo thưmục HTML-DHTML-JS-Examples trong ổ đĩa D:\ và lưu tất cả các file .htm chỉ trong thưmục này. (Nếu khơng cĩ đĩa D, hãy tạo trong ổ đĩa C:\)
2. Chạy chương trình Notepad bằng cách kích vào nút “Start” và chọn “Accessories”. 3. Gõ đoạn mã vào tài liệu
4. Kích vào File chọn Save As
5. Lưu file với đuơi .htm trong thưmục D:\HTML-DHTML-JS-Examples. 6. Chạy Internet Explorer.
BÀI TẬP 1
1/ Tạo trang web Headings.htm(sử dụng Tag Hn, từ Heading1 đến Heading6)
2/ Tạo trang web HeadingCenter.htm(Phối hợp các Tag)
4/ Tạo trang web Emphasis.htm
6/
BÀI TẬP 2 (Link)
1/ Tạo tập tin links2.htm : tạo các Hyperlink để di chuyển đến các trang htm vừa tạo ở trên.
2/ Tạo tập tin Search.htmđể xây dựng trang Web sau
3/ Sử dụng các tag đã học để tạo 1 trang Web cho riêng bạn (MySite.htm) Nội dung: Tự giới thiệu và Các trang Web ưa thích (tạo các HyperLink)
4/ Tạo trang Web sau (InternalLink)
http://www.google.com for Google http://www.altavista.com for Altavista http://www.Yahoo.com for Yahoo
BÀI TẬP 3 (Image) 1/ Image1.htm
2/ Image2.htm
Hướng dẫn: thêm vào dịng lệnh
BÀI TẬP 4 (Bullete) 1/Unordered.htm. 2/ Ordered.htm. 3/ Definition.htm dl dt dd
4/Horizontal.htm
BÀI TẬP 5 (Table) 1/ Table1.htm
2/ Table2.htm (Tables with images and links) <html>
<head>
<title>Exercise :: Tables2</title> <head>
<body >
<table width="75%" border="1" cellspacing="2" cellpadding="0" align="center">
<tr>
<th>Files from Session 2</th> <th>Files from Session 3</th> <th>Files from Session 4</th> </tr>
<tr>
<td><a href="/headings.htm">headings exercise</a></td> <td>images.htm</td>
<td>unordered.htm</td> </tr>
<tr>
<td><a href="/headingscentered.htm">center align exercise</a></td> <td>images2.htm</td>
<tr>
<td><a href="/emphasis.htm">emphasis exercise</a></td> <td> </td>
<td>definition.htm</td> </tr>
<tr>
<td><a href="/links.htm">links exercise 1</a></td> <td> </td>
<td>table1.htm</td> </tr>
<tr>
<td><a href="/links2.htm">links exercise 2</a></td> <td> </td> <td> </td> </tr> </table> </body> </html>
Dùng các thẻ HTML để thiết kế các trang web sau: 1/ Tourist1.htm
3/ vinair.htm
5) Dulich.htm
BÀI TẬP LÀM THÊM
CHƯƠ CHƯƠ CHƯƠ
CHƯƠNG NG NG NG 4444
CSS (Cascading Style Sheets) c mục chính Bài tập bắt Bài tập làm Tĩm tắt Mục tiêu Các mục chính Bài tập bắt buộc Bài tập làm thêm
Kết thúc bài học này cung cấp học viên kiến thức về tạo CSS trong việc thiết kế giao diện Web … 4.1 Khái niệm về CSS 4.2 Một sốđặc tính cơ bản về CSS Dựa vào bài tập trong phần cuối Chương 4. Dựa vào bài tập trong phần cuối Chương 4. buộc thêm
4.1 KHÁI NIỆM CSS 4.1.1 CSS là gì? 4.1.1 CSS là gì?
Trong lĩnh vực xây dựng, chúng ta cĩ trang trí nội thất; trong lĩnh vực thẩm mỹ - làm đẹp, chúng ta cĩ kỹ thuật make-up; cịn trong lĩnh vực thiết kế web chúng ta cĩ CSS. Đây chỉ là một định nghĩa giàu hình ảnh nhưng cũng thực tế thơi. Cịn CSS (Cascading Style Sheets tạm dịch là tờ mẫu theo Style Sheets) là một ngơn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…
4.1.2 Tại sao CSS?
Chúng ta đã biết qua HTML trong chương trước thì cũng biết HTML hỗ trợ một số thuộc tính
định dạng cơ bản cho text, picture, table, … nhưng nĩ khơng thật sự phong phú và chính xác như nhau trên mọi hệ thống. CSS cung cấp cho bạn hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả. Ngồi ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt, nên bạn hồn tồn cĩ thể tự tin trang web của mình cĩ thể hiển thị hầu như “như nhau” dù trên một hệ thống sử dụng Windows, Linux hay trên một máy Mac miễn là bạn đang sử dụng một phiên bản trình duyệt mới nhất. Sử dụng các mã định dạng trực tiếp trong HTML tốn hao nhiều thời gian thiết kế cũng như
dung lượng lưu trữ trên đĩa cứng. Trong khi đĩ CSS đưa ra phương thức “tờ mẫu” giúp áp dụng một khuơn mẫu chuẩn từ một file CSS ở ngồi. Nĩ thật sự cĩ hiệu quảđồng bộ khi bạn tạo một website cĩ hàng trăm trang hay cả khi bạn muốn thay đổi một thuộc tính trình bày nào đĩ. Hãy thử tưởng tượng bạn cĩ một website với hàng trăm trang và bạn muốn thay đổi font chữ hay màu chữ cho một thành phần nào đĩ. Đĩ thật sự sẽ là một cơng việc buồn chán và tốn nhiều thời gian. Nhưng với việc sử dụng CSS việc đĩ là hồn tồn đơn giản.
Ngồi ra, CSS cịn cho phép bạn áp đặt những kiểu trình bày thích hợp hơn cho các phương tiện khác nhau như màn hình máy tính, máy in, điện thoại,…
CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.
4.1.3 Học CSS cần những gì?
Thật sự khơng cĩ một điều kiện gì được quy định khi học CSS. Nhưng ở một khía cạnh nào
đĩ thì một sự chuẩn bị cho một cuộc hành trình dù là dễ nhất vẫn khơng thừa vì ít nhất nĩ sẽ
giúp bạn làm tốt hơn. Hành trang thứ nhất mà bạn nên cĩ là một kiến thức về HTML, nĩ khơng thật sự cần thiết nếu bạn chỉ dùng CSS để trình bày cho một trang HTML cĩ sẵn (như
làm skin cho blog chẳng hạn), nhưng bạn vẫn cần biết ý nghĩa một số thẻ HTML, nĩ sẽ cĩ ích khi bạn viết CSS. Tuy nhiên, nếu bạn muốn tự thiết kế, trình bày một trang web của riêng mình thì tùy theo quy mơ trang web, bạn cần phải học thêm cả HTML, XHMTL, Javascript và một số ngơn ngữ lập trình web khác. Hành trang thứ hai chính là một trình soạn thảo văn bản để bạn cĩ thể viết mã CSS. Ở đây, tơi khuyên bạn nên sử dụng một trình soạn thảo đơn giản như Notepad, Wordpad trong Windows hay Pico trong Linux, Simple Text trong Mac. Nĩ sẽ giúp bạn chắc chắn code là của bạn và khơng cĩ bất kỳ một sự can thiệp nào từ chương trình như khi dùng DreamWeaver, FrontPage, Golive,… Hành trang thứ ba của bạn chính là một phiên bản mới nhất của trình duyệt mà bạn thường dùng. Và một điều nữa mà tơi muốn
ích cho bạn. Thực hành chẳng những giúp bạn vận dụng nhuần nhuyễn các bài học mà cịn cĩ tác dụng giải thích ngược lại những lý thuyết mà bạn chưa hiểu. Bây giờ nếu bạn đã thật sự
chuẩn bị chúng ta hãy chuyển qua phần tiếp theo để thật sự bước chân vào thế giới CSS.
4.1.4 Cú pháp CSS
Để tìm hiểu cú pháp CSS chúng ta hãy thử xem một ví dụ sau. Ví dụ: Đểđịnh màu nền cho một trang web là xanh nhạt (light cyan) chúng ta dùng code sau:
+ Trong HTML: <body bgcolor=“#00BFF3”>
+ Trong CSS: body { background-color:#00BFF3; }
Nhìn qua ví dụ trên ít nhiều chúng ta cũng thấy được mối tương đồng giữa các thuộc tính trong HTML và CSS cho nên nếu bạn đã biết qua HTML thì cũng sẽ rất dễ dàng tiếp thu CSS.
Đĩ là một chút lợi thế của câu chuyện hành trình mà tơi đã nĩi ở trên. Nhưng khơng sao cả, bây giờ hãy nhìn vào ví dụ của chúng ta và các bạn xem nĩ cĩ giống với cấu trúc sau khơng nhé.
Cú pháp CSS cơ bản:
Selector{ property:value; }
Trong đĩ:
+ Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Nĩ là các tag
HTML, class hay id (chúng ta sẽ học về 2 thành phần này ở phần sau). Ví dụ: body, h2, p, img, #title, #content, .username,…
Trong CSS ngồi viết tên selector theo tên tag, class, id. Chúng ta cịn cĩ thể viết tên selector theo phân cấp như để chỉ các ảnh ở trong #entry, chúng ta viết selector là #entry img, như vậy thì các thuộc tính chỉđịnh sẽ chỉ áp dụng riêng cho các ảnh nằm trong #entry.
Khi viết tên cho class, đơi khi sẽ cĩ nhiều thành phần cĩ cùng class đĩ, ví dụ như thẻ