Mở đầu các trang văn bản thường là các tiêu đề cần làm nổi bật từng phần của văn bản như Chương, Mục,. cũng cần có đề mục rõ ràng khác với phần thân để người đọc theo dõi cho thuận tiện. Có 6 mức tiêu đề trong HTML. Cách thể hiện các tiêu đề phụ thuộc vào trình duyệt nhưng thông thường thì: • Tiêu đề mức 1 Thẻ định nghĩa có dạng: <H1>.</H1> Ví dụ: <H1>Tiêu đề 1</H1> cho ta tiêu đề tương ứng Tiêu đề 1 ….
• Tiêu đề mức 6 Thẻ định nghĩa có dạng: <H6>.</H6> Ví dụ: <H6>Tiêu đề 6</H6> cho ta tiêu đề tương ứng Tiêu đề 6 2. Một số thẻ trình bày và định dạng văn bản: Các thành phần trình bày trang để định dạng cả một đoạn văn bản và phải nằm trong phần thân của tài liệu. Có nhiều thẻ được sử dụng nhưng trong tài liệu này chỉ trình bày một số thẻ chính: định dạng phần địa chỉ (<ADDRESS>), đoạn văn bản (<P>), xuống dòng (<BR>), căn chính giữa (<CENTER>), đường kẻ ngang (<HR>), đoạn văn bản đã định dạng sẵn (<PRE>), trích dẫn nguồn tài liệu (<BLOCKQUOTE>) Đoạn văn bản Thẻ này dùng để xác định một đoạn văn bản. Thẻ <P> (Paragraph) có thể dùng kèm thuộc tính để ấn định cách trình bày đoạn văn bản.
<P align=”left|center|right”>.</P> Một đoạn văn bản rỗng là một dòng trắng. 22 Chú ý: một số thẻ khác như các thẻ tiêu đề <H1>,.,<H6>, dòng kẻ ngang <HR>, danh sách, bảng biểu,. đã kèm luôn việc xuống dòng thành một đoạn văn bản mới. Không cần dùng thêm thẻ <P> trước và sau các thẻ này.
Xuống dòng Thẻ này dùng để xuống dòng mới. Bắt buộc xuống dòng tại vị trí gặp từ khóa này. Dòng mới được căn lề như dòng được bẻ tự động khi dòng đó quá dài Thẻ định nghĩa dạng: <BR> Nếu không muốn chèn một dòng trắng mà chỉ đơn thuần muốn xuống dòng mới thì cần sử dụng thẻ <BR> (Break). Thẻ Break không cần có thẻ đóng kèm theo.
Đường kẻ ngang Thẻ này tạo ra đường kẻ ngang (Horizontal Rule) ngăn cách giữa các phần trong tài liệu. Thẻ định nghĩa dạng: <HR> <HR width=n%|n(pixel) size=n align=left|center|righ noshade> Ví dụ: <HR> <ADDRESS>February 8, 1995, CERN</ADDRESS> Kết quả thu được: Căn chính giữa Thẻ dùng để căn chỉnh đoạn văn bản ở giữa chiều rộng trang văn bản. Thẻ định nghĩa dạng: <CENTER>.</CENTER> Thẻ này cũng có tác dụng xuống dòng khi kết thúc đoạn văn bản. Các thuộc tính của thẻ trình bày trang Thuộc tính ALIGN của thẻ Paragraph Thẻ <P> dùng để xác định một đoạn văn bản (như trình bày ở phần trước).
Dưới đây ta tìm hiểu kỹ thêm một số các thuộc tính kèm theo (ALIGN) 23 của nó. Có thể căn lề trái (left - mặc định), căn giữa (center) hoặc căn lề phải (right). • Căn lề trái: <P ALIGN=LEFT>…</P> • Căn giữa: <P ALIGN=CENTER>…</P> • Căn lề phải: <P ALIGN=RIGHT>…</P> Thuộc tính Clear của thẻ xuống dòng Thẻ xuống dòng <BR> cũng có 3 thuộc tính kèm theo như sau: <BR CLEAR=ALL> <BR CLEAR=LEFT> <BR CLEAR=RIGHT> Các thẻ được sử dụng khi chèn hình ảnh, để các dòng chữ xuất hiện bên dưới, bên trái hay bên phải của hình. Các kiểu đường kẻ ngang khác nhau Như ở phần trên đã giới thiệu, thẻ <HR> tạo một đường kẻ ngang chạy suốt chiều rộng cửa sổ màn hình.
Các đường kẻ này có thể được thay đổi độ đậm (mảnh), ngắn, dài, căn lề trái, căn lề phải,… bằng cách sử dụng các thuộc tính của chúng. <HR WIDTH=n% SIZE=n ALIGN=LEFT|RIGHT NOSHADE> Trong đó: Thẻ, thuộc tính Miêu tả Chèn dòng kẻ ngang suốt chiều rộng cửa sổ màn <HR> hình Thay đổi độ dài của đường kẻ, chiếm n% độ rộng WIDTH = n% cửa sổ màn hình. Nếu không có % đằng sau thì độ dài tính theo đơn vị pixcel Thay đổi độ đậm hay mảnh của đường kẻ. n là số SIZE = n pixcel Căn lề trái|phải.
Đường kẻ ngang mặc định được căn ALIGN=LEFT|RIGHT chính giữa NOSHADE Không có bóng mờ, đường kẻ thành màu đen 3. Bảng biểu (Table) và trang khung (Frame) Mục tiêu: Có khả năng tạo được các bảng biểu và các Frame. Bảng biểu Mã lệnh tạo bảng Giới hạn bảng: <asp: Table runat="server" “thuộc tính”. >…</asp:Table> Định nghĩa một hàng: <asp:TableRow>…</asp:TableRow> Định nghĩa một ô: <asp:TableCell>…</asp:TableCell> Các thuộc tính về bảng Thẻ/Thuộc tính Ý nghĩa TABLE - Bắt đầu bảng BORDER - Đặt khung nổi 3D xung quanh bảng.
Đặt <ASP:TABLE BORDER=0 sẽ làm mất biên bao quanh. CELLSPACING=n CELLSPACING - Đặt độ dày của dòng kẻ ngang CELLPADDING=n trong bảng. BackImageUrl="URL" CELLPADDING - Đặt kích thước của một ô. Runat =”server” > BackImageUrl="URL" - Đặt ảnh nền của bảng.
“URL” - địa chỉ ảnh nền <asp:TableRow> Bắt đầu một dòng của bảng – Table row. Bắt đầu một ô của bảng (bắt đầu cột trong một <asp:TableCell> bảng). Caption Tạo tiêu đề cho bảng CaptionAlign Căn lề cho tiêu đề của bảng Tạo khoảng cách giữa các ô và nội dung của ô trong CellPadding bảng CellSpacing Tạo khoảng cách giữa các ô trong bảng GridLines None / Horizontal/ Tạo viền kẻ theo khung của bảng. Vertical/Both HorizontalAlign Center/Justify/ Left/NotSet Căn lề cho bảng (Default)/Right Rows Tập hợp nhiều hàng trong bảng </ASP: TABLE> Kết thúc bảng Ví dụ: CellPadding, GridLines, HorizontalAlign <form runat=server> <asp:Table runat="server" CellPadding="5" GridLines="horizontal" HorizontalAlign="Center"> <asp:TableRow> 25 <asp:TableCell>1</asp:TableCell> <asp:TableCell>2</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell>3</asp:TableCell> <asp:TableCell>4</asp:TableCell> </asp:TableRow> </asp:Table> </asp:Table> </form> Kết quả thu được bảng như sau: 3.
Khung – Frames HTML có các thẻ trình bày cho phép chia vùng hiển thị của cửa sổ trình duyệt thành nhiều khung, mỗi khung là một cửa sổ độc lập, hiển thị một tài liệu HTML khác nhau. Khung cho phép người thiết kế hiển thị đồng bộ nhiều tài liệu HTML khác nhau để tiện theo dõi, so sánh. Ví dụ, trong khung bên trái hiển thị các nút bấm, còn khung bên phải hiển thị tài liệu tương ứng. Trang trí khung Trang HTML thực hiện bày trí các khung (gọi là frameset document) có cấu trúc khác trang thông thường, không có khung.
Trang thường có 2 phần, HEAD và BODY. Trang bày trí khung có HEAD và FRAMESET thay cho BODY. Thành phần FRAMESET tổ chức các khung trong cửa sổ trình duyệt. Nó cũng có thể chứa thẻ NOFRAMES để xử lí trường hợp trình duyệt không hỗ trợ frame.
26 Các thành phần thông thường khác vốn nằm trong BODY không được xuất hiện trước thẻ mở FRAMESET. Nếu không, thành phần FRAMESET sẽ bị bỏ qua. Ví dụ: Dưới đây là một ví dụ đơn giản. <FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="frame1.html"> <FRAME src="frame2.gif"> </FRAMESET> <FRAME src="frame3.html"> <NOFRAMES> <P>This frameset document contains: </NOFRAMES> </FRAMESET> Đoạn mã trên sẽ tạo 3 khung, được bài trí như dưới đây.
Kết quả chạy đoạn code ví dụ Khi trình duyệt khách không hỗ trợ khung thì các khung sẽ không được hiển thị mà thành phần NOFRAMES sẽ được xử lí. Các thuộc tính FRAMESET Thẻ FRAMESET dùng để phân chia vùng hiển thị trong cửa sổ trình duyệt thành các khung hình chữ nhật. Mỗi khung hình chữ nhật gọi là một frame, được định nghĩa bằng thẻ FRAME. rows = Danh sách các độ cao của các khung Danh sách gồm nhiều phần tử, cách nhau dấu phẩy.
Mỗi phần tử xác định độ cao (số dòng) của một khung. Chia chiều đứng thành bao nhiêu khung thì danh sách có bấy nhiêu phần tử. Chiều cao thể hiện bằng - Số pixel - Tỷ lệ phần trăm chiều cao màn hình - Tỷ lệ phần chiều cao còn lại. Giá trị mặc định là 100%, tức chỉ có một khung theo chiều ngang.
cols = Danh sách các độ rộng của các khung. Giá trị mặc định là 100%, tức chỉ có một khung theo chiều dọc. Thuộc tính rows thiết lập việc chia khung theo chiều ngang trong một frameset. Nếu không định nghĩa, thì các cột trong khung sẽ chiếm toàn bộ chiều cao vùng hiển thị.
Thuộc tính cols thiết lập việc chia khung theo chiều đứng trong một frameset. Nếu không định nghĩa, thì các dòng trong khung sẽ chiếm toàn bộ chiều rộng vùng hiển thị. Phối hợp hai thuộc tính sẽ tạo ra ô lưới các khung. 1- Chia màn hình thành hai nửa: nửa trên và nửa dưới: <FRAMESET rows="50%, 50%"> .the rest of the definition.
</FRAMESET> 2- Chia màn hình thành 3 cột. Cột giữa rộng 250 pixels. Cột đầu chiếm 25% của phần còn lại và cột thứ 3 chiếm 75% của phần độ rộng còn lại.the rest of the definition. </FRAMESET> 3- Tạo lưới gồm 2 x 3 = 6 khung.
<FRAMESET rows="30%,70%" cols="33%,34%,33%"> .the rest of the definition. </FRAMESET> 4- Chia chiều đứng màn hình thành 4 khung. Khung thứ nhất chiếm 30% của chiều cao vùng hiển thị. Khung thứ hai có chiều cao cố định 400 pixel.
Dấu sao có nghĩa là hai khung thứ 3, thứ 4 chia nhau phần còn lại. Khung thứ 4 có chiều cao là "2*", gấp đôi khung thứ 3 (vì "*" tương đương với 1*). Nếu chiều cao vùng hiển thị là 1000 pixel thì độ cao của các khung 1,2,3,4 lần lượt là: 300, 400, 100, 200 pixel !.the rest of the definition. </FRAMESET> Chia khung lồng nhau và thành phần FRAME Việc chia khung có thể lồng nhau nhiều mức.
Ví dụ: chia chiều rộng thành 3 khung đứng, sau đó khung ở giữa lại được chia thành 2 phần trên và dưới.contents of first frame.contents of second frame, first row.contents of second frame, second row.contents of third frame. </FRAMESET> Thẻ FRAME định nghĩa một khung hình cụ thể (trong nhiều khung hình của frameset). 29 Các thuộc tính: name = Tên của khung: Có thể dùng tên này để làm đích của mối siêu liên kết. src = URI : Trỏ đến trang tài liệu sẽ hiển thị trong khung.
noresize : Không cho phép co giãn lại kích thước scrolling = auto|yes|no : Thiết lập thanh cuộn. • auto: Xuất hiện thanh cuộn khi cần thiết. Đây là giá trị mặc định. • yes: Luôn có thanh cuộn.
• no: Luôn không có thanh cuộn. frameborder = 1|0 Thiết lập đường biên. • 1: Có đường biên giữa khung đang xét với các khung kề nó. Đây là giá trị mặc định.
• 0: Không có đường biên giữa khung đang xét với các khung kề nó. marginwidth = số pixel Thiết lập độ rộng lề chiều rộng = khoảng trống giữa phần hiển thị nội dung và biên trái, biên phải. Giá trị mặc định tuỳ theo bộ duyệt. marginheight = số pixel Thiết lập độ rộng lề chiều cao = khoảng trống giữa phần hiển thị nội dung và biên trên, biên dưới.
Giá trị mặc định tuỳ theo trình duyệt. Lưu ý: Nội dung trong một frame không được thuộc về chính trang tài liệu định nghĩa frameset. Thiết lập Target, thẻ NOFRAME và IFRAME Thiết lập Target Thuộc tính target là để xác định tệp tài liệu HTML sẽ hiển thị trong khung. target = tên khung đích.
Thiết lập tên của khung mà tài liệu sẽ mở ra trong khung đó. 30 Thuộc tính này dùng với các thành phần tạo mối liên kết: (A, LINK), image map (AREA), và FORM. Thẻ NOFRAMES Thành phần NOFRAMES thiết lập nội dung cần hiển thị khi trình khách không hỗ trợ frame hoặc đã tắt chức năng hiển thị frame.
