The Basics of HTML and CSS
What is HTML?
HTML stands for Hyper Text Markup Language, it will make the structure for your page.
What Program Should I Use?
The first thing you will need to do is select a program to work in. One of the obvious is Dreamweaver, you will just want to switch out of design view and into code or split view. This will work for either Mac or Windows. However this isn’t the only option available.
On the Windows side, Notepad, a plain text editor that comes with your operating system will suffice. Although if you would prefer something else another free option is Notepad++.
The Mac comes with TextEdit, which can be turned into a plain text editor by going up to Format and clicking Make Plain Text. Another free option is download Text Wrangler.
Where Do I Start Coding?
Now that that is covered you will want to create the base for your HTML document.
<html>
<head>
<title>
Page Title Goes Here
</title>
</head>
<body>
HTML code should be placed here :)
</body>
</html>
With the introduction of HTML the doctype which specifies to the browser which version of the language you are speaking, has been shortened to just !DOCTYPE.
The html tag tells the browser that the HTML has started, and then at the end of your document that it has ended. Any tag that you use should be ended. There are two types of tags, binary and unary. A binary tag is something like you see above, where a unary tag does not have an end tag, for example <br />.
The head is the area of your document that holds things that won’t be elements on your page. It holds the title tag, which will show up at the top of the window or on the tabs in your browser.
The body is where the rest of your HTML will be placed. These are elements that meant to show up on the page itself. Your document should be saved as a .html document, and your homepage as index.html. When a browser gets confused it will default to the page index.html.
What is CSS?
CSS stands for Cascading Style Sheets, it is essentially what makes your page pretty. It is used to control the different pieces of your structure by changing things like how they look, or where they are on the screen. It is written in the format proterty:value;
Inline Styling
There are three different ways that CSS can be used. They are called inline, embedded, and external.
To use inline styling you would go into the tag of the element you want to change, for instance, say you wanted to change something about your background, you would type style=”background-color:#ff0000;” to make it red.
Embedded Styling
For embedded CSS you would set up a style tag in your page’s head by using this code:
<style type="text/css">
body {
background-color:red; }
</style>
</head>
and then typing between the tags. You would put the type of tag you are trying to talk to, and then an opening and closing curly bracket. Your styles would go between the curly brackets.
External Style Sheets
Your third option is an external style sheet. These are used most often on large websites because you can make a change to the entire website without individually editing each page.
You would start by creating a new plain text document and then typing your CSS in the format mentioned above, no style tags required. You would save your document with the extension .css and then return to your html page to link the external style sheet. You would link it by placing the code below in your page's head. Change the value for the href attribute to match your filename.
This tells the browser where to find the external stylesheet, what it is looking at so it knows how to read the language. This is also a good example of a unary tag.