Đang tải... (xem toàn văn)
Tổng hợp các bài viết về lập trình HTML và CSS cơ bản nhất, rất chi tiết có kèm các bài tập để bạn tự thực hành trong quá trình tự học. Bạn có thể tự học và tự thiết kế trang Web cho riêng mình mà chưa biết nhiều về HTML và CSS.
1 TRƯỜNG ĐẠI HỌC HỌC CÙNG NHAU HƯỚNG DẪN HỌC THIẾT KẾ WEB KẾT HỢP HTML+CSS LÝ THUYẾT VÀ BÀI TẬP THỰC HÀNH SƯU TẦM VÀ BIÊN SOẠN : Nguyễn Phúc Đức Tháng 12 năm 2013 LƯU HÀNH KHẮP NƠI 2 Mục lục Giới thiệu về HTML 4 Cấu trúc cơ bản của HTML 5 Nhóm các thẻ block 7 Thẻ định dạng tiêu đề 8 Đây là tiêu đề quan trọng nhất (lớn nhất) 8 Logo 9 Thẻ định dạng đoạn văn bản 9 Thẻ phân chia khu vực 11 Thẻ xác định danh sách 12 Các thẻ danh sách có thứ tự và không có thứ tự 15 Danh sách không có thứ tự 16 Cấu trúc thẻ danh sách có thứ tự và không có thứ tự 17 Một số cấu trúc của danh sách có thứ tự và không có thứ tự 17 Cấu trúc <ul></ul> lồng bên trong <ol></ol> 18 Những thẻ thuộc nhóm inline 19 Thẻ liên kết <a></a> 20 Thẻ ngắt đoạn văn bản <br /> 21 Thẻ nhóm các inline <span></span> 21 Thẻ hiển thị hình ảnh mạnh <strong></strong> 21 Thẻ dùng để nhấn mạnh nội dung văn bản <em></em> 21 Ví dụ về liên kết <a> 21 Ví dụ về <img /> 23 Đoạn văn bản <p> 24 Ví dụ về các tag <dl> - <dd> - <dt> 25 Ví dụ về các tag <ol> - <li> 25 Ví dụ về các tag <ul> - <li> 27 Ví dụ về thẻ <input /> 28 Ví dụ về thẻ <button> 30 Ví dụ về thẻ select - option 30 Ví dụ về thẻ <optgroup> 31 Ví dụ về thẻ <textarea> 32 Ví dụ về <fieldset> - <legend> 32 Ví dụ về thẻ <label> 33 Kết hợp các thẻ định dạng và nhóm thẻ inline 39 Bài tập 39 Phần đầu: header 43 Phần liên kết toàn cục global : navigation 45 Phần nội dung chính : content 46 Phần nội dung phụ : sidebar 50 Phần cuối trang web : footer 53 Giới thiệu về CSS 57 Sử dụng CSS 57 Cách viết một nội dung CSS 58 Cách viết một comment trong file CSS 59 Các thuộc tính định dạng cho text 59 Thuộc tính color 60 Thuộc tính font-size 61 Thuộc tính font-family 61 Thuộc tính font-weight 61 3 Thuộc tính letter-spacing 62 Thuộc tính text-decoration 63 Thuộc tính word-spacing 63 Các thuộc tính định dạng chung 63 Thuộc tính background 64 Thuộc tính border 65 Thuộc tính height 67 Thuộc tính text-align 67 Các thuộc tính điều khiển nội dung 68 padding 68 margin 77 float 84 Ví dụ về thuộc tính float 89 clear 92 clearfix 97 display : Xác định sự hiển thị cho thành phần 103 position 106 position: absolute 111 position: fixed 116 position: static 117 Ví dụ về thuộc tính position 117 Ví dụ về thuộc tính border 120 Ví dụ về thuộc tính display 123 Ví dụ về thuộc tính text-align 128 Ví dụ về thuộc tính vertical-align 129 Ví dụ về thuộc tính list-style 133 Ví dụ về thuộc tính margin 136 Ví dụ về thuộc tính overflow 140 Ví dụ về thuộc tính z-index 142 Ví dụ về thuộc tính content 145 Kết hợp các thuộc tính CSS 147 Phần web : header 151 Phần liên kết toàn cục global navigation 156 Phần nội dung : content 158 Phần : sidebar 170 Phần : footer 172 Tổng kết bài tập CSS 177 Màu trong HTML & CSS 185 jQuery 189 CSS3 204 Tag mới trong HTML5 207 Những tag tương tự HTML4 / XHTML 208 Những tag không được hỗ trợ trong HTML5 210 4 Giới thiệu về HTML HTML là ngôn ngữ dùng để mô tả một trang web. HTML viết tắt của từ Hyper Text Markup Language. HTML không phải là ngôn ngữ lập trình, html là ngôn ngữ đánh dấu (markup language), ngôn ngữ đánh dấu là một nhóm các thẻ đánh dấu (các tag), HTML sử dụng các thẻ này để mô tả trang web. Sự sắp xếp chiều dọc của thẻ block trong HTML Khi sử dụng các thẻ block , trình duyệt sẽ sắp xếp các thẻ theo chiều dọc, mỗi thẻ sẽ chiếm vùng không gian nằm ngang từ trên xuống theo thứ tự sắp xếp trong trang HTML/XHTML, thẻ nào code trước sẽ nằm trên, các thẻ code sau sẽ nằm bên dưới. Xem ví dụ sau đây để thấy được trình duyệt sắp xếp các thẻ theo chiều ngang như thế nào: HTML viết <h1>Tiêu đề 01</h1> <ul> <li><a href="#">Link 01</a></li> <li><a href="#">Link 02</a></li> <li><a href="#">Link 03</a></li> <li><a href="#">Link 04</a></li> <li><a href="#">Link 05</a></li> </ul> <div>Nội dung chính</div> <div>Nội dung phụ</div> <div> <p>Tên công ty</p> <p>Địa chỉ</p> </div> Hiển thị trình duyệt: Phân tích vị trí của các thẻ: 5 Ta thấy các thẻ block đều chiếm vùng không gian nằm ngang, chúng ta có thể sắp xếp lại vị trí của các thẻ block bằng cách sử dụng các thuộc tính css . Sự sắp xếp chiều ngang của thẻ inline trong HTML Khi sử dụng các thẻ inline, trình duyệt sẽ sắp xếp các thẻ liền kề nhau theo chiều ngang, thẻ nào code trước xuất hiện trước, thẻ nào code sau xuất hiện sau. Xem ví dụ sau đây để thấy được trình duyệt sắp xếp các thẻ inline như thế nào: HTML viết <a href="#">Thẻ a</a> <span>thẻ span</span> <em>thẻ em</em> <strong>thẻ strong</strong> Hiển thị trình duyệt: Tới đây chắc các bạn đã hiểu nhiệm vụ của HTML/XHTML dùng để làm gì, đối với các thẻ block trình duyệt sẽ sắp xếp nó theo chiều dọc, đối với các thẻ inline trình duyệt sẽ sắp xếp theo chiều ngang, nếu muốn hiểu rõ hơn các bạn có thể tham khảo thêm các vùng không gian HTML Nhiệm vụ của trình duyệt (Firefox, Internet Explorer, Safari, Opera, Chrome, ) là đọc văn bản HTML và hiển thị chúng như chúng ta thấy, tuy nhiên các trình duyệt không hiển thị các thẻ HTML (các tag), nhưng lại sử dụng các thẻ để giải thích nội dung cho trang web. Cấu trúc cơ bản của HTML Cấu trúc cơ bản của trang HTML/XHTML có dạng như sau, thường gồm 3 phần: <!Doctype>: Phần khai báo chuẩn của html hay xhtml. <head></head>: Phần khai báo ban đầu, khai báo về meta, title, css, javascript… <body></body>: Phần chứa nội dung của trang web, nơi hiển thị nội dung. Cấu trúc cơ bản <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Tiêu đề trang web</title> </head> <body> Phần thân viết ở đây </body> 6 </html> Cấu trúc cơ bản của trang web Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và cũng có trang chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2 cột để layout. Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm, Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub navigation). Phần thân của trang: page body, phần này chứa phần nội dung chính (content) và phần nội dung phụ (sidebar). Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người dùng xem. Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang (local navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo, Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công ty, địa chỉ, số điện thoại, mail liên hệ, và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết, 7 Nhóm các thẻ block Nhóm các thẻ block: là các thẻ dùng để sắp xếp bố cục cho trang web. Thẻ định dạng tiêu đề <hx> Gồm các thẻ từ <h1> cho đến <h6>, được sử dụng để định nghĩa tiêu đề cho nội dung HTML, giúp cho trình duyệt nhận biết được tiêu đề của một nội dung. Thẻ định dạng đoạn văn bản <p> Giúp trình duyệt xác định được đoạn văn bản trong trang HTML, thẻ này chỉ có thể chứa các thẻ thuộc nhóm inline, gồm: text, image, link, button, Thẻ phân chia khu vực <div> Ta có thể hiểu đây là sự phân chia khu vực hay vùng, sự phân chia này sẽ giúp cho trình duyệt hiểu rõ những vùng được bố cục trên trang web Thẻ xác định danh sách <dl>, <dt>, <dd> Sử dụng cho danh sách có các mục và có nội dung mô tả cho các mục. Thẻ danh sách có thứ tự <ol>, <li> Được sử dụng cho danh sách có thứ tự. Thẻ danh sách không có thứ tự <ul>, <li> 8 Được sử dụng cho danh sách không có thứ tự. Thẻ định dạng tiêu đề Định nghĩa và cách dùng Thẻ <hx>: chữ "h" viết tắc của từ "headings" nghĩa là đề mục, hoặc tiêu đề. Thẻ <hx> : Sử dụng để định nghĩa tiêu đề cho nội dung HTML, giúp cho trình duyệt nhận biết được tiêu đề của một nội dung. Thẻ <hx> có giá trị từ <h1> tới <h6>, trong đó mức độ quan trọng giảm từ <h1> tới <h6> (hay ta có thể hiểu: tiêu đề lớn nhất là <h1>, và tiêu đề nhỏ nhất là <h6>). Nội dung bên trong <hx></hx> chỉ nên chứa các thẻ thuộc nhóm inline. Thẻ <hx></hx> chỉ nên thể hiện tiêu đề, không dùng cho mục đích khác. Html viết: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Tiêu đề trang web</title> </head> <body> <h1>Đây là tiêu đề quan trọng nhất (lớn nhất)</h1> <h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2> <h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3> <h4>Đây là tiêu đề quan trọng thứ tư (lớn thứ tư)</h4> <h5>Đây là tiêu đề quan trọng thứ năm (lớn thứ năm)</h5> <h6>Đây là tiêu đề ít quan trọng nhất (nhỏ nhất)</h6> </body> </html> Hiển thị trình duyệt: Đây là tiêu đề quan trọng nhất (lớn nhất) Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì) Đây là tiêu đề quan trọng thứ ba (lớn thứ ba) Đây là tiêu đề quan trọng thứ tư (lớn thứ tư) Đây là tiêu đề quan trọng thứ năm (lớn thứ năm) Đây là tiêu đề ít quan trọng nhất (nhỏ nhất) Thẻ <h1> là thẻ quan trọng nhất trong trang HTML, trong một trang html thường người ta sử dụng <h1> một lần duy nhất cho logo, hoặc dòng mô tả trang web (mục đích SEO), mục đích của <h1> là khai báo cho trình duyệt biết đâu là phần quan trọng nhất của trang web. HTML viết <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Tiêu đề trang web</title> </head> <body> <h1>Logo</h1> <h2>Tiêu đề lớn</h2> <p>Nội dung của tiêu đề lớn</p> <h3>Tiêu đề nhỏ</h3> <p>Nội dung của tiêu đề nhỏ</p> </body> 9 </html> Hiển thị trình duyệt: Logo Tiêu đề lớn Nội dung của tiêu đề lớn Tiêu đề nhỏ Nội dung của tiêu đề nhỏ Những cấu trúc không nên sử dụng Không được chứa bên trong <hx></hx> các thẻ thuộc nhóm các thẻ block, code như thế này là sai, không đúng chuẩn W3C: HTML viết <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Tiêu đề trang web</title> </head> <body> <h1><p>Đây là đoạn văn</p></h1> <h2><div>Đây là đoạn văn</div></h2> <h3> <dl> <dt>Tiêu đề</dt> <dd>Nội dung</dd> </dl> </h3> <h2> <ul> <li>liên kết 01</li> <li>liên kết 02</li> </ul> </h2> </body> </html> Thẻ định dạng đoạn văn bản Định nghĩa và cách dùng Thẻ <p></p> viết tắt của từ "paragraphs" có nghĩa là đoạn văn. Thẻ <p></p> giúp trình duyệt xác định được đoạn văn bản trong trang HTML, thẻ này chỉ có thể chứa các thẻ thuộc nhóm inline , gồm: text, image, link, button, HTML viết <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Tiêu đề trang web</title> </head> <body> <p>Đây là đoạn văn</p> 10 <p><img src="images/img_planet.gif" alt="Space" /></p> <p>Trong đoạn văn này có chứa <a href="tut_html_layout.php">liên kết</a></p> </body> </html> Hiển thị trình duyệt: Đây là đoạn văn. Trong đoạn văn này có chứa liên kết. Để ngắt đoạn cho đoạn văn ta có thể dùng 2 cách: Ngắt đoạn cùng dòng: sử dụng thẻ <br /> (<br /> là thẻ thuộc nhóm inline). HTML viết <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Tiêu đề trang web</title> </head> <body> <p>Đây là đoạn văn dài rất dài rất dài rất dài<br /> rất dài rất dài rất dài rất dài.</p> </body> </html> Hiển thị trình duyệt: Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài. Ngắt đoạn khác dòng: sử dụng 2 thẻ <p></p> để ngắt đoạn khác dòng, tránh trường hợp sử dụng 2 lần thẻ <br /> vì về mặt ý nghĩa của thẻ sẽ không còn chính xác, điều này sẽ gây khó khăn cho trình duyệt phân biệt đâu là cùng đoạn, đâu là khác đoạn. HTML viết <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Tiêu đề trang web</title> </head> <body> <p>Đây là đoạn văn thứ nhất.</p> <p>Đây là đoạn văn thứ hai.</p> </body> </html> Hiển thị trình duyệt: Đây là đoạn văn thứ nhất. Đây là đoạn văn thứ hai. Những cấu trúc không nên sử dụng Không được chứa bên trong <p></p> các thẻ thuộc nhóm các thẻ block, code như thế này là sai, không đúng chuẩn W3C: [...]... có thứ tự và không có thứ tự Cấu trúc lồng bên trong HTML viết Cơm trưa 17 Cơm chiên hải sản Cơm sườn non nấu cam Cơm canh chua cá lóc Tráng miệng trái cây Nho tươi Chuối Mận Hiển thị trình duyệt: 1 Cơm trưa 1 Cơm chiên hải sản 2 Cơm sườn non nấu cam 3 Cơm canh... Nước: giúp chúng ta tăng cường lượng nước cần cho cơ thể. Thịt: giúp cơ thể tăng cường đạm, và chất béo. Hiển thị trình duyệt: Trái cây: giúp bỗ sung vitamin cho cơ thể Nước: giúp chúng ta tăng cường lượng nước cần cho cơ thể Thịt: giúp cơ thể tăng cường đạm, và chất béo Xem thêm ví dụ Cấu trúc và cách dùng Cấu trúc thẻ xác định danh sách phải theo... lồng bên trong HTML viết Cơm trưa Cơm chiên hải sản Cơm sườn non nấu cam Cơm canh chua cá lóc Tráng miệng trái cây Nho tươi Chuối Mận Hiển thị trình duyệt: Cơm trưa o Cơm chiên hải sản o Cơm sườn non nấu cam o Cơm canh chua cá lóc Tráng miệng trái cây o Nho tươi... lồng bên trong HTML viết 18 Cơm trưa Cơm chiên hải sản Cơm sườn non nấu cam Cơm canh chua cá lóc Tráng miệng trái cây Nho tươi Chuối Mận Hiển thị trình duyệt: 1 Cơm trưa o Cơm chiên hải sản o Cơm sườn non nấu cam Cơm canh chua cá lóc o 2 Tráng miệng trái cây o Nho tươi... label và id của input phải cùng giá trị, click vào nhãn Email để hiểu rõ hơn Email: Label - input dạng checkbox Nhãn 01: Nhãn 02: Thuộc tính for của label và id của input phải cùng giá trị, click vào nhãn 01 và 02... mail với chủ đề và nội dung được điền sẵn Khi sử dụng, người dùng click vào liên kết mail, sẽ lập tức mở ra chương trình gửi mail với chủ đề và nội dung đã được điền sẵn Các sử dụng này validator sẽ xuất hiện cảnh báo (warning) Email: support@hocwebchuan.com Viết thêm %20 vào các khoảng... các tag - - - - Tag xác định danh sách (có đề mục và mô tả đề mục) Trái nho: Thường màu đỏ hoặc xanh, có vị chua, ngọt. Trái chuối: Thường màu vàng, có vị ngọt. Trái nho: Thường màu đỏ hoặc xanh, có vị chua, ngọt Trái chuối: Thường màu vàng, có vị ngọt Ngày 01/04/2011 Ngày quốc tế nối dối. Ngày... , , , , Và một số thẻ không nên chứa như: , Thẻ và phải được viết trực tiếp bên trong : Bên trong thẻ chỉ chứa trực tiếp thẻ và , không được xen kẻ bất kỳ thẻ nào khác, những cấu trúc như bên... for="male">Nam: Nữ: Thuộc tính for của label và id của input phải cùng giá trị, click vào nhãn Nam và Nữ để hiểu rõ hơn (chú ý: giá trị của "name" trong 2 phải như nhau) Nam: 33 Nữ: Ví dụ về Table - mặc định 01 01 Table... Các thẻ danh sách có thứ tự và không có thứ tự Định nghĩa danh sách trong HTML/XHTML có nhiều dạng khác nhau, mỗi dạng sẽ theo một cấu trúc thẻ khác nhau, do đó việc hiểu rõ danh sách rất quan trọng, nếu bạn chưa nắm rõ cách định nghĩa về danh sách thì bạn không thể hiểu hết được bài học này, xin hãy xem trước định nghĩa về danh sách trong HTML/XHTML Danh . <textarea></textarea> <tt></tt> <u></u> <var></var> Trong phạm vi bài học, chúng ta chỉ đề cập tới một số thẻ inline. <head></head>: Phần khai báo ban đầu, khai báo về meta, title, css, javascript… <body></body>: Phần chứa nội dung của trang web, nơi