Các thẻ phân chia khu vực - div span - thông tin address - trích dẫn blockquote - định dạng pre trong html


Tự học html css javascript 02/11/2015 Cùng chuyên mục

Tìm hiểu thẻ phân chia khu vực: khối văn bản div ( block ) - đoạn ký tự ( inline), hiển thị thông tin: bản quyền - tác giả - định dạng: pre - thường dùng hiển thị code ngôn ngữ lập trình như php, c, ... một số ký tự đặc biệt trong html

Thẻ DIV và SPAN

Có những trường hợp chúng ta muốn chia văn bản trong một trang web thành những khối thông tin logic - nghĩa là các đoạn văn bản, phần tử có liên quan với nhau. Thẻ DIVSPAN được sử dụng để nhóm nội dung lại với nhau.

Cách sử dụng thẻ div

Thẻ DIV được dùng để chia tài liệu thành các khối có liên quan với nhau. Thẻ DIV dùng để định nghĩa nội dung mức khối (block-level). Trong một thẻ DIV có thể lồng các thẻ DIV khác - thường thì thẻ span nằm trong thẻ div - cũng có nghĩa nó là phần tử con của thẻ div.

Cách sử dụng thẻ span

Thẻ SPAN được dùng để chỉ một khoảng các ký tự . Khoảng ký tự này có thể là: một từ - một vài từ trong đoạn văn bản - hoặc một phần tử thuộc một dòng trong một khối. Phần tử SPAN dùng để định nghĩa nội dung trong dòng (in-line)

Ví dụ 1: Gom khối thông tin thành viên

	<div> <!--Thông tin thành viên-->
		<h3>Thông tin cơ bản</h3>
		<h4>Tên: <span style="color:green">Trần Văn A</span></h4>
		<h4>Email: <span style="color:#9f9b97">tranvana@gmail.com</span></h4>
		<hr>
		<h3>Thông tin khác</h3>
		<h4>Facebook ID: <span style="color:green">tran-van-a</span></h4>
		<h4>Yahoo ID: <span style="color:green">tran_van_a@yahoo.com.vn</span></h4>
	</div>

Hình 1: Sử dụng thẻ div và span trong html

Thẻ META

Phần tiêu đề (head) cũng có thể chứa thẻ META. Thẻ này cung cấp thông tin về trang web của bạn như  gồm tên tác giả, tên phần mềm dùng để viết trang đó, tên công ty, thông tin liên lạc,…, dạng mã hóa, tiêu đề, đường dẫn, thể loại,...  Thẻ META sử dụng kết hợp giữa thuộc tính và giá trị.

Hiển thị tiếng việt trong html

Để một tài liệu html khi hiện lên trình duyệt có thể hiển thị tiếng việt - bạn cần đặt thuộc tính mã hóa cho nó là "UTF-8". Thuộc tính này nằm trong thẻ meta -  tên là charset

Trong HTML 5:
<meta charset="UTF-8">
Trong HTML 4:
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">

Hiển thị các thông tin - tiêu đề - tác giả - mô tả ngắn gọn - đường dẫn - thể loại

Các thông tin tiêu đề (title), tác giả (author), mô tả ngắn gọn (description), đường dẫn (url), thể loại (type) - cung cấp các thông tin sơ bộ về trang web.

<meta NAME="description" property="og:description" CONTENT="streampow - Tự học html css javascript">
<meta NAME="Keywords" property="og:keywords" CONTENT="streampow - tự học - html - css - javascript">
<meta property="og:type" content="article"/>  
<meta property="og:site_name" content="streampow sức mạnh tự học - php mysql html css" />
<meta property="og:url" content="http://streampow.net/tu-hoc-html-css-javascript-22.html" />
<meta property="og:title" content="Tự học html css javascript" />

Trong đó thuộc tính CONTENT: nội dung - áp dụng với các thuộc tính description (mô tả trang web) , keyword (từ khóa nội dung) - site_name: tên website.

Thẻ <ADDRESS>

Thẻ <ADDRESS> được dùng để hiển thị các thông tin như tác giả, địa chỉ, chữ ký trong tài liệu HTML. Phần tử này được hiển thị ở cuối trang (footer), thường chứa một hoặc một số thông tin sau:

  • Liên kết đến trang chủ
  • Đặc tính chuỗi tìm kiếm
  • Thông tin bản quyền: Copy © 2015

Ví dụ 2: Hiển thị thông tin "Liên kết trang chủ - bản quyền" dùng thẻ <ADDRESS>

<address>
	<p> Copy © 2015 | <a href="http://streampow.net">streampow</a></p>
</address>

Thẻ trích dẫn <BLOCKQUOTE>

Chúng ta có thể  trích dẫn văn bản bên trong tài liệu HTML bằng cách sử dụng thẻ BLOCKQUOTE và thẻ Q. Thẻ BLOCKQUOTE được sử dụng cho những phần trích dẫn dài và được hiển thị như một đoạn văn bản thụt vào đầu dòng. Nếu phần trích dẫn ngắn và không cần ngắt đoạn thì sử dụng phần tử Q tốt hơn. Khi sử dụng phần tử Q, bạn phải xác định dấu ngoặc kép.

Ví dụ 3: Trích dẫn " streampow - sức mạnh tự học - lập trình: php c java - thiết kế web: html css javscript jquery "

<h3>STREAMPOW</h3>
<p>Với rất nhiều bài viết - thuộc nhiều thể loại - đúng với phát biểu:</p>
<blockquote>
	<p>
		 streampow - sức mạnh tự học:		 
		 - lập trình: php c java
		 - thiết kế web: html css javscript jquery
	</p>
</blockquote>

 thẻ block quote - trích dẫn - trong html

Hình 2: Sử dụng thẻ block quote trong html

Thẻ định dạng <PRE>

Sử dụng thẻ PRE hiển thị với định dạng đã được xác định trước . Thẻ này dùng để xác định định dạng cho văn bản (khác biệt so với các đoạn khác). Thường dùng để hiển thị code của ngôn ngữ lập trình như php, c, java, ... kết quả của hàm print_r() (trong php)

Ví dụ 4: Hiển thị định dạng cho đoạn code php - xuất lời chào: " Hello World "

<pre>
	<?php
		echo 'Hello World';
	?>
</pre>

Sử dụng ký tự đặc biệt trong tài liệu HTML

Bạn có thể chèn các ký tự đặc biệt vào tài liệu HTML. Để đảm bảo trình duyệt không nhầm chúng với thẻ HTML, bạn phải gán mã định dạng cho các ký tự đặc biệt này - hơn nữa một số ký tự đặc biệt không có trên bảng mã ASCII. 

Ký Tự đặc biệt Mã định dạng
Lớn hơn > &gt;
Nhỏ hơn < &lt;
Ký tự © &copy;
Ký tự & &amp;
Trích dẫn "" &quot;
Ký tự » &raquo;
Ký tự « &laquo;

Một số ký tự đặc biệt trong HTML

TỔNG KẾT

Qua bài này - các bạn đã hoàn thành tìm hiểu các thẻ cơ bản trong html - trong đó 2 thẻ divspan rất hay được sử dụng. Các bạn cần luyện tập kỹ năng phân tích - gom nhóm thông tin để có thể sử dụng tốt 2 thẻ này, làm cơ sở để học tốt css, chia layout trang web. Trong bài sau - các bạn sẽ tìm hiểu table và form - đến đây, đủ để các bạn có thể trình bày một trang web tĩnh (static web) - đủ kiến thức để bắt tay thực hành chia layout website ( khung nhìn của trang web). 




Bình luận:


tự học html