Cấp bậc tác giả:

TRAINING

Kiến thức HTML

Được viết bởi QuangIT ngày 23/09/2012 lúc 05:43 PM
Mục tiêu bài học Kết thúc chương này, bạn có thể: - Hiểu được cơ bản về HTML - Nắm vững kiến thức cơ bản cú pháp HTML
  • 0
  • 11784

Kiến thức HTML

Mục tiêu bài học

Kết thúc chương này, bạn có thể:

- Hiểu được cơ bản về HTML

- Nắm vững kiến thức cơ bản cú pháp HTML


Các bài giảng xuyên suốt:

I.       GIỚI THIỆU HTML

1. Ngôn ngữ đánh dấu siêu văn bản(HTML) được sử dụng để tạo các tài liệu có thể truy cập trên web. Tài liệu HTML được tạo ra bằng cách sử dụng các thẻ và các phần tử của HTML. File được lưu trên Web server với đuôi .htm hoặc .html

<HTML>

<HEAD>

<TITLE>Tittle of page</TITLE>

</HEAD>

<BODY>

<H3>Content of page</H3>

</BODY>

</HTML>


Thẻ HTML bao gồm:

   <ELEMENT ATTRIBUTE = value>

Trong đó:

ELEMENT: Nhận dạng thẻ.

ATTRIBUTE: Mô tả thẻ.

Value: Giá trị được thiết lập cho thuộc tính.


Ví dụ: <BODY BGCOLOR=blue>


II. CÁC THẺ CƠ BẢN TRONG HTML
1. Đoạn:

Thẻ <P> để trình bày một đoạn.


2. Các thẻ ngắn:

Phần tử <BR> được sử dụng để ngắt dòng trong tài liệu HTML. Thẻ <BR> bổ sung một ký tự xuống dòng tại vị trí của thẻ.

3. Chọn canh lề:

Sử dụng các thuộc tính Left, Center, Right, Justify

4. Thẻ <META>:

Phần tử META sử dụng sự kết hợp thuộc tính và giá trị.

Ví dụ: Để chỉ DotNet Group là tác giả, người ta sử dụng phần tử META như sau: <META name="Author" content=" DotNet Group ">

Thuộc tính http-equiv có thể được sử dụng để thay thế thuộc tính name. Máy chủ HTTP sử dụng thuộc tính này để tạo ra một đầu đáp ứng HTTP(HTTP response header)

Ví dụ: <META http-equiv="Expires" content="Mon, 15 Sep 2003 14:25:27 GMT"> sẽ sinh ra một đầu đáp ứng HTTP như sau:

Expires: Mon, 15 Sep 2003 14:25:27 GMT

5. Headings(Tiêu đề)

Phần tử này được sử dụng để cung cấp tiêu đề cho phần nội dung hiển thị trên trang web. Tất cả những phần tử tiêu đề phải có thẻ kết thúc. Nó bắt đầu bằng thẻ <H1> và kết thúc bằng </H1>.

6. Thẻ <ADDRESS>

Phần tử 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 thường hiển thị ở cuối trang

7. Thẻ <BLOCKQUOTE>

Phần tử 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.

8. Thẻ khối <SPAN>, <DIV>

Phần tử DIV và SPAN được sử dụng để nhóm nội dung lại với nhau. Phần tử DIV dùng để chia tài liệu thành các thành phần có liên quan với nhau. Phần tử SPAN dùng để chỉ một khảng các ký tự.

9. Các thẻ định dạng ký tự:

Các thẻ định dạng ký tự: <B>…</B>, <TT>…</TT>, <SUP>…</SUP, <SUB>…</SUB>

10. Danh sách:

- Danh sách không thứ tự: <UL>…</UL>

- Danh sách có thứ tự: <OL>…</OL>

- Danh sách định nghĩa: Danh sách định nghĩa nằm trong cặp thẻ <DL>…</DL>. Thẻ <DT> được dùng để chỉ ra điều khoản còn thẻ <DD> được dùng để chỉ ra định nghĩa cho điều khoản đó.

11. Ngoài ra còn có rất nhiều các thẻ khác:

Kẻ đường ngang <HR>, thẻ chèn ảnh <IMG SRC=“URL”>, thẻ liên kết <HREF >, chèn âm thanh <BGSOUND SRC=“path\soundfilename” loop=“positive number/infinite”>, chèn Video <EMBED SRC=“path\videofilename” WIDTH=“width in pixels or percentage” HEIGHT=“height in pixels or percentage” > …


III. SỬ DỤNG SIÊU LIÊN KẾT TRONG TÀI LIỆU HTML


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(đồ họa, â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.


- Liên kết trong là liên kết kết nối đến các phần 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 2 thành phần:

1. Địa chỉ đầy đủ hoặc URL của file được kết nối.

2. Điểm nóng cung cấp cho liên kết. Điểm nóng này có thể là một dòng văn bản, thamaj chí là một ảnh.


Có 2 dạng URL:

- 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 tùy chọn và tên file.

- 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 đó.


Thẻ sử dụng liên kết:

Cú pháp của HREF là:

<A HREF=protocol://host.domain:port/path/filename>HyperText</A>


<HTML>

<HEAD>

<TITLE>Using links</TITLE>

</HEAD>

<BODY>

<BR><BR>

<P>This page is all about creating links to documents.

<A HREF=Doc2.html>Click here to view document 2</A>

</BODY>

</HTML>


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

Cú pháp thẻ neo:

<A NAME=“marker”>Topic name</A>

Cú pháp liên kết:

<A NAME=“#marker”>Topic name</A>


Ví dụ:


<HTML>

<HEAD>

<TITLE>Using links</TITLE>

</HEAD>

<BODY>

< A HREF=#Internet>Internet</A>

<BR>

< A HREF=Internet>Internet</A>

<BR>

<P>The Internet is a networks. That is, computer networks are linked to other networks, spanning countries and today the globe. The TCP/IP tranfer protocol provides the bindings that connect all these computers the world over.

</P>

</BODY>

</HTML>



IV. CÁCH SỬ DỤNG TABLE

Cách tạo bảng:

Thẻ dùng để tạo bảng:

Thẻ <TABLE> được dùng để tạo bảng trong tài liệu HTML. Các thuộc tính của phần tử <TABLE> được áp dụng cho bảng, nhưng không cho dữ liệu hiển thị trên bảng. Đơn vị cơ bản của bảng là một ô và được định nghĩa bằng thẻ <TD>.


<TABLE>

<TD>Data Cell 1</TD>

<TD>Data Cell 2</TD>

<TD>Data Cell 3</TD>

</TABLE>


1. Chèn hàng và cột:

Những thẻ <TD> và <TR> có thể được dùng để chèn theo thứ tự các hàng và các cột vào trong bảng


<TABLE BORDER=2>

<TR>

<TD>Data Cell 1</TD>

<TD>Data Cell 2</TD>

<TD>Data Cell 3</TD>

<TR> 

<TD>NEW RoW</TD

<TABLE>


2. Trộn ô: Kết hợp các cột hay dòng


Thuộc tính COLSPAN và ROWSPAN được sử dụng để tạo ra những ô mà chúng có thể kéo rộng ra cho hơn một dòng hay cột. Thuộc tính COLSPAN được sử dụng với thẻ <TH>, trong khi thuộc tính ROWSPAN được sử dụng với thẻ <TD>.


<TH ALIGN=CENTER COLSPAN=3>Quarter 1</TH>

<TD ROWSPAN=3>Quarter 1</TD>


V. CÁCH SỬ DỤNG LAYER


Lớp là một phần tử có thể được thêm vào một trang web. Chúng ta có thể xác định chính xác vị trí của một lớp trong trang web


Lớp có tập thuộc tính riêng của nó có thể được truy xuất và lập trình


Thẻ cú pháp: <LAYER></LAYER>

<HTML>

<HEAD>

<TITLE>Tittle of page</TITLE>

</HEAD>

<BODY BGCOLOR=lavender >

<LAYER id=layer1 bgcolor=aqua>

<DIV><font color=red>

<H1>LAYER 1</H1>

<P>This is a paragraph element within division 1</P>

<P>Content for layer 1.</P>

</DIV>

<P>Outside the division </P>

<DIV><font color=blue>

<H2>DIVISION 2</H2>

<P>This is a paragraph element within division 2</P>

<P>Content for layer 1.</P>

</DIV>

</LAYER>

</BODY>

</HTML>


VI. SỬ DỤNG BIỂU MẪU VÀ CÁC PHẦN TỬ NHẬP THÔNG THƯỜNG

Giới thiệu biểu mẫu:

Form HTML là một phần của tài liệu, nó chứa các phần tử đặc biệt gọi là các điều khiển. Các điều khiển được sử dụng để nhập thông tin tức người dùng và cung cấp một số tương tác. Dữ liệu do người dùng nhập vào có thể được xác nhập hợp lệ nhờ các kịch bản phía máy khách(client-side scripts) và được chuyển đến máy chủ để xử lý thêm.


Phần tử FORM


Phần tử <FORM> được sử dụng để tạo một vùng trên trang như một biểu mẫu.



<FORM action=“http://mysite.com/processform” METHOD=“post”>

… from contents…

</FORM>


Các phần tử nhập của HTML: Nút bấm, văn bản, Checkbox, Radio, Submit, Ảnh, Reset, TextArea, Select


VII. SỬ DỤNG KHUNG

Khung chia một cửa sổ trình duyệt thành nhiều vùng riêng biệt, mà mỗi vùng có thể hiển thị một trang riêng biệt có thể cuốn được. Mối khung là một cửa sổ trong cửa sổ chính. Ví dụ, ta có thể sử dụng ba khung trong trang web, một là biểu ngữ(Banner), một làm menu điều hướng và một để hiển thị dữ liệu. Mỗi khung có thể được tạo, thay đổi và cuốn độc lập nhau.


Cú pháp:

<FRAMESET></FRAMESET>


Frame 1

Frame 2

Frame 3


Bài tập: Thiết kế trang Home tương tự như site này

http://ndtfit.brinkster.net/

Chỉ HTML(Không CSS)

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML