Learning HTML - HyperText Markup Language

Microsoft Expression Web is a professional Web design tool that is designed to create standards-based Web sites. The following skills are required in order to use Microsoft Expression Web successfully:

XHTML / HTML
Cascading Style Sheets (CSS) for styling page elements
CSS for page layout

You can read more about Prerequisites for Using Microsoft Expression Web from Microsoft.

What is HTML?

HTML stands for Hyper Text Markup Language and is a language for describing web pages. HTML is a markup language rather than a programming language and makes use of HTML tags to structure the content of your web pages.

Is there a difference between HTML and XHTML? XHTML is more choosy than HTML in that there are some elements that absolutely must appear in the XHTML markup, but which may be omitted if you’re using HTML 4 and earlier versions. If you would like more information on these differences see:

By default, Expression Web uses XHTML markup!

If you want to successfully work with Expression Web AND be able to troubleshoot your pages, you will need a good working knowledge of the basic HTML tags you will use to build your web pages.

HTML Tags

HTML tags are keywords surrounded by angle brackets like <html> and normally come in pairs <html> </html>. The first tag of the pair is the opening or start tag, the next one the closing or end tag.

Listed below are ONLY a few of the tags you will need to learn about in order to work on structuring your web pages.

<body> tag

The <body> tag defines the document's body and contains contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. Both an opening and closing tag are required <body> </body>. Expression Web creates this tag is for you when you create a new page.

<div> tag

The <div> tag defines a division or a section in an HTML document. Both an opening and closing tag are required <div> </div>. More details on HTML <div> tag

paragraph <p> tag

The <p> tag defines a paragraph. By default, browsers automatically add some space (margin) before and after each <p> element. You can modify the default styling by changing the margin style rules using CSS. Both the opening and closing tag are required <p> </p>.

heading <h1> to <h6> tags

The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Both an opening and closing tag are required <h1> </h1>. Read Heading Tag Structure by James Huggins.

Heading tags are NOT used to style your page but to provide structure to your page.

<ul> tag

The <ul> tag defines an unordered or bulletted list and is used with the <li> tag. Both the opening and closing tag is required <il> </ul>.

Unordered lists are used to create both vertical and horizontal navigation.

<ol> tag

The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical. Use the <li> tag to define list items. Both the opening and closing tag is required <ol> </ol>.

<li> tag

The <li> tag defines a list item and is used in both ordered (<ol>) and unordered (<ul>) lists. Both the opening and closing tag is required <li> </li>.

<img> tag

The <img> tag defines an image in an HTML page and has two required attributes: src and alt. Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image. The img tag must be properly closed <img > The width and height of the image should also be included.

<a> tag

The <a> tag defines an anchor. An anchor can be used in two ways:

To create a link to another document, by using the href attribute
To create a bookmark inside a document, by using the name attribute

The <a> element is usually referred to as a link or a hyperlink. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

Summary

In summary, the tags listed above are only a few of the ones you will need to structure your HTML document. You can see a listing of the various tags HTML 4.01 / XHTML 1.0 Reference at w3schools and Elements by SitePoint

Once you learn the basics of HTML tags, you will find Expression Web much easier to use and it will go a long way towards helping you troubleshoot problems.

Learning Resources

HTML Coding - Hypertext Markup Language

W3Schools
HTML Document Structure
A Bare Bones Guide to HTML - The Bare Bones Guide to HTML lists every official HTML tag in common usage, plus Netscape and Microsoft extensions. Version 4.0 of the Guide is designed to conform to the HTML 4.0 specification. For official information on the development of HTML, see the World Wide Web Consortium's HTML activity statement.
HTML Basic Tutor - This is a website targeting small business owners, beginner web designers and hobbyist web site owners. The theme of the site is to promote good web design practices and coding by implementing the recommendations of the W3C (World Wide Web Consortium) in a fashion that a person with little or no knowledge of web design can learn from. Each HTML tutorial is written with the HTML beginner in mind. Currently,
HTML Code Tutorials - Free Reference Guide for Help with HTML Tags Including Form, Frames, Tables, and more!
HTML Dog - Very useful HTML and CSS tutorial place, teaching You everything step by step - best practices, standards and code with “easy to understand” example.
Your HTML Source - Teaches you not only how to create your very first homepage, but how to style it with CSS, add spice with Javascript and create it accessible and SEO friendly.

XHTML - EXtensible HyperText Markup Language

XHTML Tutorial - XHTML is a stricter and cleaner version of HTML and is the default used by Expression Web.

HTMLl 5

w3schools.com

Your next project should be learning the basics of cascading style sheets and how to use them to style the tags you have just learned to use

Expression Web 4.0 Tutorials 2nd Edition from Install to Publish, a FREE EBook by Pat Geary.

Expression Web has a group on Facebook. If you are a FB user, come join us.

Disclosure: This is an affiliate link, which means that if you visit Bluehost.com through this link and purchase this product, I’ll get a commission.

Microsoft MVP Logo.
April 2007 - April 2013