Introduction to Web Design and Development Part 2: HTML Basics
Hot damn! I want to be a web designer / web developer !
If you have read my previous post and express the above sentiment, you are in the right place. If you were looking for fish taco recipes please go here: FISH TACOS.
So now that you are sure that you want to be a web ninja you need to learn the structure of the web itself.
*Disclaimer*: This will be very basic and targeted at those who know nothing
The Internet is not literally a series of tubes that connect people the way that some *cough “politicians” have portrayed it. It is in fact a butt load of computers storing information and sharing that information through a network of connections.
The entire Internet has roughly the same amount connections as synapses and connections in the human brain. To learn more about the connections between the Internet and the human brain check out this TED video: 5000 Days of the Internet with Kevin Kelly
If you can wrap your head around that concept you can start to understand how complex the Internet system truly is.
Luckily for you the basic structural language of the Internet is rather simple. A 12 year old with no life, an unhealthy attraction to Japanese cartoons and little regard for personal hygiene can master it very quickly. (I know this because I was that boy… no seriously I had an undercut like this dude).
On to the code.
So the basic structure of the a web page is written in a language called HTML, which stands for Hot-Tight-Monkey-Love… just kidding. It stands for Hyper-text-markup-language. So HTML is a not a programming language it is a markup language.
Think of if like writing in Microsoft Word. When you tell MS Word that some text should be bold, a sentence should be indented and that there should be a title to the document, the software does those things for you. With HTML we are going to do the same thing on our own. We are going to tell the web browser how the content in the web page should be structured.
So let us recap a little. When we browse the Internet we use a web browser like Firefox, Google Chrome, Safari or which ever software you prefer (we NEVER use Internet Explorer, go here for information on why IE is bad).
When the web browser loads a web page it reads text with HTML markup around that text. The HTML tells the web browser to show the information in a certain way. It markups the information so that it looks like a web page.
Now that we understand a little bit of what is going on let us look at a little code.
Opening and closing tags:
< This is a tag that opens a piece of html code.
> this is a tag that closes a piece of html code.
Every < tag must have a > tag or your web page is broken.
Like this: <html>
The basic structure of every website is something like this:
<html>
<head>
<title>This is the title it will appear in the web browser window at the top </title>
</head>
<body>
<h1> This a heading </h1>
<p> This is a paragraph of text. The <p> tells the browser to display this text as a paragraph. We can set the style of the paragraph text to be larger or smaller, to be a different color and all kinds of other things. But we’ll get into that later. </p>
</body>
</html>
Notice how all of the HTML tags have a corresponding tag with a / in them. This is called the closing tag. Every HTML element needs a closing tag except for a few exceptions.
You can see that the page starts with head information like title <head><title>TITLE</title></head>. Next we close the head information and start with body information, like a heading and a paragraph.
Now you know the basics of HTML.
If this was easy for you to understand you are on your way to being a web designer. But don’t get too excited it just keeps getting more and more confusing and hard from here. I recommend that you now head over to W3 Schools and learn some more HTML.
If you didn’t understand that crap check out this video of kitties:
Leave a Reply