PDA

View Full Version : Caf� H� Nội

lengo_ltd
19-09-2012, 03:05 PM
HTML, hay HyperText Markup Language, là một sự định dạng để báo cho Web browser làm thế nào để hiển thị một trang Web. Những tài liệu thật sự là những trang văn bản với những Tag (thẻ) đặc biệt hoặc những đoạn mã để một Web browser biết làm thế nào để thông dịch và hiển thị nó trên màn hình.

HTML sử dụng các tab có tên được đặt trong cặp < và >. Ví dụ <table></table>

Những Tag HTML báo cho Web browser biết khi nào cần in đậm một dòng văn bản, in ngiêng nó, làm cho nó trở thành một header, hoặc làm cho nó là một Hypertext liên kết tới một trang Web khác. Thông thường tag thường có một cặp, gồm có tag mở và tag đóng. Dữ liệu bị tác động được đặt giữa 2 tag này. Ví dụ:

<b>Đây là dòng chữ đậm</b>

Tuy nhiên cũng có tab chỉ có tag mở ví dụ như tag dùng xuống dòng <br> hay tag dùng để hiển thị ảnh <img>

Lưu ý: một Web Browser không quan tâm tới việc sử dụng chữ hoa hay chữ thường. Lấy ví dụ : <h3>...</h3> thì không khác gì với <H3>...</H3>

Không giống như việc lập trình, nếu có một lỗi trong trang HTML, hệ thống sẽ không bị "Crash"; trang Web sẽ vẫn nhìn thấy được, nhưng ... sai. Có thể nhanh chóng và dễ dàng vào bên trong trang HTML và sữa chữa lại nội dung của nó.

Browser tuy nhỏ nhưng lại có một bộ từ vựng mở. Khi browser không biết làm cái gì với tag đã cho, nó sẽ bỏ qua tag đó! Lấy ví dụ, trong tài liệu mà đang xem đây <test><h3>Tag HTML la gi?</h3></test> thì trình duyệt sẽ bỏ qua tag <test> và </test> vì nó là tag tự định nghĩa
duongtramanh.bdg
19-09-2012, 03:05 PM
Cấu trúc cơ bản của một trang HTML

Cấu trúc cơ bản của một trang HTML như sau:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<!-- header info used to contain extra information about
this document, not displayed on the page -->
</head>

<body>

<!-- all the HTML for display -->
: :
: :
: :
</body>
</html>

Thông thường một trang HTML bắt đầu bằng thẻ <html> và kết thúc bằng thẻ đóng </html> và gồm có hai phần là phần header và phần thân với các thẻ như trên. Tuy nhiên như đã nói các tag này là không bắt buộc vì nếu không có thì trang HTML vẫn được trình duyệt hiển thị
truongthanhthuduc
19-09-2012, 03:05 PM
Các thẻ HTML

Có thể chia các thẻ HTML thành 2 loại: các thẻ để hiện thị và định dạng dữ liệu như bảng biểu, ảnh, xuống dòng, chữ đậm, chữ nghiêng... và các thể dùng tạo giao diện người dùng và xử lý dữ liệu như FORM, các nút...

Các thẻ hiển thị dữ liệu:
Đây là các thẻ định dạng và dùng để hiển thị dữ liệu. Chúng rất đa dạng và phong phú. Phần dưới đây chỉ giới thiệu những thẻ được sử dụng tương đối nhiều.

Các thẻ định dạng chữ

<b></b> để định dạng chữ đậm. Ví dụ <b>Dòng chữ đậm</b> thì dòng chữ sẽ hiển thị như sau đây: Dòng chữ đậm

<i></i> để định dạng chữ nghiêng. Ví dụ <i>Dòng chữ nghiêng</i> thì dòng chữ sẽ hiển thị như sau đây: Dòng chữ nghiêng

<u></u> để định dạng chữ gạch chân. Ví dụ <u>Dòng chữ gạch chân</u> thì dòng chữ sẽ hiển thị như sau đây: Dòng gạch chân

<h1></h1> để định dạng cỡ chữ H1. Ví dụ <h1>Dòng chữ cỡ H1<h1> sẽ được hiển thị thành:

Dòng chữ cỡ H1

Tương tự đối với các cỡ chữ H2, H3, H4, H5, H6

Có thể dùng kết hợp nhiều thẻ. Ví dụ <b><i>Dòng chữ vừa nghiêng vừa đậm</i></b> cho ra kết quả Dòng chữ vừa nghiêng vừa đậm

<font></font> dùng để định dạng font chữ.
Ví dụ:
<font face="arial">Dòng chữ font Arial</font> sẽ cho kết quả Dòng chữ font Arial

<font color="green">Dòng chữ màu xanh</font> sẽ cho kết quả Dòng chữ màu xanh

<font size="4">Dòng chữ cỡ 4</font> sẽ cho kết quả Dòng chữ cỡ 4
...
Có thể dùng kết hợp các thuộc tính của font vào cùng một thẻ. Ví dụ:
<font face="arial" size=4 color=green>Dòng chữ font Arial, cỡ chữ 4, màu xanh</font> sẽ cho kết quả Dòng chữ font Arial, cỡ chữ 4, màu xanh
thinhphat
19-09-2012, 03:05 PM
Các thẻ định dạng dữ liệu
Dạng bảng biểu:
Đây là thẻ hay được sử dụng để trình bày layout của trang Web. Chúng được sử dụng rất thường xuyên và tương đối phức tạp do dùng nhiều bảng lồng nhau. Việc nắm chắc các thẻ bảng biểu là điều rất cần thiết khi trình bày một trang Web.

Sử dụng thẻ <table></table> để hiển thị bảng biểu.
Để thêm một dòng dùng thẻ <tr>
Để thêm một cột dùng thẻ <td>
Ví dụ:
<table boder=1>
<tr align=”center” valign=”top”>
<td>Dữ liệu ở cột thứ nhất</td>
<td>Dữ liệu ở cột thứ hai</td>
</tr>
</table>
Khi đó kết quả ra sẽ là một bảng có độ dày đường viền là 1pixel, có một hàng gồm có hai cột. Cột thứ nhất có dòng chữ “Dữ liệu ở cột thứ nhất” và cột thứ hai có dòng chữ “Dữ liệu ở cột thứ hai”. Dữ liệu được căn biên ngang giữa và biên dọc ở phía trên.

Hiển thị ảnh
Dùng thẻ <img src=”Địa chỉ ảnh” width=”” height=””> để hiển thị ảnh trong đó:
Src: là địa chỉ URL của ảnh
Width: chiều dài của ảnh
Height: chiều cao của ảnh
Ví du: <img src="http://www28.websamba.com/tinhyeuphuongnam/logo.gif"> sẽ cho kết quả sau:
Liên kết
Liên kết dùng để chỉ thị cho trình duyệt thực hiện một yêu cầu khác.
Sử dụng tag <a href="Địa chỉ URL">Tên liên kết</a> để biểu diễn một liên kết.
Ví dụ: Để chị cho trình duyệt chuyển đến trang chủ của HDOL ta dùng thẻ sau:
<a href=http://tinnhyeuphungnam.tk/>Tinhyeuphuongnam</a> khi đó ta sẽ thấy liên kết được hiển thị như sau: Tinhyeuphuongnam
yensaokh
19-09-2012, 03:05 PM
Bảng tóm tắt các thẻ HTML

Phụ lục về các thẻ HTML được cho như sau:

Các thẻ dùng cấu trúc trang HTML
- <HTML>...</HTML>
- <HEAD>...</HEAD>
- <BODY>...</BODY>
- <BASE...>
- <ISINDEX...>
- <LINK...>
- <NEXTID...>
- <TITLE>...</TITLE>
- <META...>

Thẻ liên kết
- <A...>...</A>

Các thẻ định dạng khối
- <ADDRESS>...</ADDRESS>
- <BASEFONT ...>
- <BLOCKQUOTE>...</BLOCKQUOTE>
- <BR>
- <CENTER>
- <COMMENT>...</COMMENT>
- <DFN>...</DFN>
- <DIV>...</DIV>

- <FONT ...>
- <HR>
- <Hx>...</Hx>
- <LISTING>...</LISTING>
- <MARQUEE>...</MARQUEE>

- <NOBR>...</NOBR>
- <P>...</P>
- <PLAINTEXT>
- <PRE>...</PRE>
- <WBR>
- <XMP>...</XMP>

Âm thanh
- <BGSOUND>

Forms
- <FORM>...</FORM>
- <INPUT>
- <OPTION>
- <meo ...>...</meo>
- <TEXTAREA>...</TEXTAREA>

Ảnh
- <IMG...>

[Các thẻ định dạng ký tự>
- <!-- Comments -->
- <B>...</B>
- <BIG>...</BIG>
- <BLINK>
- <CITE>...</CITE>
- <CODE>...</CODE>
- <EM>...</EM>
- <I>...</I>
- <KBD>...</KBD>
- <SAMP>...</SAMP>
- <SMALL>...</SMALL>
- <STRIKE>...</STRIKE>
- <STRONG>...</STRONG>
- <SUB>...</SUB>
- <SUP>...</SUP>
- <TT>...</TT>
- <U>...</U>
- <VAR>...</VAR>

Các thẻ dùng để liệt kê
- <DIR>...</DIR>
- <DL>...</DL>
- <MENU>...</MENU>
- <OL>...</OL>
- <UL>...</UL>

Bảng biểu
- <TABLE>...</TABLE>
- <CAPTION ...>...</CAPTION>
- <COL>...</COL>
- <COLGROUP>...</COLGROUP>
- <TBODY>...</TBODY>
- <TD ...>...</TD>
- <TFOOT>...</TFOOT>
- <TH ...>...</TH>
- <THEAD>...</THEAD>
- <TR ...>...</TR>
thanhhacfurniture
19-09-2012, 03:05 PM
Định dạng trang Web sử dụng StyleSheet và Cascading Style Sheets (CSS)

Trong trang Web, thông thường ta dùng chung một kiểu định dạng cho cùng một đối tượng như bảng biểu, font chữ. Để tránh việc phải sử dụng các thẻ HTML lặp đi lặp lại vừa nhàm chán mất thời gian vừa khiến trang HTML trở nên cồng kềnh, ta có thể dụng stylesheet và Cascading Style Sheets (CSS)

a. StyleSheet

Sử dụng từ tab Style
Ví dụ:

<STYLE>
H1 {color: brown}
H2 {color: brown}
H3 {color: brown}
H4 {color: brown}
H5 {color: brown}
H6 {color: brown}
</STYLE>

<STYLE>
H1, H2, H3, H4, H5, H6 {color: brown ! important}
P, BLOCKQUOTE {color: blue ! important}
</STYLE>

<STYLE>
H1.styleA {font: 45pt Times; color: brown}
H1.styleB {font: 30pt Arial; color: blue}
</STYLE>

<H1 CLASS="styleA"> Đây là dòng chữ cỡ H1 theo styleA</H1>
<H1 CLASS="styleB"> Đây là dòng chữ cỡ H1 theo styleB</H1>

b. Sử dụng .CSS

+) Tất cả các style được ghi vào một file ví dụ: default.css
+) Sử dụng tab <link> để chỉ tới file đó, ví dụ <link rel=stylesheet type="text/css" href="default.css">

Sử dụng các tab theo style đã định nghĩa trong file default.css

Việc sử dụng kỹ thuật Cascading Style Sheets (CSS) giúp giảm nhẹ được kích thước trang Web, mềm dẻo trang cách thay đổi hình thức và tránh được việc viết mã HTML nhàm chán. Trang chủ HDOL là một ví dụ về việc sử dụng kỹ thuật Cascading Style Sheets
thanhhacfurniture
19-09-2012, 03:05 PM
Kích thước của một trang Web

Do độ phân giải của mỗi màn hình có thể là khác nhau do vậy cũng tồn tại 2 cách để hiện thị kích thước của một trang Web

Kích thước cố định (pixel): Kích thước của body và các bảng được gắn cố định. Do vậy hình thức của trang Web không phụ thuộc vào độ phân giải màn hình. Tuy nhiên nó chỉ hiệu quả đối với một độ phân giải màn hình nhất định.

Ví dụ:
<table width='750'>
<tr>
<td width='300'>
<td width='450'>
</tr>

Kích thước tương đối (%): Kích thước của body và các bảng được gán theo % so với độ phân giải màn hình. Do vậy, hình thức của trang Web thay đổi phụ thuộc vào độ phân giải của màn hình.

Ví dụ:
<table width='100%'>
<tr>
<td width='30%'>
<td width='70%'>
</tr>

Kết hợp 2 yếu tố kích thước cố định và thay đổi.
Ví dụ:

<TABLE >
<tr valign=top>
<td style="{width:5px;}"></td>
<td style="{padding:5px;width:160px;}"><!--#include file='i_banner.asp'--></td>
<td style="{padding:8px;}">
longdatautovol
19-09-2012, 03:05 PM
Hiển thị tiếng Việt theo chuẩn TTVN 6909:2001

+)Sử dụng tab <meta http-equiv="content-type" content="text/html; charset=utf-8"> và đặt charset là utf-8
+)Sử dụng bảng mã UCS-2. Tuy nhiên mã UCS-2 làm cho trang Web có kích thước rất lớn, khiến việc hiển thị trang Web trở lên chậm chạp

Soạn thảo trang HTML

Dùng một trình soạn thảo bất kỳ đều có thể tạo ra trang HTML. Sau khi soạn thảo xong đặt tên cho files với phần mở rộng là HTM hoặc HTML

Tạo trang HTML với MS Frontpage

Có nhiều phần mềm giúp tạo một trang Web trực quan. Chúng ta chỉ cần dùng các động tác kéo thả và gõ ký tự, phần mềm sẽ tự sinh mã HTML cho ta. Trong các phần mềm đó thì MS Frontpage là chương trình tạo trang Web trực quan, đi kèm với bộ MS Office là một phần mềm tương đối thuận tiện, sử dụng tương đối dễ và quen thuộc

Frontpage có 3 cửa sổ: HTML, Normal và Preview.
+)HTML là cửa sổ chứa mã HTML mà FrontPage đã sinh mã cho ta
+)Normal là cửa sổ mà chúng ta dùng soạn thoả và kéo thả các đối tượng vào trang Web
+)Preview là cửa sổ cho phép ta nhìn thử trang Web vừa soạn thảo

Trong 3 cửa sổ trên chúng ta có thể thay đổi được nội dung cửa sổ HTML và Normal. Nếu không ưng ý về mã HTML mà FrontPage sinh ra thì ta có thể thay đổi bằng cách gõ vào cửa sổ HTML.

Tối ưu mã sinh ra bởi MS FrontPage
Tuy Frontpage rất tiện trong việc sinh mã HTML giúp giảm bớt gánh nặng viết mã nhưng trong rất nhiều trường hợp mã HTML mà Frontpage sinh ra quá rườm rà và đặc biệt không sinh được nhiều mã HTML phức tạp. Do vậy việc nắm chắc các thẻ HTML là điều cần thiết cho dù có sử dụng những phần mềm hỗ trợ.
myanco2003
19-09-2012, 03:05 PM
Tổng kết

Một số điều cần biết khi xây dựng một trang web:

+) Khi một yêu cầu được gửi từ trình duyệt lên Server, Web Server sẽ thực thi yêu cầu và trả lại kết quả dưới dạng một trang HTML để trình duyệt hiển thị.

+) HTML là một tập hợp các thẻ, mỗi thẻ thường gồm một cặp là thẻ đóng và thẻ mở. Dữ liệu nằm giữa hai thẻ sẽ bị tác động bởi cặp thẻ đó.

+) Có thể chia các thẻ HTML làm hai loại: loại định dạng và hiển thị dữ liệu và dạng tạo giao diện và gửi dữ liệu

+) Các thẻ dạng bảng biểu rất hay được sử dụng để tạo layout trang Web. Đối với các trang Web có tác động của người sử dụng thì các form rất quan trọng.

+) Chú ý kích thước của trang Web: kích thước tuyệt đối và kích thước tương đối

+) Nên sử dụng các dạng style và CSS để định dạng chung cho các đối tượng trên trang Web

+) Nên sử dụng một phần mềm sinh mã HTML trực quan như FrontPage, tuy nhiên vẫn phải tự nắm được các thẻ HTML để sửa chữa vì mã HTML do các phần mềm sinh ra không tối ưu.