JavaScript create h1 element

If you are the content provider, read HTML. If you are the graphic designer, read CSS. If you are a programmer and want to add dynamic effects to your web page, read JavaScript. But if you operate in OMO (one-man-operated) and are expected to create a reasonably good-looking website, you need to understand HTML, CSS and JavaScript. This is the reason that I combine both the HTML and CSS in this article as they are inseparable.

To create an OMO website, I suggest that:

  1. Understand HTML, CSS and JavaScript thoroughly.
  2. Pick an authoring tool: Use Dreamweaver if you can afford. Otherwise, find a free source-code editor (such as VS Code, Sublime Text, Sublime Text, NotePad++). For programmers, Eclipse/NetBeans/VSCode are good choice for HTML/CSS/JavaScript as they perform syntax checking and provide auto-code-complete.
  3. Design and organize your page. Decide on the look and feel of your website. How many columns? What are the major sections (e.g., header, navigation menu, main content, sidebar, table of content, footer)? Do you need a navigation menu or panel? What is your theme (colors, fonts)? And so on.
  4. Take a close look at your favorite websites!!! CSS is humongous and complex! You can't invent this wheel! Use F12 Debugger to inspect HTML/CSS of your favorite websites.
    Use a CSS framework, such as BootStrap, to jump-start your design.
  5. Start with an initial CSS design. Website design begins with CSS, NOT HTML?!. Work on your CSS:
    1. Partition your web page into logical section via

      (or HTML5',,

      ,), such as header, content, footer. Assign an

      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      1 to

      that is unique (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". Assign a common classname to sections (non-unique) that share the same style (e.g., "

      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      4", "

      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      5"). Write the CSS id-selectors and class-selectors (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) for common tags (such as

      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      9,


      JavaScript create h1 element
      0,


      JavaScript create h1 element
      1,


      JavaScript create h1 element
      2,


      JavaScript create h1 element
      3,


      JavaScript create h1 element
      4,


      JavaScript create h1 element
      5,


      JavaScript create h1 element
      6), in each of the

      's. Basically, what I am saying is to design each of the sections by itself - a "divide and conquer" strategy.

    2. Create sub-classes for common styles, such as layout out tables and images and special effects (e.g., "


      JavaScript create h1 element
      7", "


      JavaScript create h1 element
      8", "


      JavaScript create h1 element
      9"). They could be used in

      and




      JavaScript create h1 element
      0.

    3. There are many good and free CSS templates (or web templates) available online (just google "CSS Templates" or "Web templates"). Pick one that meets your taste to model after. You can also look at the CSS of any website that you find interesting. Be aware of the Intellectual Property Right, do not use any images or graphics unless they are in the public domain. It is extremely easy to create one yourself with an imaging tool, such as PhotoShop, Element, Illustrator or even Paint.
      Use a CSS framework, such as BootStrap; and pick your favorite design from the samples.
  6. Write your HTML pages. You may need to modify the CSS as you go along. The most challenging thing for an OMO web author is that he has to be concerned about both the contents and appearances at the same time, and can lose focus at times!
  7. Repeat the previous steps until you are happy with your page's look and feel, layout, and most importantly, the contents - try not to create yet another insignificant website.

I wrote the above many years ago while creating these web pages (You can check out my CSS). Today, I would recommend that you learn the basics of HTML/CSS, but quickly jump into a framework such as BootStrap to produce professional-looking web pages. You can't write better than these people!

Introduction to HTML

What is HTML (HyperText Markup Language)?
  1. HTML is the language for publishing web pages on the WWW (World-Wide Web, or World-Wide Wait?).
  2. HTML is a Document Description Language (aka Document Markup Language). HTML is the standard markup language for documents designed to be displayed in a web browser. HTML is NOT a programming language like C/C++/C#/Java, which is used to implement programming algorithm.
  3. An HTML document is a text document, and it is human-readable.
  4. Today, HTML works together with CSS (Cascading Style Sheets) (for layout) and JavaScript (for programming).
HTML Versions
  • HTML Draft (October 1991): Tim Bernes-Lee (of CERN) proposed the early HTML (with 18 tags) for sharing of document in a hypertext system.
  • HTML 2.0 (November 24, 1995): Published as IETF RFC 1866.
  • HTML 3.2 (January 14, 1997): Published as W3C HTML 3.2 Recommendation.
  • HTML 4.0 (December 1997): Published as W3C HTML 4.0 Recommendation, with strict, transitional and frameset. In December 24, 1999, HTML 4.01 was published as the final HTML specification by W3C. In May 2000, HTML 4.01 Strict as published as ISO/IEC International Standard 15445:2000.
  • XHTML 1.0 (January 2000): W3C considered HTML 4.01 as the final HTML, and moved on to develop XHTML 1.0 with stricter rules and syntaxes, followed by XHTML 2.0. XHTML 2.0, although theoretically elegant, is impractical as it is not backward compatible with HTML4/XHTML1.0. A rebel group called WHATWG (Web Hypertext Application Technology Working Group) continued to work on extending HTML with more features in a backward-compatible manner. In 2004, WHATWG released HTML5. By 2007, HTML5 has captured the attention of the developers. W3C decided to abandon the XHTML 2.0 and embraced the HTML5.
  • HTML 5 (October 28, 2014): HTML 5 was published as W3C Recommendation, followed by HTML 5.1 on November 1, 2016, and HTML 5.2 in December 14, 2017.
  • On 28 May 2019, the W3C announced that WHATWG would be the sole publisher of the HTML and DOM standards.

Today, the prevailing specifications are HTML5 (@ https://html.spec.whatwg.org/multipage/). Nonetheless, the most interesting thing about standards is that nobody really follows them strictly. Every browser (Chrome, Firefox, Opera, Safari and Internet Explorer) has its own variations and support the standards to various extents (so as to out-do others).

Markup Tags

HTML uses markup tags, such as

(for Paragraph),

to (for Heading Level 1 to 6),



JavaScript create h1 element
1 (for Image),



JavaScript create h1 element
0(for Anchor or Hyperlink), to markup a document. HTML markup tags perform these functions:
  1. Layout the documents, e.g.,

    (layout as a paragraph),

    to (layout as heading level 1 to 6),



    JavaScript create h1 element
    3 (perform a line break),



    JavaScript create h1 element
    4 (draw a horizontal rule), (tabulating data),
      (layout an ordered list).
    1. Provide link (called hyperlink) to another HTML document, via the



      JavaScript create h1 element
      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



      JavaScript create h1 element
      0,) and attributes (such as



      JavaScript create h1 element
      7,



      JavaScript create h1 element
      8,



      JavaScript create h1 element
      9,

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

      0,

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

      1) have been deprecated in HTML 4, in favor of CSS.
    • Do not use nested tables or frame for formatting the document, use

      and




      JavaScript create h1 element
      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.

    
    
    
      
      Basic HTML Document Layout
    
    
      

    My First Web Page


    This is my first web page written in HTML.

    HTML

    HTML uses markup tag to markup a document.

    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 "

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

    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

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

      4 container tags. You can specify the default language of your document via attribute

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

      5 (for English) inside the opening tag.
    3. JavaScript create h1 element
    4. There are two sections in the document:

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

      6 and

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

      7, marked by

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

      4 and

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

      4 tags, respectively.
    5. In the

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

      6 section:
      1. The



        JavaScript create h1 element
        0 element (Line 4) specifies the character encoding scheme of the document. Today, virtually all (English) HTML documents are encoded using the
        
        
        
        
          
          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:

        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

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

        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

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

      7 section:
      1. The
        
        
        
        
          
          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:

        05 container tags (Line 8) mark the enclosing texts as Level-1 Heading. There are six levels of heading in HTML, from
        
        
        
        
          
          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:

        05 (largest) to

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

        4. Line 11 uses a
        
        
        
        
          
          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:

        08 (Heading Level-3).
      2. The



        JavaScript create h1 element
        4 standalone element (Line 9), which does not enclose text content, draws a horizontal rule (or line).
      3. The
        
        
        
        
          
          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:

        10 container tags (Line 10 and 12) mark the enclosing texts as a paragraph.
        
        
        
        
          
          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:

        10 is the most frequently-used tag in HTML.
      4. The
        
        
        
        
          
          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:

        12 tags (nested under the
        
        
        
        
          
          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:

        10 in Line 10) specify "strong emphasis" for its content - rendered in bold by the browser. Similarly, the nested
        
        
        
        
          
          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:

        14 tags (Line 12) specify "emphasis" rendered in italic; and

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

        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),




      JavaScript create h1 element
      3 (line break),

      to (heading level 1 to 6),



      JavaScript create h1 element
      4 (horizontal rule),
      • (unordered list),
        1. (ordered list).
        2. inline elements:



          JavaScript create h1 element
          0(bold),



          JavaScript create h1 element
          0(italic),



          JavaScript create h1 element
          1 (image),



          JavaScript create h1 element
          0(anchor for hyperlink).
        3. table

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

    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

    
    
    
    
      
      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:

    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
      
      
      
      
        
        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:

      23 and displayed with numbers; while a unordered list is marked by
      
      
      
      
        
        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:

      24 and displayed with bullets. Each of the list items is marked by
    3. See how the extra white spaces, tabs and line-breaks are ignored by the browser.

      4
    4. .
    5. You can nest a list inside another list, by placing the complete inner list definition inside a list item
    6. See how the extra white spaces, tabs and line-breaks are ignored by the browser.

      4
    7. of the outer list.
    8. Hyperlink is marked by



      JavaScript create h1 element
      0standalone tag. The attribute
      
      
      
      
        
        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:

      28 provides the destination URL of the link.

    Example 3: Tables and Images

    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    How it Works?
    1. A table, consisting of rows of cells, can be marked via

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

      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



    JavaScript create h1 element
    1 tag. The mandatory attribute
    
    
    
    
      
      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:

    31 specifies the path (or url) for the image source file;
    
    
    
    
      
      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:

    32 gives the alternative text if the image cannot be displayed. I used relative path in the
    
    
    
    
      
      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:

    31, where "
    
    
    
    
      
      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:

    34" denotes the parent directory. You need to find some images, store them and figure out your own relative path.
  5. The



    JavaScript create h1 element
    1's optional attributes
    
    
    
    
      
      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 and
    
    
    
    
      
      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 specify the width and height of the image displayed area. They are used here to resize the images for consistent display.
  6. In the

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

    6 section, I added some so-called style rules under the



    JavaScript create h1 element
    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
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    

    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

    JavaScript create h1 element
    HTML Tags

    An HTML opening tag is enclosed by a pair of angle brackets in the form of

    
    
    
    
      
      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:

    40(e.g.,

    ,

    
    
    
    
      
      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:

    41). The tag-name shall be in lowercase.

    Tag's Attributes

    Attributes, in the form of

    
    
    
    
      
      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:

    42 pairs can be included in the opening tag to provide additional information about the element.

    Example 1: In, the attribute

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

    5 specifies the natural language for this document.

    Example 2: In




    JavaScript create h1 element
    0, the attribute
    
    
    
    
      
      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:

    45 specifies the character encoding scheme.

    Example 3: An




    JavaScript create h1 element
    1 (image) tag may contain these attributes:

    JavaScript create h1 element

    The attribute "

    
    
    
    
      
      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:

    31" specifies the source-URL of the image; "
    
    
    
    
      
      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:

    32" specifies an alternate text, if the image cannot be displayed; "
    
    
    
    
      
      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" and "
    
    
    
    
      
      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" specify the width and height of the image displayed area.

    Some of the attributes are mandatory (e.g., the "

    
    
    
    
      
      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:

    31" and "
    
    
    
    
      
      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:

    32" attributes of the



    JavaScript create h1 element
    1 tag); while some are optional (e.g., the "
    
    
    
    
      
      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" and "
    
    
    
    
      
      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" attributes of the



    JavaScript create h1 element
    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:

    <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
    

    Attributes are written in the form of

    
    
    
    
      
      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:

    57
    
    
    
    
      
      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:

    58 pairs. The
    
    
    
    
      
      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:

    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.,

    
    
    
    
      
      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:

    60

    ,
    
    
    
    
      
      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:

    61.

    There are two types of elements:

    1. Container Element: A container element has an opening tag
      
      
      
      
        
        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:

      40 that activates an effect to its content, and a matching closing tag
      
      
      
      
        
        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:

      63 to discontinue the effect. In other words, container elements apply formatting to their contents. For example:

      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

    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.,



      JavaScript create h1 element
      4 is used to draw a horizontal rule;



      JavaScript create h1 element
      3 to introduce a manual line-break; and



      JavaScript create h1 element
      1 for embedding an external image.
      In XHTML, you need to end a standalone element with a trailing
      
      
      
      
        
        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:

      67 in the opening tag. For examples:


      JavaScript create h1 element
      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,



      JavaScript create h1 element
      HTML5 no longer enforces the above rules. Today, most developers omit the trailing
      
      
      
      
        
        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:

      67 for brevity, e.g.,



      JavaScript create h1 element
      3,



      JavaScript create h1 element
      4.
      HTML4 has these void elements:



      JavaScript create h1 element
      0,



      JavaScript create h1 element
      0,



      JavaScript create h1 element
      3,
    ,



    JavaScript create h1 element
    4,



    JavaScript create h1 element
    1,



    JavaScript create h1 element
    0,



    JavaScript create h1 element
    0,



    JavaScript create h1 element
    0,



    JavaScript create h1 element
    0.
    HTML5 added



    JavaScript create h1 element
    0,



    JavaScript create h1 element
    0,



    JavaScript create h1 element
    0.
    Nesting Elements and the Document Tree

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

    
    
    
    
      
      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:

    83

    . It is important to properly nest the elements, e.g., the sequence
    
    
    
    
      
      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:

    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,

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

      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
      
      
      
      
        
        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:

      10 to lay out a paragraph; or insert a manual line-break tag



      JavaScript create h1 element
      3 to break into a new line. In other words, you control the new-lines via the mark-up tags. The
      
      
      
      
        
        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:

      10 leaves additional space after the paragraph; while



      JavaScript create h1 element
      3 does not.
      To get multiple whitespace, use a special code sequence
      
      
      
      
        
        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:

      89 (which stands for non-breaking space). For example,
      
      
      
      
        
        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:

      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:

    
    
    
    
      
      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:

    1

    The

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

    4 container element defines the extent of an HTML document.

    There are two sections:

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

    6 and

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

    7:

    1. ... container element defines the

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

      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

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

      7 section, which encloses the content that users actually see in the browser's window.
    The

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

    6 Section and the
    
    
    
    
      
      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:

    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

    
    
    
    
      
      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:

    97
    
    
    
    
      
      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:

    98

    The is the same as:

    
    
    
    
      
      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:

    2

    The "

    
    
    
    
      
      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:

    99" is needed to prevent the page from scrolling to the top following
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    00.

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

    Images




    JavaScript create h1 element
    1 Image Tag (Void Element)

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

    
    
    
    
      
      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:

    3

    Example:

    
    
    
    
      
      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:

    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
      
      
      
      
        
        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 and
      
      
      
      
        
        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 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
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      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:

    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    05,
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    06,
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    07,
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    08,
    
    
    
    
      
      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:

    57.

    Using Image as Hyperlink

    To use an image as a hyperlink, put the image tag




    JavaScript create h1 element
    1 between



    JavaScript create h1 element
    0and . For example:

    
    
    
    
      
      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:

    5

    Image used as hyperlink anchor automatically gets a border. The color of the border is given in the




    JavaScript create h1 element
    9 (unvisited),

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

    0 (visited),

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

    1 (active) attributes of the tag (or the


    JavaScript create h1 element
    3,


    JavaScript create h1 element
    4,


    JavaScript create h1 element
    5, and


    JavaScript create h1 element
    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

    ,

    ,
      ,
    ,



    JavaScript create h1 element
    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.,




    JavaScript create h1 element
    0,

    ,



    JavaScript create h1 element
    7,
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    22,



    JavaScript create h1 element
    8,



    JavaScript create h1 element
    9,

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

    1,

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

    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 "

    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    27".

    
    
    
    
      
      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:

    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




    JavaScript create h1 element
    0 element, as follows:

    
    
    
    
      
      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:

    7
    How it Works?
    1. 
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      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
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      30.
    4. A property is identified by its
      
      
      
      
        
        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:

      57, followed by its
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      32, separated by colon "
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      33". The
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      34 pairs are separated by semicolon "
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      35". A
      
      
      
      
        
        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:

      57 could have multiple
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      32s, separated by commas "
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      38" (e.g., the
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      39 property).
    5. A selector selects a set of HTML elements to apply the styles. This example uses the so-called
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      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 "
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      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

      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      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 Table and Images Table and Images Logo of Languages S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript 43 from Rule 3 (which is not specified in Rule 4); but uses the Table and Images Table and Images Logo of Languages S/No Language Logo 1. HTML5 2. CSS3 3. JavaScript 44 from the Rule 4 (instead of Rule 3).

  8. Style properties:
    • The
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      39 list the font faces, in the order of preferences. Browsers search through the list (from the beginning) to an available font face.
    • 
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      22 and
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      47: specify the foreground and background colors, respectively. Color can be expressed in
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      48 (hex value),
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      49 (decimal value between 0 and 255), or with the pre-defined color names (such as
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      50,
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      51).
    • 
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      52: text alignment of either
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      53,
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      54,
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      55,
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      56.
    • 
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      57:
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      58,
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      59, and others.
    • 
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      60:
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      58,
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      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




JavaScript create h1 element
0





  
  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:

8

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





  
  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:

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
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    64 attribute; and ID-selector which selects an element based on the

    The h1 tags enclose a heading level 1

    The p tags is used to markup a paragraph.

    1 attribute.
  2. An ID-Selector begins with a
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    66 sign, followed by an

    The h1 tags enclose a heading level 1

    The p tags is used to markup a paragraph.

    1-name, e.g.,
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    68 and
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    69, which select element with
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    70 and
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    71, respectively. Since

    The h1 tags enclose a heading level 1

    The p tags is used to markup a paragraph.

    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 "
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    73" followed by a
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    64-name, e.g.,
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    75 and


    JavaScript create h1 element
    7, which select all elements with
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    77 and
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    78, respectively. Unlike

    The h1 tags enclose a heading level 1

    The p tags is used to markup a paragraph.

    1-value that is unique, many elements can have the same
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    64-name.
  4. In the test HTML document, we partition the body into three sections, via

    . We assign a unique

    The h1 tags enclose a heading level 1

    The p tags is used to markup a paragraph.

    1 to each

    , i.e.,

    ,

    and

    to semantically identify their contents, and use the ID-Selectors

    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    68 and
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    69 to apply styles to the

    's.

  5. Similarly, we mark texts with



    JavaScript create h1 element
    0 and



    JavaScript create h1 element
    0, and use the Class-Selectors
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    75 and


    JavaScript create h1 element
    7 to apply styles to these texts.
  6. Take note that:
    • is a block element, while




      JavaScript create h1 element
      0 is a inline element.

    • The
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      64 attribute can take multiple values, as in
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      90 (Line 18). Both styles are applied.
HTML

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

1 vs





Table and Images



  

Table and Images

Logo of Languages
S/No Language Logo
1. HTML5
JavaScript create h1 element
2. CSS3
JavaScript create h1 element
3. JavaScript
JavaScript create h1 element
64 Attributes
  • The h1 tags enclose a heading level 1

    The p tags is used to markup a paragraph.

    1 and
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    64 are used to reference HTML elements by JavaScript and CSS. ID can also be used as the target of HTML anchors.
  • The h1 tags enclose a heading level 1

    The p tags is used to markup a paragraph.

    1 must be unique in an HTML document, but
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    64 needs not.
  • An element can have one

    The h1 tags enclose a heading level 1

    The p tags is used to markup a paragraph.

    1, but many
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    64es.
  • CSS's ID-selector begins with
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    66 (e.g.,
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    68), Class-selector begins with dot (
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    73) (e.g.,
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    02).

For example,

Recommendation: Use ID for JavaScript and internal




JavaScript create h1 element
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
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    34 pairs enclosed in braces
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    30, as follows:
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    0For example, This selector selects the tag. Hence, the defined style is applied to the

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

    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
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    34 pairs are separated by semicolon "
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    35". You can omit the last semi-colon before the closing brace "
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    09". But I recommend that you keep it, so that it is easier to include new entries without a missing "
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    35".
  3. The
    
    
    
    
      
      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:

    57 and
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    32 are separated by a colon "
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    33" in the form of
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    34.
  4. Multiple
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    32s for the same property
    
    
    
    
      
      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:

    57 are separated by commas "
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    38" (as in the
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    39). However, multiple parts of the same property
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    32 are separated by space "
    
    
    
    
      
      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:

    89" (as in the
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    21, which has a value with 4 parts).
  5. Values containing space must be quoted, e.g., "
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    22" or
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    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 "
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    38". For example, the following rule apply to elements to:
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    1
  8. Comments can be inserted inside the style sheet enclosed between
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    25 and
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    26. The end-of-line comment
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    27 is not applicable in CSS?!
CSS Syntax vs. HTML Syntax

CSS and HTML have different syntaxes!!! For example, HTML's attributes uses "




  
  YOUR TITLE HERE!
  
  


  

28" to separate the




  
  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:

57 and





Table and Images



  

Table and Images

Logo of Languages
S/No Language Logo
1. HTML5
JavaScript create h1 element
2. CSS3
JavaScript create h1 element
3. JavaScript
JavaScript create h1 element
32, in the form of




  
  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:

42; the name-value pairs are separated by spaces, as follows:





  
  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:

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
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    32. The rules are applicable to that particular HTML element only.
  2. Internal (Embedded) Style Sheet: Embedded inside the



    JavaScript create h1 element
    0 tags in the

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

    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



    JavaScript create h1 element
    0 element in the

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

    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




  
  YOUR TITLE HERE!
  
  


  

37 attribute of the opening tag. For example,






Table and Images



  

Table and Images

Logo of Languages
S/No Language Logo
1. HTML5
JavaScript create h1 element
2. CSS3
JavaScript create h1 element
3. JavaScript
JavaScript create h1 element
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





  
  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:

57 and





Table and Images



  

Table and Images

Logo of Languages
S/No Language Logo
1. HTML5
JavaScript create h1 element
2. CSS3
JavaScript create h1 element
3. JavaScript
JavaScript create h1 element
32 are separated by colon



  
  YOUR TITLE HERE!
  
  


  

40, and the





Table and Images



  

Table and Images

Logo of Languages
S/No Language Logo
1. HTML5
JavaScript create h1 element
2. CSS3
JavaScript create h1 element
3. JavaScript
JavaScript create h1 element
34 pair are separated by semicolon



  
  YOUR TITLE HERE!
  
  


  

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




JavaScript create h1 element
0 tags in the

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

6 section. For example,






Table and Images



  

Table and Images

Logo of Languages
S/No Language Logo
1. HTML5
JavaScript create h1 element
2. CSS3
JavaScript create h1 element
3. JavaScript
JavaScript create h1 element
4
  • The scope of the embedded styles is the current HTML document.
  • Embedded styles separate the presentation and content (in the

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

    6 and

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

    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




  
  YOUR TITLE HERE!
  
  


  

47 in



JavaScript create h1 element
0




  
  YOUR TITLE HERE!
  
  


  

49

The border property is inherited.

Although the first




JavaScript create h1 element
0is nested under the

tag, the






Table and Images



  

Table and Images

Logo of Languages
S/No Language Logo
1. HTML5
JavaScript create h1 element
2. CSS3
JavaScript create h1 element
3. JavaScript
JavaScript create h1 element
06 property is not inherited from the ancestor. That is, you will not see a border around the



JavaScript create h1 element
0's content. We can force the inheritance by assigning a special value "



  
  YOUR TITLE HERE!
  
  


  

53" as shown in the Class Selector



  
  YOUR TITLE HERE!
  
  


  

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


    JavaScript create h1 element
    2, Class-selector
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    56 and ID-selector
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    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



JavaScript create h1 element
2 Tag-selector is the most general, which selects all the

elements; the




  
  YOUR TITLE HERE!
  
  


  

59 Class-selector selects a class of

elements with attribute




  
  YOUR TITLE HERE!
  
  


  

60; the



  
  YOUR TITLE HERE!
  
  


  

61 and



  
  YOUR TITLE HERE!
  
  


  

62 ID-selectors select only one element each with a unique

The h1 tags enclose a heading level 1

The p tags is used to markup a paragraph.

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




  
  YOUR TITLE HERE!
  
  


  

64, the latter takes effect.

The inline style (applied to a specific tag via




  
  YOUR TITLE HERE!
  
  


  

37 attribute) overrides the internal style (defined in



JavaScript create h1 element
0

    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    67
  • ::selection (CSS3): Select the user-selected-text on the screen. You are only allow to set the
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    22 and
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    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
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      70 represent beginning in regex.)
    • T[att$="value"]: selects elements that possess the given attribute, ending with the given value. (Symbol
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      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
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      72, td is the first child of the parent.
    • :nth-child(odd), :nth-child(even): E.g.,
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      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
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      74 select the first

      .

    • T:nth-of-type(odd), T:nth-of-type(even): E.g.,
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      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.
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    76 Pseudo-class Selector

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

    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    77 Pseudo-class Selector

    The

    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    78 selector lets you select elements not meeting the criterion in selector
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    79. For example,
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    80 select elements not belonging to class
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    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
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    22 and
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    47 Properties

    Specifying Color

    Color can be expressed as:

    1. RGB hexadecimal triplets in the form of
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      84, where
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      85,
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      86,
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      87 are values of red, green and blue. The values are between
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      88 and
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      89, in hexadecimal. For example,
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      90. The color value
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      91 can be shorthand as
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      92.
    2. RGB in the form of
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      93. The
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      94,
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      95,
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      96 can be expressed in a decimal value between
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      97 and
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      98; or in percentage between
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      99 and
      JavaScript create h1 element
      00. I prefer the decimal form over the hex triplets as it is easier to visualize the values.
    3. RGBA in the form of
      JavaScript create h1 element
      01: RGB with an additional A (alpha channel). The A is used to control the transparency/opacity, with
      JavaScript create h1 element
      02 for opaque; and
      JavaScript create h1 element
      03 for totally transparent.
    4. HSL in the form
      JavaScript create h1 element
      04: Hue is the color on the color wheel in degrees between
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      97 to
      JavaScript create h1 element
      06. Saturation (purity of color) is expressed in percentage between
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      99 and
      JavaScript create h1 element
      00 (pure color). Lightness (brightness or intensity) is also expressed in percentage between
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      99 (darkest) and
      JavaScript create h1 element
      00 (brightest).
    5. HSLA in the form of
      JavaScript create h1 element
      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
      JavaScript create h1 element
      12,
      JavaScript create h1 element
      13, etc.
    CSS Color Properties

    The most important color properties are

    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    22 and
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    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
      JavaScript create h1 element
      16 and NOT inherited, so as to create a see-through effect. The
      JavaScript create h1 element
      17 sets to its default value.

    CSS Length Measurements

    Many CSS properties, such as

    
    
    
    
      
      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,
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    21,
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    06,
    JavaScript create h1 element
    22,
    JavaScript create h1 element
    23 and
    JavaScript create h1 element
    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.
      JavaScript create h1 element
      25 is not commonly used.
    • px:
      JavaScript create h1 element
      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,
      JavaScript create h1 element
      27 set the table's
      
      
      
      
        
        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 to 80% of the
      
      
      
      
        
        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 of the parent (probably a

      or ).

    • em: the width of the letter
      JavaScript create h1 element
      30 of a referenced font, generally, the current font.
      For example,
      JavaScript create h1 element
      31 means that the margins are twice the current (referenced) font-size.
      However, if
      JavaScript create h1 element
      32 is used to set the
      JavaScript create h1 element
      23 property, it needs to find a reference. In this case, it is referenced to the parent's
      JavaScript create h1 element
      23. For example,
      JavaScript create h1 element
      35 sets the
      JavaScript create h1 element
      23 of

      to 1.2 times of the parent (possibly a

      or ).

    • rem (CSS3): relative to the
      JavaScript create h1 element
      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.
      JavaScript create h1 element
      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

    JavaScript create h1 element
    39 and
    JavaScript create h1 element
    32 measurement are relative to another element (percentage values are always relative, e.g.,
    JavaScript create h1 element
    41 of something). For example,

    To add to the confusion, some properties, such as

    JavaScript create h1 element
    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

    JavaScript create h1 element
    43, the bare number is measured in pixels.

    Recommendation
    • Define a
      JavaScript create h1 element
      23 for .
    • Use
      JavaScript create h1 element
      45 for
      JavaScript create h1 element
      23 of other elements - relative to .
    • Use
      JavaScript create h1 element
      32 for other properties such as
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      21 and
      JavaScript create h1 element
      22, which is relative to the current
      JavaScript create h1 element
      23.
    • Use other relative measurement such as
      JavaScript create h1 element
      39 if appropriate. Avoid absolute measurements.

    For example,

    JavaScript create h1 element

    CSS Box Model and Properties
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    21,
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    06,
    JavaScript create h1 element
    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.

    JavaScript create h1 element
    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

    
    
    
    
      
      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 and
    
    
    
    
      
      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 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:

    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    5

    The actual width of the element is

    JavaScript create h1 element
    57.

    Each of the rectangular bounds has four sides, and can be individually referred to as

    JavaScript create h1 element
    58,
    JavaScript create h1 element
    59,
    JavaScript create h1 element
    60, and
    JavaScript create h1 element
    61 in a clockwise manner, where
    JavaScript create h1 element
    62 could be
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    21,
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    06 or
    JavaScript create h1 element
    22. The four sides can be controlled individually or as a group.

    Inspecting the Box Model via Web Developer Tools

    [TODO]

    CSS
    
    
    
    
      
      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 and
    
    
    
    
      
      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 Dimension Properties

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

    As mentioned earlier, CSS length measurement requires a proper unit, e.g.,

    JavaScript create h1 element
    71 or
    JavaScript create h1 element
    72. Take note that
    JavaScript create h1 element
    73 is meaningless in CSS (this is a very common error!) However, in HTML,
    JavaScript create h1 element
    43 means 400 pixels.

    The

    
    
    
    
      
      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 and
    
    
    
    
      
      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 properties are NOT inherited by its descendants. The default value is "
    JavaScript create h1 element
    77", which lets the browser to compute a suitable value. We shall discuss "
    JavaScript create h1 element
    78" value later.

    CSS
    
    
    
      
      YOUR TITLE HERE!
      
      
    
    
      
    
    
    21,
    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    06 and
    JavaScript create h1 element
    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 "
      JavaScript create h1 element
      82" shall be expressed in a proper unit (e.g.
      JavaScript create h1 element
      83 and
      JavaScript create h1 element
      84). You could use a negative value to overlap two elements (e.g.,
      JavaScript create h1 element
      85). The value of "
      JavaScript create h1 element
      77" lets the browser to compute an appropriate number. "
      JavaScript create h1 element
      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
      JavaScript create h1 element
      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
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      21.
    • border-width: thin|medium|thick|n
      Set the width of the four borders. "
      JavaScript create h1 element
      82" can be used to set an absolute thickness.
      JavaScript create h1 element
      91 is a shorthand notation, you can use
      JavaScript create h1 element
      92,
      JavaScript create h1 element
      93,
      JavaScript create h1 element
      94, and
      JavaScript create h1 element
      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
      JavaScript create h1 element
      96,
      JavaScript create h1 element
      97,
      JavaScript create h1 element
      98, and
      JavaScript create h1 element
      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
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      00,
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      01,
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      02,
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      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
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      04,
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      05,
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      06, and
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      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
      JavaScript create h1 element
      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
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      09).
    • border-image: can be used to create a multi-color border.

    Example [TODO]

    CSS
    <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
    
    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
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      06.
    • outline-width:
    JavaScript create h1 element
    78

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

    ,

    ), the default of

    JavaScript create h1 element
    78 sets the width to the width of the parent minus its own margin, border and padding. Images



    JavaScript create h1 element
    1 have an
    JavaScript create h1 element
    77 width equals to its actual width. Float elements have
    JavaScript create h1 element
    77 width of 0.

    Example: [TODO]

    Filling the Width of the Containing Element

    Browser would automatically adjust the

    <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
    
    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
    
    
    
    
      
      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,
    <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
    
    19,
    <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
    
    05 and the left margin/border/padding.

    Example: [TODO]

    Center a Block Element

    To center a block element, you set the

    <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
    
    21 and
    <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
    
    17 to
    JavaScript create h1 element
    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.

    
    
    
    
    
    Table and Images
    
    
    
      

    Table and Images

    Logo of Languages
    S/No Language Logo
    1. HTML5
    JavaScript create h1 element
    2. CSS3
    JavaScript create h1 element
    3. JavaScript
    JavaScript create h1 element
    6

    CSS
    <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
    
    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:
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      25 (with small tails),
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      26 (without small tails),
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      27,
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      28,
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      29. Use
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      27 for program listing. Use
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      26 for computer display.
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      25 are mainly used in prints (such as "Times" for newspapers and books).
    • font-size:
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      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
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      62 uses italic font installed (some font families include the italic version); while the
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      35 is done by tilting the normal font.
    • font-variant: normal|small-caps
      The
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      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,
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      7is the same as:
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      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



      JavaScript create h1 element
      0 to CSS (in your HTML's

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

      6 section, e.g.,
      
      
      
      
      
      Table and Images
      
      
      
        

      Table and Images

      Logo of Languages
      S/No Language Logo
      1. HTML5
      JavaScript create h1 element
      2. CSS3
      JavaScript create h1 element
      3. JavaScript
      JavaScript create h1 element
      9
    2. Use a
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      39 in your CSS (you need not update all your HTML pages):
      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      0

    CSS
    <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
    
    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
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      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 "
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      42" and considers it as a legacy of typewriter. "
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      43" is even worse!
    • text-transform: none|uppercase|lowercase|capitalize
      The
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      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 "
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      45" (pre-formatted), preserve the white-spaces.

    CSS
    <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
    
    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
      JavaScript create h1 element
      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
    <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
    
    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
        <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        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

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

        4 and define the hot-regions in the map using the



        JavaScript create h1 element
        0 tags. Decide what link maps to which hot-region. Hot regions can take circle, rectangle, or polygon in shape.
      2. In the



        JavaScript create h1 element
        1 tag, add the attribute
        <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        53 to indicate this image is used as a client-side image map.
        
        
        
          
          YOUR TITLE HERE!
          
          
        
        
          
        
        
        1

      Example:

      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      2
      Client-side Image Map Tags -



      JavaScript create h1 element
      0 and



      JavaScript create h1 element
      0

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

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

      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      3




      JavaScript create h1 element
      0's attributes:

      • <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        57: declares a unique name for the map, to be targeted in attribute
        <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        58 of the



        JavaScript create h1 element
        1.
        (The attribute
        
        
        
        
          
          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:

        57 is used the older browsers. XHTML specifies using

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        1 instead, which automatically create a named anchor.)




      JavaScript create h1 element
      0's attributes:

      • <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        63: define the shape of the hot region. The "default" value for any point not part of another hot region.
      • <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        64: list of coordinates that made up the hot region.
        • For
          <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
          
          65,
          <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
          
          66 to specify the upper-left and lower-right corners.
        • For
          <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
          
          67,
          <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
          
          68, where
          <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
          
          69 is the center and
          
          
          
            
            YOUR TITLE HERE!
            
            
          
          
            
          
          
          94 is the radius.
        • For
          <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
          
          71,
          <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
          
          72, where
          <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
          
          73 are coordinates that made up the polygon. You should close the polygon by putting
          <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
          
          74 as the last coordinates.
      • 
        
        
        
          
          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:

        28: gives the target URL of the hyperlink.
      • <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        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




      JavaScript create h1 element
      1 tag, include the "
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      78" (is server map?) attribute, and wrap the



      JavaScript create h1 element
      1 within an anchor
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      80. For example,

      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      4

      When the image is clicked, the

      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      81 position of the click is send to the server as query parameters. For example,

      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      5It is up to the server to decide on how to process the
      <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
      
      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:

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

        4: to sub-divide the window.
      • : defines each of the frames in a frameset.
      • See how the extra white spaces, tabs and line-breaks are ignored by the browser.

        4: for floating or inline or internal frame.
      • See how the extra white spaces, tabs and line-breaks are ignored by the browser.

        4: alternative text if frame is not supported by browser.
      Frame Set

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

      4

      Function: To divide the window into multiple frames, row-wise or column-wise.

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

      4 can be nested for complex layout.

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

      4 is to be used in place of

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

      4 tag. i.e., there should not have an tag in the document with .

      Syntax:

      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      6

      Attributes:

      • <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        90: a list of frame sizes in pixels or percentage separated by commas. Wildcard "
        <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        91" can be used to indicate the remaining space.

      Example:

      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      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:

      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      8

      Attributes:

      • <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        92: provides the URL of the document to be displayed inside this frame.
      • 
        
        
        
          
          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:

        57: specifies an unique identifier, to be used as the target of other tags, such as



        JavaScript create h1 element
        0,



        JavaScript create h1 element
        0.
      • <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        96: suppresses resizing by dragging of border.
      • <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        97: sets to 1 to show the border, 0 to suppress.
      • <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        98: "
        <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        99" to show scrollbars and allow scrolling; "

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        00" to suppress scrolling; and "
        JavaScript create h1 element
        77" to let the browser to decide (e.g., auto-hide).

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

      
      
      
        
        YOUR TITLE HERE!
        
        
      
      
        
      
      
      9
      Targeting Named Frame

      To control which frame to receive the content of a hyperlink, you could include the

      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      02 attribute in the



      JavaScript create h1 element
      0tag. Using the previous example, a hyperlink in the "

      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      04" frame targeting the "

      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      05" frame is:

      JavaScript create h1 element
      0

      If all the links in the "

      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      04" frame are targeting the "

      The h1 tags enclose a heading level 1

      The p tags is used to markup a paragraph.

      05" frame, you can use the



      JavaScript create h1 element
      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

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

      4

      Function: Provides an alternative text if the browser does not support framed layout.




      JavaScript create h1 element
      0 must be placed within a .

      Syntax (Container tag):

      JavaScript create h1 element
      1
      Iframe (Inline Frame or Internal Frame)

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

      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

      
      
      
      
        
        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:

      31 attribute.

      Syntax (Container tag):

      JavaScript create h1 element
      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:

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

        4: for embedded Java Applets (deprecated in HTML 4 in favor of tag).
      • See how the extra white spaces, tabs and line-breaks are ignored by the browser.

        4: for embedded an executable programs.



      • JavaScript create h1 element
        0: providing runtime parameters to and .
        Java Applet

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

        4

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

        Syntax (Container tag):

        JavaScript create h1 element
        3
        Program Object

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

        4 and Parameter



        JavaScript create h1 element
        0

        Function: Embed an executable program and provide the program parameters.




        JavaScript create h1 element
        0 must be nested inside an or .

        Syntax (Container tag),




        JavaScript create h1 element
        0 (Standalone tag):
        JavaScript create h1 element
        4

        HTML Global Attributes

        The global attributes are applicable to ALL the HTML elements.

        • class="classname": specifies the subclass this tag belongs to. The
          
          
          
          
          
          Table and Images
          
          
          
            

          Table and Images

          Logo of Languages
          S/No Language Logo
          1. HTML5
          JavaScript create h1 element
          2. CSS3
          JavaScript create h1 element
          3. JavaScript
          JavaScript create h1 element
          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

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          22 or

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          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

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          1 value, while many tags can belong to the same
          
          
          
          
          
          Table and Images
          
          
          
            

          Table and Images

          Logo of Languages
          S/No Language Logo
          1. HTML5
          JavaScript create h1 element
          2. CSS3
          JavaScript create h1 element
          3. JavaScript
          JavaScript create h1 element
          64. The

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          1 attribute is used by CSS for applying styles (via the id-selector in the form of

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          27), and JavaScript for manipulating the element (via

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          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

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          29 (left-to-right) or

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          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
          
          
          
          
            
            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:

          57 of the target frame.
        • : embedded style rules applicable to this document.
        • : program scripting codes.
        Base-URL and Default Target Name



        JavaScript create h1 element
        0

        Function: Declare the base URL for all the links in this document via attribute "

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        33", and specify the target name via attribute "

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        02".

        Syntax:

        JavaScript create h1 element
        5

        Attributes:

        • href="baseUrl": All relative URLs in this document are relative to this base-URL. For example, if



          JavaScript create h1 element
          0’s

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          33 is set to:
          JavaScript create h1 element
          6then, the relative URL of "

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          37" is resolved to "

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          38".
        • target="target-frame-name|_blank|_parent|_self|_top": specifies the target frame into which all linked document should be loaded: "

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          39" in new window, "

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          40" in this frame, "

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          41" in the parent frame, "

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          42" in the full body of the window.
        Link Resources and Relationship



        JavaScript create h1 element
        0

        Function: Link to another resource and indicate its relationship. There could be more than one




        JavaScript create h1 element
        0 tags in the HEAD section.

        Syntax:

        JavaScript create h1 element
        6

        Attributes:

        • rel, rev: indicates the forward or reverse relationship to the current document. Take value of

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          45,

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          46,

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          47,

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          48,

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          49,

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          50,

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          51,

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          52,

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          53,

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          54, and

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          55 (i.e., author).

        [TODO] other attributes.

        Example:

        JavaScript create h1 element
        8

        The above




        JavaScript create h1 element
        0 tags indicate that "

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        57" is the stylesheet of MIME type "

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        58"; "

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        59" is the home page; "

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        60" is the help page; this page ("

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        61") is the previous page of "

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        62" (in a reverse relationship), and this page is the next page of "

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        63".

        The most-commonly used




        JavaScript create h1 element
        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 "

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        65".

        To include an icon, provide a




        JavaScript create h1 element
        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



        JavaScript create h1 element
        0

        You can use




        JavaScript create h1 element
        0 tag to include meta information about the document, such as keywords, author, expiration date, and page generator. The syntax is:

        
        
        
        
        
        Table and Images
        
        
        
          

        Table and Images

        Logo of Languages
        S/No Language Logo
        1. HTML5
        JavaScript create h1 element
        2. CSS3
        JavaScript create h1 element
        3. JavaScript
        JavaScript create h1 element
        9

        Examples:

        JavaScript create h1 element
        6

        The




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

        
        
        
        
        
        Table and Images
        
        
        
          

        Table and Images

        Logo of Languages
        S/No Language Logo
        1. HTML5
        JavaScript create h1 element
        2. CSS3
        JavaScript create h1 element
        3. JavaScript
        JavaScript create h1 element
        9

        EXAMPLE 1: Auto-Redirect after x seconds

        <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        2

        The above




        JavaScript create h1 element
        0 tag triggers the server to include the following "Response Header" in the HTTP response message, when the page is downloaded:

        <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        3

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

        EXAMPLE 2: Auto-Refresh every x seconds

        
        
        
        
        
        Table and Images
        
        
        
          

        Table and Images

        Logo of Languages
        S/No Language Logo
        1. HTML5
        JavaScript create h1 element
        2. CSS3
        JavaScript create h1 element
        3. JavaScript
        JavaScript create h1 element
        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:

        <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        5
        Embedded Style Definition



        JavaScript create h1 element
        0

        Function: For embedded style declarations, covered earlier.

        Scripting Codes



        JavaScript create h1 element
        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 (

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          73), e.g.,

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          74.
        2. To reference the variable, use

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          75.
        3. To define global-scope CSS variables, place them in the

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          76 pseudo-class.

        For examples,

        <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        6

        Modifying CSS Properties from JavaScript and jQuery

        To modify the styles of an HTML element from JavaScript, set its

        
        
        
          
          YOUR TITLE HERE!
          
          
        
        
          
        
        
        37 property, e.g.,

        <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        7

        To modify the style of an HTML element from jQuery:

        CSS

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        78 Property - Positioning the HTML Block Elements

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

        You can use the property

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        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 (

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        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 (

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        81) or the browser window (

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        82); you can also move the box with respect to its normal-flow position (

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        83).

        For non-

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        84 positioned elements, the new position is specified via

        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
        JavaScript create h1 element
        2. CSS3
        JavaScript create h1 element
        3. JavaScript
        JavaScript create h1 element
        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
        JavaScript create h1 element
        2. CSS3
        JavaScript create h1 element
        3. JavaScript
        JavaScript create h1 element
        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 properties:

        • top|left|bottom|right: n|n%|auto: Set the distance from the edge of this element to the corresponding edge of the containing block.
        • width|height: n|n%|auto: Set the width and height of this block element.
        • z-index: number|auto: When two blocks overlap due to re-positioning, the one with larger

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          91 number is on top (i.e., z-axis is pointing out of the screen as in the standard 3D graphics coordinates system). Negative number is allowed. The default
          JavaScript create h1 element
          77 stacks the element at the same level as its parent. If the

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          91 of two elements are the same or no

          The h1 tags enclose a heading level 1

          The p tags is used to markup a paragraph.

          91 are defined, the last element rendered is placed on top. z-index with alpha can create see-thru effect.
        • overflow|overflow-x|overflow-y: auto|hidden|scroll|visible|inherit: Specify how to handle content overflowing the block's width/height.
        • overflow-wrap: normal|break-word|inherit: specify whether or not the browser can break lines with long words, if they overflow the container.

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        80 (default)

        The default

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        80 positions the element according to the normal flow of the page, in the order that is read by the browser. Properties

        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
        JavaScript create h1 element
        2. CSS3
        JavaScript create h1 element
        3. JavaScript
        JavaScript create h1 element
        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
        JavaScript create h1 element
        2. CSS3
        JavaScript create h1 element
        3. JavaScript
        JavaScript create h1 element
        53 has no effect for

        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

        Move the element relative to its normal-flow position. The original space occupied by this element is preserved. The surrounding elements are not affected. For example,



        JavaScript create h1 element
        03

        Position the element relative to the first non-static ancestor element; or if no such element is found. Absolute-positioned element is taken out from the normal flow, as if it does not present.

        To absolutely position an element in a containing element (other than ), declare the containing element relative without any movement, e.g.,



        JavaScript create h1 element
        04.

        Absolute positioning is interesting. You can create animation (such as bouncing ball and falling snow) by absolutely position (and repeatedly re-position) images on the browser's screen. See my "JavaScript Examples".

        For example,

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        82

        The element is fixed at the position relative to the browser's window, and it does not scroll away. The position is defined in

        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
        JavaScript create h1 element
        2. CSS3
        JavaScript create h1 element
        3. JavaScript
        JavaScript create h1 element
        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
        JavaScript create h1 element
        2. CSS3
        JavaScript create h1 element
        3. JavaScript
        JavaScript create h1 element
        54 (or
        
        
        
        
          
          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 and
        
        
        
        
          
          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) properties. Fixed-positioned element is taken out of the normal flow, as if it is not present.

        For example, a fixed

        is added to the above example in absolute positioning. Take note that z-index is used to ensure that the fixed

        is always on top of the other

        's, regardless of the order of writing the

        's.

        CSS


        JavaScript create h1 element
        12 and


        JavaScript create h1 element
        13 Property - Floating an Element Left or Right

        float: left|right|none

        You can push an element to the left or right edge of the containing element via property



        JavaScript create h1 element
        12. Float is often used for images, with texts surrounding the floated element. The elements preceding the floated element are not affected. The element after the floated element flows around it.

        You can float horizontally (i.e., left and right), not up and down. Other than images, a float element shall have the width and height explicitly specified. Float elements are actually taken out of the normal flow. The following element acts as if the floated element is not there, but the enclosing texts would wrap around the floated element.

        If many images are floated together (says to the left), the second image will be pushed to the left edge of the first image, and so on if there is available horizontal space; and shifted down otherwise. For example, we can float many thumbnail images to the left as follows:

        To turn off the float, use property



        JavaScript create h1 element
        13, and specify which side (left, right or both) does not allow a floating element.

        clear: left|right|both|none



        JavaScript create h1 element
        16 means that the left side of this element cannot be a floating element. That is, the left shall begin with left margin of the containing element.


        JavaScript create h1 element
        16 is similar to



        JavaScript create h1 element
        3.

        Using


        JavaScript create h1 element
        12 to create columns

        Block elements, by default, begins at the left edge and occupies the full-width of the containing element. Hence, it will not line up one besides another in a column format. You can use



        JavaScript create h1 element
        12 property to create columns or grid.

        [TODO] more

        Example: Positioning an Iframe

        "



        JavaScript create h1 element
        21"

        <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        8

        "



        JavaScript create h1 element
        22"

        <tag-name attName1="attValue1" attName2="attValue2" ...> ... tag-name>
        
        9

        The CSS property



        JavaScript create h1 element
        23 (also applicable to



        JavaScript create h1 element
        1) floats the iframe to the left or right margin of the browser's window.

        You can also use CSS property



        JavaScript create h1 element
        25 to position the iframe (and other HTML elements), "


        JavaScript create h1 element
        26" positions the element relative to its first positioned ancestor element; "


        JavaScript create h1 element
        27" is relative to the browser window and does not scroll away; "


        JavaScript create h1 element
        28" means relative to its normal position; the default "

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        84" positions the element in the order it appears in the document.

        The h1 tags enclose a heading level 1

        The p tags is used to markup a paragraph.

        0

        CSS


        JavaScript create h1 element
        30 and


        JavaScript create h1 element
        31 Properties

        display: block|inline|inline-block|none|list-item|table|table-row|table-cell|grid|inline-grid

        • block and inline: The


          JavaScript create h1 element
          30 property controls the layout and flow of an HTML element. Most elements have a default


          JavaScript create h1 element
          30 value of


          JavaScript create h1 element
          34 (

          ,

          ) or



          JavaScript create h1 element
          35 (



          JavaScript create h1 element
          0,



          JavaScript create h1 element
          0).
          The


          JavaScript create h1 element
          38 can be used to display an inline element as a block. For example, On the other hand,


          JavaScript create h1 element
          39 can be used to display a block element inline. For example,

        • inline-block: blend the element in with the flow of the text, while allowing us to use padding, margin, height and similar properties which has no visible effect on inline elements.
        • none: will NOT be displayed and not taking up space (vs.


          JavaScript create h1 element
          40 would not display the element but the element still take up space)
        • list-item: display the element as if it is a
        • .
        • table, table-row, table-cell: to display the element (

          ) as

    , ,.
  • grid: display in a grid, for example,
  • visibility: hidden|visible: used to hide or show the element without removing the element from the normal flow of the page. That is, the space occupied by the element is preserved.

    How to create a h1 element in js?

    var element = document. createElement('h1');

    How do you make a h1 element?

    Here are the rules of H1 creation..
    Use Only One H1. ... .
    Your H1 Should Describe the Topic of Your Page. ... .
    The H1 Should Be Between 20 and 70 Characters. ... .
    Make Your H1 Tag Stand Out. ... .
    Create H1s That Provide a Good User Experience. ... .
    Use a Focused Long-Tail Keyword in Your H1. ... .
    Answer User Intent With Your H1. ... .
    Download Screaming Frog..

    What is h1 in JavaScript?

    <h1>–<h6>: The HTML Section Heading elements <h1> is the highest section level and <h6> is the lowest.

    How to create h2 element in JavaScript?

    You create a new element by using the createElement method with the Document object: //create a new h2 element called sideHead var sideHead = document. createElement("h2");