1. 2. HTML/XHTML là gì
1.1. Giới thiệu HTML - HTML (HyperText Markup Language): Ngôn ngữ đánh dấu siêu văn bản. HTML được thiết kế ra để tạo nên các trang web trên World Wide Web. - HTML là tập cái thẻ (TAG) nhất định với ý nghĩa khác nhau để giúp hiển thị nội dung trên trình duyệt Web - XHTML (Extensible HyperText Markup Language) Ngôn ngữ Đánh dấu Siêu văn bản Mở rộng. Về phương diện kĩ thuật, XHTML nhằm tái tạo, mở rộng, thâu nạp HTML, tái cấu trúc lại dưới dạng XML. Các dạng tài liệu thuộc họ XHTML tất cả đều dựa trên XML. - XML (eXtensible Markup Language). XML được thiết kế để lưu trữ và chuyển đổi dữ liệu mà ở đó cả con người mà máy có thể đọc và hiểu được. Tham khảo https://www.w3schools.com/xml/
1.1.1. Lịch sử phát triển HTML 1989 Tim Berners-Lee invented www 1991 Tim Berners-Lee invented HTML 1993 Dave Raggett drafted HTML+ 1995 HTML Working Group defined HTML 2.0 1997 W3C Recommendation: HTML 3.2 1999 W3C Recommendation: HTML 4.01 2000 W3C Recommendation: XHTML 1.0 2008 WHATWG HTML5 First Public Draft 2012 WHATWG HTML5 Living Standard 2014 W3C Recommendation: HTML5 2016 W3C Candidate Recommendation: HTML 5.1 2017 W3C Recommendation: HTML5.1 2nd Edition 2017 W3C Recommendation: HTML5.2
1.2. Thẻ (TAG) HTML Thẻ HTML là có cấu trúc là một chữ liền không có kĩ tự đặc biệt và nằm trong cặp "<" và ">". Thẻ HTML có thẻ đóng, thẻ mở tương ứng. Bên trong là nội dung. Thẻ HTML có thể chứa Thẻ HTML khác. Thẻ HTML có 2 loại thuộc tính chính: thuộc tính, thuộc tính sự kiện
1.2.1. Cấu trúc cơ bản - Cấu trúc: html, head, title, style, meta, link, script, base, body - Tiêu đề: h1 - h6 - Phân đoạn: p - Khối phân đoạn (Division): div - Khối nối phân đoạn: span - Đường ngang: hr - Dòng mới: br - Thẻ định dạng: pre - Hình ảnh: img, map, area, picture - Liên kết: a - Iframe: iframe - Ghi chú mã: <!-- Just comment. Browser don't execute it -->
1.2.2. Thẻ định dạng nội dung - Chữ đập: b - Chữ quan trọng: strong - Chữ in nghiêng: i - Chữ gạch dưới: u - Chữ nhấn mạnh: em - Chữ có điểm nhấn: mark - Chữ nhỏ: small - Chữ bị xóa: del - Chữ được thêm: ins - Chữ số dưới: sub - Chữ số trên: sup
1.2.3. Bảng (Table) - Xác định một bảng: table - Nhóm tiêu đề trong bảng: thead - Nhóm nội dung trong bảng: tbody - Nhóm chân trong bảng: tfoot - Tiêu đề trong bảng: th - Hàng trong bảng: tr - Ô trong bảng: td - Chú thích bảng: caption - Nhóm nhiều cột trong bảng: colgroup - Cột trong phần tử colgroup: col
1.2.4. Danh sách (List) - Danh sách không có thứ tự: ul - Danh sách có thứ tự: ol - Mục danh sách: li Danh sách mô tả - Danh sách mô tả: dl - Thuật ngữ trong mô tả: dt - Mô tả một thuật ngữ dt: dd
1.2.5. Biểu mẫu (Form) - Biểu mẫu: form - Điều khiển đầu vào: input - Điều khiển đầu vào vùng văn bản: textarea - Nhãn cho phần tử input: label - Nhóm các phần tử liên quan: fieldset - Chú thích cho phần tử fieldset: legend - Danh sách: select - Nhóm tùy chọn trong Danh sách: optgroup - Tùy chọn trong Danh sách: option - Nút nhấn: button - Danh sách các tùy chọn được xác định: datalist - Xác định kết quả: output
1.2.5.1. Các mẫu Input <input type = "button"> <input type = "checkbox"> <input type = "color"> <input type = "date"> <input type = "datetime-local"> <input type = "email"> <input type = "file"> <input type = "hidden"> <input type = "image"> <input type = "month"> <input type = "number"> <input type = "password"> <input type = "radio"> <input type = "range"> <input type = "reset"> <input type = "search"> <input type = "submit"> <input type = "tel"> <input type = "text"> <input type = "time"> <input type = "url"> <input type = "week">
1.2.6. Phân loại (HTML Block and Inline) - Phần tử khối: address, blockquote, canvas, dd, div, dl, dt, fieldset, form, h1-h6, hr, li, noscript, ol, p, pre, table, tfoot, ul, video, iframe - Phần tử Semantic (Cũng là phần tử khối): header, footer, aside, nav, main, section, article, details, figcaption, figure, mark, summary, time - Phần tử nội tuyến: a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em (italic), i, img (https://unsplash.com), input, kbd, label, map, object, output, q, samp, script, select, small, span, strong, sub, sup, textarea, time, tt, var
1.2.7. Các yếu tố trích dẫn và báo giá - Xác định chữ viết tắt: abbr - Xác định tác giả / chủ sở hữu của một tài liệu: address - Xác định hướng văn bản: bdo - Xác định một phần được trích dẫn từ một nguồn khác: blockquote - Xác định tiêu đề của tác phẩm: cite - Xác định nội tuyến ngắn: q
1.2.8. Thuộc tính chung Các thuộc tính toàn cục là các thuộc tính có thể được sử dụng với tất cả các phần tử HTML. Hay sử dụng - id - Chỉ định mã định danh của phần tử - style - Chỉ định kiểu CSS nội tuyến cho phần tử - class - Chỉ định một hoặc nhiều tên lớp cho phần tử - title - Chỉ định thông tin bổ sung về phần tử - data-* - Lưu trữ dữ liệu tùy chỉnh riêng tư cho trang - draggable - Chỉ định phần tử có thể kéo thả - hidden - Chỉ định phần tử ẩn/hiện - tabindex - Chỉ định thứ tự tab của phần tử Ít được sử dụng - accesskey - Phím tắt để kích hoạt phần tử - contenteditable - Chỉ định phần tử có thể chỉnh sửa - dir - Chỉ định văn bản cho nội dung trong phần tử - lang - Chỉ định ngôn ngữ của nội dung phần tử - spellcheck - Chỉ định liệu phần tử có chính tả và ngữ pháp đã được kiểm hay ko - translate - Chỉ định xem nội dung của một phần tử có nên dịch hay không https://www.w3schools.com/tags/ref_standardattributes.asp
1.2.9. Thuộc tính theo thẻ Thuộc tính HTML và những phần tử nào chúng có thể được sử dụng bên trong https://www.w3schools.com/tags/ref_attributes.asp
1.2.10. Thuộc tính sự kiện HTML có khả năng cho phép các sự kiện kích hoạt các hành động trong trình duyệt, như khởi động JavaScript khi người dùng nhấp vào một phần tử https://www.w3schools.com/tags/ref_eventattributes.asp
1.2.11. Digging into HTML - Layout Elements - Layout Techniques - Responsive Web Design - Computer Code Elements - HTML Semantic Elements - HTML Style Guide - HTML Entities - HTML Symbols - Emojis in HTML - HTML Encoding (Character Sets) - HTML Uniform Resource Locators - HTML Versus XHTML - HTML Graphics - HTML Media - HTML APIs - HTML References Tham khảo https://www.w3schools.com/html/
1.3. Tài liệu tham khảo
1.3.1. Tài liệu học tập https://www.w3schools.com/html/ https://www.w3schools.com/xml/
1.3.2. Tài liệu tra cứu https://www.w3schools.com/tags/
2. 3. Cascading Style Sheets
2.1. Giới thiệu Cascading Style Sheets Ngôn ngữ định kiểu nội dung. Được sử dụng để "định dạng" cho các phần tử (thông qua selector) trên trang web.
2.1.1. Selector là gì? Là cách xác định phần tử hay nhóm phần tử thông qua id, class, pseudo-classes, tag, attribute Hiểu được selector sẽ dễ hiểu khi tiếp cận Javascript xử lý các phần tử HTML
2.1.1.1. CSS Attribute Selectors
2.1.2. Áp dụng CSS - Inline (Nội tuyến) - bằng cách sử dụng thuộc tính style bên trong HTML các phần tử - Internal (Nội bộ) - bằng cách sử dụng phần tử <style> trong phần tử <head> - External (Bên ngoài) - bằng cách sử dụng phần tử <link> để liên kết với một tệp CSS bên ngoài
2.1.3. Các CSS phổ biến
2.1.3.1. CSS cơ bản - Color + color: Màu sắc nội dung trong phần tử + background-color: Màu sắc nền phần tử - CSS Backgrounds + background-color: Màu sắc nền + background-image: Hình ảnh nền + background-repeat: Lặp lại trong nền + background-attachment: Loại hiển thị nền + background-position: Vị trí hiển thị trong nền + background (shorthand property): Nền - CSS Borders + border-width: Độ rộng viền + border-color: Màu sắc viền + border-style: : Kiểu viền + border-top-style: Kiểu viền trên + border-right-style: Kiểu viền phải + border-bottom-style: Kiểu viền dưới + border-left-style: Kiểu viền trái + border-radius: Kiểu viền bo tròn + border (style required): Kiểu viền - CSS Margins + margin-top: Lề trên + margin-right: Lề phải + margin-bottom: Lề dưới + margin-left: Lề trái + margin: Canh lề - CSS Padding + padding-top: Đệm/lót trên + padding-right: Đệm/lót phải + padding-bottom: Đệm/lót dưới + padding-left: Đệm/lót trái - CSS Outline + outline-style: Kiểu của hình thể + outline-color: Màu của hình thể + outline-width: Chiều rộng hình thể + outline-offset: Hình thể ngoài + outline: Hình thể - CSS Height, Width + height: Chiều cao phần tử + width: Chiều rộng phần tử + max-height: Chiều cao tối đa + max-width: Chiều rộng tối đa + min-height: Chiều cao tối thiểu + min-width: Chiều rộng tối thiểu - CSS Box Model + Content - Nội dung + Padding - Phần đệm quan nội dung + Border - Viền quanh vùng đệm + Margin - Vùng ngoài cùng - CSS Text + color: Màu nội dung + Text Alignment + text-align: Hướng canh lề + text-align-last: Hướng canh lề + direction: Hướng hiển thị + unicode-bidi: Hướng hiển thị + vertical-align: Canh chỉnh chiều dọc + Text Decoration + text-decoration-line: Trang trí dòng + text-decoration-color: Trang trí màu + text-decoration-style: Trang trí kiểu + text-decoration-thickness: Trang trí độ dày mỏng + text-decoration: Trang trí + Text Transformation + text-transform: Thay đổi text + Text Spacing + text-indent: Thụt lề + letter-spacing: Khoảng cách các kí tự + line-height: Khoảng cách các dòng + word-spacing: Khoảng cách các từ + white-space: Khoảng trắng + Text Shadow + text-shadow: Bộ bóng của text - CSS Fonts + font-family: Chỉ định font chữ cho text - CSS Icons + Sử dụng thẻ nội tuyến (ví dụ <i> hoặc <span>) - CSS Links + a:link - Trạng thái mặc định + a:visited - Trạng thái visited + a:hover - Trạng thái hover + a:active - Trạng thái kích hoạt - CSS Lists + list-style: Chỉ định thuộc tính trong danh sách + list-style-image: Hình anh đánh dấu (marker) danh mục + list-style-position: Vị trí đánh dấu danh mục + list-style-type: Kiểu đánh dấu danh mục - CSS Tables + Table Borders + border: Viền quanh table + Table Size + width: Chiều rộng table + height: Chiều dài table + Table Alignment + text-align: Hướng canh lề + Table Style + Table Responsive - CSS Display + display: Chỉ định phần tử sẽ hiển thị + visibility: Chỉ định phần tử có thấy được hay ko - CSS Position + bottom: Lề dưới cùng + clip: Định vị tuyệt đối + left: Lề trái cùng + right: Lề phải cùng + top: Lề trên cùng - Other CSS: z-index, overflow, float, inline-block, align, opacity/transparency, !important - More: CSS Navigation Bar, Image Gallery, Image Sprites, CSS Forms, CSS Counters, CSS Website Layout, CSS Units, CSS Math Functions
2.1.4. CSS nâng cao - CSS Specificity - CSS Combinators - CSS Pseudo-classes - CSS Pseudo-elements - CSS Attribute Selectors - CSS Advanced * - CSS Responsive * - CSS Grid, Flexbox * - CSS SASS Tham khảo https://www.w3schools.com/css/
2.2. Tài liệu tham khảo
2.2.1. Tài liệu học tập https://www.w3schools.com/css/ https://www.w3schools.com/css/css_examples.asp https://web.dev/ (Hữu ích)
2.2.2. Tài liệu tra cứu https://www.w3schools.com/cssref/ https://developer.mozilla.org/en-US/docs/Web/CSS https://css-tricks.com/almanac/ (Hữu ích)
3. 4. Tổng kết
3.1. - Làm quen các Tag HTML thông dụng. Hiểu được ý nghĩa các thẻ và làm sao tọa trang web với HTML - Biết được vai trò quan trọng CSS và có kiến thức cơ bản để làm trang web trở nên thu hút hơn, nội dung hiển thị rõ ràng hơn. - Sử dụng IDE VSCode và Plugins để tạo các trang Web một cách nhanh chóng và hiệu quả. Tránh được nữa lỗi khi lập trình.
3.1.1. Tổng kết HTML Thẻ và khái niệm quan trọng: + List (ol/ul/li), + Form (Biểu mẫu) + Table (Bảng) + Các phần tử ngữ nghĩa (Semantic Elements) + Thuộc tính thẻ + Thuộc tính sự kiện Các thẻ hay sử dụng: + In-line: span, a, input/select/textarea, meta + Block: div, p, ul/ol, form, table
3.1.2. Tổng kết CSS (Mastering CSS) 1. CSS Foundations + Selectors, Combinators + CSS Combinators + descendant selector (space) + child selector (>) + adjacent sibling selector (+) + general sibling selector (~) + https://www.w3schools.com/cssref/trysel.asp + Image/Icon/Background + Colours/Fonts/Lists/Tables/Links + Display and Position and Overflow + Others: + Min/Max width + Text Effects + Masking + Pseudo Classes: `selector:pseudo-class` https://www.w3schools.com/css/css_pseudo_classes.asp :active :checked :disabled :empty :enabled :first-child :first-of-type :focus :hover :in-range :invalid :lang(language) :last-child :last-of-type :link :not(selector) :nth-child(n) :nth-last-child(n) :nth-last-of-type(n) :nth-of-type(n) :only-of-type :only-child :optional :out-of-range :read-only :read-write :required :root :target :valid :visited + Pseudo Elements `selector::pseudo-element` https://www.w3schools.com/css/css_pseudo_elements.asp Only have 6 items: ::after ::before ::first-letter ::first-line ::marker ::selection + z-index, !important + Specificity & Cascading flow (Cascade, Specificity, and Inheritance) 2. Box mode + border-* (Borders) + box-* + background-* + padding-* + margin-* 3. Layout + Flexbox + Grid + Floating 4. Units/Viewport units + % — Relative to the parent element + px — Relative to the viewing device + rem — Relative to font-size of the root element + em — Relative to the font-size of the element (2em means 2 times the size of the current font) + vh — Relative to 1% of the height of the viewport* + vw — Relative to 1% of the width of the viewport* 5. CSS3 + calc() function (Math Functions) + Variables var() + CSS3+ 6. Responsive website - media queries + Responsive Design & Fluid Layout 7. Animations & Transitions & 2D/3D Transforms + Animations is a way to animate something with many keyframes stop + Keyframes + Bézier curves + https://css-tricks.com/advanced-css-animation-using-cubic-bezier/ + https://youtu.be/aVwxzDHniEw + Transitions is a way to control how CSS value goes from state A to B + Transforms is often something you need to animate and transition which makes transform go hand in hand with CSS animation and transition 8. Preprocessors SASS, LESS, STYLUS and POSTCSS + SaSS Preprocessors + Variables + Nesting of Selectors 9. CSS Architecture (Naming convention) + BEM — Block Element Modifiers + OOCSS — Object-Oriented CSS + SMACSS — Scalable Modular Architecture for CSS 10. Frameworks & Design System: Bootstrap, Semantic-UI or Materialize 11. DevTools