Last week you learned, pretty much nothing. We went through how to make a basic html page and put bold, italic and underlined text in. Nothing amazing, but hopefully this week starts to change that.
Remember to follow along in a notepad document if you want to learn a few basic tricks, or just read on if you want to brush up on some techniques. I know these days most things are covered by your fancy CMS. But I want to teach the art.
I think the best thing to do is first up learn how to make a simple block quote. Now if you’re like me, you have been calling them backquotes all this time and wondering while your CSS isn’t applying.
<blockquote>This will be a blockquote</blockquote>
So what does a block quote do? Well it automatically gives the content section a little bit more padding and moves it towards the right a bit. These are perfect for quoting someone on your blog or using them for other purposes.
So now we are going to use CSS for the first time. I made a little side not in last week’s tutorial, which gives you the basics of setting up the tag section which you can put in your CSS code.
So what do we want to do for a block quote? Well that is simple.
Because it isn’t a class (which is a dot before the word), or an ID (which is a # before a word) or any of those other things, but it’s a tag, it doesn’t need anything complicated surrounding it.
So first up we need to figure out how to do the HTML tag side of things.
this is where the good stuff goes
So that is the basis of the CSS section. Now what is that good stuff I speak off?
Well I’m going to dig up the CSS for the exact blockquote frame which I am using on this site here, and give you a run down on some of the simple things you can add to this CSS element.
border:1px solid #f1f1f1;
As you can see I’ve given the element just a bit more padding around the text, a background colour of white (which is the #fff) and a border around the element which is just a little bit darker (to give a blurry illusion). I’ve also customized the font colour to a dark grey. Which gives the element just a little bit more definition then the rest of the site.
I promised tables didn’t I in my cryptic riddle last week. Well tables are a little bit easier than the rest. A simple table would look like:
So I think I made a table with two rows and only one vertical row? I think hold on. *injects HTML to remember* (hey don’t laugh I’m writing this stuff off from memory).
Yes that is exactly what I’ve done. Which leaving it like it is, is a good learning tool for you to figure out how to add more vertical rows into it. So I’ll discuss what we have html wise.
We have a table tag, which identifies that the following code is for a table, which we put in a <tr> tag which gives it a row and the <td> which gives it a vertical row. So by having the <tr> inside the <td> it basically says that this row is part of this horizontal column. I think that works? Yeah.
So lucky for you I have the whole CSS thing for tables down pat as well.
So the table itself in this example I’ve shrunk it down so it fits on 90% of the allowable space, with it of course centred using the margin tags.
I’ve also given the td and tr tags the same design here by giving it a grey background and text, as well as a bit more padding.
Over the course of these tutorials we will learn more CSS definitions which can be applied with these elements we have learned today.
Last but not least, is HTML for a list.
And of course its CSS but we will get to that later.
Now lists are a handy thing to have in your head. For the simple fact is many people use them for making navigation. Due to how diverse the list tags are for styling and functionality.
But today we are just going to do a basic list.
So from my understanding the <ul> identifies it as an un ordered list. Which is good for navigation. I don’t think you see many people using the numbered lists. Of course this also has you putting in the usual tag to identify what the element is, in this case a list. Oh and clearly the <li> is the list itself 🙂
I think you are slowly figuring out what the CSS will be. You will have a ul version and li version of course. With the ability to define stuff such as padding etc. for each and the list-style which can allow you to have no style, squares etc. So a pretty handy element for you to learn.
Next week we look at making a simple layout. Which we will use these elements in a more logical way which might teach you something. Then we week after if your good, we look into how to make that simple layout into a WordPress layout.