I'm sure everyone has been looking forward to the next installment of Web Programming. Well, here it is. In this section we will be learning basic HTML syntax and formatting. Remember: This tutorial is just an introduction to Web Programming. After reading, if you want to continue with web programming, you might want to go to your local bookstore and pick up some books on HTML. If you haven't read the first part, you can find Web Programming Part 1, here. Read More...
Creating Your File
The first thing you will need to do before anything is create a file to save your work in. You are going to need to open up notepad to do this. If you don't remember how to do this, check out my first tutorial. Once you have notepad opened, click on File and then Save As. Browse for a location (I suggest making a file for this tutorial) and give it a memorable name, such as test.html or first.html. Please note you will need to change the Save Type As: to All Files so you can save it as an HTML document. Some people ask: What is the difference between the html and htm extension and which one should I use? The answer to your question is there is absolutely no difference between the two types, I just prefer, html.
Basic HTML Syntax
In the last tutorial I told you HTML was similar to that bit of code I provided. The first part of that code is the HTML tags. These tags are the beginning and end markers of HTML and must be included for the browser to be able to read the file. All of your code will be between these two tags. The syntax of the HTML tag is: <HTML>
</HTML>
Notice, each tag begins with the tag name enclosed in the brackets and then ends in a slash and the tag name enclosed in brackets. You can copy the code above into the new html document you created or you can get the extra practice by hand typing it.
The next tag is the head tag. Between the opening and closing head tag you can put css, JavaScript, and most importantly, the HTML page's title. In this tutorial we will only discuss the title of the HTML document. The syntax is:
<HEAD>
<TITLE>This is the Title</TITLE>
</HEAD> The title tag is the tag that contains the title of the document. The title is the text that appears at the top of your browser next to the Close, Maximize, and Minimize buttons. Please note: I am putting all the tag's names in caps, but you don't have to. I find it a lot easier if you do this so you distinguish between actual text and code.
The second most important tag is the body tag. The body tag contains all the content that is displayed in the browser's window. You can probably guess what the syntax is for this tag, but I'll show you.
<BODY>
</BODY>You can type any text within the body tags and it will appear in the browser. There is much more to what you can include in the body tag, but we will discuss that after the recap.
So far, we have discussed the basic tags involved in the creation of HTML. You have written HTML code that can viewed in your browser. Right now, I would suggest saving (File>Save). You can lose a lot of typing in seconds if you don't take the time to save. You should have the following code typed in notepad:
<HTML>
<HEAD>
<TITLE>This is the Title</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>Viewing Your Work
That's great you say, but how do I view all my hard work? It's quite simple. Simply navigate to your file, right click, click open with, and select your browser. If you browser isn't listed you may have to click the browse button, but it should be there. You browser will open and display your file. If you copied the text exactly from above, you shouldn't see anything in the body, but the title should be displayed at the top.
Format Your Text
You are probably thinking: Typing text is fun, but how do I make it look fancy like all those cool websites. The answer is more tags. There are tags for attributes such as bold, italics, underline. You can also use paragraph tags for displaying lots of information or font tags to change the font. The first we will cover is the attributes. One more thing before continuing, the <br /> tag is used to create a line break (Same as hitting the enter key). Here is a demo of attributes:
<B>This Text is Bold</B><br />
<STRONG>This Text is Also Bold</STRONG><br />
<I>This is Italics</I><br />
<EM>This is Also Italics</EM><br />
<U>Underline!</U>The output of the above code would be:
This Text is Bold
This Text is Also Bold
This is Italics
This is Also Italics
Underline!Another important tag is the paragraph tag. This tag is used to format text into paragraphs. It acts as putting two line breaks after each block of text, but I recommend it over the two line breaks. To format you text into paragraphs use this syntax:
<P>This is a demo of a paragraph in HTML. The paragraph tag is used to format the text so it is easier to read and simpler to code</P>
<P>Here is another paragraph. Notice the space between the two.</P>The output of the following code would be:
This is a demo of a paragraph in HTML. The paragraph tag is used to format the text so it is easier to read and simpler to code.
Here is another paragraph. Notice the space between the two.The paragraph tag adds something new to HTML. Elements. Elements are specifications that can be used to personalize the appearance of certain tags. The paragraph tag is one of the tags that can have elements. One of the basic elements you can add to the paragraph tag is the align element. It can contain three values: left (Default), center, or right. This element can be applied to almost any tag (Aside from any of the tags discussed before the paragraph tag).
Your Assignment
Write a few paragraphs about what you have learned and use the tags and elements to demo each feature. You don't have to tell about the syntax, just explain each feature and give a demo. You can experiment with the tags and see what you get. Doesn't this look interesting??? You can try just about anything.
Now that we have completed the second installment of the Web Programming Series, you can take a break, high-five you-self (I don't know how), or pat your-self on the back because you are well on you way to learning the basics of HTML. If you want to get better the best thing you can do is practice, practice practice! It's that simple. Check every day for the next installment of Web Programming: Web Programming Part 3!!!!!!!
0 Responses to "Tutorial: Web Programming Part 2"
Post a Comment