XHTML and CSS for absolute nubes…
Hi, it’s me Edmundo again – back as I promised with more on XHTML and CSS for beginners – yesterday we covered simply what these two words mean and if you remember most of what we went over took us back to the pre-internet print days.
Today and tomorrow we are going to talk about tags or elements within XHTML and then about attributes and then I’m going to point you in the right direction for a great book that would provide further study and reference for XHTML and CSS (and even a little Java Script).
The point of mark-up or eXtensible Hypertext Markup Language, as you will remember, is to mark up regular text so that a browser can render it on screen in the way you – the marker upperer (ok, there has to be a better name for you – get back to me) – intends. Tags within the mark up are recognised by XHTML and ignored in regards to “printing” them to the screen – but read and understood with regards to everything that sits between the beginning Tag and the ending Tag. Thus all included text or information between the two tags can be delivered as intended.
Let’s use the example of a header. In XHTML there are 6 levels of header. They are denoted by the letter “h” and a number which will specify if they are the highest/largest type of header “h1″ or the last/smallest type of header “h6″.
To indicate that they are Tags and not just the letter h plus a number (how else would you present a document on XHTML headers?) the are encased in less than “< ” and greater than “>” chevrons. Finally to distinguish the opening Tag from the closing Tag we give the closing Tag a slash “</ ” to tell the browser that it can stop rendering text in this fashion for now.
So to mark up a header we would write the XHTML as follows: <h1> My Header </h1> – this would render as My Header in the appropriate font size and weight in the chosen browser.
Q. would all browsers render this XHTML the same way? A. of course not – XHTML and CSS would be way too easy to use if all the browser makers treated the instructions the same way. To make things MUCH more interesting – everyone does everything differently. Ha, I feel like a pro that I know such amazing things on only my second day! I was born to do this.
P.S. at the basic level the differences are minimal and there is absolutely no need for concern – it’s just minor presentation points.
Other common Tags and their meanings follow:
<html></html> Everything between these tags is the html document itself.
<head></head> Everything between these tags belong to the header of the document (not displayed)
<title></title> Everything here displays as the title at the top of the browser window and not in the document itself.
<body></body> Everything here displays as the main document – this is the lowest level of the document mark-up for display purposes.
<p></p> Everything between these symbols is treated as a paragraph
<ul></ul>Everything between these symbols is treated as a list (unordered in this case – meaning no numbers to mark the list).
<li></li> Everything between this mark up is a line within the list – e.g. in a shopping list this might be bread or milk etc.
<h1></h1> and back to our first friend the “header” mark up. Everything between these tags would be the highest (largest) form of header – perhaps to start your document.
Note how everything is lowercase – this is ALWAYS the case for tags/elements in XHTML. You will get errors if you use caps.
Tomorrow we’ll look at attributes – but I’ll leave you with one last bit of info. that is quite cool. Sometimes we don’t need to include any text between the Tags or element, because for instance that element does not render any text.
An example would be <br />. This is the break tag and it breaks a sentence to a new line at the point that you include it in the document. Since it performs a function but does not contain anything – it can self close! Cool huh? In the old days (HTML) self closing was not required – one just used the opening tag and that was good enough – but in moving to XHTML (a stricter version of mark-up) elements (tags – same thing) need to self close – and that’s how they do it.
See you tomorrow for attributes – P.S. Edmundo loves his new job – it’s so interesting!
RSS FEED