HTML Lesson 1: What is HTML?

Are you a graphic designer who needs to convert a Photoshop layout into a dynamic web page?  If you want your website to be accessible, quick-loading, and easy-to-edit you will need to learn a computer language named XHTML.

<p> is for Paragraph

XHTML is the language that web pages are written in; it is the code that your web browser uses to assemble the pages you view.  For example, you recognize this block of text as a paragraph, but your web browser doesn’t understand the word “paragraph.”  Instead, the HTML code for “paragraph” is <p>.  HTML codes (also known as elements) are wrapped in brackets.  For example, the HTML code for “image” is <img>.

In short, XHTML is a language used to describe content; we give different types of content their own different and semantically chosen labels.  Before we go any further it is important to note that XHTML is NOT for adding style (colors, fonts, sizes, background images, etc…) to web pages.  That is what Cascading Style Sheets (CSS) are for.  XHTML is for raw content and raw content only.  This idea of separating content and style (presentation) is important, and will become clearer as you move through these lessons.  For now, forget about it, and enjoy the rest of this lesson.

What Does XHTML Look Like?

Let’s kick things off by using XTHML code to actually create a couple paragraphs of text. Here is what the code would look like:

1	<P>This is our first sample paragraph.  This paragraph has only two sentences.</p>

2

3	<p>This is the second paragraph; with only one sentence!</p>

It is important to note that both of our paragraphs were followed by a </p> code. This “end tag” corresponds with the opening <p> start tag, and together the two tell the web browser where we want our paragraph element to start and end.

It’s (almost) That Simple!

That’s it! You just taught yourself the fundamentals of XHTML! Now you just need to learn the codes for all the different elements that make up a page. For example, aside from paragraphs (<p>) and images, (<img>) what elements do you commonly find on web pages? Below is a short list of some of the most basic HTML codes. Don’t worry about memorizing them right now, just take a quick look and notice how intuitive most of the codes are.

view source

print?

1	<div>Division or Section of Page</div>

2	<a>Link</a>

3	<ul>Unordered List</ul>

4	<li>List Item</li>

5	<h1>Header (most important header)</h1>

6	<h2>Header (second most important header)</h2>

7	<h3>Header (third most important header) etc…</h3>

8	<table>Table</table>

It’s not THAT intimidating, right? Now we just need to learn the rest of the elements, how they relate to one another, and how to organize them within a page. In our next lesson, you will learn how to use XHTML code to create and save a page and view it in your web browser.