|
KickingFriedCats -> HTML 4 Dummies(Incomplete) (3/8/2008 8:25:51)
|
HTML 4 Dummies
Contents(I'll mark those that are done with a green colored '-\' and whats new with a brighter green '-\')
0.0 Some Things That Might Be Useful-\
1.0 Introduction-\
1.1 What Is HTML?-\
1.2 Programs You Can Code HTML With-\
2.0 A List Of HTML Tags-\
2.0 B What They Do-\
2.1 A Attributes
2.1 B What They Are Used For
2.1 C How They Are Used
2.1 D List Of Attributes
2.1 E What They Do
3.0 Getting To Know HTML A Bit More
3.1 A Introduction To Cascading Style Sheets(CSS)-\
3.1 B Exploring The Many Wonders Of CSS
3.2 Inserting CSS In HTML
4.0 Hopes And Wishes
4.1 Helpful Websites
0.0 Some Things That Might Be Useful
Well, this is just here because I'm too lazy to update anything else. Here I'll add resources which you can use to learn and/or experiment with. Today I only have one, which you can experiment with. Using this thing helps you practice with tables, in my opinion.
<html>
<head>
<title>Blah Blah</title>
</head>
<body bgcolor="#000000">
<center>
<table border="1px" width="800px" height="730px">
<tr>
<td>
<table bgcolor="#333333" width="800px" height="30px"><tr><td></td></tr></table>
<table bgcolor="#666666" width="800px" height="150px"><tr><td></td></tr></table>
<table bgcolor="#333333" width="800px" height="50px"><tr><td>
</td></tr></table>
<table bgcolor="#999999" width="800px" height="500px"><tr>
<td bgcolor="#CCCCCC" width="120px"></td> <td bgcolor="#CCCCCC" width="380px"><td bgcolor="#CCCCCC" width="120px">
</tr></table></td>
</tr>
</table>
</center>
</body>
</html>
...I really need a site to put up these things. Anyway, here's a quick explanation of what to do. Copy and paste the above code, don't type it, because it could cause....errors. Paste it into a new document, or in Dreamweaver, "a new HTML file", then save it as <insert name of file here>.HTML and then... I dont know, experiment? See what you can learn from it? Learn stuff that I haven't implemented in this tutorial yet? Search Google to see what some of the code does?
1.0 Introduction
Hello, you’re probably wondering as we speak, “What is this HTML thing this guy talks about?”, or perhaps, “Why am I reading this in the first place?”. Well, the answers to your questions are simple, HTML is short for Hyper Text Markup Language and as for why you’re reading this, its because you want to learn Hyper Text Markup Language.
1.1 What Is HTML?
What is Hyper Text Markup Language you ask? It is the all-so-powerful predominant markup language for website pages. Or in short, it’s the stuff we type on the computer and host on servers like Go Daddy to produce websites.
Now you’re probably thinking, “Oh, website making, I can just go to Myspace or something to make myself a blog, much easier than learning HTML,”.
Side Note = Blogs are kind of like online diaries.
Relating to what you’re probably thinking, its because of blogging that people don’t know HTML. ‘They’ ‘blog’ because ‘they’ are too lazy to code their own websites with HTML. When in fact, HTML is much better than blogging. I’ll give you a moment to ponder, whats better, HTML or blogging?
I’m surprised you chose HTML, most people would take the easy way. You should be proud of yourself you didn’t fall to the power of the blogging side. Give yourself a pat on the back and lets start learning HTML!
A markup language is a set of annotations to text that describe how it is to be structured, laid out, or formatted. Markup languages have been in use for centuries, and in recent years have also been used in computer typesetting and word-processing systems.
~Quoted from Wikipedia.
Even if you know all the HTML tags, you STILL need to know how to make a HTML file. This can be done by doing the following.
File>Save As
Then type in the name of your file with .HTML at the end. For example:
Home.HTML
1.2 Programs You Can Code HTML With
In truth, HTML can be coded with a wide variety of programs. The best would be programs made to code HTML.
These programs cost money, but do not fear, there ARE alternatives. And they are… Microsoft Word and Notepad. Just about almost EVERY computer comes with these two so don’t worry. There are also other programs that can be used. I refuse to name them because I don't know them. So look them up on Google.
2.0 List Of HTML Tags
What are HTML tags? well, go to the View button on the top left of your screen and view the Page Source. You'll see lots of words between these two things=<>. Right, below are a list of basic HTML tags which will allow you to create a basic website. Each tag, except for a few special tags have to be closed. this is why there are two tags for each tag. One with a / in front of the < and one without the / in front of the <. The one WITH the / in front of the < is the closing tag. An example is: <body></body>.
Key
*=A name, a word, or text. And sometimes more tags.
**=Links or files.
***=website content.
****=Everything from the beginning to the end of your code.
*****=<tr></tr>,<td></td> tags go in here.
******=<td></td> tags go in here.
*******=website content.
<html>****</html>
<table>*****</table>
<tr>******</tr>
<td>*******</td>
<head></head>
<title></title>
<body>***</body>
<b>*</b>
<i>*</i>
<u>*</u>
<s>*</s>
<font>*</font>
<br />
<p>*</p>
<img scr="**" />
<a>*</a>
<hr />
2.0 B What They Do
The <html> tag is THE MOST important tag ever. Without it you cant make a website and so all coding you do without it will go to waste. Ha ha. Poor you. Anyway, its used only ONCE per file. Here’s an example of it being used with other tags.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Let me explain a bit more to you.
Everything ranging from CSS(Take this out of your mind, its not important right now) to your website title goes in between the <head> and </head> tags. Your website title goes between the <title> and </title> tags. Now, all your website content goes in between the body tags, this is because the body tags are the, well, body of your website. And ALL this goes in between the <html> and </html> tags.
Understand its significance now? Good, because this covers about 4 of our tags. Lets go on to the <b></b>, <u></u>, <s></s>, and <i></i> tags. Only one thing goes between these… TEXT!
<b></b>=Bold text
<i></i>=Italic text
<u></u>=Underlined text
<s></s>=Text with a slash across it
P.S. Notice how they're VERY similar to the forum BB code? If you're familiar with the forum codes, then you should have no trouble with these.
8 down, and about 9 to go! Next we’ll be exploring the TABLE.
<table></table>=<tr> and <td> tags go in here, along with their closing tags. These tags make tables. You know, like Microsoft Exel does.
<tr></tr>=These are the table rows, in other words…
Row 1
Row2
You can put multiple rows by putting multiple <tr></tr> tags.
<td></td>=These are the table data tags, I suggest keeping your content inside these tags. Two <td></td> tags in one table row gets you…
Column 1 Column 2
Website content goes into these.
P.S. Did you know you can make a table INSIDE a table?
11 down, about 6 to go. Next we'll be exploring the tags that make links, style fonts and add images to your website.
Well, so far you know basically how HTML works, but now lets add some CONTENT.
Lets start with text, you all are probably thinking, "Whats so hard about text? All I have to do is type...". Thats true, all you have to do is type. But then plain text just wont do sometimes! Which is why you need the incredible cleaning power of Caltex with Techron...Or you could just use the <font></font> tags. The font tags require attributes to work, such as the size attribute or the face attribute.
eg.
<font size="+1">I am Neo, my people call me the one.</font>
There is also another tag related with text, the paragraph tag. A.K.A. the <p></p> tags.
"Specifies the alignment of the text within the paragraph"
~Quoted from w3schools.
Now that we've got that covered, its time to learn the tag which adds images to your website. Its pretty simple really, all you do is type the following code:
<img src="Insert Image Here.File Type" />
Side note=The <img> tag does not require a </img> tag.
Almost done, lets take a look at the final 3 tags.
<a></a>
<br />
<hr />
I'm going to make this short and simple, the <br /> tag is used to insert blank lines, or more accurately, the empty area between the two sentences below:
I LIKE PIE.
<empty area>
I LIKE PIE.
It is applied as demonstrated below:
Something here<br />I LIKE PIE
When this is done, the text "I LIKE PIE" will go down to the next line.
When done as below, it will make two blank lines, whereas having only one <br /> tag will give you only one blank line.
Something here
<br />
<br />
I LIKE PIE
...Ok, so maybe that wasn't short and simple, but the following tag will be, as it is the <hr /> tag. Basically, it does what the [hr] code does in BB code.
Now, the final tag won't be as simple, but it is simple.
<a></a>
These tags are used to make links, however, a certain attribute must be added before it is actually made into a link or you can actually click it. Just using the <a> tag wont make a link.
And that concludes topic 2.0 B, I hope you come and visit again, and remember, if you don't understand anything, just ask!
3.1 Introduction To Cascading Style Sheets(CSS)
Now that you know a bit about HTML(I know, there are a few missing topics), lets explore CSS, mainly for the fact that I'm too lazy to type section 2.1 A, B, C, D and E.
quote:
A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it's style. As always you use your (X)HTML file to arrange the content, but all of the presentation (fonts, colors, background, borders, text formatting, link effects & so on...) are accomplished within a CSS.
At this point you have some choices of how to use the CSS, either internally or extenally.
Quoted from a website because I'm too lazy to explain it myself. Lets look at the internal method, this way you are simply placing the CSS code within the <head></head> tags of each HTML file you want to style with the CSS. The format for this is shown in the example below.
<html>
<head>
<title></title>
<style type="text/css">
CSS Goes Here
</style>
</head>
<body>
</body>
</html>
See, simple right? Now lets look at the external method, an external CSS file can be created with any text or HTML editor such as "Notepad" or "Dreamweaver". A CSS file contains no HTML, only CSS. You simply save it with the .CSS file extension. You can link to the file externally by placing one of the following links in the head section of every HTML file you want to style with the CSS file.
<link rel="stylesheet" type="text/css" href="Path To stylesheet.css" />
<style type="text/css">@import url(Path To stylesheet.css)</style>
The external method is better because:
- Easier Maintenance
- Reduced File Size
- Reduced Bandwidth
- Improved Flexibility
And that concludes section 3.1 A, I know it isn't much, but seriously, NO COMMENT.
Credits to Cool Dragonz for listing out the HTML tags for me in 2.0
As you can see, my HTML 4 Dummies tutorial is still incomplete, so look out for updates!
|
|
|
|
