HTML (HyperText Markup Language) is a basic language for developing web-pages. It was created to be an easy and flexible coding language. Most every page on the Internet was developed with some form of this coding (ColdFusion, XML, XSLT). With the basic introduction of this article you can build on your knowledge with any other wiki on this site. Please also search for articles outside of this site to keep up-to-date.
[notice type=”support” title=”STEP BY STEP” tag=”h4″]STEP [/notice]
Before starting any of the following steps, please read the Things You’ll Need section.
Things to Know before you get too involved: Tags are important. What are tags? Tags are enclosed bits of text that benefit human and machine understanding. Tags are enclosed with the angle brackets when used in HTML. Tags can have attributes that will describe things better for both the computer and user. Just as a link has a attribute that would be called a href which determines the page that you would go to when clicked. <a href=”http://internettutor.biz/”>internettutor</a> Most all tags must be closed with a tag of the same name with a slash before it’s name as it is above. There are a few exceptions such as the META or DOCTYPE tags
- Commonly, most all web pages are specified by DOCTYPES. These help identify the coding, as well as how it should be interpreted by the browser. Most pages will work without them, but it is required if you want it to be valid by the (They help regulate the Internet’s vast coding types and how they should/can be used). A DOCTYPE for the HTML 4.01 version can be seen below:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
This is one of the more common DOCTYPEs used on pages all over the net. It first specifies the type of page it is describing ‘html’, then it gives the public definition of the page coding type, then lastly it gives the location of the DOCTYPE that better describes to the browser the page.
Differences exist in the types of HTML(Different versions drafted over the years), such as the use of tags, or specific tags. Some tags are deprecated(Disowned for use of better, more useful tags).
This is currently imposed on the <b> and <i> tags because they are more for text decoration, not its specification, thus other tags take their place. The <strong> tag takes the place to the <b>, as well as the <em> tag takes the place of the <i>.
This is important that the previous tags are replaced by tags that represent more than formatting. If the text is translated, the meaning of the text stays the same, not just the formatting. It’s semantically correct.
As of XHTML Version 2.0 the <b> and <i> tags have been considered deprecated, as well as HTML versions past 3.
The HTML “Encapsulation Rule”
- Let’s see the more important tags used now. As a page is built there is a simple structure to it. When a tag is opened, it must be closed. The whole layout must take this into account. Here would be an example of a valid XHTML layout:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”>
<head> <meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″/> <title>Hello World!</title>
<body> <h1>Hello World!</h1> </body>
Ever coding system has built a sample code of what it takes to get that coding language to create a Hello World message. This is called the Hello World test.
- The header of the web page is the content(s) that exist between the <head> tag. This content is not viewable from the user’s standpoint(except the title which is evident in the page’s title). The information in between the <head> tags can be one of many other tags such as:
- The META tag, used to specify text information that helps with search engines or other utilities.
- The LINK tag, which provides a connection to documents such as Stylesheets(CSS).
- The SCRIPT tag, this can be most any web coding and can be in or accessed remotely(separate document) by the page.
- The STYLE tag, which is basically a stylesheet that has been coded directly on that page in between those tags.
- The TITLE tag, this provides a title that is placed in the bar at the top of the browser, or like Firefox, is in the tab as well.
- Let’s view a demonstration of some of these in a sample header taken from this site(It’s been condensed):
If you can’t tell, I just pulled one of each tag and cut out any real information. It’s quite condensed and pretty much every tag that can be in the <head> except for an HTML comment(We will get to that in the basic tags)
Basic Tags Everywhere
Let’s go ahead and pull some tags out we talked about and list some more. Pay attention to their uses and always remember the rule of thumb, “Encapsulation.”
Again, my knowledge isn’t the only place to learn from, please visit the site suggested for a great guide to many of the tags out there as well as good explanations and examples.
<strong> Makes text mean that its strong, not that it’s bold.
<small> uses decrement of the font size by one in comparison with regular text. The font size is measured in standard units from 1 to 7, the norm size of the text is 3 by default.
<pre> Defines a block of formatted text. Such text is typed usually with monospaced font and with all blanks between the words.
<em> Gives text emphasis, not as a style, but meaning.
<del> Strikes over text that has been considered marked-out.
<ins> underlines text to show it has been added, sometimes right after using the <del> tag.
<h1> One of the many heading tags that exist, the all have an ‘h’ in them, but the number may vary, just close the tag with the same heading number.
<p> Defines a group of sentences that are enclosed in it as a paragraph.
<!— … —> Unlike other tags, the content you want in a HTML comment must be inside the comment. This information is only able to be seen when looking directly at the source in a text program.
<blockquote> Defines text that has been quoted from a source, and the source can be described with a <cite> tag.
This list is not full, please visit HTML Dog for a great overview of the different tags that exist.
Building a Informational Structure
- Pages are constructed to hold data in a simple set of tags so we can have headings about information in paragraphs. The computer only understands there is data, not that it all links together. The computer is unaware of context or relation of ideas. It does not have that kind of a brain. We have to build responsible HTML pages to help the computer see a relation in content by devided section. This is accomplished by a tag called the <div> tag. It helps to build a large amount of pages out there. It is styleable with CSS and is easier than typing out large table codes to create a layout.
- <div> This tag is special in a way that it can be styled easily and can be used to seperate blocks of information in a way that the user and computer can both understand.
- Let’s take a look at a very simple HTML layout that includes the use of the <div> tag.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″/> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> <div id=”contentOne”> <p>This is some text in div#contentOne.</p> <div> <p>A paragraph in a sub-section of div#contentOne</p>
[notice type=”information” title=”TIPS” tag=”h4″]
- People are waiting for the next biggest thing since sliced bread, so invent, design, or code it.
- Don’t stop after reading this and think someone taught you everything. There is always something new to learn, especially in the great, and ever advancing technology.
- Go out and learn, borrow, and build on code.
- Once you’ve learned a bunch about all this, go and learn about Server Coding.
- Notice that some tags are opened with a <> and that is all they need,(Paragraph) and
(Line Break) are 2 examples. Other tags are opened with the <> and require a </> to close it.<Body></Body> are examples.