HTML Codes for Websites
From LoveToKnow Web-Design
When you’re a designer, knowing the right HTML codes for websites becomes second nature. However, starting out there are a few basic principles to learn before you launch your site.
Header HTML Codes for Websites
Loosely speaking, the HTML codes you use on the web fall into two categories: the ones you use to tell the browser what kind of page you’re creating, and the ones you use to tell the browser how to lay out the content on the page. The HTML codes are the "engine" behind the shiny website, and when you're editing the codes, some designers even call it "going under the hood."
The Concept of Nesting Tags
Before you start doing any HTML code, you need to understand that almost all tags need to be "nested", and that consists of two things:
One, almost all tags (</BR> excepted) need both an opening tag, which is surrounded by carat symbols < and >) and a closing tag, which is the same tag with a "/" symbol put right after the first carat.Two, the tags need to open and close consistently. For example, if you have a paragraph tag put into a layer tag, it would make sense for it to look like this:
<DIV><P>Your Content Here</P></DIV>And not like this:
<DIV><P>Your Content Here</DIV></P>In the second example, the P and DIV tags are in the wrong order.
Elements of an HTML Page
This concept of nesting applies throughout the entire HTML page, beginning with the tag that tells the browser that the page is written in Hypertext Markup Language, and going through the other main parts of the page:
|
<HTML> <HEAD> <TITLE>A Catchy Title Goes Here</TITLE> </HEAD> <BODY> Amazing content goes in this section. </BODY> </HTML> |
More Than Bare Bones
The example above is the most basic format for a web page - there are many more HTML tags that you can add in both the HEAD and BODY of the page. Aside from the page title, however, most of the content in the HEAD section is never seen directly by the viewer - instead, it is filled with content that either talks to the browser (such as calling javascript), it formats the text that comes later (using Cascading Style Sheets) or it contains elements useful to search engines such as page descriptions, keywords, and meta tags.
The BODY contains the content of the page, and that content can be thoroughly shaped by a wide variety of text-specific tags. While you can format color, size, and other properties in the BODY, it is now more common to use CSS to shape the appearance of the tags and use a smaller set of tags for the text. These, at the very least, usually include the the following
- <P>: Paragraph tags delineate blocks of text, and are usually used to include spacing so that screen text is easier to read.
- <EM>: The emphasis tag used to be called the "italic" tag, but some people prefer to use methods other than slanting tags to emphasize the text.
- <STRONG>: Like emphasis, strong used to be the BOLD tag, until designers realized that there were more ways to make a word seem strong than to darken it.
- HEADLINE tags: These are hierarchical tags used to set off subject headers for the paragraphs.
- HYPERTEXT links: Possibly the most important tags, these are the ways content is linked to other content either on the page or on the web. There are two parts to this, the first which tells the computer where to take you when you click, and the second to tell you what to click. The basic link is based around an anchor tag: <A HREF="http://thisiswherethelinkgoes">THIS WOULD BE WHAT THE USER SEES</A>
There are many more HTML codes that can be used; you can begin to learn them from tutorials online such as the following LoveToKnow Web Design articles.
Learn More
This page has been accessed 94 times. This page was last modified 20:38, 14 October 2009.
© 2006-2009 LoveToKnow Corp.
Print this page
Follow ltk on twitter
Visit us on facebook