Website Creation in Plain English Example Pages

These pages include every single example shown in the book. They are here so you can view them and examine their coding.

If you don't want to scroll down to see the footnotes, hover your mouse cursor over their numbers, and they'll show up beside the link.

• Home
• Outline
• W3C Markup Validator
• Examples
  • Your First Webpage
    1. Page with h1 element added. ¹
    2. Page with p elements added. ¹
    3. Page with missing h1 end tag. ²
    4. Page with em elements added. ¹
    5. Page with strong elements added. ¹
    6. Hilighting the code of your first webpage. ³
  • Attributes
    1. Demonstration of the title attribute. ¹
    2. Demonstration of the style attribute. ¹
    3. Demonstration of the lang attribute. ^{1 4}
    4. Demonstration of the dir attribute. ^{1 4}
  • Hyperlinks
    1. A hyperlink within a paragraph. ¹
    2. Several hyperlinks, and two attempts that are not hyperlinks. ^{2 5}
  • Empty Elements And Semantics
    1. Horizontal Rule. ¹
    2. Image. ¹
    3. The difference between the em and cite elements. ¹
  • Inline Elements
    1. span element.
    2. abbr element.
    3. acronym element.
    4. cite element.
    5. code element.
    6. dfn element.
    7. em element.
    8. kbd element.
    9. samp element.
    10. strong element.
    11. var element.
    12. b element.
    13. big element.
    14. i element.
    15. small element.
    16. tt element.
    17. a element.
    18. bdo element. ⁴
    19. br element.
    20. button element.
    21. del and ins elements.
    22. img element.
    23. q element.
    24. sub element.
    25. sup element.
  • Block Elements
    1. p element.
    2. address element.
    3. Header elements.
    4. hr element.
    5. pre element.
    6. div element.
    7. blockquote element.
    8. Inline del and ins elements.
    9. Block del and ins elements.
  • Lists
    1. Unordered List.
    2. Ordered List.
    3. Definition List.
    4. Unordered Links List. ⁶
    5. Ordered Links List. ⁶
    6. Definition Links List.
    7. Assorted Nested Lists.
    8. Chapter Outline.
  • Image Maps
    1. Example Image Map (using areas).
    2. Example Image Map (using a list of anchor elements). ⁷
  • HTML Objects
    1. Embedded Webpage.
    2. Embedded SVG Image With Wrong Data Type (May Not Appear As Image). ⁷
    3. Embedded SVG image. ⁷
    4. Embedded Flash Animation.
    5. Embedded Flash Animation With High Resolution.
    6. Embedded Flash Animation With Low Resolution.
  • Tables
    1. Example Simple Table.
    2. Example Simple Table With Borders.
    3. Example Complex Table.
    4. Example Complex Table With Borders.
  • CSS Selectors
    1. Webpage with the third-level header element controlled by CSS.
    2. Webpage with the appearance of a class of elements controlled by CSS.
    3. Webpage with the appearance of a single element specified by an id attribute controlled by CSS.
    4. Webpage using the Universal Selector
    5. Webpage using CSS targeting elements with the lang attribute. ⁸
    6. Webpage using CSS targeting elements with the lang attribute, with an exception made for lang attributes with the value en. ⁸
    7. Webpage using the :first-child psuedo-class. ⁸
    8. Webpage using the :nth psuedo-class. ⁸
    9. Webpage using the :lang() psuedo-class. ⁸
    10. Webpage using the :first-letter and :first-line psuedo-elements. ⁸
    11. Webpage using the :before and :after psuedo-elements. ⁸
    12. Webpage using nesting to determine color of element. ⁸
    13. Webpage using nesting to determine text decoration of inserted and deleted paragraphs.
    14. Webpage centering all header elements.
  • CSS Value Types
    1. Webpage demonstrating absolute font sizes with different measurements.
    2. Webpage where you can try various colours with RGB and Hex colours. ³
    3. Webpage where you can try various colours with HSL colours. ^{3 7 8 9}
  • Font And Text
    1. Webpage demonstrating various font families. ⁴
    2. Webpage demonstrating the absolute font-size keywords.
    3. Webpage demonstrating incremental fonts.
    4. Webpage demonstrating indentation.
    5. Webpage demonstrating alignment.
    6. Webpage demonstrating text decoration. ⁸
    7. Schrödinger's Cat. ⁸
    8. Webpage demonstrating text capitalization.
    9. Webpage demonstrating text colour.
    10. Webpage demonstrating line spacing set to different measurements but same amount.
    11. Webpage demonstrating letter and word spacing.
  • Borders, Margins, And Padding: The CSS Box Model
    1. Webpage demonstrating borders.
    2. Webpage demonstrating padding.
    3. Webpage demonstrating margins.
  • CSS Backgrounds
    1. Webpage demonstrating background colours.
    2. Webpage demonstrating a background image.
    3. Webpage demonstrating background image repetition.
    4. Webpage demonstrating background image position.
    5. Webpage demonstrating background collective property.
    6. Webpage demonstrating a CSS rollover. ⁸
  • CSS For Lists
    1. Webpage demonstrating list-style-type:none (no list marker).
    2. Webpage demonstrating list-style-type:disc.
    3. Webpage demonstrating list-style-type:circle.
    4. Webpage demonstrating list-style-type:square.
    5. Webpage demonstrating list-style-type:decimal.
    6. Webpage demonstrating list-style-type:decimal-leading-zero. ⁸
    7. Webpage demonstrating list-style-type:upper-roman.
    8. Webpage demonstrating list-style-type:lower-roman.
    9. Webpage demonstrating list-style-type:upper-alpha (AKA upper-latin).
    10. Webpage demonstrating list-style-type:lower-alpha (AKA lower-latin).
    11. Webpage demonstrating list-style-type:lower-greek. ⁸
    12. Webpage demonstrating list-style-type:armenian.⁸
    13. Webpage demonstrating list-style-type:georgian. ⁸
    14. Webpage demonstrating the position of the list style.
    15. Webpage demonstrating a list using an image.
  • Counters and Other CSS-Generated Content
    1. Webpage demonstrating how to specify content in a stylesheet. ⁸
    2. Webpage demonstrating that HTML-style entities don't work in CSS. ⁸
    3. Webpage demonstrating the proper way to create a CSS entity. ⁸
    4. Webpage demonstrating that CSS entities can go awry. ^{4 8}
    5. Webpage demonstrating CSS concatenation. ⁸
    6. Webpage demonstrating CSS concatenation with entities. ⁸
    7. Webpage demonstrating the incrementation of CSS counters. ⁸
    8. Webpage demonstrating the use of attributes. ^{4 8}
    9. Webpage demonstrating quotation marks for different languages. ⁸
  • Arranging the Page
    1. Webpage demonstrating how different elements are displayed.
    2. Webpage demonstrating how different elements display content that overflows their bounds.
    3. Webpage demonstrating absolutely-positioned elements.
    4. Webpage demonstrating fixed-positioned elements. ⁸ (You may want to resize the window until a scrollbar appears.)
    5. Webpage demonstrating relatively-positioned elements.
    6. Webpage demonstrating floated elements.
    7. Webpage demonstrating how elements clear floated elements.
    8. Webpage demonstrating how absolute positioning can allow you to create decorative navigation menus.
  • Dynamic Behavior And Scripting
    1. Webpage with a script that creates a popup alert box ³
  • HTML DOM
    1. Webpage with a script that retrieves an attribute value. ³
    2. Webpage with a script that retrieves an element's text node. ³
    3. Webpage with a script that retrieves an element's last child node (in this case, a text node). ³
    4. Webpage with a script that changes the text of an element. ³
  • JavaScript Variables
    1. Webpage demonstrating JavaScript rewriting the content of an element. ³
  • Text
    1. Webpage demonstrating the dangers of concatenation. ³
    2. Webpage with corrected concatenation. ³
    3. Webpage demonstrating the importance of order in concatenation. ³
    4. Webpage demonstrating how to add text to an existing string. ³
    5. Webpage demonstrating the split() method. ^{3 10}
    6. Webpage demonstrating the substr() method. ³
    7. Webpage demonstrating the substring() and slice() methods. ³
    8. Webpage demonstrating the toLowerCase() and toUpperCase() methods. ³
    9. Webpage demonstrating the indexOf(), lastIndexOf(), and search() methods. ^{3 10}
    10. Webpage demonstrating the match() method. ³
    11. Webpage demonstrating the replace() method. ³
  • Regular Expressions
    1. Regular expression using the match() method. ³
    2. Regular expression using the search() method. ³
    3. Regular expression using the replace() method. ³
    4. Regular expression using the test() method. ³
    5. Regular expression with two subpatterns. ³
    6. Seeking the work "expression" with either lower- or upper-case "E". ³
    7. The patterns of the Canadian Postal Code. ³
    8. Demonstrating A Regular Expression With Subpatterns
  • Numbers and Math
    1. Webpage demonstrating erroneous math equation. ³
    2. Webpage demonstrating corrected math equation. ³
    3. Webpage demonstrating various constants associated with the Math object. ³
    4. Webpage demonstrating the clash between addition and concatenation. ³
    5. Webpage demonstrating how to make sure a number is treated as a number. ³
    6. Webpage demonstrating Math.E, Math.PI, Math.SQRT2, and being ridiculous therewith. ³
    7. Webpage demonstrating rounding. ³
    8. Webpage demonstrating rounding up. ³
    9. Webpage demonstrating rounding down. ³
    10. Webpage demonstrating rounding to a multiple of 10. ³
    11. Rounding to a fixed decimal point or a multiple of 10. ³
    12. Error multiplying 0.6 × 3. ³
  • Decisions
    1. An if statement that proves true. ³
    2. An if statement that proves false. ³
    3. An if/else statement that proves true. ³
    4. An if/else statement that proves false. ³
    5. An if/else statement that proves false for a different reason. ³
    6. An if/else if/else statement whose first condition proves true. ³
    7. An if/else if/else statement whose second condition proves true. ³
    8. An if/else if/else statement where both conditions prove false. ³
    9. A nested if statement, where the first condition proves true. ³
    10. A nested if statement, where the first condition proves false, so the if statement nested in the else part comes into play. The first condition of that proves true. ³
    11. A nested if statement, where the first condition proves false, so the if statement nested in the else part comes into play. The second condition of that proves true. ³
    12. A nested if statement, where the all conditions prove false. ³
    13. A switch statement, which contains an error. ³
    14. A corrected switch statement. ³
    15. Another switch statement, which compares strings. ³
  • Loops
    1. A page using a while loop. ³
    2. A page using a while loop whose condition automatically proves false. ³
    3. A page using a do-while loop whose condition automatically proves false. ³
    4. A page using a for loop. ³
    5. A page using a for loop to access elements of an array. ³
    6. A page using a for loop to access child nodes of a <p> element. ³
    7. A page using a for-in loop to access elements of an array. ³
    8. A page using nested loops to access elements of a two-dimensional array. ³
    9. Webpage demonstrating the split() method, now using loops. ^{3 11}
    10. Webpage demonstrating the indexOf(), lastIndexOf(), and search() methods, now using loops. ^{3 11}
  • Procedures
    1. A Function that extracts the text of a paragraph. ³
    2. A webpage with HTML, CSS, and JavaScript all in one file. ³
    3. A webpage with HTML, CSS, and JavaScript in separate files.
       1. HTML ³
       2. CSS ⁹
       3. The JavaScript Function ⁹
       4. The JavaScript Function calls ⁹
    4. A script that displays the limited scope of variables. ^{3 12}
    5. A script where a function changes a variable. ³
    6. A webpage with a recursive function
       1. HTML ³
       2. CSS ⁹
       3. The JavaScript Function ⁹
  • JavaScript Objects
    1. Webpage demonstrating a directly-created object. ³
    2. Webpage demonstrating how to add a property to an existing element (this time, the property "extra" to an element node). ³
    3. Webpage demonstrating the short-hand creation of an object. ³
    4. Webpage demonstrating objects created through a template. ³
    5. Webpage demonstrating a method that can be accessed through an object or on its own. ³
    6. Webpage demonstrating a method that can be must be accessed through an object, but an attempt is made to access it on its own. ^{3 12}
    7. Webpage demonstrating a method that can be must be accessed through an object. ³
    8. Webpage demonstrating nested objects. ³
    9. Webpage demonstrating objects and loops. ³
  • Events
    1. Webpage demonstrating 4 events associated with one element (assigned through event attributes). ³
    2. Webpage demonstrating 4 events associated with one element (assigned through JavaScript). ³
    3. Webpage demonstrating 4 buttons assigned click events through a loop. ³
    4. Webpage demonstrating a 4 × 4 table of buttons assigned click events through nested loops. ³
    5. The function used by all these examples. ⁹
    6. Click events assigned through an object template. ³
  • Style
    1. A collapsible menu. Click to expand submenus, doubleclick to collapse. ³
    2. A collapsible menu. Click the buttons to expand and collapse submenus. ³
    3. Dropdown menus. Hover over the menus to make them appear. ³
    4. A tabbed menu. Click the tabs to make the respective h2 elements appear or disappear. ³
    5. Another version of the tabbed menu. ³
  • HTML Forms
    1. A list of input types. ³
    2. Text and password inputs. ³
    3. Text and password inputs, and a script which retrieves their value. ³
    4. Radio buttons and checkboxes. ³
    5. Two groups of radio buttons. ³
    6. Radio buttons and checkboxes, and a script which retrieves their value. ³
    7. Button and reset button. ³
    8. Other types of inputs. ³
    9. A textarea, and a script which retrieves its value. ³
    10. A dropdown menu, and a script which retrieves its value. ³
    11. A dropdown menu, and a script which retrieves its value automatically. ³
    12. A previous form (the checkbox-radio demonstration) arranged and labelled using fieldset, label, and legend elements. ³
    13. Manipulate the form by changing the input. ³
    14. Enable or disable input. ³
  • DOM Manipulation
    1. Generates a webpage entirely from JavaScript. ³
    2. Appends paragraphs based on what's inside a textarea element. ³
    3. Removes a paragraph, and places it somewhere else in the DOM. ³
    4. Replaces one element node with another within the DOM. ³
    5. Sets a paragraph element's attribute. ³
  • Frames
    1. View the book in frames mode.
    2. View the book in frames mode with book title.
    3. A demonstration of an inline frame.
  • Coding Shortcuts And Other Things
    1. A demonstration of HTML conditionals (This page works differently in Internet Explorer than in other browsers).
  • XML XHTML, and HTML5
    1. A diagram created with SVG, a type of XML. ^{7 9}
    2. A webpage created with SVG, XHTML, and MathML. ^{7 9}
  • Tips And Tricks Of Website Design
    1. The Horrors Page. WARNING! This page uses flashing colors and images. View at your own risk.
       • The text-only version of The Horrors Page, so you can actually read what it says on the page.
       • The Horrors Page CSS. ⁹
       • The Horrors Page JavaScript. ⁹
    2. A simple page with an absolutely-positioned menu.
       • The Menu Page CSS. ⁹