Element dòng (inline element)

4. Các thẻ thuộc HTML element

4.1.2. Element dòng (inline element)

Nội dung của element sẽ tiếp tục ở trên dòng hiển thị của trình duyệt.

Những element thuộc nhóm inline nên được bao ngoài bởi nhóm các element block, vì các element block sẽ lo nhiệm vụ dàn trang web, còn các element thuộc nhóm inline chỉ để hiển thị nội dung cho văn bản.

Những element thuộc nhóm inline có thể được lồng vào nhau nhưng không thể sử dụng element block lồng trong element inline.

Một số element inline tiêu biểu có các thẻ sau <a></a> <abbr></abbr> <acronym></acronym> <b></b> <basefont></basefont> <bdo></bdo> <big></big> <br /> <cite></cite> <code></code> <dfn></dfn> <em></em> <font></font> <i></i> <em></em> <input></input> <kbd></kbd> <label></label> <q></q> <s></s> <samp></samp> <select></select> <small></small> <span></span> <strike></strike> <strong></strong> <sub></sub> <sup></sup> <textarea></textarea> <tt></tt> <u></u> <var></var> 4.2.Các thẻ cơ bản 4.2.1.Thẻ heading

Thẻ heading thuộc block-level element dùng để tạo các tiêu đề, đầu đề cho trang web Có 6 thẻ tiêu đề bao gồm h1, h2, h3, h4, h5, h6 theo thứ tự h1 (quan trọng nhất) đến h6 (ít quan trọng nhất).

Hầu hết trình duyệt đều hiển thị các thẻ heading tô đậm và sử dụng font lớn hơn bình thường: h1 là lớn và đậm nhất cho đến h6 là lớn và đậm ít nhất. Tuy nhiên thẻ heading dùng để đánh dấu các đoạn text mang ý nghĩa quan trọng như tiêu đề bài viết, các mục lục chứ không phải dùng để in đậm văn bản. Ví dụ: <html> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>

4.2.2.Thẻ Paragraph

Thẻ <p> thuộc block-level element dùng để định nghĩa đoạn văn bản. Thẻ <p> chỉ có thể chứa inline element (nếu có).

Ví dụ:

<p>Thẻ paragraph được dùng để định nghĩa đoạn văn bản</p> <p>Đây là 1 thẻ thuộc block-level element</p>

</body> </html>

4.2.3.Thẻ <div>

Thẻ <div> thuộc block-level element định nghĩa một phân chia khu vực hay một vùng trong văn bản HTML.

Thẻ <div> thường được dùng để nhóm các thành phần nội dung thành một khối để định dạng bằng css do có thể chứa các block-element và inline element bất kỳ.

Ví dụ:

<div>

<p>Thẻ paragraph được dùng để định nghĩa đoạn văn bản</p> </div>

<p>Đây là 1 thẻ thuộc block-level element</p> </body>

4.2.4.Thẻ <span>

Thẻ <span> thuộc inline element được sử dụng để nhóm các inline element trong văn bản HTML với mục đích định dạng css cho các element đó.

Ví dụ:

<p>Trường <span>Đại học </span><span> Nha Trang</span></p> </body>

</html>

4.2.5.Thẻ ngắt dòng <br>

Thẻ <br> thuộc inline element được sử dụng khi ta muốn kết thúc một dòng nhưng không muốn bắt đầu một đoạn mới. Thẻ <br> sẽ ngắt dòng tại nơi ta đặt nó trong văn bản HTML (tương tự như bấm phím Enter ở văn bản thông thường)

<br> là một thẻ rỗng. Nó không có thẻ đóng.

Để các trình duyệt có thể thể hiện chính xác trong các phiên bản HTML (XHTML) thì thẻ ngắt dòng cần được viết là <br />

Ví dụ:

<p>Dòng text dài cần xuống hàng.<br />Đã xuống hàng</p> </body>

</html>

4.2.6.Đường kẻ ngang

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ị Mô tả

align

left center right

Được dùng để sắp xếp vị trí cho thành phần <hr />.

Không khuyến khích sử dụng, sử dụng thuộc tính text-align của css để thay thế.

Thuộc tính Giá trị Mô tả

noshade noshade

Xác định một đường line thẳng, rõ nét, không phải bóng mờ.

Không khuyến khích sử dụng, sử dụng thuộc tính text- decoration của css để thay thế.

size

px pt em %

Xác định chiều cao của thành phần <hr />.

Không khuyến khích sử dụng, sử dụng thuộc tính font-size của css để thay thế.

width px pt em % Xác định chiều rộng của thành phần <hr />.

Không khuyến khích sử dụng, sử dụng thuộc tính width của css để thay thế.

Ví dụ:

<H2 align=center>Thiết kế web</H2>

4.2.7.Các thẻ định dạng văn bản

Thẻ Ý nghĩa

<b> Tô đậm văn bản. Nên dùng <strong> thay cho thẻ này

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

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

<i> Làm cho văn bản nghiêng

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

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

<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 thẻ này.

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

<u> Gạch dưới văn bản

Ví dụ:

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

<i>This text is italic</i><br> <em>This text is emphasized</em><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> text<br> This text contains <u>underlined</u> text<br>

</body> </html>

Thẻ Ý nghĩa

<pre> Định nghĩa văn bản được định dạng sẵn <blockquote> Xác định một đoạn trích dẫn dài. <q> Xác định một đoạn trích dẫn ngắn. <abbr> Mô tả cụm từ viết tắt (chú thích)

<address> Xác định thông tin liên hệ (địa chỉ, mail, điện thoại,...).

Ví dụ: <html> <body> <pre> This is preformatted text.

It preserves both spaces and line breaks.

</pre>

<p>The pre tag is good for displaying computer code:</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html>

Ví dụ:

<p><abbr title="World Wide Web Consortium">W3C</abbr> là tổ chức quản lý các chuẩn Web

</p>

<p>Trích dẫn dài</p> <blockquote>

Đây là đoạn trích dẫn dài. Đây là đoạn trích dẫn dài. Đây là đoạn trích dẫn dài. Đây là đoạn trích dẫn dài.

</blockquote>

<p>Trích dẫn ngắn <q>Đây là trích dẫn ngắn</q></p> <p>Địa chỉ ĐH Nha Trang</p>

Số 02 Nguyễn Đình Chiểu<br /> Nha Trang, Khánh Hòa

</address> </body>

4.3.Liên kết

Một trong những đặc trưng cơ bản của văn bản HTML là nó chứa liên kết tới các văn bản khác hoặc một phần nội dung khác nằm trong văn bản đó. Để tạo liên kết chúng ta dùng thẻ <a>

và thuộc tính href của nó Cú pháp

<a href="URL">Text_liên_kết</a>

Ví dụ:

Để quy định cửa sổ trình duyệt mở tài nguyên được liên kết, ta dùng thuộc tính target.

 target = _blank : mở liên kết trong 1 cửa sổ mới

 target = _self : mở liên kết trong cửa sổ hiện tại (mặc định)

 target = _parent : mở liên kết trong cửa sổ cha của cửa sổ hiện tại

Ví dụ:

<a href="https://www.google.com.vn/" target="_blank">Tìm kiếm</a> <a href="mailto:abc@yahoo.com">Link tới email abc@yahoo.com</a>

4.3.1.Liên kết địa chỉ tuyệt đối

Với liên kết này thì giá trị URL của thuộc tính target được khai báo đầy đủ: giao thức, tên miền, đường dẫn tới tài nguyên.

Ví dụ:

Liên kết địa chỉ tuyệt đối thường được dùng để tham chiếu đến tài liệu nằm ngoài máy chủ của trang web.

4.3.2.Liên kết địa chỉ tương đối

Nếu liên kết đến tài liệu thuộc cùng máy chủ của trang web thì ta sử dụng địa chỉ tương đối là đường dẫn tới tài liệu tham chiếu

Ví dụ:

mywebsite.html

doc1.html

doc2.html

Trang web đang soạn thảo

../B/doc2.html

4.3.3.Liên kết nội tại

Liên kết nội tại thường được dùng tham chiếu đến 1 phần nội dung của trang web. Để làm được điều này ta thực hiện các bước sau:

 Đánh dấu (bookmark) vị trí bằng cách sử dụng thuộc tính name của thẻ <a>.

Ví dụ:

<a name="C1"/>Chapter 1</a>

 Để tham chiếu đến phần nội dung cần thiết, ta liên kết đến vị trí đã đánh dấu.

Ví dụ:

<a href="#C1"/>Trở về Chapter 1</a>

4.4.Bảng biểu (Table)

Bảng trong HTML được định nghĩa bởi thẻ <table>. Một bảng được chia thành các dòng (với thẻ <tr>), và mỗi dòng lại được chia thành các data cell (được định nghĩa bởi thẻ <td>). Một data cell có thể chứa text, image, list, paragraph, form, table, …

Ví dụ: <table border="1"> <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> Một số thuộc tính của bảng

 BORDER : kích thước viền

 BGCOLOR : màu nền

 ALIGN : canh chỉnh

 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 Các thuộc tính trên có thể được điều chỉnh bởi CSS

Ví dụ: <html> <body> <h4>Nhóm 2 ô hàng ngang thành 1 ô</h4> <table border="1"> <tr> <td>Name</td> <td colspan="2">Telephone</td> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> </body> </html>

Ví dụ: <html> <body> <h4>Nhóm 2 ô hàng dọc thành 1 ô</h4> <table border="1"> <tr> <td>First Name:</td> <td>Bill Gates</td> </tr> <tr> <td rowspan="2">Telephone:</td> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html> 4.5.Danh sách (List) 4.5.1.Danh sách không đánh số thứ tự

Danh sách không đánh số thứ tự liệt kê các mục bằng một biểu tượng (bullet) ở đầu mỗi mục. Cú pháp <ul> <li>Mục thứ 1</li> <li>Mục thứ 2</li> … </ul> Ví dụ: <ul> <li>Bò beefsteak</li> <li>Salad trộn</li>

Theo mặc định, mỗi mục thuộc mức thứ nhất của danh sách không đánh số thứ tự bắt đầu bằng một chấm tròn (disc). Để thay đổi biểu tượng liệt kê ta sử dụng thuộc tính TYPE

<UL TYPE=disc|circle|square> hoặc <LI TYPE=disc|circle|square> Ví dụ: <ul type=circle> <li>Bò beefsteak</li> <li>Salad trộn</li>

4.5.2.Danh sách đánh số thứ tự

Danh sách đánh số thứ tự liệt kê các mục bằng các số (hoặc chữ cái) theo thứ tự ở đầu mỗi mục Cú pháp <ol> <li>Mục thứ 1</li> <li>Mục thứ 2</li> … </ol> Ví dụ: <ol> <li>Bò beefsteak</li> <li>Salad trộn</li>

Có thể dùng thuộc tính TYPE để lựa chọn các cách đánh thứ tự khác nhau khi bắt đầu mỗi mục trong một danh sách có đánh số thứ tự:

 Chữ in hoa A,B,C,… (TYPE=A)

 Chữ in thường a,b,c,… (TYPE=a)

 Chữ số La mã lớn I,II,III,… (TYPE=I)

 Chữ số La mã nhỏ i, ii, iii,… (TYPE=i)

 Số thứ tự 1,2,3,4,… (TYPE=1), đây là lựa chọn mặc định Cú pháp:

hoặc

<LI TYPE=A|a|I|i|1> (Hoạt động không ổn định trên IE)

Nếu muốn đánh số thứ tự bắt đầu từ 1 đơn vị xác định, ta dùng thuộc tính START cho thẻ <ol>

<OL START=n> (với n là thứ tự trong dãy đánh số)

Ví dụ:

<ol TYPE="A" START="3"> <li>Bò beefsteak</li>

<li TYPE="a">Salad trộn</li> <li>Nước trái cây ép</li> </ol>

4.5.3.Danh sách định nghĩa

Danh sách định nghĩa thể hiện các đề mục và phần mô tả (định nghĩa) các đề mục đó. Cú pháp <dl> <dt>Mục thứ 1</dt> <dd>Mô tả mục thứ 1</dt> <dd>Mô tả mục thứ 1</dt> … <dt>Mục thứ 2</dt> <dd>Mô tả mục thứ 2</dt> … </dl> Ví dụ: <dl> <dt>Trái nho:</dt>

<dd>Thường màu đỏ hoặc xanh</dd> <dd>Có vị ngọt</dd>

<dt>Trái chuối:</dt>

<dd>Thường màu vàng, có vị ngọt</dd> </dl>

Ta có thể phối hợp các loại danh sách lại với nhau

Ví dụ: <dl> <dt>Điểm tâm</dt> <dd> <ul> <li>Hạng thường <ol> <li>Phở</li> <li>Bún riêu</li> </ol> </li> <li>Hạng sang <ol> <li>Beefsteak</li> <li>Cá hồi</li> </ol> </li> </ul> </dd> <dt>Bữa trưa</dt>

4.6.Hình ảnh

Trong HTML, hình ảnh được định nghĩa bởi thẻ <img>. Thẻ <img> có 2 thuộc tính cần thiết là src và alt, trong đó:

 src: đường dẫn tham chiếu tới hình ảnh. Có thể là đường dẫn tuyệt đối hoặc tương đối.

 alt: được sử dụng như một văn bản thay thế khi hình ảnh không hiển thị (hoặc không có sẵn).

Cú pháp:

Ví dụ:

 Chú ý: Ta có thể kết hợp giữa thẻ liên kết <a> và thẻ <img> để có được hình ảnh liên kết Ví dụ:

<p>

</p>

4.7.Multimedia

Trong HTML, các đối tượng đa phương tiện khác như audio, video,… được định nghĩa bởi thẻ <object> và <param>

Ví dụ:

</object>

Nếu trình duyệt không hỗ trợ player tương ứng thì các tập tin audio, video,… sẽ không được thực hiện chính xác.

4.8.Khung (frame)

Khi sử dụng frame, chúng ta có thể hiển thị nhiều hơn một tài liệu HTML trong một cửa sổ trình duyệt. Mỗi tài liệu HTML được gọi là một frame, và mỗi frame thì độc lập với những frame còn lại. Cú pháp <html> <frameset> <frame src="URL" /> … </frameset> </html>

Ví dụ: <html> <frameset cols="2*,3*"> <frame src="http://www.w3.org/" /> <frameset rows="50%,50%"> <frame src="http://www.w3schools.com/" /> <frame src="http://validator.w3.org/check" /> </frameset> <noframes> <body>

<p>Xin lỗi, trình duyệt không xử lý được frame!</p> </body>

</noframes> </frameset> </html>

Thẻ <frameset> có 2 thuộc tính cơ bản COLS và ROWS dùng để xác định kích thước các frame của nó. Giá trị của cols và rows có thể là px (pixels), pt (points), % hoặc *

Ví dụ: <frameset cols="*,3*"> -> frameset này có 2 frame, trong đó frame thứ 2 có độ rộng (cols) gấp 3 lần độ rộng của frame thứ 1

Thẻ <frame> có các thuộc tính cơ bản sau

 NAME="tên_frame" : đặt tên cho frame

 SRC="URL" : địa chỉ trang web được hiển thị

 FRAMEBORDER="0|1" : xác định hiển thị viền của frame

 SCROLLING="yes|no|auto" : xác định thuộc tính hiển thị scrollbar

4.9.Biểu mẫu (form)

Một HTML form là một vùng trên văn bản HTML có chứa các đối tượng đặc biệt gọi là control (ví dụ: checkbox, radio button,...) và nhãn của các control đó. Người dùng "hoàn tất" nội dung trên form bằng cách thay đổi giá trị của các control này (nhập văn bản, chọn các mục trình đơn, …). Sau đó, người dùng gửi nội dung form tới một đối tượng có chức năng xử lý những dữ liệu này (chẳng hạn như một web server, mail server, ...).

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

Ví dụ:

<legend>Member Infomation</legend>

<label for="pwd">Password:</label>

<label for="sex">Gender:</label> <input type="radio" name="sex" />Male

<input type="radio" name="sex" />Female<br /> <label for="addr">Address:</label>

Các thuộc tính cơ bản của form:

 NAME : tên form

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

 ACTION : chương trình/trang web xử lý dữ liệu của form.

4.9.1.Thẻ <input>

Thẻ <input> là một thẻ rỗng thuộc inline element được sử dụng để nhập hay chọn thông tin. Thẻ <input> có thể có nhiều dạng khác nhau, tùy thuộc vào thuộc tính tùy chọn TYPE, có thể là text, một checkbox, một trường password, một radio button, một button, ...

a)Text & password

Thẻ <input> dạng text và password được sử dụng để nhập giá trị văn bản trên 1 dòng. Tuy nhiên với dạng password thì ký tự hiển thị bị che dấu bởi ký tự "*".

Ví dụ:

<input type="text" name="fullname" value="Nguyễn Văn A" /><br /> <label for="pwd">Password</label>

Thuộc tính VALUE được sử dụng để cài đặt sẵn giá trị mặc định cho ô nhập liệu

b)Radio button

Thẻ <input> dạng radio button cho phép chọn 1 phần tử duy nhất trong một nhóm lựa chọn được đưa ra.

Ví dụ:

<label for="sex">Gender:</label>

<input type="radio" name="sex" value="male" checked />Male

Nhúng mã JavaScript vào file HTML

Khai báo cơ bản trong JavaScript