HTML Basics

A Techtorial in HTML

LEARN HTML CODE

Part 1 – An Explination of Basic Tags

Are you wondering about the meaning of the symbols you used? Open the Web page you created, and then left-click and select View Source to see your HTML tags. This can be done to any webpage on the internet to view its source code. Below are explanations of each of the tags

<html>indicates a Web page.
<head> indicates the beginning of the page header. Page loading info and title info is placed in the header.
<title>indicates the beginning of the page’s title. (Notice that the words “My First Page” appear in the blue bar at the top of the Web page.)
<body>indicates the beginning of the Web page. Any words or numbers typed after this tag appear on the Web page itself.
<bgcolor=”yellow”> indicates that the background color of the page will be yellow. (Try typing another color name in this position!)
Tags that have a slash mark / indicate the end of that HTML coding. (So, </title> indicates the end of the page’s title.)
All typing should happen after the <body> tag and before the </body> tag

Part 2 – CREATE A SIMPLE PAGE

To create your own “Five Minute Web Page,” follow the steps below:

Go to Start>Programs>Accessories>Notepad. Be sure you are working in Notepad, not in Microsoft Word or another word processing program.
Type <html>and then hit ENTER.
Type <head>and then hit ENTER.
Type <title>My First Page</title>and then hit ENTER.
Type </head>and then hit ENTER.
Type <body bgcolor=”yellow”>and then hit ENTER
Type This is my first page in HTML. and then hit ENTER.
Type </body>and then hit ENTER.
Type </html>and then hit ENTER.
Go to File>Save As, and type First.html in the box next to “File name”. Choose All Files in the box next to Save as type. (NOTE: Be sure to include the .html after the file name First. This will identify this file as a web page rather than just a text file.
Close or minimize the Notepad window.

You can now view the page you have created.

Go to the location on your computer you saved the file to.
Locate the First.html file you just saved
Double Click the Icon
This should open the file in Internet Explorer (or your default web browser)

You have created your first Web page!

Part 3 – MORE FUN STUFF

Now that you know the basics of HTML coding, you can add even more formatting to your Web page. Try using:

Other color codes for the <body bgcolor=”yellow”> tag can be found here Color Codes
<b> and </b>to begin and end bolded text.
<i> and </i>to begin and end italic text.
<center> and </center> to begin and end centered text.
<marquee> and </marquee>to begin and end scrolling text. (This only works in Internet Explorer.)
<br>to add a line break.
<p> and </p>to begin and end a paragraph.
<h3>larger text
<h4>even larger text
<font color=”blue”>will make the text blue
<font face=”Arial”>will make the text font “Arial” instead of “Times New Roman”
<img src=”filename.jpg”>to insert a picture (picture must be saved in the same folder as your webpage)
<a href=”http://www.siteyouwanttolinkto”>linked text</a> to add a hyperlink to another page
More code tags can be found here: http://www.htmlcodetutorial.com/

Part 4 – Beginning JavaScript

After you have become confortable with the two main sections of a webpage (header and body). You can start inserting pre-written java script into these sections to create more dynamic effects on your web page. Depending on the script, you may only be able to insert one or two into a webpage before they start conflicting with eachother. Try these simple ones to start out with..

CREATE THIS JAVASCRIPT BASED COUNTDOWN TIMER WITH THE SCRIPT BELOW

DIRCTIONS: Copy the following text into the BODY section of your webpage:

<script language=”JavaScript”>
TargetDate = “12/31/2020 5:00 AM”;
BackColor = “palegreen”;
ForeColor = “navy”;
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = “%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.”;
FinishMessage = “It is finally here!”;
</script>
<script language=”JavaScript” src=”http://scripts.hashemian.com/js/countdown.js”></script>