Back To Module Home

Web Development: Unraveling HTML, CSS, and JavaScript

0% completed

Commencing the Journey: Introductions and Conventions

Introduction Conventions

A Short Tour of HTML, CSS, and JavaScript

Getting Started with Live Coding!Hands-On: Diving into HTML Basics How it Works: Creating a Basic HTML Page Hands-On: Formatting the HTML Page How It Works: Formatting Our HTML Page Inline Styling Our HTML Page Hands On: Using an Embedded Style Sheet How It Works: Using an Embedded Style Sheet Hands On: Moving Styles into a Separate File How It Works: Moving Styles into a Separate File Hands On: Defining Visual Behavior with CSS How It Works: Defining Visual Behavior with CSS Hands On: Adding Actions to the Web Page with JavaScript How It Works: Adding Actions to the Web Page with JS Meeting the DOM Leveraging Page Inspector Hands On: Using jQuery How jQuery Works Debugging JavaScript Summary

HTML5: First Impressions and Beyond

The Unordinary Story of HTML5

What's Behind the Term HTML5?

HTML5 Markup Basics

Using HTML <head>

Defining HTML Content

Exercises: Content and Structure

Enriching Web Pages: Rendering Text

Rendering Text: Code Along Exercises

Using Reserved Characters and Symbols in HTML

Adding Paragraphs and Text Breaks in HTML

Enriching Web Pages: Adding Headings

Enriching Web Pages: Adding Lists

Enriching Web Pages: Adding Links

Enriching Web Pages: Adding Images

Lists, Links, and Images: Bonus Fun Exercise!

Achieving Richer User Experience with HTML

What it's All About Old Style: The Omnipotent <div>Structure and Semantics Headers HTML Footers Sections Figures in the Page Sidebars Navigation Other Semantic Elements World of HTML Tables Defining a Simple Table in HTML Spanning Rows and Columns Markup for Table Headers Defining Styles for Tables Table Captions Compound Tables Hands On: Scrolling the Table Body How It Works: Scrolling the Table Body Making Things Exciting With Multimedia New HTML5 Markup How It Works: Using the Video Tag Hands On: Using the Video Tag Video Formats Hands On: Supporting Multiple Video Formats How It Works: Supporting Multiple Video Formats Video Resilient Web Pages and the Audio Tag What You Cannot Do with <video> and <audio>Summary

Forms and Controls

Web Forms Basics Hands On: Representing Web Forms in HTML Controls Overview Hands On: Using Controls to Build Web Forms How It Works: Using Controls to Build Web Forms Hands On: Using Controls that Allow Specifying Options Hands On: Sending and Processing Form Data How it Works: Sending and Processing Form Data Hands On: Catching Data at the Server How it Works: Catching Data at the Server Using GET and POST Hands On: Making Use of More Controls How it Works: Making Use of More Controls Using Hidden Fields Using <optgroup> in Dropdown Lists Using Buttons Form Validation Validation Attributes Validation and JavaScript Summary

A Few More Things On HTML

Other HTML Elements Thematic Breaks Quotes Images and Mappings Visualizing Progress Refining Markup Details Inline Frames Custom Attributes Hands On: Painting the Canvas How it Works: Painting the Canvas Hands On: Vivifying the Canvas How it Works: Vivifying the Canvas Hands On: Drawing the Trajectory How it Works: Drawing the Trajectory What Else You Can Do with a Canvas Facing the Past and Future of HTML5 Issues with New HTML5 Tags HTML5 Tools and Validation Checking HTML5 Compatibility Summary

Delving into the Document Object Model

DOM Basics Ubiquitous Language of Page Representation Cornerstone of Interactions The DOM Application Programming Interface What the DOM Covers Hands On: Querying the Document How it Works: Querying the Document Hands On: Changing the DOM How it Works: Changing the DOM Hands On: Completing Event Handling Navigating in the Document Tree Node Navigation Basics A Brief Navigation Reference Element Specific Properties Changing the Document Tree Adding New Child Elements to the Document Adding Adjacent Elements Removing and Replacing Elements Changing Attributes and Element Style Using Event Parameters Going Global: Global Attributes Going Global: Global Events Summary

Entering the Realm of JavaScript

A Couple of JavaScript Peculiarities A Brief History of JavaScript Objects and Dynamism Functions are First Class Citizens Regular Expression Literals Placing JavaScript in HTML JavaScript Syntax Basics Variables Types Argument Passing Understanding Scopes Working With the Boolean Type Working With the Number Type Converting to the Number Type Number Methods Working With the String Type Converting to Strings String Properties and Functions Working With the Date Type Working With the Object Type A Quick Overview of Function Prototypes Instance Properties and Methods Working With the Array Type Array Conversions Array Operations: Creating Stacks and Queues Array Methods to Manipulate Strings Array Methods to Change Element Ordering Advanced Array Operations Unary Operators Arithmetic Operators Equality Operators Relational and Boolean Operators Bitwise Operators Assignment Operators Conditional, Comma, typeof, and instanceof Operators Operator Precedence The if, while, and do-while Statements The for and for-in loops The switch and with Statements Summary

Advanced JavaScript Programming

The JavaScript Object Notation Serializing and Parsing JSON Functions Specifying Function Expressions Recursive Functions Closures Programming with Objects Object Properties Removing Object Properties Instantiating Objects Using Object Prototypes Object Inheritance Modularity The Browser Object Model Methods of the Windows Object The History Object The Location Object The Navigator Object The Screen Object Error Handling The onerror Event Managing Errors Summary

Introducing CSS in Style

Styles and Cascading Style Sheets Styling Page Elements CSS At-Rules The Concept of Cascading Selectors Attribute selectors Group Selectors and the Universal Selector Pseudo-Element and Pseudo-Class Selectors Descendent Selectors Child Selectors Sibling Selectors Other Selectors Style Properties Colors Length, Size Types and URL Values Baseline Style Sheet The Cascading Order Selector Group Priorities Calculating Selectivity Location Priorities Media-Dependent Style Sheets Adding Media Style Sheets Media Queries Summary

Basic Style Patterns

Text Formatting Font Type, Size, and Color Text Styles Paragraphs Styling Lists Using Web Fonts The Box Model Margins and Paddings Special Behavior of Margins Setting Up Borders Height and Width of the Box Boxing Inline Elements Using Floating Elements Using Background Images Positioning Background Images Aligning Background Images with Borders and Paddings Sizing Background Images The Background Shorthand Notation Styling Tables Basic Font and Colors Adjusting Text Setting Up Table-Specific Properties Styling Tips for Forms Summary

Conclusion

...

/

Using Reserved Characters and Symbols in HTML

Using Reserved Characters and Symbols in HTML

In this lesson, we will learn the usage of reserved characters and symbols in HTML.

In a few listings, you have already met a strange set of character literals, such as in this snippet:

<div>
  &lt;div&gt; always starts a new block,
  <span style="font-weight: bold">
    however &lt;span&gt; defines a
    logical container for inline text.
  </span>
</div>

In those listings I declined to explain what they are, but it is time to get acquainted with them.

There are characters that are reserved in HTML and XHTML. For example, the “<” and “>” signs are reserved, because they are used by the HTML (XHTML) scanner to recognize the beginning and end of tags. However, these ...