phần mở đầu của tài liệu (tức là nằm trong cặp thẻ <HEAD>). c) 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 (file có kiểu .bmp) hoặc một file video (kiểu .avi) vào tài liệu HTML, ta 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 > 123 Trong đó: ALIGN = TOP/ MIDDLE/ Căn hàng văn bản bao quanh ảnh. BOTTOM/ LEFT/ RIGHT 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 trong 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 = Chỉ định file video sẽ được chơi khi tài liệu FILEOPEN/MOUSEOVER đượ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.
Các thẻ định dạng bảng biểu Sau đây là các thẻ chính để tạo bảng: <TABLE>. </TABLE> Định nghĩa một bảng.</TR> Định nghĩa một hàng trong bảng.</TD> Định nghĩa một ô trong hàng.</TH> Định nghĩa ô chứa tiêu đề của cột. </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 125 <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>. </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ẻ. 126 BORDERCOLORDARK Màu phía tối và phía sáng cho đường kẻ nổi. BORDERCOLORLIGHT 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.
Các thẻ tạo FORM a) Tạo Form Để tạo ra một form trong tài liệu HTML, chúng ta sử dụng thẻ <FORM> với cú pháp như sau: Cú pháp: <FORM ACTION = ulr METHOD = GET | POST NAME = name TARGET = frame_name | _blank | _self > <!-- Các phần tử điều khiển của form được đặt ở đây --> <INPUT .> </FORM> 127 Trong đó: ACTION Địa chỉ sẽ gửi dữ liệu tới khi form được submit (có thể là địa chỉ tới một chương trình CGI, một trang ASP. METHOD Phương thức gửi dữ liệu. NAME Tên của form. TARGET Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ form đến server.
b) Tạo các đối tượng nhập dữ liệu Cú pháp: <INPUT ALIGN = LEFT | CENTER | RIGHT TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD | RADIO | RESET | SUBMIT | TEXT VALUE = value > c) Tạo một danh sách lựa chọn Cú pháp: <SELECTNAME="tên danh sách" SIZE="chiều cao"> <OPTIONVALUE=value1 SELECTED> Tên mục chọn thứ nhất <OPTIONVALUE=value2> Tên mục chọn thứ hai <!-- Danh sách các mục chọn --> </SELECT> 128 d) Tạo hộp soạn thảo văn bản Cú pháp: <TEXTAREA COLS=số cột ROWS=số hàng NAME=tên > Văn bản ban đầu </TEXTAREA> 3. Định dạng website với CSS (cùng thẻ HTML) 3. Giới thiệu về CSS CSS (Cascading Style Sheets) là một phương pháp để chuẩn hóa lại các thẻ trong ngôn ngữ HTML. CSS giúp tạo ra 1 định dạng thống nhất trên toàn bộ nội dung của trang Web một cách nhanh nhất.
Ngôn ngữ HTML hỗ trợ một số thuộc tính định dạng cơ bản cho văn bản (Text), hình ảnh (Picture), bảng biểu (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. Trong khi đó, CSS cung cấp cho ta 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ả. Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt Web, nên có thể hoàn toàn tin tưởng trang Web của mình có thể được hiển thị hầu như “như nhau” trên một hệ thống sử dụng Windows hoặc Linux hay trên một máy Mac, miễn là sử dụng một phiên bản trình duyệt mới nhất.
Việc sử dụng các mã định dạng trực tiếp trong HTML tốn rất 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 “định dạng ngoài” giúp áp dụng một khuôn mẫu chuẩn từ một file CSS ở ngoài. Nó thật sự có hiệu quả đồng bộ khi tạo một website có hàng trăm trang hay khi muốn thay đổi 129 một thuộc tính trình bày nào đó. Hãy thử hình dung khi ta muốn thay đổi font chữ hay màu chữ cho một thành phần nào đó trong một website với hàng trăm trang.
Đó sẽ là một công việc buồn chán và tốn nhiều thời gian khi phải lướt qua hết tất cả nội dung của website. Nhưng với việc sử dụng CSS, chỉ cần thay đổi 1 lần duy nhất, toàn bộ định dạng tương ứng với phần đó trên website sẽ thay đổi theo. Cú pháp CSS 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.
Ví dụ: body, h2, p, img, #title, #content,. Trong CSS ngoài việc dùng selector theo tên tag, class, id, còn có thể dùng selector theo phân cấp. Ví dụ, khi sử dụng selector là #entry img, 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 đó, chẳng hạn thẻ img và thẻ a cùng có class tên vistors nhưng đây lại là hai đối tượng khác nhau, nếu sử dụng CSS: .visitors { width:50 } thì sẽ ảnh hưởng tới thuộc tính của cả 2 thẻ trên.
+) Property: Là các thuộc tính quy định cách trình bày. Ví dụ: background-color, font-family, color, padding, margin,. Mỗi thuộc tính CSS sẽ được gán 1 giá trị, giá trị này sẽ ảnh hưởng đến tất cả những nơi sử dụng thẻ tương ứng trên website. Nếu muốn khai báo nhiều hơn 1 thuộc tính, mỗi khai báo sẽ sử dụng dấu ; (chấm phẩy) để phân cách các thuộc tính.
Tất cả các thuộc tính trong một selector sẽ được đặt trong một cặp ngoặc nhọn sau selector. 130 Ví dụ: body { background:#FFFFFF; color:#FF0000; font-size: 14pt } Đoạn CSS này sẽ quy định nền trang web là màu trắng (#FFFFFF), màu chữ mặc định là màu đỏ (#FF0000), cỡ chữ là 14. + Value: Chỉ giá trị của thuộc tính tương ứng. Như ví dụ trên value chính là #FFFFFF dùng để định màu trắng cho nền trang.
Đối với những giá trị có khoảng trắng, giá trị nên đặt tất cả trong một dấu ngoặc kép. Ví dụ: font-family: “Times New Roman”. Đối với các giá trị là đơn vị đo, không nên đặt một khoảng cách giữa số đo với đơn vị của nó. Ví dụ: width:100 px.
Vị trí đặt CSS Có ba cách khác nhau để đặt (nhúng) CSS vào trong một tài liệu HTML: + Cách 1: Nội tuyến (kiểu thuộc tính). Đây là phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng. Trong trường hợp này chúng ta sẽ không cần cú pháp selector. Ví dụ: <html> <head> <title>Ví dụ</title> </head> <body style= “background-color=#FFF;”> <p style= “color:green”> Xin chào các bạn</p> </body> </html> 131 Phương pháp nhúng theo từng thẻ HTML sẽ chỉ ảnh hưởng đến 1 thẻ HTML duy nhất (thẻ được nhúng).
Vì vậy nó không hiệu quả khi muốn thay đổi thuộc tính đồng bộ cho cả 1 loại thẻ trên toàn bộ website. + Cách 2: Sử dụng cú pháp selector. Ví dụ: <html> <head> <title>Ví dụ</title> <style type= “text/css”> body { background-color:#FFF } p { color:#00FF00 } style> </head> <body> <p>Xin chào các bạn</p> </body> </html> Lưu ý: Thẻ style nên đặt trong phần header của trang web. Với cách sử dụng CSS này, thuộc tính của 1 thẻ được khai báo sẽ ảnh hưởng đến tất cả những thẻ cùng loại trên trang web.
Như ví dụ trên, mọi thẻ <p> được sử dụng trên trang web sẽ đều có màu chữ là màu xanh lá. + Cách 3: Liên kết với một file CSS bên ngoài. Tương tự như cách 2, nhưng thay vì đặt tất cả các mã CSS trong thẻ style ở phần header, chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng .css) bên ngoài và liên kết nó vào trang web bằng thuộc tính href trong thẻ link. Đây là cách thường được sử dụng nhất khi xây dựng các website 132 chuyên nghiệp.
Nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu. Ví dụ: <html> <head> <title>Ví dụ</title> <link rel= “stylesheet” type= “text/css” href= “style.css” /> </head> <body> <p> Xin chào các bạn </p> body> </html> Tạo một file style.css với nội dung: body { background-color:#FFF } p { color:#00FF00 } Hãy đặt 2 file này vào cùng một thư mục, mở file vidu.html trong trình duyệt của bạn và xem thành quả.