Thông tin cá nhân
Thực đơn người xem
Bài viết cuối
Bình luận mới
trantuanminh trong
hướng dẫn đăng kí web kiếm tiền
trantuanminh trong kiếm tiền trên mạng trantuanminh trong Tình yêu trantuanminh trong Tình yêu trantuanminh trong kiếm tiền trên mạng levanminh trong Xóa nick của mình trong friendlist của bạn chat trantuanminh trong Bộ gõ tiếng Việt trantuanminh trong Tình yêu Tik Tik Tak
Chuyên mục Giới thiệu
(♥ Góc Thơ ♥)
Thời tiết
Mái trường
Giá Vàng
Tỷ giá
Truyện cười
|
Các bài viết vào Saturday 29th April 2006
HTML căn bản (phần 1)
QUOTE Bài viết này là bài viết mà mình muốn viết từ rất lâu nhưng chưa có dịp, hôm nay rãnh rỗi nên mở ra viết chút ít về HTML, hy vọng đây sẽ là 1 phần cơ bản nhất và là bài viết đầu tiên mà bạn đọc khi bước vào tìm hiểu lập trình web Phần 1: Khái niệm về HTML HTML là gì ? - HTML là viết tắt của "Hyper Text Markup Language" (Ngôn ngữ tiền xử lý siêu văn bản). - HTML là một ngôn ngữ lập trình web cơ bản và không thể thiếu nếu bạn muốn tạo 1 trang web. - Một file HTML là một file văn bản chứa đựng những thẻ xử lý nhỏ. - Là những thẻ xử lý mà nó sẽ gửi cho trình duyệt những mô tả để trình bày trang. - Một file HTML có tên mở rộng là là .htm hoặc .html. - Một file HTML có thể được tạo ra bằng cách sử dụng các chương trình xử lý văn bản đơn giản nhất: notepad, wordpad... Đến phức tạp hơn một chút như: ultraedit, ..etc. - Bất kỳ thẻ lệnh nào của HTML đều được vào giữa 2 dấu "<" và ">" Bây giờ chúng ta sẽ tiến hành tìm hiểu thêm nhé: Nếu bạn đang chạy hệ điều hành Windows, hãy khởi động trình xử lý văn bản sẵn có trong windows bằng cách vào: [START] --> [PROGRAMS] --> [ACCESSORIES] --> Notepad.exe Nhập nội dung dưới đây vào file trên: <html> <head> <title>Tiêu đề của trang</title> </head> <body> Đây là trang web đầu tiên của tớ đấy nhá ! <br> <b>Nội dung được tô đậm</b> </body> </html> Click vào [File] chọn [Save as] và tiến hành save lại ở bất kì nơi nào bạn muốn và với tên file là: homepage.html (Ví dụ nơi save là ở ổ đĩa C và thư mục My Documents với tên là homepage.html sẽ có đường dẫn là: C:\My Documents\homepage.html) Phân tích đoạn code trên: Mỗi file HTML đều được bắt đầu bằng thẻ <html> và kết thúc bằng thẻ </html>. Tiếp đến là ở giữa thẻ <head> và </head> sẽ là nơi ghi chú, miêu tả về site, đây là nơi mà bạn có thể định dạng trang, sử dụng các thẻ META. Ví dụ: Ở giữa thẻ <head> và </head> có tổ hộp thẻ được bắt đầu bằng <title> và kết thúc bằng </title>, còn ở giữa là nội dung và đây chính là tiêu đề cho site của bạn - Nó sẽ hiện tên này lên mỗi khi bạn duyệt vào trang này. Phần chính của trang web được bắt dầu bằng thẻ <body> và kết thúc bằng thẻ </body> Giải thích phần giữa của thẻ <body> và </body> Thẻ <br> không cần có kết thúc vì đây là một thẻ "đơn" được dùng để xuống 1 dòng. Bởi vì trong HTML tất cả đều được biểu diễn bằng thẻ lệnh chứ không phải hiển thị theo những gì bạn thấy. Thẻ dùng để tô đậm chữ <b> và kết thúc là </b> Trên đây là một sơ lược về HTML căn bản, bài viết không yêu cầu phải học thuộc khái niệm, chủ yếu phải biết tùy cơ ứng biến và thực hành là chính. Written by lyhuuloi (Bản quyền thuộc Sanchoituoitre.info) QUOTE Phần 2: Một số thẻ lệnh xử lý chuỗi Đây là phần trọng tâm khi bắt đầu hình thành những khái niệm cơ bản. Để ứng dụng, bạn phải đặt các đoạn này vào giữa thẻ <body> và </body>. 1. Xuống dòng khi đã kết thúc đoạn văn bản Xuống 1 dòng: Đoạn văn bản 1<br> Đoạn văn bản 2<br> Xuống 2 hoặc nhiều dòng: Đoạn văn bản 1<br><br> Đoạn văn bản 2<br><br><br> Đoạn văn bản 3<br><br><br><br> 2. Tạo chữ từ to đến nhỏ: <h1>Tạo chữ từ to đến nhỏ</h1> Bạn chỉ việc thay số 1 thành các số lớn hơn như: 2, 3, 4, 5..., kiểu chữ sẽ nhỏ dần. 3. Tạo chữ theo kích thước: <font size="1">Tạo chữ theo kích thước</font> Bạn cũng chỉ việc thay số cho nó, nhưng ở đây số càng lớn thì chữ sẽ càng lớn. 4. Tạo font cho chữ: <font face="arial">Tạo font cho chữ</font> Ở đây có một vài loại font chữ điển hình mà mỗi khi cài đặt hệ điều hành windows sẽ có sẵn như: Arial, Tahoma, Verdana. 5. tạo chữ in đậm, nghiêng và gạch dưới: <b>In đậm</b> - <i>In nghiêng</i> - <u>Gạch dưới</u> B: Bold: In đậm I: Italic: In nghiêng U: Underline: gạch dưới 6. Canh lề cho văn bản: trái, giữa, phải <div align="left">Văn bản hiện bên trái</div> <div align="center">Văn bản hiện ở giữa</div> <div align="right">Văn bản hiện bên phải</div> Riêng để canh lề ở giữa, bạn có thể viết như sau: <center>Văn bản hiện ở giữa</center> 7. Tạo màu cho văn bản Ở đây có 2 cách, 1 là dùng tên màu bằng tiếng Anh (Blue, red, green, ...), 2 là dùng mã màu bắt đầu bằng ký hiệu # (#0000FF, #FF0000, #00FF00) Tên màu bằng tiếng Anh: <font color="blue">Màu xanh</font><br> <font color="red">Màu đỏ</font><br> <font color="green">Màu xanh lá</font><br> Dùng mã màu: <font color="#0000FF">Màu xanh</font><br> <font color="#FF0000">Màu đỏ</font><br> <font color="#00FF00">Màu xanh lá</font><br> Lưu ý: Tên của thẻ bạn có thể viết chữ hoa, thường hay hoa và thường kết hợp đều được, ví dụ: <center>Nội dung</center><br> <CENTER>Nội dung</CENTER><br> <CeNtEr>Nội dung</CeNtEr><br> Phần 3: Các thẻ lệnh xử lý chuỗi nâng cao 1. Đưa hình ảnh vào trang web của bạn QUOTE 1.1. Khái niệm về hình ảnh: Để mở đầu cho bài viết mình xin đưa ra một vài khái niệm nhỏ để giúp bạn bổ sung thêm nếu như bạn chưa rõ về hình ảnh. Một file ảnh có thường có phần mở rộng như: .gif, .jpg, .png, .bmp, .jpeg, .tga. Trên web thì đa số có phần mở rộng là: .gif, .jpg - vì thuộc loại này ảnh có kích thước nhỏ, dễ tiếp xúc. 1.2. Đưa hình ảnh vào trang web của bạn Lệnh chuẩn: <img src="E:\fDocuments\My Pictures\name.gif"> Mở rộng thêm: <img src="C:\My Documents\My Pictures\name.gif" width="20" height="20" border="1" alt="mô tả cho hình ảnh"> width: độ rộng (hay chiều dài nằm ngang) height: độ cao border: độ lớn của đường viền theo chuẩn px alt: mô tả cho hình ảnh * Với "C:\My Documents\My Pictures\name.gif" là đường dẫn đến file ảnh. 2. Tạo liên kết đến các trang web khác Lệnh chuẩn: <a href="C:\My Documents\homepage2.html">Tên trang web khác</a> Mở rộng: <a href="C:\My Documents\homepage2.html" title="Mô tả về site" target="_blank">Tên trang web khác</a> title: Mô tả về site target: Đối tượng, với "_blank" là mở một trang mới, thường thì dùng target cho frame. * Với "C:\My Documents\homepage2.html" có file homepage2.html đã được tạo sẵn trong thư mục My Documents. Dĩ nhiên là bạn có thể thay đường dẫn này thành URL của website trên mạng như: <a href="http://sanchoituoitre.info" title="Sân chơi dành cho tuổi trẻ" target="_blank">Sân Chơi Tuổi Trẻ</a> 3. Nhấn mạnh văn bản <em>Nếu bạn muốn nhấn mạnh điều gì </em> 4. Tên các biến trong lĩnh vực lập trình <var>window.open("mywindow.html");</var> 5. Chữ chạy Lệnh chuẩn: <marquee>Đây là dòng chữ chạy</marquee> Chữ chạy từ phải sang trái: <marquee>Đây là dòng chữ chạy</marquee> Chữ chạy từ dưới lên trên: <marquee direction="up" scrollamount="2" scrolldelay="40">Đây là dòng chữ chạy</marquee> Bổ sung tính năng dừng lại khi đưa chuột vào và tiếp tục chạy khi đưa chuột ra khỏi nó: <marquee onmouseover="this.stop()" onmouseout="this.start()">Đây là dòng chữ chạy</marquee> 6. Trích dẫn một câu nói <cite>Học, học nữa học mãi - Lê nin</cite> 7. Dẫn chứng 1 ví dụ cho văn bản <samp>Ví dụ</samp> 8. Tên phím của bàn phím: <kbd>Enter; Del; Contrl...</kbd> 9. Gạch bỏ đoạn văn bản <strike>Đoạn văn bản bị gạch bỏ</strike> 10. Đưa 1 đoạn văn bản lên trên 1/2 dòng a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup> Kết quả: a bình phương cộng b bình phương bằng c bình phương 11. Đưa 1 đoạn văn bản xuống dưới 1/2 dòng H<sub>2</sub>O Kết quả: công thức hóa học của nước. Phần 4: Table - xây dựng cấu trúc một trang web sử dụng table QUOTE Table nghĩa tiếng việt là "Bảng", đây là một phần quan trọng và không thể thiếu đối với hầu hết các website. Nó cho phép bạn xây dựng cấu trúc một trang web theo một trình tự do bạn sắp đặt. Để tạo ra một table bạn dùng cặp thẻ lệnh <table></table> I. Một cấu trúc table cơ bản có dạng như sau: <table border="1" width="40%" cellspacing="0" cellpadding="4" bgcolor="#F4F4F4"> <tr> <td> Table nghĩa tiếng việt là "Bảng", đây là một phần quan trọng và không thể thiếu đối với hầu hết các website. Nó cho phép bạn xây dựng cấu trúc một trang web theo một trình tự do bạn sắp đặt. <br />www.sanchoituoitre.info </td> </tr> <tr> </table> Và đây là kết quả: Giải thích đoạn code trên: + boder="1" là để tạo đường viền cho table có độ dày là 1. + width="40%" cho biết table này rộng 40%, khi bạn để giá trị theo dạng phần trăm thì dù người truy cập dùng trình duyệt nào thì kết quả table hiển thị vẫn chiếm 40% màn ảnh. ở đây bạn có thể thay giá trị trên bằng số cố định width="750" thì nó vẫn luôn rộng 750 pixels dù cho có thay đổi trình duyệt. + cellspacing="0" cho biết độ dày giữa ô và table + cellpadding="5" cho biết độ dày giữa text và ô + bgcolor="#F4F4F4" cho biết màu nền của bảng + Cặp thẻ <tr></tr> là định dạng dòng, ở đây chỉ có 1 cặp thẻ nên kết quả là 1 dòng. + Cặp thẻ <td></td> là định dạng ô, ở đây cũng chỉ có 1 cặp thẻ nên kết quả là 1 ô. II. Dòng và ô: Ví dụ 1: <table border="1" width="40%" cellspacing="0" cellpadding="4"> <tr> <td bgcolor="#666666">Dòng 1 - ô 1</td> <td bgcolor="#COCOCO">Dòng 1 - ô 2</td> </tr> <tr> <td bgcolor="#808080">Dòng 2 - ô 1</td> <td bgcolor="#EEEEEE">Dòng 2 - ô 2</td> </tr> </table> Và đây là kết quả: Giải thích đoạn code: Đoạn code trên sử dụng 2 cặp thẻ <tr></tr> thì cho ra 2 dòng: + Trong cặp thẻ <tr></tr> thứ 1 có 2 cặp thẻ <td></td>, cho ra 2 ô + Trong cặp thẻ <tr></tr> thứ 2 lại có 2 cặp thẻ <td></td>, cho ra 2 ô Ví dụ 2: <table border="1" width="40%" cellspacing="0" cellpadding="4"> <tr> <td colspan="2" bgcolor="#F4F4F4">Dòng 1 - ô 1</td> </tr> <tr> <td bgcolor="#666666">Dòng 2 - ô 1</td> <td bgcolor="#COCOCO">Dòng 2 - ô 2</td> </tr> <tr> <td bgcolor="#808080">Dòng 3 - ô 1</td> <td bgcolor="#EEEEEE">Dòng 3 - ô 2</td> </tr> </table> Kết quả: Hy vọng qua bài viết này bạn sẽ nắm bắt được phần nào khái niệm về table, phần còn lại chủ yếu là bạn phải biết lập luận và phải biết hình dung ra giao diện. Ở các phần tiếp theo của bài viết có thể mình sẽ cho một số trang web mẫu để dễ dàng tiếp thu hơn. |
Lượt xem thứ:
