Các thẻ HTML đặc biệt

BÀI 1. TỔNG QUAN VỀ LẬP TRÌNH WEB

1.2. GIỚI THIỆU CẤU TRÚC HTML VÀ THẺ HTML

1.2.3 Các thẻ HTML đặc biệt

*). Tạo bảng (Table)

- Thẻ <TABLE> </TABLE>: Tạo một bảng trên trang web.

Trong đó:

ALIGN=align-type: Lề của bảng theo chiều ngang, có giá trị là “left” hoặc “right”,

“center”.

BACKGROUND=url: Chỉ định ảnh nền của bảng BGCOLOR=color-type: Màu nền của bảng BORDER=n: Đường viền bảng, n tính bằng pixel

CELLPADDING=n: Khoảng cách từ ô tới nội dung của ô.

WIDTH=n: độ rộng của bảng.

- Thẻ <TR></TR>: Thẻ cho phép tạo dòng trong một bảng

Trong đó:

ALIGN=align-type: Lề của các ô trong dòng, có giá trị là “left” hoặc “right”,

“center”.

BACKGROUND=url: Chỉ định ảnh nền của dòng.

BGCOLOR=color-type: Màu nền của dòng

VALIGN=v-align-type: Lề theo chiều dọc cho văn bản trong các ô trên dòng. Giá trị có thể là: top, bottom, middle.

- Thẻ <TD></TD>: Sử dụng để tạo ô trong các dòng của bảng.

Trong đó:

ALIGN=align-type: Lề văn bản trong ô, có giá trị là left, right hay center.

BACKGROUND=url: Chỉ định ảnh nền cho ô.

BGCOLOR=color-type: Màu nền của ô.

COLSPAN=n: Trộn n ô gần nhau theo hàng ngang.

ROWSPAN=n: Trộn n ô gần nhau theo hàng dọc.

VALIGN=v-align-type: Lề theo chiều dọc cho văn bản trong các ô.

- Thẻ <TH>: tương tự như TD chỉ khác là văn bản được in đậm, căn giữa Bảng 1- 8: Cấu trúc thẻ làm việc với bảng

Thẻ ý nghĩa

<TABLE> Tạo bảng

<TABLE ALIGN=align-type BACKGROUND=url BGCOLOR=color-type BORDER=n CELLPADDING=n WIDTH=n>

<TR ALIGN=align-type BACKGROUND=url BGCOLOR=color-type VALIGN=v-align-type>...</TR>

<TD ALIGN=align-type BACKGROUND=url BGCOLOR=color-type COLSPAN=n ROWSPAN=n VALIGN=v-align-type>

<TR> Tạo dòng

<TD> Tạo ô

<TH> Tạo ô tiêu đề (Chữ in đậm, căn giữa)

<CAPTION> Mặc định tiêu đề của bảng nằm ở trên và căn lề giữa.

Tuy nhiên có thể thay đổi bằng cách dùng thuộc tính ALIGN bên trong CAPTION.

Ví dụ: Tạo một bảng thông tin

<TABLE BORDER=1 WIDTH=100%>

<CAPTION> Bảng thông tin</CAPTION>

<TR><TD> Ô 11<TD> Ô 12

<TR><TD> Ô 21<TD>Ô 22

</TABLE>

Ví dụ: Tạo bảng và thực hiện trộn 2 ô trong bảng

<TABLE BORDER=1 WIDTH=100%>

<CAPTION> Tạo bảng và trộn ô </CAPTION>

<TR><TD>Ô 11<TD COLSPAN=2>

Ô 12 trải dài trên 2 ô

<TR><TD>Ô 21<TD>Ô 22<TD>Ô 23

</TABLE>

*). Tạo liên kết (Hyperlink)

- Thẻ <a> </a>: tạo liên kết để đến các trang web khác.

Url: Là địa chỉ trang Web cần liên kết đến

Ví dụ: Tạo các liên kết đến trang Web trên Internet

<A HREF="http://www.microsoft.com">Website Microsoft</A><br>

<A HREF="index.htm">Liên kết đến trang chủ index.htm</A><br>

<A HREF=”../../default.htm”>Welcome to Siêu thị SuperMarket </A><br>

<A HREF=”images/quangcao.gif”>Welcome to Sieu Thi Bai Tho</A><br>

<A HREF="sample.htm" TARGET="viewer">Liên kết đến trang sample.htm</A>

Chú ý:

- Ngoài việc tạo liên kết cho các đoạn text ra có thể liên kết hình ảnh.

- Liên kết để gửi thư điện tử

Ví dụ: <A HREF="mailto:khoacntt@cnd.edu.vn">giangvien@cnd.edu.vn </A>

<A HREF=url>Chuỗi diễn giải Hyperlink</A>

<A HREF="http://www.microsoft.com"><IMG SRC="images/bullet.gif">

Click vào ảnh này để liên kết đến trang Web của Microsoft </A>

<A HREF=Dia_Chi_E-mail>Chuỗi diễn giải liên kết gởi E-mail</A>

*). Tạo khung (Frame)

- Thẻ <FRAMESET> <FRAME>: Sử dụng để chia màn hình cửa sổ trình duyệt thành nhiều khung (Frame). Thẻ <FRAMESET> được kết hợp với thẻ <FRAME> để định nghĩa một khung.

- Thẻ <IFRAME>: Để chèn khung vào bên trong trang Web.

Ví dụ: Tạo trang Web có tên là home.htm chứa 2 khung, khung bên trái chứa nội dung trang Web page_1.htm và khung bên phải chứa nội dung trang Web page_2.htm.

<TITLE>Trang web có 2 khung</TITLE></HEAD>

<FRAME NAME="mucluc" TARGET="noidung" SRC="page_1.htm"

SCROLLING="no">

</FRAMESET></HTML>

- Mỗi khung có 1 tên, ở ví dụ trên khung trái có NAME="mucluc" và khung phải có NAME="noidung".

- SRC=url: Để chỉ định trang Web hiển thị trên khung

- Ðể các liên kết trong Frame “mucluc” liên kết đến các trang page_1.htm, page_2.htm và sẽ hiển thị trong khung noidung, ta chỉ định:

<FRAME NAME=”mucluc” TARGET="noidung" SRC="page_1.htm">

hoặc là trong từng liên kết có khai báo thuộc tính TARGET:

<A HREF="page_2.htm" TARGET=”noidung”>page 2</A>

hoặc là trang Web page_1.htm trong phần đầu <HEAD></HEAD> có khai báo sau:

<BASE TARGET="noidung">

- Ðể không xuất hiện thanh cuộn và đường viền khung, thêm thuộc tính SCROLLING="no" và FRAMEBORDER=0 vào thẻ <FRAME>

*). Tạo Form

- Thẻ <FORM>: Được sử dụng để định nghĩa một Form trong trang Web, chứa các đối tượng để tương tác với người dùng.

trong đó:

+ ACTION=url: Chỉ định địa chỉ trang sẽ chuyển đến khi người dùng click vào nút Submit.

+ METHOD: Chỉ định phương thức gửi dữ liệu. Có giá trị bằng POST hoặc GET.

+ NAME: Tên của form.

- Thẻ <INPUT>: Định nghĩa các đối tượng trên Form. Bao gồm các thuộc tính:

+ TYPE="text": Chỉ định loại đối tượng trên Form, có thể nhận các giá trị:

- Text: Hộp nhập dữ liệu

- Hidden: Hộp nhập dữ liệu ẩn. (không nhìn thấy)

- Password: Hộp nhập mật khẩu. Thông tin nhập vào giấu bằng kí tự *.

- Radio: Tạo các nút lựa chọn. (Chọn một trong nhiều)

<FORM METHOD="POST" ACTION=url NAME=tên>

- Checkbox: Tạo các nút lựa chọn đánh dấu. (Chọn nhiều trong nhiều) - File: Hộp chọn tập tin, hiển thị hộp thoại để chọn tập tin

- Submit: Nút Submit, khi người dùng sẽ chuyển đến trang quy định bởi thuộc tính ACTION của thẻ FORM

- Image: nút Submit hình ảnh - Button: nút lệnh

- NAME = tên: Chỉ định tên của đối tượng - VALUE = giátrị: Chỉ định giá trị của đối tượng - SIZE=n: Chỉ định chiều dài của đối tượng

- MAXLENGTH=n: Số ký tự tối đa nhập vào đối tượng - CHECKED: Đối tượng đang được chọn

- READONLY: Chỉ định đối tượng là chỉ đọc, không cho phép nhập dữ liệu

- STYLE = "font-family:Arial; font-weight:bold; font-size:10pt": chỉ định phông chữ, kiểu chữ, cỡ chữ.

- ALT = Chuỗi thay thế: Chỉ định chuỗi ký tự thay thế.

- ACCESSKEY = kýtự: Chỉ định phím tắt ALT + Ký tự, khi ấn tổ hợp phím này sẽ chuyển nhanh đến đối tượng trên Form.

- TABINDEX: Thứ tự nhận con trỏ trên Form khi ấn Tab Ví dụ: Thiết kế form nhập mới thông tin như hình

Hình 1-7. Form đăng kí thông tin

<P><INPUT TYPE="checkbox" NAME="C1" VALUE="ON" CHECKED>Sở thích

</P>

<P><INPUT TYPE="image" ALT=”Tìm kiếm” BORDER="0" SRC="timkiem1.jpg"

24 NAME="I1" WIDTH= "100" HEIGHT="20">

<INPUT TYPE="submit" VALUE="Submit" NAME="B1"><INPUT TYPE="reset"

VALUE ="Reset" NAME="B2"></p>

</FORM>

- Thẻ <SELECT> và <OPTION>: Được sử dụng để tạo hộp danh sách lựa chọn.

Ví dụ: Thiết kế nút lựa chọn danh sách

</SELECT></P>

Trong đó: Thẻ <SELECT> gồm các thuộc tính:

+ NAME=tên: Chỉ định tên của hộp danh sách.

+ SIZE=n: Chỉ định số dòng hiển thị của hộp danh sách.

+ MULTIPLE: Cho phép chọn nhiều mục trong hộp danh sách.

+ Thẻ <OPTION>: định nghĩa các mục trong hộp danh sách, với:

- Thuộc tính SELECTED nghĩa là mục đang được chọn.

- Thuộc tính VALUE=giátrị chỉ định giá trị của mục trong hộp danh sách.

- Chuỗi ký tự giữa hai thẻ <OPTION>, </OPTION> là các mục trong hộp danh sách.

- Thẻ <TEXTAREA>: Sử dụng để định nghĩa một đối tượng cho phép nhập nhiều dòng thông tin.

Trong đó:

+ ROWS=n: Chỉ định số dòng hiển thị của hộp nhập dữ liệu.

+ COLS=n: Chiều dài của hộp nhập dữ liệu.

+ NAME=tên: Tên của hộp nhập dữ liệu.

<SELECT NAME=name MULTIPLE>

<OPTION VALUE=”giá trị 1”> Tên giá trị 1 </OPTION>

...

<SELECT>

<P><TEXTAREA ROWS="2" NAME="S1" COLS="20">

</TEXTAREA></P>

25 TÓM TẮT NỘI DUNG

1. Khái niệm cơ bản

- World Wide Web là một không gian thông tin toàn cầu cho phép người dùng có thể truy cập (đọc và viết) qua các máy tính có nối mạng internet.

- Giao thức truyền siêu văn bản (Hypertext Transfer Protocol - HTTP) được ứng dụng để truyền tải tài liệu và các tệp siêu văn bản giữa máy chủ Web (Web server) và máy khách Web (Web client) thông qua một trình duyệt Web.

- Website tĩnh là website chỉ bao gồm các trang web không có cơ sở dữ liệu đi kèm.

+ Trang web tĩnh thường được xây dựng bằng các ngôn ngữ HTML, DHTML…

+ Trang web tĩnh thường được dùng để thiết kế các trang web có nội dung ít thay đổi và cập nhật.

+ Website tĩnh thích hợp với cá nhân, tổ chức, doanh nghiệp vừa và nhỏ mới làm quen với môi trường Internet.

- Web động là những website có cơ sở dữ liệu và được hỗ trợ bởi các phần mềm xử lý dữ liệu và phát triển web.

- Một ngôn ngữ kịch bản hay ngôn ngữ lập trình kịch bản (Scripting language hay script language) là một ngôn ngữ lập trình hỗ trợ viết kịch bản (script). Các chương trình được viết cho ngôn ngữ kịch bản có thể được thực thi thông qua lời gọi từ các tác vụ thay vì chạy thủ công bởi người dùng.

2. Ngôn ngữ HTML

- Cấu trúc trang HTML cơ bản

<TITLE>BÀI THƠ SuperMarket</TITLE>

</HEAD>

<BODY>

<P ALIGN="center"><B>Welcome to SuperMarket</B></P>

</BODY> </HTML>

- Các thẻ chính của trang web

+ Thẻ đầu trang web: <HEAD></HEAD>, <TITLE></TITLE>, <BGSOUND>

+ Thuộc tính thẻ <BODY></BODY>: BACKGROUND, BGCOLOR, LINK, TEXT BGPROPERTIES, LEFTMARGIN,...

+ Thẻ định dạng kí tự: <BASEFONT></BASEFONT>, <FONT></FONT>,

<B></B>, <I></I>, <U></U>, <S></S>...

+ Thẻ làm việc với bảng: <TABLE> </TABLE>, <TR> </TR>, <TD> </TD>...

+ Thẻ làm việc với khung trang: <FRAMESET> <FRAME>, <IFRAME>...

+ Thẻ làm việc với Form: <FORM>, <INPUT>, <TEXTAREA>, <SELECT>...

26 BÀI TẬP

Câu hỏi 1: Hãy cho biết các dịch vụ Internet thông dụng và các giao thức được sử dụng trên các dịch vụ này?

Câu hỏi 2: Tại sao cần phải có sự ánh xạ giữa tên miền và địa chỉ IP? Hãy cho biết tên của dịch vụ thực hiện công việc này?

Câu hỏi 3: Cho biết các tên miền được dùng thông dụng hiện nay?

Câu hỏi 4: So sánh sự khác nhau cơ bản giữa lập trình Web tĩnh và lập trình Web động?

Câu hỏi 5: Liệt kê các thẻ cơ bản của HTML làm việc với table và form.

27 BÀI THỰC HÀNH

Bài thực hành số 1: Tạo trang web theo yêu cầu sau:

Hình 1- 7. Mô tả bài thực hành 1 Yêu cầu thiết kế:

Stt Đối tượng Yêu cầu Hằng số

Màu 1 Trang web - Tiêu đề cửa sổ: Các tag cơ bản

2 Nội dung trang web

- Sử dụng các thẻ cơ bản để tạo trang web trên, trong đó:

+ Dòng đầu tiên: Căn giữa

+ Đọan văn bản ”Lập trình web ... ngôn ngữ HTML”:

Căn giữa Hướng dẫn giải :

Stt Đối tượng Hướng dẫn cài đặt

1 Trang web - Sử dụng thẻ <title>

2 Nội dung trang web

- Dòng 1: Thẻ <h1> và thuộc tính align để căn giữa

- Dòng 2: Thẻ <h2> và thuộc tính style (text-decoration) để gạch dưới - Dòng 3: Thẻ <p> hoặc <div> và thuộc tính style(font-weight) để in đậm

- Đọan văn bản ”Lập trình web ... ngôn ngữ HTML”: Thẻ <p> hoặc

<div> và thuộc tính align để căn giữa, thẻ <br> để xuống dòng.

Bài thực hành số 02: Tạo trang web nội dung và yêu cầu sau:

Hình 1- 8. Mô tả bài thực hành 2 Yêu cầu thiết kế:

Stt Đối tượng Yêu cầu Hằng số

1 Trang web - Tiêu đề cửa sổ: Định dạng văn bản

2 Nội dung trang web

Sử dụng các thẻ định dạng văn bản để tạo trang web:

- Định dạng như hình trên

- Dạng công thức hóa học và biểu thức phương trình bậc hai, có chữ màu đỏ

- Đọan code vòng lặp For: chữ màu xanh dương đậm, nền màu xám, có định dạng căn lề

#FF0000

#0000CC,

#CCCCCC Hướng dẫn giải:

Stt Đối tượng Hướng dẫn cài đặt

1 Trang web - Sử dụng thẻ <title>

2 Nội dung trang web

- Dòng dầu tiên: Thẻ <h2> và thuộc tính align để căn giữa

- Dùng thẻ <b>, <u> để định dạng các cụm từ in đậm và gạch dưới - Dùng thẻ <i> để định dạng các cụm từ in nghiêng

- Dùng thẻ <font> và thuộc tính color để tô màu chữ đỏ cho các công thức hóa học và phương trình

- Dùng thẻ <sub> và <sup> đề in các công thức hóa học và phương trình.

- Dùng thẻ <pre> để căn lề cho vòng lặp for và thuộc tính style (background- color; color) để tô màu nền và màu chữ.

Bài thực hành số 03: Tạo trang web có nội dung sau:

Hình 1- 9. Mô tả bài thực hành số 3

Yêu cầu thiết kế:

Stt Đối tượng Yêu cầu Hằng số

màu 1 Trang web - Tiêu đề cửa sổ: Sử dụng các thẻ cơ bản

2 Nội dung trang web

Sử dụng các thẻ cơ bản và thuộc tính của các thẻ để định dạng:

- Dòng đầu tiên: căn giữa, màu xanh lá mạ tựa đề

”MẸ!”: chữ đậm có màu hồng đậm và nền màu hồng nhạt.

- Ba đọan thơ: in nghiêng, có 3 màu chữ khác nhau.

- Mỗi đoạn cách nhau bởi 1 đường kẻ ngang.

- Toàn bộ bài thơ có màu nền là màu vàng nhạt.

#006600

#0000FF

#FF3399,

#FECFFD

#FFFFCC

30 Hướng dẫn giải:

Stt Đối tượng Yêu cầu

1 Trang web - Sử dụng thẻ <title>

2 Nội dung trang web

- Dòng 1: Thẻ <h1> và thuộc tính align, style (color) để căn giữa và tô màu chữ.

- Dòng 2: Thẻ <h2> và thuộc tính style (text-decoration; color) để gạch dưới và tô màu chữ.

- Dòng 3: Thẻ <p> hoặc <div> và thuộc tính style(font-weight) để in đậm.

- Dòng 4 - tựa đề ”MẸ!”: Thẻ <h2> và thuộc tính align, style (background-color; color; font-weight) để tô màu nền, màu chữ và in đậm.

- Ba đọan thơ: Thẻ <div> và thuộc tính align, style (font-style;

background-color; color) để căn giữa, in nghiêng, tô màu nền, màu chữ; Thẻ <br> đề xuống dòng.

- Đường kẻ ngang: Thẻ <hr> và thuộc tính width xác định độ rộng của đường kẻ.

Bài thực hành số 04: Tạo trang web nội dung và yêu cầu sau:

Hình 1- 10. Mô tả bài thực hành số 4

31 Yêu cầu thiết kế:

Stt Đối tượng Yêu cầu Hằng số

màu 1 Trang web - Tiêu đề cửa sổ: Ký tự đặc biệt, chèn hình ảnh, tạo

danh sách và liên kết

2 Nội dung trang web

Sử dụng các thẻ định dạng và các thuộc tính định dạng để tạo trang web:

- Định dạng như hình trên

- Khi nhấn chuột vào dòng “Liên hệ”: Mở trang web của công ty bán hoa tươi – http://www.shopbanhoa.vn Hướng dẫn giải :

Stt Đối tượng Hướng dẫn cài đặt

1 Trang web - Sử dụng thẻ <title>

2 Nội dung trang web

- Tiêu đề: Thẻ <h2> và thuộc tính align, style (color) - Hình: Thẻ <img> và thuộc tính src, height và align.

- Hai đọan văn bản Giới thiệu và Liên hệ: Các thẻ <ol>,<li>, <ul>

và thuộc tính type.

- “Giới thiệu” và “Liên hệ”: Thẻ <font> và thuộc tính style (background-color; color; font-weight )

- Tạo liên kết đến trang web: Mở trang web của công ty bán hoa tươi http://www.shopbanhoa.vn

Cơ sở dữ liệu Access

THAO TÁC VỚI CƠ SỞ DỮ LIỆU (MYSQL)