Tài liệu Ngôn ngữ HTML

Tóm tắt Tài liệu Ngôn ngữ HTML: ...hân trời tri thức của tạp chí Công nghệ Thông tin Internet Today. Trong phần này bạn sẽ được học những kiến thức cơ bản về HTML, công cụ để tạo ra các trang Web. Sau khi đã học xong về HTML bạn có thể tạo ra những trang Web đầy ấn tượng với văn bản, hình ảnh, âm thanh... Tạp chí Internet Today là m... ảnh để làm ví dụ 1 Tạo một file HTML mới và sử dụng các tag để thêm ảnh vào trong trang Web 2.Thử thêm các thuộc tính align = vào trong tag img và so sánh với kết quả của bài học 8.3.Thêm một số thuộc tính của tag 1. Thuộc tính alt = " ". Khi trang Web của bạn được xem bằng trình duyệt mà ngư... tới I-today.gif, khi đó trang tag bạn sửa lại như sau ... Còn trong trường hợp file bạn cần tạo liên kết có cấu trúc folder cao hơn  Ví dụ: |--Pictures1 |--My Web | |--Pictures | | |--i-today.gif | |--Trang web của bạn ở vị trí này và bạn cần liên kết tới ảnh ở trong Folder Pictures1 có ...

docx14 trang | Chia sẻ: havih72 | Lượt xem: 102 | Lượt tải: 0download
Nội dung tài liệu Tài liệu Ngôn ngữ HTML, để tải tài liệu về máy bạn click vào nút DOWNLOAD ở trên
n
Ðây là tag nghiêng 
Ðây là tag nghiêng
Ðây là tag chữ đánh máy
Ðây là tag chữ đánh máy
Ðây là tag đậm 
Ðây là tag đậm
Ðây là tag 
Ðây là tag Strong
Ðây là tag strong
Ðây là tag Strong
Ðây là tag strong
Ðây là tag strikeline
Bạn có thể kết hợp các tag này với nhau, miễn là chúng được lồng vào nhau một cách chính xác. Ví dụ:
 .... 
Tag in nghiêng phải nằm trong tag in đậm.
Hơn nữa bạn có thể áp dụng các tag với tiêu đề
 ....  
3.2. Thực hành
áp dụng vào file HTML của bạn.
1. Tạo một file HTML mới
2. Thêm các tag định dạng kiểu chữ. Lúc này file HTML của bạn trong phần  body có dạng như sau.
 .... 
 Nếu bạn dùng các chương trình soạn thảo văn bản khác NotePad của Windows thì bạn phải nhớ lưu kết quả ở dạng văn bản trơn (ASCII)
3. Lưu công việc của bạn.
4. Dùng trình duyệt mở và so sánh với ví dụ mẫu.
04: 6 thẻ tiêu đề
Khi trình bày một trang Web, đôi khi bạn phải cần đến các tiêu đề theo các kích cỡ, phông chữ khác nhau. HTML có các tag để thực hiện việc này.
Ðể tạo một tiêu đề chúng ta dùng
 Tên tiêu đề 
Trong đó x là một số có giá trị từ 1 đến 6 chỉ kích cỡ tiêu đề. Sau đây là ví dụ cho các cỡ của tiêu đề.
Tiêu đề cỡ 1  
Tiêu đề cỡ 2
Tiêu đề cỡ 3
Tiêu đề cỡ 4
Tiêu đề cỡ 5
Tiêu đề cỡ 6.
4.2.Thực hành
Thêm các tiêu đề vào trang Web của bạn.
1. Mở lại file HTML mà bạn đã tạo ra ở bài học trước bằng trình soạn thảo văn bản mà bạn đã dùng để tạo ra nó.
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 giữa và 
Gới thiệu chung 
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 của tạp chí Công nghệ Thông tin Internet Today. Trong phần này bạn sẽ được học những kiến thức cơ bản về HTML, công cụ để tạo ra các trang Web. Sau khi đã học xong về HTML bạn có thể tạo ra những trang Web đầy ấn tượng với  văn bản, hình ảnh, âm thanh...
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 và so sánh với ví dụ mẫu
5. Chia văn bản thành nhiều đoạn
Trước hết bạn lại mở file HTML mà bạn đã tạo từ các bài học trước bằng trình soạn thảo văn bản, thay vì để văn bản như cũ, bây giờ ở cuối mỗi dòng bạn có thể gõ Enter vài lần, khi đó đoạn văn bản của bạn trông có vẻ như sau :
Chào mừng bạn đã tham gia chuyên mục Chân trời tri thức của tạp chí Công nghệ Thông tin Internet Today. Trong phần này bạn sẽ được học những kiến thức cơ bản về HTML, công cụ để tạo ra các trang Web. Sau khi đã học xong về HTML bạn có thể tạo ra những trang Web đầy ấn tượng với văn bản, hình ảnh, âm thanh...
Lưu công việc bạn vừa làm và mở nó trên trình duyệt của bạn. 
Bạn cảm thấy có điều gì không đúng phải không? Bởi vì HTML bỏ qua dấu hiệu xuống dòng khi bạn gõ Enter và bỏ qua các dòng trống nên bạn thấy đoạn văn bản mà bạn vừa nhập dù có Enter để xuống dòng nhưng vẫn liền với nhau.
Ðể chia đoạn HTML dùng tag 
Cũng lưu ý rằng tag gắn liền với sự chia đoạn nên bạn không cần phải đặt trước .
Chèn các dấu chia đoạn vào file HTML của bạn.
1. Dựng trình soạn thảo văn bản để mở tile HTML mà bạn đã tạo từ trước.
2. Chúng ta thêm đoạn mới vào văn bản, sau đoạn đầu
Tạp chí Internet Today là một tạp chí điện tử chuyên về Công nghệ thông tin. Chúng tôi sẽ giúp các bạn tìm hiểu và khám phá những bí ẩn của HTML để bạn có thể tự tạo ra các trang Web cho riêng mình
3. Ðưa con trỏ soạn thảo đến cuối đoạn đầu, thêm tag . Lúc này đoạn văn bản trông giống như sau.
Chào mừng bạn đã tham gia chuyên mục Chân trời tri thức của tạp chí Công nghệ Thông tin Internet Today. Trong phần này bạn sẽ được học những kiến thức cơ bản về HTML, công cụ để tạo ra các trang Web. Sau khi đã học xong về HTML bạn có thể tạo ra những trang Web đầy ấn tượng với văn bản, hình ảnh, âm thanh...
Tạp chí Internet Today là một tạp chí điện tử chuyên về Công nghệ thông tin. Chúng tôi sẽ giúp các bạn tìm hiểu và khám phá những bí ẩn của HTML để bạn có thể tự tạo ra các trang Web cho riêng mình
4. Lưu lại công việc của bạn.
5. Dùng trình duyệt mở lại file HTML của bạn và so sánh với ví dụ mẫu.
Như bạn thấy, các đoạn văn bản đã được tách nhau do tác dụng của tag 
Thêm một số tag phân đoạn
 Chèn một đường thẳng vào trang Web của bạn, tag này thường dùng để chia những phần chính của trang Web.
 Ðẩy văn bản xuống một dòng mới, tag này khác tag ở chỗ nó không chèn thêm vào trang của bạn một dòng trống như tag . Bạn có thể sử dụng tag này khi tạo một danh sách, viết các dòng của một bài thơ.
Ví dụ : Nếu trong file HTML có đoạn sau giữa tag và 
Câu lạc bộ Tin học VNN1
Câu lạc bộ Văn hoá VNN3
Tạp chí Internet Today
06: Trình bày với
Ðể làm cho một khối văn bản nổi hơn, ví dụ một đoạn trích dẫn, một lời khuyên... và làm cho trang Web của bạn trình bày được đẹp hơn, chúng ta sử dụng tag 
Ðoạn văn bản nằm trong cặp tag và sẽ được trình bày thụt vào so với phần thân văn bản.
Khi cần trình bày một đoạn văn bản lùi sâu vào bên trong so với toàn bộ văn bản để đoạn văn bản được nổi bật hơn, ví dụ bạn cần hiển thị một chú ý, khi đó bạn hãy dùng tag <blockquote >
Trình bày đoạn văn bản bằng tag <blockquote > sẽ làm cho đoạn văn bản của bạn nổi bật hơn, và trang Web của bạn trông cũng sẽ chuyên nghiệp hơn. Bạn hãy thử xem
6.2.Thực hành
Với những kiến thức đã học được, bạn hãy xây dựng cho mình một trang Web chẳng hạn như một trang Web hướng dẫn học tiếng Anh với các hình ảnh, siêu liên kết và các ghi chú dùng tag  
07: Sử dụng ký tự đặc biệt
Ðôi khi trong trang Web của bạn có các ký tự đặc biệt, chẳng hạn như ký tự không phải là tiếng Anh, một dấu nhấn... HTML quy định việc hiển thị các ký tự đó như sau
&XXXX;
trong đó XXXX là tên mã cho các ký tự đặc biệt đó. Bạn có thể xem Danh sách các ký tự đặc biệt này để biết thêm chi tiết.
Ví dụ nếu trong phần body có đoạn như sau:
>>>ÆñÞóßÿ 
Thì kết quả trên trình duyệt là:
Trong trang Web của bạn nhiều lúc phải hiển thị các ký tự như dấu lớn hơn (>) hoặc dấu nhỏ hơn (<), dấu và (&)..., mà các ký tự này trùng với ký hiệu của một tag. Ðể hiển thị các ký tự này, HTML cung cấp cho ta các ký hiệu thay thế như sau:
< thay cho <
> thay cho >
& thay cho & 
Ví dụ: Ðể hiển thị 700 > 400 ta viết như sau:
700 > 400 
Qua các bài học trước bạn đã biết rằng trình duyệt Web bỏ qua tất cả các khoảng trắng trong 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 trong trang Web, ví dụ bạn muốn một 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 mỗi đoạn văn bản... Muốn chèn khoảng trắng ta dùng ký hiệu
 
Ngoài các ký hiệu đã mô tả ở trên, HTML còn cung cấp thêm cho chúng ta một số ký hiệu đặc biệt nữa, đó là:
7.2. Thực hành
1.Tạo một file HTML sau đó thêm phần sau vào trong phần body
HTML có thể hiển thị được các ký tự đặc biệt như:
© thay cho â
® thay cho đ
Các kýtựlatin:>>>ÆñÞóßÿ 
Các dấu lớn hơn, nhỏ hơn, dấu và : > < &
Các dấu Copyright và Trademark : © ®
2.Lưu công việc của bạn và so sánh với ví dụ mẫu:
Chú ý: Ðể hiển thị đúng các dấu Copyright và Trademark nếu bạn dùng font Tiếng Việt thì bạn phải đổi các dấu sang font Tiếng Anh.
08: Đưa hình ảnh vào website
Sau khi học các bài trước chắc bạn vẫn còn thắc mắc, sao trang Web của mình xấu tệ, không giống các trang trên Internet mà bạn đã từng xem qua.
Bình tĩnh đi bạn ạ, Sau khi học bài này, bạn sẽ có thể đưa hình ảnh vào trang Web của mình và bạn sẽ cảm thấy trang Web của mình cũng thật hấp dẫn.
Ðể đặt một hình ảnh vào trong trang Web của mình bạn dùng tag sau
Trong đó "Tên ảnh" là tên của một file ảnh ở cùng folder với file HTML của bạn.
Ví dụ : Ðể chèn một ảnh có tên là anh1.jpg ta làm như sau
tag còn có thể có thêm các thuộc tính để hiển thị văn bản so với hình ảnh. Thuộc tính align với các giá trị khác nhau sẽ cho ta các hiệu ứng như sau.
1. align = top
2. align = middle
3. align = bottom
Ngoài ra thuộc tính này còn có một số giá trị khác như: TextTop, AbsMiddle, AbsBottom và Baseline. Các bạn hãy tìm hiểu thêm qua bài thực hành.
8.2.Thực hành
Trước khi đưa hình ảnh vào trong trang Web của bạn mời bạn download một số hình ảnh để làm ví dụ
1 Tạo một file HTML mới và sử dụng các tag để thêm ảnh vào trong trang Web
2.Thử thêm các thuộc tính align = vào trong tag img và so sánh với kết quả của bài học
8.3.Thêm một số thuộc tính của tag 
1. Thuộc tính alt = " ".
Khi trang Web của bạn được xem bằng 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 thế vào vị trí hình ảnh một chuỗi văn bản mô tả nó.
Ví dụ
Cụm từ Download Software đã thay thế cho hình ảnh.
2. Thuộc tính chiều cao và chiều rộng.
Ðể cho trang Web của bạn được nạp nhanh hơn, bạn nên đưa kích thước của ảnh (tính bằng pixel) vào tag . Cách sử dụng các thuộc tính này là:
x,y là chiều rộng và chiều cao của ảnh.
3. Thuộc tính tạo vùng quanh ảnh.
Thuộc tính này làm cho khoảng cách giữa bức ảnh và các đoạn văn bản được thông thoáng, dễ nhìn và đẹp mắt hơn. Hai thuộc tính có tên là HSPACE và VSPACE:
x là khoảng cách vùng trống ở hai mặt trái và phải của bức ảnh.
y là khoảng cách vùng trống trên đỉnh và đáy của bức ảnh.
Bạn sẽ được học kỹ hơn ở bài học lần sau.
Ðối với các thuộc tính này, nếu không đưa thêm vào tà img thì trình duyệt tự động tính chúng trước khi hiển thị.
09: Căn chỉnh lề
Trong các bài học trước, bạn thấy rằng trang Web của bạn chỉ được căn lề bên  trái, và bạn muốn trình bày trang Web của mình đẹp hơn bằng cách sắp xếp các đoạn văn bản vào giữa trang, HTML có nhiều cách giúp bạn thực hiện điều này. 
Cách thứ nhất: Bạn đặt đoạn văn bản cần sắp xếp vào giữa trang nằm giữa tag và 
Ví dụ:
 Xin chuc mung ban 
sẽ cho kết quả như sau:
Cách thứ 2: Ðặt thuộc tính align của tag có giá trị là center
Ví dụ:
 Xin chuc mung ban 
9.1.b.Sắp xếp tương đối giữa văn bản và hình ảnh
Khi muốn có văn bản phủ xung quanh hình ảnh, bạn chỉ việc thêm thuộc tính align vào tag 
Ví dụ:
sẽ cho kết quả:
so với không có thuộc tính align:
Khi văn bản hoặc những mục khác được sắp cùng với hình ảnh khá ngắn và bạn muốn đẩy văn bản kế tiếp xuống bên dưới hình ảnh, bạn hãy sử dụng tag với thuộc tính clear:
tag với thuộc tính clear sẽ xoá đi tất cả cách sắp xếp có trong tag 
Ví dụ:
Khi chưa có tag 
Khi có thêm tag 
Khi cần trình bày văn bản phủ quanh hình ảnh với một khoảng cách nhất định ta dùng thêm các thuộc tính vspace và hspace trong tag . Trong đó vspace là khoảng cách giữa bên trên hay bên dưới của hình ảnh và văn bản còn space là khoảng cách giữa bên phải hay bên trái của hình ảnh và văn bản.
Ví dụ:
So với khi không có các thuộc tính vspace và hspace
9.1.c. Chỉnh lề và sắp xếp văn bản
Ngoài các cách sắp xếp văn bản mà bạn đã biết, HTML còn cho chúng ta thêm một tag căn chỉnh văn bản nữa, đó là ... . Vùng văn bản chịu ảnh hưởng của tag này dựa vào thuộc tính align.
 ... 
 ... 
 ... 
9.2. Thực hành
Bây giờ bạn hãy tạo một trang Web hiển thị một tin nào đó, trong đó có sử dụng các hình ảnh minh hoạ cho tin. Yêu cầu sử dụng thuộc tính vspace và hspace để căn chỉnh khoảng cách giữa văn bản và hình ảnh cho đẹp, sử dụng tag để canh lề cho đoạn văn bản.
10: Tạo các siêu liên kết
Ðiều thực sự làm cho Web nổi trội là khả năng tạo ra các mối liên kết đến các thông tin liên quan. Những thông tin này có thể nằm trong chính trang Web hay nằm ở các trang Web khác bao gồm hình ảnh, âm thanh, đoạn phim...
10.1. Liên kết tới một file cục bộ.
Bây giờ bạn bắt đầu tạo một liên kết từ trang Web của bạn đến một trang Web thứ hai. Liên kết này được gọi là cục bộ bởi vì trang Web thứ hai cũng cùng nằm trên một máy với trang Web đầu.
Ðể đơn giản trước hết bạn tạo một file HTML thứ hai và đặt nó cùng folder với trang mà bạn đã tạo ở các bài trước.
Muốn tạo một siêu liên kết ta dùng
 Văn bản đại diện cho mối liên kết 
Bất cứ đoạn văn bản nào nằm giữa
 và đều là một siêu văn bản liên kết tới các trang Web khác và nó được gạch dưới.
Thực hành
1.Tạo một trang Web khác giả sử là vidu.htm và lưu vào cùng Folder với trang Web của 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 như sau :
Xem ví dụ 1
3.Lưu lại công việc của bạn và mở trên trình duyệt. Khi đó bạn sẽ thấy đoạn văn bản Xem ví dụ được tạo thành siêu liên kết, nó được đổi thành màu xanh và khi bạn đưa chuột vào vùng văn bản này thì chuột bị đổi thành hình bàn tay và nếu bạn bấm chuột thì sẽ được đưa tới trang có tên là vidu.htm
Bạn cũng có thể liên kết tới một hình ảnh bằng cách thay tên filename.htm bằng một file ảnh. Ví dụ:
   Text 
Tới đây chắc bạn lại có thắc mắc, muốn liên kết tới thư mục khác hoặc thư mục cao hơn thì làm thế nào? Ðể thực hiện điều đó mời bạn xem tiếp phần sau đây.
Giả sử cấu trúc folder của bạn có dạng
|--My Web
| |--Pictures
| | |--i-today.gif
| |--Trang web của bạn ở vị trí này 
Và bạn muốn liên kết tới I-today.gif, khi đó trang tag bạn sửa lại như sau
 ... 
Còn trong trường hợp file bạn cần tạo liên kết có cấu trúc folder cao hơn 
Ví dụ:
|--Pictures1
|--My Web
| |--Pictures
| | |--i-today.gif
| |--Trang web của bạn ở vị trí này
và bạn cần liên kết tới ảnh ở trong Folder Pictures1 có cấp cao hơn thư mục chứa trang Web của bạn, khi đó bạn cần sửa lại tag như sau:
mỗi lần xuất hiện "../" báo cáo cho trình duyệt tìm kiếm ở một folder có cấp cao hơn.
Thực hành
Bây giờ bạn hãy áp dụng các cách liên kết tới file ở Folder cùng cấp và cấp cao hơn. Khi thạo các cách liên kết, khi xây dựng trang Web bạn có thể để tất cả các ảnh trong cùng một Folder và liên kết tới, điều này làm cho việc thay đổi, cập nhật trang Web được thuận tiện hơn. 
Thêm một chút về vấn đề siêu liên kết
Ðể cho trang Web của bạn có vẻ chuyên nghiệp hơn, bây giờ bạn hãy đổi tên thành index.htm. Ðiều này được lý giải như sau:
Ví dụ khi bạn vào trang I-today bạn sẽ gõ vào dòng địa chỉ của trình duyệt
Thực ra khi đó trình duyệt sẽ đọc file
10.2. Liên kết đến các trang Web khác trên Internet
Ðể liên kết tới một trang Web khác trên Internet ta dùng tag sau:
 Text 
Trong đó URL (Uniform Resource Locator) cho biết địa chỉ mà bạn muốn liên kết tới.
Thực hành
1.Tạo một file HTML và thêm đoạn sau vào trong phần body
Dịch vụ thiết kế website 
Trường Trung cấp Bách Khoa Sài Gòn
Gửi thư cho JoomlaHCM
 2. Lưu công việc của bạn, sau đó mở trình duyệt và so sánh với ví dụ. Bạn có thể kiêm tra các siêu liên kết bằng cách di chuột vào vùng văn bản siêu liên kết và xem thông báo ở thanh trạng thái của trình duyệt, thanh trạng thái sẽ hiển thị URL mà bạn sẽ liên kết tới.
10.3. Liên kết tới các phần trong cùng một trang
HTML không những cho bạn tạo liên kết đến các trang Web khác nằm ở cùng máy tính với trang Web của bạn hoặc trên Internet, mà còn cho phép bạn liên kết đến các phần trong cùng một trang.
Ðể liên kết đến các phần của một 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 này được thực hiện bởi tag
Trong đó name là một tên do bạn đặt ra
Sau đó nếu bạn cần liên kết tới phần đã đặt tên bạn chỉ cần dùng
 Text to link 
Tương tự khi liên kết tới các tài liệu khác ta có thể dùng
 Text to link 
Ví dụ :Click vào đây để về đầu trang
10.4. Tạo các siêu liên kết bằng hình ảnh
Như bạn vẫn thường thấy trong các trang Web, các siêu liên kết không chỉ là các đoạn văn bản mà còn cả bằng hình ảnh nữa, điều này càng làm cho Web trở nên hấp dẫn. Phần này giới thiệu cho bạn cách tạo các siêu liên kết bằng hình ảnh:
Việc đầu tiên là bạn chọn 1 ảnh nằm cùng thư mục /folder với trang Web của bạn, giả sử đó là graph.jpg. Khi đó bạn sử dụng các Tag như sau
Bạn lưu ý là tag nằm giữa tag và 
Khi một ảnh được dùng làm siêu liên kết, sẽ có một hộp màu có màu của các siêu liên kết bao quanh ảnh
Lưu ý: Việc đưa một hình ảnh lớn vào trong trang Web làm cho người đọc phải mất thời gian chờ tải vì vậy bạn nên sử dụng một số mẹo sau:
1. Ðể đề phòng người đọc tất chế độ hiển thị hình ảnh của trình duyệt, bạn nên thêm thuộc tính alt = "..." vào tag để người đọc dễ định hướng
2. Khi cần giới thiệu một hình ảnh lớn, bạn nên tạo một hình ảnh thu nhỏ của nó và đưa vào trang Web làm siêu liên kết tới ảnh lớn, như thế đỡ mất thời gian download trang Web của bạn, ví dụ bạn hãy Click chuột vào ảnh sau : 
Thực hành 
 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 siêu liên kết để báo quay trở lại đầu tài liệu. Trông giống như sau
11: Thêm địa chỉ, liên kết E-mail vào trang Web của bạn
Như bạn vẫn thường thấy trong các trang Web trên Internet, phần cuối mỗi trang thường có các thông tin về trang Web, chẳng hạn như:
© Tiêu đề hay chủ đề của trang hiện thời
© Ngày cập nhật gần đây nhất
© Bản quyền
© Tên và E-mail của tác giả của trang Web
... 
Phần này gọi là footer của trang Web. Ðể thêm footer vào trang Web, HTML cung cấp cho chúng ta tag và cách sử dụng như sau
...
...
Tất cả văn bản nằm trong tag được in bằng kiểu chữ nghiêng, tuy nhiên bạn có thể thay đổi cách hiển thị của chúng bằng cách sử dụng các tag đã học.
11.2.Thực hành
1.Tạo một file HTML, sau khi thêm các phần thông tin cho trang Web, bạn thêm đoạn sau vào cuối phần body
Chuyên mục Chân trời tri thức - Tạp chí Internet Today
Copyright @ 2000 by VASC
Ðịa chỉ : 99 Triệu Việt Vương - Hà nội
E_mail : i-today@vasc.vnn.vn 
Mọi ý kiến về bộ sách HTML xin gửi về: Trần Việt Hùng
E_mail :hung_nd@vol.vnn.vn
2.Lưu công việc của bạn và so sánh với ví dụ mẫu: 
12: Tạo các danh sách
Danh sách được dùng để trình bày thông tin thành một dạng dễ đọc hơn. Chẳng hạn để tạo ra các bảng chỉ mục, nội dung của một dãy các tài liệu hay các chương.
HTML có hai kiểu danh sách, danh sách có thứ tự (ordered) và 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ó các mục bắt đầu bằng các "butllet" hoặc các ký hiệu đánh dấu ở trước. Ðể tạo ra danh sách không có thứ tự ta dùng các tag sau:
 Chỉ mục thứ nhất
 ...
 Chỉ mục cuối
Ví dụ khi trong phần body của file HTML của bạn có đoạn như sau:
Các bộ môn trong khoa Công nghệ Thông tin trường Ðại học Bách khoa Hà nội
 Bộ môn Khoa học máy tính
 Bộ môn Kỹ thuật máy tính
 Trung tâm máy tính
 Phòng thí nghiệm Liên mạng
Thì trên trình duyệt danh sách được hiển thị như sau :
Danh sách có thứ tự
Danh sách có thứ tự là danh sách mà mỗi mục của danh sách được đánh số, thường bắt đầu từ "1". Ðể tạo ra danh sách có thứ tự ta dùng các tag sau:
 Chỉ mục thứ nhất
 ...
 Chỉ mục cuối cùng
Danh sách có thứ tự chỉ khác danh sách không có thứ tự ở chỗ thay tag bằng tag .
Ví dụ : Nếu trong phần body của file HTML có đoạn 
Các bước chuẩn bị để học HTML
 Chương trình soạn thảo văn bản trơn (như NotePad của Windows)
 Trình duyệt Web(như Internet Explorer hoặc Nescape Navigator)
 Bộ sách về HTML của tạp chí Internet Today
Danh sách định nghĩa (definition lists)
Danh sách định nghĩa không có các chỉ mục đầu dòng. Sau khi kết thúc tag , nó tự động xuống dòng, viết thụt vào hệt như các định nghĩa trong sách giáo khoa vậy.
Ví dụ:
để có trang web trên, bạn phải đánh đoạn mã sau:
Ví dụ về danh sách định nghĩa
 Ðịnh nghĩa 1
 giải thích định nghĩa 1.
 Ðịnh nghĩa 2
 giải thích định nghĩa 2
 Ðịnh nghĩa 3
 giải thích định nghĩa 3.
Trong trang Web để tạo ra các mục thông tin có cấu trúc logic hơn bạn có thể lồng các danh sách với nhau.
Ví dụ về trộn danh sách
Ví dụ về trộn danh sách
 Chỉ mục 1
 Chỉ mục con 1
 Chỉ mục con 1
 Chỉ mục con 2
 Chỉ mục con 2
 Chỉ mục con
Ta có danh sách như sau :
12.2.Thực hành
Ðưa danh sách vào trang Web của bạn
1. Mở một file HTML mới, trong phần body bạn tạo một danh sách bằng các tag HTML như sau :
Mục lục
Chương một
 Giới thiệu chung
 Những kiến thức vỡ lòng về HTML
Chương hai
 Các tag thông dụng
 Tag định dạng kiều chữ
 Tag chèn ảnh
 Các tag trang trí trang Web
Chương ba
 Các trang Web mẫu
 Kết thúc
2. Lưu công việc của bạn. Mở trên trình duyệt và so sánh với ví dụ mẫu 

File đính kèm:

  • docxtai_lieu_ngon_ngu_html.docx
Ebook liên quan