HTML stands for hypertext markup language. It was written by Tim Berners-Lee while at CERN, the European Laboratory for Partical Physics in Geneva.
It is defined as SGML DTD. SGML=Standard Generalized Markup Language. A standard for describing markup languages. DTD=Document Type Defination - meaning the formal specification of a markup language using SGML.
In simplier English this translates into "instructions to a web browser on how to display text, sound and graphics on a user's monitor." You can think of it as a computer based set of printer commands, not unlike the marks copy editors put on manuscripts just before they go to the printer. HTML does basicly the same thing.
All HTML Documents or pages start with <HTML> and end with </HTML>
You will note that the HTML tag is contained within < and >. This is true of all HTML tags.
Every HTML page, at a minimum has the following tags.
Let's start constructing a basic web page.
<HTML> We've opened the page</HTML> will close it
<TITLE> My Web Page</TITLE> This gives it the name your browser will display
<META NAME="GENERATOR" CONTENT="Arachnophilia 3.9">
<META NAME="FORMATTER" CONTENT="Arachnophilia 3.9">
This two tags will be generated automaticly by most HTML editors. All the lessons in this class are being written with Arachnophilia. Other meta tags should be added to help search engines classify your document. Note that the meta tags don't end with </META> like other tags do.
<meta name="description" content="HTML tutorial basic tags"> This tag is a description of this page. It has two attributes, name and content.
<meta name="keywords" content="Worldcrafters Guild,school of writing,HTML,basic tags,formatting">This tag contains keywords that people are likely to plug into a search engine to find you.
It is possible to put together a web page using just the tags above. however if you want it ot look nice, you need to be familiar with some basic text formatting tags.
Let's start with <P>Write your text here</P> Browsers don't read the carriage returns and extra blank spaces in the text you type in. You have to tell it what to do. This tag will print your text as written, wrapping it to fit the browser's display window. You also get a short blank space at the end. This tag also has 3 useful attributes. They are ALIGN=LEFT ALIGN=RIGHT AND ALIGN=CENTER, to left justify, right justify or center your text.
Indenting. If you want to indent your sentence you need to tell the browser by using a for each space needed. for example,
" My sentance starts here" will display like this.
My Sentence Starts here.
Another useful tag is <BR>Which produces a break in the text a bit smaller than the paragraph <P>tag.
To draw a horizontal line across the screen use the <HR SIZE=4 WIDTH="50%"> tag. Note this tag doesn't have a </hr>. A slight inconsistancy in the HTML language. The size attribute controls the thickness of the line while the width tag controls how long it is. This example displays as
There are two useful tags for displaying text. They are <FONT>, and <Hx>
The H or header tag comes in 6 sizes H1 through H6 with H1 being the largest. You can use the align=left right or center just as we did with the <P> tag. As an example<H1 align=center >will display as:
The other useful, fun to use tag is <FONT>your text goes in here</FONT> This tag has two attributes you should be familiar with. SIZE=1 through 7, with one being the smallest. The other attribute is color=#c86400, this being the hexidecimal value of the color you want your font to be.
<FONT SIZE=3 COLOR=#d900d9> Font Example </FONT> will display as: Font Example
create a webpage using all the html tags listed below.
<HTML>,<HEAD>,<TITLE>,<META>,<BODY>,<P>,<BR>,<HR>,<H1>, and<FONT>
Then email it to HTML by the deadline listed in the course outline.
Every page on the World Wide Web has an address called URL or Uniform Resource Locator.
The address for the top page for this course is http://www.simegen.com/school/business/webbuilder/html101/index.html.
Let's break that down. The http stands for hypertext transport protocol. This tells your browser that it's looking for a web page. www.simegen.com is the internet address of our webserver. /school/business/webbuilder/html101 is the directory path on the server that leads to where the files for the course are stored. index.html of course is the file name for the top page for this course.
The full URL is known as an absolute URL. It can be used to locate any page on the web from anywhere else on the web. To code this we would type
which would display as Basic HTML. Click on that and see what happens. NOTE: Ignore the target command for now. It's related to frames which will be covered in a later course
a relative URL would direct the brower to a file or directory by it's positon relative to the current document being displayed. for example index.html would tell your browser it's looking for a file in the same directory. We would code that one like this
To make it display as Basic HTML. Click on that and see what happens.
This can be very useful in organizing a lot of html pages and images. for an example I have the graphics for this course stored in a subdirectory with the path /school/business/webbuilder/html101/images. To place one on my page at this point I would type
Which would display as
don't worry now about the image tag itself. We will cover that in another lesson. Just note that I didn't need to use the full URL to display the image.
Let's now consider ANCHORS
A URL will land you at the top of the page indicated. Suppose however you want to direct your user to a specific section of a long document. We would do that by using an anchor.
For fun I've stolen a page from Householding Chanel a Sime~Gen fan site I maintain. This pageHCI1 is full of anchors.
Since that page contaions mostly questions about the Sime~Gen universe created by Jacqueline Lichtenburg, let's assume I wanted to direct your attention to a particular answer, I would code thusly
which would display as
Click on either one of those links and you will find yourself somewhere near the middle of the target page.
We can also do this from within a document. As an example I have made the title of this page into an anchor. We code that thusly
To send you back to this anchor I would code thusly: Which would display as Return to top of page Click on that and see what happens. Take a few minutes now to study the code on our sample page. You can do this by using the view source option on your brower's drop down menu. The page has some archane code in it, but you will find it an excellent study in internal anchors. HCI1 Then come back here for your assignment. To avoid confusion with the site I liberated that page from, I've deleted some of the links on it. You will need to use your brower's back arrow button to return to this page. Make up at least two web pages that are linked to each other using either relative or absolute links. If you chose to use relative links between pages, have a least one absolute link leading to one of your favorite spots on the web. One of the pages must have a link leading to an anchor on the other page. You must also have at least one example of an internal anchor leading from one spot in your page to another. These tags must be demonstated on these pages. You may if you wish, add to the page you created for lesson one. This time zip your files before attaching them to the email to Html@simegen.comASSIGNMENT#2
There are many ways to create a list with HTML. In the lesson we will cover four of the basic ones.
an ordered list is a simple left justifed list. We code it thusly"
Which displays as:
Note the type="A" attribute. By changing the A to an I or a 1 you will get roman numberals or regular numbers.
An unordered list is the same as an ordered list except that you can use graphical charactors instead of letters or numbers. Your options are type="disc" , "circle", or "square". We would code an unordered list thusly:
to display like this: By nesting lists one within another, you can achive various levels of indentation. Caution! Don't get carried away with this. Too many levels can be confusing to your user. A coding example would be: Which would display like this:
A definition list (coded as <DL>) usually consists of alternating a definition term (coded as <DT>) and a definition definition (coded as <DD>). Web browsers generally format the definition on a new line and indent it. We would code a definition list thusly: Which would display as: Your assigment is to put two of the four types of lists on one or more web pages. You may if you wish, add to the pages you've created for previous lessons. Be sure to zip your files before attaching them to the email to Html@simegen.com Once you have your webpages written, the next step is to upload them to your website.
How do I get one? you ask. There are many ways. Most, if not all, Internet Service Providers off free webspace as part of their package. This can range from 5meg to unlimited. There are quite a few commercial sites out there who offer free websites to anyone interested. The amount of diskspace varies. The tradeoff though is that your pages are generally asked to carry banners or other advertising supporting their sponsers.
However IF you sucessfully complete the requirements for this class, you will be offered a free website here on Simegen.com. At the present time we have no space limitations. For details of our terms of service please read
Webmaster's agreement Here on Simegen.com we offer FTP access to our server. When you are assigned a web site the webmaster will provide you with a user name and password. To plug into your FTP (File Transfer Protocal) software. There are several good programs out there. If you have a windows environment we strong recommend WS_FTP , a program designed specificially for Microsoft windows or Cute FTP.
Karen Litman has written a short tutorial on how to upload to Simegen.com using cute FTP. If you have any questions you may email her for assistance.
Since the point of this lesson is for you to learn to use FTP to upload web pages, you don't need to learn any new code this week. However since some interest has been expressed in tables I'll give you a brief overview now. You may include a table on the pages you upload for some extra credit in the course. Your basic table with no frills will code like this: And display thusly Now let's play with the code a little. If we want an invisible table we would set the border width to 0 coding thusly:
and display thusly: Something else that's fun to do is play with border and cell properties. The code for this table is:
and will display thusly:
We can change fonts within individual cells. Or background colorsOrdered lists
Unordered lists
Nested lists
Definition list
ASSIGNMENT #3
SOUND AND GRAPHICS Lessson #4
SOUND AND GRAPHICS ASSIGNMENT#4
UPLOADING TO A WEBSITE Lessson #5
TABLES FOR EXTRA CREDIET
This is row 1 column 1
This is row 1 column 2
this is row 1 column 3. You may have as many rows and columns in your table as you wish
This is row 1 column 1
This is row 1 column 2
this is row 1 column 3. You may have as many rows and columns in your table as you wish
column three
The width attribute in the table command will set the percentage of the page the whole table is wide. You can control the width of indivdual columns by using that attribute in the cell commands.
Make sure though that all the column widths add up to 100%. If not, most browsers will ignore your wishes and size the cells as they please.
Your assignment for this lesson is to obtain a username and password from your instructor then upload a 3 page website. You can use pages previously submitted or create an entirely new set of pages. For extra credit include one or more tables on your pages. Please note, the keys you are given for this lesson and the final exam are only temporary. The sites will be shut down at the end of the course.
If you successfully complete the course you may ask the webmaster for a permanite website on Simegen.com
Put together a complete website consisting of at least 3 pages. This time your top page needs to be named index.html. Chose at least one element from the first 4 lessons of this course to incorporate in your pages. For extra credit stick in a table or two. Email your instructor when you've uploaded your lessons.