Introduction: The Basics of HTML and CSS Coding

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>

<li>So on and so on...</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:

<img src="https://www.petfinder.com/wp-content/uploads/2012/...">

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

<img src="" alt="">

<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:

<img src="https://www.petfinder.com/wp-content/uploads/2012/..." alt="Cute dog with big, beady, brown eyes">

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:

<img src="https://www.petfinder.com/wp-content/uploads/2012/... alt="Cute dog with big, beady, brown eyes" width="230">

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:

<h1 class="a">Text<h1>

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!

Comments

author
FreddieLBarlett (author)2015-05-21

You should make a Youtube video on that, sir. And what software do you use if I may ask?

author

I used Notepad on Chrome Webstore, but that did not show results, and others asked for them, so I copied and pasted onto codeacademy to show results. Oh, and I don't use Youtube, but I'm glad you thought I was good!!

author
RyanT9 (author)FreddieLBarlett2015-06-12

looks like he went to codecademy.com but i'd recomend either Notepad++ or Dream Weaver

author
LiveCrafts (author)2015-04-26

Thank you!

author
EvolvedAwesome (author)2015-04-26

Very Nice explanation of the basics. Well done!

author
LiveCrafts (author)2015-04-25

Okay, cool! If you need even more help, I used Khan Academy and Code Academy to start my learning!

author
honey181 (author)2015-04-25

Basics are explained clearly. Nice! Bdw, i'm going to start a new content managing website(CMS). Plz guide me through the whole process... You can also mail me at honeysharma9050@gmail.com

author
LiveCrafts (author)2015-04-21

Now all Pictures of the product after each step have been added! Enjoy and remember 2 vote!!

author
LiveCrafts (author)2015-04-21

Thanks! I'm working on those photos as I type!

author
NathanSellers (author)2015-04-21

Nice tutorial. I agree with renzo1320. it wound be nice to see what it does.

author
renzo1320 (author)2015-04-20

nice tutorial, but you should add pictures of the result at each step next to the picture of the code you already have.

author
LiveCrafts (author)renzo13202015-04-20

Thanks for the idea! I'll do my best to post pictures of how it turns out. The only problem is that the software I use doesn't show the results, but I'll try! Thanks for the feedback!

About This Instructable

6,124views

273favorites

Bio: We are a team that creates instructables, and also a family. We love creating posts, and also doing projects. We love cool stuff, and gadgets.
More by LiveCrafts:The Way to Make the Best Possible InstructableLap DeskImage Editor Galaxy in 10 Minutes!!
Add instructable to: