Easy Web Site DesignHTML tutorial : Introduction to HTML |
|
|
Suggested reading |
HTML is the language Web pages are written in. HTML stands for HyperText Markup Language. The good news is that HTML is not a programming language - it's a markup language. That means HTML code contains all the English (or other language) that you want to say on your Web page, together with some tags that tell the browser a bit more about how you'd like to display the text. The even better news is that you don't even need to know HTML to make a Web site. There are some excellent programs available that will allow you to type your content and use some point and click commands to generate the HTML for you. Two such products are Macromedia Dreamweaver and Microsoft Frontpage. You may learn more by visiting the Macromedia Dreamweaver Developer Center and the Microsoft FrontPage 2003 Home Page. Or you can try the free, but highly regarded Evrsoft 1st Page 2000. Purchase Macromedia Dreamweaver, Microsoft FrontPage. It is even possible to create HTML directly from many word processors such as Microsoft Word. Beware though, the code produced by Word contains lots of redundant detail and is difficult to edit by hand. Therefore we don't recommend generating HTML this way for more than just a few pages. So, is it really possible to create a Web site without knowing HTML? The answer is both yes and no. You can create an entire site without ever seeing a line of HTML. However, there are times when it is useful to make some changes directly to the underlying HTML code, and that is where a little knowledge can go a long way. We'll spend the rest of this section introducing the most useful HTML tags, and we'll provide some links for those who want to dig deeper. HTML may be typed into a plain text editor such as Windows Notepad, or it may be viewed/edited in an HTML editor, eg by selecting View Code in Dreamweaver. If you use a word processor to type raw HTML, be sure to save the file as plain text, otherwise the resulting HTML will contain formatting that will not be understood by browsers. To experiment with the examples which follow save the code to your hard disk as example.html, you may then open the file in a Web browser to view the results. HTML files have a .html or .htm extension. The "home page" of a site is usually entitled index.htm or index.html - this is generally the page returned if a user just types a domain without a file name (eg www.something.com) into their browser's address box. Take a look at this (very) simple Web page.
The items enclosed in the angled brackets < > are known as tags, and the content between a related start and end tag is known as an element. Web pages start with an <HTML> tag and end with </HTML>. Many of the tags come in pairs, a start tag - eg the paragraph tag <P>, and an end tag - eg </P>. The end tag contains the same text as the opener, preceded by a forward slash /. The start and end tags surround the text they apply to, so in the example above the <HTML> tags apply to the whole page (document). HTML is not case sensitive, so the text inside the angled brackets may be upper or lower case, eg <HTML> is the same as <html>. White space is ignored, so
is the same as
If you are creating HTML by hand (rather than using an HTML editor) you should lay out your document so it is easy to edit. Indentation of items contained within others can often help make sense of a document, eg
HTML editors will usually handle the indentation for you. Within the <HTML> tags there are two sections, the head section (enclosed within <HEAD> tags), and the body section (enclosed within <BODY> tags). The head section contains various information about the document, eg the title (contained within <TITLE> tags and displayed in the blue bar at the the top of the browser window), links to style sheets (which define how the document is presented), script used within the document, and metadata (data about the document which can help people find it). It's a good idea to give every document a meaningful title as this will help search engines index your pages and will also be displayed to potential visitors. An effective title can mean the difference between a visitor clicking on your link, or somebody else's. In the example the head section contains only the title "Hello world!". The body section contains the actual content that is displayed in the browser. In this case the content is a single paragraph (contained within <P> tags). TIP A good way to understand HTML is to look at how its been used to create existing Web pages. Surf the Web to find a number of different design styles that appeal to you. Save these to your hard drive (in Internet Explorer choose File / Save As...) You may then open the saved pages in your HTML (or text) editor to see how the effects have been achieved. Want to learn more? See W3C - Dave Raggett's Introduction to HTML NCSA - A Beginner's Guide to HTML USENET newsgroups: |
| © web.twinisles.com Questions? Comments? Contact info@twinisles.com | |