Introduction to HTML and CSS
Hi! First off, welcome to my website, its a brand new design and overall an excuse to try out my newly founded PHP/MySQL chops.
So here’s the deal, I’ve been learning web development for a while now, picking up tidbits from all over the web, books and friends helping me out. Then I started thinking, the web has been so great for helping me, I feel like I should do the same, which is why I am writing the first of a long series or how to articles, tutorials and information. I’ll be covering everything sequentially, so first part will be something along the lines of intro to the web in general, HTML and CSS. The subsequent parts will cover things like advanced CSS, WordPress integration, PHP/MySQL, Javascript and more. Enough of this, lets get to it, after the jump!
I suppose the most logical place to start would be introducing the concept of HTML and CSS to you.
HTML
HTML is a markup language, not to be confused with actual coding. I’m going to assume that you know absolutely nothing about HTML and start from the very beginning. All HTML tags start with a <tag> and end with a </tag>, this for example would be valid markup.
1 | <p>hello</p> |
Here is a list of the most common tags:
<h1>,<h2>,<h3>,<h4>,<h5>, and<h6>– These are the most important to the least important header tags<p>– This is a paragraph tag, it is generally a good idea to put all your body text into one of these tags<a>– This is a link tag, use this to link to off site pages or in-site pages<div>– This is a container generally used to arrange content in an organized fashion
There are many more tags for many different uses, to see all of them described go here.
So now we have a basic idea of what HTML tags look like, now lets go through some of the theory that goes behind coding HTML. HTML is a very linear language, where the further down in the code you are, the further down in the page you should technically be. Lets take a look at how some typical HTML should look.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <head> <title>Example 1</title> <link href="/css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/scripts/script.js"></script> </head> <html> <body> <div> <h1>Hi I'm a header</h1> <p>And I'm a paragraph of text</p> </div> </body> </html> |
Lets break it down, line by line. First we have the <head> tag. Anything put in between the opening <head> tag and closing </head> tag will NOT be rendered in your browser. The <head> tag is used to load in things that are needed to make your web page work, things like your CSS style sheet, and Javascript. It is also where you define the title of your page, descriptions and keywords which we will get to in a bit.
1 | <head></head> |
Now lets take a closer look at some of the items we can have in the head tag.
The <title> tag is used to define the title of the web page.
2 | <title>Example 1</title> |
The <link> tag is used to link to an external file. Notice in the <link> tag there is are “type” and “rel” identifiers. “Type” and “Rel” combined tell the browser how to handle the file it is linking to. In this instance we are linking to a CSS style sheet which literally styles the entire page.
3 | <link href="/css/style.css" rel="stylesheet" type="text/css" /> |
This <script> tag is used to link to a Javascript file that contains code to modify your web page. We will discuss Javascript later on, but its good to know how to link to it properly. Notice again that we have a “type” identifier, to tell the browser how to handle the file.
4 | <script type="text/javascript" src="/scripts/script.js"></script> |
Next we have the <html> and <body> tags. These are ESSENTIAL for your web page to work. They tell the browser that the actual HTML code starts and stops!
6 7 8 9 10 11 12 13 14 15 | <html> <body> <div> <h1>Hi I'm a header</h1> <p>And I'm a paragraph of text</p> </div> </body> </html> |
Next take a look at the <div> tag, its wrapping the <h1> and the<p> tags in a box.
9 10 11 12 | <div> <h1>Hi I'm a header</h1> <p>And I'm a paragraph of text</p> </div> |
This is useful because you can think of HTML as a collection of boxes stacked one on top of another, and that way its very easy to move things around if they are sectioned off in their own little boxes.
CSS
Now lets move on to CSS, the reason the web looks so cool now-a-days. CSS stands for Cascading Style Sheet. CSS is basically a separate file that defines your HTML tags (remember – <h1>, <p> etc.). By default every tag has a style already applied to it, that can be useful but I generally don’t like this, so I use a style sheet reset, which re-defines every HTML tag to have no style at all. You can get that reset here.
Now that we have a completely clean slate lets stay learning what CSS does and how its suppose to be written. CSS is based on ‘Classes’. Classes are a way of targeting specific tags to be styled a certain way.
First lets take a look at how to include a CSS file in your web page. You must include a .css file in the head of your HTML page, and the link is relative to where the HTML page is. Take a look at the example below, the style.css file is located in a folder called css.
1 2 3 4 | <head> <title>Example 2</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> |
Now lets take a look at what a Class looks like.
5 6 7 8 9 10 11 12 13 | <html> <body> <div class="header"> <p>This is a paragraph</p> </div> </html> </body> |
And then in the CSS stylesheet, we define the Class like this.
1 2 3 4 5 6 | .header { background-color:red; color:white; width:100px; height:40px; } |
Take special note of the period . before the Class Name, that tells the browser reading the CSS style sheet that what you’re designating is indeed a Class.
This is how our code would look in a browser.
This is a paragraph
You can pretty much do anything once you have assigned an element (<p class="text" > etc..) a Class, for the full specifications of what attributes you can give a Class, refer to the W3C Schools.
This concludes Part 1 of What I’ve learned about Web Development, in Part 2, I’ll be diving much more in depth about CSS, tricks and tips.
Cheers!
Boomshakalakakaaaa, i likes!
Testing
Now that’s just delicious!
OooOoh la la
learning is cool.