I am a Journalism Honours graduate and I’m in no way, shape or form close to being considered very knowledgeable on all things IT and programming. However, when I was job-hunting and grew interest in multimedia journalism vacancies, I found that one requirement that they mentioned as advantageous was basic knowledge of HTML and CSS. I then downloaded a free e-book and taught myself how to do very basic HTML and CSS and here I am six months later with very basic knowledge on using HTML and CSS to create your own webpage. Sadly, I am yet to finish the dummy site that I have been playing around with but I think I have done quite okay for a journalism graduate who’s learnt HTML and CSS in a span of six months (this is in my own opinion though lol).
Anyway, it’s now time to learn how to do basic HTML and CSS coding. The HTML and CSS that I am familiar with is the older standard (XHTML and CSS) before the creation of the new HTML 5 and CSS 3, which I am also learning how to do at the moment. So, the video I have posted is still in accordance with old W3C standards but can still be used for writing and creating webpages.
Here are a few basic things to keep in mind when writing HTML and CSS code:
- <html> and </hmtl> – tells the browser that you are writing HTML (it shows the beginning and end of HTML on a page)
- <head> and </head> – shows the beginning and end of the header
- <title> and </title> – show the beginning and end of a page title
- <body> and </body> show the beginning and end of the body of text for your HTML
- <h1> to <h6> and </h1> to </h6> – indicate the beginning and end of the headings in your HTML, with <h1> being your most important and biggest heading and <h6> being your least important and smallest heading.
- <p> and </p> shows the beginning and end of a paragraph
It is very important to “tell” your browser that it is dealing with an HTML document. You do this by adding the following at the beginning of your .html file in Notepad or TextEditor:
<!DOCTYPE HTML PUBLIC”//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
This will then be followed by the rest of your code.
What is also important to add is that your opening html tag (<html>) needs to be written as:
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
You also need to add what is called a <meta> tag in your <html> tag. You write this as:
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-l”>
This specifies the language used on your page. In this case you are telling your browser to use English or “Latin” languages.
Inside your <head> opening and closing tags you will also include your link to your external stylesheet:
<link type=”text/css” rel=”stylesheet” href=”yourfilename.css” />
You will then write up all the information that will be included in your stylesheet in your .css Notepad or TextEdit file as was shown in the video).
So, to sum up the structure of a basic HTML file, it will be:
- DOCTYPE information at the top of your .html file
- This is followed by your <html> opening tag. Remember, your opening tag (<html>) and closing tag (</html> contains both your <head> and <body> tags.
- You then open up your <head> tag, which includes your <title> tag, <meta> tag and <link> tag. You then close this tag using </head>.
- Then, you open your <body> tag, which holds any information that includes your blog’s content. This will generally be placed between your heading tags (<h1> to <h6>, depending on how many headings you have) and your paragraph tags (<p> and </p>). of course you can also include things like lists, quotes, blockquotes, etc, which you will learn about later.
- Once you have written all the content of your blog, you close your body tag using </body>
- You then close off your html tag using </html>
It is important to note, though, that the DOCTYPE, <meta> tag and <link> tag are simplified with HTML 5:
- Your <!DOCTYPE> is simplified to <!doctype html>
- Your <meta> tag is simplified to <meta charset=”utf-8″>
- Your <link> tag is simplified to <link rel=”stylesheet” href=”yourfilename.css”>
Moving onto CSS, your CSS code will contain:
- what it is in your HTML coding that you want to style (the location)
- what it is about that that you want to style (the property)
- how you want to style it (style to apply)
So, for example, if you CSS code reads:
Then you have:
- p means that you have selected that you want to style everything between the paragraphs tags in your HTML coding
- color means that it is the font that you plan on styling
- purple means that you want to style the font purple
Some of the most common properties are:
- color: to style fonts
- top, bottom, left or right: to position elements at the top, bottom, left or right of your webpage
- text-align: aligning text to the left, right or center
- letter-spacing: to set the spacing between your letters
- background-color: to set the colour of your background
- font-weight: used to control the weight of your text (normal or bold)
- border: to insert and style borders
- font-style: to make text italic or oblique
- line-height: controls the line spacing of your text
- margins: sets margin space
- list-style: control the styling of list items
- font-size: controls the size of your text
- background-image: inserts an image in the background
You will of course learn more about this as we go on.
With your first actual lesson on writing basic HTML and CSS, what do you think? Is it easy or difficult? Did the way the video explain it make sense? Did the way I broke it down make sense? Would you like to have more simpler explanations on this? Please share.