Làm cách nào để viết mã bằng HTML và CSS?

Nếu bạn là nhà cung cấp nội dung, hãy đọc HTML. Nếu bạn là nhà thiết kế đồ họa, hãy đọc CSS. Nếu bạn là một lập trình viên và muốn thêm các hiệu ứng động vào trang web của mình, hãy đọc JavaScript. Nhưng nếu bạn hoạt động trong OMO (do một người vận hành) và dự kiến ​​sẽ tạo ra một trang web khá đẹp mắt, thì bạn cần phải hiểu HTML, CSS và JavaScript. Đây là lý do mà tôi kết hợp cả HTML và CSS trong bài viết này vì chúng không thể tách rời

Để tạo một trang web OMO, tôi khuyên bạn nên

  1. Hiểu rõ về HTML, CSS và JavaScript
  2. Chọn một công cụ soạn thảo. Sử dụng Dreamweaver nếu bạn có đủ khả năng. Nếu không, hãy tìm một trình chỉnh sửa mã nguồn miễn phí (chẳng hạn như VS Code, Sublime Text, Sublime Text, NotePad++). Đối với các lập trình viên, Eclipse/NetBeans/VSCode là lựa chọn tốt cho HTML/CSS/JavaScript khi họ thực hiện kiểm tra cú pháp và cung cấp mã tự động hoàn thành
  3. Thiết kế và tổ chức trang của bạn. Quyết định giao diện trang web của bạn. Có bao nhiêu cột? . g. , tiêu đề, menu điều hướng, nội dung chính, thanh bên, mục lục, chân trang)?
  4. Xem kỹ các trang web yêu thích của bạn. CSS rất cồng kềnh và phức tạp. Bạn không thể phát minh ra bánh xe này. Sử dụng Trình gỡ lỗi F12 để kiểm tra HTML/CSS của các trang web yêu thích của bạn
    Sử dụng khung CSS, chẳng hạn như BootStrap, để bắt đầu thiết kế của bạn
  5. Bắt đầu với thiết kế CSS ban đầu. Thiết kế trang web bắt đầu bằng CSS, KHÔNG phải HTML?. Làm việc trên CSS của bạn
    1. Phân vùng trang web của bạn thành phần hợp lý thông qua

      (hoặc HTML5',,

      ,), chẳng hạn như đầu trang, nội dung, chân trang. Chỉ định một
      The h1 tags enclose a heading level 1
      

      The p tags is used to markup a paragraph.

      1 cho

      đó là duy nhất (e. g. , "

      The h1 tags enclose a heading level 1
      

      The p tags is used to markup a paragraph.

      2", "
      The h1 tags enclose a heading level 1
      

      The p tags is used to markup a paragraph.

      3". Gán tên lớp chung cho các phần (không phải là duy nhất) có cùng kiểu (e. g. , "
      The h1 tags enclose a heading level 1
      

      The p tags is used to markup a paragraph.

      4", "_______0_______5"). Viết CSS id-selectors và class-selector (e. g. ,
      The h1 tags enclose a heading level 1
      

      The p tags is used to markup a paragraph.

      6
      The h1 tags enclose a heading level 1
      

      The p tags is used to markup a paragraph.

      7
      The h1 tags enclose a heading level 1
      

      The p tags is used to markup a paragraph.

      8) cho các thẻ phổ biến (chẳng hạn như
      The h1 tags enclose a heading level 1
      

      The p tags is used to markup a paragraph.

      9,


      Làm cách nào để viết mã bằng HTML và CSS?
      0,


      Làm cách nào để viết mã bằng HTML và CSS?
      1,


      Làm cách nào để viết mã bằng HTML và CSS?
      2,


      Làm cách nào để viết mã bằng HTML và CSS?
      3,


      Làm cách nào để viết mã bằng HTML và CSS?
      4,


      Làm cách nào để viết mã bằng HTML và CSS?
      5,


      Làm cách nào để viết mã bằng HTML và CSS?
      6), trong mỗi thẻ

      'S. Về cơ bản, những gì tôi đang nói là tự thiết kế từng phần - một chiến lược "chia để trị"

    2. Tạo các lớp con cho các kiểu phổ biến, chẳng hạn như bố cục bảng và hình ảnh và các hiệu ứng đặc biệt (e. g. , "


      Làm cách nào để viết mã bằng HTML và CSS?
      7", "


      Làm cách nào để viết mã bằng HTML và CSS?
      8", "


      Làm cách nào để viết mã bằng HTML và CSS?
      9"). Chúng có thể được sử dụng trong




      Làm cách nào để viết mã bằng HTML và CSS?
      0

    3. Có rất nhiều mẫu CSS (hoặc mẫu web) tốt và miễn phí có sẵn trực tuyến (chỉ cần google "Mẫu CSS" hoặc "Mẫu web"). Chọn một cái đáp ứng sở thích của bạn để làm mẫu sau. Bạn cũng có thể xem CSS của bất kỳ trang web nào mà bạn thấy thú vị. Lưu ý về Quyền sở hữu trí tuệ, không sử dụng bất kỳ hình ảnh hoặc đồ họa nào trừ khi chúng thuộc phạm vi công cộng. Cực kỳ dễ dàng để tự tạo một cái bằng một công cụ hình ảnh, chẳng hạn như PhotoShop, Element, Illustrator hoặc thậm chí là Paint
      Sử dụng khung CSS, chẳng hạn như BootStrap;
  6. Viết các trang HTML của bạn. Bạn có thể cần sửa đổi CSS khi tiếp tục. Thách thức lớn nhất đối với tác giả web OMO là phải quan tâm đến cả nội dung và hình thức cùng một lúc, đôi khi có thể mất tập trung.
  7. Lặp lại các bước trước đó cho đến khi bạn hài lòng với giao diện, bố cục và quan trọng nhất là nội dung của trang - cố gắng không tạo thêm một trang web không đáng kể nào khác

Tôi đã viết những điều trên từ nhiều năm trước khi tạo các trang web này (Bạn có thể xem CSS của tôi). Hôm nay, tôi khuyên bạn nên tìm hiểu kiến ​​thức cơ bản về HTML/CSS, nhưng hãy nhanh chóng chuyển sang một khuôn khổ như BootStrap để tạo ra các trang web có giao diện chuyên nghiệp. Bạn không thể viết tốt hơn những người này

Giới thiệu về HTML

HTML (Ngôn ngữ đánh dấu siêu văn bản) là gì?
  1. HTML là ngôn ngữ để xuất bản các trang web trên WWW (World-Wide Web, hay World-Wide Wait?)
  2. HTML là Ngôn ngữ mô tả tài liệu (còn gọi là Ngôn ngữ đánh dấu tài liệu). HTML là ngôn ngữ đánh dấu tiêu chuẩn cho các tài liệu được thiết kế để hiển thị trong trình duyệt web. HTML KHÔNG phải là ngôn ngữ lập trình như C/C++/C#/Java, được sử dụng để triển khai thuật toán lập trình
  3. Tài liệu HTML là tài liệu văn bản và con người có thể đọc được
  4. Ngày nay, HTML hoạt động cùng với CSS (Cascading Style Sheets) (dành cho bố cục) và JavaScript (dành cho lập trình)
Phiên bản HTML
  • Dự thảo HTML (tháng 10 năm 1991). Tim Bernes-Lee (của CERN) đã đề xuất HTML đầu tiên (với 18 thẻ) để chia sẻ tài liệu trong hệ thống siêu văn bản
  • HTML2. 0 (24-11-1995). Xuất bản dưới dạng IETF RFC 1866
  • HTML3. 2 (14-01-1997). Xuất bản dưới dạng W3C HTML 3. 2 khuyến nghị
  • HTML4. 0 (tháng 12 năm 1997). Xuất bản dưới dạng W3C HTML 4. 0 Khuyến nghị, với bộ khung nghiêm ngặt, chuyển tiếp và. Vào ngày 24 tháng 12 năm 1999, HTML 4. 01 đã được W3C xuất bản dưới dạng đặc tả HTML cuối cùng. Tháng 5 năm 2000, HTML 4. 01 Nghiêm ngặt theo tiêu chuẩn quốc tế ISO/IEC 15445. 2000
  • XHTML 1. 0 (tháng 1 năm 2000). W3C được coi là HTML 4. 01 làm HTML cuối cùng và chuyển sang phát triển XHTML 1. 0 với các quy tắc và cú pháp chặt chẽ hơn, tiếp theo là XHTML 2. 0. XHTML 2. 0, mặc dù đẹp về mặt lý thuyết, nhưng không thực tế vì nó không tương thích ngược với HTML4/XHTML1. 0. Một nhóm nổi loạn có tên là WHATWG (Nhóm làm việc về công nghệ ứng dụng siêu văn bản web) tiếp tục làm việc để mở rộng HTML với nhiều tính năng hơn theo cách tương thích ngược. Năm 2004, WHATWG phát hành HTML5. Đến năm 2007, HTML5 đã thu hút được sự chú ý của các nhà phát triển. W3C quyết định từ bỏ XHTML 2. 0 và chấp nhận HTML5
  • HTML 5 (28-10-2014). HTML 5 đã được xuất bản dưới dạng Khuyến nghị của W3C, tiếp theo là HTML 5. 1 vào ngày 1 tháng 11 năm 2016 và HTML 5. 2 vào ngày 14 tháng 12 năm 2017
  • Vào ngày 28 tháng 5 năm 2019, W3C đã thông báo rằng WHATWG sẽ là nhà xuất bản duy nhất của các tiêu chuẩn HTML và DOM

Ngày nay, các thông số kỹ thuật phổ biến là HTML5 (@ https. //html. thông số kỹ thuật. cái gì. org/multipage/). Tuy nhiên, điều thú vị nhất về các tiêu chuẩn là không ai thực sự tuân theo chúng một cách nghiêm ngặt. Mọi trình duyệt (Chrome, Firefox, Opera, Safari và Internet Explorer) đều có các biến thể riêng và hỗ trợ các tiêu chuẩn ở nhiều mức độ khác nhau (để vượt trội so với các trình duyệt khác)

Thẻ đánh dấu

HTML sử dụng các thẻ đánh dấu, chẳng hạn như

(đối với Đoạn),

đến (đối với Tiêu đề cấp 1 đến 6),



Làm cách nào để viết mã bằng HTML và CSS?
1 (đối với Hình ảnh),



Làm cách nào để viết mã bằng HTML và CSS?
0 (đối với Anchor hoặc Hyperlink), để đánh dấu một tài liệu. Các thẻ đánh dấu HTML thực hiện các chức năng này
  1. Bố cục tài liệu, đ. g. ,

    (bố cục như một đoạn văn),

    đến (bố cục theo tiêu đề cấp độ 1 đến 6),



    Làm cách nào để viết mã bằng HTML và CSS?
    3 (thực hiện ngắt dòng),



    Làm cách nào để viết mã bằng HTML và CSS?
    4 (vẽ thước kẻ ngang), (tabulating data),
      (layout an ordered list).
    1. Provide link (called hyperlink) to another HTML document, via the ________19_______0(Anchor tag). These hyperlinks, a distinct feature in HTML, greatly help the users in navigating the web and enrich the users' experience. Hyperlinks make the HTML popular.
    2. Embed images, audios, videos, programs (in JavaScript, VBScript, Applet, Flash, or MS ActiveX control), and objects within an HTML document. HTML is multimedia! The hypertext document may contain texts, images, audios, videos, and even programs.
    Separating Content and Presentation

    The purpose of a markup language is to relieve the content provider from worrying about the actual appearance of the document. The author merely indicates (via markup tags) the semantic meaning of the words and sentences (such as paragraph, heading, emphasis, and strong), and leave it to the browser to interpret the markups and render the document for display on the screen. In other words, it allows the separation of content and presentation. The content provider focuses on the document contents, while the graphic designer concentrates on the view and presentation.

    Nowadays, HTML should be used solely to markup the contents, while its companion technology known as CSS (Cascading Style Sheet) be used for defining the presentation of the document, so as to separate the content and presentation.

    These are the common pitfalls in older HTML documents and you should avoid:

    • Do not specify "appearance" properties, such as foreground and background color, text alignment, font face, font size, border, margin and padding, in the HTML document. Use an external CSS instead to set the appearance and presentation. Presentation-related tags (such as ________19_______0,) and attributes (such as ________19_______7, ________19_______8, ________19_______9, ________29_______0, ________29_______1) have been deprecated in HTML 4, in favor of CSS.
    • Do not use nested tables or frame for formatting the document, use

      and ________19_______0, or HTML5 new tags such as,, and

      .

    HTML Authoring Tools

    HTML documents can be created by a wide range of tools, from simple plain-text editors (not recommended), source-code editor (e.g., VS Code, Sublime Text, Notepad++), programming IDE (e.g., Eclipse, NetBeans) to sophisticated WYSIWYG (What You See Is What You Get) editors (e.g., Dreamweaver).

    HTML By Examples

    Let's go thru some HTML examples and the syntaxes. Do not attempt to start designing your website until you understand the CSS.

    Example 1: Basic Layout of an HTML Document

    Let's begin with a simple example to illustrate the basic layout of an HTML document.

    ________32_______

    Use a source-code editor, which provides syntax highlighting, auto-code-complete, snippets, etc (such as VS Code, Sublime Text, Atom, NotePad++) to enter the above HTML codes and save as "________29_______3".

    Notes: If you use macOS's default TextEdit (NOT Recommended), select "Format" to "Make Plain Text" and choose "Unicode (UTF-8)" for character encoding before saving your file. Also, Windows NotePad is NOT Recommended, as it does not provide syntax highlighting, auto-code-complete, snippets, etc.

    Open the file in a browser (such as Firefox, Internet Explorer/Edge, Chrome, Safari, Opera) by double-clicking the file; or drag and drop the file into the browser; or through the browser's "File" menu ⇒ "Open File..." ⇒ "Browse..." and select the file.

    How it Works?
    1. An HTML document begins with a Document-Type Declaration (Line 1) to identify itself as an HTML document to the browser.
    2. The HTML content is contained within a pair of ________29_______4 container tags. You can specify the default language of your document via attribute ________29_______5 (for English) inside the opening tag.
    3. Làm cách nào để viết mã bằng HTML và CSS?
    4. There are two sections in the document: ________29_______6 and ________29_______7, marked by ________29_______4 and ________29_______4 tags, respectively.
    5. In the ________29_______6 section:
      1. The ________19_______0 element (Line 4) specifies the character encoding scheme of the document. Today, virtually all (English) HTML documents are encoded using the ________42_______02 character encoding scheme, which is compatible with ASCII code for English alphabets and allow you to include other Unicode characters (such as Chinese, Japanese and Korean) efficiently.
        When saving your file, you need to choose "UTF-8 encoding" in the "save-as" dialog menu.
      2. The ________29_______4 element (Line 5) provides a descriptive title to the page. The browser displays the title on the title-bar of the tab/window.
    6. In the ________29_______7 section:
      1. The ________42_______05 container tags (Line 8) mark the enclosing texts as Level-1 Heading. There are six levels of heading in HTML, from ________42_______05 (largest) to ________29_______4. Line 11 uses a ________42_______08 (Heading Level-3).
      2. The ________19_______4 standalone element (Line 9), which does not enclose text content, draws a horizontal rule (or line).
      3. The ________42_______10 container tags (Line 10 and 12) mark the enclosing texts as a paragraph. ________42_______10 is the most frequently-used tag in HTML.
      4. The ________42_______12 tags (nested under the ________42_______10 in Line 10) specify "strong emphasis" for its content - rendered in bold by the browser. Similarly, the nested ________42_______14 tags (Line 12) specify "emphasis" rendered in italic; and ________29_______4 (HTML 5) requests for highlight.

    View Page Source

    You can read the HTML source code by right-clicking on the page and select "View Source" (or "View Page Source", or "Show Page Source"). Try it out.

    Note: For macOS's Safari, you may need to enable "Show Page Source" via "Preferences" ⇒ Advanced ⇒ "Show Develop menu in menu bar".

    Don't Load the Cached Page (Ctrl-F5)!

    Most browsers cache web pages (and the associated images, style sheets, JavaScripts) to boost the speed for web surfing. When you modify and reload a page (via the refresh key F5), the browser might retrieve the un-modified cache copy. To force the browser to reload the page (and all its associated resources) from the source, hit Ctrl-F5.

    Most Frequently-Used HTML Elements

    The most frequently-used HTML elements are:

    • block elements:

      (paragraph), ________19_______3 (line break),

      to (heading level 1 to 6), ________19_______4 (horizontal rule),
      • (unordered list),
        1. (ordered list).
        2. inline elements: ________19_______0(bold), ________19_______0(italic), ________19_______1 (image), ________19_______0(anchor for hyperlink).
        3. table

    ________29_______4, and then mark the cells of the row via (for header cell) or (for details cell).
  2. The
  3. element can be nested under....

    I shall illustrate the use of these elements through the following examples.

    Example 2: Lists and Hyperlinks

    ________42_______
    How it Works?
    1. The (in Line 3) is an HTML comment. Comments are ignored by the browsers, but are important to provide explanations to the readers as well as the author.
    2. There are two types of lists in HTML: ordered list and unordered list. An ordered list is marked by ________42_______23 and displayed with numbers; while a unordered list is marked by ________42_______24 and displayed with bullets. Each of the list items is marked by
    3. ________29_______4
    4. .
    5. You can nest a list inside another list, by placing the complete inner list definition inside a list item
    6. ________29_______4
    7. of the outer list.
    8. Hyperlink is marked by ________19_______0standalone tag. The attribute ________42_______28 provides the destination URL of the link.

    Example 3: Tables and Images

    ________70_______
    How it Works?
    1. A table, consisting of rows of cells, can be marked via ________29_______4.
    2. A HTML table is row-centric. You shall first mark a row via
    ......to provide a caption for the table.
  4. Image is marked via the ________19_______1 tag. The mandatory attribute ________42_______31 specifies the path (or url) for the image source file; ________42_______32 gives the alternative text if the image cannot be displayed. I used relative path in the ________42_______31, where "________42_______34" denotes the parent directory. You need to find some images, store them and figure out your own relative path.
  5. The ________19_______1's optional attributes ________42_______36 and ________42_______37 specify the width and height of the image displayed area. They are used here to resize the images for consistent display.
  6. In the ________29_______6 section, I added some so-called style rules under the ________19_______0 tags, so as to nicely display the table. You could ignore the styles now, which will be covered later in the CSS section.
  7. HTML Template

    HTML Document Template
    ________82_______

    External CSS and JavaScript are often used in an HTML document. Line 6 includes an external CSS file; and line 7 includes an external JavaScript file.

    HTML Document Validator

    You can submit your HTML document to the W3C Online Validator (@ https://validator.w3.org/) for validation.

    Debugging HTML

    F12 Debugger (Web Developer Tools)

    Recall that you can right-click ⇒ View Source (or View Page Source) to inspect the raw HTML markups.

    In most of the browsers, you can push F12 to get into Web Developer Tools, which support debugging HTML, CSS, JavaScript, DOM and more.

    To debug HTML:

    1. Choose the "Inspector" panel to view your HTML codes.
    2. To inspect an element, click on the "picker" and point to the HTML element of interest. You can check/modify the "Style", "Layout", "DOM" and "Events" (on the right panel) associated with the selected element.

    Try it out on the earlier examples.

    HTML Basics

    HTML Tags, Attributes and Elements

    Làm cách nào để viết mã bằng HTML và CSS?
    HTML Tags

    An HTML opening tag is enclosed by a pair of angle brackets in the form of ________42_______40(e.g.,

    , ________42_______41). The tag-name shall be in lowercase.

    Tag's Attributes

    Attributes, in the form of ________42_______42 pairs can be included in the opening tag to provide additional information about the element.

    Example 1: In, the attribute ________29_______5 specifies the natural language for this document.

    Example 2: In ________19_______0, the attribute ________42_______45 specifies the character encoding scheme.

    Example 3: An ________19_______1 (image) tag may contain these attributes:

    ________90_______

    The attribute "________42_______31" specifies the source-URL of the image; "________42_______32" specifies an alternate text, if the image cannot be displayed; "________42_______36" and "________42_______37" specify the width and height of the image displayed area.

    Some of the attributes are mandatory (e.g., the "________42_______31" and "________42_______32" attributes of the ________19_______1 tag); while some are optional (e.g., the "________42_______36" and "________42_______37" attributes of the ________19_______1 tag, which are used by browser to reserve space for the image and resizing the image; but browser can figure out the width and height after the image is loaded).

    Multiple attributes are separated by space, as follows:

    ________101_______

    Attributes are written in the form of ________42_______57________42_______58 pairs. The ________42_______59 should be enclosed in single or double quotes for XHTML/XML compliance (although HTML5 does not enforce it).

    HTML Elements

    An HTML element consists of the opening and closing tags, and the content in between, e.g.,

    ________42_______60

    , ________42_______61.

    There are two types of elements:

    1. Container Element: A container element has an opening tag ________42_______40 that activates an effect to its content, and a matching closing tag ________42_______63 to discontinue the effect. In other words, container elements apply formatting to their contents. For example:________0_______
    2. Void Element (or Standalone Element or Empty Element): A void element does not enclose content but is used to achieve a certain effect, e.g., ________19_______4 is used to draw a horizontal rule; ________19_______3 to introduce a manual line-break; and ________19_______1 for embedding an external image.
      In XHTML, you need to end a standalone element with a trailing ________42_______67 in the opening tag. For examples:________9_______Alternatively, you can also close a standalone element with a matching closing tag. This is cumbersome but consistent in syntax to the container element. For example,________19_______HTML5 no longer enforces the above rules. Today, most developers omit the trailing ________42_______67 for brevity, e.g., ________19_______3, ________19_______4.
      HTML4 has these void elements: ________19_______0, ________19_______0, ________19_______3,
    , ________19_______4, ________19_______1, ________19_______0, ________19_______0, ________19_______0, ________19_______0.
    HTML5 added ________19_______0, ________19_______0, ________19_______0.
    Nesting Elements and the Document Tree

    An HTML element can be nested within another element, e.g.,

    ________42_______83

    . It is important to properly nest the elements, e.g., the sequence ________42_______84 is invalid.

    A valid HTML document exhibits a tree structure (called DOM or Document Object Model), with the element as the root element of the document tree, with two child elements: and .

    [TODO] Draw the DOM tree for one of the examples.

    Rendering HTML Pages

    Browsers follow these rules when rendering HTML documents:

    1. In HTML5, the tag-names are NOT case sensitive. I recommend using lowercase, as it is easier to type and XHTML compliance. (XHTML/XML is case sensitive.)
    2. Blanks, tabs, new-lines and carriage-returns are collectively known as white spaces. "Extra" white spaces are ignored. That is, only the first white space is recognized and displayed. For example,________29_______

      produces the following single-line output on screen with words separated by a single space:

      See how the extra white spaces, tabs and line-breaks are ignored by the browser.


      You need to use the paragraph tag ________42_______10 to lay out a paragraph; or insert a manual line-break tag ________19_______3 to break into a new line. In other words, you control the new-lines via the mark-up tags. The ________42_______10 leaves additional space after the paragraph; while ________19_______3 does not.
      To get multiple whitespace, use a special code sequence ________42_______89 (which stands for non-breaking space). For example,________42_______0

      This is a paragraph.

      Another paragraph
      with a line-break in between and more spaces     before this.

    The Basic Document Skeleton

    The Element and its Child Elements and

    An HTML document has the following skeleton:

    ________42_______1

    The ________29_______4 container element defines the extent of an HTML document.

    There are two sections: ________29_______6 and ________29_______7:

    1. .. container element defines the ________29_______6 section, which contains descriptions and meta-information of the HTML document. Browsers interpret these descriptions to properly display the body content.
    2. .. container element defines the ________29_______7 section, which encloses the content that users actually see in the browser's window.
    The ________29_______6 Section and the ________42_______96 container element encloses the title for the page. You should use a meaningful title because:
    • The title shows up at the title-bar of the browser window.
    • The title shows up in bookmarks and history lists (the URL is stored if there is no title).
    • Titles are used by search engines to index your page.

    The ________42_______97________42_______98

    The is the same as:

    ________42_______2

    The "________42_______99" is needed to prevent the page from scrolling to the top following ________70_______00.

    The inline JavaScript is hard to maintain, and hence, not recommended.

    Images

    ________19_______1 Image Tag (Void Element)

    Function: Embed an image inside an HTML document. The syntax is:

    ________42_______3

    Example:

    ________42_______4

    Attributes:

    • src="imageUrl" (required): gives the URL of the image.
    • alt="text" (required): alternative text to be displayed if the image cannot be displayed.
    • width="n|n%", height="n|n%": specify the width and height of the image display area (in pixels or percentage). Browsers use these values to reserve space for the image (before the image is downloaded) and continue rendering the rest of the contents. You can also use the width and height to scale an image. This is not recommended because scaling-up results in a blur image and scaling-down is a waste of bandwidth.
      I recommend that you use the ________42_______36 and ________42_______37 tags for images, so that the browser can reserve spaces for the images. This is more efficient and could avoid a jerky display if you page contains many images. You can find out the width and height of an image easily by checking the "Properties" of the image.
    • title="tooltip-text": the attribute ________70_______04 is applicable to most of the HTML elements for you to provide the tool-tip text.

    Many attributes were added in HTML5. Some of them will be discussed in the later sections.

    • crossorigin="anonymous|use-credentials":
    • referrerpolicy="no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|same-origin|strict-origin|strict-origin-when-cross-origin|unsafe-url":
    • decoding="sync|async|auto":
    • fetchpriority="high|low|auto":
    • loading="eager|lazy":
    • sizes=list:
    • srcset=list:

    The following attributes were deprecated in HTML5: ________70_______05, ________70_______06, ________70_______07, ________70_______08, ________42_______57.

    Using Image as Hyperlink

    To use an image as a hyperlink, put the image tag ________19_______1 between ________19_______0and . For example:

    ________42_______5

    Image used as hyperlink anchor automatically gets a border. The color of the border is given in the ________19_______9 (unvisited), ________29_______0 (visited), ________29_______1 (active) attributes of the tag (or the ________9_______3, ________9_______4, ________9_______5, and ________9_______6 CSS properties - to be discussed later).

    Introduction to CSS

    Why Style Sheet?

    The original aim of HTML is to let the content providers concentrate on the contents of the document and leave the appearance to be handled by the browsers. Authors markup the document contents using markup tags (such as

    ,

    ,
      ,
    , ________19_______1) to indicate its semantic meaning ("This is a paragraph", "This is heading Level 1", "This is an unordered list", "This is a table", "This is an image"). The browsers then decide on how to display or present the contents in the browser's window for the web surfers.

    However, HTML has gone out-of-control in the early years. Many markup tags and attributes were created for marking the appearance and the display styles (e.g., ________19_______0,

    , ________19_______7, ________70_______22, ________19_______8, ________19_______9, ________29_______1, ________29_______0 are concerned about the appearance in font, color and alignment) rather than the meaning of the contents. These tags flood the document and make creation and maintenance of the contents extremely difficult. Furthermore, over the years, we have engaged graphic designers to work on the appearance and leave the content providers to focus on the contents. Hence, there is a need to separate the contents and presentation of the HTML document.

    The W3C (World-Wide Web Consortium @ www.w3c.org) responded to the need of separating document's contents and presentation by introducing a Style Sheet Language called CSS (Cascading Style Sheet) for presentation, and removing the presentation tags and attributes from HTML. CSS can be viewed as a companion of HTML. It allows web graphic designers to spice up the web pages, so that the content providers can focus on the document contents with HTML.

    CSS Specifications

    W3C defines three CSS levels:

    1. CSS Level 1 (December 1996): CSS1 laid the ground work and introduced the selectors and most of the properties.
    2. CSS Level 2 (May 1998) and CSS Level 2.1 (Last revised on June 2011): CSS2 added new features such as targeting devices and printers, and absolute positioning. CSS2.1 (@ http://www.w3.org/TR/CSS2/) touches up CSS2.
    3. CSS Level 3: CSS3 is not a single piece of specification. As CSS grows, W3C decided to break it into modules, such as the Selectors module, the Values and Units Modules, the Box Alignment module, and so on. Each module is then developed independently. The CSS3 Selectors module (@ http://www.w3.org/TR/selectors/) and CSS3 Colors module (@ http://www.w3.org/TR/css3-color/) were completed in 2011. Other modules are still work-in-progress.

    It is important to take note that:

    • CSS is humongous!!! Most of the browsers today have yet to fully support CSS2/CSS2.1.
    • CSS is a language with its own syntax, which is different from HTML and JavaScript.
    What is a Style Sheet?

    A Style Sheet is a collection of style rules that can be applied to a selected set of HTML elements. A style rule is used to control the appearance of HTML elements such as their font properties (e.g., type face, size and weight), color properties (e.g., background and foreground colors), alignment, margin, border, padding, and positioning. This is the same as the styles in any publishing software like WinWord or LaTex.

    The word cascading means that multiple style rules can be applied to the same HTML element. The browser follows a certain cascading order in finalizing a style to format the HTML element in a predictable fashion.

    CSS By Examples

    CSS Example 1: CSS Syntax and Tag-Selectors

    Create the following file (using a source-code editor such as VS Code, Sublime Text, Atom, NotePad++), and save as "________70_______27".

    ________42_______6

    A CSS style sheet provides style rules to HTML documents. You test out the above styles, by creating an HTML document, which references the CSS via the ________19_______0 element, as follows:

    ________42_______7
    How it Works?
    1. ________70_______29 is a CSS comment. Comments are ignored by the browsers but provide important information to the readers, as well as the author.
    2. A CSS style sheet contains style rules.
    3. A style rule begins with a selector, followed by the list or presentation properties enclosed within ________70_______30.
    4. A property is identified by its ________42_______57, followed by its ________70_______32, separated by colon "________70_______33". The ________70_______34 pairs are separated by semicolon "________70_______35". A ________42_______57 could have multiple ________70_______32s, separated by commas "________70_______38" (e.g., the ________70_______39 property).
    5. A selector selects a set of HTML elements to apply the styles. This example uses the so-called ________70_______40, which select all elements having the tagname. For example, the first rule is applicable to the ; the 3rd to

      , and the 4th rule to all the elements.

    6. Selectors having the same rules can be grouped together and separated by commas "________70_______38". For example, the 2nd rule is applicable to to.
    7. Some of the properties are inherited by the nested elements. For example, the

      nested under inherits the ________70_______39 from the . Some properties are not inherited.

    8. If more than one rules are applicable, the properties are accumulated. But, the last rule will take effect if there is conflict. For example, both Rule 3 and 4 are applicable to

      . The

      accumulates the properties from both rules. It takes the ________70_______43 from Rule 3 (which is not specified in Rule 4); but uses the ________70_______44 from the Rule 4 (instead of Rule 3).

  8. Style properties:
    • The ________70_______39 list the font faces, in the order of preferences. Browsers search through the list (from the beginning) to an available font face.
    • ________70_______22 and ________70_______47: specify the foreground and background colors, respectively. Color can be expressed in ________70_______48 (hex value), ________70_______49 (decimal value between 0 and 255), or with the pre-defined color names (such as ________70_______50, ________70_______51).
    • ________70_______52: text alignment of either ________70_______53, ________70_______54, ________70_______55, ________70_______56.
    • ________70_______57: ________70_______58, ________70_______59, and others.
    • ________70_______60: ________70_______58, ________70_______62, and others.

Take note that CSS is a language with its own syntaxes. CSS syntax is totally different from HTML!

CSS Example 2: CSS Class-Selector, ID-Selector with

and ________19_______0

________42_______8

We shall use the following HTML document to test the CSS:

________42_______9
How it Works?
  1. In the earlier example, we use Tag-Selectors which select elements based on tagname. Besides the Tag-Selector, there are Class-Selector which selects elements based on ________70_______64 attribute; and ID-selector which selects an element based on the ________0_______1 attribute.
  2. An ID-Selector begins with a ________70_______66 sign, followed by an ________0_______1-name, e.g., ________70_______68 and ________70_______69, which select element with ________70_______70 and ________70_______71, respectively. Since ________0_______1-value is meant to be unique within an HTML document, ID-selector select at most one element.
  3. A Class-Selector begins with a dot "________70_______73" followed by a ________70_______64-name, e.g., ________70_______75 and ________9_______7, which select all elements with ________70_______77 and ________70_______78, respectively. Unlike ________0_______1-value that is unique, many elements can have the same ________70_______64-name.
  4. In the test HTML document, we partition the body into three sections, via

    . We assign a unique ________0_______1 to each

    , i.e.,

    ,

    and

    to semantically identify their contents, and use the ID-Selectors ________70_______68 and ________70_______69 to apply styles to the

    's.

  5. Similarly, we mark texts with ________19_______0 and ________19_______0, and use the Class-Selectors ________70_______75 and ________9_______7 to apply styles to these texts.
  6. Take note that:
    • is a block element, while ________19_______0 is a inline element.

    • The ________70_______64 attribute can take multiple values, as in ________70_______90 (Line 18). Both styles are applied.
HTML ________0_______1 vs ________70_______64 Attributes
  • ________0_______1 and ________70_______64 are used to reference HTML elements by JavaScript and CSS. ID can also be used as the target of HTML anchors.
  • ________0_______1 must be unique in an HTML document, but ________70_______64 needs not.
  • An element can have one ________0_______1, but many ________70_______64es.
  • CSS's ID-selector begins with ________70_______66 (e.g., ________70_______68), Class-selector begins with dot (________70_______73) (e.g., ________82_______02).

For example,

Recommendation: Use ID for JavaScript and internal ________19_______0link (which refers to one single element in the HTML document); and class for CSS (which refers to a group of elements with the same style).

Validating CSS

You can use Online CSS Validation Services such as W3C Jigsaw (@ http://jigsaw.w3.org/css-validator) to validate your CSS file.

Try validating the above example using W3C CSS Validator.

Inspecting Element's Styles via F12 Web Developer Tools

The Web Developer Tools supports HTML, CSS, JavaScript and DOM. You could select (inspect) an HTML element, and it will show you all the CSS rules that are applied to that elements from all the sources (inline, embedded, external), and how the rules were merged (calculated) and conflicts were resolved. You can temporarily disable a rule, and edit a rule to check the effect instantly.

To debug CSS:

  1. F12 to launch Web Developer Tools.
  2. To inspect the style of an HTML element ⇒ Choose the "HTML" panel ⇒ Click on the "Inspect" button and then select the HTML element of interest from the browser window ⇒ You can check/modify the "Style", "Layout", "DOM" and "Events" (on the right panel) associated with the selected element.
  3. To check/modify the CSS Style rules ⇒ Choose the "CSS" panel.

CSS Basics

CSS Syntax

CSS is a language by itself. It has its own syntax, which is totally different from HTML and JavaScript!!! (How many syntaxes you have to know to program the web?!).

The syntactic rules are:

  1. A style rule consists of a selector which selects the HTML elements it operates upon, and a list of style property ________70_______34 pairs enclosed in braces ________70_______30, as follows:________70_______0For example, This selector selects the tag. Hence, the defined style is applied to the ________29_______4 element. Many (but not all) of the CSS properties (such as color, font) are inherited by its descendants, unless they are overridden by other style rules.
  2. The ________70_______34 pairs are separated by semicolon "________70_______35". You can omit the last semi-colon before the closing brace "________82_______09". But I recommend that you keep it, so that it is easier to include new entries without a missing "________70_______35".
  3. The ________42_______57 and ________70_______32 are separated by a colon "________70_______33" in the form of ________70_______34.
  4. Multiple ________70_______32s for the same property ________42_______57 are separated by commas "________70_______38" (as in the ________70_______39). However, multiple parts of the same property ________70_______32 are separated by space "________42_______89" (as in the ________82_______21, which has a value with 4 parts).
  5. Values containing space must be quoted, e.g., "________82_______22" or ________82_______23.
  6. Extra whitespaces (blank, tab and newline) are ignored.
  7. If the same set of styles is applicable to more than one elements, the selectors can be grouped together in one single rule (called Group-Selector). The tagnames are separated by commas "________70_______38". For example, the following rule apply to elements to:________70_______1
  8. Comments can be inserted inside the style sheet enclosed between ________82_______25 and ________82_______26. The end-of-line comment ________82_______27 is not applicable in CSS?!
CSS Syntax vs. HTML Syntax

CSS and HTML have different syntaxes!!! For example, HTML's attributes uses "________82_______28" to separate the ________42_______57 and ________70_______32, in the form of ________42_______42; the name-value pairs are separated by spaces, as follows:

________42_______4

Inline, Internal and External Styles

There are three places where you can define style rules:

  1. Inline Style: Included inside a particular HTML opening tag's via attribute ________82_______32. The rules are applicable to that particular HTML element only.
  2. Internal (Embedded) Style Sheet: Embedded inside the ________19_______0 tags in the ________29_______6 section of the HTML document. The styles are applicable to that entire document.
  3. External Style Sheet (Recommended): Stored in an external file, which is then linked to HTML documents via a ________19_______0 element in the ________29_______6 section. The same external style sheet can be applied to all HTML pages in your website to ensure uniformity in appearance.
Inline Styles

To apply inline style to an HTML element, include the list of style properties in the ________82_______37 attribute of the opening tag. For example,

________70_______3

This paragraph uses 16px monospace font.

This paragraph uses default font.

This paragraph uses 12px inside this span but default font size here.

Take note that the ________42_______57 and ________70_______32 are separated by colon ________82_______40, and the ________70_______34 pair are separated by semicolon ________82_______42, as specified in the CSS syntax.

The scope of an inline style is limited to that particular element. Inline style defeats the stated goal of style sheets, which is to separate the document’s content and presentation. Hence, inline style should be avoided and only be used sparsely for touching up a document, e.g., setting the column width of a particular table.

Internal (Embedded) Styles

Embedded styles are defined within the ________19_______0 tags in the ________29_______6 section. For example,

________70_______4
  • The scope of the embedded styles is the current HTML document.
  • Embedded styles separate the presentation and content (in the ________29_______6 and ________29_______7 sections) and can be used if page-to-page uniformity is not required. That is, this set of styles is used for only one single page!?

NOTE: HTML4/XHTML1 require an additional attribute ________82_______47 in ________19_______0

________82_______49

The border property is inherited.

Although the first ________19_______0is nested under the

tag, the ________70_______06 property is not inherited from the ancestor. That is, you will not see a border around the ________19_______0's content. We can force the inheritance by assigning a special value "________82_______53" as shown in the Class Selector ________82_______54.

Resolving Conflicting Rules

Style Conflict

Style conflict on an element arises:

  1. A property is inherited from multiple ancestors.
  2. More than one rules are applicable to the element. For example, Tag-selector ________9_______2, Class-selector ________82_______56 and ID-selector ________82_______57 are all applicable to element

    .

Nearest Ancestor Wins

If a property is not defined for an element and is inheritable, it will be inherited from the nearest ancestor.

Specificity

Specificity means that "the more specific the selector, the stronger the rule". For example,

The ________9_______2 Tag-selector is the most general, which selects all the

elements; the ________82_______59 Class-selector selects a class of

elements with attribute ________82_______60; the ________82_______61 and ________82_______62 ID-selectors select only one element each with a unique ________0_______1 value. The ID-selector is the most specific (and takes precedence); followed by Class-selector; and followed by the general Tag-selector.

Locality

If the "Law of Specificity" cannot resolve the conflict, apply the "Law of Locality". The style-rule that read in last by the browser takes effect. In the above example, there are two ID-selector for ________82_______64, the latter takes effect.

The inline style (applied to a specific tag via ________82_______37 attribute) overrides the internal style (defined in ________19_______0

    ________82_______67
  • ::selection (CSS3): Select the user-selected-text on the screen. You are only allow to set the ________70_______22 and ________70_______47 properties in the selector. For example,
  • Attribute Selectors
    • T[att]: selects elements that possess the given attribute, regardless of value.
    • T[att="value"]: selects elements that possess the given attribute, with the given value.
    • T[att^="value"]: selects elements that possess the given attribute, beginning with the given value. (Symbol ________82_______70 represent beginning in regex.)
    • T[att$="value"]: selects elements that possess the given attribute, ending with the given value. (Symbol ________82_______71 represent ending in regex.)
    • T[att*="value"]: selects elements that possess the given attribute, containing with the given value.
    Child Pseudo-Class Selectors (CSS3)

    CSS3 introduces these pseudo-class child selectors:

    • :first-child, :last-child: E.g., In ________82_______72, td is the first child of the parent.
    • :nth-child(odd), :nth-child(even): E.g., ________82_______73
    • :nth-child(3), :nth-child(n+3) (3, 4, 5,...), :nth-child(3n) (3, 6, 9,...), :nth-child(3n+1) (4, 7, 10,...), etc.
    • :nth-last-child(3): last 3rd child
    Type Pseudo-class Selector (CSS3)
    • T:first-of-type, T:last-of-type: For example ________82_______74 select the first

      .

    • T:nth-of-type(odd), T:nth-of-type(even): E.g., ________82_______75
    • T:nth-of-type(3), T:nth-of-type(n+3) (3, 4, 5,...), T:nth-of-type(3n) (3, 6, 9,...), T:nth-of-type(3n+1) (4, 7, 10,...), etc.
    ________82_______76 Pseudo-class Selector

    Select elements whose value is in the permitted range, for giving positive feedback, e.g.,

    ________82_______77 Pseudo-class Selector

    The ________82_______78 selector lets you select elements not meeting the criterion in selector ________82_______79. For example, ________82_______80 select elements not belonging to class ________82_______81. See above example.

    There are many more pseudo-class selector!

    CSS Style Properties

    For a complete list of the style properties, you may refer to the CSS specification (@ W3C), or online reference. I shall present the commonly-used properties such as color, font, text, margin, border, padding.

    CSS ________70_______22 and ________70_______47 Properties

    Specifying Color

    Color can be expressed as:

    1. RGB hexadecimal triplets in the form of ________82_______84, where ________82_______85, ________82_______86, ________82_______87 are values of red, green and blue. The values are between ________82_______88 and ________82_______89, in hexadecimal. For example, ________82_______90. The color value ________82_______91 can be shorthand as ________82_______92.
    2. RGB in the form of ________82_______93. The ________82_______94, ________82_______95, ________82_______96 can be expressed in a decimal value between ________82_______97 and ________82_______98; or in percentage between ________82_______99 and ________90_______00. I prefer the decimal form over the hex triplets as it is easier to visualize the values.
    3. RGBA in the form of ________90_______01: RGB with an additional A (alpha channel). The A is used to control the transparency/opacity, with ________90_______02 for opaque; and ________90_______03 for totally transparent.
    4. HSL in the form ________90_______04: Hue is the color on the color wheel in degrees between ________82_______97 to ________90_______06. Saturation (purity of color) is expressed in percentage between ________82_______99 and ________90_______00 (pure color). Lightness (brightness or intensity) is also expressed in percentage between ________82_______99 (darkest) and ________90_______00 (brightest).
    5. HSLA in the form of ________90_______11.
    6. The 16 pre-defined English color names as follows. These 16 colors are numerically generated and are really really ugly. You should avoid using them!! Many browsers also support other color names such as ________90_______12, ________90_______13, etc.
    CSS Color Properties

    The most important color properties are ________70_______22 and ________70_______47:

    • color: #rrggbb|rgb(r,g,b)|rgba(r,g,b,a)|color-name: Set the color of the text (or foreground). Color values are inherited by descendants.
    • background-color: #rrggbb|rgb(rrr,ggg,bbb)|rgba(r,g,b,a)|color-name|transparent|inherit|initial: Set the background color of an element. The default is ________90_______16 and NOT inherited, so as to create a see-through effect. The ________90_______17 sets to its default value.

    CSS Length Measurements

    Many CSS properties, such as ________42_______36, ________42_______37, ________82_______21, ________70_______06, ________90_______22, ________90_______23 and ________90_______24, require a length measurement. For example,

    There are two types of length measurements: relative (to another length property) and absolute (e.g., inches, centimeters, millimeters).

    The absolute units are:

    • in (inch)
    • cm (centimeter)
    • mm (millimeter)
    • pt (point): 1 inch has 72 points. 1pt is 1/72 in ≈ 0.014in ≈ 0.35mm.
    • pc (pica): 1 pica is 12 points. 1 inch has 6 picas. 1pc ≈ 1/6 in ≈ 0.17in ≈ 4.2mm. ________90_______25 is not commonly used.
    • px: ________90_______26 is a measurement unit created for the CSS, where the thinest line shall have width of 1px. Today, it is defined as 1px=1/96 inch. Since 1pt is 1/72 inch; 12pt = 16px = 1/6 inch = 0.42cm.

    The relative units are:

    • % (percent): in term of the percentage of a property of a referenced element, generally, the same property of the parent element.
      For example, ________90_______27 set the table's ________42_______36 to 80% of the ________42_______36 of the parent (probably a

      or ).

    • em: the width of the letter ________90_______30 of a referenced font, generally, the current font.
      For example, ________90_______31 means that the margins are twice the current (referenced) font-size.
      However, if ________90_______32 is used to set the ________90_______23 property, it needs to find a reference. In this case, it is referenced to the parent's ________90_______23. For example, ________90_______35 sets the ________90_______23 of

      to 1.2 times of the parent (possibly a

      or ).

    • rem (CSS3): relative to the ________90_______23 of the root or element.
    • vw, vh (CSS3): one percent of viewport width and height respectively.
    • vmin, vmax (CSS3): one percent of the viewport smaller dimension or larger dimension respectively, i.e., 1vmin is equal to the smaller of 1vh or 1vw; 1vmin is the larger of 1vh or 1vw.
    • ex (not commonly-used): the height of letter 'x' of the parent's font. ________90_______38 is not commonly used.

    There shall be no space between the number and the unit, as space is used to separate multiple values.

    Take note that ________90_______39 and ________90_______32 measurement are relative to another element (percentage values are always relative, e.g., ________90_______41 of something). For example,

    To add to the confusion, some properties, such as ________90_______24, can also accept a bare number, without a unit. This bare number is treated as a factor to be multiplied by a reference. For example,

    NOTE: In HTML tag attributes, such as ________90_______43, the bare number is measured in pixels.

    Recommendation
    • Define a ________90_______23 for .
    • Use ________90_______45 for ________90_______23 of other elements - relative to .
    • Use ________90_______32 for other properties such as ________82_______21 and ________90_______22, which is relative to the current ________90_______23.
    • Use other relative measurement such as ________90_______39 if appropriate. Avoid absolute measurements.

    For example,

    Làm cách nào để viết mã bằng HTML và CSS?

    CSS Box Model and Properties ________82_______21, ________70_______06, ________90_______22 and Content Area

    Recall that HTML defines two kinds of elements: block element and inline element.

    A block element (such as

    ,

    , to) is always rectangular in shape and exhibits the so-called box model, with four virtual rectangles wrap around its "content area", representing the content area, padding, border, margin, as illustrated below.

    Làm cách nào để viết mã bằng HTML và CSS?
    1. The content area contains the texts, image, or child elements.
    2. The padding is the space between the content area and the border. It clears an area outside the content area. It has the same background as the content area.
    3. The border goes between padding and margin. You can set a color and a style (such as solid, dash, dotted) to the border.
    4. The margin is the space outside the border (to another element). It clears an area outside the border. The margin does not have a background, and is totally transparent.

    As illustrated in the box model diagram, margin pushes its border (and content) away with a transparent background showing the parent (having the effect of pushing itself away from the parent); while padding pushes its content inwards with the same background. Margin and padding serve the same purpose if there is no border and background applied.

    Take note that the ________42_______36 and ________42_______37 that you set for the element specify its content area, exclude the margin, border and padding. To get the actual size of the element, you need to add the margin, border and padding to the width/height. For example, suppose that:

    ________70_______5

    The actual width of the element is ________90_______57.

    Each of the rectangular bounds has four sides, and can be individually referred to as ________90_______58, ________90_______59, ________90_______60, and ________90_______61 in a clockwise manner, where ________90_______62 could be ________82_______21, ________70_______06 or ________90_______22. The four sides can be controlled individually or as a group.

    Inspecting the Box Model via Web Developer Tools

    [TODO]

    CSS ________42_______36 and ________42_______37 Dimension Properties

    These properties allow you to set up the dimension, such as the width and height of an element.

    • width|height: auto|n|n%: The ________42_______36 and ________42_______37 are specified in units such as ________90_______26 (pixels), or percent (relative to the parent element).
    • max-width|max-height|min-width|min-height: none|n|n%: Set the minimum and maximum width and height.

    As mentioned earlier, CSS length measurement requires a proper unit, e.g., ________90_______71 or ________90_______72. Take note that ________90_______73 is meaningless in CSS (this is a very common error!) However, in HTML, ________90_______43 means 400 pixels.

    The ________42_______36 and ________42_______37 properties are NOT inherited by its descendants. The default value is "________90_______77", which lets the browser to compute a suitable value. We shall discuss "________90_______78" value later.

    CSS ________82_______21, ________70_______06 and ________90_______22 Properties

    The margin, border and padding related properties are:

    • margin-top|margin-right|margin-bottom|margin-Left: auto|n|n%: Set the four margins individually. The "________90_______82" shall be expressed in a proper unit (e.g. ________90_______83 and ________90_______84). You could use a negative value to overlap two elements (e.g., ________90_______85). The value of "________90_______77" lets the browser to compute an appropriate number. "________90_______87" is relative to the same property (i.e. margin-xxx) of the parent.
    • (Shorthand) margin: top right bottom left
      (Shorthand) margin: top right-left bottom
      (Shorthand) margin: top-bottom right-left
      (Shorthand) margin: all
      These are one-line shorthand notations to set all the four margins. If four values are given, they are applied to top, right, bottom, left (in the clockwise manner). If two values are given, they are applied to top-and-bottom, left-and-right. If one value is given, it is applied to all the four borders.
      Take note that there is no commas between the items, as all items are considered to be one property value.
    • padding-top|padding-right|padding-bottom|padding-left: n|n%: Set the four paddings individually, similar to ________90_______88.
    • (Shorthand) padding: top right bottom left
      (Shorthand) padding: top left-right bottom
      (Shorthand) padding: top-bottom left-right
      (Shorthand) padding: all
      A one-line shorthand notation to set all the four paddings, similar to ________82_______21.
    • border-width: thin|medium|thick|n
      Set the width of the four borders. "________90_______82" can be used to set an absolute thickness. ________90_______91 is a shorthand notation, you can use ________90_______92, ________90_______93, ________90_______94, and ________90_______93 to set the four borders individually.
    • border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
      Set the style of the 4 borders. Similarly, you can use ________90_______96, ________90_______97, ________90_______98, and ________90_______97 to set the four borders individually.
    • border-color: #rrggbb|rgb(r,g,b)|rgba(r,g,b,a)|color-name
      Set the color of the 4 borders. Similarly, you can use ________101_______00, ________101_______01, ________101_______02, ________101_______01 to set the four borders individually..
    • (Shorthand) border: width style color
      Shorthand notation to set all the properties of the borders, in the order shown. You can also use shorthands ________101_______04, ________101_______05, ________101_______06, and ________101_______07 to set the four borders individually.

    Margin, border, padding, width are NOT inherited by its descendants.

    Example: [TODO]

    More Margin Properties
    • margin: 0 auto: set top and bottom margins to 0. Setting left and right margins to ________90_______77 equally distribute the extra horizontal space, and hence, center the element horizontally.
    • Collapsed Margins: When margin of two elements touching each other vertically, they collapsed (with the larger margin). But when two margins touches horizontally, they do not collapse.
    • Negative Margin: margin is one of a few CSS properties that can be set to negative. This is used to overlap elements (without using absolute positioning). Padding and border cannot be negative.
    More Border Properties
    • border-radius: can be used to create a rounded border. You can also use it to convert a box to a circle (with ________101_______09).
    • border-image: can be used to create a multi-color border.

    Example [TODO]

    CSS ________101_______10 Properties

    In addition to border, outline is a line that goes around the element, outside of the border, which does not take any space in the box model, and does not affect the position of the element.

    • outline-color:
    • outline-style: dotted|dashed|solid|double|groove|ridge|inset|outset: similar to ________70_______06.
    • outline-width:
    ________90_______78

    For most of the block elements (e.g.,

    ,

    ), the default of ________90_______78 sets the width to the width of the parent minus its own margin, border and padding. Images ________19_______1 have an ________90_______77 width equals to its actual width. Float elements have ________90_______77 width of 0.

    Example: [TODO]

    Filling the Width of the Containing Element

    Browser would automatically adjust the ________101_______17 to fill the container's width if the sum of its width, left and right margin/border/padding does not add up to the full width of the containing element. Take note that browser will not adjust the ________42_______36, ________101_______19, ________101_______05 and the left margin/border/padding.

    Example: [TODO]

    Center a Block Element

    To center a block element, you set the ________101_______21 and ________101_______17 to ________90_______77 (browser divides the remaining width to left and right margins equally).

    For example, all the selected

    are centered:

    Example

    The above box-model diagram was produced using these codes.

    ________70_______6

    CSS ________101_______24 Properties

    The frequently-used font properties are:

    • font-family: font-name|generic-family-name
      A prioritized list of fonts to be used. The browser will try to use the first font if the it is available, and goes down the list.
      The generic font family names include: ________101_______25 (with small tails), ________101_______26 (without small tails), ________101_______27, ________101_______28, ________101_______29. Use ________101_______27 for program listing. Use ________101_______26 for computer display. ________101_______25 are mainly used in prints (such as "Times" for newspapers and books).
    • font-size: ________101_______33|xx-small|x-small|small|medium|large|x-large|xx-large|smaller|larger
    • font-weight: normal|bold|bolder|lighter|100|200|...|800|900
      You can use a number between 100 to 900, in multiple of 100. The value of 400 is the normal weight; while 700 is bold.
    • font-style: normal|italic|oblique
      The ________70_______62 uses italic font installed (some font families include the italic version); while the ________101_______35 is done by tilting the normal font.
    • font-variant: normal|small-caps
      The ________101_______36 is smaller than the uppercase.
    • (Shorthand) font: style variant weight size/line-height family
      Set all the font properties using a one-line shorthand notation. The properties must follow the order shown above. However, the leading and trailing items can be omitted. For example,________70_______7is the same as:________70_______8

    Font properties are inherited by its descendants.

    Example: [TODO]

    Google Fonts

    "Google Fonts" @ https://fonts.google.com/ is a huge set of high-quality, free and open-source fonts. It is certainly the choice of the fonts today.

    To use particular fonts, e.g., "Roboto" and "Roboto Mono", you can either:

    1. Add a ________19_______0 to CSS (in your HTML's ________29_______6 section, e.g.,________70_______9
    2. Use a ________101_______39 in your CSS (you need not update all your HTML pages):________82_______0

    CSS ________101_______40 Properties

    The frequently used text properties are:

    • text-align: left|right|center|justify
    • line-height: normal|n|n%|factor
      Set the height of the line. The ________101_______41 gives the factor to be multiplied by the current font-size. E.g., factor of 1.5 means 1.5 times of the current font.
    • text-decoration: none|underline|overline|line-through|blink
      Graphic designer dislikes "________101_______42" and considers it as a legacy of typewriter. "________101_______43" is even worse!
    • text-transform: none|uppercase|lowercase|capitalize
      The ________101_______44 transforms the first letter to uppercase.
    • text-indent: n|n%
      Indent the first-line of the paragraph. To indent all the lines of a paragraph (i.e., the whole block), use padding or margin.
    • letter-spacing: normal|n
      word-spacing: normal|n
      Additional spacing to be applied to letters or words.
    • white-space: normal|pre|nowrap
      Specify how white spaces inside the element is to be handled. For "________101_______45" (pre-formatted), preserve the white-spaces.

    CSS ________101_______46 Properties

    The background related properties are:

    • background-color: #rrggbb|rgb(r,g,b)|rgba(r,g,b,a)|color-name|transparent
      Set the background color of an element. The default is ________90_______16.
    • background-image: url(imageURL)|none
      Use an image as the background.
    • background-repeat: repeat|repeat-x|repeat-y|no-repeat
      Define how the background image shall be repeated in x and y direction or both.
    • background-attachment: scroll|fixed
      Define whether background image shall scroll with the page or fixed.
    • background-position: x y|x% y%|top left|top center|top right|center left|center center|center right|bottom left|bottom center|bottom right
      Set the initial position of the background image. Note that there are two values, specifying the x and y position respectively.
    • (Shorthand) background: color image repeat attachment position: one-line shorthand notation.

    In all the above, the term background refers to the background of the elements selected (not necessary the entire window). In other words, you can set an image as the background of an element.

    CSS ________101_______48 Properties

    The properties are:

    • list-style-type: none|disc|circle|square
      list-style-type: decimal|decimal-leading-zero
      list-style-type: lower-alpha|upper-alpha|lower-roman|upper-roman|lower-greek|lower-latin|upper-latin
      Set the style of the list item
    • marker (bullet) for
        ,
          respectively.
        1. list-style-position: inside|outside: Define whether the list item marker shall be inside or outside the item element.
        2. list-style-image: none|url(imageURL): Use an image as the list item marker.
        3. (Shorthand) list-style: type position image: Shorthand notation to specify all the properties of the list.

      Example: [TODO]

      CSS Table Properties

      • border-collapse: collapse|separate
        Collapse or separate the adjacent cells shared border into one.
      • border-spacing: n
        For separate border, specify the distance between border (i.e., the deprecated ________101_______49 attribute)
      • caption-side: top|bottom|left|right
        Specify which side to show the caption.
      • empty-cells: show|hide
      • table-layout: auto|fixed
      [TODO: More]

      More HTML

      Image Maps

      Image maps are "clickable" image that loads different pages depending on where (or which hot-regions) you click on the image. Each hot region of the image map can be associated with a different link. There are two type of image maps:

      1. Client-side image map: browser at the client-side handles the mapping of hot-regions to links.
      2. Server-side image map: server handles the mapping of hot-regions to links. The co-ordinates of the location clicked are sent to the server to be processed by a program (such as a CGI/ASP/JSP/PHP script). The mapping information is held on the server.
      Client-Side Image Map

      To create a client-side image map:

      1. Define a image map using ________29_______4 and define the hot-regions in the map using the ________19_______0 tags. Decide what link maps to which hot-region. Hot regions can take circle, rectangle, or polygon in shape.
      2. In the ________19_______1 tag, add the attribute ________101_______53 to indicate this image is used as a client-side image map.________82_______1

      Example:

      ________82_______2
      Client-side Image Map Tags - ________19_______0 and ________19_______0

      Function: To set up a client-side image map with hot regions.

      Syntax (map: Container tag, area: Standalone tag)

      ________82_______3

      ________19_______0's attributes:

      • ________101_______57: declares a unique name for the map, to be targeted in attribute ________101_______58 of the ________19_______1.
        (The attribute ________42_______57 is used the older browsers. XHTML specifies using ________0_______1 instead, which automatically create a named anchor.)

      ________19_______0's attributes:

      • ________101_______63: define the shape of the hot region. The "default" value for any point not part of another hot region.
      • ________101_______64: list of coordinates that made up the hot region.
        • For ________101_______65, ________101_______66 to specify the upper-left and lower-right corners.
        • For ________101_______67, ________101_______68, where ________101_______69 is the center and ________82_______94 is the radius.
        • For ________101_______71, ________101_______72, where ________101_______73 are coordinates that made up the polygon. You should close the polygon by putting ________101_______74 as the last coordinates.
      • ________42_______28: gives the target URL of the hyperlink.
      • ________101_______76: deactivate the hot region, pointing to nowhere.
      • If two hot regions overlap, the first takes effect.

      A client-side image map can be used as a navigation bar on top of the page, instead of using individual images. This may save some transmission overhead, as each individual image triggers its own HTTP request.

      Server-Side Image Map

      On the ________19_______1 tag, include the "________101_______78" (is server map?) attribute, and wrap the ________19_______1 within an anchor ________101_______80. For example,

      ________82_______4

      When the image is clicked, the ________101_______81 position of the click is send to the server as query parameters. For example,

      ________82_______5It is up to the server to decide on how to process the ________101_______81 position received via a server-side program (such as CGI/ASP/JSP/PHP/Servlet).
      Client-Side vs. Server-Side Image Map

      Client-side image map is much more popular (and recommended) than server-side image map because:

      1. Mapping for client-side image map is processed by the browser locally with immediate response, without connecting to the server and waiting for server to response.
      2. No special server-side programs needed, relies solely on the browser to process the mapping of the hot regions.

      Frames

      You can divide the browser's window into multiple regions called frames. Each of the frames can contain a distinct and complete HTML document. Framed layout enables you to display several HTML document at once. Framed layout is popular for:

      • Dividing the window into a navigation frame (on the top or left-side of the window) and an actual content frame.
      • Dividing the window into a small summary frame and a detail frame. Java API documentation is a good example.

      However, use frames with extreme care! Frame (especially the "header" frame) occupied precious screen asset, as it does not scroll away! Framed layout have fallen out of favor over the years. Use

      and CSS to organize your web page instead.

      The tags involved are:

      • ________29_______4: to sub-divide the window.
      • : defines each of the frames in a frameset.
      • ________29_______4: for floating or inline or internal frame.
      • ________29_______4: alternative text if frame is not supported by browser.
      Frame Set ________29_______4

      Function: To divide the window into multiple frames, row-wise or column-wise. ________29_______4 can be nested for complex layout. ________29_______4 is to be used in place of ________29_______4 tag. i.e., there should not have an tag in the document with .

      Syntax:

      ________82_______6

      Attributes:

      • ________101_______90: a list of frame sizes in pixels or percentage separated by commas. Wildcard "________101_______91" can be used to indicate the remaining space.

      Example:

      ________82_______7Divide the window into four rows of sizes: 100 pixels, 20% of the screen, 150 pixels, and the remaining space.
      Individual Frame

      Function: Declare each individual frame, and place the HTML document.

      Syntax:

      ________82_______8

      Attributes:

      • ________101_______92: provides the URL of the document to be displayed inside this frame.
      • ________42_______57: specifies an unique identifier, to be used as the target of other tags, such as ________19_______0, ________19_______0.
      • ________101_______96: suppresses resizing by dragging of border.
      • ________101_______97: sets to 1 to show the border, 0 to suppress.
      • ________101_______98: "________101_______99" to show scrollbars and allow scrolling; "________0_______00" to suppress scrolling; and "________90_______77" to let the browser to decide (e.g., auto-hide).

      Example: Divide the screen into 3 frames, top, left and right.

      ________82_______9
      Targeting Named Frame

      To control which frame to receive the content of a hyperlink, you could include the ________0_______02 attribute in the ________19_______0tag. Using the previous example, a hyperlink in the "________0_______04" frame targeting the "________0_______05" frame is:

      ________90_______0

      If all the links in the "________0_______04" frame are targeting the "________0_______05" frame, you can use the ________19_______0 tag (in the HEAD section) to set up a global target reference:

      As mentioned, frames has gone out of favor these day. The HTML5 introduced new elements such as

      ,,
      ,,
      to help you in organizing your web page, instead of using frame, division, or table.
      No Frame ________29_______4

      Function: Provides an alternative text if the browser does not support framed layout. ________19_______0 must be placed within a .

      Syntax (Container tag):

      ________90_______1
      Iframe (Inline Frame or Internal Frame) ________29_______4

      Function: Place an inline frame on the browser window. An iframe is a frame that can be embedded within a regular HTML page, which contains a separate and complete HTML document, set via its ________42_______31 attribute.

      Syntax (Container tag):

      ________90_______2

      You could use CSS to position and style the iframe. Iframe is used extensively by JavaScript and Ajax.

      Example: [TODO]

      Embedding Programs

      Client-side programs such as Java Applets, MS ActiveX controls, JavaScript, VBScript, Flash, can be embedded inside an HTML document. These programs will be downloaded from the server and executed inside the browser. The browser supports the execution of client-side programs via a built-in processor or plug-in (e.g., the Java JRE Plug-in, Flash player plug-in).

      The markup tags involved here are:

      • ________29_______4: for embedded Java Applets (deprecated in HTML 4 in favor of tag).
      • ________29_______4: for embedded an executable programs.
      • ________19_______0: providing runtime parameters to and .
        Java Applet ________29_______4

        Function: Embedding a Java Applet. Deprecated in HTML 4 in favor of .

        Syntax (Container tag):

        ________90_______3
        Program Object ________29_______4 and Parameter ________19_______0

        Function: Embed an executable program and provide the program parameters. ________19_______0 must be nested inside an or .

        Syntax (Container tag), ________19_______0 (Standalone tag):________90_______4

        HTML Global Attributes

        The global attributes are applicable to ALL the HTML elements.

        • class="classname": specifies the subclass this tag belongs to. The ________70_______64 attribute can have more than one values. The class value needs not be unique. Classes are primarily used by CSS for applying style rule, selected via the class-selector (in the form of ________0_______22 or ________0_______23). See the "CSS Section" above.
        • id="idValue": for declaring an unique, document-wide identifier to a particular tag. No two tags can have the same ________0_______1 value, while many tags can belong to the same ________70_______64. The ________0_______1 attribute is used by CSS for applying styles (via the id-selector in the form of ________0_______27), and JavaScript for manipulating the element (via ________0_______28 function).
        • style="rule": for applying inline style to a tag, applicable to this tag only. See the "CSS Section".
        • title="tooltip-text": gives an advisory text description for this tag, and display as tool tip when you point your mouse pointer over the element.
        • lang="value": specifies the language used by this particular tag.
        • dir="LTR|RTL": specifies the direction of the text for this tag. It takes values of ________0_______29 (left-to-right) or ________0_______30 (right-to-left).

        HEAD Section's Tags

        The following tags can be used in the HEAD section:

        • ...: provides a title to this document.
        • : provides meta information of this document.
        • : establishes the linked resources and their relationship, in particular, the external CSS style sheet.
        • : declares a base URL for all the links in this document, and the ________42_______57 of the target frame.
        • : embedded style rules applicable to this document.
        • : program scripting codes.
        Base-URL and Default Target Name ________19_______0

        Function: Declare the base URL for all the links in this document via attribute "________0_______33", and specify the target name via attribute "________0_______02".

        Syntax:

        ________90_______5

        Attributes:

        • href="baseUrl": All relative URLs in this document are relative to this base-URL. For example, if ________19_______0’s ________0_______33 is set to:________90_______6then, the relative URL of "________0_______37" is resolved to "________0_______38".
        • target="target-frame-name|_blank|_parent|_self|_top": specifies the target frame into which all linked document should be loaded: "________0_______39" in new window, "________0_______40" in this frame, "________0_______41" in the parent frame, "________0_______42" in the full body of the window.
        Link Resources and Relationship ________19_______0

        Function: Link to another resource and indicate its relationship. There could be more than one ________19_______0 tags in the HEAD section.

        Syntax:

        ________90_______6

        Attributes:

        • rel, rev: indicates the forward or reverse relationship to the current document. Take value of ________0_______45, ________0_______46, ________0_______47, ________0_______48, ________0_______49, ________0_______50, ________0_______51, ________0_______52, ________0_______53, ________0_______54, and ________0_______55 (i.e., author).

        [TODO] other attributes.

        Example:

        ________90_______8

        The above ________19_______0 tags indicate that "________0_______57" is the stylesheet of MIME type "________0_______58"; "________0_______59" is the home page; "________0_______60" is the help page; this page ("________0_______61") is the previous page of "________0_______62" (in a reverse relationship), and this page is the next page of "________0_______63".

        The most-commonly used ________19_______0 is to specify the external CSS style sheet. The rests are hardly used.

        Including an Icon

        A favicon (aka favorite icon, shortcut icon, URL icon) is a file containing a small 16x16 icon. Browser can display the icon besides the URL bar or bookmark. The favicon file is usually called "________0_______65".

        To include an icon, provide a ________19_______0 tag in the section, as follows:

        You can use PhotoShop/Element to create a favicon file; or use a simple imaging tool (such as MS Paint) to create a small image and then submit to an online converter to generate a favicon file.

        Meta Information ________19_______0

        You can use ________19_______0 tag to include meta information about the document, such as keywords, author, expiration date, and page generator. The syntax is:

        ________70_______9

        Examples:

        ________90_______6

        The ________19_______0 tag can also be used to ask the server to insert an HTTP response header (read "HTTP Basics"). The syntax is as follow:

        ________70_______9

        EXAMPLE 1: Auto-Redirect after x seconds

        ________101_______2

        The above ________19_______0 tag triggers the server to include the following "Response Header" in the HTTP response message, when the page is downloaded:

        ________101_______3

        The browser, in response to this response header, redirect to the given URL after 3 sec.

        EXAMPLE 2: Auto-Refresh every x seconds

        ________70_______9

        EXAMPLE 3: Specify the character set used in the HTML document.

        The server will include this response header in the response message, when the page is downloaded:

        ________101_______5
        Embedded Style Definition ________19_______0

        Function: For embedded style declarations, covered earlier.

        Scripting Codes ________19_______0

        Function: For embedding scripting codes. See my "Introduction to JavaScript" on usage and examples.

        More CSS

        CSS Variables (Custom Properties)

        CSS Variables (aka Custom Properties or Cascading Variables) allows you to define variables and using that variables in multiple properties, in a style sheet. This is really useful in setting themes (without using a preprocessor such as LESS or SASS).

        Rules:

        1. The name of the variables shall begin with two dashes (________0_______73), e.g., ________0_______74.
        2. To reference the variable, use ________0_______75.
        3. To define global-scope CSS variables, place them in the ________0_______76 pseudo-class.

        For examples,

        ________101_______6

        Modifying CSS Properties from JavaScript and jQuery

        To modify the styles of an HTML element from JavaScript, set its ________82_______37 property, e.g.,

        ________101_______7

        To modify the style of an HTML element from jQuery:

        CSS ________0_______78 Property - Positioning the HTML Block Elements

        position: static|absolute|relative|fixed|inherit|initial|unset

        You can use the property ________0_______78 to alter the position of block elements.

        Each element has a natural location inside a page's flow, in the order read in by the browser. By default (________0_______80), elements are displayed from top to bottom in the normal flow. For block elements, line breaks are inserted at the beginning and the end to form a rectangular box.

        You can remove the box from the normal flow and specify its location with respect to either its parent element (________0_______81) hoặc cửa sổ trình duyệt (

        The h1 tags enclose a heading level 1
        

        The p tags is used to markup a paragraph.

        82);

        Đối với các phần tử không được định vị ____0_______84, vị trí mới được chỉ định thông qua các thuộc tính

        The h1 tags enclose a heading level 1
        

        The p tags is used to markup a paragraph.

        85,
        
        
        
        
        
        Table and Images
        
        
        
          Table and Images
          
            Logo of Languages
            
              S/No
              Language
              Logo
            
            
              1.
              HTML5
              
        Làm cách nào để viết mã bằng HTML và CSS?
        2. CSS3
        Làm cách nào để viết mã bằng HTML và CSS?
        3. JavaScript
        Làm cách nào để viết mã bằng HTML và CSS?
        53,
        The h1 tags enclose a heading level 1
        

        The p tags is used to markup a paragraph.

        87,
        
        
        
        
        
        Table and Images
        
        
        
          Table and Images
          
            Logo of Languages
            
              S/No
              Language
              Logo
            
            
              1.
              HTML5
              
        Làm cách nào để viết mã bằng HTML và CSS?
        2. CSS3
        Làm cách nào để viết mã bằng HTML và CSS?
        3. JavaScript
        Làm cách nào để viết mã bằng HTML và CSS?
        54,
        
        
        
        
          
          Lists and Hyperlinks
        
        
          Lists and Hyperlinks
          

        There are two types of lists in HTML:

        1. Ordered List.
        2. Unordered List.

        This is a nested unordered list of links:

        36,
        
        
        
        
          
          Lists and Hyperlinks
        
        
          Lists and Hyperlinks
          

        There are two types of lists in HTML:

        1. Ordered List.
        2. Unordered List.

        This is a nested unordered list of links:

        37

        • đứng đầu. bên trái. đáy. Phải. N. N%. tự động. Đặt khoảng cách từ cạnh của phần tử này đến cạnh tương ứng của khối chứa
        • chiều rộng. chiều cao. N. N%. tự động. Đặt chiều rộng và chiều cao của phần tử khối này
        • chỉ số z. con số. tự động. Khi hai khối chồng lên nhau do định vị lại, khối có số
          The h1 tags enclose a heading level 1
          

          The p tags is used to markup a paragraph.

          91 lớn hơn sẽ ở trên cùng (i. e. , trục z hướng ra ngoài màn hình như trong hệ tọa độ đồ họa 3D tiêu chuẩn). Số âm được phép.
          Làm cách nào để viết mã bằng HTML và CSS?
          77 mặc định xếp phần tử ở cùng cấp độ với phần tử gốc của nó. Nếu
          The h1 tags enclose a heading level 1
          

          The p tags is used to markup a paragraph.

          91 của hai phần tử giống nhau hoặc không có
          The h1 tags enclose a heading level 1
          

          The p tags is used to markup a paragraph.

          91 nào được xác định, thì phần tử cuối cùng được kết xuất sẽ được đặt lên trên cùng. chỉ mục z với alpha có thể tạo hiệu ứng xem qua
        • tràn ra. tràn-x. tràn-y. tự động. ẩn giấu. cuộn. dễ thấy. thừa kế. Chỉ định cách xử lý nội dung tràn chiều rộng/chiều cao của khối
        • tràn tràn. Bình thường. ngắt lời. thừa kế. chỉ định xem trình duyệt có thể ngắt dòng với các từ dài hay không nếu chúng làm tràn vùng chứa
        The h1 tags enclose a heading level 1
        

        The p tags is used to markup a paragraph.

        80 (mặc định)

        The h1 tags enclose a heading level 1
        

        The p tags is used to markup a paragraph.

        80 mặc định định vị phần tử theo quy trình bình thường của trang, theo thứ tự được trình duyệt đọc. Thuộc tính
        The h1 tags enclose a heading level 1
        

        The p tags is used to markup a paragraph.

        85,
        
        
        
        
        
        Table and Images
        
        
        
          Table and Images
          
            Logo of Languages
            
              S/No
              Language
              Logo
            
            
              1.
              HTML5
              
        Làm cách nào để viết mã bằng HTML và CSS?
        2. CSS3
        Làm cách nào để viết mã bằng HTML và CSS?
        3. JavaScript
        Làm cách nào để viết mã bằng HTML và CSS?
        54,
        The h1 tags enclose a heading level 1
        

        The p tags is used to markup a paragraph.

        87,
        
        
        
        
        
        Table and Images
        
        
        
          Table and Images
          
            Logo of Languages
            
              S/No
              Language
              Logo
            
            
              1.
              HTML5
              
        Làm cách nào để viết mã bằng HTML và CSS?
        2. CSS3
        Làm cách nào để viết mã bằng HTML và CSS?
        3. JavaScript
        Làm cách nào để viết mã bằng HTML và CSS?
        53 không có hiệu lực đối với
        The h1 tags enclose a heading level 1
        

        The p tags is used to markup a paragraph.

        84

        The h1 tags enclose a heading level 1
        

        The p tags is used to markup a paragraph.

        83

        Di chuyển phần tử so với vị trí luồng bình thường của nó. Không gian ban đầu chiếm bởi phần tử này được giữ nguyên. Các yếu tố xung quanh không bị ảnh hưởng. Ví dụ,



        Làm cách nào để viết mã bằng HTML và CSS?
        03

        Định vị phần tử so với phần tử tổ tiên không tĩnh đầu tiên; . Phần tử định vị tuyệt đối được lấy ra khỏi luồng bình thường, như thể nó không xuất hiện

        Để định vị tuyệt đối một phần tử trong phần tử chứa (không phải ), hãy khai báo phần tử chứa tương đối mà không có bất kỳ chuyển động nào, e. g. ,



        Làm cách nào để viết mã bằng HTML và CSS?
        04

        Định vị tuyệt đối thật thú vị. Bạn có thể tạo hoạt ảnh (chẳng hạn như bóng nảy và tuyết rơi) theo vị trí tuyệt đối (và liên tục định vị lại) hình ảnh trên màn hình của trình duyệt. Xem "Ví dụ JavaScript" của tôi

        Ví dụ,

        The h1 tags enclose a heading level 1
        

        The p tags is used to markup a paragraph.

        82

        Phần tử được cố định ở vị trí so với cửa sổ của trình duyệt và nó không cuộn đi. Vị trí được xác định trong các thuộc tính

        The h1 tags enclose a heading level 1
        

        The p tags is used to markup a paragraph.

        85,
        
        
        
        
        
        Table and Images
        
        
        
          Table and Images
          
            Logo of Languages
            
              S/No
              Language
              Logo
            
            
              1.
              HTML5
              
        Làm cách nào để viết mã bằng HTML và CSS?
        2. CSS3
        Làm cách nào để viết mã bằng HTML và CSS?
        3. JavaScript
        Làm cách nào để viết mã bằng HTML và CSS?
        53,
        The h1 tags enclose a heading level 1
        

        The p tags is used to markup a paragraph.

        87,
        
        
        
        
        
        Table and Images
        
        
        
          Table and Images
          
            Logo of Languages
            
              S/No
              Language
              Logo
            
            
              1.
              HTML5
              
        Làm cách nào để viết mã bằng HTML và CSS?
        2. CSS3
        Làm cách nào để viết mã bằng HTML và CSS?
        3. JavaScript
        Làm cách nào để viết mã bằng HTML và CSS?
        54 (hoặc
        
        
        
        
          
          Lists and Hyperlinks
        
        
          Lists and Hyperlinks
          

        There are two types of lists in HTML:

        1. Ordered List.
        2. Unordered List.

        This is a nested unordered list of links:

        36 và
        
        
        
        
          
          Lists and Hyperlinks
        
        
          Lists and Hyperlinks
          

        There are two types of lists in HTML:

        1. Ordered List.
        2. Unordered List.

        This is a nested unordered list of links:

        37). Yếu tố định vị cố định được đưa ra khỏi luồng bình thường, như thể nó không có mặt

        Ví dụ, một cố định

        được thêm vào ví dụ trên ở vị trí tuyệt đối. Hãy lưu ý rằng chỉ mục z được sử dụng để đảm bảo rằng giá trị cố định

        luôn luôn ở trên đầu trang khác

        's, bất kể thứ tự viết

        'S

        Thuộc tính CSS


        Làm cách nào để viết mã bằng HTML và CSS?
        12 và


        Làm cách nào để viết mã bằng HTML và CSS?
        13 - Di chuyển phần tử sang trái hoặc phải

        trôi nổi. bên trái. Phải. không có

        Bạn có thể đẩy một phần tử sang cạnh trái hoặc phải của phần tử chứa thông qua thuộc tính



        Làm cách nào để viết mã bằng HTML và CSS?
        12. Float thường được sử dụng cho hình ảnh, với các văn bản bao quanh phần tử nổi. Các phần tử trước phần tử nổi không bị ảnh hưởng. Phần tử sau phần tử nổi chảy xung quanh nó

        Bạn có thể nổi theo chiều ngang (tôi. e. , trái và phải), không lên và xuống. Khác với hình ảnh, phần tử float sẽ có chiều rộng và chiều cao được chỉ định rõ ràng. Các phần tử float thực sự được đưa ra khỏi luồng bình thường. Phần tử sau hoạt động như thể phần tử nổi không có ở đó, nhưng các văn bản kèm theo sẽ bao quanh phần tử nổi

        Nếu nhiều hình ảnh được thả nổi cùng nhau (tức là ở bên trái), hình ảnh thứ hai sẽ được đẩy sang cạnh trái của hình ảnh đầu tiên, v.v. nếu có sẵn khoảng trống theo chiều ngang; . Ví dụ chúng ta có thể thả nổi nhiều ảnh thu nhỏ về bên trái như sau

        Để tắt float, hãy sử dụng thuộc tính



        Làm cách nào để viết mã bằng HTML và CSS?
        13 và chỉ định bên nào (trái, phải hoặc cả hai) không cho phép phần tử float

        thông thoáng. bên trái. Phải. cả hai. không có



        Làm cách nào để viết mã bằng HTML và CSS?
        16 có nghĩa là phía bên trái của phần tử này không thể là phần tử nổi. Nghĩa là, bên trái sẽ bắt đầu bằng lề trái của phần tử chứa.


        Làm cách nào để viết mã bằng HTML và CSS?
        16 tương tự như



        Làm cách nào để viết mã bằng HTML và CSS?
        3

        Sử dụng


        Làm cách nào để viết mã bằng HTML và CSS?
        12 để tạo cột

        Theo mặc định, các phần tử khối bắt đầu ở cạnh trái và chiếm toàn bộ chiều rộng của phần tử chứa. Do đó, nó sẽ không xếp cái này cạnh cái kia ở định dạng cột. Bạn có thể sử dụng thuộc tính



        Làm cách nào để viết mã bằng HTML và CSS?
        12 để tạo cột hoặc lưới

        [TODO] thêm

        Ví dụ. Định vị một khung nội tuyến

        "______9_______21"

         .. tag-name>
        
        8

        "______9_______22"

         .. tag-name>
        
        9

        Thuộc tính CSS



        Làm cách nào để viết mã bằng HTML và CSS?
        23 (cũng áp dụng cho



        Làm cách nào để viết mã bằng HTML và CSS?
        1) làm nổi khung nội tuyến sang lề trái hoặc phải của cửa sổ trình duyệt

        Bạn cũng có thể sử dụng thuộc tính CSS



        Làm cách nào để viết mã bằng HTML và CSS?
        25 để định vị iframe (và các phần tử HTML khác), "


        Làm cách nào để viết mã bằng HTML và CSS?
        26" định vị phần tử so với phần tử tổ tiên được định vị đầu tiên của nó;

        The h1 tags enclose a heading level 1
        

        The p tags is used to markup a paragraph.

        0

        Thuộc tính CSS


        Làm cách nào để viết mã bằng HTML và CSS?
        30 và


        Làm cách nào để viết mã bằng HTML và CSS?
        31

        trưng bày. khối. nội tuyến. chặn Nội tuyến. không có. mục danh sách. bàn. hàng trong bảng. ô bảng. lưới. lưới nội tuyến

        • khối và nội tuyến. Thuộc tính


          Làm cách nào để viết mã bằng HTML và CSS?
          30 kiểm soát bố cục và luồng của phần tử HTML. Hầu hết các phần tử có giá trị mặc định


          Làm cách nào để viết mã bằng HTML và CSS?
          30 là


          Làm cách nào để viết mã bằng HTML và CSS?
          34 (

          ,

          ) hoặc



          Làm cách nào để viết mã bằng HTML và CSS?
          35 (



          Làm cách nào để viết mã bằng HTML và CSS?
          0,



          Làm cách nào để viết mã bằng HTML và CSS?
          0)
          Có thể sử dụng


          Làm cách nào để viết mã bằng HTML và CSS?
          38 để hiển thị một phần tử nội tuyến dưới dạng một khối. Ví dụ: Mặt khác,


          Làm cách nào để viết mã bằng HTML và CSS?
          39 có thể được sử dụng để hiển thị nội tuyến phần tử khối. Ví dụ,

        • chặn Nội tuyến. pha trộn phần tử với luồng văn bản, đồng thời cho phép chúng tôi sử dụng phần đệm, lề, chiều cao và các thuộc tính tương tự không có hiệu ứng hiển thị trên các phần tử nội tuyến
        • không có. sẽ KHÔNG được hiển thị và không chiếm dung lượng (so với.


          Làm cách nào để viết mã bằng HTML và CSS?
          40 sẽ không hiển thị phần tử nhưng phần tử vẫn chiếm dung lượng)
        • mục danh sách. hiển thị phần tử như thể nó là một
        • .
        • bảng, hàng của bảng, ô của bảng. để hiển thị phần tử (

          ) BẰNG

      • , ,
      • lưới. hiển thị trong một lưới, ví dụ,
      • hiển thị. ẩn giấu. dễ thấy. được sử dụng để ẩn hoặc hiển thị phần tử mà không xóa phần tử khỏi quy trình bình thường của trang. Đó là, không gian bị chiếm bởi phần tử được bảo toàn

        Tôi có nên bắt đầu viết mã bằng HTML và CSS không?

        HTML và CSS . web developer Charlotte O'Hara recommends an HTML/CSS combo as a worthy “best programming language to learn” for aspiring coders.

        Làm cách nào để tạo một trang web bằng mã HTML và CSS?

        Lập kế hoạch bố trí của bạn. Bước đầu tiên của bất kỳ trang web nào là luôn biết bạn muốn gì trên đó và (mơ hồ) bạn muốn nó trông như thế nào. .
        Thiết lập 'mã soạn sẵn'. .
        Tạo các thành phần trong bố cục của bạn. .
        Điền nội dung HTML. .
        Thêm một số CSS bố cục cơ bản. .
        Thêm phong cách cụ thể hơn. .
        Thêm màu sắc và hình nền. .
        Kỉ niệm

        Tôi có thể đặt mã HTML trong CSS không?

        Có ba cách khác nhau để liên kết CSS với HTML dựa trên ba kiểu kiểu CSS khác nhau. Inline – sử dụng thuộc tính style bên trong phần tử HTML . Nội bộ – được viết trong phần . Bên ngoài – liên kết tài liệu HTML với tệp CSS bên ngoài .