Các thẻ căn lề - thay đổi nền trang - chèn ảnh - siêu liên kết - khối văn bản trong html


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

Giới thiệu các thẻ căn lề (margin) trái (left) - phải (right) - thay đổi nền trang (background) - chèn ảnh (img) - siêu liên hết ( a link )

Căn Lề Cho Trang Web

Lề của trang web, được tính với 4 vị trí của cửa sổ trình duyệt:

  • Lề trên - (top) : ngay phía dưới thanh địa chỉ
  • Lề trái - (left) : cạnh bên trái của trình duyệt
  • Lề phải - (right): cạnh bên phải của trình duyệt
  • Lề dưới - (bottom): cạnh dưới đáy của trình duyệt (ngay phía trên thanh task bar)

Thẻ body là thẻ lớn thứ 2 sau thẻ html - tại đây chứa tất cả các thẻ hiển thị nội dung trang web (nội dung chính). Do đó để thực hiện căn lề cho trang web - các bạn có thể thay đổi thuộc tính của thẻ body.
Cú pháp:

<BODY LEFTMARGIN=x TOPMARGIN=y RIGHTMARGIN=z BOTTOMMARGIN=t>

Trong đó: x - khoảng cách tới lề trái, y - khoảng cách tới lề trên, z - khoảng cách tới lề phải, t - khoảng cách tới lề dưới. Đơn vị tính: pixel

Ví dụ 1: Căn lề cách lề trái - trên - phải - dưới 30pixel

<BODY LEFTMARGIN=30 TOPMARGIN=30 RIGHTMARGIN=30 BOTTOMMARGIN=30>

 Thay Đổi Nền Trang ( set background)

Chúng ta có thể thêm màu vào trang và vào các phần tử trong trang. COLOR là thuộc tính có thể sử dụng với nhiều phần tử như phần tử FONTBODY. Màu sắc có thể là tên màu tự nhiên như "red,  green, ... " hoặc dạng mã HEXA như " #FF0000#008000, ...".

Ví dụ 2: Tạo nền trang có màu AliceBlue

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tạo màu nền cho trang web</title>
</head>
<body BGCOLOR="AliceBlue">
<h2>Tạo màu nền cho trang web với màu AliceBlue</h2>
<p>
<strong>AliceBlue</strong> thuộc họ màu <font color="blue">Blue</font> <br>
<h3>Một số màu khác:</h3>
<ul>
	<li><font color="CadetBlue">CadetBlue</font></li>
	<li><font color="BlueViolet">BlueViolet</font></li>
	<li><font color="DarkBlue">DarkBlue</font></li>
	<li>...</li>
</ul> 
</p>
</body>
</html>

 

Hình 1: Tạo màu nền cho trang web với màu Alicebule

Lựa chọn hình ảnh làm nền

Chúng ta có thể dùng hình ảnh làm nền cho toàn bộ trang. Hình ảnh phải phù hợp với nội dung trang và làm cho trang thêm hấp dẫn.

Cú pháp:
< body background=“bgimagine.jpg” bgproperties=fixed >
bgimagine.jpg là địa chỉ hình ảnh .
bgproperties=fixed để chỉnh hình ảnh thành mờ bất động, chỉ dùng trong Internet Explorer.

Chèn ảnh vào trang HTML

Hình ảnh làm cho nội dung trang HTML trở nên đẹp đẽ sinh động - chúng ta sử dụng thẻ img. Hình ảnh có thể dẫn nguồn (src: source) từ bên ngoài (external link) hoặc tại chính trang web (internal link).

Cú pháp:
<img src="my_image.jpg" width="420px" height="320px" />
Trong đó:

  • src: là đường dẫn tới hình ảnh - có thể là tuyệt đối hoặc tương đối
  • width: là độ rộng chỉ định ( nếu chỉ thiết lập độ rộng - hình ảnh sẽ tự co dãn chiều cao ảnh theo tỷ lệ )
  • height: là chiều cao chỉ định -  ( nếu chỉ thiết lập chiều cao - hình ảnh sẽ tự co dãn chiều rộng ảnh theo tỷ lệ ) - thiết lập cả độ rộng và chiều cao, ảnh sẽ bắt buộc có kích thước theo chỉ định ( không giữ tỉ lệ gốc)

Siêu Liên Kết

Siêu liên kết là một phần tử bên trong tài liệu mà liên kết đến một vị trí khác trong cùng tài liệu đó hoặc đến một tài liệu hoàn toàn khác. Chẳng hạn, khi ta kích vào siêu liên kết sẽ nhảy đến vị trí cần đến. Các siêu liên kết là thành phần quan trọng nhất của hệ thống siêu văn bản.

Giới thiệu siêu liên kết và URL

Khả năng chính của HTML là hỗ trợ siêu liên kết. Một siêu liên kết, hay nói ngắn gọn là một liên kết, là sự kết nối đến tài liệu hay file khác (đồ hoạ, âm thanh, video) hoặc ngay cả đến một phần khác trong cùng tài liệu đó. Khi kích vào siêu liên kết, người dùng được đưa đến địa chỉ URL mà chúng ta chỉ rõ trong liên kết.


Như vậy, với siêu liên kết, chúng ta có thể liên kết đến:

  • Một phần khác trong cùng tài liệu
  • Một tài liệu khác
  • Một phần trong tài liệu khác
  • Các file khác (hình ảnh, âm thanh, trích đoạn video)
  • Vị trí hoặc máy chủ khác

Các liên kết có thể là liên kết trong (internal link) hoặc liên kết ngoài (external link). Liên kết trong là liên kết nối đến các phần khác trong cùng tài liệu hoặc cùng một website. Liên kết ngoài là liên kết kết nối đến các trang trên các website khác hoặc máy chủ khác.

Để tạo siêu liên kết, chúng ta cần phải xác định hai thành phần:

  1. Địa chỉ đầy đủ hoặc URL của file được kết nối
  2. Tiêu điểm của liên kết,  nó có thể là một dòng văn bản, một số từ, thậm chí là một ảnh.

Có hai dạng URL:

  1. URL tuyệt đối – là địa chỉ Internet đầy đủ của trang hoặc file, bao gồm
    giao thức, vị trí mạng, đường dẫn tuỳ chọn và tên file. Ví dụ,
    http:/streampow.net là một địa chỉ URL tuyệt đối.
  2. URL tương đối – là một URL có một hoặc nhiều phần bị thiếu. Trình
    duyệt lấy thông tin bị thiếu từ trang chứa URL đó. Ví dụ: my_image.jpg, nếu giao thức bị thiếu, trình duyệt sử dụng giao thức của trang hiện thời.

Sử dụng siêu liên kết

Thẻ <A> được sử dụng để xác định văn bản hay ảnh nào sẽ dùng làm siêu liên kết trong tài liệu HTML. Thuộc tính HREF (tham chiếu siêu văn bản) được dùng để chỉ địa chỉ hay URL của tài liệu hoặc file được liên kết.

Cú pháp:
<A HREF = protocol://host.domain:port/path/filename> Hypertext </A>
Trong đó:
protocol - Giao thức.
Một số giao thức thường dùng là:

  • http - giao thức truyền siêu văn bản
  • telnet - mở một phiên telnet
  • gopher - tìm kiếm file
  • ftp - giao thức truyền file
  • mailto - gửi thư điện tử

- Host.domain: Địa chỉ Internet của máy chủ
- Port: Cổng phục vụ của máy chủ đích
- Hypertext: Văn bản hay hình ảnh mà người dùng cần nhấp vào để kích hoạt liên kết.

Liên kết đến những tài liệu khác

Giả sử có hai tài liệu HTML trên đĩa cứng cục bộ, Doc1.htmlDoc2.html. Đoạn mã sau tạo ra một liên kết từ Doc1.html đến Doc2.html
Ví dụ 3: Tạo liên kết từ 2 tài liệu Doc1.htmlDoc2.html

<!doctype html> <!--file: Doc1.html-->
<html>
<head>
<meta charset="UTF-8">
<title>Tài liệu 1</title>
</head>
<body>
	<P> 
	Tạo đường dẫn và sử dụng thẻ siêu liên kết<br>
	<A HREF ="Doc2.html">Nhấn vào đây để xem tài liệu 2</A>
	</P>
</body>
</html>
<!doctype html> <!--file: Doc2.html-->
<html>
<head>
<meta charset="UTF-8">
<title>Tài liệu 2</title>
</head>
<body>
	<P>
	Tài liệu số 2<br>
	Tạo đường dẫn và sử dụng thẻ siêu liên kết<br>
	<A HREF ="Doc1.html">Back Home</A>
	</P>
</body>
</html>

Ở ví dụ trên, các file nằm trong cùng một thư mục, vì vậy chỉ cần chỉ ra tên file trong thông số HREF là đủ. Tuy nhiên, để liên kết đến các file ở thư mục khác, cần phải cung cấp đường dẫn tuyệt đối hay đường dẫn tương đối. Đường dẫn tuyệt đối chỉ ra đường dẫn đầy đủ từ thư mục gốc đến file. Ví dụ:
C:\mydirectory\html\Doc2.html

Đường dẫn tương đối chỉ ra vị trí liên quan của file với vị trí file hiện tại.
Ví dụ, nếu thư mục hiện hành là mydirectory thì đường dẫn sẽ là:
<A HREF= “..\Doc3.html”> Next page </A>

Vì vậy, nếu muốn liên kết các tài liệu không liên quan với nhau thì ta nên dùng đường dẫn tuyệt đối. Tuy nhiên, nếu ta có một nhóm tài liệu liên quan với nhau, chẳng hạn phần trợ giúp trong HTML, thì ta nên sử dụng đường dẫn tương đối cho các tài liệu trong nhóm và đường dẫn tuyệt đối cho các tài liệu không liên quan trực tiếp đến chủ đề. Khi đó, người dùng có thể cài đặt phần trợ giúp này trong thư mục mình chọn và nó vẫn hoạt động.

Liên kết đến các phần trong cùng một tài liệu

Thẻ neo <A> (anchor) được sử dụng để người dùng có thể "nhảy" đến những phần khác nhau của một tài liệu. Ví dụ, bạn có thể hiển thị nội dung của trang web như một loạt các liên kết; khi người dùng kích vào một đề tài nào đó thì các chi tiết nằm ở một phần khác của tài liệu được hiển thị.

Ví dụ 4: Tạo liên kết tới đoạn văn bản HTML - PHP - MYSQL

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Liên kế tới các đoạn: HTML - PHP - MYSQL</title>
</head>
<body>
	<h2>Liên kết các thành phần trong trang</h2>
	<p>
		<a href="#html">HTML</a>
		<a href="#php">PHP</a>
		<a href="#mysql">MYSQL</a>
	</p>
	<p> <br> <br> <br> <br> <br> <br> <br> </p>
	<p> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </p>
	<h3 id="html">Ngôn ngữ html</h3>
	<p>
		Ngôn ngữ đánh dấu siêu văn bản (HTML - Hyper Text Markup Language) là một ngôn ngữ đánh dấu được thiết kế để 
		tạo ra các trang Web, trong đó các thông tin được trình bày trên World Wide Web 
		( gọi tắt là www - mạng lưới thông tin toàn cầu )
	</p>
	<p> <br> <br> <br> <br> <br> <br> <br> </p>
	<p> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </p>
	<h3 id="php">Ngôn ngữ PHP</h3>
	<p>
		PHP vay mượn một số cú pháp từ C, Pert, Shell và Java. Nó là một ngôn ngữ lai,
		lấy các tính năng tốt nhất từ ngôn ngữ khác và tạo ra một ngôn ngữ kịch bản (script language): 
		dễ sử dụng và mạnh mẽ. Mã nguồn (code) php được sử dụng với nhiều mục đích trong đó:
		đặc biệt thích hợp cho phát triển web và có thể được nhúng vào các mã HTML.
	</p>
	<p> <br> <br> <br> <br> <br> <br> <br> </p>
	<p> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </p>
	<h3 id="mysql">Hệ quản trị cơ sở dữ liệu mysql</h3>
	<p>
		Mysql là một hệ quản trị cơ sở dữ liệu quan hệ phổ biến trên thế giới. 
		Được xem là đối thủ của sql - hệ quản trị cơ sở dữ liệu của Microsoft.
	</p>
</body>
</html>

TỔNG KẾT

Sau bài này - các bạn nắm được cách căn chỉnh lề cho trang web - chọn màu nền hoặc hình ảnh làm nền trong trang web. Tiếp theo, biết cách chèn ảnh vào trang web - đến đây trang web đã được hiển thị sinh động, đẹp đẽ. Trong các phần cuối, các bạn tìm hiểu các khái niệm về siêu liên kết, đường dẫn - trong đó khái niệm đường dẫn: tương đối - tuyệt đối - các bạn cần đọc kỹ. Ở bài sau, các bạn sẽ tìm hiểu một số thẻ trình bày về nội dung khác như: thẻ div - thẻ span - blockquote - pre - ... trước khi chuyển sang phần mới: Bảng Biểu (Table) và Biểu Mẫu (FORM).



Bài liên quan:



Bình luận:


tự học html