Hiển thị các bài đăng có nhãn HTML. Hiển thị tất cả bài đăng

11/6/15

Thẻ base trong html

Trước khi bước vào giới thiệu về thẻ <base>. Đầu tiên chúng ta hãy cùng nhau cùng nhau xem ví dụ dưới đây nhé!
Chưa cần hiểu nó là gì đâu ạ. Đọc xong bài ta sẽ hiểu ngay thôi.

<!DOCTYPE html>
<head>
<base href="http://www.vietbg.com/img/" target="_blank">
</head>
<html>
<body>
<img src="logo.png" width="728" height="90" alt="Logo">
<a href="http://www.vietbg.com">Logo</a>
</body>
</html>

Định nghĩa:
Thẻ <base> là thẻ được dùng để xác định URL cơ sở cho tất cả các liên kết khác còn lại trong trang.

Cách sử dụng:
Vì địa chỉ URL gốc thì là duy nhất nên mỗi một trang html chỉ được phép sử dụng một thẻ <base>.
Ta có thể sự dung được thẻ <base> khi và chỉ khi ta khai báo chúng nằm trong thẻ <head>...</head>.

Chú ý:
Thẻ <base> nên được đặt ngay sau thẻ <head>
Nếu như bạn khai báo thẻ <base> thì nó phải có thuộc tính href hoặc target. Hoặc là có cả hai như trong ví dụ đầu bài.

Thuộc tính của thẻ:

6/6/15

Chèn hình ảnh trong HTML

Trong bài viết trước, mình đã hướng dẫn các bạn tạo một bảng trong trang HTML

Ở bài này, mình sẽ hướng dẫn các bạn thể hiện hình ảnh trong tài liệu viết bằng ngôn ngữ HTML.

Ví dụ:

<img src="/thư-mục-chứa-ảnh/tên-ảnh.jpg">

Cách viết như trên sẽ cho hiển thị một tấm hình có trên trang web của bạn rồi.

<img src="http://domain-khác.com/thư-mục-chứa-ảnh/tên-ảnh.jpg">

Cách hiển thị một tấm hình từ một thư mục khác hoặc từ một server khác trên trang web của bạn.

Thẻ img và thuộc tính src:

Như chúng ta biết, trong HTML, hình ảnh được xác định bởi thẻ <img>. Nhưng nếu chỉ mình thẻ img không thì chưa đủ để hiển thị hình ảnh trên trang web của bạn được. Mà chúng ta phải cần đến thuộc tính src. Trước tiên ta cần biết rằng Src là chữ viết tắt của source. Giá trị của thuộc tính src chính là địa chỉ URL của hình ảnh mà bạn muốn hiển thị trên trang web.

Dưới đây sẽ là cú pháp cơ bản nhất để hiển thị một bức ảnh trên web.

Trình duyệt sẽ hiển thị hình ảnh nơi mà có thẻ image được chèn trong tài liệu. Nếu bạn muốn thêm thẻ image vào giữa một đoạn văn, trình duyệt sẽ hiển thị đoạn văn thứ nhất trước, sau đó đến hình và sau cùng là đoạn văn thứ hai.

Thuộc tính Alt

Vì bọ tìm kiếm của google, bing hay yahoo,.... không thể hiểu được hình đó là gì, có nội dung như thế nào. Chính vì vậy để nó có thể hiểu được chúng ta cần thêm vào cho thẻ img thuộc tính alt. Thuộc tính này được sử dụng để xác định chữ thay cho hình. Và nếu hình đó không hiện được thì một dòng chữ này sẽ xuất hiện để báo cho người đọc biết. Gía trị của thuộc tính alt là một dòng chữ như sau:

Thuộc tính alt báo cho người đọc biết họ không xem được hình gì khi mà trình duyệt không load được hình đó. Trình duyệt sau đó sẽ hiển thị dòng chữ thay vì hình ảnh. Bạn nên tạo cho mình thói quen thêm thuộc tính "alt" vào mỗi tấm hình trên một trang, để tăng khả năng hiển thị và giúp những người lướt web mà không dùng hình ảnh.

Và kết quả của việc sử dụng thuộc tính này là

5/6/15

Tạo bảng trong HTML

Với HTML bạn cũng có thể tạo bẳng cho trang web của mình.

Ví dụ

Bảng
Ví dụ này chỉ bạn cách tạo một bẳng bằng HTML

Đường biên của bảng

Bảng

Bảng được định dạng bởi thẻ <table>. Một bảng được chia ra làm nhiều hàng với thẻ <tr>, môi hàng được chia ra làm nhiều cột dữ liệu với thẻ <td>. Cbữ td là chữ viết tắt của "table data", là nội dung của cột dữ liệu. Một cột dữ liệu có thể bao gồm chữ, hình ảnh, danh sách, đoạn vắn, form và bảng v.v.

Đoạn code trên sẽ hiển thị như thế này trong cửa sổ trình duyệt

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Bảng và thuộc tính đường biên

Nếu bạn không thiết lập thuộc tính đường biên cho bảng thì bảng của bạn sẽ được hiển thị mà không có đường biên. Đôi khi nó có thể hữu dụng nhưng thường thì bạn muốn bảng của bạn có đường biên.

Để hiển thị đường biên của một bảng, bạn phải sử dụng thuộc tính đường biên.

Heanding trong bảng
Heading trong một bảng được xác định bằng thẻ <th>

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Nó sẽ hiển thị như thế này ở trên trình duyệt

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Cột trống trong bảng
Cột trống không có nội dung thì không được hiển thị tốt lắm ở hầu hết các trình duyệt.

Nó sẽ có dạng thế này trên trình duyệt

row 1, cell 1	row 1, cell 2
row 2, cell 1

Bạn chú ý rằng đường biên bao quanh cột trống bị mất (nhưng trong trình duyệt Mozilla Firefox nó sẽ hiển thị đường biên)

Để tránh điều này xảy ra, bạn thêm một non-breaking space ( ) vào cột trống đó, để làm cho đường biên của nó được hiện thỉ.

Nó sẽ hiển thị như sau ở trình duyệt

row 1, cell 1	row 1, cell 2
row 2, cell 1

Mẹo nhỏ giúp bạn
Loại thẻ <thead>,<tbody> and <tfoot> ít khi được sử dụng, bởi vì nó không phải là tính năng được

Một vài ví dụ nữa

Bảng không có đường biên

Headings trong bảng

Cột trống
Ví dụ này chỉ cho bạn cách sử dung " " để hiển thị cột không có nội dung.

Bảng với viền ngoài

Cột chiếm hơn một cột hoặc hàng

Thẻ trong bảng
Ví dụ này hướng dẫn bạn cách hiển thị nội dung ở trong nội dung khác.

Cell padding
Ví dụ này hướng dẫn bạn cách tạo cellpadding để tạo ra nhiều khoảng trắng hơn giữa nội dung và đường biên của nó.

Cell spacing
Cách sử dụng cellspacing để tăng khoảng cách giữa các cột.

Thêm màu nền hoặc hình nền cho bảng

Thêm màu nền hoặc hình nền cho cột

Căn chỉnh nội dung của cột
Hướng dẫn cách sử dụng thuộc tính "align" để căn chỉnh nội dung của cột, và tạo ra một bảng nhìn đẹp mắt hơn.

Thuộc tính frame
Chỉ cách sử dụng thuộc tính "frame" để điều khiển đường biên của bảng.

Hướng dẫn dùng HTML frame

Với frame bạn có thể hiển thị nhiều trang web trên cùng một cửa sổ trình duyệt. Mỗi một tài liệu HTML được gọi là một frame, và mỗi frame đều độc lập với những frame khác.

Một vài ví dụ về Frame

Tập hợp frame chiều dọc
Ví dụ này hướng dẫn bạn cách tạo một tập hợp frame hàng học với 3 tài liệu khác nhau.

Tập hợp frame chiều ngang

Cách sử dụng thẻ <noframe>

Những nhược điểm khi sử dụng frame:

Người làm web phải theo dõi nhiều tài liệu HTML
Khó có thể in ấn toàn bộ trang web.

Thẻ frameset

Thẻ <frameset> xác định bạn sẽ chia cửa sổ trình duyệt thành những frame như thế nào. Môi một frame xác định một tập hợp các hàng hoặc cột. Giá trị của hàng hoặc cột chỉ ra diện tích của màn hình mà frame đó sẽ chiếm.

Thẻ Frame

Thẻ <frame> xác định tài liệu HTML nào sẽ được chèn vào mỗi frame.
Ở ví dụ dưới đây bạn có một frameset với hai cột. Cột thứ nhất được thiết lập là chiếm 25% độ rộng của cửa sổ trình duyệt. Cột thứ hai được thiết lập sẽ chiếm 75% độ rộng của cửa sổ trình duyệt. Tài liệu html tên là "frame_a.htm" được chèn vào cột thứ nhất, và "frame_b.htm" được chèn vào cột thứ hai.

Mẹo nhỏ giúp bạn
Nếu frame của bạn có đường viền thì người dùng có thể định lại kích thước bằng cách kéo nó. Để tránh việc này bạn có thể thêm noresize="noresize" vào thẻ <frame>

Thêm thẻ <noframes> cho trình duyệt không hỗ trợ frame.

Một vài ví dụ nữa

Hoà trộn tập hợp frame
Ví dụ này hướng dẫn bạn cách tạo một tập hợp frame với 3 tài liệu và làm cách nào để gộp nó vào thành hàng và cột.

Tập hợp frame với noresize="noresize"
Ví dụ này chỉ ra cách sử dụng thuộc tính noresize. Frame trong ví dụ này không thể resize được. Di chuột vào đường biên ở giữa hai frame và bạn có thể nhận ra rằng bạn không thể di chuyển được đường biên.

Navigation frame
Ví dụ này hướng dẫn bạn cách tạo ra một mục lục (navigation) bằng frame. Frame navigation chứa một danh sách những đường link và đích là ở frame thứ hai. Tài liệu "tryhtml_contents.htm" chứa 3 đường link và code của đường link như sau

<a href ="frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>

Frame thứ hai sẽ hiển thị nội dung của tài liệu được link.

Frame địa phương
Frame ở trong một trang HTML

Nhẩy đến một vùng nhất định trong một frame
Ví dụ này chỉ bạn cách tạo 2 frame, Frame này chứa nguồn đến một phần cụ thể của một file. Phần cụ thể đó được tạo bởi <a name="c10"> trong file "link.htm"

Nhảy đến một vùng nhất định với navigation frame
Ví dụ này sẽ cho bạn thấy có 2 frame. Một frame là navigation frame (content.htm) ở bên trái bao gồm một danh sách các đường link với frame thứ 2 (link.htm) là đích đến. Frame thứ hai hiển thị tài liệu được link. Một trong các đường link ở navigation frame được liên kết đến một phần cụ thể ở file đích. Code HTML của file "content.htm" nhìn như sau: <a href="link.htm" target="showframe"> Link without Anchor</a><br><a href ="link.htm#C10" target ="showframe">Link with Anchor</a>.

Liên kết link trong HTML

HTML sử dụng siêu liên kết để liên kết những tài liệu khác nhau trên trang web.
Ví dụ:

Tạo đường siêu liên kết
Ví dụ này chỉ cho bạn cách tạo siêu liên kết như thế nào

Một tấm hình như là đường link
Ví dụ này hướng dẫn bạn cách dùng hình làm đường liên kết.

Thẻ anchor và thuộc tính href
HTML sử dụng thẻ <a> (anchor) để tạo đường liên kết đến một tài liệu khác.

Thẻ anchor có thể liên kết đến bất cứ một tài nguyên nào trên internet, chúng có thể là một trang HTML, một tấm hình, một file nhạc, một bộ phim .v.v.

Cú pháp để tạo một thẻ anchor

Thẻ <a> được sử dụng để tạo một điểm neo và liên kết bắt đầu từ đó, thuộc tính href được sử dụng để chỉ ra tài liệu sẽ được liên kết đến, và chữ ở xuất hiện ở giữa hai tag < và > sẽ được hiển thị dưới dạng siêu liên kết.
Điểm neo sau xác định liên kết đến blog của vietbg.blogspot.com

<a href="http://vietbg.blogspot.com">Mời bạn vào Việt Blogger</a>

Dòng code ở trên sẽ xuất hiện như sau trong trình duyệt.

Mời bạn vào Việt Blogger

Thuộc tính đích đến:

Với thuộc tính đích đến, bạn có thể xác định liên kết đến tài liệu khác sẽ được mở ra ở đâu. Dòng code dưới đây sẽ mở tài liệu được liên kết trong một cửa sổ trình duyệt mới.

<a href="http://vietbg.blogspot.com"target="_blank">Mời bạn vào Việt Blogger</a>

Thẻ anchor và thuộc tính tên

Thuộc tính tên được sử dụng để tạo một điểm neo đã được đặt tên. Khi sử dụng điểm neo đã được đặt tên trước chúng ta có thể tạo ra những đường liên kết mà người đọc có thể nhảy trực tiếp đến một phần cụ thể nào đó trên trang web, thay vì họ phải kéo xuống dưới để tìm thông tin. Một dạng như là bookmark vậy!

Dưới đây là cú pháp của điểm neo được đặt tên trước:

Thuộc tính tên được sử dụng để tạo điểm neo. Tên của điểm neo có thể là bất cứ thứ gì bạn muốn.

Dòng code sau xác định điểm neo được đặt tên trước.

Bạn có thể nhận ra rằng thẻ anchor được đặt tên trước được hiển thị không có gì đặc biệt. Để trực tiếp liên kết phần Việt Blogger, bạn chỉ phải thêm dấu # và tên của điểm neo và cuối cùng của một URL. Xem ví dụ sau

<a href="http://vietbg.blogspot.com/#HTML">Quay lại trang HTML</a>

Một đường liên kết đến phần HTML TỪ trang "ten-trang.htm" sẽ như sau:

<a href="#HTML">Quay lại trang HTML</a>

Mẹo giúp bạn

Luôn luôn thêm một đường dẫn mỗi khi bạn muốn dẫn đến một thư mục con. Nếu bạn để đường liên kết như sau:

href="http://vietbg.blogspot.com/search/label/HTML?max-results=5" thì bạn sẽ tạo ra 2 lệnh HTTP cho server, bởi vì server sẽ thêm một đường dẫn vào địa chỉ và tạo ra một lệnh mới như sau:

href="http://vietbg.blogspot.com/search/label/HTML?max-results=5"

Điểm neo được đặt tên thường được sử dụng để tạo Mục Lục tại trang đầu tiên của một tài liệu nhiều trang. Môi chương trong tài liệu đó được cho một điểm neo, và liên kết đến mỗi một điểm neo này sẽ được đặt ở trên cùng của tài liệu.

Nếu trình duyệt không tìm được điểm neo được chỉ ra từ trước, nó sẽ quay lên phần trên cùng của tài liệu.

Một vài ví dụ

Mở liên kết ở một cửa sổ trình duyệt mới

Liên kết đến một vị trí trên cùng một trang

Break out of a frame

Tạo một liên kết dạng mailto
Ví dụ này hướng dẫn bạn cách tạo ra một đường liên kết trực tiếp đến địa chỉ email.

Tạo một liên kết dạng mailto 2
Phức tạp hơn dạng 1

Các ký tự đặc biệt trong HTML

Một vài ký tự tương tự như dấu nhỏ hơn <, có một ý nghĩa đặc biệt trong HTML, và do đó không thể được sử dụng như là chữ được. Do vậy để hiển thị được dấu nhỏ hơn < trong HTML chúng ta phải sử dụng những ký tự đặc biệt. Bởi vì dấu < xác định điểm bắt đầu của một thẻ HTML. Nên nếu bạn muốn trình duyệt hiển thị ký tự đó bạn phải thêm và code của nó những ký tự đặc biệt.

Một ký tự đặc biệt có 3 phần: Ký hiệu (&), tên của ký tự hoặc một dấu # và một dãy số và cuối cùng là dấu chấm phẩy ;

Để hiển thị được dấu nhỏ hơn trong HTML bạn phải viết là < hoặc <

Cái hay của việc sử dụng tên thay vì sử dụng số là vì tên của nó thì dễ nhớ hơn nhiều. Nhưng cái dở lại là không phải trình duyệt nào cũng hỗ trợ những tên mới này, trong khi đó hầu hết các trình duyệt đều có thể nhận ra nó ở dạng số.

Bạn nên chú ý rằng ký tự đặc biệt phân biệt chữ hoa và chữ thường. Ví dụ sau đây sẽ giúp bạn thực nghiệm với những ký tự đặc biệt. Lưu ý bạn rằng những ký tự này chỉ có trong trình duyệt Internet Explorer.

Xem ví dụ

Non-breaking space

Ký tự được dùng nhiều nhất trong HTML có lẽ là nbsp (non-breaking space)

Thường thì HTML cắt bớt khoảng trống trong chữ của bạn. Ví dụ nếu bạn viết 10 chỗ trống trong text của bạn thì HTML sẽ loại bỏ 9 trong số đó. Để thêm khoảng trống vào chữ của bạn, bạn phải sử dụng ký tự đặc biệt là  

Các thẻ HTML cơ bản

Những thẻ quan trọng nhất trong HTML là những thẻ xác định Heading, đoạn văn và xuống dòng.

Headings

Headings được định dạng với hai thẻ <h1> đến <h6>. <h1> xác định heading lớn nhất. <h6> xác định heading nhỏ nhất

<h1>Đây là heading</h1>
<h2>Đây là heading</h2>
<h3>Đây là heading</h3>
<h4>Đây là heading</h4>
<h5>Đây là heading</h5>
<h6>Đây là heading</h6>

HTML sẽ tự động thêm một dòng trắng trước và sau mỗi heading.

Đoạn văn - paragraphs
Paragraphs được định dạng bởi thẻ <p>.

HTML sẽ tự động thêm một dòng trắng trước và sau mỗi heading.

Line Breaks - xuống dòng

Thẻ <br> được sử dụng khi bạn muốn kết thúc một dòng nhưng lại không muốn bắt đầu một đoạn văn khác. Thẻ <br> sẽ tạo ra một lần xuống dòng khi bạn viết nó.

<p>Đây <br> là một đo<br>ạn văn với thẻ xuống hàng</p>

Thẻ <br> là một thẻ trống, nó không cần thẻ đóng dạng </br>

Lời chú thích trong HTMLThẻ chú thích được sử dụng để thêm lời chú thích trong mã nguồn của HTML. Một dòng chú thích sẽ được bỏ qua bởi trình duyệt. Bạn có thể sử dụng chú thích để giải thích về code của bạn, để sau này bạn có phải quay lại chỉnh sửa gì thì cũng dễ nhớ hơn.

Bạn cần một dấu chấm than ! ngay sau dấu nhỏ hơn nhưng không cần ở dấu lớn hơn.

Những thẻ HTML cơ bản

Tag	Mô Tả
<html>	Xác định một văn bản dạng HTML
<body>	Xác định phần thân của tài liệu
<h1> to <h6>	Xác định header từ 1 đến 6
<p>	Xác định một đoạn văn
<br>	Chèn một dòng trắng
<hr>	Xác định một đường thẳng
<!-->	Xác định vùng chú thích

Một vài ví dụ

Các dạng của đoạn văn bản
Ví dụ này giải thích thêm về vài thuộc tính của đoạn văn bản.

Line breaks
Ví dụ này giải thích về cách sử dụng thẻ xuống hàng

Vấn đề với căn chỉnh dạng bài thơ
Ví dụ này cho bạn thấy một vài vấn đề về căn chỉnh của HTML

Headings

Heading căn lề giữa

Đường thẳng ngang

Lời chú thích ẩn
Ví dụ này giải thích cách thêm một đoạn chú thích vào mã nguồn của HTML

Màu nền

Cấu trúc cơ bản của một trang HTML

Thông thường một trang HTML/XHTML có 3 phần chính như sau:

Phần 1: Phần khai báo chuẩn của html hay xhtml.
Phần 2: Phần khai báo ban đầu ( khai báo về meta, title, css, javascript… )
Phần 3: Phần chứa nội dung của trang web, nơi hiển thị nội dung.

Dưới đây là cấu trúc cơ bản nhất của một trang HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tiêu đề trang web</title>
</head>

<body>
...Phần thân viết ở đây...
</body>
</html>

Cấu trúc cơ bản của trang web

Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và cũng có trang chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2 cột để layout.

Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm,...
Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub navigation).
Phần thân của trang: page body, phần này chứa phần nội dung chính (content) và phần nội dung phụ (sidebar).
Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người dùng xem.
Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang (local navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo,...
Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công ty, địa chỉ, số điện thoại, mail liên hệ,... và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết,...

Sự sắp xếp về chiều của HTML

Sự sắp xếp chiều dọc của thẻ block trong HTML

Khi chúng ta sử dụng các thẻ block, trình duyệt sẽ hiển thị các thẻ theo chiều dọc, mỗi thẻ sẽ chiếm vùng không gian nằm ngang từ trên xuống theo thứ tự như chúng ta đã sắp xếp trong trang HTML/XHTML mà ta đã tạo ra, thẻ nào được viết trước sẽ nằm trên, các thẻ được viết sau sẽ nằm bên dưới.

Để dễ hình dung hơn. Chúng ta cùng nhau xem ví dụ sau đây để hiểu được trình duyệt hiển thị các thẻ theo chiều ngang như thế nào:

HTML viết

<html>
<h1>Tiêu đề 01</h1>

<ul>
<li><a href="http://vietbg.com/search/label/HTML">Link 01</a></li>
<li><a href="http://vietbg.com/search/label/HTML">Link 02</a></li>
<li><a href="http://vietbg.com/search/label/HTML">Link 03</a></li>
<li><a href="http://vietbg.com/search/label/HTML">Link 04</a></li>
<li><a href="http://vietbg.com/search/label/HTML">Link 05</a></li>
</ul>

<div>Nội dung chính</div>

<div>Nội dung phụ</div>

<div>Tên công ty<br />

Địa chỉ<br />

</div>
</html>

Hiển thị trình duyệt:

Tiêu đề 01

Nội dung chính

Nội dung phụ

Tên công ty
Địa chỉ

Phân tích vị trí của các thẻ:

Như trên ta thấy các thẻ block khác nhau đều chiếm vùng không gian nằm ngang nằm ngang khác nhau, chúng ta có thể sắp xếp lại vị trí của các thẻ block bằng cách sửa lại code hay sử dụng các thuộc tính css.

Sự sắp xếp chiều ngang của thẻ inline trong HTML

Khi chúng ta sử dụng các thẻ inline trong HTML, trình duyệt sẽ sắp xếp các thẻ liền kề nhau theo chiều ngang, thẻ nào code trước xuất hiện trước, thẻ nào code sau xuất hiện sau.

Cũng như trên, chúng ta cùng nhau đi xem một ví dụ cụ thể nhé!

HTML viết

<a href="#">Thẻ a</a>
<span>thẻ span</span>
<em>thẻ em</em>
<strong>thẻ strong</strong>

Hiển thị trình duyệt:

Thẻ a thẻ span thẻ em thẻ strong

Tới đây chắc các bạn phần nào đó đã hiểu được nhiệm vụ của HTML/XHTML dùng để làm gì rồi đúng không ạ? Đối với các thẻ block thì trình duyệt sẽ tự đọng hiển tị nó theo chiều dọc, còn đối với các thẻ inline trình duyệt sẽ hiển thị nó theo chiều ngang của màn hình.

Nhiệm vụ của trình duyệt (Firefox, Internet Explorer, Safari, Opera, Chrome,...) là đọc văn bản HTML và hiển thị chúng như chúng ta thấy, tuy nhiên các trình duyệt không hiển thị các thẻ HTML (các tag), nhưng lại sử dụng các thẻ để giải thích nội dung cho trang web.

Giới thiệu về HTML

1,HTML là gì ?

- HTML hay viết đầy đủ là Hypertext Markup Language ( có thể hiểu nghĩa của nó là "Ngôn ngữ liên kết siêu văn bản" ).

- HTML không phải là một ngôn ngữ lập trình máy tính mà nó là một ngôn ngữ sử dụng các thẻ html để biểu diễn các trang web.

Để dễ hiểu hơn ta có một ví dụ đơn giản sau đây:

Trong văn bản html thẻ <a> đánh dấu một liên kết đến một tài liệu nào đó, thẻ <p> đánh dấu một đoạn văn, thẻ <h1> đánh dấu một dạng đề mục...tuy nhiên bây giờ chúng ta chưa cần đi sâu vào mấy vấn đề này làm gì, chúng ta sẽ nhắc đến chúng trong những bài viết sau.

- Một tài liệu html tương đương với một trang web. Một tài liệu html diễn tả một trang web.

- Các thẻ html còn được gọi là các phần tử html ( hay các element ).

- Nếu bạn muốn hiểu biết một chút về lập trình web, học html sẽ là bước đầu tiên và không thể bỏ qua.

2,Để học HTML cần những gì ?

Tất cả những gì bạn cần là:

- Một chiếc máy tính.

- Một trình duyệt web ( Browser ).

- Một công cụ soạn thảo, các bạn có thể lựa chọn rất nhiều công cụ khác nhau ( ở đây mình sẽ dùng Notepad++ ).

- Cuối cùng, tốt nhất bạn nên có một chút niềm đam mê về lập trình web, cái này không bắt buộc nhưng vô cùng quan trọng.

Ở loạt bài sau, ta sẽ đi bắt đầu học về cú pháp và các thẻ cơ bản của html.

*********

Mời các bạn đọc các bài viết khác trong serie HTML cơ bản:

*********

Một số khái niệm khác

Dynamic HTML (DHTML-HTML động): là ngôn ngữ HTML mở rộng làm tăng hiệu ứng trình bày văn bản và đối tượng khác. Trong FrontPage, bạn có thể sử dụng thanh công cụ DHTML Effects để làm tăng cường hiệu ứng cho các thành phần của mà không cần lập trình.

Active Data Objects(ADO): Các thành phần gíup các ứng dụng của người dùng(client applications) truy cập và chế tác dữ liệu cơ sở dữ liệu trên server qua 1 nhà cung cấp.

Active Server Page (ASP): là 1 tài liệu chứa script nhúng trên server . Web servers tương thích ASP có thể chạy các script này. Trên máy trạm, 1 ASP là 1 tài liệu HTML chuẩn có thể được xem trên bất kỳ máy nào trên Web browser nào.

ActiveX: 1 tập hợp các kỹ thuật cho phép các thành phần phần mềm tương tác với một thành phần khác trong môi trường mạng, bất chấp ngôn ngữ của thành phần được tạo ra. ActiveX được dùng làm chính yếu để phát triển nội dung tương tác của World Wide Web, mặc dù nó có thể sử dụng trong các ứng dụng người-máy và các chương trình khác.

URL (Uniform Resource Locator): địa chỉ tới một trạm Internet hay mạng nội bộ, laf 1 chuỗi cung cấp địa chỉ Internet của 1 Web site tài nguyên trên World Wide Web, đi theo sau 1 nghi thức. URL thường dùng là http://, để chỉ định địa chỉ Web site trên Internet. Những URL khác là gopher://, ftp://, mailto://...

Bookmark: 1 vị trí trên 1 trang web có thể là đích của 1 hyperlink. 1 bookmark có thể áp dụng cho 1 chuỗi ký tự tồn tại trên trang ngăn cách bởi bất kỳ ký tự nào. Bookmarks cho phép tác giả link đến 1 phần đã chỉ định trên trang. Trong 1 URL, 1 bookmark được đánh dấu phía trước bằng dấu thăng(#). Cũng được gọi là neo(anchor).

Web browser (Trình duyệt web): Phần mền phiên dịch đánh dấu của các file bằng HTML, định dạng chúng sang các trang Web, và thể hiện chúng cho người dùng. Vài browser có thể cho phép người dùng gởi nhận e-mail, đọc newsgroups, và thực hiện các file sound hoặc video đã được nhúng và trong tài liệu Web.

Script: Một tập các chỉ lệnh dùng để báo cho chương trình biết cách thực hiện một thủ tục qui định, như đang nhập vào hệ thống thư điện tử chẳng hạn. Các khả năng script được cài sẵn trong một số chương trình. Bạn phải tìm hiểu cách viết script đó bằng loại ngôn ngữ không khác gì ngôn ngữ lập trình mini. Có một số chương trình ghi script này một cách tự động bằng cách ghi lại những lần gõ phím và chọn dùng lệnh của bạnh khi bạn tiến hành thủ tục này. Các script giống như các macro, trừ một điều là thuật ngữ macro được dành riêng để chỉ những script nào mà bạn có thể khởi đầu bằng cách ấn một tổ hợp phím do bạn tự quy định.

Structured Query Language - SQL: Trong các hệ quản lý cơ sở dữ liệu, đây là ngôn ngữ vấn đáp do IBM soạn thảo được sử dụng rộng rãi trong máy tính lớn và hệ thống máy tính mini. SQL đang được trang bị trong các mạng khách/chủ như là một phương pháp làm cho các máy tính cá nhân có khả năng thâm nhập vào các tài nguyên của các cơ sở dữ liệu hợp tác. Ðây là loại ngôn ngữ độc lập với dữ liệu; người sử dụng không phải bận tâm đến vấn đề dữ liệu sẽ được thâm nhập vào bằng cách nào về mặt vật lý. Theo lý thuyết, SQL cũng độc lập với thiết bị; có thể dùng cùng một ngôn ngữ vấn đáp để thâm nhập vào các cơ sở dữ liệu trên máy tính lớn, máy tính mini, và máy tính cá nhân. Tuy nhiên, hiện nay có một số phiên bản của SQL đang bị cạnh tranh. SQL là một ngôn ngữ vấn đáp lịch sự và súc tích chỉ với 30 lệnh. Bốn lệnh cơ bản ( SELECT, UPDATE, DELETE, và INSERT) đáp ứng cho bốn chức năng xử lý dữ liệu cơ bản (phục hồi, cải tiến, xoá, và chèn vào). Các câu hỏi của SQL gần giống cấu trúc của một câu hỏi tiếng Anh tự nhiên. Kết quả của câu hỏi sẽ được biểu hiện trong một bản dữ liệu bao gồm các cột (tương ứng với các trường dữ liệu) và các hàng (tương ứng với các bản ghi dữ liệu).

Hypertext Transfer Protocol-HTTP: Giao thức truyền siêu văn bản

Hyperlink: Siêu liên kết

Web site: trang web.

HTTP address: địa chỉ HTTP, ví dụ http://vietbg.blogspot.com

Database: cơ sở dữ liệu, kho dữ liệu. Một bộ sưu tập các thông tin về một chủ đề, được tổ chức hợp lý để thành một cơ sở cho các thủ tục công việc như truy tìm thông tin, rút ra các kết luận, và thành lập các quyết định. Bất kỳ một sưu tập thông tin nào phục vụ cho các mục đích này đều được coi là một cơ sở dữ liệu, ngay cả trường hợp các thông tin đó không được lưu trữ trong máy tính. Thực ra, "tổ tiên" của các hệ cơ sở dữ liệu doanh thương phức tạp hiện nay là những tệp được giữ trên các tấm bìa, có mang mã số, và được xếp trong các phòng lưu trữ trước đây. Thông tin thường được chia ra thành nhiều bản ghi ( record) dữ liệu khác nhau, trên đó có một hay nhiều trường dữ liệu. Ví dụ bản ghi về phim thiếu nhi của một cửa hàng video có thể gồm có các thông tin như sau: TITLE The Blue Fountain CATEGORY Children RATING G RETAIL PRICE 24. 9 đ RENTED TO 325 - 1234 DUE DATE 12 / 3 / 92.

Table: bảng Trong chương trình quản lý cơ sở dữ liệu liên quan, đây là cấu trúc cơ sở của việc lưu trữ và hiển thị dữ liệu, trong đó các khoản mục dữ liệu được liên kết với nhau bởi các quan hệ hình thành do việc đặt chúng theo các hàng và các cột. Các hàng ứng với các bản ghi dữ liệu của các chương trình quản lý dữ liệu hướng bảng, và các cột thì ứng với các trường dữ liệu. Trong chương trình xử lý từ, thường có thể dùng lệnh Table để tạo ra một bảng tính gồm các cột và các hnàg có khản năng tính toán. Trong chương trình xử lý, thường có thể dùng lệnh Table để tạo ra một bảng tính gồm các cột và các hàng có khả năng tính toán. Trong một vài chương trình xử lý từ, tài liệu dữ liệu được tạo ra bằng tính năng hòa hợp thư sẽ tổ chức dữ liệu hòa hợp đó trong một bảng.

Hypertext: văn bản của một tài liệu truy tìm không theo tuần tự. Người đọc tự do đuổi theo các dấu vết liên quan qua suốt tài liệu đó bằng các mối liên kết xác định sẵn do người sử dụng tự lập nên. Trong một môi trường ứng dụng hepertext thực sự, bạn có thể trỏ vào ( highlight) bất kỳ từ nào của tài liệu và sẽ tức khắc nhảy đến các tài liệu khác có văn bản liên quan đến nó. Cũng có những lệnh cho phép bạn tự tạo cho riêng mình những dấu vết kết hợp qua suốt tài liệu. Các trình ứng dụng hypertext rất hữu ích trong trường hợp phải làm với một số lượng văn bản lớn, như các bộ từ điển bách khoa và các bộ sách nhiều tập.

Multimedia: đa phương tiện, đa môi trường, đa truyền thông Một phương pháp giới thiệu thông tin bằng máy tính, sử dụng nhiều phương tiện truyền thông tin như văn bản, đồ hoạ và âm thanh, cùng với sự gây ấn tượng bằng tương tác.

Trong chương trình giới thiệu đa phương tiện gọi là BeethovenWindowss World ( Thế giới Beethoven) chẳng hạn, bạn có thể nhìn thấy chân dung của nhà soạn nhạc, nghe âm nhạc của ông, và cả những đoạn văn bản về cuộc sống riêng của nhạc sĩ. Những tiến bộ đạt được trong việc đồng bộ âm thanh và video cho phép bạn có thể hiển thị các hình video động trong những cửa sổ màn hình.

World Wide Web - WWW: Trong các máy tính có cơ sở UNIX và được nối với mạng Internet. Ðây là một hệ thống dùng để truy tìm và phục hồi các tài liệu hypertext thực hiện. Ðược xây dựng đầu tiên ở một phòng thí nghiệm vật lý, WWW thường xuyên nhận được các thông tin bổ sung nhờ những người sử dụng đóng góp thêm các tài liệu đã được đánh chỉ số.
Khi nhìn vào một trình đơn Web, bạn nhìn thấy một số các khoản mục được gạch dưới (trên các màn hình đồ họa) hoặc được đánh số thứ tự (trên các màn hình ký tự) đó là các mối liên kết sẽ hiển thị một tài liệu liên quan khi làm cho chúng hoạt động bằng một lệnh thích hợp.

File Transfer Protocol - FTP: định ước truyền tệp, giao thức truyền tệp. Trong truyền thông không đồng bộ, đây là một tiêu chuẩn nhằm bảo đảm truyền dẫn không bị lỗi cho các tệp chương trình và dữ liệu thông qua hệ thống điện thoại. Chương trình FTP cũng được dùng để gọi tên cho định ước truyền tệp UNIX, một định ước hướng dẫn việc truyền dữ liệu.

Internet: Một hệ thống gồm các mạng máy tính được liên kết với nhau trên phạm vi toàn thế giới, tạo điều kiện thuận lợi cho các dịch vụ truyền thông dữ liệu, như đăng nhập từ xa, truyền các tệp tin, thư tín điện tử, và các nhóm thông tin.

Khi bạn làm SEO thì một website chuẩn theo HTML là rất quan trọng