pikhjn
22-08-14, 11:02 PM
I. Bản chất của một trang Web (Webpage).
Một số thuật ngữ mà tiếng Việt chưa thể hiện rõ được ý nghĩa , tôi sẽ dùng tiếng Anh.
Để thống nhất ta dùng trình duyệt Google Chrome trong bài học, các trình duyệt khác tương tự.
Các bạn ai cũng đã biết Website là gì, nhưng có thể chưa biết bản chất của nó.
Đầu tiên ta cần phân biệt 2 khái niệm thường bị đánh đồng đó là Website và Webpage. Tôi sẽ định nghĩa 2 khái niệm qua ví dụ:
- <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> google.com/webmaster/abxxyz;... là những Webpage.
- <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> google.com; wikipedia.com;... là những Website.
Vậy nhiều Webpage tạo nên một Website. Trang chủ của <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> là một Webpage có địa chỉ chính xác là <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> nhưng bằng một số kĩ thuật, ta giấu “index.php” đi để địa chỉ thân thiện hơn với người dùng – Bạn có thể kiểm chứng bằng cách truy cập vào địa chỉ <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>
Webpage được cấu tạo từ các dòng mã HTML. Chính trình duyệt (Browser) đã biên dịch (phiên dịch) những dòng mã đó thành các cấu trúc, hình ảnh, văn bản và hiển thị cho người xem. Các bạn kiểm chứng bằng cách click phải vào một Webpage của <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> (ví dụ <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>) và chọn View source (Xem nguồn trang). Các bạn sẽ thấy một loạt các dòng mã. Đó chính là HTML.
Vậy HTML là gì? Tại sao lại cầnHTML?
HTML (HyperText Markup Language): Là ngôn ngữ siêu văn bản dùng để giúp các trình duyệt thể hiện nội dung Webpage. Thử tưởng tượng rằng chúng ta chưa có HTML và để tạo nên Webpage chúng ta dùng ngôn ngữ thường.
Ví dụ: Để Webpage có nền trắng
Người Việt Nam chúng ta viết: nền: trắng;
Nhưng người Anh lại viết: background: white;
Người Laos viết: Xnogngshtuog: chtaosgunu; (Tôi ví dụ thôi bạn đừng Google Translate làm gì)
Vậy mỗi người viết theo ý hiểu của mình thì liệu một cỗ máy cần đồ sộ cỡ nào để hiểu hết những dòng mã đó? Chính vì thế HTML sinh ra và người viết mã phải tuân theo các quy luật của nó nhằm giúp trình duyệt dễ dàng hiểu và thể hiện.
DHTML (Dynamic HyperText Markup Language) và XHTML (eXtensible HyperText Markup Language) chúng ta sẽ đề cập sau.
II. HTML
Ở mục này ta sẽ tìm hiểu sâu hơn về HTML.
Để hiểu được HTML, cách tốt nhất là học qua ví dụ thực hành, hãy mở phần mềm Notepad có sẵn trong máy bạn và copy đoạn mã sau đây vào:
Welcome <i>to</i> <b><b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>>
Sau đó save lại với tên test.htm Hoặc test.html (File -> Save As -> khung Save as type các bạn chọn All File). Mở file bạn vừa save (double click vào file). Chắc hẳn các bạn sẽ thấy dòng chữ như sau trên trình duyệt:
Welcome to <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>
Qua ví dụ trên có lẽ các bạn đã hiểu phần nào về tác dụng các kí hiệu <i>, </i>, <b>, </b>. Chúng được gọi là các tag HTML (thẻ HTML). <i>, <b> là thẻ mở. </i>, </b> là thẻ đóng. Các cặp thẻ đóng mở sẽ quyết định thuộc tính của đoạn văn bản nằm trong nó. Cụ thể như sau:
<b>Thiết kế Web</b>: Thiết kế Web – Chữ in đậm
<i>Lập trình Web</i>: Lập trình web – Chữ in nghiêng
III. Các tag HTML cơ bản.
1. Các thẻ tiêu đề (HTML Headings)
Bao gồm các thẻ từ <h1> đến <h6>: thường được sử dụng để thể hiện cho tiêu đề bài viết, bản tin, các mục nhấn mạnh,...
Font chữ (size) của nội dung trong các thẻ giảm từ <h1> đến <h6> (h1 lớn nhất, h6 nhỏ nhất). Ví dụ:
<h1>Chúng tôi là thành viên <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>>
<h3>Rất ham học hỏi</h3>
<h6>Hãy tham gia cùng chúng tôi</h6>
2. Đoạn văn bản trong HTML (HTML Paragraphs)
Đoạn văn bản trong tài liệu HTML được định nghĩa bằng thẻ <p>. Ví dụ:
<p>Nội dung đoạn văn bản thứ nhất.</p>
<p>Đoạn văn bản thứ 2.</p>
3. Liên kết (HTML Links)
Một trang website bao gồm rất nhiều trang web (web page), các web page liên kết lại với nhau để tạo lên website. Liên kết trong HTML được định nghĩa bằng cặp thẻ <a>. Ví dụ:
<a href="<b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> (<b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>)" target="_blank">Google pages</a>
Các thuộc tính (Attribute) của thẻ <a>:
- href: quy định địa chỉ (url) mà liên kết trỏ tới
- target: (đích) thuộc tính này sẽ quy định liên kết sẽ được mở ra ở đâu: _self (trang hiện tại), _blank (cửa sổ mới),...
4. Hình ảnh (HTML Images)
Để chèn hình ảnh vào tài liệu HTML ta sử dụng thẻ <img>, đây là thẻ HTML không có thẻ đóng. Ví dụ:
<img src="logo.jpg" width="100px" height="40px” />
Lưu ý nên có khoảng trắng trước “/>”
Các thuộc tính của thẻ <img>
src=”logo.jpg”: Chỉ ra đường dẫn tập tin hình ảnh (có thể là đường dẫn tuyệt đối hoặc tương đối, vấn đề này tôi sẽ giải thích ở bài sau)
alt=”Logo”: Nội dung sẽ được hiển thị khi đường dẫn tới tập tin hình ảnh không tồn tại
title=”Logo”: Nội dung hiển thị khi đưa trỏ chuột lên hình.
width, height: Độ rộng và độ cao của file hình được tính bằng px, nếu không có thuộc tính width, height thì mặc định sẽ lấy kích thước gốc của file hình
HTML Lines (<hr />)
Thẻ <hr /> sẽ tạo một đường kẻ ngang trong trang HTML. <hr /> là thẻ đơn không có thẻ đóng. Ví dụ:
<hr />
HTML Line Breaks <br/>
Sử dụng <br /> để xuống dòng trong một đoạn văn bản. Ví dụ:
<p>Xuống dòng<br />trong<br />đoạn văn bản</p>
Tuy nhiên chúng ta không nên sử dụng thẻ <br /> trong tài liệu HTML (khuyến cáo, lí do sẽ được nói chi tiết ở các bài sau)
Các thẻ định dạng text (HTML Text Formatting)
<b>in đậm</b>: in đậm
<u>gạch chân</u>: gạch chân
<i>in nghiêng</i>: in nghiêng
<big>chữ lớn hơn</big>: chữ lớn hơn
H<sub>2</sub>O: H2O
x<sup>2</sup>y: x2y
<strong>Nhấn mạnh in đậm</strong>: Nhấn mạnh in đậm
<em>Nhấn mạnh in nghiêng</>: Nhấn mạnh in nghiêng
Tác dụng của 2 thẻ cuối sẽ nêu rõ trong các bài sau.
Còn tiếp.....
Một số thuật ngữ mà tiếng Việt chưa thể hiện rõ được ý nghĩa , tôi sẽ dùng tiếng Anh.
Để thống nhất ta dùng trình duyệt Google Chrome trong bài học, các trình duyệt khác tương tự.
Các bạn ai cũng đã biết Website là gì, nhưng có thể chưa biết bản chất của nó.
Đầu tiên ta cần phân biệt 2 khái niệm thường bị đánh đồng đó là Website và Webpage. Tôi sẽ định nghĩa 2 khái niệm qua ví dụ:
- <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> google.com/webmaster/abxxyz;... là những Webpage.
- <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> google.com; wikipedia.com;... là những Website.
Vậy nhiều Webpage tạo nên một Website. Trang chủ của <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> là một Webpage có địa chỉ chính xác là <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> nhưng bằng một số kĩ thuật, ta giấu “index.php” đi để địa chỉ thân thiện hơn với người dùng – Bạn có thể kiểm chứng bằng cách truy cập vào địa chỉ <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>
Webpage được cấu tạo từ các dòng mã HTML. Chính trình duyệt (Browser) đã biên dịch (phiên dịch) những dòng mã đó thành các cấu trúc, hình ảnh, văn bản và hiển thị cho người xem. Các bạn kiểm chứng bằng cách click phải vào một Webpage của <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> (ví dụ <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>) và chọn View source (Xem nguồn trang). Các bạn sẽ thấy một loạt các dòng mã. Đó chính là HTML.
Vậy HTML là gì? Tại sao lại cầnHTML?
HTML (HyperText Markup Language): Là ngôn ngữ siêu văn bản dùng để giúp các trình duyệt thể hiện nội dung Webpage. Thử tưởng tượng rằng chúng ta chưa có HTML và để tạo nên Webpage chúng ta dùng ngôn ngữ thường.
Ví dụ: Để Webpage có nền trắng
Người Việt Nam chúng ta viết: nền: trắng;
Nhưng người Anh lại viết: background: white;
Người Laos viết: Xnogngshtuog: chtaosgunu; (Tôi ví dụ thôi bạn đừng Google Translate làm gì)
Vậy mỗi người viết theo ý hiểu của mình thì liệu một cỗ máy cần đồ sộ cỡ nào để hiểu hết những dòng mã đó? Chính vì thế HTML sinh ra và người viết mã phải tuân theo các quy luật của nó nhằm giúp trình duyệt dễ dàng hiểu và thể hiện.
DHTML (Dynamic HyperText Markup Language) và XHTML (eXtensible HyperText Markup Language) chúng ta sẽ đề cập sau.
II. HTML
Ở mục này ta sẽ tìm hiểu sâu hơn về HTML.
Để hiểu được HTML, cách tốt nhất là học qua ví dụ thực hành, hãy mở phần mềm Notepad có sẵn trong máy bạn và copy đoạn mã sau đây vào:
Welcome <i>to</i> <b><b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>>
Sau đó save lại với tên test.htm Hoặc test.html (File -> Save As -> khung Save as type các bạn chọn All File). Mở file bạn vừa save (double click vào file). Chắc hẳn các bạn sẽ thấy dòng chữ như sau trên trình duyệt:
Welcome to <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>
Qua ví dụ trên có lẽ các bạn đã hiểu phần nào về tác dụng các kí hiệu <i>, </i>, <b>, </b>. Chúng được gọi là các tag HTML (thẻ HTML). <i>, <b> là thẻ mở. </i>, </b> là thẻ đóng. Các cặp thẻ đóng mở sẽ quyết định thuộc tính của đoạn văn bản nằm trong nó. Cụ thể như sau:
<b>Thiết kế Web</b>: Thiết kế Web – Chữ in đậm
<i>Lập trình Web</i>: Lập trình web – Chữ in nghiêng
III. Các tag HTML cơ bản.
1. Các thẻ tiêu đề (HTML Headings)
Bao gồm các thẻ từ <h1> đến <h6>: thường được sử dụng để thể hiện cho tiêu đề bài viết, bản tin, các mục nhấn mạnh,...
Font chữ (size) của nội dung trong các thẻ giảm từ <h1> đến <h6> (h1 lớn nhất, h6 nhỏ nhất). Ví dụ:
<h1>Chúng tôi là thành viên <b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>>
<h3>Rất ham học hỏi</h3>
<h6>Hãy tham gia cùng chúng tôi</h6>
2. Đoạn văn bản trong HTML (HTML Paragraphs)
Đoạn văn bản trong tài liệu HTML được định nghĩa bằng thẻ <p>. Ví dụ:
<p>Nội dung đoạn văn bản thứ nhất.</p>
<p>Đoạn văn bản thứ 2.</p>
3. Liên kết (HTML Links)
Một trang website bao gồm rất nhiều trang web (web page), các web page liên kết lại với nhau để tạo lên website. Liên kết trong HTML được định nghĩa bằng cặp thẻ <a>. Ví dụ:
<a href="<b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b> (<b><font color=red>[Chỉ có thành viên mới xem link được. <a href="register.php"> Nhấp đây để đăng ký thành viên......</a>]</font></b>)" target="_blank">Google pages</a>
Các thuộc tính (Attribute) của thẻ <a>:
- href: quy định địa chỉ (url) mà liên kết trỏ tới
- target: (đích) thuộc tính này sẽ quy định liên kết sẽ được mở ra ở đâu: _self (trang hiện tại), _blank (cửa sổ mới),...
4. Hình ảnh (HTML Images)
Để chèn hình ảnh vào tài liệu HTML ta sử dụng thẻ <img>, đây là thẻ HTML không có thẻ đóng. Ví dụ:
<img src="logo.jpg" width="100px" height="40px” />
Lưu ý nên có khoảng trắng trước “/>”
Các thuộc tính của thẻ <img>
src=”logo.jpg”: Chỉ ra đường dẫn tập tin hình ảnh (có thể là đường dẫn tuyệt đối hoặc tương đối, vấn đề này tôi sẽ giải thích ở bài sau)
alt=”Logo”: Nội dung sẽ được hiển thị khi đường dẫn tới tập tin hình ảnh không tồn tại
title=”Logo”: Nội dung hiển thị khi đưa trỏ chuột lên hình.
width, height: Độ rộng và độ cao của file hình được tính bằng px, nếu không có thuộc tính width, height thì mặc định sẽ lấy kích thước gốc của file hình
HTML Lines (<hr />)
Thẻ <hr /> sẽ tạo một đường kẻ ngang trong trang HTML. <hr /> là thẻ đơn không có thẻ đóng. Ví dụ:
<hr />
HTML Line Breaks <br/>
Sử dụng <br /> để xuống dòng trong một đoạn văn bản. Ví dụ:
<p>Xuống dòng<br />trong<br />đoạn văn bản</p>
Tuy nhiên chúng ta không nên sử dụng thẻ <br /> trong tài liệu HTML (khuyến cáo, lí do sẽ được nói chi tiết ở các bài sau)
Các thẻ định dạng text (HTML Text Formatting)
<b>in đậm</b>: in đậm
<u>gạch chân</u>: gạch chân
<i>in nghiêng</i>: in nghiêng
<big>chữ lớn hơn</big>: chữ lớn hơn
H<sub>2</sub>O: H2O
x<sup>2</sup>y: x2y
<strong>Nhấn mạnh in đậm</strong>: Nhấn mạnh in đậm
<em>Nhấn mạnh in nghiêng</>: Nhấn mạnh in nghiêng
Tác dụng của 2 thẻ cuối sẽ nêu rõ trong các bài sau.
Còn tiếp.....