Have you ever wanted to make your own website, but those other webbuilders are too expensive? Look no further for an intro to HTML and CSS programming and coding.

Step 1: Set Up

Every HTML and CSS coding page starts with this blank sheet, called the skeleton. This is a VERY important step.

Step 2: Headings and Paragraphs

Headings and Paragraphs are the ultimate core of HTML coding. Headings and Paragraphs are how you insert your text.

There are six different headings:

h1, (for the title)

h2, (a bit smaller)

h3, (even smaller)

h4, (SMALLER!)

h5, (second to smallest)

h6, (absolute smallest)

Paragraphs:

p (about the size of this text you are reading)

So, How Do I Tag Them?

Each different heading has a different tag, but the HTML is super simple. Here are the tags you use for

Headers:

h1: <h1>Text here</h1>

h2: <h2>Text here</h2>

h3: <h3>Text here</h3>

h4: <h4>Text here</h4>

h5: <h5>Text here</h5>

h6: <h6>Text here</h6>

Paragraphs:

paragraph: <p>Long Text Here</p>

See image for example of code

Step 3: Text Emphasis

So, you've got your text. Say, here's my paragraph:

<p> The sandwich I had at the mall tasted terrible...</p>

But I want to make that terrible into italics. There is no italics button on a coding sheet! What do I do?

Now, I'll introduce two new tags:

strong (bold, (<strong>BOLD TEXT HERE</strong>))

emphasis (italics, (<em> italicized text here</em>))

See image above!

<p> The sandwich I had at the mall tasted <em>terrible</em>

See???

Step 4: Lists

Now, we'll be introducing a couple new tags.

<ul>

<li>Bulleted list item</li>

<li>Another item</li>

</ul>

<ul> means (unordered list, so bulleted list)

<li> means add an Item to the list

<ol> means (ordered list, so numbered list)

Step 5: HTML Images

What is a webpage without pictures?? Now, we'll insert some new tags, and jazz up our page with images!! Yay!

<img src="Insert the image url here!" alt="Insert the image url here!" width="203"

Okay now to explain!

<img src=""> is the source from where you get the picture. Say I wanted a picture of a dog. I'd put the image url, so like this:

That inserts the picture of the dog into my webpage. You can see the dog in the images area!

<alt=""> is not necessary in a webpage, but if someone cannot see the image, the alt will explain the picture. Also for blind people that have a computer system that reads the page for them, the system will read the alt to explain the picture.

So:

Now for the

<width="230">

This is a very simple part. This tag just simply resizes the picture. So the width would now be 230 pixels!

So here is our full tag:

Yay!!

Step 6: CSS Basics

CSS is used for styling. Instead of having old, boring, black and white text, you can use CSS to jazz things up a bit!

Look at how you add CSS in the top image!

CSS is a whole other language than HTML. Luckily for us though, it is easy to remember! So lets get started!

Look at the top image on where to add the CSS tags.

The tags to add CSS look like this:

So in that tag, the computer registers everything as being CSS! Cool!

Step 7: Colors, Fonts, Backgrounds

Now that we've learned the <style> tag, we can style our webpage! Let's start by learning how to add color to...say...the h1s! This will add color to all the h1s. Here's how you do it:

h1 {

color: blue;

font-family: monospace;

}

Remember how I said that CSS was a totally different language? That is the language of CSS above!

To add a background:

body {

background-color: red;

}

See, easy!!

Step 8: CSS: IDs

Now, we just learned how to make all of the h1's blue, but say we only wanted the title to be blue? This is where ID's come in handy. ID's are super easy to learn, and here is the only code you need to follow:

<h1 id="title">Title</h1>

Now: to add this into our CSS code:

<style>

#title {

color: red;

}

</style>

Remember the hash sign when embedding into CSS. This tells the computer to identify that it is an id.

Step 9: CSS Classes

Now that we've learned ID's, what if we want to group only a certain number of items? ID's are good for selecting one item, but to select more than 1 item, you need to use classes!

The tag is super easy, just like id's. It looks like this:

Just like id's!

Step 10: HTML: Links

So, you provide limited info, but you want readers to be able to get to a site where it has more information. Time to introduce a new tag!

<a href="url">Text reader will see</a>

<a> stands for anchor, which means you are anchoring a link to your page. Easy!

Step 11: The Basics!

SO there you have it! The basics of HTML and CSS! You can learn even more on codeacademy.com or on khanacademy.org! I hope you enjoyed! Please like, favorite, and vote! Also, please tell me on how I can improve. Thanks!

Introduction: The Basics of HTML and CSS Coding