HTML Basics Step by Step
HTML is short for HyperText Markup Language. That’s gibberish for ‘something that makes plain text look good’. It’s the ‘code’ that’s behind every webpage. Even this one. And, surprisingly, it’s actually quite simple.
The teachings of basic HTML code can (almost) be broken down in two all-ruling disciplines: style a.k.a manipulating the appearance, and referring, a.k.a marking and pointing to locations of, and within documents. HTML can’t do anything more complicated than drawing a table, or creating frames, and we’re not going to cut into PHP or Java.
Yet HTML is still far off the beaten path for your average Joe. It’s wizardry, and none of your business. My goal today is to give you some of the HTML building blocks in the course of a few minutes. You won’t be a programmer just yet, but you’ll be able to skim the source of a webpage, understand it, and grab that image that Flickr is trying so hard to keep from you.
Step One – The Concept Of Tags
As said previously, basic HTML code manipulates a plain text document to apply style and reference. It does so by applying ‘tags’. A tag does nothing more than indicating a position or selection of the document, and specifying the kind of wizardry that needs to be done.
<tag-example-1>This, and only this part of the document is affected.</tag-example-1>
<tag-example-2>Something just happened, preceding this part of the document
Example 1 shows a sentence that’s encapsulated by two tags, a begin- and end tag. Everything in between is affected. Very common examples are making text bold, cursive, or creating a link. The end tag is identical to the begin tag, but is preceded in angle brackets by a forward slash ( / ).
Example 2 shows a tag that works alone and (arguably) doesn’t need to be closed. Although not required, it’s occasionally also written as <tag /> to emphasize this very attribute. Loner tags don’t affect ‘part’ of the document, but signify local wizardry, things that happen ‘in between’. Common examples are line breaks and paragraph breaks.
Note: for longer tags, <tag>, <tag />, and <tag></tag> all mean the same thing.
<tag attribute=”value” attribute2=”value2″>This, and only this part of the document is affected.</tag>
Sometimes tags allow for additional attributes to be supplied. Common examples are text font and color, or image width, height and source. In those cases, the tag name is followed by a space, and a number of attributes with a value, again separated by spaces. The value is the variable part of this formula. Note that the end tag remains the same, regardless of the attributes.
We’ll review some common tags in the next few steps.
Step Two – The Parceling of HTML, HEAD & BODY
The HTML, HEAD and BODY tags are to an HTML document what a bedroom, kitchen and living room are to a house. These encapsulating tags parcel out the big parts of a document.
- <HTML></HTML> simply indicates the use of HTML code. They’ll show in every webpage, usually at start and end, and embrace practically all the other code, including the next two.
- <HEAD></HEAD> mark the ‘administrative building’. These will encapsule the title, and enable certain scripts. Usually at the very head (no pun intended) of the document, this is where you don’t need to be.
- <BODY></BODY> is located below the HEAD tags, and makes up most of the document. This part tells the tale of what’s actually showing on your webpage. Living here are the text, images, links, and pretty much anything you can see in your browser. This is where we play. The following tags all occur within the BODY part of an HTML document.
Step Three – Because <P>, <BR> & <FONT> Make You Feel Pretty
We’ve already said HTML was a markup language. This means as much as making text feel pretty. Remember, HTML dates back to when the web was a very text-y experience. Besides, the internet would’ve been far too slow to support YouTube. Here are some of the most common pretty-making tags.
- <b></b> makes your text look bold
- <i></i> makes you write in cursive
- <u></u> underlines what you just wrote
You’ll be delighted to know that these also work in the comments section. Don’t overuse them, though.
- <br> hits the break, making you continue on a new line
- <p> indicates a paragraph, creating an extra large break
These allow you to structure the document, because an actual break doesn’t mean anything in an HTML document.
<FONT></FONT> allows you to manipulate a bunch of other stuff with text, by using attributes like size, face and color.
An ideal example would be <FONT color=”blue”>smurfs</FONT>.
<H1></H1> to <H6></H6> allow you to quickly draw up different sized headers. H1 is biggest and H7 smallest. The ones we use in MakeUseOf articles are usually about H3.
Nowadays, markup is often kept in a separate CSS file. The exact style figures are explained externally, and one only needs to ‘mark’ part of the document to apply them. This is done by using div tags. For example, <div class=”headermakeuseof”>sometext</div> will look for a headermakeuseof class in the CSS file. We won’t discuss this in detail.
Step Four – Embedded Images with <IMG>
Images have become customary on HTML pages, and yet there’s a piece of code behind it. The <IMG> is one of two tags we’re going to discuss in detail, because it’s something you’ll be able to use. Just think of those annoying web sites that don’t allow you to download some pictures to your desktop (I’m looking at you, Flickr). Next time, just go into the source and grab the source yourself.
Here are some of the attributes used in conjunction with the IMG tab.
Very important. The source attribute specifies the location of a picture. That’s right, a picture is never really rendered in a web page, but gets pulled in from an external source. Once you’ve got that address, you’ve got the picture.
Sometimes, only part of the URL is displayed. The actual URL will depend on the location of the HTML file. This is called a relative address, contrasting with an absolute address. An exemplary http://site.com/dir1/dir2/dir3/page.html may show a value of “image.jpg” when the picture is located in the same directory as the webpage. In this example, the full address would be http://site.com/dir1/dir2/dir3/image.jpg.
If you encounter a relative address of “dir4/image.jpg”, the image will be located in http://site.com/dir1/dir2/dir3/dir4/image.jpg
Similarly, “../image.jpg” will have you go back one directory, “../../image.jpg” two directories, and so on.
These tags define how large the image is displayed. It doesn’t say anything about the actual size of the image. Sizes can be added in pixels (where 200 and 200px are one and the same) or percent. With only height or width specified, the other one changes accordingly. Using both tags allows you to ‘stretch’.
alt=”alternative name or comment”
The alt tag specifies the text shown on mouse-over, or when an image fails to load. More specifically, these are what XKCD uses for those funny afterthoughts.
Proper usage would be, e.g. <IMG src=”image.jpg” height=”20px” alt=”example”>
Step Five – Links Are Made With A Tag
This one could be even more important than the IMG tag. An <a></a> tag allows you to mark a spot in a document, and link to documents, pictures, files, and even anchors in other HTML sites. Here are the most common attributes.
One of the most common attribute, written <a href=”address”>text</a>. You can create links by defining the web address and encapsulating said ‘anchor text’. Links can also be used in the comments section, provided you don’t link to spam or inappropriate content.
Used in conjunction with the name attribute, the tag will create an anchor. You can use this anchor to link back to from within the same page, or even over the web. One can link to an anchor by using a relative or absolute URL, respectively <a href=”#name”> or <a href=”http://site.com/page.html#name”>.
This is the part where I admit we’ve only brushed the surface of basic HTML code. What we’ve seen today will allow you to skim through and understand a big part of simple websites. Go ahead, try it. You’ll definitely find some tags you don’t know, but that’s where Google comes in handy. If you’re willing there’s a lot more information where that come from, and you can all find it online.
If you’re looking for something very specific, like an image, an audio file, or a link, there’s no need to read the entire HTML page. Press Ctrl+F and search for those files or the relevant tags. You know what you’re looking for now, and especially when you’ve found it.
What do you think? Your first or last encounter with HTML? Let us know what you think in the comments section below, and don’t be afraid to try out some of the markup code!
This article was originally published on http://www.makeuseof.com/tag/5-steps-understanding-basic-html-code/