Wednesday, September 19, 2012

The Basics of HTML, or How to Build a Page in One Post

The Basics of HTML
or How to Build a Page in One Post

With any luck, you will have found that subtitle to be quite appealing to your sense of impatience (or, perhaps more appropriately said, your sense of urgency). After all, the seemingly monolithic task of building a webpage would be excellent to have delegated to just one post. In just several hundred words, you can learn how to build a page from scratch!

Now, here comes the 'but.'

But, that webpage is going to be considerably low-quality. That's because even most poorly designed webpages required quite a bit of knowledge, coding, and debugging (rinse, lather, repeat). In the most basic languages, with a relatively small pool of different elements and attributes, there are only so many different interesting combinations available.

However, a foundation is necessary to learn anything, and this is especially true of coding. Many codes require foundational knowledge to even begin learning, and programming in general will sweep you up if you do not understand these foundations.

So we start with HTML, perhaps among the most basic of common coding languages available today. The best part about HTML, save its simplicity, is that it is everywhere. HTML makes up so much of what you see on the internet that I guarantee you wouldn't recognize anything if it were gone.

We'll begin our discussion of HTML with some definition and history. HTML is HyperText Markup Language, which means that (a.) it is a markup language, containing annotations that are systematically unique from the regular text of the document, and that (b.) it uses hypertext, which allows virtually immediate access to information and other pages through the text itself.

That sounds all fine and dandy, but here's the real deal: HTML invented the World Wide Web. While that statement is quite sweeping, it's pretty much true. The World Wide Web (known better as that "www" prefix in URLs) was created based on HTML's revolutionary power, HTML itself being created by a CERN scientist named Tim Berners-Lee. It's not all that relative to the topic at hand, but any coder/programmer would do well not to forget the name of the man who invented the World Wide Web, which in turn popularized the Internet.

With access to a webpage's coding, we can see that much (if not most) of it is built of HTML. Since altering any piece of the coding alters the functionality of the site, we can add HTML code in to add functionality (or, at least, that is the goal). Placing is usually important, so make sure you put the element where it belongs!

Here are elements, with their open/start tag (which goes before the section intended to be altered) and corresponding close/end tag (which goes at the end, and may or may not be necessary depending on the element, since some are automatically closed in the open tag):
  • <html> ... </html>
    • Use to specify the use of HTML in a page. It is suggested that you begin and end a page's HTML code with these tags, for the purposes of clarity (it comes in handy later!).
  • <h1> ... </h1> ; <h2> ... </h2> ; ....
    •  Use to make contained text into a heading, where the number 1 through 6 is used to specify level of heading (1 being the largest, 6 being the smallest)
  • <b> ... </b>
    • Use to make contained text bold.
  • <i> ... </i>
    • Use to make contained text italics.
  • <u> ... </u>
    • Use to make contained text underlined.
  • <br />
    • Use to force a line break (close/end tag included in open/start tag).
  • <p>
    • Use to start a new paragraph (close/end tag optional).
  • <a href="*"> ... </a>
    • Use to link to another page.
    • Replace "*" with the URL (inside the quotes), being sure that the exact URL is copied.
    • Any text/media inside this tag will become a clickable link to that webpage.
  • <img src="*"> ... </img>
    • Use to place an image in the text.
    • The "src" attribute points to the source of the image; replace "*" with the URL of the image.
    • This element doesn't need to be closed, or even to contain text/media. However, it's usually smart to close the <img> element without any contained text/media, to keep tags in order.
    • Alternatively, and perhaps the most appropriate way to close this tag, one can use "<img src="*" />" (without the quotes). This closes the tag in the open element, much in the same way it does in "<br />"
  • <div style="*"> ... </div>
    •  Use to access the different styles available for text; see this page for more info on styles.
    • Replace "*" with "text-align: center;" where 'center' can also be 'left' or 'right' to align text.
    • The "style" attribute (attributes alter elements; "src" in the image tag is one example) can go in just about any element, adding many more planes of functionality to HTML.
Do not forget the close your tags! It isn't necessary for all tags, and your computer will do its best to read the page as you would wish it to, but as computers follow instructions to the dot, even a small mistake can send ripples of issues through the rest of the code.

Finally, you can nest elements within other elements. Basically, that means you can put one inside the other to have both elements work together on one piece of text/media, and/or for the outer element to alter/assist the inner (nested) element.

Using this knowledge, you can now build the code of a basic webpage! Albeit, not a very interesting one, but you will have to just stick around a bit longer to learn more. ;]

No comments:

Post a Comment