Who's Afraid of HTML? A Tutorial for Learning Basic HTML

4 years ago

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!

<div class='post-outer'>
<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'&gt;
<meta content='http://2.bp.blogspot.com/-_LNHqjR8NUc/Ufglv1acOxI/AAAAAAAADJQ/fGuMJfFJm…' itemprop='image_url'/>
<meta content='7434109613725114446' itemprop='blogId'/>
<meta content='6452333055901131441' itemprop='postId'/>
<a name='6452333055901131441'></a>
<h3 class='post-title entry-title' itemprop='name'>
קייטנת אמא - פעילויות לילדים לקיץ. יום טבע
<br />

Scared? Just keep on reading!

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.

Basic tutorial for HTML @ The Crafeteria

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

Image: Webbfredag via Flickr

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?

The Crafeteria

Here's the code for it ("img" tag has no end tag):

<img src="http://3.bp.blogspot.com/-fXLw-u3LzNk/UH3Oh2YXMqI/AAAAAAAAAv8/_N3skWRTK…" >

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

Etsy shop

This is an article written by a member of the SheKnows Community. The SheKnows editorial team has not edited, vetted or endorsed the content of this post. Want to join our amazing community and share your own story? Sign up here.

More from living

by Colleen Stinchcombe | 14 hours ago
by Colleen Stinchcombe | 4 days ago
by Sarah Landrum | 8 days ago
by SheKnows Editors | 12 days ago
by Nirupama Kumar Hecker | 13 days ago
by Fairygodboss | 17 days ago
by Justina Huddleston | 25 days ago
by Colleen Stinchcombe | a month ago