Lesson 1: Intro to HTML

Oliblanton — Fri, 26 Nov 2010 02:11:55 +0000

What is HTML?

HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages

HTML Tags

HTML markup tags are usually called HTML tags

HTML tags are keywords surrounded by angle brackets like
HTML tags normally come in pairs like and
The first tag in a pair is the start tag, the second tag is the end tag
Start and end tags are also called opening tags and closing tags

HTML Documents = Web Pages

HTML documents describe web pages
HTML documents contain HTML tags and plain text
HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:

My First Heading

My first paragraph.

Example Explained

The text between and describes the web page
The text between and is the visible page content
The text between
and
is displayed as a heading
The text between
and
is displayed as a paragraph

HTML Headings

HTML headings are defined with the

to

tags.

This is a heading

This is a heading

This is a heading

HTML Paragraphs

HTML paragraphs are defined with the

tag.

This is a paragraph.

This is another paragraph.

HTML Links

HTML links are defined with the tag.

This is a link

HTML Images

HTML images are defined with the tag.

Lesson 1: Intro to Web Design

Oliblanton — Sun, 14 Nov 2010 21:44:54 +0000

What is HTML?

At the heart of web page design is a computer language called “HTML”. Although many new languages and technologies are superseding HTML, it still forms the foundation of virtually all websites.

A web page is an “HTML Document”. This is a file format which usually uses the extension “.html” or “.htm“. For example, if you use Microsoft Word, you will usually save your files with the extension “.doc”. However you can also save your files with many other extensions such as “.txt”, “.wps” etc. Amongst the options is “.html“.

HTML documents are actually just plain text, but contain snippets of code which carry vital information about how the page should be displayed. You can create such a document using any text editor – even a very simple one like Windows Notepad. In fact many web designers prefer to use simple text editors.

This is what a very simple HTML document looks like:

A Simple Web Page

This is about as simple as a web page can get.

To view an HTML document, you must use a browser. The browser opens the HTML document in the background and “decodes” it before showing it to you. What you see is your browser’s interpretation of how the web page should look (note: this is actually an important point – it’s why you should test your site using a variety of browsers).

WYSIWYG Editors

WYSIWYG means “What You See Is What You Get”. WYSIWYG web-page editors are similar to word processors and they allow you to construct a web page without using HTML instructions. You simply type in your text, add pictures, etc, using familiar toolbars and menus. The editor makes the HTML code in the background.

Some well-known WYSIWYG web-page editors:

Adobe Dreamweaver
Microsoft FrontPage
Microsoft Publisher

The image on the right is Dreamweaver. Using the tools provided, you can add text, images and other elements directly onto the page.

These editors have obvious advantages such as speed and ease of use. However, there is a trade-off: They are not 100% reliable. If you examine the HTML code, you are likely to find mistakes and unwanted extra code. They also tend to be deceptive – you may think you’re producing a fantastic page but find that it looks very different once you publish it. Remember that these editors usually use an approximation of how the page will look. To see your page as it really is you need to view it in a browser.

For these reasons, some professional web designers refuse to use WYSIWYG editors. Instead, they use simple text editors and compose all the HTML manually. However, it’s becoming more common to use a mixture of both methods. A good WYSIWYG editor will give you the option to edit the HTML code manually. At the bottom of the Dreamweaver screenshot there is a panel which shows the HTML code for the page being worked on. As you edit the page in WYSIWYG mode, the HTML automatically updates. Likewise, you can edit the HTML code and the WYSIWYG view will be updated.

Hosting

Once you’ve created your web site and you can see that it works properly on your computer, you need to “publish” it to the internet so that other people can see it. Essentially you just need to copy the web pages from your computer to your host server.

Naturally, the first thing you’ll need to do is to find a host server. There are many options available and finding the right solution isn’t always easy. There are two main categories of hosting options: Free and Paid.

Publish

The final stage of construction is the upload. Using a file transfer program, you copy the entire website structure to the appropriate folder on the host server. Some site authoring applications have the option to publish directly to the web. This may be largely automated, such as the “Synchronise” command in Dreamweaver. These commands can identify files which have been modified since you last published and tell you which ones need to be updated. If you have a large site, this can be a huge time-saver.

HTML generator

Web Design

Lesson 1: Intro to HTML

What is HTML?

HTML Tags

HTML Documents = Web Pages

My First Heading

Example Explained

and

HTML Headings

to

tags. This is a heading This is a heading This is a heading

This is a heading

This is a heading

This is a heading

HTML Paragraphs

HTML Links

HTML Images

Lesson 1: Intro to Web Design

tags.

This is a heading

This is a heading

This is a heading