Lam3r Posted August 17, 2009 Author Share Posted August 17, 2009 ~~* Guide created by Lam3r *~~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!!!)Guide1\. 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 "" tag, and ends with the "" tag. Most tags in HTML have a closing tag (All that means is that you add a "/" before the tag! Example: The "" tag is closed with "".) We insert the tags around ANYTHING we want to be controlled by HTML in our website. Typing 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: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 ;)._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 **""** tag should come pretty much immediately after the "" tag. Inside the "" tag you will mostly be entering information for search engines, font families, website info, copyright info, comments on your code, etc.. The **""</strong> 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 <strong>"<body>"</strong> 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:<br /><pre> <html> <head> <title>MyFirstWebsite Insert some text here!!! 1 Insert some text here!!! 2 Insert some text here!!! 3Then 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…)** Link to comment Share on other sites More sharing options...
ifunnieswebmaster Posted August 17, 2009 Share Posted August 17, 2009 wat is msyql? Link to comment Share on other sites More sharing options...
Lam3r Posted August 17, 2009 Author Share Posted August 17, 2009 K thanks? Did i not explain well enough…or wtf? Lmao... Link to comment Share on other sites More sharing options...
ifunnieswebmaster Posted August 17, 2009 Share Posted August 17, 2009 i thought sum1 needed help with html, i'm sorry but that is a good tut, only thing is, notepad wont let me save as html….. or run it Link to comment Share on other sites More sharing options...
Lam3r Posted August 17, 2009 Author Share Posted August 17, 2009 hmm well you need to click: File > Save As. In there, change the file name to "BlahBlah.html" (Make sure it's .html and NOT .txt!!!) After that, right below the filename, Save As Type: All Files. After that figure out where you want to save it, click Save, and you're done! Link to comment Share on other sites More sharing options...
Antidote Posted August 17, 2009 Share Posted August 17, 2009 Just type the .html into the filename when you save it. It won't let you save it as a certain filetype. Link to comment Share on other sites More sharing options...
Lam3r Posted August 22, 2009 Author Share Posted August 22, 2009 Well i'll be making more tuts…but only if i actually get interest in them... Link to comment Share on other sites More sharing options...
dw408 Posted October 25, 2009 Share Posted October 25, 2009 Guys, let me notify you, they did the party where you put in text wrong, here is how it would be:```Insert text here!```There ;D Link to comment Share on other sites More sharing options...
Lam3r Posted October 26, 2009 Author Share Posted October 26, 2009 @[SB:> dw408 link=topic=50349.msg564200#msg564200 date=1256500621]> Guys, let me notify you, they did the party where you put in text wrong, here is how it would be:> > ```> > Insert text here!> > ```> There ;DErmm no the tag isn't necessary, it's only really if you want to group or align text in paragraphs or if you're planning on editing blocks of text with CSS. Link to comment Share on other sites More sharing options...
dw408 Posted October 28, 2009 Share Posted October 28, 2009 @Lam3r:> Ermm no the tag isn't necessary, it's only really if you want to group or align text in paragraphs or if you're planning on editing blocks of text with CSS.Well, you can do it my way or your way, your way is if you only want 1 line of text of my may which is paragraphs. Link to comment Share on other sites More sharing options...
Lam3r Posted October 28, 2009 Author Share Posted October 28, 2009 yeah… i'll release part2 of my guide, just haven't had any requests or anything yet... Link to comment Share on other sites More sharing options...
Drummerpete Posted October 28, 2009 Share Posted October 28, 2009 Make one that includes;Background images; position and whatnot.DIV tags, and CSS stylesheets.keep it simple though.. Link to comment Share on other sites More sharing options...
Guest Posted October 28, 2009 Share Posted October 28, 2009 @Pete!:> Make one that includes;> Background images; position and whatnot.> DIV tags, and CSS stylesheets.> keep it simple though..real good, but take that into consideration.Sincerely,Empress Link to comment Share on other sites More sharing options...
Lam3r Posted October 28, 2009 Author Share Posted October 28, 2009 Remember this is pt. 1, the VERY beginning. I didn't start learning CSS when i just started learning HTML…but yes i will start including CSS as i see it's fit in the tutorials :) Link to comment Share on other sites More sharing options...
Guest Posted October 28, 2009 Share Posted October 28, 2009 sweet. cant wait for more.Sincerely,Empress Link to comment Share on other sites More sharing options...
Drummerpete Posted October 29, 2009 Share Posted October 29, 2009 But learning HTML without CSS nowadays is almost useless. Link to comment Share on other sites More sharing options...
Lam3r Posted October 29, 2009 Author Share Posted October 29, 2009 Not true necessarily, but yes, HTML and CSS usually go hand in hand. Link to comment Share on other sites More sharing options...
Guest Posted October 30, 2009 Share Posted October 30, 2009 nice. id like more pleaseSincerely,Empress Link to comment Share on other sites More sharing options...
SukiSon Posted February 11, 2010 Share Posted February 11, 2010 Um, how exactly do you get the website online -.- Link to comment Share on other sites More sharing options...
Lam3r Posted February 11, 2010 Author Share Posted February 11, 2010 @SukiSon:> Um, how exactly do you get the website online -.-You will need to find a [webhost](http://www.free-hosts.com) and use an FTP (File Transfer Protocol) program to upload your files. ~ Lam3r Link to comment Share on other sites More sharing options...
SukiSon Posted February 11, 2010 Share Posted February 11, 2010 Thanks, but my comp is already jammed with programs… I think Ill stick with freewebs :P(yes I know you must pay for a good domain name and that it is better to make your own if you an expert, but like I said my comp is jammed and I only know basic html like links, picture links, background images, ect. and I know absolutly no css :P) Link to comment Share on other sites More sharing options...
Lam3r Posted February 11, 2010 Author Share Posted February 11, 2010 @SukiSon:> Thanks, but my comp is already jammed with programs… I think Ill stick with freewebs :P> > (yes I know you must pay for a good domain name and that it is better to make your own if you an expert, but like I said my comp is jammed and I only know basic html like links, picture links, background images, ect. and I know absolutly no css :P)Thousands of great tutorials on the net for you if you just look for them if ya want :DI'll add part 2 of this tutorial eventually…when I get to it xD Link to comment Share on other sites More sharing options...
saadhamza Posted February 13, 2010 Share Posted February 13, 2010 nice tut. cant wait for part 2 Link to comment Share on other sites More sharing options...
HappyBoy Posted February 13, 2010 Share Posted February 13, 2010 what you can also do is put it in a MySQL map and than it'll be uploaded to ur IP.Than u have to go to http://www.dot.tk/ and let ur IP become a website and tadaaaaaaaaa :) a free one ;) Link to comment Share on other sites More sharing options...
Lam3r Posted February 16, 2010 Author Share Posted February 16, 2010 @RavenStylez:> what you can also do is put it in a MySQL map and than it'll be uploaded to ur IP.**What?**@RavenStylez:> Than u have to go to http://www.dot.tk/ and let ur IP become a website and tadaaaaaaaaa :) a free one ;)Or just get a free webhost and then go to dot.tk and use the free hosts' IP. Much easier… Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now