1. Trang Chủ
  2. Quản trị Web
  3. Hướng dẫn học thiết kế web kếp hợp HTML + CSS

Hướng dẫn học thiết kế web kếp hợp HTML + CSS

Đây là tài liệu học thiết kế Web cơ bản từ HTML đến CSS. Là bước khởi đầu để bạn nắm vững các nguyên tắc về thiết kế Web. Bước đầu tiên để bạn trở thành một người thiết kế Web chuyên nghiệp. Tài liệu có phần lý thuyết và bài tập để bạn thực hành. Một tài liệu đáng quan tâm ành cho những ai muốn tự học thiết kế Web 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 1 Mục

Thể loại Tài liệu miễn phí Quản trị Web

Số trang 207

Ngày tạo 8/30/2018 4:16:23 AM +00:00

Loại tệp DOC

Kích thước 1.74 M

Tên tệp

Tải Hướng dẫn học thiết kế web kếp hợp HTML + CSS (.docx) Tải Hướng dẫn học thiết kế web kếp hợp HTML + CSS (.pdf)

Xem mẫu

  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 1
  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 lồng bên trong ..........................................................................18 Những thẻ thuộc nhóm inline...................................................................................................19 Thẻ liên kết ................................................................................................................ 20 Thẻ ngắt đoạn văn bản ..................................................................................................21 Thẻ nhóm các inline ........................................................................................ 21 Thẻ hiển thị hình ảnh mạnh ......................................................................21 Thẻ dùng để nhấn mạnh nội dung văn bản ........................................................21 Ví dụ về liên kết ................................................................................................................22 Ví dụ về .......................................................................................................................23 Đoạn văn bản .....................................................................................................................24 Ví dụ về các tag - - .........................................................................................25 Ví dụ về các tag - ......................................................................................................25 Ví dụ về các tag - ......................................................................................................27 Ví dụ về thẻ ..............................................................................................................28 Ví dụ về thẻ .............................................................................................................. 30 Ví dụ về thẻ select - option...................................................................................................... 30 Ví dụ về thẻ ..........................................................................................................31 Ví dụ về thẻ ............................................................................................................32 Ví dụ về - .................................................................................................32 Ví dụ về thẻ .................................................................................................................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.......................................................................................................................42 Phần liên kết toàn cục global : navigation............................................................................... 44 Phần nội dung chính : content...................................................................................................45 Phần nội dung phụ : sidebar.....................................................................................................49 Phần cuối trang web : footer.....................................................................................................52 Giới thiệu về CSS.....................................................................................................................56 Sử dụng CSS.............................................................................................................................56 Cách viết một nội dung CSS.................................................................................................... 57 Cách viết một comment trong file CSS.................................................................................... 58 Các thuộc tính định dạng cho text............................................................................................ 58 Thuộc tính color.........................................................................................................................59 Thuộc tính font-size...................................................................................................................60 Thuộc tính font-family...............................................................................................................60 Thuộc tính font-weight..............................................................................................................60 2
  3. Thuộc tính letter-spacing...........................................................................................................61 Thuộc tính text-decoration.........................................................................................................62 Thuộc tính word-spacing...........................................................................................................62 Các thuộc tính định dạng chung............................................................................................... 62 Thuộc tính background..............................................................................................................63 Thuộc tính border...................................................................................................................... 64 Thuộc tính height.......................................................................................................................66 Thuộc tính text-align................................................................................................................. 66 Các thuộc tính điều khiển nội dung......................................................................................... 67 padding.......................................................................................................................................67 margin........................................................................................................................................ 76 float............................................................................................................................................ 83 Ví dụ về thuộc tính float...........................................................................................................88 clear............................................................................................................................................91 clearfix....................................................................................................................................... 96 display : Xác định sự hiển thị cho thành phần....................................................................... 102 position.....................................................................................................................................105 position: absolute..................................................................................................................... 111 position: fixed.......................................................................................................................... 116 position: static..........................................................................................................................116 Ví dụ về thuộc tính position...................................................................................................116 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.................................................................................................127 Ví dụ về thuộc tính vertical-align...........................................................................................128 Ví dụ về thuộc tính list-style.................................................................................................. 132 Ví dụ về thuộc tính margin.....................................................................................................135 Ví dụ về thuộc tính overflow..................................................................................................139 Ví dụ về thuộc tính z-index....................................................................................................141 Ví dụ về thuộc tính content.................................................................................................... 145 Kết hợp các thuộc tính CSS....................................................................................................146 Phần web : header...................................................................................................................150 Phần liên kết toàn cục global navigation................................................................................155 Phần nội dung : content.......................................................................................................... 157 Phần : sidebar.......................................................................................................................... 169 Phần : footer............................................................................................................................ 171 Tổng kết bài tập CSS..............................................................................................................176 Màu trong HTML & CSS........................................................................................................ 184 jQuery.......................................................................................................................................188 CSS3.........................................................................................................................................202 Tag mới trong HTML5............................................................................................................204 Những tag tương tự HTML4 / XHTML.................................................................................205 Những tag không được hỗ trợ trong HTML5........................................................................ 207 3
  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 Tiêu đề 01 Link 01 Link 02 Link 03 Link 04 Link 05 Nội dung chính Nội dung phụ Tên công ty Địa chỉ Hiển thị trình duyệt: Phân tích vị trí của các thẻ: 4
  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 Thẻ a thẻ span thẻ em thẻ 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: • : Phần khai báo chuẩn của html hay xhtml. • : Phần khai báo ban đầu, khai báo về meta, title, css, javascript… • : 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 Tiêu đề trang web ...Phần thân viết ở đây... 5
  6. 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,... 6
  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 đề • Gồm các thẻ từ cho đến , đượ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 • 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 • 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 , , • 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ự , • Được sử dụng cho danh sách có thứ tự. • Thẻ danh sách không có thứ tự , 7
  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ẻ : chữ "h" viết tắc của từ "headings" nghĩa là đề mục, hoặc tiêu đề. • Thẻ : 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ẻ có giá trị từ tới , trong đó mức độ quan trọng giảm từ tới (hay ta có thể hiểu: tiêu đề lớn nhất là , và tiêu đề nhỏ nhất là ). • Nội dung bên trong chỉ nên chứa các thẻ thuộc nhóm inline. • Thẻ chỉ nên thể hiện tiêu đề, không dùng cho mục đích khác. Html viết: Tiêu đề trang web Đâ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) 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ẻ là thẻ quan trọng nhất trong trang HTML, trong một trang html thường người ta sử dụng 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 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 Tiêu đề trang web 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ỏ 8
  9. 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 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 Tiêu đề trang web Đây là đoạn văn Đây là đoạn văn Tiêu đề Nội dung liên kết 01 liên kết 02 Thẻ định dạng đoạn văn bản Định nghĩa và cách dùng • Thẻ viết tắt của từ "paragraphs" có nghĩa là đoạn văn. • Thẻ 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 Tiêu đề trang web Đây là đoạn văn 9
  10. Trong đoạn văn này có chứa liên kết 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ẻ ( là thẻ thuộc nhóm inline). HTML viết Tiêu đề trang web Đâ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. 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ẻ để ngắt đoạn khác dòng, tránh trường hợp sử dụng 2 lần thẻ 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 Tiêu đề trang web Đây là đoạn văn thứ nhất. Đây là đoạn văn thứ hai. 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 các thẻ thuộc nhóm các thẻ block, code như thế này là sai, không đúng chuẩn W3C: 10
  11. HTML viết Tiêu đề trang web Đây là đoạn văn Đây là đoạn văn Tiêu đề Nội dung liên kết 01 liên kết 02 Thẻ phân chia khu vực Định nghĩa và cách dùng • Thẻ viết tắt của từ "division" có nghĩa là phân chia, 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. • Có thể chứa hầu hết các thẻ trong HTML/XHTML. • Một số thẻ không được chứa bên trong : , , , , . • Một số thẻ không nên chứa bên trong : , . • Một số khu vực khuyên sử dụng thẻ : o Header, global navigation, page body, content, sidebar, footer (Xem lại cấu trúc cơ bản của trang web) o Một số khu vực lớn, cấu trúc có nhiều thẻ bên trong thì cũng nên nhóm lại bằng thẻ để tiện cho việc điều khiển. Xem ví dụ để hiểu rõ hơn về thẻ , đoạn code bên dưới có sử dụng thuộc tính id, chúng ta có thể xem ở phần tham khảo thuộc tính id. HTML viết Tiêu đề trang web 11
  12. Viết nội dung phần header ở đây Viết nội dung phần global navigation ở đây Viết nội dung phần content ở đây Viết nội dung phần sidebar ở đây Viết nội dung phần footer ở đây Hiển thị trình duyệt: Viết nội dung phần header ở đây Viết nội dung phần global navigation ở đây Viết nội dung phần content ở đây Viết nội dung phần sidebar ở đây Viết nội dung phần footer ở đây Những cấu trúc không nên sử dụng Không nên sử dụng thẻ trực tiếp cho những chi tiết nhỏ như: một đoạn text, một image, một liên kết, một button,... nói tóm lại không nên sử dụng thẻ trực tiếp cho nhóm inline. Tuy trình duyệt sẽ hiển thị đúng ý đồ của tác giả, nhưng code như vậy sẽ không đúng với ý nghĩa của thẻ , khiến trình duyệt khó xác định được đâu là nội dung lớn đâu là nội dung nhỏ. HTML viết Tiêu đề trang web Đây là đoạn văn Trong đoạn văn này có chứa liên kết Thẻ xác định danh sách Đị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. Định nghĩa Thẻ xác định danh sách (có đề mục và mô tả đề mục) là một bộ gồm 3 thẻ: • viết tắt của chữ "definition list" có nghĩa là sự xác định (hay định nghĩa) danh sách. • viết tắt của chữ "defines an item" có nghĩa là xác định (hay định nghĩa) một mục. • viết tắt của chữ "defines describe an item" có nghĩa là xác định (hay định nghĩa) một mô tả của một mục. Thẻ xác định danh sách sử dụng cho danh sách có các mục và có nội dung mô tả cho các mục, không sử dụng cho danh sách không có phần nội dung mô tả. HTML viết 12
  13. Tiêu đề trang web 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. 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 các nguyên tắc sau đây: • Lúc nào cũng phải tồn tại 3 thẻ, không thể thiếu một trong 3: , , . • Bên trong thẻ chỉ chứa được các thẻ thuộc nhóm inline. • Bên trong thẻ chứa được hầu hết các thẻ HTML/XHTML, tuy nhiên không được chứa một số thẻ sau đâ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 dưới đây là sai, không đúng chuẩn W3C: 13
  14. Những cấu trúc không nên sử dụng Những cấu trúc dưới đây tuy hiển thị tốt cho trình duyệt, nhưng lại không đúng ý nghĩa của bộ 3 thẻ , , , sẽ khiến cho trình duyệt lúng túng trong việc xác định thẻ. Cấu trúc thiếu vắng : thiếu mục. Cấu trúc thiếu vắng : thiếu mô tả mục. Cấu trúc lặp nhiều cùng lúc: nhiều mục, nhưng thiếu mô tả. Cấu trúc lặp nhiều cùng lúc: Không cần phải phân nhiều mô tả cho một mục, chỉ cần viết tất cả mô tả trong một là được. Cấu trúc lồng bên trong khác: Cấu trúc này rườm rà khó điều khiển, ta nên sử dụng cấu trúc và kết hợp thay thế. 14
  15. Cấu trúc trên ta thay thế như sau: 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 sách có thứ tự Để thể hiện danh sách có thứ tự ta sử dụng cặp thẻ: và , trong đó: • là viết tắt của chữ "ordered list" có nghĩa là danh sách có thứ tự. • viết tắt của chữ "list item" có nghĩa là mục của danh sách. Danh sách sau đây gọi là danh sách có thứ tự: 1. 1. Cá lóc kho tiêu 2. 2. Cá rô kho tộ 3. 3. Cá thu chiên xoài bằm 4. 4. Cá điêu hồng nấu ngót Hoặc: 1. a) Học HTML 2. b) Học XHTML 3. c) Học HTML5 15
  16. 4. d) Học CSS2 5. e) Học CSS3 HTML viết Tiêu đề trang web Cá lóc kho tiêu Cá rô kho tộ Cá thu chiên xoài bằm Cá điêu hồng nấu ngót Hiển thị trình duyệt: 1. 1. Cá lóc kho tiêu 2. 2. Cá rô kho tộ 3. 3. Cá thu chiên xoài bằm 4. 4. Cá điêu hồng nấu ngót Số thứ tự của danh sách trình duyệt sẽ tự thêm vào. Xem thêm ví dụ Danh sách không có thứ tự Để thể hiện danh sách không có thứ tự ta sử dụng cặp thẻ: và , trong đó: • là viết tắt của chữ: unordered list có nghĩa là danh sách không có thứ tự • viết tắt của chữ: list item có nghĩa là mục của danh sách. Danh sách sau đây gọi là danh sách không có thứ tự: • Trang chủ • Giới thiệu • Sản phẩm • Dịch vụ • Liên hệ Hoặc: • Học HTML • Học XHTML • Học HTML5 • Học CSS2 • Học CSS3 HTML viết Tiêu đề trang web Trang chủ 16
  17. Giới thiệu Sản phẩm Dịch vụ Liên hệ Hiển thị trình duyệt: • Trang chủ • Giới thiệu • Sản phẩm • Dịch vụ • Liên hệ Xem thêm ví dụ Cấu trúc thẻ danh sách có thứ tự và không có thứ tự Cấu trúc thể hiện thẻ danh sách có thứ tự và không có thứ tự là tương tự nhau. Cấu trúc phải theo các nguyên tắc sau đây: • Lúc nào cũng phải tồn tại 1 cặp thẻ, không thể thiếu một trong 2: o Đối với danh sách có thứ tự, phải tồn tại cặp thẻ: , . o Đối với danh sách không có thứ tự, phải tồn tại cặp thẻ: , . • Bên trong thẻ (hoặc ) chỉ chứa trực tiếp một thẻ duy nhất . • Bên trong thẻ chứa được hầu hết các thẻ HTML/XHTML, tuy nhiên không được chứa một số thẻ sau đây: , , , , . Và một số thẻ không nên chứa như: , . • Bên trong thẻ (hoặc ) chỉ chứa trực tiếp thẻ , không được xen kẻ bất kỳ thẻ nào khác, những cấu trúc như bên dưới đây là sai, không đúng chuẩn W3C: Một số cấu trúc của danh sách có thứ tự và không có thứ tự Cấu trúc lồng bên trong HTML viết 17
  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 1. Cơm chiên hải sản 2. Cơm sườn non nấu cam 3. Cơm canh chua cá lóc 2. Tráng miệng trái cây 1. Nho tươi 2. Chuối 3. Mận Cấu trúc 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 o Chuối o Mận Cấu trúc lồng bên trong 18
  19. 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: 1. 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 2. Tráng miệng trái cây o Nho tươi o Chuối o Mận Vấn đề đặt ra là làm sao ta có thể thay đổi dạng của các số, VD đổi thứ tự 1,2,3,4,... sang I,II,III,IV,... hay đổi hình dạng tròn thành hình vuông,... những vấn đề này chúng ta có thể tham khảo thêm bên phần list-sytle của CSS. Những thẻ thuộc nhóm inline • Những thẻ thuộc nhóm inline là những thẻ cơ bản của HTML/XHTML, chỉ được dùng để chứa nội dung cho text hoặc các thẻ inline khác. • Bản thân text cũng có thể coi thuộc nhóm inline. • Những thẻ thuộc nhóm inline nên được bao ngoài bởi nhóm các thẻ block, vì các thẻ block sẽ lo nhiệm vụ dàn trang web, còn các thẻ thuộc nhóm inline chỉ để hiển thị nội dung cho văn bản. Học HTML rất dễ. Đây là một liên kết. Hiển thị trình duyệt: Học HTML rất dễ. Đây là một liên kết. • Những thẻ thuộc nhóm inline có thể được lồng vào nhau. • Không được sử dụng các thẻ khác bên trong các thẻ inline, cách sử dụng sau đây là không đúng chuẩn: 19
  20. Đây là cấu trúc sai. Đây là cấu trúc sai Các thẻ sau đây thuộc nhóm inline: • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • Trong phạm vi bài học, chúng ta chỉ đề cập tới một số thẻ inline thông dụng sau: • Thẻ liên kết • Thẻ hiển thị một image (hình ảnh) • Thẻ ngắt đoạn văn bản • Thẻ nhóm các inline • Thẻ hiển thị hình ảnh mạnh, mục đích đánh dấu chữ • Thẻ dùng để nhấn mạnh nội dung văn bản Thẻ liên kết • Thẻ liên kết dùng để tạo một liên kết từ trang web này sang trang web khác, từ vị trí này sang vị trí khác hay dùng để mở ra một object nào đó (có thể là file words, excel, pdf, mp3, movie,...), thẻ này có một thuộc tính bắt buộc: o href: Chứa đường dẫn cụ thể tới mục tiêu liên kết. • Tham khảo thêm về thẻ liên kết . HTML viết Đây là một liên kết Hiển thị trình duyệt: Đây là một liên kết Xem thêm ví dụ 20
nguon tai.lieu . vn
Tin học văn phòng Đồ họa - Thiết kế - Flash Quản trị Web Cơ sở dữ liệu Quản trị mạng Kỹ thuật lập trình Hệ điều hành Phần cứng An ninh - Bảo mật Chứng chỉ quốc tế Thủ thuật máy tính Điện - Điện tử Kinh tế học Hoá học Xã hội học Môi trường