Web Development Tutorials | Tut One
Now, a big thing I will teach throughout is not just how to write the code, but how to write the code well. A very beginner may not see the difference, but you may compare it to the difference between knowing how to write in the English language, and being a good essay writer. With programming, there comes a lot of tradition, and common practice, and it is frowned upon to ignore such things, so I will also try to cover as many of the traditions and best practices as I can. One of the most well-known traditions is the 'Hello World' script. This is traditionally the first piece of code any programmer will write in a new language, and the roots of this tradition go back to 1972. Sticking to tradition, we will write our first HTML page, and it will say "Hello World". Shall we.
Now, to create our first page, we have to first create an HTML file. Some of you may already know how to do this, or can at least guess, but for those who don't, let me first explain. I do assume that you will be using Windows for this tutorial, since that is what I use, and I don't know how to create the file using Mac or Linux. For Windows, however, it's pretty simple. To make an HTML file on Windows, you may simply open up Notepad, and go to the "Save" option. You should see only two options: File Name, and Save as Type. On the 'Save as type' option, select "All Files". Under file name, I'm going to put "Hello-World.html", you may give it whatever name you'd like, but make sure that the '.html' part is at the end, if it isn't, it won't work. Once you've made sure that you've got your settings right, hit save. You've just created your first HTML file, now it's time to put something in it! ( To simplify this tutorial as much as possible, we will be ignoring a few best practices involving the basic structure of an HTML file to avoid confusion. ) Now, the first thing we need to put in our HTML file is what's called the HTML tag.
HTML TAG: The first tag or any HTML document, which declares that all following text is HTML code.
It looks like this: <html>, and it goes at the very beginning of the document. With HTML, though, the tag is opened when you first declare it, but in most cases, it must also be closed. To close a tag, you place a </ at the beginning of the tag, in place of the <. So a full HTML tag, that has been properly opened and closed would look like this:
Get it? I know it seems like a lot, but it's simple! You'll get it :)
With the HTML tags in place, you'll then place a body tag in the document, which looks like this
so now your document should look like this:
If your document doesn't look like this, correct it, because getting the structure exactly like I have mine is essential. Now, you've got the most basic exoskeleton laid out, let's add some content shall we? We will now add what's called a heading tag. These are one of the more interesting tags, because there are six of them that all have the same name. The one we will use today is the <h1></h1> Heading Tag. It's called a heading tag because any text placed inside the tag (between the opening and closing tags) will be large print and will be in what is called block display, which means that this text exists on it's own line. Today, for traditions sake, the text that will occupy this this tag will be the words Hello World! So pop that inside the heading tag, and you're good to go. The document should look like this at this point:
Again, if yours doesn't look like mine, you've made a mistake somewhere. I recommend going back and re-reading the tutorial, since you may very well have missed something or misread. Make sure to correct any problems, and then hit "save". Once saved, a nice double-click should cause the file to open up in your web-browser, and you should see a white page. Blank, save for the "Hello World!" in large black print at the top of the page. This concludes this tutorial, and we'll learn some more complex tags in the next lesson, and use that to modify the Hello World Script.
kaledo-art
andulkaphoto
annaxmalina
origamiaround
theartofmadeline
blakekathryn
jbbartram-illu
