Anatomy of a Web Page Tutorial number one section 1|
Anatomy of a Web Page Tutorial number one section 1 |
|
INTRODUCTION TO HTML This tutorial assumes basic computer skills /with no prior HTML skills.
Before we start learning how to use the basic HTML tags,we will briefly cover a few topics that might help us to understand just what HTML code is and how we can use it to create a Web page. These topics will be covered in more detail in a second tutorial called, Anotomy of a Web Site.The progress of this second tutorial will be posted under the Anouncment section,on the HOME page. When a new topic or word is introduced for the first time, it will appear in BOLD type. Italics will be used for topics that will be covered in the second tutorial called “Anatomy of a Web Site”. 
The Internet is based upon a Language called HTML. Don't lose any sleep over this yet! It stands for Hyper Text Markup Language. All you need to know for now is that this means that we use what are called TAGS to format text and control the layout of the objects in our html document. Each document contains two main parts. The head section, which is where we place information like the pages title, meta tags, description, key words, scripts, styles, and more. The body is where we will put everything that will be displayed on the screen. These so called tags, are the instructions given to the browser, and are always placed between a set of smaller than and larger than signs like this < tag >. All of our html documents file names must end in the extension .html. Each tag should have an opening and a closing tag. The body opening tag would look like this < body >. For its closing tag you would simply add a forward slash before the tags name < /body >. Note that, html tags are not case sensitive. For example:< body >, < Body >, and < BODY > all mean the same thing and are interpreted as being the same. The code generator shown below, will be used to enter the HTML tags as you learn them. After entering your code, click the "view my page" button and your Web page will open in a seperate window. When you are done viewing the page click the X in it's upper right hand corner to close it and continue with the lesson. The gray box's will call your attention to HELPFUL TIPS! Clicking on the link inside one of these gray box's will open a new window containing helpful information pertaining to the current subject. Click on the link inside the gray box above. Each section will have a menu box like the one below. The top drop down box, lists each lesson for that section and the lesson appears bellow it. All tags will be shown in UPPER CASE letters and will begin just AFTER the colon following the word CODE: Use the Code Generator below to progress through each lesson.You should practice typing the code into the code generator.If you prefer to copy and paste the code,make sure that each opening and closing tag is placed in the proper order.
|