GVLT: Lâm Quang Vũ – lqvu@fit.hcmuns.edu.vn - Lương Hán Cơ – lhco@fit.hcmuns.edu.vn GVHDTH: Lương Vĩ Minh – lvminh@fit.hcmuns.edu.vn - Trần Thị Bích Hạnh – ttbhanh@fit.hcmuns.edu.vn 1 BÀI 1 HƯỚNG DẪN SỬ DỤNG HTML BẰNG NOTEPAD Mục lục I. Thông tin môn học: 2 II. Cấu trúc cơ bản của một trang Web (Webpage): 2 III. Mô tả cấu trúc của một thẻ (tag) HTML: 3 IV. Một số ký tự đặc biệt trong HTML: 3 V. Định dạng trang web: 4 VI. Định dạng văn bản: 5 VII. Định dạng danh sách (List): 6 VIII. Định dạng bảng (table): 7 IX. Chèn hình ảnh (Image): 9 X. Liên kết trang web (Hyperlink): 9 XI. Bài tập : 10 2 I. Thông tin môn học: - Công cụ để lập trình và thiết kế web: NotePad, EditPlus - Địa chỉ website môn học: http://courses.cs.hcmuns.edu.vn/ (Hệ tại chức à 02TC Lập trình và thiết kế web1) - FTP : 172.29.68.111 (username: tkwebv1 / passwork: tkweb) - II. Cấu trúc cơ bản của một trang Web (Webpage): - Cấu trúc cơ bản của 1 trang web gồm các phần sau: <HTML> <Head> <title> </title> </Head> <Body> Nội dung chính của trang web </Body> </HTML> - Trong đó: o Thẻ <Html></Html>: Định nghĩa phạm vi của văn bản HTML o Thẻ <Head></Head>: Định nghĩa các mô tả về trang HTML. Các thông tin trong thẻ này không được hiển thị trên màn hình cửa sổ trang web. o Thẻ <title></title>: Mô tả tiêu đề trang web. Thông tin trong phần này sẽ hiển thị trên thanh tiêu đề của cửa sổ trang web. o Thẻ <Body></Body>: Xác định vùng thân của trang web. Đây là nơi chứa các thông tin sẽ hiển thị trong trang web. - Ví dụ: <Html> <Head> <title> Thiet ke web 1 </title> </Head> <Body> Mon hoc: Thiet ke web 1 GVLT : Ths. Lam Quang Vu Lop : 02TC </Body> </Html> GVLT: Lâm Quang Vũ – lqvu@fit.hcmuns.edu.vn - Lương Hán Cơ – lhco@fit.hcmuns.edu.vn GVHDTH: Lương Vĩ Minh – lvminh@fit.hcmuns.edu.vn - Trần Thị Bích Hạnh – ttbhanh@fit.hcmuns.edu.vn 3 III. Mô tả cấu trúc của một thẻ (tag) HTML: - Cú pháp: C ấ u trúc: <Tên_th ẻ [tên_tt_1 = gt1] [tên_tt_2 = gt2] … > D ữ li ệ u hi ệ n th ị < /Tên_th ẻ > Mô t ả : Th ẻ m ở . Th ẻ đóng - Trong đó: o tên_tt : là tên thuộc tính của thẻ. o gt1: là giá trị của thuộc tính tương ứng. o Một thẻ, có thể có 1 hoặc nhiều thuộc tính hoặc không có thuộc tính nào. o Tác dụng của thẻ chỉ ảnh hưởng đến Dữ liệu hiện thị nằm trong giữa thẻ đóng và thẻ mở của thẻ đó. o Các thẻ HTML có thể lòng nhau được. - Ví dụ: <body bgcolor=red topmargin=0> Hello world <p> Doan van ban co <b> Chu in dam </b> </p> </body> IV. Một số ký tự đặc biệt trong HTML: HTML Mô tả Ký tự khoảng trắng < < > > & & - BT: Viết trang web hiện thị chính xác dòng sau lên màn hình: Function Converter(int &a, int &b) { /*<Begin convert>*/ int c; b = a; a = b; b = c; /* <finish convert> */ } GVLT: Lâm Quang Vũ – lqvu@fit.hcmuns.edu.vn - Lương Hán Cơ – lhco@fit.hcmuns.edu.vn GVHDTH: Lương Vĩ Minh – lvminh@fit.hcmuns.edu.vn - Trần Thị Bích Hạnh – ttbhanh@fit.hcmuns.edu.vn 4 V. Định dạng trang web: STT Tên thuộc tính thẻ HTML Mô tả - Ví dụ 1 bgcolor Thiết lập thuộc tính màu nền cho trang <body bgcolor="#800000" ></body> <body bgcolor="red"></body> Chú ý: Giá trị của thuộc tính bgcolor có thể là tên của màu bằng tiếng anh (red, blue, green, …) hoặc là tổ hợp số thập lục phân của 3 màu (đ ỏ , xanh lá, xanh dương) . 2 background Thiết lập thuộc tính ảnh nền cho trang <body background="images/logo.PNG" > Giá trị của thuộc tính này đường dẫn đến một file hình ành. Chú ý đến khái ni ệ n đư ờ ng d ẫ n tuy ệ t đ ố i, đư ờ ng d ẫ n tương đ ố i trong HTML. 3 topmargin, leftmargin, rightmargin, bottommargin Thi ế t l ậ p thu ộ c tính mép l ề trên, trái, ph ả i, dư ớ i c ủ a trang <body topmargin="0" > Mặc định, giá trị của các thuộc tính này khác 0. 4 <bgsound src="URL" loop="Number"> Đặt nhạc nền cho trang - src : đường dẫn đến file nhạc - loop= - 1: l ặ p vô h ạ n <head> <bgsound src="music.mid" loop="-1"> </head> - BT: Hãy viết trang web có o màu nền là màu có tổ hợp số thập lục phân là #FFFFCC, o topmargin = 20 o Có nội dung là : Welcome to Natural Science University 5 VI. Định dạng văn bản: STT Tên thẻ HTML Mô tả - Ví dụ <h1>…… </h1> …… <h6>…… </h6> Đ ị nh d ạ ng tiêu đ ề c ỡ 1 đ ế n 6. Tiêu đ ề 1 là l ớ n nh ấ t. <h1> This is a heading </h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> <b >…… </b> Đ ị nh d ạ ng ch ữ in đ ậ m <b> This is a bold text </b> <i>…… </i> Định dạng chữ in nghiêng <i> This is an italic text </i> <p>…… </p> Đ ị nh d ạ ng 1 đo ạ n văn b ả n <p> This is a paragraph </p> <p>This is another paragraph</p> <br> Xuống hàng <p> This <br> is a para <br> graph with line breaks </p> Chú ý: Th ẻ này không có th ẻ đóng <hr> Đường kẻ ngang <p>This <hr> is a paragraph with a horizontal rule break</p> <! > Ký hi ệ u ghi chú. N ộ i dung trong tag này s ẽ không hi ể n th ị lên trang web. <! This is a comment > - BT: Viết trang web có nội dung như hình sau: 6 VII. Định dạng danh sách (List): STT Tên thẻ HTML Mô tả - Ví dụ 1 <li>Item 2</li> Đ ị nh ngh ĩa các th ành ph ầ n trong danh sách 2 <ul>… </ul> Định nghĩa danh sách không có thứ tự < ul> <li>Tea</li> <li>Coffee</li> </ul> 3 <ol>… </ol> Đ ị nh ngh ĩa danh sách không có đánh s ố th ứ t ự <ol> <li>Tea</li> <li>Coffee</li> </ol> 4 <ol> <li>Tea</li> <ul> <li>Have ice</li> <li>No ice</li> </ul> <li>Coffee</li> <ul> <li>Have ice</li> <li>No ice</li> </ul> </ol> 7 VIII. Định dạng bảng (table): STT Tên thẻ HTML Mô tả - Ví dụ 1 <table>……</table> Kh ở i t ạ o 1 b ả ng 2 <tr>…… </tr> Tạo một dòng. Thẻ <tr> phải nằm trong thẻ <table> 3 <th>…… </th> Tạo một ô tiêu đề. Thẻ <th> phải nằm trong thẻ <tr> 4 <td>…… </td> Tạo một ô. Thẻ <td> phải nằm trong thẻ <tr> 5 Ví d ụ : <table border=1> <tr> <th>STT</th> <th>Ho va ten</th> </tr> <tr> <td>1</td> <td>Lam Quang Vu</td> </tr> <tr> <td>1</td> <td>Vu Giang Nam</td> </tr> <tr> <td>1</td> <td>Le Tri Anh</td> </tr> </table> STT Thuộc tính Mô tả - Ví dụ 1 Border Thi ế t l ậ p đ ộ d ầ y c ủ a đư ờ ng k ẻ khung. Giá tr ị m ặ c đ ị nh c ủ a thu ộ c tính border (khi không khai báo) là 0 à Bảng không có đường kẻ khung. 2 Colspan Thiết lập ô có độ rộng bằng bao nhiêu cột. <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>88352100</td> <td>86251160</td> </tr> </table> 3 Rowspan Thiết lập ô có độ cao bằng bao nhiêu dòng <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table> 4 Cellpadding Kho ả ng cách t ừ border đ ế n văn b ả n trong 1 ô 8 <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> 5 Cellspacing Kho ả ng cách gi ữ a các ô trong m ộ t b ả ng <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> 6 Background Thi ế t l ậ p ả nh n ề n cho th ẻ <table>, <td>, <tr> <table border="1" background="c194.jpg"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> 7 Bgcolor Thi ế t l ậ p màu n ề n cho th ẻ <table>, <td>, <tr> <table border="1"> <tr> <td bgcolor="blue">First</td> <td>Row</td> </tr> <tr> <td background="cat.jpg">Second</td> <td>Row</td> </tr> </table> GVLT: Lâm Quang Vũ – lqvu@fit.hcmuns.edu.vn - Lương Hán Cơ – lhco@fit.hcmuns.edu.vn GVHDTH: Lương Vĩ Minh – lvminh@fit.hcmuns.edu.vn - Trần Thị Bích Hạnh – ttbhanh@fit.hcmuns.edu.vn 9 IX. Chèn hình ảnh (Image): STT Tên thẻ HTML <img> Thẻ <img> không có thẻ đóng.4 <img src="URL" alt="Description" width="Number" height="Number"> Mô tả giá trị của các thuộc tính của thẻ <img> - src : đường dẫn đến file hình ảnh. - alt : dòng chữ thay thế cho ảnh khi trình duyệt không thể hiện thị ảnh, ví dụ do sai đường dẫn - width: Chiều dài của hình khi hiển thị. - height : Chiều rộng của hình khi hiển thị. Chú ý: Giá trị mặc định của 2 thuộc tính width, height là kích thước thực sự của file hình ảnh. Ví dụ: <body> <img src="boat.gif" alt="Big Boat" width="45" height="45"> </body> X. Liên kết trang web (Hyperlink): STT Tên thẻ HTML Mô tả - Ví dụ <a>…. </a> Cú pháp: <a href="url" [target="values"] [name="values"]> Text to be displayed </a> Mô tả giá trị của các thuộc tính: - href : Đường dẫn đến địa chỉ cần liên kết tới. Nếu đây là liên kết đến địa chỉ email thì giá trị của thuộc tính href có dạng sau: href = “mailto:youremail@yahoo.com” Nếu đây là liên kết bên trong cùng một trang web (được định nghĩa bởi thuộc tính name của thẻ <a>) thì giá trị của href có dạng sau: href=“#tên_name” (xem ví dụ ở dưới) - target: Chỉ định liên kết được mở ra tại đâu. Thuộc tính target có 2 giá trị: _blank: liên kết được mở ra trong một cửa sổ mới. _self : liên kết được mở ra ngay tại trang hiện hành. Giá trị mặc định của thuộc tính target (nếu không định nghĩa) là _self. - name: Định nghĩa vị trí liên kết tới trong cùng một trang web. Ví d ụ : Liên kết đến một trang web bất kỳ <a href="http://www.w3schools.com/">Visit W3Schools!</a> Ví d ụ : Liên kết đến địa chỉ email: <a href=”mailto:ttbhanh@fit.hcmuns.edu.vn”>Mail to TTBHanh</a> Ví d ụ : Liên k ế t m ở ra m ộ t c ử a s ổ m ớ i <a href=”www.fit.hcmuns.edu.vn” target=”_blank”>Go to HCMUNS homepage</a> Ví d ụ : Liên k ế t n ộ i trong cùng m ộ t trang web. <a href="#tips">Jump to the Useful Tips Section</a> ………………… ………………… ………………… ………………… <a name="tips">Useful Tips Section</a> GVLT: Lâm Quang Vũ – lqvu@fit.hcmuns.edu.vn - Lương Hán Cơ – lhco@fit.hcmuns.edu.vn GVHDTH: Lương Vĩ Minh – lvminh@fit.hcmuns.edu.vn - Trần Thị Bích Hạnh – ttbhanh@fit.hcmuns.edu.vn 10 XI. Bài tập : Sử dụng EditPlus (hoặc NotePad) để thiết kế trang web cá nhân, trình bày các thông tin sau: • Họ và tên • Hình cá nhân • Địa chỉ liên lạc • Điện thoại • Email • Trang web trường đang học. • Thời khóa biểu học tập . thiết kế web1) - FTP : 17 2.29.68 .11 1 (username: tkwebv1 / passwork: tkweb) - II. Cấu trúc cơ bản của một trang Web (Webpage): - Cấu trúc cơ bản của 1 trang web gồm các phần sau: < ;HTML& gt;. HTML Mô tả - Ví dụ <h1>…… </h1> …… <h6>…… </h6> Đ ị nh d ạ ng tiêu đ ề c ỡ 1 đ ế n 6. Tiêu đ ề 1 là l ớ n nh ấ t. <h1> This is a heading </h1> . nhạc nền cho trang - src : đường dẫn đến file nhạc - loop= - 1: l ặ p vô h ạ n <head> <bgsound src="music.mid" loop=" -1 & quot;> </head> - BT: Hãy viết trang