Ok, so here is where we talk about the very basics of an HTML (hypertext markup language) document or web page. The first thing to know is that HTML is the code that tells a web browser how to render that code in the window. It’s basically the same as the text markup language used by editors to tell printers how to render an article or publication when it’s printed (like this goes in italics, this is bold, this is Arial font size 10, etc.). The difference being, rather than turning pages, you “jump” to them like hyperspace jumps in your favorite sci-fi program.The thought when HTML was designed back in 1991 was to create something linear where pages flow by hyperlinks vice having to search the directory of the server you are on for a page. If you are interested in a more in-depth look at the history of HTML you can do so at the W3C website. The information hasn’t been updated since 1996, but it’s still relevant.
In a nutshell, HTML acts like a computer program where you don’t see the language behind the program as you view the web pages, but the coding tells the browser how the page should look and act, like the coding behind a video game. HTML code itself uses something called tags in order to do this. Pretty much all tags have an opening and closing <> & </>. Within those tags are elements that say what that tag governs or does and then sometimes is followed by attributes that specify the element’s action further. We’ll get more into attributes later on.
The Basics
Making a web page with HTML is actually pretty simple. We already talked about the doctype, xmlns attribute, meta tag and nesting. Now for the real nitty gritty: your first page. The first tag you will need to know is <html> & </html> (we touched on this with the xmlns attribute). This tells the browser it is looking at an HTML page (not an FTP page or Gopher page, etc.). The next tag is the <head> & </head> tag (again touched on this with the meta tag). This is where the main information about the document goes. In the old days of pre-HTML 4.01, this is where the style elements that controlled the look of the page would be, now it’s mainly for the title of the page, meta data and a link used to refer to the CSS document that controls the format. The <title> tag is what shows up at the top of the browser and names the page you are looking at.
Next up is the <body> tag. This is where you put what will be seen on the page in the browser. In the body you have header tags like <h1> and paragraph tags <p> along with other stuff I’ll hit on later. Paragraph tags are used to break up lines or strings of text, otherwise they will just run to the end of the page and then carry over to the next line. Now header tags are just that, headers. They go from <h1>, largest, to <h6>, smallest. The <h1> tag is usually used for the page heading and anything below for section or paragraph headings.
When making a web page you actually only need the html, head and body tags to make a page with. Technically speaking, you could just type text in notepad, save as an html document and it will work, but there will be nothing there but the text. Now add in title, paragraph and header tags, then you have the makings of a very basic web page and in keeping with the strict XHTML format, we’ll put the doctype, xmlns attribute and meta tag in too.
So let’s take what we just learned and put it into action. Go ahead and pen up notepad (NOT Word) or the Mac equivalent and then copy and paste the following (don’t forget the doctype we mentioned last lesson):
<!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=ISO-8859-1" /> <title>My First Web Page</title> </head> <body> <h1>My First Web Web Page</h1> <h2>What this is:</h2> <p>This is a page where I can show off my newfound HTML skills.</p> <h3>This is to show the h3 tag</h3> <h4>This is to show the h4 tag</h4> <h5>This is to show the h5 tag</h5> <h6>This is to show the h6 tag</h6> </body> </html>
Now save that file as an html file (i.e. example.html) and open the file in your web browser (File > Open>). Click here to see what this should look like. It’s pretty basic, but this is in essence your first web page and as your skills improve, so will the look and feel of your page. On a side note, notice the meta tag up above in the example. See how there’s no closing tag? That’s right, the meta tag is one of those rare tags that open and close themselves. No need for an opening and closing tag, because there’s nothing but the attribute and no text in-between. Next up comes lists.
0 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.