Tuesday, August 13, 2013

Who's Afraid of HTML?

If you're online on a daily basis, or actually if you just live in the 21st century, you 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 really not that bad. I promise!



Scary? Just keep on reading!

If you're a blogger or if you have any kind of internet page, a basic understading 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 docuoment.
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 this, 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, 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk4vpjV_E_UaDKqJyi6w0VlSWkRTgX9Fd1e9AQHpjrJBOkPYvmbgR9ioWyDChon30P9Fa0cE3rs_FfsOsVKm2DBSiOS3415BZ8oPi3FlDjwUpSToHjqDNRFFEJwmcKVgU96jUJXxDM9y5T/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)!

46 comments:

  1. Tal, this was very helpful. Thank you so much.

    ReplyDelete
  2. You just blew my mind. I never picked up on 95% of that by looking at code. Thank you!

    ReplyDelete
  3. I need to keep this in mind. HTML DOES scare me. I paid someone to set up my blog because I couldn't figure it out.

    ReplyDelete
    Replies
    1. I promise you it's not as scary as it seems. Just play with it a little, and you'll see :)

      Delete
  4. HTML doesn't scare me so much as gives me a headache =) Thanks for the cliff notes =)

    ReplyDelete
  5. Stopping by from SITS - this is a really helpful post! I agree with Stephanie - it doesn't so much scare me as make me crazy: I have little HTML sticky reminder-notes all over my desk for that very reason! You did a great job consolidating information. Thank you.

    ReplyDelete
  6. You did a great job! But I'm still afraid of HTML LOL

    ReplyDelete
    Replies
    1. Thanks Shay :)
      I promise you that all you have to do is try it out a little. The website I linked to at the end of the post is fantastic - you can just try out different tags to see what they do.

      Delete
  7. This is great info! I used to panic when I see all these codes! but I am slowly learning and can edit minor stuff. This post gave me more ideas what all these stuff means! Thanks.

    Dropping by from SITS! :)

    ReplyDelete
  8. I'm afraid of html--just started working with it about a month ago. Pinning this--thanks!

    ReplyDelete
    Replies
    1. Thanks! Hope you'll find it helpful. Don't hesitate to contact me if you have any questions.

      Delete
  9. HTML made no sense to me just a few months ago, but I'm slowly picking it up. Your post was very helpful, thank you! Popping in from SITS!

    ReplyDelete
  10. Awesome! Thanks so much!! I actually used the w3schools yesterday because I wanted twp pictures to go next to each other and they weren't cooperating. I also used it in today's post because adding a picture in a numbered list always messes up the numbering otherwise. I really want to take some html classes here at work. I just need to work them into my schedule.

    ReplyDelete
    Replies
    1. I love w3schools, their tutorials and explanations always seem so easy. Thanks for stopping by :)

      Delete
  11. Excellent article!! Makes things much clearer!

    ReplyDelete
  12. Super helpful!!! Thank you!

    ReplyDelete
  13. I used to be scared to death of HTML. Now I'm just scared on a medium level, I guess. I still don't love it, or even like it. Great tips here!

    ReplyDelete
    Replies
    1. Medium lever is definitely better than death... :)
      Thanks!

      Delete
  14. Thank you for this useful information. Really useful information!!!!!!!!

    ReplyDelete
  15. I don't know a whole lot of html, but I've gotten pretty good at the art of copying and pasting code! You can google all kinds of codes, like codes for different fonts and colors, codes to add animations to your page, etc. It's kind of fun!

    ReplyDelete
    Replies
    1. It is fun! I think you're ready to take it to the next level :)

      Delete
  16. Very helpful! I am pinning this so I can come back to it when I need it, because I know I definitely will!

    ReplyDelete
  17. I am terrified of html and wish I found this months ago!!!

    ReplyDelete
    Replies
    1. Thanks Anneliese, I hope it will help you. Don't hesitate to contact me if you need any further help!

      Delete
  18. Visiting from SITS! I love coding in HTML and CSS. Javascript is another story though!

    Hope this is helpful: You have an extra quotation in the front of your < a > tag and the end quote is missing in your Crafeteria link example. I know it's tricky to catch these things in your own posts, so I wanted to give you a heads up in case anyone tried to replicate the example in your tutorial. I spaced out the code so it would be easier to spot.

    Welcome to < " a href = " http://english.the-crafeteria.com > The Crafeteria< / a >!

    I'm trying to get in the habit of following everyone I leave a comment for, so please don't be alarmed to see a new stalker on your bloglovin' account! =D Haha. Take care! :)

    ReplyDelete
    Replies
    1. God, you're right! I missed it somehow... It's corrected now. Thanks for the heads up!

      Delete
  19. Thanks for the tutorial... It is sooooo useful and now I can go to sleep and not have nightmares of HTML chasing me all over the place... hehehe

    ReplyDelete
  20. Thanks this has helped make sense of it all

    ReplyDelete
  21. Thank-you for writing an easy to understand post about HTML!

    ReplyDelete
  22. I am no stranger to the basic html, but the complicated stuff is still a real head scratcher for me. You really made it very simple for a beginner to understand - I wish you wrote this post a few years ago when the site of html made me run the other direction!

    ReplyDelete
  23. Genius! This is the first time html has made sense to me, THANK YOU! :)

    ReplyDelete