DIR Return Create A Forum - Home
---------------------------------------------------------
Pargee M-CKT
HTML https://pargee.createaforum.com
---------------------------------------------------------
*****************************************************
DIR Return to: Tutorials & Guides
*****************************************************
#Post#: 109--------------------------------------------------
Web Design 101 by Red
DIR By: Red
Date: March 31, 2013, 2:00 am
---------------------------------------------------------
Hey everyone. While writing my Tumblr Theming guide, It occurred
to me that there was so much I was missing that might also be
useful to know. If you're having trouble understanding some
things in that guide or just want to know how to code web pages,
this is the guide for you. Hopefully...
In this guide, I'll be designing a basic webpage in HTML, CSS,
and little Javascript widget things thrown in. I'll make a
webpage dedicated to electronic music because why the heck not.
The internet is full of old code and new code and everything in
between. In an effort to make the world a more comprehensive
place for HTML writers, HTML 5 (a version of HTML) has been
tidied up in some areas where HTML 4 might've been a bit messy.
There really is no gigantic difference in the two versions, but
the tiny ones pack a powerful punch to content and how things
are handled on a web page.
So what the hell is a tag? A tag is a small piece of information
our browsers (firefox, opera, chrome, ie) process to order stuff
in our website. A tag looks like <this>. There are two types of
tags, an opening tag which looks like <this> without a slash in
front of the info inside the brackets, and closing tag which
looks like </this>. Most markup languages use some pattern
relating to this. Anything residing withing the <this> and
</this> tags is subject to them somehow. Think of them as the
top and bottom of a nesting doll. While there are some tags like
and <hl /> which don't use closing tags, we don't need to worry
about those yet.
First things first, I'll go over the structure of an HTML
document.
--- Code ---
<!DOCTYPE HTML>
<html>
<head>
<!-- This is a comment-->
<!-- The <head> tag is used for information regarding
the <body> part -->
</head>
<body>
<p>The body of an HTML document contains all the cool
things of a web page!</p>
</body>
</html>
--- End Code ---
This is the most basic a page can get. First off, we start out
with the <!DOCTYPE> tag, which is more important in HTML 4. In
HTML 5, it looks exactly how it looks in my example code. Since
my webpage will use HTML 5 tags, I'll be using this doctype.
I'll try to let you know when I use an HTML 5 specific tag, so
you don't get confused.
Next, we have the <html> tag, which should be pretty self
explanatory. It says that everything within the opening and
closing <html> tags should be rendered as HTML and not anything
else.
Next, we have the <head> tag. Everything inside the <head> tag
pertains to the document in some way, shape, or form, but
normally doesn't provide any actual structure as far as what's
actually displayed.
Inside the example code's <head> tag, I have included comments.
Comments don't technically have a closing tag because everything
that's commented is actually inside the literal tag. Comments
can span multiple lines of code. Comments start with <!-- and
end with -->. They aren't rendered by the compiler, so even if I
included I comment within the <body> tag, which shows actual
content, the comment and anything it spans wouldn't be
displayed. This is useful and extremely important, because it
can make your code more legible to you, and can also save buggy
or otherwise odd code for later editing. For example, I can say
something like this:
--- Code ---
<!-- The greeting is shown below -->
<p> Hello everyone, and welcome to Electronic Music
Central, also known as EMC. Take your time and look around!</p>
<!-- The following line is commented because I need to
change things...
<p> My favorite electronic musicians are Skrillex and
Deadmau5. I'd like to meet them someday.</p>
-->
<!-- End Greeting -->
--- End Code ---
That way, I can look back at my code and easily see where my
greeting is located, otherwise I'd have to figure out which <p>
(paragraph) tag I put it under. Also, I commented out the second
line, and nothing within the tags will be displayed, no matter
what other HTML tags are within the comment tags. Anyway, maybe
I want to add Starstruck to my list of favorite artists.
Then we come upon the <body> tag which is very amazing. This tag
is used to display content on the screen, it is not the body of
an essay. The <body> tag has kind of a super power later, but
that's not until we get into CSS.
Inside the <body> tag is the <p>, or paragraph tag. We use this
whenever we need to write generic text to the screen. This tag
becomes a little reclusive later, but it can normally be found
in almost any webpage.
The last part of the example code is all the closing tags for
<body> and <html>. Notice how we closed the <head> tag before we
opened <body>? Don't forget to close your <head> tag, or else
you'll end up like my cousin with tentacles for fingers and
green hair. Yikes....
*****************************************************
Page 1 of 1