Cơ bản HTML
Trong thực tế trang Web thường có 2 loại là web tĩnh và web động. Trang web tĩnh là trang HTML không kết nối cơ sở dữ liệu(csdl) , ngược lại trang web động là trang có kết nối csdl như trang PHP, ASP, JSP,…. Nhưng mà nó chung 1 trang web dù tĩnh hay động nếu bạn muốn biểu diễn dữ liệu thì bạn cần phải dùng đến các thẻ HTLM trong đó . Như vậy các thẻ HTML rất quan trọng trong một trang web của bạn .
Hôm nay mình sẽ giới thiệu cho các bạn một cấu trúc HTLM cơ bản và các thẻ cần thiết để các bạn tạo cho mình một trang web đơn giản bằng HTML.
• Cấu trúc một trang HTML cơ bản
Như đã nói trên HTML để biểu diễn dữ liệu trang web và được trình bày trên các Web Browser, và một trang HTML được lưu với phần mở rộng là .htm hay .html .
Cấu trúc trang web HTML được bắt đầu bởi thẻ mở <html> và kết thúc bằng thẻ đóng </html> . Bạn muốn làm chủ được HTML thì bạn cần phải nắm vững được các thẻ của HTML , các thẻ trong HTML thường có 2 loại thẻ là :
- Loại thẻ mở có kèm theo thẻ đóng . Ex: <a>..</a>, <body>…</body>,….
- Loại thẻ mở mà không có thẻ đóng . Ex: <img>,<br>,<hr>,…..
Nói chung là HTML rất dễ dàng để các bạn tiếp cận với nó , mình sẽ đưa ra cho các bạn một cấu trúc của 1 trang HTML cơ bản
//cấu trúc một trang HTML cơ bản
<html>
<head>
<title>Wellcome to www.thegioimang.org</title> //title của một trang web cơ bản
<meta Diễn đàn Mạng Máy Tính, Network,groupw3> //thẻ này dung để đưa thông tin trang web dzo bộ máy tịm kiếm
</head>
<body>
<b>HTML và các thẻ cơ bản</b>
</body>
</html>
Trên là cấu trúc một trang web cơ bản và trong phần sau này mình sẽ giới thiệu đến các bạn các thẻ cơ bản của một trang HTML
Note: Các thẻ trong HTML đều không phân biệt chữ hoa ,chững thường
• Các thẻ HTML thông dụng
1) Thẻ <head>…</head>
Định nghĩa các mô tả về trang HTML.Tất cả các thông tin tong thẻ này đều không xuất hiện trên trang web . Các bạn có thể chẹn thêm các thẻ bên trong thẻ head như <title>,<meta>,<link>,…
Ex: <head>
<title>Wellcome to www.thegioimang.org</title> //title của một trang web cơ bản
<meta Diễn đàn Mạng Máy Tính, Network,groupw3> //thẻ này dung để đưa thông tin trang web dzo bộ máy tịm kiếm
</head>
2) Thẻ <title>….</title>
Title cho phép bạn trình bày chuỗi thông tin của trang web lên trên thanh tiêu đề của trang web mỗi khi web chạy .
Ex: <title>Wellcome to www.thegioimang.org . Diễn Đàn Mạng Máy Tính</title>
3) Thẻ <body>…</body>
Trong HTML thì tất cả các thông tin trong thanh <body> đều được biểu thị lên trên trang
web để người sử dụng nhìn thấy . Tong thẻ <body> này bạn cần kết hợp thật nhuần
nhuyễn các the với nhau để tạ nên một trang web hoàn thiện
ex:
<body>
<b>HTML và các thẻ cơ bản</b>
</body>
4) Các thẻ định dạng
Trong phần nà thì mình chỉ giới thiệu đến các bạn các thẻ thông dụng dùng để hỗ trợ trong việc định dạng văn bản trên web HTML. Một số thẻ đặc biệt các bạn nghiên cứu thêm nha .
4.1) thẻ <div>..</div>
Cho phép bạn định dạng một đoạn văn bản bằng các thuộc tính của nó . Ví dụ như bạn muốn canh giữa một đoạn văn bản thì bạn dùng thuộc tính algin=”center”:
<div algin=”center”>
Chào mừng bạn đến với Diễn Đàn Mạng Máy Tính – www.thegioimang.org. Hi vọng các bạn sẽ học hỏi và chia sẻ các kiến thức IT nói chung và Network nói riêng.
</div>
4.2) Thẻ <p>…</p>
Thẻ này cũng tương tự như thẻ <div> nhưng mà khi kết thúc thẻ </p> thì dữn liệu trình bày sẽ tự động xuống hàng . Nếu như bạn sử dụng 2 thẻ <p> liên tiếp thì sau khi kết thúc thẻ </p> thứ nhất sẽ cách thẻ thứ 2 một khoảng nhất định.
Ex:
<p algin=”center”>
Wellcomo to www.thegioimang.org
</p>
<p algin=”justify”> // thuộc tính justify chính là canh đều lề toàn bộ đoạn văn bản
Chào mừng bạn đến với Diễn Đàn Mạng Máy Tính – www.thegioimang.org. Hi vọng các bạn sẽ học hỏi và chia sẻ các kiến thức IT nói chung và Network nói riêng.
</p>
Ngoài ra ta có thể sử dụng thẻ <br> dùng để xuống hàng . <br> là thẻ không có thẻ đóng và khi xuống hàng nó sẽ không cách 1 đoạn giống như thẻ <p> mà nó sẽ hiển thị ở hàng tiếp theo.
4.3) Thẻ <font>…</font>
Thẻ <font> dùng để các bạn định dạng font chữ của đoạn văn bản nằm trong tag này bằng các thuộc tính của nó như :
- Color: định dạng màu chữ cho đoạn văn bản. Màu sắc thì các bạn có thể biểu diễn bằng cách dùng tên màu bằng tiếng anh như: red,blue,green,…hoặc các bạn cũng có thể lấy mã màu chèn dzo như color=”#66CCFF”.
- Size: định dạng cỡ chữ
- Face: định dạng kiểu chữ cho văn bản như: arial,time new romal,tohoma,..
Ex:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>[tut] HTML và các thẻ cơ bản – www.thegioimang.org</title>
</head>
<body>
<p algin=”center”>
<font color=”red” size=”4″ face=”arial”>Wellcomo to www.thegioimang.org</font>
</p>
<p algin=”justify”> // thuộc tính justify chính là canh đều lề toàn bộ đoạn văn bản
<font color=”#0000FF” size=”+2″ face=”Times New Roman, Times, serif”>Chào mừng bạn đến với Diễn Đàn Mạng Máy Tính – www.thegioimang.org. Hi vọng các bạn sẽ học hỏi và chia sẻ các kiến thức IT nói chung và Network nói riêng.
</font>
</p>
</body>
</html>
4.4) Một số thẻ đị dạng văn bản thông thường:
<H1> …</H1> : Headers (H1 to H6) (TIÊU ĐỀ – 6 cấp từ 1 đến 6)
<P> …</P> : Paragraphs (Xác định một đọan văn bản)
<UL >… </UL>: Un order List (danh sách – Bullet )
<OL >… </OL>:Order List (danh sách – Numbering)
<HR> : Horizontal Rules. (chèn đường kẻ ngang).
<BR> : line breaks ( ngắt dòng)
< U >…</ U> : underline (gạch chân văn bản)
< I >…</I> : Italic (Văn bản Nghiêng)
< B >…</ B> :Bold (gạch chân in đậm)
• Khoảng trống (trong trường hợp muốn có nhiều hơn 1 ký tự trống):
• Dấu nhỏ hơn (<) và lớn hơn (>): < >
• Dấu ngoặc kép (“): "
• Ký hiệu Ó: ©
• …
5) Thẻ định dạng bảng <table>…</table>
Khi bạn muons trình bày một bảng dữ liệu lên web chẳng hạn như trình bày bảng điểm của sinh viên hay là danh sách các sinh viên thì bạn cần phải dùng đến thẻ này . Sau khi khai bào thẻ <table> thì bạn cần quan tâm đến các thẻ hàng <tr>..</tr> và thẻ cột <td>…</td>
Và bạn cần quan tâm đến các thuộc tính của nó . Đây là một số thuộc tính của thẻ <table>:
– BORDER=“x” : kích thước viền
– BGCOLOR: màu nền, ALIGN: canh chỉnh
– WIDTH,HEIGHT : kích thước cao, rộng
– CELLPADDING, CELLSPACING : khoảng cách giũa các hàng và cột
– ROWSPAN, COLSPAN: trộn các dòng hoặc cột
– <TR>: dòng, <TD> cột, <TH>: heading
– <CAPTION>: tiêu đề mô tả bảng
– bgcolor=“màu”: màu nền của bảng
– background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho bảng. Nên sử dụng đường dẫn tương đối nếu có thể
Note: Khi thiết kế table các bạn chỉ cần quan tâm đến chiều rộng chứ không cần quan tâm đến chiều cao của <table> vì chiều cao của nó phụ thuộc vào độ dài sữ liệu của ta. Tương tự thì thẻ hàng <tr> thì ta chỉ quan tâm đến chiều cao ,còn thẻ cột thì ta chỉ quan tâm đến thẻ rộng.
Ex: Để các bạn hình dung rõ hơn về table mình xin đưa ra một ví dụ để các bạn làm thì các bạn sẽ hiểu được table. Các bạn hãy xây dựng trang web giống như hình dưới:
Code:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>[tut] HTML và các thẻ cơ bản – www.thegioimang.org</title>
</head>
<body>
<p algin=”center”>
<font color=”red” size=”4″ face=”arial”>Wellcomo to www.thegioimang.org</font>
</p>
<p algin=”justify”>
<font color=”#0000FF” size=”+2″ face=”Times New Roman, Times, serif”>Chào mừng bạn đến với Diễn Đàn Mạng Máy Tính – www.thegioimang.org. Hi vọng các bạn sẽ học hỏi và chia sẻ các kiến thức IT nói chung và Network nói riêng.
</font>
</p>
<p algin=”center”>
<font color=”green” size=”4″ face=”arial”>Các bạn hãy xây dựng bảng dưới:</font>
</p>
<table border=”1″ cellspacing=”1″ cellpadding=”7″ width=”500″>
<tr>
<td width=”15%” align=”top” rowspan=”2″>
STT
</td>
<td width=”35%” align=”center” rowspan=”2″>
Họ & Tên
<td width=”50%” align=”top” colspan=”2″>
<center>profile</center>
</td>
</tr>
<tr>
<td width=”25%” align=”center”>
MSSV
</td>
<td width=”25%” align=”center”>
Quê Quán
</td>
</tr>
<tr>
<td width=”15%” align=”center”>
001
</td>
<td width=”35%” align=”center”>
Nguyen Van A
</td>
<td width=”25%” align=”center”>
0511125
</td>
<td width=”25%” align=”center”>
Sài Gòn
</td>
</tr>
</tr>
<tr>
<td width=”15%” align=”center”>
002
</td>
<td width=”35%” align=”center”>
Nguyen Van B
</td>
<td width=”25%” align=”center”>
0511126
</td>
<td width=”25%” align=”center”>
Hà Nội
</td>
</tr>
<tr>
<td width=”15%” align=”center”>
003
</td>
<td width=”35%” align=”center”>
Nguyen Van C
</td>
<td width=”25%” align=”center”>
0511127
</td>
<td width=”25%” align=”center”>
Hà Nội
</td>
</tr>
</table>
<table>
</table>
</body>
</html>
5) Thẻ Hình Ảnh <img >
Thẻ này dùng để chèn hình ảnh vào trong trang web , các bạn có thể thêm các thuộc tính chiều cao ,độ rộng cho hình ảnh chú thích cho hình ảnh(alt). Thẻ <img> là thẻ không có thẻ đóng.
Ex: <img src=”groupw3.gif” alt=”group w3 ” with=”500” hight=”450” boder=”0”>
6) Thẻ Liên Kết <a>…</a>
Khi mà bạn cần lien kết đến mộ trang web hay một địa chỉ email thị bạn có thể dùng thẻ <a> này để lien kết .
Để cho người dùng có thể chọn đường lien kết thì bạn có thể sử dụng tên lien kết hay cũng có thể dùng hình ảnh để biểu diễn cho liên kết .
Ex: // Liên kết tới một trang web sử dụng tên liên kết
<a href=”www.thegioimang.org”>
Welcome to www.thegioimang.org
</a>
<a href=”www.thegioimang.org”>
<img src=”logoW3.gif” boder=”0”>
</a>
//liên kết đến một địa chỉ email
<a href=”mailto:luongkhiem@thegioimang.org”>
<img src=”mailluongkhiem.gif” boder=”o”>
</a>
Ngoài ra thẻ <a> còn cho phéo bạn sử dụng các phương thức JavaScript . Chẳng hạn như bạn cho phép người dùng bookmark trang web hiện tại bằng cách click vào dòng “Bookmark this pages” như sau :
<a href=”javascript:window.external.addfavorite (‘http://thegioimang.org/forum’)”>
Bookmark this pages
</a>
7) Thẻ Input <input>
Thẻ <input> là thẻ không có thẻ đóng . ,nó cho phép người dùng nhập dữ liệu hay chỉ thực thi một nhiệm vụ nào đó . Trong thẻ input bao gồm các thuộc tính : text , password,submit,button,reset,checkbox,radio,hidden ,image.Sau đây mình xin trình bày cho các bạn về các thuộc tính trên của thẻ <input>
7.1) Thẻ input dạng text
Thẻ này cho phép người dùng nhập dữ kiệu dạng text. Ta có thể giới hạn số lượng chữ bằng option “maxlenght” ,giới hạn chiều dài theo kích thước của table bằng option “size” hay có thể gán giá trị mặc định bằng option “value”.
Ex: <input type=”text” name=”Fullname” value=”luongkhiem” size=”20” maxlenght=”30”>
7.2) Thẻ input dạng password
Cái này cũng tương tự như dạng text , nó cho phép người dùng nhập Password đăng nhập.Và các giá trị mà người dùng nhìn thấy chỉ ở dưới 2 dạng * hay . tùy thuộc vào trình duyệt web của bạn
Ex: <input=”password” name=”nhappassword” value=”” size=”20” maxlenght=”30”>
7.3) Thẻ input dạng checkbox
Cho phép chọn một lựa chọn trong một nhóm lựa chọn được đưa ra.
Trên 1 form có thể có nhiều nhóm lựa chọn kiểu này.
Thẻ: <input>: Mỗi ô cần 1 thẻ
Thuộc tính:
– name=“tên_đt”: quan trọng. Các đối tượng cùng tên thì thuộc cùng nhóm.
– type=“radio”
– value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD chọn ô này.
– checked: nếu có thì nút này mặc định được chọn
Ex:
<body>
Tên đăng nhập:
<input type=”checkbox” name=”area” value=”luongkhiem” checked>
</body>
7.4) Thẻ input dạng radio
Cho phép chọn một lựa chọn trong một nhóm lựa chọn được đưa ra.
Trên 1 form có thể có nhiều nhóm lựa chọn kiểu này.
Thẻ: <input>: Mỗi ô cần 1 thẻ
Thuộc tính:
– name=“tên_đt”: quan trọng. Các đối tượng cùng tên thì thuộc cùng nhóm.
– type=“radio”
– value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD chọn ô này.
– checked: nếu có thì nút này mặc định được chọn
ex :
<body>
Chọn giới tính :
<input type=”radio” name=”gioitinh” value=”nam” checked />Nam
<input type=”radio” name=”gioitinh” value=”nu” />Nu
</body>
7.5) Thẻ input dạng submit
Thẻ này cho phép bạn chấp nhận dữ liệu nhập trong các thẻ input ở trang Web. Có nghĩa là khi các bạn đồng ý chuyển dữ liệu lên bằng phương thức post (trong form) hay get (trong query string)
Ex: <input type=”submit” value=”save” name=”submit”>
7.6) Thẻ dạng Button
Cho phép chọn một lựa chọn trong một nhóm lựa chọn được đưa ra.
Trên 1 form có thể có nhiều nhóm lựa chọn kiểu này.
Thẻ: <input>: Mỗi ô cần 1 thẻ
Thuộc tính:
– name=“tên_đt”: quan trọng. Các đối tượng cùng tên thì thuộc cùng nhóm.
– type=“radio”
– value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD chọn ô này.
– checked: nếu có thì nút này mặc định được chọn
ex: <input type=”button” value=”back” name=”back” onclick=”window.history.go(-1);”>
7.7) Thẻ input dạng Reset
Thẻ reset cho phép bạn phục hồi những dữ liệu nhập hay chọn trong thẻ input ,select ,textarea để trở về trạng thái ban đầu.
Ex: <input type=”reset” value=”cancel” name=”reset”>
7.8) Thẻ input dạng Combo Box (Drop-down menu)
Bao gồm một danh sách có nhiều phần tử. Tại một thời điểm chỉ có 1 phần tử được chọn
NSD có thể chọn 1 phần tử trong danh sách xổ xuống bằng cách kích vào mũi tên bên phải hộp danh sách.
Thẻ tạo hộp danh sách:
<select>Danh sách phần tử</select>
Thuộc tính:
– name=“tên_ĐT”: quan trọng
Thẻ tạo 1 phần tử trong danh sách:
<option>Tiêu đề phần tử</option>
Thuộc tính:
– value=“giá trị”: giá trị chương trình nhận được nếu phần tử được chọn
– selected: nếu có thì phần tử này mặc định được chọn
7.9) Thẻ input dạng ListBox
Tương tự như Combo box, tuy nhiên có thể nhìn thấy nhiều phần tử cùng lúc, có thể lựa chọn nhiều phần tử
Thẻ: <select>…</select>
Thuộc tính: tương tự của combo tuy nhiên có 2 thuộc tính khác:
– size=“số dòng”
– multiple: cho phép lựa chọn nhiều phần tử cùng lúc
Thẻ <option>…</option> tương tự của combo box
7.10) The input dạng Hộp nhập văn bản nhiều dòng (TextArea)
Cho phép nhập văn bản dài trên nhiều dòng.
Thẻ:
<textarea>
Nội dung mặc định
</textarea>
Thuộc tính:
– name=“tên_ĐT”: quan trọng
– rows=“số dòng”
– cols=“số cột”
rows tính theo số dòng văn bản, cols tính theo số ký tự chuẩn trên dòng.
7.11) Thẻ input dạng Hidden
Là một dạng thẻ dạng text nhưng không cho người dùng thấy dữ liệu. Với thẻ này thì các bạn cần phải định nghĩa trước một giá trị cụ thể trong trong thẻ này . Với thẻ này thì bạn sẽ làm những cái tiềm ẩn như : nếu như bạn đăng nhập quá 5 lần thì sẽ khóa đăng nhập 15 phút rùi mới tiếp tục cho bạn đăng nhầp
Ex: <input type=”hidden” name=”textform” value=”1”>
Thẻ Form <form>…</form>
Ở phia trên mình đã giới thiệu các bạn các thẻ input nhưng chắc hẳn các bạn chưa biết rằng các thẻ input này sẽ được nhập ở đâu? Câu trả lời ở đây chính là thẻ <form>. Khi các bạn submit dữ liệu nhập từ các Web Browser lên server bằng 2 phương thức Post và Get trong thẻ form .
Một số chú ý đối với thẻ form:
Sử dụng để chứa mọi đối tượng khác
Không nhìn thấy khi trang web được hiển thị
Quy định một số thuộc tính quan trọng như method, action.
Thẻ tạo form:
<form>…</form>
Các thuộc tính:
– name=“tên_form”: Không quan trọng lắm
– action=“địa chỉ nhận dữ liệu”: Nên sử dụng đường dẫn tương đối nếu nằm trong cùng 1 web
– method=“phương thức gửi dữ liệu”. Chỉ có 2 giá trị:
• GET (mặc định)
• POST
Ex; Một ví dụ cho thẻ form dùng để upload tập tin lên server.
<form entype=”multipart/formdata” action=”upload.php” name=”form” method=”post” onsubmit=”return upload();”>
Lời kết : HTML có thể nói là ngọn nguồn của mọi trang web , tất cả các trang web dù bằng ngôn ngữ nào cũng phải đều sử dụng đến HTML . Các thẻ HTML ở trên nếu các bạn sử dụng linh hoạt thì tất nhiên là các bạn đã có cho mình một trang web riêng cho mình .
Trong phần tiếp theo mình sẽ tiếp tục giới thiệu cho các bạn các thẻ HTML đăc biệt để các bạn có thể làm chủ hoàn toàn ngôn ngữ HTML. “Mọi sự cống gắng và tìm tòi sẽ được trả công xứng đáng “. Chúc các bạn thành công!
tags html cơ bản nà ”
<!–…–>:Định nghĩa một comment
<!DOCTYPE>: Định nghĩa loại tài liệu
<a>:Định nghĩa một liên kết
<address>:Định nghĩa một address element
<applet>:Định nghĩa một applet
<area>:Định nghĩa một area của một image map
<b>:Định nghĩa bold các ký tự
<base>:Định nghĩa một link cho một trang
<bdo>:Định nghĩa direction của các ký tự hiển thị
<big>:Định nghĩa big các ký tự
<blockquote>:Định nghĩa một khối trích dẫn
<body>:Định nghĩa body một tài liệu dạng html
<br>:Inserts một single line break
<button>:Định nghĩa một push button
<caption>:Định nghĩa một table caption
<center>:Định nghĩa canh giữa các ký tự
<code>:Định nghĩa computer code các ký tự
<dd>: nghĩa một definition description
<del>:Định nghĩa strikethrough (deleted) các ký tự
<div>:Định nghĩa một section trong một document
<dl>:Định nghĩa một definition list
<dt>:Định nghĩa một definition term
<em>:Định nghĩa emphasized các ký tự
<fieldset>:đnh nghĩa một fieldset
<font>:Định nghĩa các ký tự font, size, và color
<form>:Định nghĩa một form
<frame>:Định nghĩa một sub window (frame)
<frameset>:Định nghĩa một tập hợp nhiều frame
<h1> to <h6>:Định nghĩa header 1 to header 6
<head>:Định nghĩa thông tin về tài liệu
<hr>:Định nghĩa một đường ngang
<html>: đnh nghĩa một tài liệu dạng html
<i>:Định nghĩa italic các ký tự
<iframe>:Định nghĩa một inline frame
<img>:Định nghĩa một image
<input>:Định nghĩa một input field
<ins>:Định nghĩa gạch dưới (inserted) các ký tự
<legend>:Định nghĩa một title trong một fieldset
<li>:Định nghĩa một list item
<link>:Định nghĩa một liên kết đến 1 file
<map>:Định nghĩa một image map
<meta>:Định nghĩa meta information
<noframes>:Định nghĩa một hiển thị không có frame
<noscript>:Định nghĩa một noscript section
<object>:Định nghĩa một embedded object
<ol>:Định nghĩa một ordered list
<optgroup>:Định nghĩa một option group
<option>:Định nghĩa một item của một list box
<p>:Định nghĩa một paragraph
<param>:Định nghĩa một parameter for một object
<pre>:Định nghĩa preformatted các ký tự
<script>:Định nghĩa một script
<select>:Định nghĩa một danh sách lựa chọn
<small>:Định nghĩa small các ký tự
<span>:Định nghĩa một section trong một document
<strike>:Định nghĩa strikethrough các ký tự
<strong>:Định nghĩa strong các ký tự
<style>:Định nghĩa một style
<sub>:Định nghĩa subscripted các ký tự
<sup>:Định nghĩa superscripted các ký tự
<table>:Định nghĩa một table
<tbody>:Định nghĩa một table body
<td>:Định nghĩa một table cell
<textarea>:Định nghĩa textarea
<tfoot>:Định nghĩa một table footer
<th>:Định nghĩa một table header
<thead>:Định nghĩa một table header
<title>:Định nghĩa tiêu đề cho tài liệu
<tr>:Định nghĩa một table row
<u>:Định nghĩa underlined các ký tự
<ul>:Định nghĩa một unordered list
<var>:Định nghĩa một variable
Html và các thẻ đặc biệt
1) Thẻ meta <meta>
Thẻ meta được khai trong thẻ <head>. Thẻ <meta> được dùng để khai báo loại font sử dụng , tịm kiếm ,xóa cache, chuyển trang ,….
1.1) Thẻ meta với font
Khi mà bạn làm một trang web mà nội dụng của bạn sử dụng tiếng việt thị khi chạy trên trình duyệt web nó sẽ không chạy được font tiếng việt nếu như bạn không chỉnh endcoding . Vậy bận muốn khi chạy trang web sẽ tự động chuyển wa font tiếng việt mà bạn không cần chỉnh encoding thì phải làm sao . Thẻ <meta> sẽ giúp cho các bạn vấn đề này , bạn chỉ cần đánh đoạn code dưới chèn dzo thẻ <head> là xong
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
1.2) Thẻ meta cho phép người dùng tìm kiếm
Khi web bạn đã đi vào hoạt động và các bạn muốn các công cụ tịm kiếm có thể tịm kiếm thấy thông tin của trang web mình . Thẻ meta này sẽ giúp các bạn điều này , các bạn cần khai báo càng nhiều thông tin liên quan đến trang web mình trong thẻ meta này càng tốt , càng nhiều thông tin về trang web mình thì các công cụ tìm kiếm google,yahoo,…càng dễ tịm thấy
Ex: <meta name=”keywords” content=”thegioimang.org, diễn đàn mạng máy tính, chia sẻ kiếm thức mạng, network, group w3”>
1.3) Thẻ meta tự động chuyển đến url
Thẻ này dùng để chuyển tới địa chỉ trang url, bạn cũng có thể xác định sau bao lâu nó sẽ chuyển tới trang web . Thẻ này cũng có thể dụng cho việc sau bao nhiêu lâu bạn sẽ refesh trang mình một lần .
Ex: <meta http-equiv=refresh content=”15” ; URL=http://thegioimang.org>
Câu lệnh trên thì có nghĩa là sau 15 giây thì nó sẽ tự động chuyển đến trang http://thegioimang.org.
1.4) Thẻ meta dùng xóa cahe
Thông thường khi bạn vào một trang web thì nội dung trang web có thể được lưu trong cahe của máy bạn , vì vậy khi các bạn vào trở lại thì nó sẽ load nhanh hơn do đã được lưu trong cahe của bạn rùi. Nhưng mà trong trường hợp các bạn thay đổi cấu trúc web và muốn xóa cahe trong máy của client thì các bạn chỉ cần khai báo thẻ meta.
Ex : <meta http-equiv=”pragma” content=”no-cahe” >
2) Thẻ marquee <marquee>…</marquee>
Khi bạn muốn thông báo một dòng thông báo chạy trên trang web của bạn thì bạn sử dụng thẻ này, thẻ này bạn có thể cho nó chạy qua trái, qua phải, dưới lên,trên xuống .
Ex :
<marquee direction=back with=100%>
Wellcome to www.thegioimang.org
</marquee>
Trong option direction các bạn có thể di chuyển theo các hướng :up, down,back,right
3) Thẻ style <style>…<style>
Thẻ này được sử dụng khi các bạn muốn đinh dạng nội dung trình bày trên trang web theo một kiểu nhất đinh , có nghĩa là mọi thẻ trong trang web có phần tử nào đó trong khai báo của thẻ <style> đều được định dạng theo kiểu trong <style>. Thông thường người ta thường save thành một file .css để sử dụng bất kì khi nào cần.
Ex:
<style>
.text
{
Color: #66cc77;
Font-size: 10px;
}
.topic
{
Color: #6666FF;
Text-decoration: underline;
}
.background
{
Color: #000000;
}
</style>
4) Thẻ link <link>…</link>
Các bạn đã tạo cho mình một file .css rùi , nhưng mà bạn muốn sử dụng nó thị làm sao? Có phải bạn chỉ cần gọi nó ra là xong đúng không. Thẻ <link> sẽ giúp bạn làm điều này
<link rel=”stylesheet” type=”text/css” href=”../style.css”> </link>
5) Thẻ script <script>…</script>
Các thẻ script ở đây được viết theo cấy trúc của Javascript , trong phần này mình chỉ giới thiệu các bạn cách sử dụng thẻ <script> trong HTML còn viết một đoạn script theo nhưng ý muốn của mình thị các bạn cần tham khảo thêm giáo trình JavaScript được publish rất nhiều trên mạng, <script> này rất tiện lợi cho các bạn khi muốn thực hiện một chức năng nào đó, bạn có thể gọi nó ra ở bất kì chỗ nào bạn muốn , nhưng mình khuyên các bạn không nên sử dụng thẻ Script trong thẻ <head>, còn tại sao ư? Các bạn hãy làm thử đi rùi sẽ thấy tại sao .
Ex:
<script language=jacvascript>
//code javaScript here
</script>
Nếu được thì mình sẽ cố gắng viết một bài JaváScript để giúp các bạn hiểu được một cấu trúc cơ bản của JavaScript để bạn làm một trang web thật chuyên nghiệp .
Lời kết :
Ở trên mình chỉ giới thiệu đến các bạn các thẻ HTML đặc biệt , các thẻ HTML còn rất nhiều , các bạn hãy nghiên cứu thêm để bổ sung vào kho kiến thức của bạn. Với 2 bài giới thiệu về HTML trên mình hi vọng rằng sẽ giúp ích được cho các bạn nắm vững HTML và có thể làm cho riêng các bạn một trang web của mình .
Chúc các bạn thành công và thành đạt!!!