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

Khi một trang web được tải về trình duyệt, trình duyệt sẽ căn cứ trên các tag HTML để định dạng nội dung hiển thị.. Tài liệu HTML, hay còn gọi là văn bản HTML, là một tập tin có phần ki

Trang 1

HTML mô tả cách thức dữ liệu được hiển thị trên trình duyệt thông qua các tập

ký hiệu đánh dấu, thường gọi là tag, hoặc “thẻ HTML” Khi một trang web được tải

về trình duyệt, trình duyệt sẽ căn cứ trên các tag HTML để định dạng nội dung hiển thị

Tài liệu HTML, hay còn gọi là văn bản HTML, là một tập tin có phần kiểu

là htm hoặc html, chứa nội dung cần hiển thị và các tag để báo cho trình duyệt web biết cách hiển thị nội dung đó

Tài liệu HTML có thể được soạn thảo trên những trình soạn thảo văn bản đơn giản như Notepad hay TextPad

2 Cấu trúc của một tài liệu HTML:

Tài liệu HTML được chia làm 3 phần, cụ thể như sau:

a.HTML section

Được bắt đầu bởi tag <HTML> và kết thúc bởi tag </HTML>

Cặp tag này định nghĩa phạm vi của văn bản HTML

b Header section

Được bắt đầu bởi tag <HEAD> và kết thúc bởi tag </HEAD>

CHƯƠNG

2

Trang 2

Phần này chứa thông tin mô tả trang web, chẳng hạn như tiêu đề trang web, các từ khóa dùng để tìm kiếm và nhận diện trang web, … Những thông tin này không được hiển thị trên trang web

c.Body section

Được bắt đầu bởi tag <BODY> và kết thúc bởi tag </BODY>

Phần này chứa nội dung của trang web và các tag quy định định dạng của nội dung đó

4 Thuộc tính của tag HTML

Các thẻ HTML có thể có thuộc tính Thuộc tính cung cấp thêm thông tin cho một thành phần HTML

Chẳng hạn, tag HTML sau đây định nghĩa một bảng: <table> Với một thuộc tính thêm vào, chúng ta có thể yêu cầu trình duyệt hiể thị bảng mà không có khung :

Thuộc tính luôn đi theo cặp tên thuộc tính/giá trị như sau: name="value"

Thuộc tính luôn được chỉ định ở thẻ bắt đầu của một thành phần HTML Thuộc tính và giá trị của thuộc tính cũng không phân biệt chữ hoa và chữ thường

Lưu ý: Giá trị của thuộc tính nên được đặt trong cặp dấu nháy Thông thường

người ta sử dụng cặp dấy nháy kép nhưng các dấu nháy đơn cũng được chấp nhận III Các tag HTML cơ bản:

Trang 3

Đoạn văn bản được định nghĩa bởi thẻ <p>

HTML tự động thêm vào các dòng trống trên và dưới đoạn

4 Đường kẻ ngang (Horizontal Rule):

Thẻ <hr> được sử dụng khi ta muốn tạo một đường kẻ ngang trong trang web Trong HTML, thẻ <hr> không có thẻ đóng

Dưới đây là những thuộc tính của thẻ này:

Thuộc tính Giá trị Ý nghĩa

left right

Chỉ định trạng thái canh lề đường kẻ ngang

đường kẻ ngang sẽ được vẽ bằng 1 màu

Trang 4

Thuộc tính Giá trị Ý nghĩa

duy nhất Khi không được set, đường kẻ ngang sẽ được phối bằng 2 màu

<H3>My first HTML document</H3>

<HR noshade size = 5 align = center width =

50%>

<P>This is going to be real fun

<H2>Using another heading</H2>

<P ALIGN=center> Another paragraph element

Việc sử dụng các thẻ <p> để thêm vào các dòng trống cũng là một thói quen xấu Thay vào đó, hãy dùng thẻ <br>

Thẻ <p> có thể được sử dụng mà không có thẻ kết thúc </p> Tuy nhiên, phiên bản HTML kế tiếp sẽ không cho phép bỏ qua bất kỳ thẻ kết thúc nào

IV Các tag HTML định dạng:

1 Các tag định dạng văn bản:

Tag Ý nghĩa

<big> Định nghĩa văn bản có size lớn hơn bình thường

<em> Định nghĩa văn bản được nhấn mạnh (emphasized)

Trang 5

Tag Ý nghĩa

<small> Định nghĩa văn bản có size nhỏ hơn bình thường

<strong> Tô đậm văn bản

<sub> Định nghĩa chỉ số dưới

<sup> Định nghĩa chỉ số trên

<ins> Định nghĩa văn bản được “thêm vào”

<del> Định nghĩa văn bản đã bị xóa

<s> Định nghĩa văn bản đã bị xóa Nên dùng <del> thay cho tag này

<strike> Định nghĩa văn bản đã bị xóa Nên dùng <del> thay cho tag này

Ví dụ:

<html>

<body>

<strong>This text is strong</strong><br>

<em>This text is emphasized</em><br>

<i>This text is italic</i><br>

<small>This text is small</small><br>

This text contains<sub>subscript</sub><br>

This text contains<sup>superscript</sup><br>

This text contains <ins>inserted</ins>

text<br>

This text contains <del>deleted</del>

text<br>

This text contains <s>deleted</s> text<br>

This text contains <strike>deleted</strike>

<pre> Định nghĩa văn bản được định dạng sẵn

<blockquote> Tạo vùng chú thích dài

It preserves both spaces

and line breaks

Trang 6

Here comes a long quotation:

This is a long quotation This is a

long quotation This is a long

quotation This is a long quotation

This is a long quotation

With the block quote element, the

browser inserts line breaks and

margins, but the q element does not

render as anything special

ký tự này vào nội dung trang web như những ký tự thông thường khác

Một ký tự đặc biệt được biểu diễn gồm 3 phần: dấu ampersand (&), phần tên

thực thể được quy định trước hoặc dấu # và số hiệu thực thể (cũng được quy định

trước), và cuối cùng là dấu chấm phẩy (;)

Chẳng hạn để hiển thị dấu nhỏ hơn (<), ta phải viết: < hoặc < trong

văn bản HTML

Lưu ý là tên thực thể có phân biệt chữ hoa và chữ thường

Result Description Entity Name Entity Number

VI Siêu liên kết (hyperlink):

Siêu liên kết thường được dùng để liên kết đến một tài liệ khác trên web

Để tạo siêu liên kết chúng ta dùng thẻ <a> và thuộc tính href của thẻ này

Trang 7

1 Cú pháp:

<a href="url">Text to be displayed</a>

Thẻ <a> được dùng để tạo một điểm neo (anchor) để tạo liên kết, thuộc tính href được dùng để xác định địa chỉ của tài liệu được liên kết đến, và đoạn văn bản nằm giữa thẻ <a> và </a> sẽ được hiển thị thành một hyperlink

Ví dụ:

<HTML>

<HEAD>

<TITLE>Welcome to HTML</TITLE>

<a href="http://www.w3c.org/">Visit World Wide Web Consortium!</a>

Dưới đây là cú pháp để tạo nên một điểm dừng:

<a name="label">Text to be displayed</a>

Với label là tên của điểm dừng muốn tạo Điểm dừng sẽ được tạo tại vị trí đặt tag <a>

Chẳng hạn, để tạo một điểm dừng có tê là Chapter1, ta thực hiện như sau:

<A NAME=“Chapter1”> Chapter 1</A>

Để liên kết đến điểm dừng này, ta tạo đoạn mã HTML như sau:

- Trường hợp điểm đặt siêu liên kết nằm trên cùng trang web chứa điểm dừng:

<A HREF=“#Chapter1”> Go to Chapter 1</A>

- Trường hợp điểm đặt siêu liên kết nằm trên một trang khác với trang web chứa điểm dừng:

<A HREF=“URL#Chapter1”> Go to Chapter 1</A>

Với URL là địa chỉ của trang web chứa điểm dừng

4 Liên kết đến địa chỉ email:

Ví dụ:

<html>

<body>

<p>

Trang 8

This is a mail link:

Send Mail</a>

</p>

<p>

<b>Note:</b> Spaces between words should be replaced by %20 to

<b>ensure</b> that the browser will display your text properly

</p>

<p>

<b>Note:</b> Spaces between words should be replaced by %20 to

<b>ensure</b> that the browser will display your text properly

nghĩa bởi thẻ <td>) Chữ td thay thế cho cụm từ "table data" Một data cell có thể

chứa text, image, list, paragraph, form, horizontal rule, table, …

Trang 9

- WIDTH, HEIGHT : kích thước

- CELLPADDING: khoảng cách từ viền của ô đến nội dung trong ô

- CELLSPACING: khoảng cách giữa các ô trong bảng

- ROWSPAN, COLSPAN: trộn các dòng hoặc cột

- <TR>: dòng, <TD> cột, <TH>: heading

- <CAPTION>: tiêu đề mô tả bảng

Hình 4: Biểu diễn thuộc tính của table

VIII Tạo danh sách:

Trang 10

Trong HTML, hình ảnh được định nghĩa bởi thẻ <img>

Thẻ <img> là một thẻ rỗng Điều này có nghĩa là thẻ <img> chỉ chứa các thuộc tính và không có thẻ kết thúc

Để hiển thị hình ảnh trên trang web, chúng ta sử dụng thuộc tính src Src là

viết tắt của chữ "source" Giá trị của thuộc tính src là URL của hình ảnh chúng ta muốn hiển thị trên trang

Cú pháp chung như sau:

Trang 11

<p>If the image is smaller

than the page, the image will

Trang 12

</map>

<p><b>Note:</b> The "usemap" attribute in the img element refers to the "id" or

"name" (browser dependant) attribute in

the map element, therefore we have added both the "id" and "name" attributes to the map element.</p>

Hình 10: Một số dạng frame

1 Thẻ Frameset:

Thẻ <frameset> định nghĩa cách thức chia cửa sổ trình duyệt thành các frame

- Thuộc tính ROWS và COLS quy định kích cỡ các frame trong tập hợp frame

- Mỗi thuộc tính chứa một danh sách các đối số quy định độ rộng ngăn cách nhau bằng dấu phẩy Đối số này có thể là pixels, là %, hoặc là độ rộng tương đối

- Độ rộng tương đối được thể hiện dưới dạng i* với i là số nguyên

Chẳng hạn: ROWS="3*,*" (* được hiểu là 1*) sẽ cho kết quả là dòng đầu có

độ cao gấp 3 lần so với dòng thứ hai

- ROWS quy định chiều cao của dòng, tính từ trên xuống

- COLS quy định độ rộng của cột, tính từ trái qua phải

- Nếu ROWS hoặc COLS bị bỏ qua (không khai báo), giá trị mặc định sẽ là 100%

- Nếu cả hai thuộc tính đều được chỉ định, một lưới sẽ được thiết lập từ trái qua phải - và sau đó là từ trên xuống

2 Thẻ Frame:

Thẻ <frame> chỉ định tài liệu HTML nào sẽ được đặt vào frame

Trang 13

Thuộc tính của <FRAME …>:

- NAME=“tên_frame”: đặt tên cho frame

- SRC=“URL” : địa chỉ trang web được hiển thị

- TARGET: xác định frame mặc định cho các hyperlink trong frame này

- BORDER=“x” : xác định kích thước đường viền

- SCROLLING=“yes/no/auto” : xác định thuộc tính hiển thị scrollbar

- NORESIZE: không cho phép hiệu chỉnh kích thước frame window

3 Ví dụ chung:

<BODY>

<H1>Table of Contents</H1>

<UL>

<LI> <A HREF="Row1_Column1.html">Photo 1</A></LI>

Mọi form phải được bắt đầu bằng 1 tag <form> Tag <form> có thể được đặt ở bất kỳ đâu trong phần body của văn bản HTML Form phải được kết thúc bằng tag

</form>

Trang 14

Dưới đây là một ví dụ đơn giản về form Trên form này có các nhãn (label), radio button, và push button

<P>

<LABEL for="firstname">First name: </LABEL>

<LABEL for="email">email: </LABEL>

<INPUT type="radio" name="sex" value="Female"> Female<BR>

</P>

</FORM>

2 Các thuộc tính của form:

- METHOD: phương thức truyền dữ liệu (GET/POST)

- ACTION: chương trình/trang web xử lý dữ liệu của form

3 Các thành phần nhập liệu (Control):

Người dùng tương tác với form thông qua các control

Mỗi control có một tên, được xác định bởi thuộc tính name của control đó

Tên của một đối tượng trên form có phạm vi hiệu lực chỉ trong form đó

Mỗi control đều có “giá trị ban đầu” và “giá trị hiện thời” Những giá trị này đều được lưu dưới dạng chuỗi

Ban đầu, giá trị hiện thời của control được thiết lập bằng với giá trị ban đầu Sau đó, giá trị hiện thời có thể sẽ bị thay đổi do chỉnh sửa của người dùng hoặc do các đoạn script

Khi form được “reset”, giá trị của các control lại được set về giá trị ban đầu Nếu một control không có giá trị ban đầu, tác động của việc reset form trên control

đó là không xác định

Để yêu cầu người dùng nhập liệu trên form, ta sử dụng tag <input… />

4 Thuộc tính của các thành phần nhập liệu trên form:

- TYPE : loại INPUT

Trang 15

The cat was playing in the garden

</textarea>

</form>

Kết quả:

Trang 16

f Push Button:

Ngoài button thông thường, form còn hỗ trợ 2 button đặc biệt: Submit và Reset Button Submit có chức năng chuyển dữ liệu đi còn button Reset giúp thiết lập các đối tượng nhập liệu trên form về trạng thái mặc định

Ví dụ :

<input type="button" value="Hello

world!">    

<INPUT TYPE="SUBMIT" NAME="BTNSUBMIT"

VALUE="Submit">    

<INPUT TYPE="RESET" NAME="BTNRESET"

<bgsound src="link_đến_file_nhạc" loop="-1">

Thuộc tính loop có giá trị là -1 cho biết bản nhạc sẽ được lặp vô hạn Chấp nhận các định dạng MID, WAV, RAM, RA, AIF, …

2 Chuyển hướng trang web tự động:

Để cho phép tự động chuyển sang trang web khác, đặt dòng code sau ở phần head của văn bản HTML:

<META HTTP-EQUIV=“refresh” CONTENT=“x”; URL=“file.htm”>

Với x là số giây delay trước khi chuyển sang trang mới, URL chứa địa chỉ trang web muốn chuyển tới

3 Thiết lập encoding cho trang web:

Để thiết lập encoding dạng Unicode cho trang, đặt dòng code sau ở phần head của văn bản HTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Tiêu đề	Ngôn Ngữ HTML
Tác giả	Đặng Thanh Bình
Trường học	Viện CERN
Chuyên ngành	Ngôn Ngữ Lập Trình Web
Thể loại	Tài liệu

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