Day 1 of 30 – The basics
The first lesson of this course won’t be code-heavy, but rather more informational and theoretical. Before we can delve straight into the heavy code, we need to cover the basics. One last thing before we begin this journey. Do note that I am an xHTML W3C standards compliant modern coder, meaning I prefer the use of table-less designs which have been proved (by many) to be far superior to table-based design. While we’ll cover the use of tables and their respective markup code, we will concentrate and focus on DIV-based (aka modernized style) designs.
The basics
Just as you put on a nice shirt before you go to work [see picture on the left], you should also know that in HTML and CSS and every programming language, what has a start, must also have an end. Okay, the whole shirt thing was by far the worst analogy (if at all an analogy) I’ve ever made. Don’t worry about it, it’ll get better!
The beginning and the end
In html, every beginning of code starts with a ” < ” and ends with a ” > “. Furthermore, xHTML possesses two types of ending: self-ending, and not-self-ending.
A self ending code is one that ends with a ” / ” followed by a ” > “. The image code, for example, is self-ending (the ellipses [aka three dots "..."] represent overlapping code. If you are to copy paste this, make sure to remove the ellipses and bring the string to one straight line):
<img src="images/myimg.jpg" alt="my image" ... title="my awesome image" width="10" height="10" />
Let’s have a look at the image code and disregard the terms for now. As we discussed before, it starts with a ” < “, then comes the HTML command, in this case, ” img “, which is short for image. This tells the browser that we are inserting an image here. Whenever anything is inserted or linked or referred to within a document, you’ll frequently see the ” src ” code, which is short for source. This tells the browser to put an image that is located in the folder named “images” with the name of “myimg.jpg”. The ” alt ” tag is used for browsers that do not view the images for some odd reason (perhaps not enough bandwidth to download image, perhaps images blocked, etc. etc.), and instead of displaying the image the browser will display the alt (short for alternate) text. The commands the follow are self-explanatory. Do note that whenever height and width are used within an xHTML markup code, they are referring to pixels. In this case, this picture is 10 px by 10 px.
The reason I chose to start this course with the image markup is because it shows a great example of self-ending markup code. However, most commonly used xHTML markup code is not self ending. Take for example the <body> tag:
<body> </body>
The markup code for the ” body ” tag starts with <body> and ends with </body>. This is an example of non-self-ending code. Another example of this is the division (DIV) tag:
<div> </div>
And so on…
We’ll cover more xHTML commands and markup code later in the course, but for now, make sure you understand the difference between self-ending and not self-ending commands. Also make sure you fully comprehend the fact that every statement in any programming language has a start and an end. Whether it’s with ” < ” and ” > “, or with brackets, or with curly brackets, or parentheses, what-have-you, it must end somehow.
The next lesson
The next lesson will introduce the CSS reset file, explain why it’s useful, and explain the first 5 useful HTML markup code necessary to begin building your own website. So stay tuned!
Tags: course, css, html, lessons, tutorial, XHTML