Introduction To XHTML Basics

Introduction to XHTML Basics. XHTML is the language used to create and organize a web page:

XHTML is newer than, but built upon, the original HTML (HyperText Markup Language) platform.
XHTML has stricter rules and does not allow some elements formerly used in HTML.
One benefit of using XHTML instead of HTML is that it helps make web pages look identical in different browsers, such as Internet Explorer, Firefox, Chrome, Safari, Opera, etc.
XHTML defines and organizes the page content but does not format or style it. That is the job of CSS (Cascading Style Sheets), which we will learn later in this course.

Session 1: XHTML Basics

Learning Outcome

Describe the use of the head and body elements in an HTML document.
Describe these types of HTML tags: opening, closing, and empty.
Describe the use of attributes within HTML tags.
Describe the use of HTML comments and whitespace.
Download Class Notes here: 1–XHTML-Basics

Session 2: XHTML Text Elements

An XHTML element is a component of an XHTML document. It is typically comprised of a start tag, an end tag, and some web content in between the start and end tag.

We’ve already learned about the <html>, <head>, <body>, <meta>, and <title> elements. Now let’s learn some elements that we’ll use to present actual text content on our web page:

<p> Paragraph
<br> Line Break
<hr> Horizontal Rule
<h1> – <h6> Headings
<ul> Unordered List
<ol> Ordered List
<li> List Item

Download Class Notes here: 2–Text-Elements

Session 3: Links and Comments

Links
The <a> element (“anchor”) is used to create a clickable link to another location. There are four varieties of links:

External link – to a web page outside our own website.
Internal link – to another web page on our own website.
Bookmark link – to a specific position within the current web page.
Email link – to automatically start a new email message.

Comments
We can add personal comments throughout our web pages. These will not appear on our live web pages. Some typical reasons to add comments are:

To make notes to ourselves explaining the purpose of certain lines of code.
To indicate to fellow team members where future changes or improvements will go.
To inform future programmers about how the page works and of any known pitfalls with modifying content.

Download Class notes here: 3–Links-and-Comments

Session 4: Links and Comments

Download Class Notes here: 4–Images

Session 5: Basic Tables

The <table> element is a powerful tool for web designers:

Tables allow us to display information in a predictable and uniform fashion on a web page.
Tables are well suited for presenting data that conforms to rows and columns.
Content in table cells is easy to format consistently.

In the past, tables were often used to lay out and organize an entire web page. This was a misuse of the <table> element, which should be used only to present specific information within a page’s overall content.

Download Class Notes Here: 5–Basic-Tables