HTML Class 1

HTML Class: Day 1: Beginning HTML
Hello, and welcome to HTML Class! This lesson will be an introduction to HTML, and learning some basic coding, along with creating a miniature web page. This will also be a good reference to look at if you forget something. I'm going to start off by giving you a link to a site that could help you, in addition to these "classes". Click here to visit Lissa Explains it All. You'll get to the main page. Click on HTML Help, at the top. That will automatically take you to the basics page. You can either read that, or skip it. I find it a bit boring, but the information can be useful. To get to the HTML help section, click on HTML, towards the top. From there, it should be pretty much self-explanatory. Before you finish this class, though, you shouldn't really read much there, except the Basics section, if you wish to. You could if you wanted to, but I think you might understand it more after this class.

Now it's time to begin going over some basics. You will probably already know some of this, but it should be a good review. Before your site can be viewed by anyone, you have to have some sort of a webpage. You could buy a domain, probably not the best idea just yet, or you could use a free host. I would recommend a free host. Note that you don't need the host yet, unless you want to work on it through their editor. I would recommend just using Notepad or WordPad, and I'll be explaining how you save the files in those sorts of programs. If you are going to start out with some sort of a text program, I wouldn't recommend Word. First of all, all of the green and red lines below the HTML, and Word seems to think HTML is just spelling and grammar mistakes, get really annoying. Secondly, it might tempt you to use the fonts and such things, and just type with them, when you really need to use separate coding. Third, and perhaps most important, is that you would have to disable the curly quotes, and I'm not sure how to do that. The program I'd recommend would be Notepad.

For later, I'll give you some good links to free hosts: Bravenet Tripod . I wouldn't recommend Free Webs, as it isn't the best host to use HTML with, but you could use it if you really wanted to. That should pretty much cover the introduction, so now it's time to begin the fun part: actually learning HTML.
First I'll explain how to set up this little test web page. Open up Notepad, and save this somewhere. Now, this takes a few instructions. First, go to "file", and then "save as". You should know that much, but I mentioned it just in case. In the "save as type" drop down box, choose "all files", for file name, save it as HtmlTestPage.html, you can change the "HtmlTestPage" portion to whatever you want, but make sure to include ".html" at the end, or you won't be able to view the page you create properly in a browser.

Now, I'm going to explain the basic layout of an HTML document, just the very basics, we're not even at underlining and italicizing yet. <html> <head> <title>Basic Layout of an HTML Document</title> </head> <body> Your main coding and text will go here. This is the body of your site. </body> </html>

Now, that takes a bit more explaining. First of all, tags. A tag is the code, the stuff that has the little < and > symbols, and things inside them. Those symbols are called brackets, by the way. Those tags are what HTML is made of. There is usually an opening tag, and a closing tag (those might not be the right terms, but it's similar). The opening tag starts it, tells the page to start doing what the code commands. The closing tag tells the page to stop doing what it commanded in the opening tag. The closing tag always is formatted like this: </TAG>. It starts with a bracket, a slash (which tells the page that it's a closing tag), the actual command, and another bracket. The opening tag is formatted the same way, only without the slash that tells the page that it's a closing tag.

Now on to the specific tags I used. <html> tells the computer that you'll be using HTML code, pretty self-explanatory. <head> tells it to start the heading coding. <title> tells it that you'll be telling it what to use for the title. </title> tells it that you will be ending the title. </head> tells it that you are no longer doing the heading coding. <body> tells it that you will be editing the main part of the page, the body of the page. </body> tells it that it should stop putting the information in the body of the page, and </html> tells it that you are done with the page. This is how you will always be formatting your page.

Now for the test document. Start the basic layout; it should look pretty much like this: <html> <head> <title>My First HTML Coded Webpage</title> </head> <body> This is my first page with hand-coded HTML! It'll probably never be on the web, but who cares? </body> </html>

Now save your file. Open it up. You should see it in a browser. It should look something like this:

Well, similar. It should be bigger; I just had to make the screenshot smaller so it wouldn't take up as much space. The title is what is shown way at the top, and what you put in the body section should be on the main part of the page. Now I'm going to teach you how to do some basic text formatting.
TEXT: Use that for bolded text. TEXT: Italicized text. TEXT: Underlined text. Pretty much self-explanatory, but you may be wondering if you could make, say, bolded and italicized text. The answer to that question is yes. I'll give you a couple of examples. This is bold and italicized text. Notice how I kept the and both on the very outsides, and the and both right inside them. You should always make sure not to do something like this: This is badly formatted text. While it may or may not work, you really shouldn't do it, as it makes it messy, confusing, and you're just not supposed to do it. Now to work on that test file.

In the body section, make some text bolded, some italicized, some underlined, and some with a (some) combination(s) of the three. Also, another code to use as you wish is the break code. It is the equivalent of hitting enter in, say, word. You don't end this, as it's not needed until you start using XHTML. You just type . Open it up, and make sure it works.

Now for your next assignment, as a preparation for the next lesson, you'll be practicing some coding, and brainstorming some ideas for your web page. Think of some ideas as to what your site will be about, and what you want it to be about, as well as some possible parts of the site. Also, review the coding you have learned, and create another little practice site, it can be however you want it to, just make sure to include the following: 1 piece of italicized text 1 piece of bolded text 1 piece of underlined text 1 piece of text that has at least 1 combination with 2 or more types of text (italicized, bolded, and/or underlined) At least one break All of the basic layout parts filled out (must have a title, some text in the body section, and have the basic layout that I showed you). While you don't have to do it, I would recommend doing the assignment, because it should help you review, and prepare you for the next class. Have fun!