Basic HTML Made Easy
What is HTML
HTML is HyperText Markup Language, the language designed for the creation of web pages.
In other words, HTML is the language web designers use to tell your web browser how to make a web page look. Using HTML, designers are able to specify how the text is to be displayed (bold, italics, underline, etc.), where images should be, the types of colors and fonts to use, and more.
Where is it used
First and foremost, HTML is used on each and every webpage you see. Yes, even the one you are looking at right now. HTML was used to tell your web browser how to display this text, that the text in the navigation bar should be links to other webpages.You can also use HTML with some types of email, but not all email clients and providers allow you to view your emails in HTML. Have you ever seen an email that had a pretty background, different colored fonts and a very elaborate look to them? They do that using HTML.
Other places that might make use of HTML are forums, blogs and journals. Some forums, however, make use of their own type of language called BBC (bulletin board code), which I will not be covering here.
Basic commands and how they are used
<BR>- Line break. Works like hitting the "shift + return" keys to add lines to the displayed document.
<p> TEXT HERE </p> - Paragraph. Starts and ends a paragraph. Effects certain paragraph only commands like justify (right, left, full). Works like hitting the "return" key.
<b> TEXT HERE </b> - Bold.
<strong> TEXT HERE </strong> - Strong Emphasis (or bold).
<i> TEXT HERE </i> - Italics.
<em> TEXT HERE </em> - Emphasis (or italics).
<u> TEXT HERE </u> - Underline.
<del> TEXT HERE </del> - Deleted text (or strike-through).
<a href="http://www.urlhere.com"> TEXT HERE </a> - Makes a link.
<img src="http://www.urlhere.com/image.jpg" /> - Inserts image to display in the document (supported files: .gif, .jpg, .jpeg, .png). Image must be hosted on the internet, not just simply on your computer.
<blockquote> TEXT HERE </blockquote> - Indents the text.
Here are a few more slightly "advanced" html commands that I am including because they are used in the example below:
<HTML>WEBPAGE INFO</HTML> - Denotes that the file is written in HTML and all the text should be interpreted with the html language. (see example below for how to use it)
<header> HEADER INFO </header> - Denotes that the information between the commands contains the header information, such as page title and more. (see example below for how to use it)
<title> TEXT HERE </title> - The title of the document. Must be inside the <header> tags to work
Example Uses
Alright, let us take the above examples of HTML codes and put them into use. For this example, let us make a basic webpage and see how things work out.First thing you want to do is open up a basic text editor program. Anyone running windows need only open "Notepad" (not wordpad, that is different). If you are running Windows XP, click your Start button, go to "All Programs" and look under "Accessories". Once Notepad is open, type in the following:
<html>
<head>
<title>BASIC HTML EXAMPLE</title>
</head>
<body>
This is a test.<br>
<B>BOLD</B><br>
<strong>Strong Emphasis</strong><br>
<I>Italics</I><br>
<em>Emphasis</em><br>
<U>Underline</U><br>
<del>Deleted text (or strike-through)</del><br>
<a href="http://technologymadeeasy.blogspot.com/">Tech Made Easy!</a><br>
<BR>
This is what happens
if you
don't
use
the "line break" command.
<BR>
<img src="http://www.myfilestash.com/userfiles/lethann/test.gif"><BR>
<blockquote>See what the blockquote command does? Very nifty for making, well, quotes!</blockquote>
</body>
</html>
Now you go up to the top, click "File", then "Save As...". Once the box has appeared, you want to type in test.html into the File Name box. Congratulations, you just made a webpage. If you double click on the icon for the file you saved, it should open in your default web browser. Now you can see how all the various commands work. Feel free to now open it back up in your notepad and play around with all the rest of the commands. Get used to them, and have fun!
HTML references
http://en.wikipedia.org/wiki/Html
http://en.wikipedia.org/wiki/HTML_elementHTML Programs
Dreamweaver
Notepad
posted by Unknown at 5:04 PM
|
0 comments
