Home
1
Intro to HTML - Part 1 Tue Sep 07, 2010 8:44 am
Mikey
Registered Member
Posts : 12
Points : 0
Age : 30
Location : USA
Browser :
~~* Guide created by Mikey *~~
Hey guys, I'm going to try and teach you how to build basic webpages in HTML! I've seen several guides on this forum trying to teach HTML, but the main problem with them is either they are hard to understand/follow, and/or they don't explain WHY we put things where we put them. One fundamental concept of learning any programming/scripting language is understanding WHY things go where they go! So my main goal here is to give a bit more of a detailed guide, focusing more on understanding why we put things where we put them in HTML and what these things do. So now let's begin! (Note: Do NOT include quotation marks [""] in your HTML pages unless I expressly say so in the instructions, else it won't work right!!!)
Guide
1. To start, let's open Notepad on our computer (make sure it's a blank new .txt file)
2. Now to actually start making the website itself. Every single HTML (Hyper Text Markup Language) page starts with the "<html>" tag, and ends with the "</html>" tag. Most tags in HTML have a closing tag (All that means is that you add a "/" before the tag! Example: The "<body>" tag is closed with "</body>".) We insert the <html></html> tags around ANYTHING we want to be controlled by HTML in our website. Typing <html> to open tells the internet browser that this page is written in HTML and that it should read it that way. So, here's an example of what your code should like like so far:
- Code:
<html>
</html>
3. Ok, now if you save this file as "webpage.html" (NOT ".txt"! Make sure it is saved as either ".html" or ".htm" or IT WILL NOT WORK!!!), and run it, a browser window should pop up, but nothing should be displayed but a blank page. This is because we haven't put anything into our website to be displayed yet. Now that we have told the browser that we're going to be coding in HTML, we can get to work on the website skeleton. These are vital tags that MUST be included into your page to make it function correctly. (In most cases, it can vary, but don't change this much until you're very familiar with HTML and know what you're doing!!!) This is a basic HTML website skeleton. Don't worry! I'll explain what all the tags mean after this
.- Code:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Note: You don't need to space everything out. HTML doesn't pick up spaces unless you're entering actual text to be shown, which I will explain in detail later. Spacing your page like this just helps you code easier and read it easier when you want to edit it!
4. Woah!!! What did all that crap mean!? Well to start, the "<head>" tag should come pretty much immediately after the "<html>" tag. Inside the "<head>" tag you will mostly be entering information for search engines, font families, website info, copyright info, comments on your code, etc.. The "<title>" tag is our first tag that will actually display text! Inside the title tag we put the title of our webpage that we want to show up at the top of the browser and on tabs in our browser (Example: If you start a new topic on this forum, the page title says "Start New Topic", that is entered inside the "<title>" tag!) Now for the body tag. Inside the "<body>" tag you enter all the information that makes up the meat of your webpage. EVERYTHING except for the title goes here. Everything that styles your site (CSS excluded, people new to HTML ignore this :azn:), all the text, all the links, EVERYTHING goes here!!! Now for example, if we entered this into our html file:
- Code:
<html>
<head>
<title>MyFirstWebsite</title>
</head>
<body>
Insert some text here!!! 1
Insert some text here!!! 2
Insert some text here!!! 3
</body>
</html>
Then you should get a page that looks something like this if you did everything correctly (sorry for the big images):
Well that's it for tutorial #1! I'll make some more here in a bit with more detail on actually designing your website to suit your needs! We'll be looking into font and background colors, paragraphs, bolding, italicizing, and underlining text, and also adding images to our page!
If you need any clarification on something, have recommendations, ideas, or don't understand something, PLEASE tell me! Shoot me a PM here on the forums or post in this thread if you like. Constructive criticism ONLY please! I don't need any flaming going on here! And as always, compliments are always nice
.Link to Tutorial #2 will be edited and posted here once it's up! (If you guys are actually interested...)
You may find this guide posted on other forums under a different name but I assure you it's mine, feel free to PM the poster on any forum you find it on and I'll be happy to prove that it's actually me. DON'T STEAL THIS WITHOUT GIVING ME CREDIT AND A LINK!!!
