HTML Basics What is HTML? Basic Tags Fonts Colors Pictures Links Lists Tables Frames Good Sites

What is HTML? HTML is a programming language that allows you to tell the browser what you want it to display and how you want it to be displayed, in simple terms, it is a WebPage. In HTML there are certain markers, like commands, that tell the Browser what to do, these are called tags. By using tags you can have tables, fonts, colors, pictures, links, and almost anything you can think up, and experimentation with tags can lead to some pretty cool WebPages.

Important Things to Remember... Use Notepad, Microsoft Word adds programming unless you save it as text only without formattingUse Notepad, Microsoft Word adds programming unless you save it as text only without formatting Be sure to save it as a.htm or.html file, not a.txt file or it will not show in you browserBe sure to save it as a.htm or.html file, not a.txt file or it will not show in you browser Carriage returns are not present in HTML, for a return, use a tagCarriage returns are not present in HTML, for a return, use a tag Remember use end tagsRemember use end tags If it isn’t right, check your spelling...If it isn’t right, check your spelling... Put things that aren’t part of the tag, but inside the tag in quotations..so not Put things that aren’t part of the tag, but inside the tag in quotations..so not Make sure to encase all of your tags with a at the end.Make sure to encase all of your tags with a at the end.

Basic HTML Tags These are only the tags that are essential to begin a page, there are many other tags. The next slide shows where these tags belong, and how they are used.

Basic Tags In Place Name of Page Content of Page Name of Page Content of Page It looks Like:

Basic Font Changes To enter Text into your page, you can simply type after the body tag, however, sometimes change is good. All changes to your font size, color, face and style, will occur inside the tag.

Examples of Font Change

Colors Adding colors to WebPages is not difficult. As a matter of fact, it is quite easy. In HTML you can either put in the basic names of the colors (like red, blue, green, etc.) or you can enter in a numerical code for color. In this code (hexadecimal code) the first two numbers are the amounts of red displayed, the second two numbers are the amount of green displayed, and the third two numbers are the amount of blue displayed, these colors range from 0-f. #ffffff is black and #oooooo is white, and so on, when using these numbers be sure to use quotations and a number symbol like “#556600”. A table of all these color numbers can be viewed at our/666.html

Basic Color Tags

Pictures To add pictures first be sure that they are in an acceptable format, these are gifs and jpgs. Any other formats like bmps, will not show up! If you use to many animated gifs, you page can be referred to as annoying, and you should avoid this. You can add pictures to many places, but the format is always the same, except in adding it as a background. The format for inside the body is or. For the background, inside the To add pictures first be sure that they are in an acceptable format, these are gifs and jpgs. Any other formats like bmps, will not show up! If you use to many animated gifs, you page can be referred to as annoying, and you should avoid this. You can add pictures to many places, but the format is always the same, except in adding it as a background. The format for inside the body is or. For the background, inside the

Picture Tags

Links Links can be added to other WebPages, or to other pages within your WebPage. Also you can add links to other objects inside your homepage or any other page. To add a link to another WebPage type Name of Site To add a link to a page inside your WebPage type Name of Page To add a link withing a page type Name of place then where you want the link to go, inside the tag put, so if you wanted to link to a table you would put. If you want to return to the previous page, just put a link to the other page on the page you linked to.

Lists Lists can add a lot to a WebPage, there are different types of lists and different types of bullets or numbers that can be used. You can have an ordered list (a, b, c, etc.) unordered lists (with bullets) or you can have definition lists. An Ordered List looks like a) list item b) list item and so on An Undordered List looks like list itemlist item An Definition List looks like: TermDefinition

Ordered Lists

Unordered Lists

Definition Lists

Tables Tables in HTML are easy to program if you know what you are trying to do. Tables look like the charts present on many of these slides. Tables in browsers by default have no borders, if you want to see the edges of your table, you have to place a border command inside the table tag. You can also use tables to format pages. Inside tables, the text is always the default of the browser (black and small), if you want to change this font, you must add a inside each cell to make the change.

TableTagsTableTagsTableTagsTableTags

Frames Frames are what allow you to format your pages into rows and columns. In my WebPage, I have used frames, I have two frames, and the column is a frame. Frames are not visible on all browsers and are hard to explain. My experiences online have led me to a site which will help you do frames in your WebPage. The site is at: ials/frames/

Good Sites Basic Help: Help: Browser Safe Colors: Safe Colors: Frame Help: Help: Pictures/Clip Art: Art: I hope that my page/PowerPoint presentation had helped you to build your WebPage. If it has or has not and you would like to contact me, you can me your comments or questions at

Extra Formatting Tags