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.
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:
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):
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)!
Tal, this was very helpful. Thank you so much.
ReplyDeleteThanks Regina, glad you found it helpful :)
DeleteYou just blew my mind. I never picked up on 95% of that by looking at code. Thank you!
ReplyDeleteThanks :) Glad I could help!
DeleteI 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.
ReplyDeleteI promise you it's not as scary as it seems. Just play with it a little, and you'll see :)
DeleteHTML doesn't scare me so much as gives me a headache =) Thanks for the cliff notes =)
ReplyDeleteLOL! Sometimes I feel the same :)
DeleteStopping 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.
ReplyDeleteThanks :)
DeleteLove the notes idea!
You did a great job! But I'm still afraid of HTML LOL
ReplyDeleteThanks Shay :)
DeleteI 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.
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.
ReplyDeleteDropping by from SITS! :)
Thanks, glad you found it helpful :)
DeleteI'm afraid of html--just started working with it about a month ago. Pinning this--thanks!
ReplyDeleteThanks! Hope you'll find it helpful. Don't hesitate to contact me if you have any questions.
DeleteHTML 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!
ReplyDeleteThanks for stopping by :)
DeleteAwesome! 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.
ReplyDeleteI love w3schools, their tutorials and explanations always seem so easy. Thanks for stopping by :)
DeleteExcellent article!! Makes things much clearer!
ReplyDeleteThanks so much Nuccia!
DeleteSuper helpful!!! Thank you!
ReplyDeleteThanks Stephanie :)
DeleteI 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!
ReplyDeleteMedium lever is definitely better than death... :)
DeleteThanks!
Thank you for this useful information. Really useful information!!!!!!!!
ReplyDeleteThanks Laura!
DeleteI 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!
ReplyDeleteIt is fun! I think you're ready to take it to the next level :)
DeleteVery helpful! I am pinning this so I can come back to it when I need it, because I know I definitely will!
ReplyDeleteThanks! Hope you'll find it helpful :)
DeleteI am terrified of html and wish I found this months ago!!!
ReplyDeleteThanks Anneliese, I hope it will help you. Don't hesitate to contact me if you need any further help!
DeleteVisiting from SITS! I love coding in HTML and CSS. Javascript is another story though!
ReplyDeleteHope 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! :)
God, you're right! I missed it somehow... It's corrected now. Thanks for the heads up!
DeleteThanks 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
ReplyDeleteLOL! Thanks for stopping by :)
DeleteThanks this has helped make sense of it all
ReplyDeleteThanks! Glad you found it helpful :)
DeleteThank you!
ReplyDeleteThank-you for writing an easy to understand post about HTML!
ReplyDeleteThanks for visiting :)
DeleteI 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!
ReplyDeleteThanks Amanda :)
DeleteGenius! This is the first time html has made sense to me, THANK YOU! :)
ReplyDelete