When you first begin using HTML editors and open your first webpage (HTML document), the code may seem daunting. However, HTML is the most basic of web languages; it s the core language of the Web and not hard to learn. In this article, we ll cover the basics of HTML and webpage creation when using the text, or coding side, of HTML editors.
Coding With HTML Editors
Image 1 Correct HTML
Image 2 Incorrect HTML
Basic HTML Principals
Once you understand the basic principles of HTML, the rest becomes much easier to learn.
HTML is made up of tags, written using the greater than and less than symbols. As well, most tags come in pairs, with a start (opening) tag and end (closing) tag, which look like this:
Without the closing tag, and without the / in the closing tag, the HTML doesn t work. Although some tags don t require a close, these are rare exceptions.
When opening a new document, many HTML editors will automatically provide the basic layout of a webpage. This document will look similar to this:
Basic HTML Document
Each piece has a particular part to play, an exact order, and can only hold certain information.
- HTML DOCTYPE declaration Although the DOCTYPE declaration isn t a tag, it is an essential part of your webpage and always the first line of the document. This tells the web browser what version of HTML you re using and how best to interpret the code. Which version of HTML should you use? As a beginning coder, Transitional HTML is most likely the best choice.
- <html> - This is the first tag of a document, which tells the browser start reading HTML now . Its closing tag is the final tag of a document, telling the browser that the page is finished. These must be the first and last tags of the webpage.
- <head> - The second tag of a document holds the meta-information, or general information, about the webpage. This is the place for scripts, links to design (CSS) files and other information about the page.
- <title> - The title tag is required for HTML documents, but it s also a tag you want to use. Just as it sounds, the title tag shows the title of the page. However, visitors also see the title tag when searching for your site, so it acts as a marketing message and a page title.
- <description> - The description tag is also a tag you want to use. It defines the description of your page, and also doubles as a marketing message, much like the <title> tag.
- <keywords> - Keywords define the bare bones of what your page is about. For instance, the keywords for this page might be: using HTML editors, HTML documents, HTML code.
- <link> - The link tag is used by the browser to reference companion documents, such as your stylesheet (CSS, which defines how your webpage looks).
- <body> - This is the only area you put information that you want your visitors to see. The words in this article, for instance, are placed inside the <body> and </body> tags. Were it to be in the <head> area, you wouldn t be able to see the article.
Tags such as the title, description, keywords and link tags must be contained within the <head></head> area. As well, notice that none of them have a matching close tag. Instead, they use / at the end, which is the accepted way of closing these tags.
Inside the HTML Body Tag
As you progress through learning HTML, you ll find yourself wanting to learn how to create links, different sized fonts and other common HTML events. Some of the most common, and thus most quickly learned, include:
- Headings Headings provide different font sizes, such as those used at the top of a page, section or important paragraph. These are defined with tags that start with h and end with a number. The number defines how small or large the font is.
Example: <h1>This is a heading</h1>
- Paragraphs Paragraphs are defined simply by <p> and </p>.
Example: <p>This is a paragraph.</p>
- Links Unlike the link tag used in the header, links in the body are written using <a href= > and </a>. The href is an attribute, which defines where the link is supposed to go when you click on it. The actual address goes between the quotes, while the text you want the user to see goes between the tags.
Example: <a href= http://mysiteexample.com >My Site</a>
- Images Image tags are written using <img src= width= height= />. Notice that the closing tag is replaced with the / close. Src is short for source , which is the address of the image on your server. It s important to fill out the width and height information, so the image shows in correct dimensions.
Example: <img src= http://mysiteexample.com/image.jpg width= 100 height= 100 />
Most HTML tags use letters that match what you want to do. H defines heading , for example. As well, many HTML editors provide an auto complete feature that automatically provides closing tags.
As you can see, learning to code HTML is sort of like learning a new language; there are a number of rules (and exceptions to every rule), and even punctuation guidelines. But once you get down the basics, you ll be able to code your own webpage, and master more advanced coding techniques. Regardless of your level of HTML expertise, you ll want to find the right HTML Editor, so check out our comparative reviews. At TopTenREVIEWS We Do the Research So You Don t Have To.