chisenhungsuutam

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

Home » Posts filed under HTML

[ Tài liệu ] : Tổng hợp tài liệu HTML, CSS, Javascript

Người đăng: chisenhungsuutam on Thứ Năm, 20 tháng 3, 2014

Đây là một số file các bạn có thể tham khảo

1. HMTL
link :https://app.box.com/s/7gqngz7ywkeevyz3kn4w
2. CSS
link :https://app.box.com/s/yaf2553br0d0nqd5ftiy
3. Javacript
link: https://app.box.com/s/z4hf1tm32adic747a0p9

More about →

HTML Bài tập 5: Tạo file html như các hình sau

Người đăng: chisenhungsuutam on Thứ Tư, 12 tháng 3, 2014

Tham khảo :

More about →

HTML Bài tập 4 : Tạo file html như các hình sau

Người đăng: chisenhungsuutam

Tham khảo :

More about →

HTML Bài tập 3 : Tạo file html như các hình sau

Người đăng: chisenhungsuutam

Tham khảo:

More about →

HTML Bài tập 2 : Tạo file html như các hình sau

Người đăng: chisenhungsuutam

Bài giải .

More about →

HTML Bài tập 1 : Tạo file html như các hình sau

Người đăng: chisenhungsuutam

Đán án tham khảo :

More about →

HTML nâng cao : Frame

Người đăng: chisenhungsuutam

Trước khi vào bài học, bạn hãy để ý kỹ một chút trang này, khi bạn scroll để đọc văn bản thì phần đặt hình ảnh và tên bài học vẫn đứng im, không bị di chuyển.
Trang Web được trình bày theo kiểu chia thành các phần độc lập với nhau gọi là frame. Bạn có thể chia trang Web thành nhiều phần tuỳ thích, ví dụ :

Khi bạn chia trang Web của mình ra bao nhiêu frame thì bạn phải tạo ra bấy nhiêu file HTML để mỗi frame hiển thị một file HTML.

Thông thường đoạn mã của một file HTML được chia thành các frame như sau :

<html>

<head>

<title>Tiêu đề trang Web của bạn</title>

</head>

........

</frameset>

Sorry ! Trình duyệt của bạn không hỗ trợ frame

</noframes>

</html>

Trong đó tag <frameset> có tác dụng để chỉ ra cách chia frame theo chiều ngang hay chiều dọc. Nếu bạn định phân chia theo chiều dọc thì dùng tag <frameset> như sau :

Với X,Y,..,Z là độ rộng của các frame, bạn có thể cho giá trị là điểm, phần trăm...,ví dụ

trong ví dụ cuối cùng bạn thấy có dấu *. Dấu * cho biết trước hết chia cho một frame độ rộng là 170, phần còn lại dành hết cho frame còn lại.

Cách làm tương tự đối với trang chia theo chiều ngang.

Tag <frame> có tác dụng định nghĩa một frame. Frame này sẽ có tên là giá trị của thuộc tính name = "" và hiển thị file HTML có tên là giá trị của thuộc tính src =""

Tag <noframes> ... </noframes> dùng để hiển thị thông báo khi trình duyệt của người đọc Web không hỗ trợ frame, ví dụ

Sorry ! Trình duyệt của bạn không hỗ trợ frame

</noframes>

Ví dụ khi muốn chia một trang Web như sau :

bạn phải làm như sau :

<html>

<head>

<title>A More Complex Framed Page</title> </head>

</frameset>

</frameset>

This is what someone would see who does not have a web

browser that can display frames

</NOFRAMES>

</html>

Thông thường, một trang Web được trình bày như sau :

trong đó giả sử frame làm menu có tên là menu và frame hiển thị thông tin có tên là display. Khi click lên các siêu liên kết ở frame menu thì nội dung của các trang tương ứng hiện lên frame display, để làm được điều đó, trong file HTML của frame menu bạn đưa thêm tag <base> vào ngay sau tag <body>

...

<body>

...

Khi bạn không muốn hiển thị border của frame, bạn thêm thuộc tính border = "0" và frameborder = "0" vào tag <frameset>

Trong trình duyệt bạn không muốn thay đổi kích thước của frame, bạn thêm thuộc tính NoResize vào trong tag <frame>

More about →

HTML nâng cao : Multimedia - Nếu bạn có loa, hãy vặn to lên...

Người đăng: chisenhungsuutam

Các bạn thân mến, một trong những yếu tố không thể thiếu để làm trang web của bạn sinh động hơn và hoàn hảo hơn đó là âm thanh và hình ảnh động. Hiện nay các trình duyệt web có thể nhận dạng được rất nhiều loại âm thanh và hình ảnh khác nhau. Nhưng có một vấn đề là như bạn đã biết, kích thước của các file media rất lớn. một file âm thanh chất lượng tốt có thời gian 10 giây thì kích thước của nó cỡ 200K và để tải xuống phải mất ít nhất là một phút. Phải ngồi chờ đến một phút trên máy chỉ để cố gắng được nghe nhạc thì quả là không thể chấp nhận được, hơn nữa sau khi tải xuống bài hát không hay thì lại càng bực mình hơn. Vì lý do như vậy chúng tôi khuyên các bạn nên lựa chọn các kiểu file thích hợp, có kích thước càng nhỏ càng tốt. Ví dụ như các file âm thanh midi (*.mid) hay file ra (*.ra) mà hiện nay được sử dụng chủ yếu trên mạng, và các file video avi (*.avi)...
Trong bài học này các bạn sẽ học cách gọi một file âm thanh và một hoạt cảnh video vào trang web của các bạn.
• Ðưa âm thanh vào trang web của bạn
• Xem Video trên trang web

Sound.

Ðể sử dụng một file nhạc làm âm thanh nền ta dùng tag <bgsound src="sound.ext" Loop="">. Tag này không có tag kết thúc. Thuộc tính src chỉ ra đường dẫn đến file âm thanh sound.ext trên server ; Còn thuộc tính Loop cho phép lặp lại nhiều lần nếu muốn, giá trị của nó là một số nguyên, và nếu bằng -1 thì sẽ lặp vô hạn. Tag này được đặt giữa hai tag <head> và </head>

Ngay sau khi được truy cập, trang web của bạn sẽ ngay lập tức "chơi" file sound.ext.

Bây giờ ta sẽ tạo một liên kết để có thể chơi nhạc. Giả sử khi ta click lên một hình ảnh hay một dòng chữ nào đó thì quá trình chơi nhạc mới bắt đầu. Ta sẽ sử dụng tag sau : <a href src="sound.ext"> text để liên kết </a>. Ví dụ bạn hãy Click vào đây để bắt đầu nghe nhạc.

Bạn cũng có thể thay phần text liên kết bằng một file ảnh nào đó nhờ chèn tag <img src=""> vào giữa hai tag <a>và </a>. Khi click vào ảnh thì sẽ bắt đầu chơi nhạc.

Video.

Tương tự, ta cũng dùng tag <a href src="video.ext"> liên kết </a>. Với video.ext là tên file hình ảnh trên server, ví dụ "http://www.windows.com/LocalName/flower.avi" chẳng hạn.

Với cách sử dụng tag trên, bạn phải nghe nhạc bằng trình nghe nhạc của hệ điều hành. Ðể có thể tích hợp và điều khiển quá trình nghe và xem bạn hãy sử dụng tag : <embed src="file.ext">. Với tag này, bạn có thể nghe nhạc bất cứ lúc nào, muốn lặp lại hoặc điều khiển đến đoạn nhạc nào tuỳ bạn. Thật là tiện phải không bạn.

Ðến đây bạn có thể làm cho trang web của bạn sinh động hơn rồi đấy. Chúc bạn thành công .

More about →

HTML nâng cao : Bảng

Người đăng: chisenhungsuutam

Việc trình bày trang Web theo dạng bảng sẽ làm cho trang Web của bạn chuyên nghiệp hơn. Với dạng bảng bạn có thể chia trang Web thành nhiều phần, bạn có thể áp dụng các kiến thức đã học để trang trí riêng cho từng phần...
Khi xây dựng bảng, bạn hãy nhớ quy tắc sau: bắt đầu từ ô cao nhất bên trái, tiếp theo xây dựng các ô của hàng đầu tiên, sau đó chuyển xuống hàng thứ hai, xây dựng các phần tử của hàng thứ 2...
--> --> --> --> ---> -->
|
----------------------------
|
--> --> --> --> ---> -->

Những tag cơ bản của bảng

Ðể tìm hiểu về các tag cơ bản của bảng, trước hết ta xét ví dụ sau.

<tr>

</tr>

<tr>

</tr>

</table>

Trong tag <table> ta thấy thuộc tính border có giá trị là 1, điều này nghĩa là vẽ 1 đường viền quanh bảng với độ dày là 1 điểm.

Mỗi hàng được xác định bởi <tr> và </tr> viết tắt của table row.

Mỗi ô được định nghĩa bởi <td> và </td> viết tắt của table data.

Ðể căn chỉnh lề trong mỗi ô, bạn thêm các thuộc tính sau vào tag <td>.

Chỉnh lề theo chiều ngang

<td align = left> sắp xếp về bên trái

<td align = right> sắp xếp về bên phải

<td align = center> sắp xếp vào giữa

Các hàng và cột

Bảng mà bạn tạo ở trên mới chỉ là bảng đơn giản với ba hàng và ba cột đều nhau.

Bạn hãy chú ý các bảng sau.

Bảng 1

bảng 2:

Bảng 3 :

Ðể tạo được những bảng như trên, chúng ta sử dụng các thuộc tính colspan và rowspan trong tag <td> ... </td>

Thuộc tính colspan=x có tác dụng mở rộng cột của bảng, ví dụ trong bảng 1 để mở rộng ô thứ 2 của hàng 1 ra rộng bằng hai cột bình thường ta đặt:

Thuộc tính rowspan có tác dụng mở rộng hàng của bảng, trong bảng 2 để mở rộng ô thứ 2 của hàng 2 ra rộng bằng 2 hàng bình thường ta đặt:

Ðiều khiển xuống hàng trong một ô.

Trong một ô, nếu muốn giữ dòng văn bản trên một dòng, tức là không cho nó xuống hàng thì thêm thuộc tính NOWRAP vào trong tag <TD> hoặc <TH>.

Thêm đầu đề vào bảng (caption)

Ngay sau tag <table>, bạn gõ vào tag <catpion> tựa đề của bảng, và kết thúc bằng tag đóng </caption>
<table >
<caption align="center" valign="top"><u>Tựa đề của bảng</u> </caption >
<tr><td width="50%" align="center">Cột 1 - dòng 1</td>
<td width="50%">Cột 2 - dòng 1</td>
</tr>
<tr><td width="50%" align="center">Cột 1 - dòng 2</td>
<td width="50%"><p align="center">Cột 2 - dòng 2</td>
</tr>
</table>
</body>
Trong tag <caption> bạn thấy có thuộc tính valign="top", nghĩa là tạo tựa đề ở trên đỉnh của bảng. Nếu valign="bottom" thì tựa để của bảng sẽ ở đáy bảng.

Thêm các thông số cho các đường viền tạo ra bảng

Muốn thay đổi thông số của các đường tạo bảng ta thêm các thuộc tính cho tag <table> như sau:

X: Chiều rộng đường viền ngoài bảng

Y: "Khoảng trắng" giữa dữ liệu bên trong ô và vách ngăn của ô

Z: Ðộ rộng của những đường bên trong bảng để chia các ô

Ví dụ bảng sau có tag <table> như sau:

Khi border = 0 thì ta sẽ có một bảng không có bất kỳ một đường viền nào. Dùng bảng dạng này để sắp xếp văn bản theo các hàng thẳng đứng. Ðối với dữ liệu trong bảng bạn vẫn có thể áp dụng các tag đã học như ví dụ sau đây chia màn hình thành hai cột danh sách trong đó mỗi cột là một siêu liên kết

div align=center>
<h2>Các Website ở việt nam</h2>
<table border="0" cellpadding =2 cellspacing =20>
<tr>
<td align=left><a href ="http://www.vnn.vn"> Công ty VASC - VNN</a> </td>
<td ><a href ="http://www.tlnet.com.vn"> Mạng Phương nam</a></td>

</tr>
<tr>
<td><a href ="http://www.fpt.vn">Công ty FPT</a></td>
<td ><a href ="http://www.saigonnet.vn">Sài gòn net</a></td>

</tr>
<tr>
<td><a href ="http://www.netnam.vn"> Công ty Netna@m</a></td>
<td><a href ="http://www.vinaone.com.vn">Mạng của Bộ thương mại</a></td>

</tr>
</table>

</div>

Thêm màu sắc cho bảng

Ðể tô màu cho bảng, ta thêm thuộc tính bgcolor với giá trị màu tương ứng vào các tag của bảng. Tô màu nền cho toàn bảng

Tô màu nền cho 1 hàng

Tô màu nền cho 1 ô

Trong đó XXXXXX là các giá trị màu

Ví dụ

Khi chưa tô màu cả bảng

More about →

HTML nâng cao : Thêm một chút về siêu liên kết bằng hình ảnh

Người đăng: chisenhungsuutam

Trong các bài học trước, bạn đã học được cách tạo các siêu liên kết bằng hình ảnh. Bài này sẽ cung cấp cho bạn tạo ra nhiều siêu liên kết từ cùng một hình ảnh bằng cách chia hình ảnh đó thành các vùng, mỗi vùng liên kết tới một trang Web khác nhau. Trước hết mời bạn xem ví dụ sau :
- Với hình ảnh như sau :

Sau khi được khoanh vùng và tạo các siêu liên kết, bây giờ, ảnh trên sẽ được liên kết tới nhiều trang Web khác, bạn hãy thử click vào các tên tương ứng trên ảnh và xem kết quả.

Ðể tạo ra được một hình ảnh với nhiều liên kết, tới nhiều trang Web khác nhau, HTML cung câp cho chúng ta tag <map>, cách làm như sau :

1.Chuẩn bị một hình ảnh để tạo các siêu liên kết : Trong ví dụ trên, ảnh có tên là : lienket.jpg, khi đưa hình ảnh này vào trang Web, trong tag <img> bạn sử dụng thuộc tính usemap như sau :

trong đó map_name là phần mà bạn định nghĩa các vùng của ảnh để từ đó tạo các siêu liên kết.

2.Ðịnh nghĩa các vùng để tạo siêu liên kết : Ðể tạo các vùng ta sử dụng tag <map> như sau :

....

</map>

Trong đó tag <area> định nghĩa một vùng có hình là thuộc giá trị của thuộc tính shape = "", có toạ độ là giá trị của thuộc tính coords = "", trong ví dụ trên vùng tạo siêu liên kết là vùng hình chữ nhật (rect) có toạ độ góc trên bên trái là x1,y1 toạ độ góc dưới bên phải là x2,y2 và liên kết tới trang Web là giá trị của thuộc tính href = ""

Ðoạn mã HTML của ví dụ trên như sau :

</map>

More about →

HTML nâng cao : Thêm màu sắc cho trang Web của bạn

Người đăng: chisenhungsuutam

Từ khi học bài đầu tiên đến bây giờ, chắc nhiều khi bạn thắc mắc: "Tại sao trang Web của mình lại chỉ có hai màu đen và trắng, trong khi các trang Web mình nhìn thấy đều được trang trí rất đẹp". Xin bạn hãy yên tâm, bài này sẽ giúp bạn giải quyết thắc mắc đó.

a.Cơ bản về màu sắc

Trong một trình duyệt Web, bạn có thể sử dụng 256 màu để trang trí cho văn bản và nền. Mỗi màu được xác định bởi bộ ba Red-Green-Blue (RGB), các giá trị của R, G, B từ 0 đến 255 thể hiện cường độ của nó. Ví dụ khi cả ba có giá trị nhỏ nhất (R=0, G=0, B=0) thì sẽ cho ta màu đen và khi cả ba có giá trị lớn nhất (R=255, G=255, B=255) thì cho ta màu trắng. Bộ ba RGB với các giá trị khác nhau sẽ cho ta các màu khác nhau.
Trong HTML, khi muốn sử dụng một màu nào đó, thay vì dùng các giá trị của R, G, B ở hệ thập phân, bạn phải biểu diễn chúng ở dạng hệ 16.
Ví dụ:
Màu trắng ứng với R=255, G=255, B=255 được biểu diễn là FFFFFF.
Màu "4520FE" tức là R = 45 (Hệ 16)
G = 20 (Hệ 16)
B = FE (Hệ 16)
tương đương với R = 69 (Hệ 10)
G = 32 (Hệ 10)
B = 254 (Hệ 10)

Ví dụ về một số màu thông thường

b.Màu nền cố định

Ðể thêm màu cho trang Web của mình, bạn hãy thêm các thuộc tính sau vào trang tag <body>

bgcolor = #XXXXXX

text = #XXXXXX

link = #XXXXXX

vlink = #XXXXXX

Trong đó

bgcolor = Xác định màu sắc của nền

text = Xác định màu sắc của văn bản

link = Xác định màu sắc của siêu liên kết

vlink = Xác định màu sắc của siêu liên kết đã xem qua

còn XXXXXX là ký hiệu màu ở dạng thập lục phân (có dấu # ở trước)

Ví dụ:

Sẽ cho nền màu đen, chữ màu vàng, siêu liên kết màu xanh dương sáng, siêu liên kết đã xem màu đỏ.

Sau đây là một số màu cơ bản và ký hiệu tương ứng

Color	Hex Code	Color	Hex Code
`xx oo xx`	`FFCCCC`	`xx oo xx`	`3300FF`
`xx oo xx`	`33FF66`	`xx oo xx`	`AA0000`
`xx oo xx`	`663300`	`xx oo xx`	`9900FF`
`xx oo xx`	`000077`	`xx oo xx`	`FFFF00`
`xx oo xx`	`EEEEEE`	`xx oo xx`	`888888`
`xx oo xx`	`444444`	`xx oo xx`	`000000`

Color	Name	Color	Name
`xx oo xx`	`aqua`	`xx oo xx`	`black`
`xx oo xx`	`blue`	`xx oo xx`	`fuchsia`
`xx oo xx`	`gray`	`xx oo xx`	`green`
`xx oo xx`	`lime`	`xx oo xx`	`maroon`
`xx oo xx`	`navy`	`xx oo xx`	`olive`
`xx oo xx`	`purple`	`xx oo xx`	`red`
`xx oo xx`	`silver`	`xx oo xx`	`teal`
`xx oo xx`	`white`	`xx oo xx`	`yellow`

c.Trang trí nền bằng hình ảnh

Nếu bạn muốn màu nền của trang Web của bạn đẹp hơn, bạn có thể dùng một file ảnh nhỏ để trang trí cho nền. Khi đó, HTML sẽ tạo các bản sao liên tục của file ảnh để phủ hết nền của trang Web.

Ðể dùng hình ảnh làm nền cho trang Web, ta dùng thuộc tính background trong tag <body>

Trong đó filename là tên file ảnh mà bạn dùng làm nền.

More about →

HTML nâng cao : Trang trí cho văn bản

Người đăng: chisenhungsuutam

Qua các bài học trước bạn đã biết cách thêm màu sắc cho nền và văn bản thông qua việc thiết lập các thuộc tính cho tag <body>. Trong bài này bạn sẽ học cách thay đổi màu sắc, kích thước, font chữ của phần văn bản trong trang Web của bạn.

a.Cỡ font

Khi muốn thay đổi cỡ font thì dùng
<font size = X> ... </font>
Trong đó X là cỡ font có giá trị từ 1 (nhỏ nhất) đến 7 (lớn nhất)
Ví dụ:

Cỡ font 1

Cỡ font 2

Cỡ font 3

...

Cỡ font 7

Ngoài ra HTML còn cho chúng ta một cách khác để thực hiện việc thay đổi cỡ font, thay đổi tương đối
<font size = + X> ... </font>
<font size = - X> ... </font>
Trong đó +X, -X là độ dịch chuyển so với cỡ font hiện tại. Chúng thường được dùng cùng với tag
<basefont size = X>
X: Cỡ font muốn đặc mặc định
Chú ý: Tag <basefont> không có tag đóng lại, nó có tác dụng cho đến khi gặp một tag <basefont> khác.

b.Kiểu font

Ðể làm cho trang Web thêm sinh động, nhiều khi bạn muốn trình bày nó bằng nhiều kiểu font khác nhau, bạn hãy sử dụng thuộc tính face của tag <font> để thực hiện việc đổi font chữ.

trong đó fontname là tên của font chữ có trên máy tính của người đọc trang Web.

Muốn thêm màu sắc cho chữ, ta thêm thuộc tính color vào tag font

Ví dụ:

< font face = ".Vn3DH" color = "#EEBBBB">...</font>

c.Hiển thị chỉ số trên và chỉ số dưới

Khi cần phải trình bày chỉ số trên hay chỉ số dưới, như các công thức hoá học chẳng hạn chúng ta sử dụng các tag <sup> ... </sup> cho chỉ số trên và <sub> ... </sub> cho chỉ số dưới.

Ví dụ:

Ðể có NH4, ta phải viết

NH<sub>4</sub>

Ðể có x2 ta phải viết

x<sup>2</sup>

More about →

HTML nâng cao : Tạo các danh sách

Người đăng: chisenhungsuutam

Danh sách được dùng để trình bày thông tin thành một dạng dễ đọc hơn. Chẳng hạn để tạo ra các bảng chỉ mục, nội dung của một dãy các tài liệu hay các chương.
HTML có hai kiểu danh sách, danh sách có thứ tự (ordered) và danh sách không có thứ tự (unorder).

Danh sách không có thứ tự.

Danh sách không có thứ tự có các mục bắt đầu bằng các "butllet" hoặc các ký hiệu đánh dấu ở trước. Ðể tạo ra danh sách không có thứ tự ta dùng các tag sau:
<ul>
<li>Chỉ mục thứ nhất
...
<li>Chỉ mục cuối
</ul>
Ví dụ khi trong phần body của file HTML của bạn có đoạn như sau:
<h3>Các bộ môn trong khoa Công nghệ Thông tin trường Ðại học Bách khoa Hà nội</h3>
<ul>
<li>Bộ môn Khoa học máy tính
<li>Bộ môn Kỹ thuật máy tính
<li>Trung tâm máy tính
<li>Phòng thí nghiệm Liên mạng
</ul>
Thì trên trình duyệt danh sách được hiển thị như sau :

Danh sách có thứ tự

Danh sách có thứ tự là danh sách mà mỗi mục của danh sách được đánh số, thường bắt đầu từ "1". Ðể tạo ra danh sách có thứ tự ta dùng các tag sau:

<ol>

<li>Chỉ mục thứ nhất

...

<li>Chỉ mục cuối cùng

</ol>

Danh sách có thứ tự chỉ khác danh sách không có thứ tự ở chỗ thay tag <ul> bằng tag <ol>.

Ví dụ : Nếu trong phần body của file HTML có đoạn

<h3>Các bước chuẩn bị để học HTML</h3>

<ol>

<li>Chương trình soạn thảo văn bản trơn (như NotePad của Windows)

<li>Trình duyệt Web(như Internet Explorer hoặc Nescape Navigator)

<li>Bộ sách về HTML của tạp chí Internet Today

</ol>

Danh sách định nghĩa (definition lists)

Danh sách định nghĩa không có các chỉ mục đầu dòng. Sau khi kết thúc tag <dt>, nó tự động xuống dòng, viết thụt vào hệt như các định nghĩa trong sách giáo khoa vậy.

Ví dụ:

để có trang web trên, bạn phải đánh đoạn mã sau:

<h3>Ví dụ về danh sách định nghĩa</h3>

<dl>

<dt>Ðịnh nghĩa 1</dt>

<dd>giải thích định nghĩa 1.</dd>

<dt>Ðịnh nghĩa 2</dt>

<dd>giải thích định nghĩa 2</dd>

<dt>Ðịnh nghĩa 3</dt>

<dd>giải thích định nghĩa 3.</dd>

</dl>

Trong trang Web để tạo ra các mục thông tin có cấu trúc logic hơn bạn có thể lồng các danh sách với nhau.

Ví dụ về trộn danh sách

<ol>

<li> Chỉ mục 1

<ul>

<li> Chỉ mục con 1

<ol>

<li> Chỉ mục con 1

<li> Chỉ mục con 2

</ol>

<li> Chỉ mục con 2

</ul>

<li> Chỉ mục con

</ol>

Ta có danh sách như sau :

Thực hành

Ðưa danh sách vào trang Web của bạn

1. Mở một file HTML mới, trong phần body bạn tạo một danh sách bằng các tag HTML như sau :

<ul>

<li>Chương một

<ol>

<li>Giới thiệu chung

<li>Những kiến thức vỡ lòng về HTML

</ol>

<li>Chương hai

<ol>

<li>Các tag thông dụng

<ul>

<li>Tag định dạng kiều chữ

<li>Tag chèn ảnh

</ul>

<li>Các tag trang trí trang Web

</ol>

<li>Chương ba

<ul>

<li>Các trang Web mẫu

<li>Kết thúc

</ul>

2. Lưu công việc của bạn. Mở trên trình duyệt và so sánh với ví dụ mẫu

More about →

HTML căn bản : Thêm địa chỉ, liên kết E-mail vào trang Web của bạn

Người đăng: chisenhungsuutam

Bài học
Như bạn vẫn thường thấy trong các trang Web trên Internet, phần cuối mỗi trang thường có các thông tin về trang Web, chẳng hạn như:
 Tiêu đề hay chủ đề của trang hiện thời
 Ngày cập nhật gần đây nhất
 Bản quyền
 Tên và E-mail của tác giả của trang Web
...
Phần này gọi là footer của trang Web. Ðể thêm footer vào trang Web, HTML cung cấp cho chúng ta tag <address> và cách sử dụng như sau
<address>
...

...
</address>
Tất cả văn bản nằm trong tag <address> được in bằng kiểu chữ nghiêng, tuy nhiên bạn có thể thay đổi cách hiển thị của chúng bằng cách sử dụng các tag đã học.
11.2.Thực hành
1.Tạo một file HTML, sau khi thêm các phần thông tin cho trang Web, bạn thêm đoạn sau vào cuối phần body
<address>
<hr>
<p align = "center">
Chuyên mục Chân trời tri thức - Tạp chí Internet Today<br>
Copyright @ 2000 by VASC<br>
Ðịa chỉ : 99 Triệu Việt Vương - Hà nội<br>
E_mail : <a href="mailto:i-today@vasc.vnn.vn">i-today@vasc.vnn.vn<br></a>
Mọi ý kiến về bộ sách HTML xin gửi về: Trần Việt Hùng<br>
E_mail :<a href ="mailto:hung_nd@vol.vnn.vn>hung_nd@vol.vnn.vn</a>
</p>
</address>
2.Lưu công việc của bạn và so sánh với ví dụ mẫu:

More about →

HTML căn bản : Tạo các siêu liên kết bằng hình ảnh

Người đăng: chisenhungsuutam

Như bạn vẫn thường thấy trong các trang Web, các siêu liên kết không chỉ là các đoạn văn bản mà còn cả bằng hình ảnh nữa, điều này càng làm cho Web trở nên hấp dẫn. Phần này giới thiệu cho bạn cách tạo các siêu liên kết bằng hình ảnh:
Việc đầu tiên là bạn chọn 1 ảnh nằm cùng thư mục /folder với trang Web của bạn, giả sử đó là graph.jpg. Khi đó bạn sử dụng các Tag như sau
<a href = "file.htm"> <img src = "graph.jpg"></a>
Bạn lưu ý là tag <img..> nằm giữa tag <a href ...> và </a>
Khi một ảnh được dùng làm siêu liên kết, sẽ có một hộp màu có màu của các siêu liên kết bao quanh ảnh
Lưu ý: Việc đưa một hình ảnh lớn vào trong trang Web làm cho người đọc phải mất thời gian chờ tải vì vậy bạn nên sử dụng một số mẹo sau:
1. Ðể đề phòng người đọc tất chế độ hiển thị hình ảnh của trình duyệt, bạn nên thêm thuộc tính alt = "..." vào tag <img...> để người đọc dễ định hướng
2. Khi cần giới thiệu một hình ảnh lớn, bạn nên tạo một hình ảnh thu nhỏ của nó và đưa vào trang Web làm siêu liên kết tới ảnh lớn, như thế đỡ mất thời gian download trang Web của bạn, ví dụ bạn hãy Click chuột vào ảnh sau :

More about →

HTML căn bản : Liên kết tới các phần trong cùng một trang

Người đăng: chisenhungsuutam

HTML không những cho bạn tạo liên kết đến các trang Web khác nằm ở cùng máy tính với trang Web của bạn hoặc trên Internet, mà còn cho phép bạn liên kết đến các phần trong cùng một trang.
Ðể liên kết đến các phần của một trang trước hết bạn phải đặt tên cho phần cần liên kết tới. Thủ tục này được thực hiện bởi tag
<a name=""> </a>
Trong đó name là một tên do bạn đặt ra
Sau đó nếu bạn cần liên kết tới phần đã đặt tên bạn chỉ cần dùng
<a href = "#name"> Text to link </a>
Tương tự khi liên kết tới các tài liệu khác ta có thể dùng
<a href = "vol1.htm#name> Text </a>
<a href = "URL#name> Text </a>
Ví dụ :Click vào đây để về đầu trang

More about →

HTML căn bản : Liên kết đến các trang Web khác trên Internet

Người đăng: chisenhungsuutam

Ðể liên kết tới một trang Web khác trên Internet ta dùng tag sau:
<a href = "URL"> Text </a>
Trong đó URL (Uniform Resource Locator) cho biết địa chỉ mà bạn muốn liên kết tới.
Ví dụ về các URL

http://thuthuatlaptrinh4u.blogspot.com/

http://phim1.biz/

mailto:hieu_it92@yahoo.com

Thực hành

1.Tạo một file HTML và thêm đoạn sau vào trong phần body

<ul>

<li><a href = "http://www.hut.edu.vn">Trường Ðại học Bách khoa Hà nội</a>

<li><a href = "http://www.vnn.vn/i-today">Tạp chí Công nghệ Thông tin Internet Today</a>

</ul>

2. Lưu công việc của bạn, sau đó mở trình duyệt và so sánh với ví dụ. Bạn có thể kiêm tra các siêu liên kết bằng cách di chuột vào vùng văn bản siêu liên kết và xem thông báo ở thanh trạng thái của trình duyệt, thanh trạng thái sẽ hiển thị URL mà bạn sẽ liên kết tới.

More about →

HTML căn bản : Liên kết tới một file cục bộ.

Người đăng: chisenhungsuutam

Bây giờ bạn bắt đầu tạo một liên kết từ trang Web của bạn đến một trang Web thứ hai. Liên kết này được gọi là cục bộ bởi vì trang Web thứ hai cũng cùng nằm trên một máy với trang Web đầu.
Ðể đơn giản trước hết bạn tạo một file HTML thứ hai và đặt nó cùng folder với trang mà bạn đã tạo ở các bài trước.
Muốn tạo một siêu liên kết ta dùng
<a href = "filename.htm"> Văn bản đại diện cho mối liên kết </a>
Bất cứ đoạn văn bản nào nằm giữa
<a href = " " > và </a> đều là một siêu văn bản liên kết tới các trang Web khác và nó được gạch dưới.

Thực hành

1.Tạo một trang Web khác giả sử là vidu.htm và lưu vào cùng Folder với trang Web của bạn.

2.Trong trang Web mà bạn cần tạo siêu liên kết tới bạn thêm tag tạo siêu liên kết như sau :

3.Lưu lại công việc của bạn và mở trên trình duyệt. Khi đó bạn sẽ thấy đoạn văn bản Xem ví dụ được tạo thành siêu liên kết, nó được đổi thành màu xanh và khi bạn đưa chuột vào vùng văn bản này thì chuột bị đổi thành hình bàn tay và nếu bạn bấm chuột thì sẽ được đưa tới trang có tên là vidu.htm

Tới đây chắc bạn lại có thắc mắc, muốn liên kết tới thư mục khác hoặc thư mục cao hơn thì làm thế nào? Ðể thực hiện điều đó mời bạn xem tiếp phần sau đây.

Giả sử cấu trúc folder của bạn có dạng

Và bạn muốn liên kết tới I-today.gif, khi đó trang tag <a href ..> bạn sửa lại như sau
<a href = "Pictures/i-today.gif"> ... </a>
Còn trong trường hợp file bạn cần tạo liên kết có cấu trúc folder cao hơn

Ví dụ:
|--Pictures1
|--My Web
|       |--Pictures
|       |         |--i-today.gif
|       |--Trang web của bạn ở vị trí này

và bạn cần liên kết tới ảnh ở trong Folder Pictures1 có cấp cao hơn thư mục chứa trang Web của bạn, khi đó bạn cần sửa lại tag như sau:

<a href = "../pictures1/.."> </a>

mỗi lần xuất hiện "../" báo cáo cho trình duyệt tìm kiếm ở một folder có cấp cao hơn.

More about →

HTML căn bản : Canh chỉnh lề

Người đăng: chisenhungsuutam

Canh chỉnh lề

Lý Thuyết

Sắp xếp văn bản vào giữa trang
Trong các bài học trước, bạn thấy rằng trang Web của bạn chỉ được căn lề bên trái, và bạn muốn trình bày trang Web của mình đẹp hơn bằng cách sắp xếp các đoạn văn bản vào giữa trang, HTML có nhiều cách giúp bạn thực hiện điều này.
Cách thứ nhất: Bạn đặt đoạn văn bản cần sắp xếp vào giữa trang nằm giữa tag <center> và </center>
Ví dụ:
<center> Xin chuc mung ban </center>

sẽ cho kết quả như sau:

Kết quả :

Cách thứ 2: Ðặt thuộc tính align của tag <p> có giá trị là center

Ví dụ:

Sắp xếp tương đối giữa văn bản và hình ảnh

Khi muốn có văn bản phủ xung quanh hình ảnh, bạn chỉ việc thêm thuộc tính align vào tag <img>

Ví dụ:

sẽ cho kết quả:

so với không có thuộc tính align:

Khi văn bản hoặc những mục khác được sắp cùng với hình ảnh khá ngắn và bạn muốn đẩy văn bản kế tiếp xuống bên dưới hình ảnh, bạn hãy sử dụng tag <br> với thuộc tính clear:

tag <br> với thuộc tính clear sẽ xoá đi tất cả cách sắp xếp có trong tag <img>

Ví dụ:

Khi chưa có tag <br clear = >

Khi cần trình bày văn bản phủ quanh hình ảnh với một khoảng cách nhất định ta dùng thêm các thuộc tính vspace và hspace trong tag <img>. Trong đó vspace là khoảng cách giữa bên trên hay bên dưới của hình ảnh và văn bản còn space là khoảng cách giữa bên phải hay bên trái của hình ảnh và văn bản.

Ví dụ:

So với khi không có các thuộc tính vspace và hspace :

Chỉnh lề và sắp xếp văn bản

Ngoài các cách sắp xếp văn bản mà bạn đã biết, HTML còn cho chúng ta thêm một tag căn chỉnh văn bản nữa, đó là <div> ... </div>. Vùng văn bản chịu ảnh hưởng của tag này dựa vào thuộc tính align.

More about →

[ Tài liệu ] : Tổng hợp tài liệu HTML, CSS, Javascript

HTML Bài tập 5: Tạo file html như các hình sau

HTML Bài tập 4 : Tạo file html như các hình sau

HTML Bài tập 3 : Tạo file html như các hình sau

HTML Bài tập 2 : Tạo file html như các hình sau

HTML Bài tập 1 : Tạo file html như các hình sau

HTML nâng cao : Frame

HTML nâng cao : Multimedia - Nếu bạn có loa, hãy vặn to lên...

HTML nâng cao : Bảng

HTML nâng cao : Thêm một chút về siêu liên kết bằng hình ảnh

HTML nâng cao : Thêm màu sắc cho trang Web của bạn

HTML nâng cao : Trang trí cho văn bản

HTML nâng cao : Tạo các danh sách

HTML căn bản : Thêm địa chỉ, liên kết E-mail vào trang Web của bạn

HTML căn bản : Tạo các siêu liên kết bằng hình ảnh

HTML căn bản : Liên kết tới các phần trong cùng một trang

HTML căn bản : Liên kết đến các trang Web khác trên Internet

HTML căn bản : Liên kết tới một file cục bộ.

HTML căn bản : Canh chỉnh lề

shares

Like

menu

Category

Popular Posts

About Me

Labels

Recent Posts

Categories

Subscribe

Recent Comments

Popular Posts

Connect With Us

Popular Posts