Who's Afraid of HTML? A Tutorial for Learning Basic HTML
By the crafeteria on October 03, 2013
If you're online on a daily basis, or actually if you just live in the 21st century, you've probably heard of HTML.
Let's make it simple - HTML is a language that helps us write and design Internet pages. It is THAT simple. An HTML code may look really complicated, but actually, if you know how to look at it, it's not that bad. I promise!
If you're a blogger or if you have any kind of Internet page, a basic understanding of HTML can help you A LOT. So I prepared a short tutorial for you to help you with your first steps.
The basis for HTML is the tags. They look like this < >, and in between we write the commands. These tags mark a beginning and end of something. The opening tag is just written as is in between the angle brackets. The closing tag is written the same way, only with a forward slash ( / ) before the command itself. These tags design our page. Line breaks, links, images, text design – All of these are defined by tags. Anything you don't write between tags will show up as text.
A basic internet page will include these tags - html tag, to mark the beginning and end of the HTML document, head tag, that will be followed by a title tag, which is basically a tag for title, and a body tag - to mark the body of the document.
In most cases it will look like this:
<html> Beginning of the HTML document
<head> Our head section
<title> Beginning of title
</title> See this forward slash? It means that this is the end of the title tag
</head> Another slash! So this is the end of the head tag
<body> There's the beginning of the body of our document
</body> and the end of it
</html> And here's the end of the HTML document
See? It's not that complicated, is it? Once you understand the above, it's all a matter of playing with the different tags. Here are some examples for common tags.
<br/> -- This is a line break tag (same as hitting Enter). This is a special tag, because it has no end tag. It is written by itself and the slash will come after the "br" and not before.
<b> -- Bold text tag </b> Don't forget to close it with an end tag.
So if I want to write a bold sentence...
I will write the next code:
So if I want to write a <b> bold sentence </b>
In the same way, the "p" tag marks the beginning and end of a paragraph. <p> = beginning: </p> = ending.
And what do we do when we want to define an attribute for a tag? For example, what if I want a part of a sentence to show up as a link? Simple as well! We'll begin with < then the "command" then = , then " (quotation marks), the link itself (don't forget the http://), " again, close with > , write the text for the link and an end tag. Sounds complicated? Not at all! Look how simple it is.
If I want to write:
Welcome to The Crafeteria!
I'll write the code: Welcome to <"a href="http://english.the-crafeteria.com">The Crafeteria</a>!
<a> is a tag for a link. "href" is the attribute that tells us where to go.
In the same way, if I want to add an image, I'll use the "img" tag and then "src" to tell the little man sitting inside the computer where this image is located (it can be a Picasa account, a Flickr one etc.) See this image?
Here's the code for it ("img" tag has no end tag):
<img src="http://3.bp.blogspot.com/-fXLw-u3LzNk/UH3Oh2YXMqI/AAAAAAAAAv8/_N3skWRTKpU/s320/hebrew.jpg" >
Everything you see between the quotation marks just defines where the image is located.
If you want to learn more about HTML, a great place to start is w3schools. You can find there all the tags and lots of simple explanations.
This, in a nutshell, is HTML. Of course there's a lot more than that to it, but I hope this will help you next time you'll see a long and scary code. If you have any question about HTML or if you want to learn more, talk to me (either leave me a comment below or email me)!
Blog: The Crafeteria
More Like This
Recent Posts by the crafeteria
Most Popular on BlogHer
Save time, money and space with the FoodSaver® Vacuum Sealing System! AND it keeps food fresh up to 5x longer! Read our bloggers' experiences with the FoodSaver® System and see why you should get one for your home. Plus get a chance to win $100 Visa gift card! Read more
Most Popular on Blogging & Social Media
Recent Comments on Blogging & Social Media