c01tongquan1 baitaplaptrinhwebphiaclient8119 c02html

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.05 MB, 152 trang )

<b>Chương 2</b>

</div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=2>

Nội Dung

<b>Bảng và trình bày trang - Khung </b>
<b>Hình ảnh – Âm thanh – Liên kết </b>

</div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=3>

<b>Giới thiệu ngôn ngữ HTML </b>



<b><sub>HTML (Hyper Text Markup Language): Ngôn ngữ </sub></b>

đánh dấu siêu văn bản



<sub>Là một ngôn ngữ dùng để xây dựng một trang Web.</sub>



<sub>Chứa các thành phần định dạng để báo cho trình duyệt </sub>

Web biết cách để hiển thị một trang Web.



<sub>Một trang web thông thường gồm có 2 thành phần </sub>

chính:



<sub>Dữ liệu của trang web (văn bản, âm thanh, hình ảnh...)</sub>

</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=4>

<b>Cấu trúc tổng quát của tập tin HTML</b>

<HTML>

<HEAD>

<BODY>

Phần dữ liệu của trang web
</BODY>

</HTML>

tin HTML

<b><HEAD> . . . </HEAD> : Phần đầu trang web</b>
<b><TITLE> Nội dung tiêu đề </TITLE>: Nội dung </b>

trên thanh tiêu đề

<b><BODY> Nội dung trên trang </BODY>: Nội </b>

</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=5>

<b>Cấu trúc tổng quát của tập tin HTML</b>

</div>
<span class='text_page_counter'>(6)</span><div class='page_container' data-page=6>

<b>Các thẻ của tập tin HTML</b>

Thẻ mở Thẻ đóng

<b><Tênthẻ [Thuộctính]></b>Thành phần chịu tác động<b></Tênthẻ></b>

Tên của thẻ đặt trong cặp ngoặc nhọn: < . . . >
Có hoặc khơng có các thuộc tính

Ví dụ: <B> Chào Các Bạn </B>  Nội dung sẽ in đậm
<Font Size=“4”> Chúc các bạn học tốt </Font>

Nội dung chữ có cỡ 4

</div>
<span class='text_page_counter'>(7)</span><div class='page_container' data-page=7></div>
<span class='text_page_counter'>(8)</span><div class='page_container' data-page=8>

<b>Các thẻ của tập tin HTML</b>

<b>1.</b>

<b><!DOCTYPE> là dịng đầu tiên của trang </b>

HTML, ghi thơng tin về version HTML dùng

trong trang HTML này.

Ví dụ: <!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.0 transitional//en">

<b>2.</b>

<b><HTML> … </HTML> định nghĩa phạm vi của </b>

văn bản HTML.

<b>3.</b>

<b><HEAD> … </HEAD> định nghĩa các mô tả về </b>

</div>
<span class='text_page_counter'>(9)</span><div class='page_container' data-page=9>

<b>Các thẻ của tập tin HTML</b>

<b>4. <TITLE> Nội dung tiêu đề </b>

<b>Nội dung tiêu đề </b>

<b></TITLE> mô tả tiêu </b>

đề của trang, thường được hiển thị trên thanh tiêu

đề của cửa sổ hiển thị trang web. Tiêu đề được

dùng khi bookmark trang Web này và làm chỉ mục

khi tìm kiếm trang Web (search engines index).

<b>5. <!- - nội dung chú thích … - -> trình duyệt web </b>

bỏ qua không đọc, không hiển

thị trên trang

Web.

<i><b>Lưu ý: Khơng được có khoảng trắng giữa <và !. </b></i>

</div>
<span class='text_page_counter'>(10)</span><div class='page_container' data-page=10>

<b>Các thẻ của tập tin HTML</b>

<b>7. <BASE></b>

HREF: khai báo URL gốc của tài liệu (dùng để tạo URL tương
đối).

TARGET: quy định đích đến mặc định cho các link trong trang
Web.

<b>8. <META> đặt ở giữa <head>…</head>, thường dùng </b>

quy định thuộc tính cho trang web

NAME: nhúng thêm thông tin.

HTTP-EQUIV: tự động chuyển đến trang Web khác và ấn định

ngôn ngữ viết kịch bản mặc định.

Ví dụ:

<META name="GENERATOR" content="Microsoft FrontPage 5.0">
<META name="description" content="ABC - NamVietCompany., Ltd" >
<META http-equiv="Refresh" content=" 3;

</div>
<span class='text_page_counter'>(11)</span><div class='page_container' data-page=11>

<b><sub> Các mã màu</sub></b>

</div>
<span class='text_page_counter'>(12)</span><div class='page_container' data-page=12>

<b><sub>Xác lập màu chung cho trang Web </sub></b>

<BODY BgColor=“Màu” Text=“Màu”….>
. . . Nội dung trang Web. . . . .
</BODY>



<b><sub>Các thuộc tính của <Body></sub></b>



<b><sub>BgColor: thiết lập màu nền của trang</sub></b>



<b><sub>Text: thiết lập màu chữ</sub></b>



<b><sub>Link: màu của siêu liên kết</sub></b>



<b><sub>Vlink: màu của siêu liên kết đã xem qua</sub></b>



<b><sub>Background: load một hình làm nền cho </sub></b>

trang



<b><sub>LeftMargin: Canh lề trái </sub></b>

</div>
<span class='text_page_counter'>(13)</span><div class='page_container' data-page=13></div>
<span class='text_page_counter'>(14)</span><div class='page_container' data-page=14>

<b>Các thẻ của tập tin HTML</b>

<b> Vấn đề ngắt dòng </b>

<b><HR> (horizontal rule) thêm đường kẻ ngang. </b>

Cú pháp:

</div>
<span class='text_page_counter'>(15)</span><div class='page_container' data-page=15>

<b>Các thẻ của tập tin HTML</b>

<b> Vấn đề ngắt dòng </b>

<b><HR> (horizontal rule) thêm đường kẻ ngang. </b>

Ví dụ:

<HTML>

<HEAD><TITLE>Welcome to HTML

</TITLE></HEAD>

<BODY>

<H3> My first HTML document</H3>

</div>
<span class='text_page_counter'>(16)</span><div class='page_container' data-page=16>

<b>Các thẻ của tập tin HTML</b>

<b> Vấn đề ngắt dòng </b>

<b><</b>

<BR>

ngắt xuống dòng mới nhưng vẫn thuộc cùng đoạn.

Ví dụ: <HTML><HEAD><TITLE>nguyen</TITLE></HEAD>
<BODY>

<comment>Chu thich cach 2</comment>

<HR align=left width="50%" color=blue SIZE=10>
Chao ban den voi WebSite trung tam ABC

Chao ban den voi WebSite<BR>trung tam ABC
<p><p>WebSite <p></p>

<p>trung tam ABC</p>
</BODY>

</HTML> <b>Để giữ các phần tử trên cùng 1 dòng: </b>

</div>
<span class='text_page_counter'>(17)</span><div class='page_container' data-page=17>

<b>Các thẻ định dạng văn bản</b>

</div>
<span class='text_page_counter'>(18)</span><div class='page_container' data-page=18>

<b>Các thẻ định dạng văn bản</b>

<b>Định dạng kiểu dáng - Style</b>

<b><</b>

<b>Tag <B>: định dạng chữ đậm</b>

Cú pháp:

<b><B> Nội dung chữ đậm</B></b>

<b>2.Tag <I>: Định dạng chữ nghiêng</b>

Cú pháp:

<i><I> Nội dung chữ nghiêng</I></i>

Cú pháp:

<U> Nội dung chữ gạch chân</U>

<b>4.Tag <BIG> và <SMALL>: Chỉnh cỡ chữ to hoặc nhỏ </b>

hơn

cỡ chữ xung quanh

Cú pháp:

<BIG> Nội dung chữ to </BIG>

</div>
<span class='text_page_counter'>(19)</span><div class='page_container' data-page=19>

<b>Các thẻ định dạng văn bản</b>

<b>Định dạng kiểu dáng - Style</b>

<b>5.</b>

<b>Tag <SUP> và <SUB> :Đưa chữ lên cao hoặc </b>

xuống thấp so với văn bản bình thường

Cú pháp:

<SUP>

Nội dung chữ đưa lên cao

</SUP>

<SUB>

Nội dung chữ đưa xuống thấp

</SUB>



<sub>Ví dụ </sub>

H<sub>2</sub>O

<br> <br>

</div>
<span class='text_page_counter'>(20)</span><div class='page_container' data-page=20>

<b>Các thẻ định dạng văn bản</b>

<b>Định dạng kiểu dáng - Style</b>

<b>6.</b>

<b><STRIKE>: Gạch ngang văn bản</b>

Cú pháp:

<STRIKE>

Nội dung văn bản bị gạch ngang

</STRIKE>

<b>7.<EM>: Văn bản được nhấn mạnh (giống tag <I>)</b>

Cú pháp:

<EM>Văn bản được nhấn mạnh</EM>

<b>8.<STRONG>: Định dạng chữ đậm (giống <B>)</b>

Cú pháp:

</div>
<span class='text_page_counter'>(21)</span><div class='page_container' data-page=21>

<b>Các thẻ định dạng văn bản</b>

</div>
<span class='text_page_counter'>(22)</span><div class='page_container' data-page=22>

<b>Các thẻ định dạng văn bản</b>

<b>Định dạng kiểu dáng – Style</b>

<b>9.<PRE>: Giữ nguyên các định dạng như: ngắt dịng, </b>

khoảng cách, thích hợp với việc tạo bảng

Cú pháp:

<PRE>

Nội dung văn bản cần định dạng trước với tất cả

định dạng khoảng cách, xuống dòng và ngắt hàng

</PRE>

Ví dụ

<pre>

</div>
<span class='text_page_counter'>(23)</span><div class='page_container' data-page=23>

<b>Các thẻ định dạng văn bản</b>

<b>Định dạng kiểu dáng – Style</b>

<b>9.<PRE>: Giữ nguyên các định dạng như: ngắt dịng, </b>

khoảng cách, thích hợp với việc tạo bảng

Ví dụ:

<b><HEAD><TITLE>Learning HTML</TITLE><HEAD></b>

<b>Humpty Dumpty sat on a wall</b>

<b>All the King’s horses</b>

</div>
<span class='text_page_counter'>(24)</span><div class='page_container' data-page=24>

<b>Các thẻ định dạng văn bản</b>

<b>Định dạng kiểu dáng – Style</b>

10.<tt> thẻ tt:chữ đánh máy(typewriter) </tt>

11.<cite> thẻ cite: hiển thị dạng chú thích </cite>

tự riêng. Dịng mã này khơng được thực hiện mà được hiển thị dưới
<b>dạng văn bản bình thường </b>

<b><sub>Cú pháp:</sub></b> <b><sub><CODE></sub></b>

<b><sub>Ví dụ: <CODE></sub></b>

If (x > 0) <br>

x = x + 1<br>
else <br>

</div>
<span class='text_page_counter'>(25)</span><div class='page_container' data-page=25>

<b>Các thẻ định dạng văn bản</b>

<b>Định dạng kiểu dáng – Style</b>

<b>13. <FONT>: </b>



<sub>Định dạng Font chữ cho cả tài liệu thì đặt tag <Font> </sub>

trong phần <Body>



<sub>Định dạng từng phần hoặc từng từ thì đặt tại vị trí </sub>

muốn định dạng

<b>Cú pháp</b>

:

<b><FONT Face=”</b>

<b>fontName1, fontName2, </b>

<b>fontName3</b>

<b>” size=”value” </b>

<b>color=”#rrggbb”>content</FONT></b>



<b><sub>Ví dụ:</sub></b>

</div>
<span class='text_page_counter'>(26)</span><div class='page_container' data-page=26>

<b>Các thẻ định dạng văn bản</b>

<b>Định dạng kiểu dáng – Style</b>

<b>13. <FONT>: </b>

Ví dụ:

<basefont size="6"> //basefont: định dạng cho tồn trang

web

<br> dong lenh 1

<basefont face="Bodoni MT" size="6" color="red">

<br>dong lenh 2</font>

<font face="Courier New">

<br>dong lenh 3</font>

<font face="AAA" color="blue">

<br> dong lenh 4</font>

</div>
<span class='text_page_counter'>(27)</span><div class='page_container' data-page=27>

<b>Các thẻ định dạng văn bản</b>

<b>Định dạng kiểu dáng – Style</b>

<b>13. <FONT>: </b>

Ví dụ:

<HEAD>

<TITLE>Welcome to HTML</TITLE>
</HEAD>

<BODY>

<FONT SIZE = 3 COLOR = HOTPINK FACE = Arial>
My first HTML document </FONT>

</div>
<span class='text_page_counter'>(28)</span><div class='page_container' data-page=28>

<b>Các thẻ định dạng văn bản</b>

<b>Định dạng kiểu dáng – Style</b>

<b>13. <FONT>: </b>

Ví dụ:

<HEAD>

<TITLE>Welcome to HTML</TITLE>
</HEAD>

<BODY>

<FONT SIZE = 3 COLOR = HOTPINK FACE = Arial>
My first HTML document </FONT>

<P> This is <FONT COLOR=BLUE SIZE = 6>going
</FONT> to be real fun</P>

</div>
<span class='text_page_counter'>(29)</span><div class='page_container' data-page=29>

<b>Các thẻ của tập tin HTML</b>

<b>14. Để ngắt dòng tạo đoạn mới, tạo dòng trống: </b>

<b><P> : Dùng để ngắt đoạn và bắt đầu đoạn mới</b>

<b>Cú pháp:</b>

<b><P ALIGN = “Direction”> </b>

Nội dung của đoạn

<b> </P></b>



<b><sub>Ví dụ:</sub></b>

<P>

Mary had a little lamb <br>

It’s fleece was white as snow<br>

Everywhere that Mary went <br>

</div>
<span class='text_page_counter'>(30)</span><div class='page_container' data-page=30>

<b>Các thẻ của tập tin HTML</b>

<b>Heading <Hn>: Tạo header, gồm 6 cấp header, đặt </b>

trong phần BODY

<h1>…</h1>: the largest heading.

<h6>…</h6>: the smallest heading

<H1 ALIGN= “Direction”>

Content Heading

</H1>

Direction [left, right, center]

<b><sub>Ví dụ: <H1>Heading 1</H1></sub></b>

</div>
<span class='text_page_counter'>(31)</span><div class='page_container' data-page=31>

<b>Các thẻ của tập tin HTML</b>

<b>16. </b>

<b><BLOCKQUOTE>: Dùng phân cách một khối văn bản </b>

để nhấn mạnh, đoạn văn bản này được tách ra thành một

paragraph riêng, thêm khoảng trắng trên và dưới đoạn

đồng thời thụt vào so với lề trái (tương đương chức năng

của phím tab)



<b><sub>Cú pháp: </sub></b>

<b><sub><BLOCKQUOTE> </sub></b>

<b>Nội dung khối văn bản nhấn </b>

<b>mạnh </b>

</div>
<span class='text_page_counter'>(32)</span><div class='page_container' data-page=32>

<b>Các thẻ của tập tin HTML</b>

<b>16. </b>

<b><BLOCKQUOTE>:</b>

Ví dụ: <HTML>

<HEAD><TITLE>Learning

HTML</TITLE><HEAD>

<BODY>

<BLOCKQUOTE><FONT color =

hotpink>

Humpty Dumpty sat on a wall

Humpty Dumpty had a great fall

</FONT>

</div>
<span class='text_page_counter'>(33)</span><div class='page_container' data-page=33>

<b>Các thẻ của tập tin HTML</b>

<b>17. </b>

<b><DIV> <SPAN>: Chia văn bản thành các khối, có </b>

<b>chung một định dạng</b>



<sub><DIV> chia văn bản thành một khối bắt đầu từ </sub>

một dòng mới.



<sub><SPAN> tách khối nhưng không bắt đầu từ một </sub>

dòng mới



<b><sub>Cú pháp:</sub></b>

<b><DIV>Nội dung của khối bắt đầu từ một dòng mới </b>

<b></DIV> </b>

</div>
<span class='text_page_counter'>(34)</span><div class='page_container' data-page=34>

<b>Các thẻ của tập tin HTML</b>

<b>17. </b>

<b><DIV> <SPAN>: Chia văn bản thành các khối, có </b>

<b>chung một định dạng</b>



<sub><DIV> chia văn bản thành một khối bắt đầu từ </sub>

một dòng mới.



<sub><SPAN> tách khối nhưng khơng bắt đầu từ một </sub>

dịng mới



<b><sub>Cú pháp:</sub></b>

<b><DIV>Nội dung của khối bắt đầu từ một dòng mới </b>

<b></DIV> </b>

</div>
<span class='text_page_counter'>(35)</span><div class='page_container' data-page=35>

<b>Các thẻ của tập tin HTML</b>

</div>
<span class='text_page_counter'>(36)</span><div class='page_container' data-page=36>

<b>Các thẻ của tập tin HTML</b>

<b>18. </b>

<b><</b>

<b><Marquee></Marquee> : Dùng để điểu khiển đối </b>

tượng chạy một cách tự động trên trang Web



<sub>Cú pháp: </sub>

<Marquee thuộctính>Object</Marquee>



<sub>Các thuộc tính của Marquee : </sub>



<i><sub>Direction =up/ down / left / right dùng để điều khiển </sub></i>

hướng chạy.



<i><sub>Behavior=alternate: đối tượng chạy từ lề này sang </sub></i>

lề kia và ngược lại.



<sub>Ví dụ:</sub>

</div>
<span class='text_page_counter'>(37)</span><div class='page_container' data-page=37>

<b>Các thẻ của tập tin HTML</b>

<b>18. </b>

<b><</b>

<b><Marquee></Marquee> : Dùng để điểu khiển đối </b>

</div>
<span class='text_page_counter'>(38)</span><div class='page_container' data-page=38>

<b>Các thẻ của tập tin HTML</b>

Lớn hơn (>): >

Ví dụ: <CODE>

If A > B

Then <BR>

A = A + 1

</CODE>



<sub>Nhỏ hơn (<): <</sub>

Ví dụ: <CODE>

</div>
<span class='text_page_counter'>(39)</span><div class='page_container' data-page=39>

<b>Các thẻ của tập tin HTML</b>



<sub>Cặp nháy””: "</sub>

Ví dụ:

<BODY>

" To be or not to be? " That is

the question

</BODY>



<sub>Ký tự và &: &</sub>

Ví dụ:

<P> William & Graham went to the fair

</div>
<span class='text_page_counter'>(40)</span><div class='page_container' data-page=40></div>
<span class='text_page_counter'>(41)</span><div class='page_container' data-page=41>

<b>Các thẻ của tập tin HTML</b>



<sub>Cặp nháy””: "</sub>

Ví dụ:

<BODY>

" To be or not to be? " That is

the question

</BODY>



<sub>Ký tự và &: &</sub>

Ví dụ:

<P> William & Graham went to the fair

</div>
<span class='text_page_counter'>(42)</span><div class='page_container' data-page=42>

<b>Danh Sách</b>

1. <b>Danh sách khơng có thứ tự (Unorder List -UL) </b>



<b><sub>Cú pháp: </sub></b>

<b><sub><UL Type= Shape1></sub></b>

<b><LI Type= Shape 2> Nội dung 1 </b>

<b><LI Type= Shape 2> Nội dung 2</b>

<b>…</b>

<b> </UL></b>

 <sub>Shape 1, Shape 2 là loại bullet tự động đặt ở đầu dòng trong </sub>
danh sách

 <sub>Shape 1: ảnh hưởng đến toàn danh sách</sub>

 <sub>Shape 2: ảnh hưởng đến một mục trong danh sách</sub>
 <sub>Các loại shape:</sub>

</div>
<span class='text_page_counter'>(43)</span><div class='page_container' data-page=43>

<b>Danh Sách</b>

1. <b>Danh sách khơng có thứ tự (Unorder List -UL) </b>



<b><sub>Ví dụ:</sub></b>

<h4>An Unordered List:</h4>

<ul>

</div>
<span class='text_page_counter'>(44)</span><div class='page_container' data-page=44>

<b>Danh Sách</b>

1. <b>Danh sách khơng có thứ tự (Unorder </b>

<b>List -UL) </b>



Ví dụ

So thich :

<ul type="circle">

<li>Xem phim hoat hinh

<li type="disc">Di hoc dung gio

<li type="square">Lam bai tap

<li>An kem

</div>
<span class='text_page_counter'>(45)</span><div class='page_container' data-page=45>

<b>Danh Sách</b>

1. <b>Danh sách khơng có thứ tự (Unorder List -UL) </b>
<b><HTML></b>

<b><HEAD><TITLE>Learning HTML</TITLE></b>
<b><BODY> <UL type=”Square”></b>

<b> <LI>Monday</b>
<b> <UL></b>

<b> </b> <b><LI>Introduction to HTML</b>
<b> </b> <b> <LI>Creating Lists</b>

<b> <LI>Tuesday</b>
<b> <UL></b>

<b> </b> <b><LI>Creating Tables</b>
<b> </UL></b>

</div>
<span class='text_page_counter'>(46)</span><div class='page_container' data-page=46>

<b>Danh Sách</b>

<b>Danh sách có thứ tự (Order List -OL) </b>



<b><sub>Cú pháp: </sub></b>

<b><sub><OL Type=x Start =n ></sub></b>

<b><LI Type =x1 Value=m> Nội dung 1</b>

<b><LI Type =x1 Value=m> Nội dung 2</b>

<b>…</b>

<b></OL></b>

 <sub>x: loại ký tự muốn sử dụng trong danh sách gồm :</sub>

 <sub>A: Chữ hoa, a: Chữ thường</sub>

 <sub>I: Số la mã hoa, i: Số la mã thường</sub>
 <sub>1: Cho số mặc định</sub>

 <sub>n: giá trị đầu tiên của danh sách</sub>

</div>
<span class='text_page_counter'>(47)</span><div class='page_container' data-page=47>

<b>Danh Sách</b>

2. <b>Danh sách có thứ tự (Order List -UL) </b>



<b><sub>Ví dụ: </sub></b>

<h4>An Ordered List:</h4>

<ol>

<li>Coffee</li>

<li>Tea</li>

</div>
<span class='text_page_counter'>(48)</span><div class='page_container' data-page=48>

<b>Danh Sách</b>

2. <b>Danh dách lồng nhau - A nested list:</b>

<h4>A nested List:</h4>

<ol type =I>

<li>Coffee</li>

<li>Tea

<ol>

<li>Black tea</li>

<li>Green tea</li>

</ol>

</div>
<span class='text_page_counter'>(49)</span><div class='page_container' data-page=49>

<b>Danh Sách</b>

3. <b>Danh sách định nghĩa</b>



<sub>Là danh sách dùng lập danh sách các thuật </sub>

ngữ, các định nghĩa ...



<sub>Mỗi mục gồm hai phần: phần thuật ngữ và chi </sub>

tiết thuật ngữ này



Cú pháp:

<DL>

<DT>Nhập từ muốn định nghĩa

<DD>Nhâp nội dung định nghĩa

</div>
<span class='text_page_counter'>(50)</span><div class='page_container' data-page=50>

<b>Danh Sách</b>

3. <b>Danh sách định nghĩa</b>

<TITLE>Learning HTML</TITLE>
</HEAD>

<BODY>

<h2> Definition List</h2>
<DL>

<DT>Pixel

<DD> Short for picture element. A pixel refers to the small dots that make up an image on
the screen. Pixel depth refers to the number of colours which may be displayed.

<DT>Resolution

<DD>The quality of the display on a monitor. The higher the resolution, the sharper the
image. The number of pixels that can be displayed on a screen defines resolution.
<DT>Scanner

</div>
<span class='text_page_counter'>(51)</span><div class='page_container' data-page=51>

<b>Tổ chức Website, sử dụnh hình ảnh&thiết lập liên kết</b>

<b>Tơ chức lưu trữ Website</b>

<b><sub> Các tập tin HTML của 1 Website</sub></b>

1 Website bao gồm rất nhiều trang Web –webpage (tập tin HTML).
Khi lưu trữ phải tổ chức có cấu trúc để thuận tiện trong quản lý, điều
chỉnh về sau.

Khi đưa Website lên WebServer được cấp 1 địa chỉ (Domain Name)
và 1 thư mục.

<b><sub>Trang chủ của 1 Website</sub></b>

Trang chủ (Home page) là được nạp khi truy cập mà không rõ tập tin
nào (Chỉ nhập URL của 1 Website). Thường qui định là:
index.htm,default.htm,home.htm

VD: Truy cập:

</div>
<span class='text_page_counter'>(52)</span><div class='page_container' data-page=52>

<b>Tổ chức Website, sử dụnh hình ảnh&thiết lập liên kết</b>

<b>Tổ chức lưu trữ Website(tt)</b>

<b><sub> Tổ chức Site 1 thư mục</sub></b>

Tất cả các tập tin HTML và các tập tin khác đều đặt trong cùng 1 thư
mục. Thuận lợi cho Website nhỏ, ít tập tin.

<b><sub> Tổ chức Site thư mục theo chức năng</sub></b>

Bên trong thư mục chính, tổ chức các thư mục con chứa các tập tin
có nội dung liên quan với nhau.

<b><sub> Tổ chức Site thư mục theo kiểu tập tin</sub></b>

Bên trong thư mục chính, tổ chức các thư mục con chứa các tập tin
cùng kiểu.

+ Thư mục chính chứa trang chủ và các thư mục con
+ 1 thư mục con chứa các trang HTML,

+ 1 thư mục con chứa các tập tin hình ảnh. . . . .
Thuận lợi sử dụng chung tập tin, dễ thay thế bổ sung.

</div>
<span class='text_page_counter'>(53)</span><div class='page_container' data-page=53>

<b>Tổ chức Website, sử dụnh hình ảnh&thiết lập liên kết</b>

<b>Tổ chức lưu trữ Website(tt)</b>

<b><sub> Địa chỉ tuyệt đối</sub></b>

Khi tham chiếu đến 1 tập tin phải ghi đầy đủ địa chỉ URL.
<b>http://ServerName/Đường dẫn/ Tên tập tin</b>
VD: />

<b><sub> Địa chỉ tương đối.</sub></b>

Khi tham chiếu đến 1 tập tin cùng thư mục tập tin chính:
<b>Tên tập tin </b>

Khi tham chiếu đến 1 tập tin khác thư mục tập tin chính:
<b>Đường dẫn/Tên tập tin</b>

</div>
<span class='text_page_counter'>(54)</span><div class='page_container' data-page=54>

<b>SIÊU LIÊN KẾT </b>



<sub>Siêu liên kết cho phép người truy cập có thể </sub>

duyệt từ trang web này đến trang web khác.



<sub>Một liên kết gồm 3 phần:</sub>



<i><b><sub>Nguồn: chứa nội dung hiển thị khi người dùng truy </sub></b></i>

cập đến, có thể là một trang web khác, một đoạn

film, một hình ảnh hoặc một hộp thoại để gửi

mail…



<i><b><sub>Nhãn: có thể là dịng văn bản hoặc hình ảnh để </sub></b></i>

người dùng click vào khi muốn truy cập đến liên

kết, nếu nhãn là văn bản thì thường được gạch

dưới

</div>
<span class='text_page_counter'>(55)</span><div class='page_container' data-page=55>

<b>SIÊU LIÊN KẾT </b>

<b>Các loại liên kết</b>



<i><b><sub>Internal Hyperlink (Liên kết trong): là các liên kết với </sub></b></i>

các phần trong cùng một tài liệu hoặc liên kết các trang

trong cùng một web site.



<i><b><sub>External Hyperlink (Liên kết ngoài): là các liên kết với </sub></b></i>

các trang trên web site khác.

<b>2. Tạo siêu liên kết</b>



<b><sub>Cú pháp:</sub></b>

<b><A HREF=”URL”> Nhãn </A></b>



<sub>URL: Địa chỉ của trang liên kết</sub>

</div>
<span class='text_page_counter'>(56)</span><div class='page_container' data-page=56>

<b>SIÊU LIÊN KẾT </b>

<b>Các loại liên kết</b>

 <sub>Dùng URL tương đối để liên kết đến các trang trong cùng một </sub>
website

Ví dụ:

<HTML>

<HEAD> <TITLE> Using links</TITLE></HEAD>
<BODY>

<A HREF = “Doc2.htm”>Click here to view document
2</A>

</BODY>
</HTML>

</div>
<span class='text_page_counter'>(57)</span><div class='page_container' data-page=57>

<b>SIÊU LIÊN KẾT </b>

3. Tạo BookMark:

khi nội dung quá dài nhảy đến một

phần cụ thể trên trang Web hiện hành

<A name=”tên Bookmark”> Nhãn </A> Nội dung



<sub>Tạo liên kết đến Bookmark:</sub>

<A Href =”#tên Bookmark”>Nhãn của text liên kết</A>



<sub>Ví dụ : </sub>

<HTML>

<HEAD><TITLE> Using htm links</TITLE> </HEAD>

<BODY>

<A HREF = “#Internet”>Internet</A><BR>

<A HREF = “#HTML”>Introduction to HTML</A><BR>
<A name = “Internet”>Internet</A>

</div>
<span class='text_page_counter'>(58)</span><div class='page_container' data-page=58>

58
58

<b>SIÊU LIÊN KẾT </b>

3. Liên kết với một Bookmark ở một tài liệu khác

<A href=”

Bookm

ark

”>



Ví dụ:

 <sub>Trang main.htm</sub>

<HTML>

<HEAD><TITLE> Main document</TITLE></HEAD>
<BODY>

<A HREF = “C:\Doc1.htm#Internet”>Internet</A><br>
<A HREF = “C:\Doc1.htm#HTML”>Introduction to
HTML</A><br>

</div>
<span class='text_page_counter'>(59)</span><div class='page_container' data-page=59>

<b>SIÊU LIÊN KẾT </b>

3. Liên kết với một Bookmark ở một tài liệu khác
Trang Doc1.htm

<HTML>

<HEAD><TITLE>Using Links</TITLE></HEAD>
<BODY>

<A name = “Internet”>Internet</A><BR>

Internet là một mạng của các mạng. Nghĩa là, mạng máy tính được
liên kết với các mạng khác, nối với các nước và ngày nay là toàn
cầu. Giao thức truyền TCP/IP cung cấp liên kết với tất cả các máy
tính trên thế giới.

<A name = “HTML”>Introduction to HTML</A><BR>

</div>
<span class='text_page_counter'>(60)</span><div class='page_container' data-page=60>

<b>SIÊU LIÊN KẾT </b>

<b>3. Liên kết đến hộp thư e-mail</b>



Cú pháp:

<A href=”mailto:địa chỉ Email”>Nhãn</A>



Nếu siêu liên kết đặt ở cuối trang thì dùng tag

<ADDRESS>



<sub>Cú pháp:</sub>

</div>
<span class='text_page_counter'>(61)</span><div class='page_container' data-page=61>

<b>SIÊU LIÊN KẾT </b>

<!DOCTYPE html>
<html>

This is an email link:

</p>
<p>

<b>Note:</b> Spaces between words should be replaced by %20 to
ensure that the browser will display the text properly.

</div>
<span class='text_page_counter'>(62)</span><div class='page_container' data-page=62>

<b>SIÊU LIÊN KẾT </b>

4. Một số tùy chọn



<i><sub>Định cửa sổ hiển thị trang khi nhấn liên kết: khi nhấp chuột </sub></i>

vào liên kết thì mặc định trang kết quả sẽ hiển thị tại cửa sổ

hiện tại.

<a href= “url” target=”_self / _blank / name”>

“_self”

hiển thị trên cửa sổ hiện tại (mặc

định).

“_blank” hiển thị trên một cửa sổ mới.

“name” hiển thị trên cửa sổ hoặc frame có

tên name

Khai báo đích đến mặc định cho các liên kết trong trang

</div>
<span class='text_page_counter'>(63)</span><div class='page_container' data-page=63>

<b>SIÊU LIÊN KẾT </b>

5. Bỏ gạch dưới trong liên kết

<b><a href=url style=”text_decoration:none”></b>



<b><sub>Phím tắt cho liên kết</sub></b>

<a href=”url”

<b>accesskey=”PhimTat”>NhanLienKet </a></b>



Trong Windows, phím tắt dùng kết hợp với phím

</div>
<span class='text_page_counter'>(64)</span><div class='page_container' data-page=64>

<b>SIÊU LIÊN KẾT </b>

6. Một số lưu ý khi dùng liên kết



<sub>Nên tạo chú thích cho liên kết giúp người đọc biết </sub>

được trang cần tới.



Nên dùng một màu thống nhất cho tất cả các liên

kết.



<sub>Khi link không chỉ tới trang html mà tới một tài liệu </sub>

như Word, Excel, PDF... thì bạn nên tạo biểu

tượng của nó bên cạnh link.

</div>
<span class='text_page_counter'>(65)</span><div class='page_container' data-page=65>

1. Một số thơng tin về hình ảnh



<b>.GIF (Graphic Interchange Format): </b>



<sub>Pallete: 256 màu. </sub>



<sub>Thông dụng, dùng làm banner logo, button, icon, link …</sub>



<sub>Trong suốt (Transparent).</sub>



<sub>Interlace: brower sẽ hiển thị ảnh ngay khi chưa tải đầy </sub>

đủ ảnh, tạo cảm giác ảnh đươc tải nhanh.



<sub>Có thể dùng làm ảnh động (animated).</sub>

<b>HÌNH ẢNH</b>

</div>
<span class='text_page_counter'>(66)</span><div class='page_container' data-page=66>

1. Một số thơng tin về hình ảnh



<b>.JPG ( JPEG: Joint Photographic Experts </b>

<b>Group): đẹp</b>



<sub>Là loại ảnh nén mất thông tin, nghĩa là ảnh sau khi bị </sub>

nén không giống như ảnh gốc



<b><sub>Pallete: hỗ trợ hơn 16 triệu màu và thường được sử </sub></b>

dụng cho các ảnh có màu thực.



<b><sub>Độ nén cao, với cùng số màu ảnh JPG có kích </sub></b>

<b>thước nhỏ hơn ảnh GIF.</b>



<b><sub>Khơng trong suốt.</sub></b>

<b>HÌNH ẢNH</b>

</div>
<span class='text_page_counter'>(67)</span><div class='page_container' data-page=67>

1. Một số thơng tin về hình ảnh



.PNG (Portable Network Graphics)



<sub>Pallete: chọn lọc mở rộng 24-bit màu thật RGB, sắc </sub>

xám và GIF 8-bit bảng màu và nén ít tổn thất hơn,

PNG có các kênh alpha, cho bạn tinh chỉnh nhiều

hơn GIF’s một lớp transparency, và có thể mơ phỏng

ảnh 3D



<sub>Không hỗ trợ họat hình, sử dụng cho các ảnh màu </sub>

cao và ảnh chất lượng cao



<sub>.BMP (Bitmap): đẹp nhất. </sub>

<b>HÌNH ẢNH</b>

</div>
<span class='text_page_counter'>(68)</span><div class='page_container' data-page=68>

2. Chèn hình ảnh, video



Cú pháp:

<img src=”url” align=”AlignType”

alt=”AlternativeText” width=”n” height=”n”

border=”n” vspace=”n” hspace=”n” lowsrc=”url”

dynsrc =”url” start =”fileopen/mouseover” loop

=”n/infinite” >

<b>HÌNH ẢNH</b>

</div>
<span class='text_page_counter'>(69)</span><div class='page_container' data-page=69>

2. Chèn hình ảnh, video

<b>HÌNH ẢNH</b>

src=”u

rl”



Chỉ định đường dẫn tập tin ảnh cần chèn. Có

thể là địa chỉ tham chiếu tuyệt đối hay tương

đối.

<b>src=“../images/hinh1.gif”</b>

<b>src=“hinh1.gif” //trong cùng thư mục fie htmi</b>



<sub>Khơng nên liên kết tập tin hình ảnh bằng địa </sub>

chỉ url của đĩa cứng.



<sub>Thông thường các tập tin ảnh được lưu trong </sub>

thư mục riêng để dễ quản lý các tập tin trong

website

</div>
<span class='text_page_counter'>(70)</span><div class='page_container' data-page=70>

2. Chèn hình ảnh, video

<b>HÌNH ẢNH</b>

align=

“AlignTyp

e”



<sub>Canh hàng hình ảnh so với văn bản</sub>

left / right / top / middle / bottom /

texttop / absmiddle / baseline …

</div>
<span class='text_page_counter'>(71)</span><div class='page_container' data-page=71>

<!DOCTYPE html>
<html>

<body>

<p>An image

<img src="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32"/>
with align="bottom".</p>

<p>An image

<img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32" />
with align="middle".</p>

<p>An image

with align="top".</p>

<p><b>Tip:</b> align="bottom" is default!</p>

<p><img src="smiley.gif" alt="Smiley face" width="32" height="32" />
An image before the text.</p>

<p>An image after the text.

<b>HÌNH ẢNH</b>

</div>
<span class='text_page_counter'>(72)</span><div class='page_container' data-page=72>

2. Chèn hình ảnh, video

<b>HÌNH ẢNH</b>

alt=”Alter

nativeText

”



Tạo chú thích cho hình chèn vào trang Web



Một số trình duyệt khơng hỗ trợ hình ảnh

hoặc người dùng xác lập không hiển thị

hình hay khơng tải hình. Trong trường hợp

này hình được thay bằng một khung trống.

Do đó nên tạo các chú thích (alternate text)

để hiển thị thay hình ảnh.



Trình duyệt IE 3.0 và Netscape 4.0 trở về

</div>
<span class='text_page_counter'>(73)</span><div class='page_container' data-page=73>

2. Chèn hình ảnh, video

<b>HÌNH ẢNH</b>

width=”n

”

height=”n

”



Xác lập kích thước ảnh, giúp trình duyệt dự

trữ chỗ trống cần thiết cho ảnh hiển thị và

tiếp tục tải các văn bản sau, có thể làm

trang Web được nạp nhanh hơn.



Tránh việc lạm dụng width, height để thay

đổi kích thước ảnh vì có thể làm biến dạng

ảnh.



n: có thể tính bằng pixel hay tỷ lệ phần

trăm so với đối tượng chứa nó.



<sub>Ví dụ: </sub>

<html><head><title>Image</title></head>

</div>
<span class='text_page_counter'>(74)</span><div class='page_container' data-page=74>

<b>HÌNH ẢNH</b>

<!DOCTYPE html>
<html>

<img src="smiley.gif" alt="Smiley face" align="left" width="32" height="32" />
A paragraph with an image. The align attribute of the image is set to "left". The
image will float to the left of this text.

</p>
<p>

<img src="smiley.gif" alt="Smiley face" align="right" width="32" height="32" />
A paragraph with an image. The align attribute of the image is set to "right".
The image will float to the right of this text.

</div>
<span class='text_page_counter'>(75)</span><div class='page_container' data-page=75>

2. Chèn hình ảnh, video

<b>HÌNH ẢNH</b>

border=”

n”

vspace=”

n”

hspace=”

n”



<sub>Chỉ định độ dày đường viền bao quanh </sub>

ảnh.



<sub>Đơn vị: pixel. </sub>



n=0: khơng có đường viền.



Qui định khoảng trắng xung quanh hình.



vspace: trên và dưới hình.

</div>
<span class='text_page_counter'>(76)</span><div class='page_container' data-page=76>

2. Chèn hình ảnh, video

<b>HÌNH ẢNH</b>

lowsrc=”u

rl”



<sub>Thuộc tính cho phép hiển thị lần lượt </sub>

hai hình cùng một vị trí. Thường dùng

nạp hình có kích thước nhỏ trước trong

khi chờ nạp hình có kích thước lớn hơn

để tạo cảm giác hình được nạp từ trạng

thái thơ sang chi tiết.

dynsrc

=”url”



Chỉ định đường dẫn tập tin ảnh cần

</div>
<span class='text_page_counter'>(77)</span><div class='page_container' data-page=77>

2. Chèn hình ảnh, video

<b>HÌNH ẢNH</b>

start

=”fleope

n/mouseo

ver”



<sub>Chỉ định video sẽ được chơi khi tài </sub>

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/infni

te”



Chỉ định số lần chơi. Nếu LOOP =

</div>
<span class='text_page_counter'>(78)</span><div class='page_container' data-page=78>

<b>HÌNH ẢNH</b>

Ví dụ

<img src="../image/tucau.jpg" align="left" alt="logo buýt"

width="320" height="240" border="1"

hspace="30"

vspace="30" >

<br><h4>Qui định đi xe buýt:</h4>

<ul>

<li> Lên xuống xe đúng điểm dừng.

<li> Lên xuống xe đúng cửa.

</div>
<span class='text_page_counter'>(79)</span><div class='page_container' data-page=79>

Dùng ảnh làm liên kết:



<sub>Có thể dùng hình ảnh để tạo một liên kết đến một trang </sub>

khác, hoặc nếu có một ảnh lớn, bạn có thể tạo ảnh nhỏ

hơn hoặc một biểu tượng cho nó để nó có thể hiển thị

nhanh chóng trên trang web, sau đó tạo liên kết để đưa

người truy cập đến ảnh có kích thước thật



<sub>Cú pháp:</sub>

<b><A HREF=”Địa chỉ trang liên kết”></b>

<IMG SRC=URL Alt=”nội dung thay thế”>Nhãn

</A>

<b>HÌNH ẢNH</b>

</div>
<span class='text_page_counter'>(80)</span><div class='page_container' data-page=80>

Dùng ảnh làm liên kết:

<!DOCTYPE html>
<html>

<body>

<p>Create a link of an image:
<a href="default.asp">

<p>No border around the image, but still a link:
<a href="default.asp">

</a></p>

</body>

<b>HÌNH ẢNH</b>

</div>
<span class='text_page_counter'>(81)</span><div class='page_container' data-page=81>

<b>Bản đồ ảnh:</b>



<sub>Bản đồ ảnh là một ảnh trong trang web được chia ra </sub>

làm nhiều vùng, mỗi vùng khi click vào sẽ liên kết đến

một địa chỉ URL



<b><sub>Cách tạo:Trước hết phải chèn vào trang một ảnh và đặt </sub></b>

nhãn cho ảnh

<b><IMG UseMap=”Label”></b>

<b><Map Name=”Label”></b>

<b><Area Shape= “type” coords=”x1,y1,x2,y2, …” </b>

<b>href=”URL”></b>

<b></Map></b>

<b>HÌNH ẢNH</b>

</div>
<span class='text_page_counter'>(82)</span><div class='page_container' data-page=82>

<b>Bản đồ ảnh:</b>



<sub>Trong đó:</sub>

 <sub>Label: tên của bản đồ ảnh</sub>

 <sub>Type: hình dạng của các vùng trên ảnh, gồm các loại:</sub>
 <sub>Rect: Vùng hình chữ nhật</sub>

 <sub>Circle: Vùng hình trịn</sub>
 <sub>Poly: Vùng hình đa giác</sub>

 <sub>Coords:toạ độ các đỉnhcủa hình</sub>

 <sub>Rect: (x1, y1, x2, y2) là toạ độ 2 đỉnh chéo của vùng hình CN</sub>
 <sub>Circle: (x, y, r) lần lượt là toạ độ tâm và bán kính của vùng hình </sub>

trịn

 <sub>Poly: (x1, y1, x2, y2, x3, y3, …) là các đỉnh của vùng hình đa </sub>

</div>
<span class='text_page_counter'>(83)</span><div class='page_container' data-page=83>

Bản đồ ảnh:

<!DOCTYPE html>
<html>

<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap" />

</map>
</body>

<b>HÌNH ẢNH</b>

</div>
<span class='text_page_counter'>(84)</span><div class='page_container' data-page=84>

<b>Hình nền cho trang Web:</b>



<sub>Trong hầu hết các trang web thường sử dụng nền màu, </sub>

với mục đích là làm nổi bật nội dung trang đó. Tuy nhiên

cũng có thể sử dụng hình ảnh để làm nền bằng thuộc tính

BACKGROUND của thẻ BODY.



<b><sub>Cú pháp:</sub></b>

<b><body background=”url” bgproperties=”fixed” </b>

<b>bgcolor=”color” text=”color” link=”color” </b>

<b>vlink=color leftmargin=”n” topmargin=”n”> </b>

<b>……….</b>

<b></body></b>

<b>HÌNH ẢNH</b>

</div>
<span class='text_page_counter'>(85)</span><div class='page_container' data-page=85>

<b>Hình nền cho trang Web:</b>

<b>HÌNH ẢNH</b>

background Chỉ định ảnh làm nền cho trang Web. Trình duyệt tự
xếp ngói (tilling) hình ảnh sao cho vừa với phạm vi
hiển thị của trang Web.

bgproperties

=”fxed” Chèn hình mờ bất động (watermark), ảnh nền không bị cuộn khi kéo thanh Scroll bar. Chỉ hiệu lực trong
IE.

bgcolor Chỉ định màu nền.

text Chỉ định màu văn bản

link Màu các hyperlink chưa chọn

vlink Màu các hyperlink đã chọn

alink Màu các hyperlink đang chọn

leftmargin Lề trái trang Web. Dùng trong IE
rightmargin Lề phải trang Web. Dùng trong IE

</div>
<span class='text_page_counter'>(86)</span><div class='page_container' data-page=86>

<b>Hình nền cho trang Web:</b>

<b>HÌNH ẢNH</b>

Ví dụ (Explorer)

<body leftmargin="100" topmargin="100“ >
Ví dụ (Netscape)

</div>
<span class='text_page_counter'>(87)</span><div class='page_container' data-page=87>



<sub>Hầu hết các trình duyệt khơng hỗ trợ trực tiếp các tập </sub>

tin multimedia nên máy tính cần có sự trợ giúp của các

ứng dụng (helper application) và phải có sound card.



<sub>Âm thanh nhẹ nhàng kèm theo sẽ làm trang web thi vị </sub>

hơn nhưng nếu lặp lại liên tục có thể sẽ gây khó chịu

cho người duyệt Web.



<sub>Các loại tập tin dùng làm âm thanh nền thông dụng là </sub>

wav, midi, wma, …

<b>ÂM THANH</b>

</div>
<span class='text_page_counter'>(88)</span><div class='page_container' data-page=88>

Tag <BgSound> :



<sub>Dùng để chèn một âm thanh vào trang Web. Âm thanh </sub>

này sẽ được phát mỗi khi người sử dụng mở trang

Web.



<sub>Cú pháp:</sub>

<BgSound src=”filenhac” Loop=value>



<sub>Src chứa địa chỉ file nhạc, file này có phần mở rộng </sub>

.mp3 , mdi, …



<sub>Loop xác định chế độ lặp đi lặp lại của bài hát, nếu value< </sub>

0 thì lặp vơ hạn, value=n thì lặp lại n lần rồi tự động tắt.

<b>ÂM THANH</b>

</div>
<span class='text_page_counter'>(89)</span><div class='page_container' data-page=89>

Tag <EMBED>:



<sub>Cho phép đưa âm thanh trực tiếp vào trang WEB.</sub>



<sub>Cú pháp:</sub>

<EMBED SRC="URL" >



<sub>Ví dụ:</sub>

<EMBED SRC="clouds.mid" WIDTH="145" HEIGHT="61">

<b>ÂM THANH</b>

</div>
<span class='text_page_counter'>(90)</span><div class='page_container' data-page=90>



<b><sub>Tạo liên kết cho tập tin Media </sub></b>

<A HREF=“Tên tập tin Media" target=_blank> Nhãn liên kết

</A>

Nhãn liên kết: là văn bản hoặc hình ảnh

Target=_blank: Mở cửa sổ riêng.



<b><sub> Liên kết DownLoad</sub></b>

Để tạo liên kết Download tài liệu: Chuyển tài liệu thành các

dạng tập tin Zip,Rar, pdf, .doc . . . sau đó tạo liên kết đến các

tập tin này.



<b><sub> Nhúng tập tin Media</sub></b>

Các dạng tập tin âm thanh thông dụng trên Internet: .wav,

.mp3, .wmv, .wma,.mpeg, .Ra, .Rm . . . hay các tập tin

Flash : .swf

<b>ÂM THANH</b>

</div>
<span class='text_page_counter'>(91)</span><div class='page_container' data-page=91>

<b>2.3. Thiết kế bảng biểu (Table), Biểu mẫu (Form)</b>

<b>2.3.1. Thiết kế bảng biểu - Table</b>

Bảng là một cấu trúc gồm nhiều hàng giao với nhiều cột là kỹ
thuật trình bày các thành phần trên trang web (Thiết kế bố cục trang
web). Cần phát thảo cấu trúc bảng trước khi thiết kế.

<TH>Nội dung tiêu đề cột 1</TH>
<TH>Nội dung tiêu đề cột 2</TH>
. . . .

</TR>
<TR>

</div>
<span class='text_page_counter'>(92)</span><div class='page_container' data-page=92>

<b>1. Tổng quan</b>



<sub>Bảng thường được sử dụng để tạo các văn bản nhiều cột </sub>

hoặc phân chia trang thành nhiều vùng khác nhau rất tiện

lợi trong thiết kế và trình bày trang web



<sub>Có thể chia bảng làm hai loại:</sub>

 <sub>Bảng thông dụng, được kẻ khung để dễ dàng đọc từng thông tin.</sub>
 <sub>Bảng ảo khơng kẻ khung, giúp định vị hình ảnh, text nhờ vào các </sub>

ô riêng biệt. Bảng này gồm những ô ảo khơng có đường viền
nhưng có thể tơ màu, chèn hình, giúp việc thiết kế bố cục rõ
ràng, sáng sủa



<sub>Trước khi thiết kế bảng trên máy cần lưu ý:</sub>

 <sub>Phác thảo cấu trúc bảng. Số lượng dòng cột và cách sắp xếp.</sub>
 <sub>Ước lượng độ rộng ô. Nội dung chứa trong ô.</sub>

<b>BẢNG - TABLE</b>

</div>
<span class='text_page_counter'>(93)</span><div class='page_container' data-page=93>

<b>Thiết kế bảng biểu (Table), Biểu mẫu (Form)</b>

<b>Thiết kế bảng biểu – Table(tt)</b>



<b><sub>Định dạng Table</sub></b>

<b>Tạo đường viền.</b>

<TABLE Border=n Bordercolor=“Trị màu”>

. . . .

</TABLE>

<b>Thiết lập độ rộng và canh lề bảng</b>

<TABLE Widht=n Alight= “Center” / ”Left”/ ”Right” >

. . . .

</TABLE>

n: Độ rộng cố định tính bằng pixel Hoặc % kích thước

cửa sổ .

</div>
<span class='text_page_counter'>(94)</span><div class='page_container' data-page=94>

<b>Thiết kế bảng biểu (Table), Biểu mẫu (Form)</b>

<b>Thiết kế bảng biểu – Table(tt)</b>

<b><sub>Định dạng Table</sub></b>

<b>Thuộc tính</b> <b>Ý nghĩa</b>

<Table Bgcolor=“Trị”> Màu nền cho tồn bảng
<Table

Background=“Image.gif”>

Ảnh nền cho tịan bảng
<TR Bgcolor=“Trị”> Màu nền cho tóan hàng
<TR Background=“Image.gif”> Ảnh nền cho tịan hàng
<TD Bgcolor=“Trị”> Màu nền cho ô

<TD Background=“Image.gif”> Ảnh nền cho ô

</div>
<span class='text_page_counter'>(95)</span><div class='page_container' data-page=95>

<b>Thiết kế bảng biểu (Table), Biểu mẫu (Form)</b>

<b>Thiết kế bảng biểu – Table(tt)</b>

<b><sub>Định dạng Table</sub></b>

<b>Thuộc tính</b> <b>Ý nghĩa</b>

<TD Align=“Hướng”> Canh theo chiều ngang: Left, Right, Center
<TD

VAlign=“Hướng”>

Canh theo chiều dọc: Top, Bottom, Middle
<TH Align=“Hướng”> Canh hàng tiêu đề theo chiều ngang

<TH

VAlign=“Hướng”>

Canh hàng tiêu đề theo chiều dọc

<TR Align=“Hướng”> Canh theo chiều ngang các ô trong hàng
<TR VAlign=“Hướng”> Canh theo chiều dọc các ô trong hàngCellSpacing=“n” Khoảng cách giữa các ô.

</div>
<span class='text_page_counter'>(96)</span><div class='page_container' data-page=96>

<b>Thiết kế bảng biểu (Table), Biểu mẫu (Form)</b>

<b>Thiết kế bảng biểu – Table(tt)</b>



<b><sub>Định dạng Table</sub></b>

<b> Trộn ô: Dùng thuộc tính RowSpan và ColSpan cho thẻ </b>

TD. TH.

<b>Thuộc tính</b> <b>Ý nghĩa</b>

<TD

RowSpan=“n”> Tạo ơ có độ cao n hàng
<TD ColSpan=“n”> Tạo ơ có độ rộng n cột
<TH

RowSpan=“n”>

</div>
<span class='text_page_counter'>(97)</span><div class='page_container' data-page=97>

<b>Thiết kế bảng biểu (Table), Biểu mẫu (Form)</b>

Ví dụ

<tr>

</div>
<span class='text_page_counter'>(98)</span><div class='page_container' data-page=98>

<b>Thiết kế bảng biểu (Table), Biểu mẫu (Form)</b>

<b>Thuộc tính của bảng</b>

Ví dụ 1

<Table

border=1

>

<tr>

<td>cell 1</td>

<td>cell 2</td>

</tr>

<tr>

</div>
<span class='text_page_counter'>(99)</span><div class='page_container' data-page=99>

<b>Thiết kế bảng biểu (Table), Biểu mẫu (Form)</b>

<b>Thuộc tính của bảng</b>

d)

Định chiều rộng và chiều cao của bảng:

<b><Table Width =n height=m>,</b>

<b> n là chiều rộng tính bằng </b>

Pixel

e) Canh lề bảng:

<b><Table Align= left/ right/ center>…</table></b>

f) Thuộc tính Cellpadding và CellSpacing:

<b><Table CellSpacing =”value”>:</b>

<b> Khoảng cách giữa đường </b>

viền của các ô

<b><Table CellPadding=”Value”>:</b>

Khoảng cách giữa đường

viền của ô với văn bản

</div>
<span class='text_page_counter'>(100)</span><div class='page_container' data-page=100>

<b>Thiết kế bảng biểu (Table), Biểu mẫu (Form)</b>

</div>
<span class='text_page_counter'>(101)</span><div class='page_container' data-page=101>

<b>Thiết kế bảng biểu (Table), Biểu mẫu (Form)</b>

Ví dụ:

<caption> Properties of Table</caption>
<tr>

<th colspan="3"> Colspan</th>
</tr>

<tr>

<th Rowspan=”2”> Rowspan</th>
<td align=center>Cell 1</td>

<tr>

</div>
<span class='text_page_counter'>(102)</span><div class='page_container' data-page=102>

<b>Thiết kế bảng biểu (Table), Biểu mẫu (Form)</b>

Ví dụ:

<tr>

<tr>

</div>
<span class='text_page_counter'>(103)</span><div class='page_container' data-page=103>

<b>Ví dụ</b>

<b>TABLE VÀ TRÌNH BÀY TRANG</b>

</div>
<span class='text_page_counter'>(104)</span><div class='page_container' data-page=104>

<b>2. Trình bày trang</b>

Bước 1: Tạo một table thứ nhất gồm 1 dòng và 2 cột

<table>

<tr>

<td>

</td>

<td>

<!--Tabble 2 -- >

</td>

</tr>

</table>

<b>TABLE VÀ TRÌNH BÀY TRANG</b>

</div>
<span class='text_page_counter'>(105)</span><div class='page_container' data-page=105>

Bước 2: tạo table thứ 2 gồm 3 dòng và 2 cột

<!—Chèn hình logo-->
</td>

</tr>
<tr>

<!--Nội dung 1 -- >
</td>

<td>

<!--Nội dung 2 -- >
</td>

</tr>
<tr>
<td>

<!--Nội dung 3 -- >
</td>

</tr>

<b>TABLE VÀ TRÌNH BÀY TRANG</b>

</div>
<span class='text_page_counter'>(106)</span><div class='page_container' data-page=106>

1. Khái quát về khung:



<sub>Là một kỹ thuật cho phép chia cửa sổ trình duyệt thành </sub>

nhiều phần (cửa sổ con), mỗi phần hiển thị một nội dung

riêng.



<sub>Việc phân chia này gọi là thiết lập FRAME SET (tập khung, </sub>

bộ khung, sơ đồ khung) và được dùng để hiển thị nhiều

trang web trên một cửa sổ cùng một lúc.



<sub>Không sử dụng thẻ <body> … </body> trong trang thiết kế </sub>

bộ khung.

<b>KHUNG - FRAME</b>

</div>
<span class='text_page_counter'>(107)</span><div class='page_container' data-page=107>

<b>1. Cách tạo một Frame LAYOUT:Hiển thị nhiều trang Web trong </b>

<b>cùng một cửa sổ Browse.</b>

<TITLE>Page Title</TITLE>
</HEAD>

Frame Definitions
</FRAMESET>

</HTML>



<sub>Các dạng frame : Tag <FRAMESET> có 2 thuộc tính ROWS và </sub>

<b>KHUNG - FRAME</b>

</div>
<span class='text_page_counter'>(108)</span><div class='page_container' data-page=108>

<b>2. Tạo frame theo dòng</b>

 <sub>Cú pháp: </sub><sub><HTML></sub>

<Frame name=”Name1” Src=”Content1.htm>
<Frame name=”Name2” Src=”Content2.htm>
…..

</HTML>

 <sub>Trong đó:</sub>

 <i><sub>a, b: là độ cao của các dịng thứ 1, thứ 2 …, có thể tính bằng pixel hoặc bằng </sub></i>
%

 <i><sub>Name: tên khung, (xác định chức năng của khung)</sub></i>

 <i><sub>Content.htm: địa chỉ trang web xuất hiện đầu tiên trong khung</sub></i>

<b>KHUNG - FRAME</b>

</div>
<span class='text_page_counter'>(109)</span><div class='page_container' data-page=109>

<b>2. </b>

<b>Tạo frame theo dịng</b>



<b><sub>Ví dụ:</sub></b>

<HTML>

<HEAD><TITLE>Frame</TITLE></HEAD>
<Frameset Rows=20%, 60%, 20% >

</HTML>

20%

60%

<b>KHUNG - FRAME</b>

</div>
<span class='text_page_counter'>(110)</span><div class='page_container' data-page=110>

3. Tạo frame theo cột



<sub>Cú pháp:</sub>

<HTML>

<Frame name=”Name1” Src=”Content1.htm”>
<Frame name=”Name2” Src=”Content2.htm”>
…..

</HTML>

<b>KHUNG - FRAME</b>

</div>
<span class='text_page_counter'>(111)</span><div class='page_container' data-page=111>

<b>3. </b>

<b>Tạo frame theo cột</b>



<b><sub>Ví dụ:</sub></b>

<HTML>

<HEAD><TITLE>Frame</TITLE></HEAD>
<Frameset Cols=30%, 30%, * >

</HTML> 30%

30%

<b>KHUNG - FRAME</b>

</div>
<span class='text_page_counter'>(112)</span><div class='page_container' data-page=112>

4. Các thuộc tính của Frame:

<i>Noresize: Khơng đổi kích thước</i>

<i>Scrolling: có/khơng có thanh cuộn</i>

<i>Auto: Xuất hiện thanh cuộn khi nội dung dài</i>

<i>Yes: luôn xuất hiện thanh cuộn</i>

No: không xuất hiện thanh cuộn



<sub>Ví dụ:</sub>

<b>KHUNG - FRAME</b>

</div>
<span class='text_page_counter'>(113)</span><div class='page_container' data-page=113>

4. Các thuộc tính của Frame:

c) Frameborder: đường viền của khung mặc định là 1, muốn

giữa các khung không cịn đường viền thì trong tag

Frameset nhập thêm Border=0,

d) Marginwidth: hiệu chỉnh khoảng cách từ nội dung đến lề trái

và phải của khung (tính bằng pixel)

e) Marginheight: hiệu chỉnh khoảng cách từ nội dung đến lề

trên và dưới của khung (tính bằng pixel)

<b>KHUNG - FRAME</b>

</div>
<span class='text_page_counter'>(114)</span><div class='page_container' data-page=114>

<b>5. Các frame lồng nhau:</b>

<Frameset >

<Frame name=”name” src=”Page.htm”>

<Frameset>

<Frame name=”name” src=”Page.htm”>

…

</Frameset>

…

</Frameset>

<b>KHUNG - FRAME</b>

</div>
<span class='text_page_counter'>(115)</span><div class='page_container' data-page=115>

<b>5. Các frame lồng nhau:</b>

Ví dụ

<frameset rows="100,*">

<frame name="TieuDe" src="Vd1_2.htm">

<frameset cols="150,*">

<frame name="ChucNang" src="Vd1_5.htm">

<frame name="NoiDung" src="Vd1_3.htm">

</frameset>

<b>KHUNG - FRAME</b>

</div>
<span class='text_page_counter'>(116)</span><div class='page_container' data-page=116>

6. Liên kết frame:



<sub>Trang đầu tiên của khung được chỉ ra trong thuộc tính SRC, </sub>

ta có thể chỉnh các trang khác cùng xuất hiện trong khung

đó bằng cách chỉ ra vị trí trang đích



<sub>Tại trang muốn tạo liên kết với khung, ta nhập cú pháp:</sub>

<a Href=”Page.htm Target=”name”>



<sub>Nhãn mục liên kết</sub>

</a>

Trong đó :



<i>Target=Name : tên của khung mà trang muốn liên kết đến </i>

trong tag <Frame>



<i><sub>Page.htm: trang hiển thị trong khung liên kết</sub></i>

<b>KHUNG - FRAME</b>

</div>
<span class='text_page_counter'>(117)</span><div class='page_container' data-page=117>

6. Liên kết frame:



<b><sub>Tag <Base>: Nếu có nhiều liên kết đến các trang xuất </sub></b>

hiện trong cùng một khung thì thuộc tính target mặc

định đặt trong tag <Base>

<b><Head></b>

<b><Base target=”name”></b>

<b><a href=”URL”>Nhãn liên kết</a></b>

<b>…</b>

<b></head></b>

Topframe

Leftframe

<b>KHUNG - FRAME</b>

</div>
<span class='text_page_counter'>(118)</span><div class='page_container' data-page=118>

7. Phần tử NOFRAMES: Phần tử NOFRAMES được sử dụng để chỉ nội
dung thay thế cho frame khi trình duyệt khơng hỗ trợ frame.

 <sub>Cú pháp:</sub>

<HTML>

<HEAD><TITLE>Page title</TITLE></HEAD>
<FRAMESET>

Frame Definitions
</FRAMESET>

Page Layout
</BODY>

</NOFRAME>

<b>KHUNG - FRAME</b>

</div>
<span class='text_page_counter'>(119)</span><div class='page_container' data-page=119>

<b>8. Phần tử IFRAMES:</b>

Nếu muốn trộn văn bản và khung trong

cùng một trang thì phải tạo một khung bên trong trang bằng

tag <iframe>, khi trình duỵêt khơng hỗ trợ thì nội dung trong

IFRAME sẽ bị trả lại



<sub>Cú pháp: Tại vị trí muốn chèn frame, nhập cú pháp:</sub>

Nội dung thay thế khi trình duyệt khơng chấp nhận khung
</Iframe>



Trong đó:

 <i><sub>Page.htm: là trang đầu tiên xuất hiện trong khung</sub></i>

<b>KHUNG - FRAME</b>

</div>
<span class='text_page_counter'>(120)</span><div class='page_container' data-page=120>



Biểu mẫu (Form) là một kỹ thuật cho phép trang web

giao tiếp với người truy cập web. Qua đó, người dùng

có thể nêu các thắc mắc, đóng góp ý kiến, chọn lựa

mục trong danh sách định sẵn, thay đổi các thông tin

trên trang web … gởi cho trang Web tiếp nhận và xử lý

những thơng tin đó.



<sub>Form bao gồm các textbox (văn bản), label (nhãn), </sub>

control (nút) …



Sử dụng khi cần:

 <sub>Thu thập thông tin tên, địa chỉ, số điện thoại, email,…để đăng ký </sub>

cho người dùng vào một dich vụ hoặc một sự kiện

 <sub>Tập hợp thông tin để mua hàng</sub>

 <sub>Thu thập thông tin phản hồi về một Website</sub>
 <sub>Cung cấp công cụ tìm kiếm trên website</sub>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(121)</span><div class='page_container' data-page=121>

<b>2. Cách tạo:</b>



<b><sub>Cú pháp:</sub></b>

<b><Form Method=(Post Get) Action=script.url></b>

<b>Nội dung của Form</b>

<b></Form></b>



<i><sub>Method: xác định phương thức đưa dữ liệu lên máy chủ, </sub></i>

có 2 giá trị : Post và Get

 <sub>GET: gắn dữ liệu trong form vào đường dẫn để truyền qua trang </sub>

xử lý.

 <sub>POST: chuyển thẳng các thông tin đến trang xử lý.</sub>



<i><sub>Action: là địa chỉ của script sẽ thực hiện khi form được </sub></i>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(122)</span><div class='page_container' data-page=122>

 <b><sub>Input boxes: nhập dữ liệu dạng text </sub></b>

và number

 <b><sub>Radio buttons: dùng để chọn một </sub></b>

tùy chọn trong danh sách

 <b><sub>Selection lists: dùng cho một danh </sub></b>

sách dài các lựa chọn, thường là
trong Drop-down list box

 <b><sub>Check boxes: chỉ định một item </sub></b>

được chọn hay không

 <b><sub>Text area: một text box có thể chứa </sub></b>

nhiều dịng

 <b><sub>Submit và Reset button: để gửi </sub></b>

form đến CGI script vừa để reset
form về trạng thái ban đầu

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(123)</span><div class='page_container' data-page=123>

3. Các phần tử của Form:

 <sub>Input boxes: dùng để nhập văn bản hoặc số. </sub>
 <sub>Cú pháp:</sub>

<FORM>

Các giá trị của thuộc tính TYPE:

• <sub>TEXT (Mặc định)</sub>

• <sub>PASSWORD</sub>

• <sub>CHECKBOX</sub>

• <sub>RADIO</sub>

• <sub>HIDDEN</sub>

• <sub>RESET</sub>

• <sub>SUBMIT</sub>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(124)</span><div class='page_container' data-page=124>

<b>3. Các phần tử của Form:</b>

<b>a) Text box: Hộp văn bản, do người sử dụng nhập vào</b>



<b><sub>Cú pháp:</sub></b>

<b><Input Type=”Text” Value=”Value” Name=”name” </b>

<b>Size=n Maxlength=m></b>

 <sub>Name : tên dữ liệu đầu vào server</sub>

 <sub>Value: Dữ liệu ban đầu có sẵn trong text box </sub>

 Size: chiều rộng của text box tính bằng số ký tự (mặc

định là 20)

 <sub>Maxlength: số ký tự tối đa có thể nhập vào text box</sub>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(125)</span><div class='page_container' data-page=125>

<b>3. </b>

<b>Các phần tử của Form:</b>

<b>a) Text box: Hộp văn bản, do người sử dụng nhập vào</b>

Ví dụ:

<form action="">

First name:

<input type="text" name="firstname“><br>

Last name:

<input type="text" name="lastname">

</form>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(126)</span><div class='page_container' data-page=126>

b) Tạo hộp Password:

Những ký tự nhập vào hiển thị dưới

dạng dấu chấm, thông tin sẽ khơng bị mã hố khi gửi

lên server

Cú pháp:

<Input

Type=”password”

Name=”name”

size=n

maxlength=n>

 <sub>Size: chiều rộng của hộp Password, tính bằng ký tự</sub>

 <sub>Maxlength: Số ký tự tối đa có thể nhập vào hộp </sub>
Password

password

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(127)</span><div class='page_container' data-page=127>

b) Tạo hộp Password:

Ví dụ:

<b><form></b>

<b>Username: </b>

<b><input type="text" name="user“><br></b>

<b>Password: </b>

<b><input </b>

<b>type="password</b>

<b>" name="password"></b>

<b></form></b>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(128)</span><div class='page_container' data-page=128>

c)

<b>Checkbox:</b>

<b> Hộp chọn, người xem có thể đánh dấu </b>

nhiều checkbox trong cùng 1bộ



<b><sub>Cú pháp:</sub></b>

<b><Input Type=”Checkbox” Name=”Name” </b>

<b>Value=”Value” Checked> Nhãn</b>

 Name: tên của checkbox

 <sub>Value: xác định mỗi giá trị cho mỗi hộp checkbox được </sub>
gửi cho server khi người xem đánh dấu vào checkbox
 <sub>Checked: thuộc tính để hộp check box được chọn mặc </sub>

định

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(129)</span><div class='page_container' data-page=129>

<b>c) Checkbox:</b>

<b> </b>

<b>Ví dụ:</b>

<b><form></b>

<b><Input Type='Checkbox' Name='st' Value='nhac' </b>

<b>Checked>Music<br></b>

<b><Input Type='Checkbox' Name='st' Value='film‘> </b>

<b>Film<br></b>

<b><Input Type='Checkbox' Name='st' Value='thethao'> </b>

<b>Sport</b>

<b></form></b>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(130)</span><div class='page_container' data-page=130>

c)

<b>Radio button:</b>

<b> Cho phép người xem chỉ chọn một tuỳ </b>

chọn tại mỗi thời điểm



<sub>Cú pháp:</sub>

<input type="radio" name="name" value="Value"

checked>Nhãn

 Name: tên của radio, kết nối các radio button với nhau

 <sub>Value: Những dữ liệu sẽ gữi đến server khi radio button </sub>
được chọn

 <sub>Checked: thuộc tính để radio button được chọn mặc định</sub>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(131)</span><div class='page_container' data-page=131>

<b>c) Radio button: Cho phép người xem chỉ chọn một tuỳ chọn tại mỗi </b>
thời điểm

 <sub>Ví dụ:</sub>

<form>

<input type='radio' name=use value=home>Home<br>
<input type='radio' name=use value=bus>Business<br>

<input type='radio' name=use value=gov>Government<br>

<input type='radio' name=use value=ed>Educational Institution<br>
<input type='radio' name=use value=other>Other<br>

</form>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(132)</span><div class='page_container' data-page=132>

d)

<b>Submit Button:</b>

<b> Tất cả thông tin của người xem nhập </b>

vào sẽ được gửi đến server khi người xem click nút

Submit



<b><sub>Cú pháp:</sub></b>

<b><Input Type=”Submit” Value=”Submit Message” </b>

<b>Name=”Name”></b>

 Submit Message: Là chữ xuất hiện trên Button
 <sub>Name: tên của button</sub>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(133)</span><div class='page_container' data-page=133>

<b>d) Submit Button: Tất cả thông tin của người xem nhập </b>

vào sẽ được gửi đến server khi người xem click nút

Submit



<b><sub>Ví dụ:</sub></b>

<form name="input" action="html_form_action.asp" method="get">
Type your first name:

<input type="text" name="FirstName" value="Mickey" size="20">
<br>Type your last name:

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(134)</span><div class='page_container' data-page=134>

<b>e) Reset </b>

<b>Button:</b>

Thiết lập giá trị ban đầu của tất cả các điều

khiển trên form



<sub> Cú pháp:</sub>

<Input Type=”reset” Value=”Reset Message” Name=”Name”>



<sub>Có thể tạo nút Reset và Submit bằng hình ảnh với cú pháp:</sub>

<Button Type=”reset” Name=”reset” Value=”reset”>Nhãn chữ lề
trái

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(135)</span><div class='page_container' data-page=135>

<b>f) Button: Nút dùng để thực hiện các lệnh do người sử </b>

dụng đưa ra



<b><sub>Cú pháp:</sub></b>

<b><input type="button" name="Button" </b>

<b>value="Button"></b>

<b>Ví dụ:</b>

<b><body></b>

<form action="">

<input type="button" value="Click me" onclick="msg()" />

</form>

<b></body></b>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(136)</span><div class='page_container' data-page=136>

<b>g) Hidden:</b>

<b> là các field mà người xem không nhìn thấy trên </b>

trình duyệt, nhưng vẫn là một phần tử trên form. Hidden

field dùng để lưu trữ thông tin trong các form trước, các

thông tin này cần đi kèm với các dữ liệu trong form hiện

hành mà không muốn người xem nhập lại



<b><sub>Cú pháp:</sub></b>

<b><Input Type=’hidden’ Name=’Name’ Value=’Value’></b>



<i><sub>Name: tên mô tả ngắn gọn thông tin cần lưu trữ</sub></i>



<i><sub>Value: Thông tin cần lưu trữ</sub></i>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(137)</span><div class='page_container' data-page=137>

<b>4. Các Selection List:</b>

<b>a) Drop down menu:</b>



<sub>Cú pháp:</sub>

<Select Name=”Name” Size=n Multiple>

<Option Value=”Value” selected> Option 1

<Option Value=”Value” > Option 2

…

</Select>

 <sub>Nhãn:Giới thiệu Menu</sub>

 <sub>Name: tên dữ liệu đầu vào server</sub>

 <sub>Size: là chiều cao của menu tính bằng hàng chữ</sub>
 <sub>Selected: đề mục được chọn mặc định</sub>

Value: xác định dữ liệu gởi cho server nếu đề mục được chọn

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(138)</span><div class='page_container' data-page=138>

<b>4. Các Selection List:</b>
<b>a) Drop down menu:</b>

 <sub>Ví dụ:</sub>

<option value=1>ScanMaster
<option value=3>ScanMaster II

<option value=4 selected>LaserPrint 1000
<option value=5> LaserPrint 5000

<option value=6>Print/scan 150
<option value=7> Print/scan 250
</Select>

</form></body>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(139)</span><div class='page_container' data-page=139>

<b>4. Các Selection List:</b>
<b>a) Drop down menu:</b>

 <sub>Ví dụ:</sub>

<form>

<option value=1>ScanMaster
<option value=3>ScanMaster II
<option value=4>LaserPrint 1000
<option value=5> LaserPrint 5000
<option value=6>Print/scan 150
<option value=7> Print/scan 250
</Select>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(140)</span><div class='page_container' data-page=140>

<b>4. Các Selection List:</b>

<b>a) Drop down menu:</b>

<b>Phần tử OPTGROUP: được sử dụng để nhóm các chọn lựa thành các nhóm </b>

riêng.

optgroup

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(141)</span><div class='page_container' data-page=141>

<b>4. Các Selection List:</b>

<OPTION value= “Internetintro”>Introduction to the Internet
<OPTION value= “Introhtml”>Introduction to HTML

<OPTION value= “Introweb”>Introduction to the web page designing
</OPTGROUP>

<OPTION value= “vbintro”>Visual Basic – An Introduction

<OPTION value= “vbdev”>Visual Basic – Application Development
</OPTGROUP>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(142)</span><div class='page_container' data-page=142>

<b>4. Các Selection List:</b>

b) TextArea: Hộp văn bản cho phép nhập nhiều dòng



<sub>Cú pháp:</sub>

<TextArea Name=”name” Rows=n Cols=m Wrap>

Default text

</textarea>



<i><sub>Rows: số dịng có thể nhập vào TextArea (mặc định là 4)</sub></i>



<i><sub>Cols: độ rộng của textarea (tính bằng số ký tự, mặc định là 40)</sub></i>



<i><sub>Wrap: các dòng chữ tự động dàn ra trong lề của vùng text area, </sub></i>

Value: virtual,physical

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(143)</span><div class='page_container' data-page=143>

<b>4. Các Selection List:</b>

b) TextArea: Hộp văn bản cho phép nhập nhiều dịng



<sub>Ví dụ:</sub>

<b>Comments ?</b>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(144)</span><div class='page_container' data-page=144>

<b>4. Các Selection List:</b>

<b>c) Nhãn: Dùng để tạo nhãn liên kết với thành phần đi kèm</b>

Cú pháp:

<Label For=”idname”> Nội dung label</label>

 <i><sub>Idname: là giá trị của thụơc tính ID trong thành phần Form tương ứng</sub></i>

Label

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(145)</span><div class='page_container' data-page=145>

d) FieldSet: Nhóm các phần tử liên quan với nhau trong một

Form.



<b><sub>Cú pháp</sub></b>

<b><Fieldset></b>

<b><Legend Align=”left, right”>Chú thích</b>

<b></Legend></b>

<b>Các phần tử trong nhóm</b>

<b></Fieldset></b>



<b><sub>The <legend> tag : định nghĩa tiêu đề cho fieldset.</sub></b>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(146)</span><div class='page_container' data-page=146>

<LEGEND>Position</LEGEND>

Application for the post of: <INPUT name= 'name' type= 'text' tabindex= '1'>
</FIELDSET>

<LEGEND>Educational Qualifications</LEGEND>

<INPUT name= 'qualif' type='radio' value= 'grad' tabindex= '5'> Graduate

<INPUT name= 'qualif' type='radio' value='postgrad' tabindex='5'> Postgraduate
</FIELDSET></FORM>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(147)</span><div class='page_container' data-page=147>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(148)</span><div class='page_container' data-page=148>

<b>5. Điều khiển các phần tử trên form:</b>

 <sub>Dùng phím tab để di chuyển giữa các đối tượng trong form, mặc định </sub>

theo thứ tự của mã HTML, muốn định lại thứ tự ta dùng thuộc tính

<b>TabIndex=n trong tag tạo các thành phần của form, trong đó n là thứ tự </b>

của tab, có giá trị từ 0 đến 32767

 <sub>Trong một form ta thường định thứ tự tab cho các thành phần : textbox, </sub>

password, checkbox, radio button, textarea, menu và button

 <sub>Trong tag tạo các phần tử của form ta dùng thuộc tính </sub>

<b>Accesskey=”Phím tắt” </b>



<b><sub>Sử dụng phím tắt: Nhấn tổ hợp phím Alt+Phím tắt</sub></b>

<b>BiỂU MẪU - FORM</b>

</div>
<span class='text_page_counter'>(149)</span><div class='page_container' data-page=149>

<b>Một số thao tác trong cửa sổ trình duyệt </b>



<sub>Cách load lại trang Web: Click biểu tượng Refresh (F5) trên </sub>

thanh công cụ.



<sub>Chỉnh sửa size chữ hiển thị trên trang: Chọn Menu </sub>

View>Text size



<sub>Chỉnh lại font chữ: Chọn Menu View->EndCoding</sub>



<sub>Trong trường hợp trang Web không hiển thị được Font tiếng </sub>

Việt:



<sub>Chọn menu Tool chọn Internet Options->Chọn Tab Fonts </sub>

chọn Font tiếng Việt



<sub>Nếu chọn rồi mà khơng hiển thị được font tiếng Việt thì chọn </sub>

</div>
<span class='text_page_counter'>(150)</span><div class='page_container' data-page=150>



<sub>Các tuỳ chọn khác cho trang Web: Tools  Internet option: </sub>

Khơng Load hình xuống, định dạng liên kết,…



<sub>Chọn trang web mặc định khi mở trình duyệt </sub>

</div>
<span class='text_page_counter'>(151)</span><div class='page_container' data-page=151>



<sub>Các tuỳ chọn khác cho trang Web: Tools  Internet option: </sub>

Không Load hình xuống, định dạng liên kết,…



<sub>Chọn trang web mặc định khi mở trình duyệt </sub>

• <i><sub>Use Current:</sub></i><sub> chọn trang hiện tại để load lên mỗi </sub>

lần khởi động IE

• <i><sub>Use Default:</sub></i><sub> địa chỉ trang Web mặc định mỗi khi </sub>

mở trình duyệt

• <i><sub>History:</sub></i><sub> lưu lại các trang web đã duyệt qua tại </sub>

máy Client và thông tin đăng nhập của user hiện
hành…

• <sub>Nếu khộng muốn lưu lại: Chọn Delete Cookies và </sub>

Delete Files.

• <sub>Có thể thiết lập khoảng thời gian lưu trữ trang </sub>

</div>
<span class='text_page_counter'>(152)</span><div class='page_container' data-page=152>

• <sub>Ngăn chặn khơng cho tải hình xuống </sub>
trang web

• <sub>Màu liên kết, cách thể hiện liên kết trên </sub>
trang

• <sub>Copy hình ảnh từ trang Web: Click </sub>
phải vào hình ảnh cần sao chép rồi
chọn Save picture as, hoặc Save
background as,…

• <sub>Load về trang Web bao gồm các hiệu </sub>
ứng, script, hình ảnh… chứa trên trang:
Chọn Menu File  Save As  Chọn
vị trí lưu file Save.

• <sub>Hiệu chỉnh trang Web: View </sub>
source->hiệu chỉnhchọn File  Save để lưu

</div>


<a href=' /><a href=' /><a href=' /> Tìm kiếm mờ và ứng dụng tìm kiếm thông tin trong các văn bản nén

Vận dụng kinh nghiệm lưu trữ thông tin của báo chí thế giới vào Việt nam nhằm phục vụ tốt công tác nghiên cứu khoa học

TÌM KIẾM MỜ VÀ ỨNG DỤNG TÌM KIẾM THÔNG TIN TRONG CÁC VĂN BẢN NÉN

Giáo trình phân tích khả năng ứng dụng hệ thống lưu trữ thông tin về cấu hình và vị trí server p10 pot

Giáo trình phân tích khả năng ứng dụng hệ thống lưu trữ thông tin về cấu hình và vị trí server p9 ppsx

Giáo trình phân tích khả năng ứng dụng hệ thống lưu trữ thông tin về cấu hình và vị trí server p8 pot

Giáo trình phân tích khả năng ứng dụng hệ thống lưu trữ thông tin về cấu hình và vị trí server p7 doc

Giáo trình phân tích khả năng ứng dụng hệ thống lưu trữ thông tin về cấu hình và vị trí server p6 pps

Giáo trình phân tích khả năng ứng dụng hệ thống lưu trữ thông tin về cấu hình và vị trí server p5 pps

Giáo trình phân tích khả năng ứng dụng hệ thống lưu trữ thông tin về cấu hình và vị trí server p4 ppt