HTML
HTML is not a programming language. It is merely a way of describing your document so it can be properly presented by a web browser. Each browser has default formatting it uses for the various items on a web page. By defining the elements of your page (such as a heading or a paragraph), you are indirectly causing the formatting of the page to change.
Granted, the web page will be dull, but it will load into a browser and display properly. The fun part is making it look good. That is really a matter for Cascading Style Sheets, which we will discuss later.
The Basics
Copy that into Notepad, save it as a file with a ".htm" or ".html" extension, and then double-click on that file to bring it up in your browser. Poof: a web page! (If you want to cheat, just click here to see what the result would be.)
Most tags consist of an open/close pair. Required tags are
<HTML></HTML> pair that define the start and end of the document and let the browser know that it is an HTML file.
Within that are two sections, <HEAD></HEAD> and <BODY></BODY>. The former provides a place for information about the
document, such as its title. The latter encloses what you actually want to display in the browser window.The most common tag pair is
<P></P> which enclose a
paragraph. Others used in the sample are <H1></H1> (to enclose a top level headline) and <H2></H2> (to enclose a secondary
headline). There are two more tags in use and they are some of the rare ones that do not have a closing partner. <HR> creates a horizontal rule (or line). Another single tag is
<BR> which causes a line break.Although there are HTML tags specifically for formatting, they are being phased out in favor of Styles, which I discuss in the next section.
<HTML>
<HEAD>
<TITLE>Text for the browser's title bar</TITLE>
</HEAD>
<BODY>
<H1>Heading One</H1>
<P>Text under heading one.</P>
<HR>
<H2>Heading Two</H2>
<P>Text under<BR> heading two.</P>
</BODY>
</HTML>Once you have these few basics down, it is just a matter of learning a few more tags and some options for them. The best way to do that is to check out the sites listed below, and to look at the source code of pages you find interesting. It isn't too hard to figure out what most tags do by looking at the code and then the page that results from it. You can usually see the code for any web page by right-clicking in an empty part of the page and selecting View Source in the context menu.
A very detailed tutorial on HTML for absolute beginners. Set up as a set of over 20 individual lessons.
To get started, check out the Primers and Tutorials on this comprehensive site. When you are ready for more complex coding, this site also provides good information on style sheets, JavaScript, and other fun stuff.
This site features excellent tutorials on HTML and a support forum.
This is the official standard specification for the version of HTML supported by the major browsers. They provide a listing of every tag and every attribute (option) for each tag. These are reference documents, not tutorials or examples.
There are characters that can't be put into a web page without representing them in a special way, either because they have special meaning in HTML like the ampersand (&) or to provide cross-platform support for things like ¶ and ©. To represent one of these special characters, you need an ampersand at the beginning and a semi-colon at the end. In the middle goes either a # followed by the number for that character or an Entity Reference (official abbreviation). For example, a ampersand is represented as either & or &. This page lists all of these special characters, and the codes needed to represent them.
An old guide from the definitive source for HTML information, the W3C. This is the organization that defines each version of HTML. This guide is about the semantics and grammar of writing for the web.
This shows which versions of which browsers support which HTML tags and attributes. It is an excellent reference to help you avoid using tags that make your page too specific to a particular browser, and to give you ideas on tags you can safely use without compatibility problems.
Style Sheets
The next method of using styles is to take a set of formatting instructions that you use frequently and give it a name. This name is called a class. For example, let's say that you often make use of paragraphs with bold red text. It is best to use a name that describes the function of the format, and not the format itself. In this case, let's call the class attn (short for "attention"). You'll see why you don't want to call it red shortly. There are two parts to using a style class. One is to define what it means and the other is to apply it to a specific element of the page.
To define a class, you need to add a tag pair within the <HEAD></HEAD> section of your page. This pair is <STYLE type="text/css"></STYLE>. Within that tag pair, you can define your classes. To define our simple class, we would use this syntax:
.attn {color:red; font-weight: bold}
To apply that, we would replace:
<P style="color:red; font-weight:bold">
with:
<P class="attention">
However, the very best way to use styles is in Style Sheets. This lets us move the style definitions out of the <HEAD></HEAD> section of each page and into one separate file that we can include by reference in each page. Moving style definitions from the page head section to a separate file gives us similar benefits as moving style definitions from the tags to the header gave us, but on an even larger scale. Now we can make a change in one place and have it affect every page in the entire site, and the definitions only occur once so we save the space they would have taken up in the head section of every page. To do that, we create a separate text file. By convention, it gets an extension of ".css". The Style Sheet used by this site is called mystyles.css. Inside that file, we move what was inside the <STYLE><STYLE> tags into that file. Space and line breaks don't matter. We then reference the file by adding src="mystyles.css" to the <STYLE> tag.
The official standard is called Cascading Style Sheets (CSS for short) because you can combine multiple style sheets, styles in page headers, and inline styles all together. If there is a conflict, generally the definition closest to the page element wins. For example, if you define an attn class in the .css file and in the page header, the version in the page header would override the one in the .css file.
Unfortunately, there are significant differences in how the various versions of the different browsers support CSS, so you need to be careful. The links below will show you some great examples of what can be done with style sheets, how to build them, and how to deal with the various incompatibilities you'll find.
This will get you started with CSS and assumes that you've never heard of it before.
Everything for the beginner, all the way through CSS3 and Responsive Design.
Cascading Style Sheets, level 2
These are the official standard specifications for the two CSS levels. These are reference documents, not tutorials or examples. CSS1 provides basic support for fonts, colors and spacing. CSS2 extends CSS1 with content positioning, downloadable fonts, table layout, features for internationalization, support for media-specific style sheets (so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc.), automatic counters and numbering.
An outline of CSS with the ability to expand the detail for a particular area all the way to a detailed explanation of each CSS attribute and property including examples.
This index lists all the supported Cascading Style Sheets (CSS) attributes by category, and indicates the version of Microsoft Internet Explorer in which the attributes were first available.
This page shows every available CSS feature, and which versions of which browsers support it. It is an excellent reference to help you avoid using features that make your page too specific to a particular browser, and to give you ideas on features you can safely use without compatibility problems.
Somewhat similar to the item above, but from a different source. A second opinion is always a good idea.
Free Software
PageBreeze Free HTML Editor has both visual (WYSIWYG) and HTML tag/source modes. It's design emphasizes simplicity and ease-of-use. It is free for personal, not-for-profit, or educational use.
- The visual editor is powered by Microsoft Internet Explorer. So you can always be sure you are seeing exactly what you will get.
- Color-coded HTML source (tag) editor. You can switch between HTML source and visual modes at any time with a click of the mouse, and any changes you have made will instantly be reflected in both modes.
- Preview mode lets you instantly see what your finished web page will look like in Microsoft Internet Explorer.
- Included webpage templates and direct access to hundreds of free website templates to give you a fast start on creating a great looking site.
- Drag-and-drop Form Builder makes it fast and easy to create powerful web forms.
Dynamic HTML Editor (Free) is a WYSIWYG HTML editor that takes advantage of the absolute positioning techniques of CSS 1 (style sheets). It allows you to design web pages by simply dragging elements into place. You can also take advantage of advanced CSS features like overlapping images and other techniques that are not possible with plain HTML. Dynamic HTML Editor (Free) can be used to create HTML, ASP, PHP, CFM, JSP, XML pages and also provides an option to insert code elements if needed. You can import images, associate events to part of labels, pictures, input fields and more. Great for beginners to design a web page, but also very handy for established webmaster that want to generate CSS based page layouts. Version 1.9 is free for personal and not-for-profit use, Current version is 4.1.
Astyle is a visual CSS editor.
- Graphic tree-type view of attachment files and the CSS structure
- Grouped view of properties and selectors
- Automatic selection and grouping of CSS selectors from a markup language document
- Source CSS, HTML, XML highlight code editor
- Active preview current selectors and documents with IE and FireFox support
