Back to the basics pt2
Alright, so we learned what a web page does. Now let’s drill down a little deeper into what makes it tick. The whole premise of layout is based off of elements called tags. Did you play with leggos when you were a kid? Think of them as tags, you have an assorted size of rectangular boxes that stack from top to bottom. Thats right, everything is a rectangle. You can denote how wide and how high, where each sits in relation to another, and on a front to back axis, which sits in front of another. Thats it, boxes positioned in place. Now these tags may have varying content, images, text, video, you name it.
Tag structure – just like a capital letter and a punctuation mark denote a sentence, beginning and ending statements complete a typical* tag. In HTML, the open arrow < opens a statement, then oddly enough, the closed arrow > ends it. So it might look like this. <tag type>. That is the beginning of a sentence. The punctuation is typed as follows </tag type>. So a real example would be something like this.
<div>Content goes here</div>
There are many different types of tags based off type, here are a few that I use on a daily basis.
- <A HREF=
URL> </A> - <BODY></BODY>
- <DIR> </DIR>
- <DIV> </DIV>
- <DL> </DL>
- <DT> </DT>
- <H1> </H1>
- <H2> </H2>
- <H3> </H3>
- <H4> </H4>
- <LI> </LI>
- <UL></UL>
*Not all tags require an ending statement, and the new HTML5 standard typically does not require them. But for now, let’s stick to just using them for older browser compatibility.
Referencing with css – Now that we have a tag statement, now its time to mess with it. Stated in the head of the HTML document is a reference to your css document location (most popular use is in a separate css document – more on css and referencing later). Now that the browser knows where to locate and match information regarding styling the tag, you can change the parameters of that tag. Lets say you have a div tag, one of the most popular tags, short for logical division. <div>My name is Bob</div> You have a couple of options for referencing to a css styling for this div tag. You can use the id statement to identify it. <div id=”title”>My name is Bob</div> Now the browser is going to look at the HTML coding and reference the css document for an instance of #title. In my css doc, I may denote that I want a grey background, arial black text in 24 pixel size font, and it needs to be 400 pixels wide and 120 pixels high. Then the css instance of #title might be.
