tu hoc ngon ngu mang HTML4

Bây giờ bạn hãy tạo một file HTML mà phần đầu được trình bày theo kiểu mục lục, mỗi mục liên kết tới phần nội dung tương ứng trong cùng văn bản, ở cuối mỗi phần nội dung có một ảnh làm[r]

(1)

Phần I Kỹ bản 1.1 HTML gì?

HTML (Hyper Text Markup Language - Ngôn ngữ đánh dấu siêu văn bản) định dạng để báo cho trình duyệt Web (Web browser) biết cách để hiển thị trang Web

Các trang Web thực khơng có khác ngồi văn với thẻ (tag) HTML xếp cách đoạn mã để trình duyệt Web biết cách để thông dịch hiển thị chúng lên hình

1.2 Cấu trúc file HTML. 1.2.1 Thẻ (tag) HTML gì.

Khi trình duyệt Web đọc file HTML, tìm file tag hay đoạn mã đặc biệt để biết cách hiển thị file HTML

Ví dụ: Khi file HTML có đoạn <h3> Cấu trúc file HTML </h3>

thì hiển thị đoạn "Cấu trúc file HTML" lên hình với mức độ tiêu đề thức (sẽ nói kỹ phần sau)

Các tag HTML báo cho trình duyệt biết cách in đậm dịng văn bản, in nghiêng, biến dòng văn thành siêu liên kết tới trang Web khác, hiển thị ảnh

Trong ví dụ ta thấy sau tag <h3> đoạn văn tag </h3> Trong tag </h3> ta thấy có dấu / , dấu / nằm tag báo hiệu cho trình duyệt biết hiệu ứng tag kết thúc

Như việc sử dụng tag HTML sau: <tên tag> vùng văn chịu tác động </tên tag>

Chú ý: Trình duyệt khơng quan tâm tên tag chữ hoa hay chữ thường nên việc viết <h3> <H3>

1.2.2 Cấu trúc file HTML.

File HTML bắt đầu thẻ <html> kết thúc thẻ </html> Cặp thẻ báo cho trình duyệt Web biết đọc file có chứa mã HTML, cịn thẻ </html> có tác dụng kết thúc file HTML

Bên cặp thẻ <html> </html> cặp thẻ <head> </head> <body> </body> phần thân, bạn nhập vào đoạn văn thẻ khác quy định định dạng trang

Ngoài để ghi thích, tiện cho việc xem tag HTML cập nhật trang Web, ta cần đặt thích vào <! >

(2)

<head>

<title> Tên trang </title> </head>

<body>

<! Văn thẻ HTML >

</body> </html>

2 Tạo file HTML đầu tiên.

Sau đọc phần trên, bạn biết thẻ HTML cấu trúc chung file HTML Sau tạo file HTML

1 Mở Notepad Windows hay trình soạn thảo văn tạo văn trơn (plain text) Nếu bạn dùng Microsoft Word phải lưu trữ dạng ASCII

2 Bạn nhập dòng văn sau <html>

<head>

<title>Chân trời tri thức - Internet today </title> </head>

<body>

Chào mừng bạn tham gia chuyên mục Chân trời tri thức tạp chí Cơng nghệ Thơng tin Internet Today Trong phần bạn học kiến thức HTML, công cụ để tạo trang Web Sau học xong HTML bạn tạo trang Web đầy ấn tượng với văn bản, hình ảnh, âm

</body> </html>

3 Lưu file với phần mở rộng htm Ví dụ Bai1.htm

Lưu ý: Bạn nên tạo Folder riêng để chứa tập tin mà bạn tạo suốt thời gian học HTML

4 Khởi động IE Nescape Chọn File / Open Sử dụng hộp thoại để mở file HTML bạn vừa tạo

(3)

3 Hiển thị văn dạng đậm, nghiêng, gạch chân 3.1.Lý thuyết

Khi trình bày trang Web, có lúc cần nhấn mạnh, hay để tạo khác biệt, bạn cần phải hiển thị văn dạng đậm, nghiêng, gạch chân HTML có tag định dạng kiểu chữ để giúp bạn

HTML Kết quả

<u>Ðây tag gạch chân</u> Ðây tag gạch chân <i>Ðây tag nghiêng </i> Ðây tag nghiêng

<tt>Ðây tag chữ đánh máy</tt> Ðây tag chữ đánh máy

<b>Ðây tag đậm </b> Ðây tag đậm <em>Ðây tag </em> Ðây tag Strong

<strong>Ðây tag strong</strong> Ðây tag Strong <strike>Ðây tag strong</strike> Ðây tag strikeline

Bạn kết hợp tag với nhau, miễn chúng lồng vào cách xác Ví dụ:

Tag in nghiêng phải nằm tag in đậm Hơn bạn áp dụng tag với tiêu đề <h2> <i> </i> <h2>

3.2.Thực hành

áp dụng vào file HTML bạn Tạo file HTML

2 Thêm tag định dạng kiểu chữ Lúc file HTML bạn phần body có dạng sau

Nếu bạn dùng chương trình soạn thảo văn bản<b><u> khác NotePad Windows </u></b>thì bạn phải nhớ lưu kết dạng văn trơn (ASCII)

3 Lưu công việc bạn

4 Dùng trình duyệt mở so sánh với ví dụ mẫu

4 Sáu mức tiêu đề 4.1 Lý thuyết

Khi trình bày trang Web, đơi bạn phải cần đến tiêu đề theo kích cỡ, phơng chữ khác HTML có tag để thực việc

(4)

Trong x số có giá trị từ đến kích cỡ tiêu đề Sau ví dụ cho cỡ tiêu đề

Tiêu đề cỡ <! H1 cỡ 36 >

Tiêu đề cỡ 2

Tiêu đề cỡ 3 Tiêu đề cỡ 4 Tiêu đề cỡ 5

Tiêu đề cỡ 6.

Thêm tiêu đề vào trang Web.

1 Mở lại file HTML mà bạn tạo trình soạn thảo văn mà bạn dùng để tạo

2 Thêm đoạn sau vào file HTML Bạn cần lưu ý đoạn thêm vào phải nằm <body> </body>

<h1>Gới thiệu chung</h1>

vào trước đoạn "Chào mừng bạn tham gia chuyên mục Chân trời tri thức tạp chí Cơng nghệ Thơng tin Internet Today Trong phần bạn học kiến thức HTML, công cụ để tạo trang Web Sau học xong HTML bạn tạo trang Web đầy ấn tượng với văn bản, hình ảnh, âm

3 Lưu cơng việc bạn vừa làm

4 Dùng trình duyệt Web để mở file HTML bạn vừa tạo so sánh với ví dụ mẫu, bạn thấy khác bạn phải xem lại tạo file HTML

5 Chia văn thành nhiều đoạn

Trước hết bạn lại mở file HTML mà bạn tạo trình soạn thảo văn bản, thay để văn cũ, cuối dòng bạn gõ Enter vài lần, đoạn văn bạn trơng sau :

Chào mừng bạn tham gia chuyên mục Chân trời tri thức tạp chí Cơng nghệ Thơng tin Internet Today Trong phần bạn học kiến thức HTML, công cụ để tạo trang Web Sau học xong HTML bạn tạo trang Web đầy ấn tượng với văn bản, hình ảnh, âm

(5)

Bạn cảm thấy có điều khơng phải khơng? Bởi HTML bỏ qua dấu hiệu xuống dòng bạn gõ Enter bỏ qua dòng trống nên bạn thấy đoạn văn mà bạn vừa nhập dù có Enter để xuống dịng liền với

Ðể chia đoạn HTML dùng tag <p>

Cũng lưu ý tag <hx> gắn liền với chia đoạn nên bạn không cần phải đặt <p> trước <hx>

Chèn dấu chia đoạn vào file HTML.

1 Dựng trình soạn thảo văn để mở tile HTML mà bạn tạo từ trước Chúng ta thêm đoạn vào văn bản, sau đoạn đầu

Tạp chí Internet Today tạp chí điện tử chun Cơng nghệ thơng tin Chúng tơi giúp bạn tìm hiểu khám phá bí ẩn HTML để bạn tự tạo trang Web cho riêng

3 Ðưa trỏ soạn thảo đến cuối đoạn đầu, thêm tag <p> Lúc đoạn văn trông giống sau

Chào mừng bạn tham gia chuyên mục Chân trời tri thức tạp chí Cơng nghệ Thông tin Internet Today Trong phần bạn học kiến thức HTML, công cụ để tạo trang Web Sau học xong HTML bạn tạo trang Web đầy ấn tượng với văn bản, hình ảnh, âm

<p>

Tạp chí Internet Today tạp chí điện tử chun Cơng nghệ thơng tin Chúng tơi giúp bạn tìm hiểu khám phá bí ẩn HTML để bạn tự tạo trang Web cho riêng

4 Lưu lại công việc bạn

5 Dùng trình duyệt mở lại file HTML bạn so sánh với ví dụ mẫu

(6)

<hr> Chèn đường thẳng vào trang Web bạn, tag thường dùng để chia phần trang Web

<br> Ðẩy văn xuống dòng mới, tag khác tag <p> chỗ khơng chèn thêm vào trang bạn dòng trống tag <p> Bạn sử dụng tag tạo danh sách, viết dòng thơ

Ví dụ : Nếu file HTML có đoạn sau tag<body> </body> <hr>

Câu lạc Tin học VNN1<br> Câu lạc Văn hoá VNN3<br> Tạp chí Internet Today<br> <hr>

Thì kết sau :

5 Preformatled text 5.1.Lý thuyết

Phần trình bày cách hiển thị đoạn văn có khoảng trắng dấu xuống dòng

Như bạn biết phần trước, trình duyệt bỏ qua dịng trắng, dấu hiệu xuống dịng ta soạn thảo Tuy nhiên bạn hiển thị văn lúc bạn nhập vào cách sử dụng tag <pre>

Ví dụ <pre>

Khi bạn muốn trình duyệt Web hiển thị bạn soạn thảo, bạn nhớ dùng tag <pre>

Bạn xuống dịng

Bạn dùng dấu cách thoải mái </pre>

(7)

6 Thêm kiểu trình bày cho trang Web. 6.1.Lý thuyết

Ðể làm cho khối văn hơn, ví dụ đoạn trích dẫn, lời khuyên làm cho trang Web bạn trình bày đẹp hơn, sử dụng tag <blockquote> Ðoạn văn nằm cặp tag <blockquote> </bockquote> trình bày thụt vào so với phần thân văn

Ví dụ để nhìn thấy đoạn văn sau:

Bạn phải viết sau:

Khi cần trình bày đoạn văn lùi sâu vào bên so với toàn văn để đoạn văn bật hơn, ví dụ bạn cần hiển thị ý, bạn dùng tag <blockquote >

Trình bày đoạn văn tag <blockquote > làm cho đoạn văn bạn bật hơn, trang Web bạn trông chuyên nghiệp Bạn thử xem </hr>

</blockquote> 6.2.Thực hành

(8)

7 Sử dụng ký tự đặc biệt 7.1.Lý thuyết

Ðôi trang Web bạn có ký tự đặc biệt, chẳng hạn ký tự tiếng Anh, dấu nhấn HTML quy định việc hiển thị ký tự sau

&XXXX;

trong XXXX tên mã cho ký tự đặc biệt Bạn xem Danh sách ký tự đặc biệt để biết thêm chi tiết

Ví dụ phần body có đoạn sau:

<h2 align=center>>>>ÆñÞóßÿ </h2>

Thì kết trình duyệt là:

Trong trang Web bạn nhiều lúc phải hiển thị ký tự dấu lớn (>) dấu nhỏ (<), dấu (&) , mà ký tự trùng với ký hiệu tag Ðể hiển thị ký tự này, HTML cung cấp cho ta ký hiệu thay sau:

< thay cho < > thay cho > & thay cho &

Ví dụ: Ðể hiển thị 700 > 400 ta viết sau: 700 > 400

Qua phần trước bạn biết trình duyệt Web bỏ qua tất khoảng trắng file HTML Tuy nhiên để trình bày trang Web cho đẹp, bạn muốn chèn khoảng trắng vào trang Web, ví dụ bạn muốn khoảng trắng sau dấu chấm câu hay sau dấu phảy, chèn khoảng trắng vào đầu đoạn văn Muốn chèn khoảng trắng ta dùng ký hiệu

Ngồi ký hiệu mơ tả trên, HTML cung cấp thêm cho số ký hiệu đặc biệt nữa, là:

(9)

7.2 Thực hành

1.Tạo file HTML sau thêm phần sau vào phần body HTML hiển thị ký tự đặc biệt như:

<ul>

<li>Các kýtựlatin:>>>ÆñÞóßÿ <li>Các dấu lớn hơn, nhỏ hơn, dấu : > < &

<li>Các dấu Copyright Trademark : © &reg </ul>

2.Lưu công việc bạn so sánh với ví dụ mẫu:

Chú ý: Ðể hiển thị dấu Copyright Trademark bạn dùng font Tiếng Việt bạn phải đổi dấu sang font Tiếng Anh

Cuối đưa bảng ký tự, bạn Click vào để xem bảng 8 Ðưa hình ảnh vào trang Web.

8.1.Lý thuyết

Sau học trước bạn thắc mắc, trang Web xấu tệ, khơng giống trang Internet mà bạn xem qua

Bình tĩnh bạn ạ, Sau học này, bạn đưa hình ảnh vào trang Web bạn cảm thấy trang Web thật hấp dẫn

Ðể đặt hình ảnh vào trang Web bạn dùng tag sau <img src = "Tên ảnh">

Trong "Tên ảnh" tên file ảnh folder với file HTML bạn Ví dụ : Ðể chèn ảnh có tên anh1.jpg ta làm sau

(10)

tag <img > có thêm thuộc tính để hiển thị văn so với hình ảnh Thuộc tính align với giá trị khác cho ta hiệu ứng sau

1 align = top align = middle align = bottom Ví dụ

Ngồi thuộc tính cịn có số giá trị khác như: TextTop, AbsMiddle,

AbsBottom Baseline Các bạn tìm hiểu thêm qua thực hành 8.2.Thực hành

Trước đưa hình ảnh vào trang Web bạn mời bạn download số hình ảnh để làm ví dụ

(11)

8.3.Thêm số thuộc tính tag <img > 1 Thuộc tính alt = " "

Khi trang Web bạn xem trình duyệt mà người sử dụng tắt việc trình bày hình ảnh để tiết kiệm thời gian download, thuộc tính alt = "" cho phép thay vào vị trí hình ảnh chuỗi văn mơ tả

Ví dụ

Cụm từ Download Software thay cho hình ảnh 2 Thuộc tính chiều cao chiều rộng.

Ðể cho trang Web bạn nạp nhanh hơn, bạn nên đưa kích thước ảnh (tính pixel) vào tag <img> Cách sử dụng thuộc tính là:

<img src = "" width = x, height = y> x,y chiều rộng chiều cao ảnh 3 Thuộc tính tạo vùng quanh ảnh.

Thuộc tính làm cho khoảng cách ảnh đoạn văn thơng thống, dễ nhìn đẹp mắt Hai thuộc tính có tên HSPACE VSPACE: <img src = "" hspace = x, vspace = y>

x khoảng cách vùng trống hai mặt trái phải ảnh y khoảng cách vùng trống đỉnh đáy ảnh Bạn học kỹ phần sau

Ðối với thuộc tính này, khơng đưa thêm vào tà img trình duyệt tự động tính chúng trước hiển thị

9 Căn chỉnh lề. 9.1.Lý thuyết

9.1.a.Sắp xếp văn vào trang

Trong phần trước, bạn thấy trang Web bạn lề bên trái, bạn muốn trình bày trang Web đẹp cách xếp đoạn văn vào trang, HTML có nhiều cách giúp bạn thực điều

Cách thứ nhất: Bạn đặt đoạn văn cần xếp vào trang nằm tag <center> </center>

Ví dụ:

(12)

Cách thứ 2: Ðặt thuộc tính align tag <p> có giá trị center Ví dụ:

9.1.b.Sắp xếp tương đối văn hình ảnh

Khi muốn có văn phủ xung quanh hình ảnh, bạn việc thêm thuộc tính align vào tag <img>

Ví dụ:

<img src = "filename" align = "right"> cho kết quả:

(13)

Khi văn mục khác với hình ảnh ngắn bạn muốn đẩy văn xuống bên hình ảnh, bạn sử dụng tag <br> với thuộc tính clear:

tag <br> với thuộc tính clear xố tất cách xếp có tag <img> Ví dụ:

Khi chưa có tag <br clear = >

Khi có thêm tag <br clear = all>

Khi cần trình bày văn phủ quanh hình ảnh với khoảng cách định ta dùng thêm thuộc tính vspace hspace tag <img> Trong vspace khoảng cách bên hay bên hình ảnh văn space khoảng cách bên phải hay bên trái hình ảnh văn

(14)

So với khơng có thuộc tính vspace hspace

9.1.c Chỉnh lề xếp văn bản

Ngoài cách xếp văn mà bạn biết, HTML cho thêm tag chỉnh văn nữa, <div> </div> Vùng văn chịu ảnh hưởng tag dựa vào thuộc tính align

(15)

Bây bạn tạo trang Web hiển thị tin đó, trang tin VNN chẳng hạn, có sử dụng hình ảnh minh hoạ cho tin Yêu cầu sử dụng thuộc tính vspace hspace để chỉnh khoảng cách văn hình ảnh cho đẹp, sử dụng tag<div> để canh lề cho đoạn văn

10 Tạo siêu liên kết.

Ðiều thực làm cho Web trội khả tạo mối liên kết đến thông tin liên quan Những thơng tin nằm trang Web hay nằm trang Web khác bao gồm hình ảnh, âm thanh, đoạn phim

10.1 Liên kết tới file cục bộ.

Bây bạn bắt đầu tạo liên kết từ trang Web bạn đến trang Web thứ hai Liên kết gọi cục trang Web thứ hai nằm máy với trang Web đầu

Ðể đơn giản trước hết bạn tạo file HTML thứ hai đặt folder với trang mà bạn tạo trước

Muốn tạo siêu liên kết ta dùng

<a href = "filename.htm"> Văn đại diện cho mối liên kết </a> Bất đoạn văn nằm

<a href = " " > </a> siêu văn liên kết tới trang Web khác gạch

Thực hành

1.Tạo trang Web khác giả sử vidu.htm lưu vào Folder với trang Web bạn

2.Trong trang Web mà bạn cần tạo siêu liên kết tới bạn thêm tag tạo siêu liên kết sau :

(16)

chuột vào vùng văn chuột bị đổi thành hình bàn tay bạn bấm chuột đưa tới trang có tên vidu.htm

Bạn liên kết tới hình ảnh cách thay tên filename.htm file ảnh Ví dụ:

Tới bạn lại có thắc mắc, muốn liên kết tới thư mục khác thư mục cao làm nào? Ðể thực điều mời bạn xem tiếp phần sau

Giả sử cấu trúc folder bạn có dạng | My Web

| | Pictures

| | | i-today.gif

| | Trang web bạn vị trí

Và bạn muốn liên kết tới I-today.gif, trang tag <a href > bạn sửa lại sau <a href = "Pictures/i-today.gif"> </a>

Còn trường hợp file bạn cần tạo liên kết có cấu trúc folder cao Ví dụ:

| Pictures1 | My Web | | Pictures

| | | i-today.gif

| | Trang web bạn vị trí này

và bạn cần liên kết tới ảnh Folder Pictures1 có cấp cao thư mục chứa trang Web bạn, bạn cần sửa lại tag sau:

mỗi lần xuất " /" báo cáo cho trình duyệt tìm kiếm folder có cấp cao Thực hành

Bây bạn áp dụng cách liên kết tới file Folder cấp cấp cao Khi thạo cách liên kết, xây dựng trang Web bạn để tất ảnh Folder liên kết tới, điều làm cho việc thay đổi, cập nhật trang Web thuận tiện

Thêm chút vấn đề siêu liên kết

Ðể cho trang Web bạn chuyên nghiệp hơn, bạn đổi tên thành index.htm Ðiều lý giải sau:

Ví dụ bạn vào trang I-today bạn gõ vào dòng địa trình duyệt http: //www.vnn.vn/i-today/

Thực trình duyệt đọc file

http: //www.vnn.vn/ i-today/ index.htm

(17)

Ðể liên kết tới trang Web khác Internet ta dùng tag sau: <a href = "URL"> Text </a>

Trong URL (Uniform Resource Locator) cho biết địa mà bạn muốn liên kết tới Ví dụ URL

http://www.hut.edu.vn http:// www.vnn.vn

http://www.vnn.vn/i-today

mailto:hung_nd@vol.vnn.vn Thực hành

1.Tạo file HTML thêm đoạn sau vào phần body <ul>

<li><a href = "http://www.hut.edu.vn">Trường Ðại học Bách khoa Hà nội</a> <li><a href = "http://www.vnn.vn/i-today">Tạp chí Cơng nghệ Thông tin Internet Today</a>

Lưu công việc bạn, sau mở trình duyệt so sánh với ví dụ Bạn kiêm tra siêu liên kết cách di chuột vào vùng văn siêu liên kết xem thông báo trạng thái trình duyệt, trạng thái hiển thị URL mà bạn liên kết tới

10.3 Liên kết tới phần trang

HTML cho bạn tạo liên kết đến trang Web khác nằm máy tính với trang Web bạn Internet, mà cho phép bạn liên kết đến phần trang

Ðể liên kết đến phần trang trước hết bạn phải đặt tên cho phần cần liên kết tới Thủ tục thực tag

Trong name tên bạn đặt

Sau bạn cần liên kết tới phần đặt tên bạn cần dùng <a href = "#name"> Text to link </a>

Tương tự liên kết tới tài liệu khác ta dùng <a href = "vol1.htm#name> Text </a>

<a href = "URL#name> Text </a> Ví dụ :Click vào để đầu trang

10.4 Tạo siêu liên kết hình ảnh

(18)

Việc bạn chọn ảnh nằm thư mục /folder với trang Web bạn, giả sử graph.jpg Khi bạn sử dụng Tag sau

Bạn lưu ý tag <img > nằm tag <a href > </a>

Khi ảnh dùng làm siêu liên kết, có hộp màu có màu siêu liên kết bao quanh ảnh

Lưu ý: Việc đưa hình ảnh lớn vào trang Web làm cho người đọc phải thời gian chờ tải bạn nên sử dụng số mẹo sau:

1 Ðể đề phòng người đọc tất chế độ hiển thị hình ảnh trình duyệt, bạn nên thêm thuộc tính alt = " " vào tag <img > để người đọc dễ định hướng

2 Khi cần giới thiệu hình ảnh lớn, bạn nên tạo hình ảnh thu nhỏ đưa vào trang Web làm siêu liên kết tới ảnh lớn, đỡ thời gian download trang Web bạn, ví dụ bạn Click chuột vào ảnh sau :

Thực hành

Bây bạn tạo file HTML mà phần đầu trình bày theo kiểu mục lục, mục liên kết tới phần nội dung tương ứng văn bản, cuối phần nội dung có ảnh làm siêu liên kết để báo quay trở lại đầu tài liệu

11 Thêm địa chỉ, liên kết E-mail vào trang Web bạn. 11.1 Lý thuyết

Như bạn thường thấy trang Web Internet, phần cuối trang thường có thơng tin trang Web, chẳng hạn như:



Tiêu đề hay chủ đề trang thời



Ngày cập nhật gần



Bản quyền



Tên E-mail tác giả trang Web

Phần gọi footer trang Web Ðể thêm footer vào trang Web, HTML cung cấp cho tag <address> cách sử dụng sau

<! thông tin >

</address>

Tất văn nằm tag <address> in kiểu chữ nghiêng, nhiên bạn thay đổi cách hiển thị chúng cách sử dụng tag học

1.Tạo file HTML, sau thêm phần thông tin cho trang Web, bạn thêm đoạn sau vào cuối phần body

(19)

Ðịa : 99 Triệu Việt Vương - Hà nội<br>

E_mail : <a href="mailto:i-today@vasc.vnn.vn">i-today@vasc.vnn.vn<br></a> Mọi ý kiến sách HTML xin gửi về: Trần Việt Hùng<br>

E_mail :<a href ="mailto:hung_nd@vol.vnn.vn>hung_nd@vol.vnn.vn</a> </p>

</address>

2.Lưu công việc bạn so sánh với ví dụ mẫu:

Phần Nâng cao

12 Tạo danh sách 12.1 Lý thuyết

Danh sách dùng để trình bày thông tin thành dạng dễ đọc Chẳng hạn để tạo bảng mục, nội dung dãy tài liệu hay chương

HTML có hai kiểu danh sách, danh sách có thứ tự (ordered) danh sách khơng có thứ tự (unorder)

Danh sách khơng có thứ tự.

Danh sách khơng có thứ tự có mục bắt đầu "butllet" ký hiệu đánh dấu trước Ðể tạo danh sách khơng có thứ tự ta dùng tag sau:

<ul>

<li>Chỉ mục thứ

Ví dụ phần body file HTML bạn có đoạn sau:

<h3>Các mơn khoa Công nghệ Thông tin trường Ðại học Bách khoa Hà nội</h3>

<ul>

<li>Bộ môn Khoa học máy tính <li>Bộ mơn Kỹ thuật máy tính <li>Trung tâm máy tính

<li>Phịng thí nghiệm Liên mạng </ul>

(20)

Danh sách có thứ tự

Danh sách có thứ tự danh sách mà mục danh sách đánh số, thường "1" Ðể tạo danh sách có thứ tự ta dùng tag sau:

<ol>

<li>Chỉ mục thứ

Danh sách có thứ tự khác danh sách khơng có thứ tự chỗ thay tag <ul> tag <ol>

Ví dụ : Nếu phần body file HTML có đoạn <h3>Các bước chuẩn bị để học HTML</h3>

<ol>

<li>Chương trình soạn thảo văn trơn (như NotePad Windows) <li>Trình duyệt Web(như Internet Explorer Nescape Navigator) <li>Bộ sách HTML tạp chí Internet Today

</ol>

(21)

Danh sách định nghĩa mục đầu dịng Sau kết thúc tag <dt>, tự động xuống dịng, viết thụt vào hệt định nghĩa sách giáo khoa

Ví dụ:

để có trang web trên, bạn phải đánh đoạn mã sau: <h3>Ví dụ danh sách định nghĩa<h3>

<dl>

<dt>Ðịnh nghĩa 1</dt>

<dd>giải thích định nghĩa 1.</dd> <dt>Ðịnh nghĩa 2</dt>

<dd>giải thích định nghĩa 2</dd> <dt>Ðịnh nghĩa 3</dt>

<dd>giải thích định nghĩa 3.</dd> </dl>

Trong trang Web để tạo mục thơng tin có cấu trúc logic bạn lồng danh sách với

Ví dụ trộn danh sách

(22)

Ðưa danh sách vào trang Web bạn

1 Mở file HTML mới, phần body bạn tạo danh sách tag HTML sau :

<li>Chương <ol>

<li>Giới thiệu chung

<li>Những kiến thức vỡ lòng HTML </ol>

<li>Chương hai <ol>

<li>Các tag thông dụng <ul>

<li>Tag định dạng kiều chữ <li>Tag chèn ảnh

</ul>

<li>Các tag trang trí trang Web </ol>

<li>Chương ba <ul>

<li>Các trang Web mẫu <li>Kết thúc

</ul> </ul>

(23)

1.3 Trang trí cho văn bản. 13.1.Lý thuyết

Qua phần trước bạn biết cách thêm màu sắc cho văn thơng qua việc thiết lập thuộc tính cho tag <body> Trong bạn học cách thay đổi màu sắc, kích thước, font chữ phần văn trang Web bạn

13.1.a.Cỡ font

Khi muốn thay đổi cỡ font dùng <font size = X> </font>

Trong X cỡ font có giá trị từ (nhỏ nhất) đến (lớn nhất) Ví dụ:

Cỡ font

Cỡ font 7

Ngồi HTML cịn cho cách khác để thực việc thay đổi cỡ font, thay đổi tương đối

Trong +X, -X độ dịch chuyển so với cỡ font Chúng thường dùng với tag

<basefont size = X> X: Cỡ font muốn đặc mặc định

Chú ý: Tag <basefont> tag đóng lại, có tác dụng gặp tag <basefont> khác

13.1.b.Kiểu font

Ðể làm cho trang Web thêm sinh động, nhiều bạn muốn trình bày nhiều kiểu font khác nhau, bạn sử dụng thuộc tính face tag <font> để thực việc đổi font chữ

(24)

trong fontname tên font chữ có máy tính người đọc trang Web Muốn thêm màu sắc cho chữ, ta thêm thuộc tính color vào tag font

Ví dụ:

13.1.c.Hiển thị số số dưới

Khi cần phải trình bày số hay số dưới, cơng thức hố học chẳng hạn sử dụng tag <sup> </sup> cho số <sub> </sub> cho số

Ví dụ:

Ðể có NH4, ta phải viết

NH<sub>4</sub> Ðể có x2 ta phải viết

x<sup>2</sup>

(25)

14.Thêm màu sắc cho trang Web bạn. 14.1.Lý thuyết

Từ học đến bây giờ, nhiều bạn thắc mắc: "Tại trang Web lại có hai màu đen trắng, trang Web nhìn thấy trang trí đẹp" Xin bạn yên tâm, giúp bạn giải thắc mắc

14.1.a.Cơ màu sắc

Trong trình duyệt Web, bạn sử dụng 256 màu để trang trí cho văn Mỗi màu xác định ba Red-Green-Blue (RGB), giá trị R, G, B từ đến 255 thể cường độ Ví dụ ba có giá trị nhỏ (R=0, G=0,

B=0) cho ta màu đen ba có giá trị lớn (R=255, G=255, B=255) cho ta màu trắng Bộ ba RGB với giá trị khác cho ta màu khác Trong HTML, muốn sử dụng màu đó, thay dùng giá trị R, G, B hệ thập phân, bạn phải biểu diễn chúng dạng hệ 16

Ví dụ:

Màu trắng ứng với R=255, G=255, B=255 biểu diễn FFFFFF Màu "4520FE" tức R = 45 (Hệ 16)

G = 20 (Hệ 16) B = FE (Hệ 16) tương đương với R = 69 (Hệ 10)

G = 32 (Hệ 10) B = 254 (Hệ 10) Ví dụ số màu thơng thường

14.1.b.Màu cố định

Ðể thêm màu cho trang Web mình, bạn thêm thuộc tính sau vào trang tag <body>

bgcolor = #XXXXXX text = #XXXXXX link = #XXXXXX vlink = #XXXXXX Trong

bgcolor = Xác định màu sắc text = Xác định màu sắc văn link = Xác định màu sắc siêu liên kết

vlink = Xác định màu sắc siêu liên kết xem qua

còn XXXXXX ký hiệu màu dạng thập lục phân (có dấu # trước) Ví dụ:

(26)

Sau số màu ký hiệu tương ứng

Color Hex Code Color Hex Code

xx oo xx FFCCCC xx oo xx 3300FF xx oo xx 33FF66 xx oo xx AA0000 xx oo xx 663300 xx oo xx 9900FF xx oo xx 000077 xx oo xx FFFF00 xx oo xx EEEEEE xx oo xx 888888 xx oo xx 444444 xx oo xx 000000

Color Name Color Name

xx oo xx aqua xx oo xx black xx oo xx blue xx oo xx fuchsia xx oo xx gray xx oo xx green xx oo xx lime xx oo xx maroon xx oo xx navy xx oo xx olive xx oo xx purple xx oo xx red xx oo xx silver xx oo xx teal xx oo xx white xx oo xx yellow

14.1.c.Trang trí hình ảnh

Nếu bạn muốn màu trang Web bạn đẹp hơn, bạn dùng file ảnh nhỏ để trang trí cho Khi đó, HTML tạo liên tục file ảnh để phủ hết trang Web

Ðể dùng hình ảnh làm cho trang Web, ta dùng thuộc tính background tag <body>

Trong filename tên file ảnh mà bạn dùng làm 14.2.Thực hành

(27)

Thêm vào tag body thuộc tính background sau: <body background = "strawb.jpg">

2.Lưu công việc bạn, mở trình duyệt so sánh với ví dụ mẫu:

15.Thêm chút siêu liên kết hình ảnh. 15.1.Lý thuyết

Trong phần trước, bạn học cách tạo siêu liên kết hình ảnh Bài cung cấp cho bạn tạo nhiều siêu liên kết từ hình ảnh cách chia hình ảnh thành vùng, vùng liên kết tới trang Web khác Trước hết mời bạn xem ví dụ sau :

- Với hình ảnh sau :

- Sau khoanh vùng tạo siêu liên kết, bây giờ, ảnh liên kết tới nhiều trang Web khác, bạn thử click vào tên tương ứng ảnh xem kết

Ðể tạo hình ảnh với nhiều liên kết, tới nhiều trang Web khác nhau, HTML cung câp cho tag <map>, cách làm sau :

1.Chuẩn bị hình ảnh để tạo siêu liên kết : Trong ví dụ trên, ảnh có tên : lienket.jpg, đưa hình ảnh vào trang Web, tag <img> bạn sử dụng thuộc tính usemap sau :

trong map_name phần mà bạn định nghĩa vùng ảnh để từ tạo siêu liên kết

2.Ðịnh nghĩa vùng để tạo siêu liên kết : Ðể tạo vùng ta sử dụng tag <map> sau :

(28)

</map>

Trong tag <area> định nghĩa vùng có hình thuộc giá trị thuộc tính shape = "", có toạ độ giá trị thuộc tính coords = "", ví dụ vùng tạo siêu liên kết vùng hình chữ nhật (rect) có toạ độ góc bên trái x1,y1 toạ độ góc bên phải x2,y2 liên kết tới trang Web giá trị thuộc tính href = ""

Ðoạn mã HTML ví dụ sau : <map name="FPMap0">

Bây bạn chuẩn bị hình ảnh dùng tag <map>, thử tạo trang Web có siêu liên kết xuất phát từ hình ảnh trình bày

16 Bảng.

16.1 Lý thuyết

Việc trình bày trang Web theo dạng bảng làm cho trang Web bạn chuyên nghiệp Với dạng bảng bạn chia trang Web thành nhiều phần, bạn áp dụng kiến thức học để trang trí riêng cho phần

Khi xây dựng bảng, bạn nhớ quy tắc sau: ô cao bên trái, xây dựng ô hàng đầu tiên, sau chuyển xuống hàng thứ hai, xây dựng phần tử hàng thứ

> > > > -> > | -|

> > > > -> >

16.1.a Những tag bảng

Ðể tìm hiểu tag bảng, trước hết ta xét ví dụ sau <table border = 1>

<tr>

<tr>

(29)

Trong tag <table> ta thấy thuộc tính border có giá trị 1, điều nghĩa vẽ đường viền quanh bảng với độ dày điểm

Mỗi hàng xác định <tr> </tr> viết tắt table row Mỗi ô định nghĩa <td> </td> viết tắt table data

Ðể chỉnh lề ơ, bạn thêm thuộc tính sau vào tag <td> Chỉnh lề theo chiều ngang

<td align = left> xếp bên trái <td align = right> xếp bên phải <td align = center> xếp vào

16.1.b Các hàng cột

Bảng mà bạn tạo bảng đơn giản với ba hàng ba cột Bạn ý bảng sau

Bảng

(30)

Bảng

Ðể tạo bảng trên, sử dụng thuộc tính colspan rowspan tag <td> </td>

Thuộc tính colspan=x có tác dụng mở rộng cột bảng, ví dụ bảng để mở rộng thứ hàng rộng hai cột bình thường ta đặt:

Thuộc tính rowspan có tác dụng mở rộng hàng bảng, bảng để mở rộng ô thứ hàng rộng hàng bình thường ta đặt:

16.1.c Ðiều khiển xuống hàng ô.

Trong ô, muốn giữ dịng văn dịng, tức khơng cho xuống hàng thêm thuộc tính NOWRAP vào tag <TD> <TH>

(31)

Ngay sau tag <table>, bạn gõ vào tag <catpion> tựa đề bảng, kết thúc tag đóng </caption>

</table> </body>

Trong tag <caption> bạn thấy có thuộc tính valign="top", nghĩa tạo tựa đề đỉnh bảng Nếu valign="bottom" tựa để bảng đáy bảng

16.1.e.Thêm thông số cho đường viền tạo bảng

Muốn thay đổi thông số đường tạo bảng ta thêm thuộc tính cho tag <table> sau:

<table border = X cellpadding = Y cellspacing = Z> X: Chiều rộng đường viền bảng

Y: "Khoảng trắng" liệu bên ô vách ngăn ô Z: Ðộ rộng đường bên bảng để chia Ví dụ bảng sau có tag <table> sau:

(32)

Khi border = ta có bảng khơng có đường viền Dùng bảng dạng để xếp văn theo hàng thẳng đứng Ðối với liệu bảng bạn áp dụng tag học ví dụ sau chia hình thành hai cột danh sách cột siêu liên kết

<h2>Các Website việt nam</h2>

<td align=left><a href ="http://www.vnn.vn"> Công ty VASC - VNN</a> </td> <td ><a href ="http://www.tlnet.com.vn"> Mạng Phương nam</a></td>

</tr> <tr>

<tr>

<td><a href ="http://www.netnam.vn"> Công ty Netna@m</a></td>

<td><a href ="http://www.vinaone.com.vn">Mạng Bộ thương mại</a></td> </tr>

(33)

16.1.f.Thêm màu sắc cho bảng

Ðể tơ màu cho bảng, ta thêm thuộc tính bgcolor với giá trị màu tương ứng vào tag bảng Tơ màu cho tồn bảng

<table bgcolor = #XXXXXX> Tô màu cho hàng

<tr bgcolor = #XXXXXX> Tô màu cho ô

<td bgcolor = #XXXXXX> Trong XXXXXX giá trị màu Ví dụ

Khi chưa tơ màu bảng

(34)

Bạn ứng dụng tag xây dựng bảng để xây dựng danh sách, ví dụ danh sách lớp Yêu cầu bảng có thuộc tính border = tên danh sách siêu liên kết đến địa thư điện tử người tương ứng Sau xây dựng xong danh sách siêu liên kết, bạn thêm màu sắc vào bảng cho đẹp

17 Forms.

Form yếu tố khơng thể thiếu để giao tiếp với máy chủ Nó dùng để nhập liệu, lựa chọn khoản mục, Trong trình liên kết với CGI Script, forms cho phép bạn lựa chọn thông tin từ người dùng lưu trữ cho lần sử dụng sau Trong phần ta cách tạo form tag đơn HTML Khi tạo form, ta cần lưu ý hai phần tên nhận dạng (identifier) giá trị (value) form Ví dụ : Trong hộp text box với tên FirstName, người sử dụng gõ vào VASC, liệu gửi đến server FirstName=VASC

tag : <Form METHOD="" ACTION=""> < tag khác > </form> nằm hai tag BODY

trong thuộc tính METHOD có hai giá trị POST GET Nếu giá trị POST, cho phép gửi liệu từ máy Client đến Server (thường sử dụng Form nhập liệu) Cịn với GET sử dụng Form vấn tin Cịn ACTION vị trí CGI Script Server thực Các tag Form thường dùng chủ yếu <INPUT>, <SELECT>, <OPTION>

Chúng ta xét số Form đơn giản sau :

 Text Blocks : Tạo vùng văn bản, nhập nhiều dịng

 Text Boxes : Ðể nhập vào dòng đơn

 Password Boxes : Form giống Text Boxes không hiển thị ký tự

 Radio Buttons : Các nút lựa chọn

 Check Boxes : Hộp Check Boxes

 Menus : Tạo hộp Menu đẩy xuống

 Submit and Reset Buttons : Các Button để nhận thông tin khởi tạo lại thông tin

trên form

 Hidden Elements : Các yếu tố ẩn

 Active Images :Tạo ảnh kích hoạt

 CGI Script :Common Gateway Interface Script

17.1 Lý thuyết

Text Blocks : <textarea rows="" cols="" name=""> Text </textarea> Trong cols chiều rộng vùng văn

(35)

theo hàng Name thuộc tính để nhận dạng, sử dụng Script Các bạn lưu ý Text Blocks không bắt đầu tag INPUT

Text Boxes : <input type="text" name="" maxlength="" size="" value=""> Trong size chiều dài Text

Boxes Maxlength, minlength số ký tự tối đa hay tối thiểu nhập vào value giá trị kiểu xâu hiển thị

Xin cho biết tên bạn :

Password Boxes : <input type="password" minlength="" name="" size=""> Các thuộc tính giống với Text Boxes

Chỉ khác bạn nhập liệu ký tự không hiển thị

Xin cho biết mật mã :

Radio Buttons : <input type="radio" name="" checked value="">Lựa chọn value chứa liệu gửi đến Server

Radio Button checked

lựa chọn lựa chọn

Check Boxes : <input type="checkbox" name="" value="" checked>Lựa chọn Hộp Check Boxes có thuộc tính

thành phần giống Radio Button thuộc tính lựa chọn phần văn ghi phía sau nút check box

lựa chọn lựa chọn

Menus : <select size="" multiple><option selected value="">Text </option> </select>

Cũng giống Text Blocks, Menu không INPUT mà SELECT Thuộc tính multiple cho phép bạn chọn nhiều mục, khơng có thuộc tính menu đẩy xuống Mỗi lựa chọn bạn mô tả tag OPTION, bạn ngầm định chọn thuộc tính selected

có multiple

khơng có multiple

Submit and Reset Buttons :

Nút Submit nút để server lấy thơng tin từ người sử dụng Sau nhập liệu song, người dùng ấn vào Submit thơng tin gửi đến server Nếu có thơng tin sai quy định server gửi trả lại kèm với thông tin báo lỗi

Cịn nút Reset khởi tạo lại tồn giá trị form giá trị mặc định <Input type="submit" name=""

value="Submit Button">

Thuộc tính value chứa phần text hiển thị nút bấm Bạn cầm lưu ý nút Reset khởi động lại giá trị form mà

Submit Button Reset Button

(36)

Hidden Elements bạn sử dụng để lưu trữ thông tin thu từ form trước đó, kết hợp với liệu form

Ví dụ : form trước ban đề nghị cho biết tên, bạn lưu lại biến thêm vào form hidden element, sau name liên kết thơng tin thu mà không cần người dùng nhập lại tên nhiều lần Các Hidden Elements không browser với tên

Tag có hai thuộc tính, thuộc tính name tên thơng tin lưu trữ, cịn value thơng tin mà thân lưu lại

Active Images : <input type="image" src="" name="">

Thuộc tính chứa src đường dẫn tới file ảnh server

Thuộc tính name cho tên Khi người dùng click vào ảnh tạo độ x y chuột hành bổ sung vào trường name gửi đến server

Ví Dụ : Giả sử máy chủ muốn biết bạn từ nơi đến, cho bạn đồ giới Bạn viếc click lên đồ, giả sử bạn sinh Việt nam việc tìm nước Việt nam click lên

CGI Script : (A Common Gateway Interface Script)

Là chương trình kích hoạt người sủ dụng cách click lên URL Nó viết ngơn ngữ máy tính C hay Pascal, viết Perl hay chương trình giao tiếp người máy, có khả thực độc lập CGI Script dùng để kích hoạt mơt chương trình server, lấy thơng tin sau thơng báo lại cho người sủ dụng Ví dụ bạn dùng CGI Script để gọi chương trình ngày server thông báo kết trang web

Ðể tạo liên kết đến CGI Script bạn dùng tag <a

href="http://www.site.com/CGI-BIN/path/cgiscript>văn liên kết</a> Trong http://www/site/com tên server chứa CGI Script CGI-BIN vị trí CGI Script UNIX server /path đường dẫn tới cgi-script khơng tìm thấy thư mục cgi-bin

đoạn mã script tạo trang HTML, lấy ngày server chèn vào trang HTML

bạn copy toàn đoạn mã text block vào trang web lấy ngày

17.2 Thực hành

Bạn tạo form nhập họ tên, nơi ở, mật số thông tin khác bảng Trong form Họ tên, nơi dùng text box, form mật dùng

password giới tính dùng hai radio button Nam Nữ, bạn nhớ phép chọn hai mà thơi Form thành phố dùng pop-up menu, có thành phố Hà Nội, Hải Phòng, chọn nơi Cuối text block Thông tin thêm để người dùng ghi thêm cần

(37)

18 Multimedia.

Một yếu tố thiếu để làm trang web bạn sinh động hoàn hảo âm hình ảnh động Hiện trình duyệt web nhận dạng nhiều loại âm hình ảnh khác Nhưng có vấn đề bạn biết, kích thước file media lớn file âm chất lượng tốt có thời gian 10 giây kích thước cỡ 200K để tải xuống phải phút Phải ngồi chờ đến phút máy để cố gắng nghe nhạc khơng thể chấp nhận được, sau tải xuống hát không hay lại bực Vì lý khuyên bạn nên lựa chọn kiểu file thích hợp, có kích thước nhỏ tốt Ví dụ file âm midi (*.mid) hay file (*.ra) mà sử dụng chủ yếu mạng, file video avi (*.avi)

Trong phần bạn học cách gọi file âm hoạt cảnh video vào trang web bạn

 Ðưa âm vào trang web bạn

 Xem Video trang web

Sound.

Ðể sử dụng file nhạc làm âm ta dùng tag <bgsound src="sound.ext" Loop=""> Tag khơng có tag kết thúc Thuộc tính src đường dẫn đến file âm sound.ext server ; Cịn thuộc tính Loop cho phép lặp lại nhiều lần muốn, giá trị số nguyên, -1 lặp vơ hạn Tag đặt hai tag <head> </head>

Ngay sau truy cập, trang web bạn "chơi" file sound.ext Bây ta tạo liên kết để chơi nhạc Giả sử ta click lên hình ảnh hay dịng chữ q trình chơi nhạc bắt đầu Ta sử dụng tag sau : <a href src="sound.ext"> text để liên kết </a> Ví dụ bạn Click vào để bắt đầu nghe nhạc

(38)

Tương tự, ta dùng tag <a href src="video.ext"> liên kết </a> Với video.ext tên file hình ảnh server, ví dụ "http://www.windows.com/LocalName/flower.avi" chẳng hạn

Với cách sử dụng tag trên, bạn phải nghe nhạc trình nghe nhạc hệ điều hành Ðể tích hợp điều khiển q trình nghe xem bạn sử dụng tag : <embed src="file.ext"> Với tag này, bạn nghe nhạc lúc nào, muốn lặp lại điều khiển đến đoạn nhạc tuỳ bạn Ðến bạn làm cho trang web bạn sinh động

20.

20.1.Lý thuyết

Trang Web trình bày theo kiểu chia thành phần độc lập với gọi frame Bạn chia trang Web thành nhiều phần tuỳ thích, ví dụ :

Khi bạn chia trang Web frame bạn phải tạo nhiêu file HTML để frame hiển thị file HTML

Thông thường đoạn mã file HTML chia thành frame sau : <html>

<head>

<title>Tiêu đề trang Web bạn</title> </head>

Sorry ! Trình duyệt bạn không hỗ trợ frame </noframes>

</html>

Trong tag <frameset> có tác dụng để cách chia frame theo chiều ngang hay chiều dọc Nếu bạn định phân chia theo chiều dọc dùng tag <frameset> sau : <frameset cols = "X,Y, ,Z">

Với X,Y, ,Z độ rộng frame, bạn cho giá trị điểm, phần trăm ,ví dụ <frameset cols = "170,530">

(39)

trong ví dụ cuối bạn thấy có dấu * Dấu * cho biết trước hết chia cho frame độ rộng 170, phần lại dành hết cho frame lại

Cách làm tương tự trang chia theo chiều ngang

Tag <frame> có tác dụng định nghĩa frame Frame có tên giá trị thuộc tính name = "" hiển thị file HTML có tên giá trị thuộc tính src =""

Tag <noframes> </noframes> dùng để hiển thị thơng báo trình duyệt người đọc Web khơng hỗ trợ frame, ví dụ

Sorry ! Trình duyệt bạn khơng hỗ trợ frame </noframes>

Ví dụ muốn chia trang Web sau :

bạn phải làm sau : <html>

<head>

<title>A More Complex Framed Page</title> </head> <FRAMESET ROWS="120,*>

</frameset> </frameset> <NOFRAMES>

This is what someone would see who does not have a web browser that can display frames

</NOFRAMES> </html>

(40)

trong giả sử frame làm menu có tên menu frame hiển thị thơng tin có tên display Khi click lên siêu liên kết frame menu nội dung trang tương ứng lên frame display, để làm điều đó, file HTML frame menu bạn đưa thêm tag <base> vào sau tag <body>

<body>

Khi bạn không muốn hiển thị border frame, bạn thêm thuộc tính border = "0" frameborder = "0" vào tag <frameset>

Trong trình duyệt bạn khơng muốn thay đổi kích thước frame, bạn thêm thuộc tính NoResize vào tag <frame>

Định dạng
Số trang	40
Dung lượng	1,42 MB