[You must be registered and logged in to see this image.]
HTML là ngôn ngữ đánh dấu siêu văn bản với các mã chuẩn cho việc thiết kế trang web. HTML là nền tảng của WWW được hiển thị bởi các trình duyệt web (browser). Mục đích cơ bản của HTML là tạo ra các ấn phẩm điện tử hấp dẫn với các thành phần hyperlink và multimedia.
1. Khái niệm về tag (thẻ):
Tag là thành phần cơ bản nhất trong HTML. Tag báo cho trình duyệt biết phải thể hiện cái gì hoặc phải làm gì với đoạn văn bản nào đó. HTML có rất nhiều tag chuẩn và các tag mở rộng của các trình duyệt khác nhau.
Tag thường chia ra làm 2 loại:
+ Tag chứa: là loại tag gồm hai thành phần mở và đóng.
Ví dụ: <I> ... </I>, <I> là tag mở còn </I> là tag đóng.
Đoạn văn bản bị tác động được đặt giữa tag mở và đóng.
+ Tag rỗng: là loại tag chỉ có thành phần mở.
Ví dụ: <br>
Bên trong thẻ ngoài tên thẻ còn có các thuộc tính của thẻ và các sự kiện tác động lên thẻ.
Ví dụ: <IMG src="logo.gif" onclick="alert('Cam on ban da vieng tham'''>.
2. Tạo trang HTML mẫu:
Để tạo một trang web ta sử dụng trình soạn thảo Notepad:
Vào Start\Programs\Accessories\Notepad
Hoặc vào Start vào Run gõ Notepad rồi OK
Sau đó bạn nhập nội dung trang web và kết thúc bạn lưu trang này lại với đuôi có phần mở rộng %.htm bằng cách:
Chọn File\Save as hộp thoại save as hiện ra chọn thư mục Save as type là All File. Sau đó nhập tên trang vào ô File name và nhớ là phải đánh ".htm" sau khi nhập xong tên file bạn muốn lưu OK.
Ví dụ: Index.htm, Trangchu.htm ...
Để mở trang web bạn đã tạo, sử dụng trình duyệt Internet Explorer rồi chọn file cần mở hoặc ấn tổ hợp phím Ctrl+O.
Một tài liệu HTML được chia làm hai phần là phần đầu và phần thân.
+ Phần đầu được dùng để chỉ ra, tiêu đề và một số thông tin khác được dùng cho máy tìm kiếm. Phần đầu được nằm giữa thẻ chứa <HEAD>:
<HEAD>
...
</HEAD>
+ Phần thân chứa các nội dung sẽ được hiển thị trên trang web, được đặt giữa thẻ chứa <BODY>:
<BODY>
...
</BODY>
Để tất cả các trình duyệt web đều hiểu điều đó là tài liệu HTML, thì cần phải bao tất cả bằng thẻ chứa <HTML>"
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
* Trang HTML mẫu:
<HTML>
<HEAD>
<TITLE>Thiet ke Web voi HTML</TITLE>
</HEAD>
<BODY>
Nhập nội dung ở đây
</BODY>
</HTML>
3. Hiển thị đoạn văn trong trang Web:
Ví dụ một đoạn mã lệnh sau:
<html>
<body>
<p>Doan van thu nhat.</P>
<p>Doan van thu hai.</P>
<p>Doan van thu ba.</p>
<p>Day la vi du trinh bay doan van trong trang Web.</p>
</body>
</html>
Minh họa trang Web khi hiển thị.
4. Minh họa trang Web thông thường đơn giản:
<html>
<body>
Minh hoa mot trang Web hien thi van ban thong thuong và đon gian su dung cau lenh HTML
</body>
</html>
Hình minh họa:
5. Đoạn văn trong Website:
<html>
<body>
<p>
Bo mon CNTT cua truong duoc danh gia la mot trong nhung trung tam tin hoc dau nganh trong ca nuoc.
</p>
<p>
Cong tac gioi thieu viec lam cua nha truong cung duoc chu trong va cong khai voi tat ca sinh vien trong truong.
</p>
</body>
</html>
Hình minh họa:
8. Sử dụng Heading:
<html>
<body>
<h1>Su dung heading 1</h1>
<h2>Su dung heading 2</h2>
<h3>Su dung heading 3</h3>
<h4>Su dung heading 4</h4>
<h5>Su dung heading 5</h5>
<h6>Su dung heading 6</h6>
</body>
</html>
Hình minh họa:
9. Căn lề giữa:
Hình minh họa:
<html>
<body>
<h1 align="center">Tong ket hôi nghi</h1>
<p>Qua qua trinh hoat dong duoc 10 nam hom nay chung ta cung ngoi lai de ban bac, nhin lai nhung chang duong da qua va dat muc tieu cho nam toi.
</p>
</body>
</html>
Hình minh họa:
10. Chèn đường thẳng vào trang web:
<html>
<body>
<p>Vi du minh hoa chen duong thang.</p>
<hr>
<p>Vi du minh hoa chen duong thang.</p>
<hr>
<p>Vi du minh hoa chen duong thang.</p>
<hr>
<p>Vi du minh hoa chen duong thang.</p>
</body>
</html>
Hình minh họa:
11. Chú thích trong trang Web:
<html>
<body>
<!--Doan van nay se khong duoc hien thi trong trang web-->
<p>Vi du minh hoa ghi chu thich trong trang Web</p>
</body>
</html>
Hình minh họa:
12. Thêm màu nền cho trang Web:
<html>
<body bgcolor="Green">
<h2>Minh hoa thay doi hinh nen trang Web</h2>
</body>
</html>
Hình minh họa:
12. Chèn hình nền vào trang Web:
<html>
<body background="background.jpg">
<h3>Dung hinh anh lam nen cho trang Web</h3>
<p>Ban can phai co mot hinh anh</p>
<p>Hinh anh duoc chon lam nen o cung thu muc voi trang Web</p>
</body>
</html>
Hình minh họa:
14. Các kiểu chữ hiển thị trong trang Web:
<html>
<body>
<b>Kieu chu bold</b>
<br>
<strong>Kieu chu strong</strong>
<br>
<big>Kieu chu big</big>
<br>
<em>Kieu chu emphasized</em>
<br>
<i>Kieu chu italic </i>
<br>
<small>Kieu chu small</small>
<br>
Kieu chu contains
<sub>Kieu chi so duoi subscript</sub>
<br>
Kieu chu contains
<sup>Kieu chi so tren superscript</sup>
</body>
</html>
Hình minh họa:
15. Định dạng chữ:
<html>
<body>
<pre>
Doan van trinh bay trong trang Web.
Se giu nguyen vi tri khi hien thi va khoang cach cac dong
</pre>
<p>
Doan van sau day se hien thi nhu mot doan ma lap trinh:
</p>
<pre>
for i=1 to n do
Begin
Writeln('Day la gia tri thu:',A[i,j]);
Readln;
End;
</pre>
</body>
</html>
HTML là ngôn ngữ đánh dấu siêu văn bản với các mã chuẩn cho việc thiết kế trang web. HTML là nền tảng của WWW được hiển thị bởi các trình duyệt web (browser). Mục đích cơ bản của HTML là tạo ra các ấn phẩm điện tử hấp dẫn với các thành phần hyperlink và multimedia.
1. Khái niệm về tag (thẻ):
Tag là thành phần cơ bản nhất trong HTML. Tag báo cho trình duyệt biết phải thể hiện cái gì hoặc phải làm gì với đoạn văn bản nào đó. HTML có rất nhiều tag chuẩn và các tag mở rộng của các trình duyệt khác nhau.
Tag thường chia ra làm 2 loại:
+ Tag chứa: là loại tag gồm hai thành phần mở và đóng.
Ví dụ: <I> ... </I>, <I> là tag mở còn </I> là tag đóng.
Đoạn văn bản bị tác động được đặt giữa tag mở và đóng.
+ Tag rỗng: là loại tag chỉ có thành phần mở.
Ví dụ: <br>
Bên trong thẻ ngoài tên thẻ còn có các thuộc tính của thẻ và các sự kiện tác động lên thẻ.
Ví dụ: <IMG src="logo.gif" onclick="alert('Cam on ban da vieng tham'''>.
2. Tạo trang HTML mẫu:
Để tạo một trang web ta sử dụng trình soạn thảo Notepad:
Vào Start\Programs\Accessories\Notepad
Hoặc vào Start vào Run gõ Notepad rồi OK
Sau đó bạn nhập nội dung trang web và kết thúc bạn lưu trang này lại với đuôi có phần mở rộng %.htm bằng cách:
Chọn File\Save as hộp thoại save as hiện ra chọn thư mục Save as type là All File. Sau đó nhập tên trang vào ô File name và nhớ là phải đánh ".htm" sau khi nhập xong tên file bạn muốn lưu OK.
Ví dụ: Index.htm, Trangchu.htm ...
Để mở trang web bạn đã tạo, sử dụng trình duyệt Internet Explorer rồi chọn file cần mở hoặc ấn tổ hợp phím Ctrl+O.
Một tài liệu HTML được chia làm hai phần là phần đầu và phần thân.
+ Phần đầu được dùng để chỉ ra, tiêu đề và một số thông tin khác được dùng cho máy tìm kiếm. Phần đầu được nằm giữa thẻ chứa <HEAD>:
<HEAD>
...
</HEAD>
+ Phần thân chứa các nội dung sẽ được hiển thị trên trang web, được đặt giữa thẻ chứa <BODY>:
<BODY>
...
</BODY>
Để tất cả các trình duyệt web đều hiểu điều đó là tài liệu HTML, thì cần phải bao tất cả bằng thẻ chứa <HTML>"
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>
* Trang HTML mẫu:
<HTML>
<HEAD>
<TITLE>Thiet ke Web voi HTML</TITLE>
</HEAD>
<BODY>
Nhập nội dung ở đây
</BODY>
</HTML>
3. Hiển thị đoạn văn trong trang Web:
Ví dụ một đoạn mã lệnh sau:
<html>
<body>
<p>Doan van thu nhat.</P>
<p>Doan van thu hai.</P>
<p>Doan van thu ba.</p>
<p>Day la vi du trinh bay doan van trong trang Web.</p>
</body>
</html>
Minh họa trang Web khi hiển thị.
4. Minh họa trang Web thông thường đơn giản:
<html>
<body>
Minh hoa mot trang Web hien thi van ban thong thuong và đon gian su dung cau lenh HTML
</body>
</html>
Hình minh họa:
5. Đoạn văn trong Website:
<html>
<body>
<p>
Bo mon CNTT cua truong duoc danh gia la mot trong nhung trung tam tin hoc dau nganh trong ca nuoc.
</p>
<p>
Cong tac gioi thieu viec lam cua nha truong cung duoc chu trong va cong khai voi tat ca sinh vien trong truong.
</p>
</body>
</html>
Hình minh họa:
8. Sử dụng Heading:
<html>
<body>
<h1>Su dung heading 1</h1>
<h2>Su dung heading 2</h2>
<h3>Su dung heading 3</h3>
<h4>Su dung heading 4</h4>
<h5>Su dung heading 5</h5>
<h6>Su dung heading 6</h6>
</body>
</html>
Hình minh họa:
9. Căn lề giữa:
Hình minh họa:
<html>
<body>
<h1 align="center">Tong ket hôi nghi</h1>
<p>Qua qua trinh hoat dong duoc 10 nam hom nay chung ta cung ngoi lai de ban bac, nhin lai nhung chang duong da qua va dat muc tieu cho nam toi.
</p>
</body>
</html>
Hình minh họa:
10. Chèn đường thẳng vào trang web:
<html>
<body>
<p>Vi du minh hoa chen duong thang.</p>
<hr>
<p>Vi du minh hoa chen duong thang.</p>
<hr>
<p>Vi du minh hoa chen duong thang.</p>
<hr>
<p>Vi du minh hoa chen duong thang.</p>
</body>
</html>
Hình minh họa:
11. Chú thích trong trang Web:
<html>
<body>
<!--Doan van nay se khong duoc hien thi trong trang web-->
<p>Vi du minh hoa ghi chu thich trong trang Web</p>
</body>
</html>
Hình minh họa:
12. Thêm màu nền cho trang Web:
<html>
<body bgcolor="Green">
<h2>Minh hoa thay doi hinh nen trang Web</h2>
</body>
</html>
Hình minh họa:
12. Chèn hình nền vào trang Web:
<html>
<body background="background.jpg">
<h3>Dung hinh anh lam nen cho trang Web</h3>
<p>Ban can phai co mot hinh anh</p>
<p>Hinh anh duoc chon lam nen o cung thu muc voi trang Web</p>
</body>
</html>
Hình minh họa:
14. Các kiểu chữ hiển thị trong trang Web:
<html>
<body>
<b>Kieu chu bold</b>
<br>
<strong>Kieu chu strong</strong>
<br>
<big>Kieu chu big</big>
<br>
<em>Kieu chu emphasized</em>
<br>
<i>Kieu chu italic </i>
<br>
<small>Kieu chu small</small>
<br>
Kieu chu contains
<sub>Kieu chi so duoi subscript</sub>
<br>
Kieu chu contains
<sup>Kieu chi so tren superscript</sup>
</body>
</html>
Hình minh họa:
15. Định dạng chữ:
<html>
<body>
<pre>
Doan van trinh bay trong trang Web.
Se giu nguyen vi tri khi hien thi va khoang cach cac dong
</pre>
<p>
Doan van sau day se hien thi nhu mot doan ma lap trinh:
</p>
<pre>
for i=1 to n do
Begin
Writeln('Day la gia tri thu:',A[i,j]);
Readln;
End;
</pre>
</body>
</html>