Take Some Code

Saturday, March 3, 2012

HTML Basics


Introductions...
Hello my name is Mike and I am the wonderfully fantastic husband of Alyx from Everyday is a New Adventure.

I have created this blog as a means of sharing HTML, javaScript, CSS, and other types of code.
Followers will receive daily ideas and code tips to improve their own blog and learn some web design in the process.

Without further ado... I will now introduce HTML.

HTML is a computer programming language designed for the world wide web.
It is also an acronym that stands for Hyper-text Markup Language.


Those who remember the beginnings of the internet will remember a time when dial-up abounded with it's silly tones and websites were plain and boring.Most websites consisted of just text and maybe a few pictures and standard links.


The term mark up refers to adding marks or annotations to a document so that they are not displayed, but rather show the browser how to display something.

HTML consists of elements which each tell the browser to do something different.
You use many of them already I'm sure while blogging such as the break element <br /> or the image element <img... />. A web browser's job such as Google Chrome, Firefox, IE, or Safari is to read a webpage file like "index.html" and then display the page as it says to in the file.

A webpage can be created in just 9 lines of code:
<html>
<head>
<title>Title of your webpage
</title>
</head>
<body>
Whatever you want to display on the page
</body>
</html>

Now to explain it.
<html> - tells the browser that everything after that line is part of the webpage.
<head> - tells the browser that after this line is where you can put stuff that you don't want to show up in the body.
<title> - creates the title of the webpage and </title> ends the title.
</head> - ends the head section.
<body> - begins the body section where you put all of the pages content including pictures, text, links, and more.
Between the <body> and </body> is content.
</body> - closes the body section
</html> - ends the webpage.

And that's it. To create your own webpage all you would have to do is put these 9 lines of code into a standard text document, and then rename the extension from "textdocument.txt" to "textdocument.html" and now you have created a webpage.

Here is a step by step guide:
1) Create a text document on PC or MAC
2) Edit the document in a text editor such as Notepad (PC) or TextEdit(MAC)
3) Copy the code above by selecting it pressing Ctrl + C or Apple key + C
4) Paste the code in the text document by pressing Ctrl + V or Apple key + V
5) Save the text document and close it
6) Rename the text document from "TextDocument1.txt" to "whateveryouwant.html"
7)Done. Double click on the new file to open it in your default browser.
or
YouTube tutorial made by me... Enjoy the background music because I made that too...


That's all for today... I don't want to bore you with too much code, but for those looking for a freebie webpage built just like the example above Take Some Code here.

Have a good one!

1 comment:

  1. You know it is true that flash has always been able to do those things, but now with HTML 5 you can do animation with a combination of HTML5, Jquery, and CSS and it is all client side code based which means quick loading times and no matter what device it is being played on it will work. Flash isn't going anywhere, but it will focus on what it can do best like games. Go check out Adobe Edge... It's free right now and it is incredibly easy to make some HTML 5 animations. It exports the code for you. HTML 5 is only going to take over website design for fancy layouts and stuff.

    ReplyDelete

(c) 2012 Take Some Code