Introduction
One of the easier programming languages at this time is the Hypertext Markup Language (HTML). HTML is usually only used for creating web pages for the Internet and it is very limited in what it can do. Most do not really consider HTML a programming language, but rather a text formatting language. This is partially why I'm covering it first, along with it being fairly easy to learn.Anyone can create web pages from scratch using a simple text editor such as Microsoft Windows' Notepad program. No special software is needed to create web pages. In order to view the web page, though, a web browser such as Netscape Communicator or Microsoft Internet Explorer is needed.
HTML has a minor problem in that each computer could display the web page slightly different. With HTML alone there is no easy way of forcing the program to display the same on every computer.
Also another problem with HTML is that it cannot solve problems such as adding two and two together! HTML is used to display text, tables, and pictures and also allows for "links" between other HTML pages but does not allow much more than that.
Tags
Tags are considered the commands in the HTML language. In HTML, a tag is the symbol "<" followed by a specific command followed by ">". Sometimes there are beginning tags that tell HTML to start a certain command and then an ending tag to tell HTML to stop the command. The only difference between the beginning and ending tags is that the ending tags have the symbol "</", the command, and then the ">". For example, <bold> is a starting tag to start the bold command and </bold> is the ending command to end the bold command.Tags in HTML as similar to certain types of punctuation in the English language. A paragraph, for example, usually begins with an indention. Parenthesis begin with a opening parenthesis and end with closing parenthesis.
English has several rules that apply to punctuation. One of them is that the latest punctuation mark that has a matching mark (parenthesis, quotes, brackets, etc), must have its closing mark before the closing mark of any other punctuation mark. Let me explain by an example. It would be very odd to see the following " ( [ ) ] { " }. Instead, the reader would expect something like " ( [ ] ) { } ". This is because the reader expects to see a closing bracket before a closing parenthesis. The same it true with HTML and most other programming languages. The latest starting mark must end before another ending mark of a different type. In terms of the HTML language, the current start tag must end before another one can end, otherwise the page may not display correctly.
HTML Programming
Program Requirements
HTML has a few requirements for its programs. First, the program extension must be either htm or html so the web browser can process the program correctly. Second, the program must contain at least the start and end tags of <html> and </html> at the beginning and end of the file. Other than those two requirements, the programmer can use any commands or text however is required to solve the problem.As stated above, the minimum HTML program must contain at least the <html> and </html> tags. This is illustrated in Program 1. Notice how each tag is on a separate line. This is not a requirement for the language, but helps programmers read the program a little easier.
| <html> </html> |
Program 1 - Minimum HTML Program
Program Heading and Titles
The heading of a HTML program contains general information about the program. This information is usually not displayed as part of the document except in the case of the title. The heading tags are <head> and </head>. The heading is usually at the very beginning of the document and does not contain many commands between the tags.The most common tag that is used within the head tags are the title tags <title> and </title>. The title of a HTML program is usually displayed at the top of the web browser as part of the browser's own title bar. For instance, viewing the following page in Internet Explorer would make the title of Internet Explorer to become "Hello – Microsoft Internet Explorer".
<html> <head> <title> Hello </title> </head> </html> |
Program 2 - HTML Program Showing the Title Tag
The heading of a HTML program is not very useful as it can not display much except for a title. The body of a HTML program is where most of the information is contained.Program Body
Just as the body of a written letter contains the content of a letter, the body of a HTML program contains all the content of the program. To specify the body of a HTML program, use the tags <body> and </body>. The body of a HTML program can contain as much text or any other tags (excluding <html>, <head>, and <title>) as the programmer needs.Any text that is within the body of the program will be displayed within the web browser as is with no formatting unless it has been modified with a tag. Program 3 shows how the body tags are used within a program to display text within the web browser.
<html> <head> <title> Hello </title> </head> <body> This text will be displayed in the browser window. </body> </html> |
Program 3 - HTML Program Showing the Body Tag
Headings
The HTML language has six levels of headings that are indicated by the tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> and each one has an associated end tag. HTML does not force the programmer to use the headings in any particular order. Some browsers, such as Netscape and Internet Explorer, make the text smaller as the number of the heading tag gets larger. Program 4 demonstrates the use of the heading tags and the web browser output of the program.<html> <head> <title> Hello </title> </head> <body> <h1>A level one heading</h1> <h2>A level two heading</h2> <h3>A level three heading</h3> <h4>A level four heading</h4> <h5>A level five heading</h5> <h6>A level six heading</h6> </body> </html> |
A level one heading |
Program 4 - HTML Program Showing Heading Tags and Associated Output
Paragraphs, Line Breaks, and Preformatted Text
Text within HTML programs is automatically flowed together until something forces it to being a new paragraph. Two of the ways to force text to break are the paragraph (<p>) and line break (<br>) tags. Another way to force text to be exactly the way the programmer intended is to use the preformatted tag (<pre> and </pre>). Program 5 demonstrates the use of all three of these tags.The paragraph tag is used to indicate the start of a new paragraph. Most browsers add a blank line when encountering the paragraph tag.
The line break tag causes the current line to break, similar to the paragraph tag, but does not insert a blank line between the test before the tag and the text after the tag.
The preformatted tag forces the browser to display the text exactly as it was entered in the program. In this format, spaces and line breaks are preserved and the text is not automatically flowed together as normally. Notice that this tag also has an associated end tag.
<html> <head> <title> Beginning HTML </title> </head> <body> The paragraph tag is used to indicate the start of a new paragraph. Most browsers add a blank line when encountering the paragraph tag.<p>The line break tag causes the current line to break,<br> similar to the paragraph tag, <pre> but does not insert a blank line between the test before the tag and the text after the tag. The preformatted tag forces... </pre> </body> </html> |
| The paragraph tag is used to indicate the start of a new paragraph. Most browsers add a blank line when encountering the paragraph tag. The line break tag causes the current line to break, similar to the paragraph tag, |
Program 5 - HTML Program Showing Paragraph and line breaks and Preformatted output
Text Formatting
The HTML language has several tags that allow the programmer to format specific sections of text. The type of formatting that is allowed by HTML is similar to the formatting options supported by modern day word processors. This includes bold (<b>), italic (<i>), and underline (<u>). Each of these tags also have an associated end tag. These tags can also be combined to produce formats such as bold italic (<b><i>).HTML also allows the programmer to center text or images by using the center tag (<center> and </center>).
Images
It is common for programmers to include images and pictures in their HTML programs to display a concept to a viewer of their web pages. The image (<img src>) tag is used for this purpose. The image can be either of GIF or JPG format and are displayed along with the text.The image tag is slightly different from the other tags in that it requires more information along within the tag. This tag requires at least the filename and web address of the image to be included. For example, to include an image called "bird.jpg" into the web page, the image tag would be <img src="bird.jpg">.
Horizontal Lines
Sometimes the programmer wishes to separate one section of a page from another. One of the more common ways of doing this is to use a horizontal line to separate the sections. The tag to draw a horizontal line is <hr>.Hypertext Links
One of the most common tags in the HTML language is the hypertext link tag (<a href> and </a>). This tag allows the viewer of the web page to link to another document. This "other document" can be another web page, an image or movie, or even a sound. The hyperlink tag is similar to the image tag in that it requires other information in order to work correctly. The information this tag requires is the web address (URL) and/or filename of the document to be linked to. The tag also allows a text description of what the link goes to. The next program will demonstrate the hypertext link as well as the other features of the HTML language covered so far.
| <html> <head> <title> My Web Page </title> </head> <body> <center><h1>Favorite Web Sites</h1></center> <a href="http://www.microsoft.com">Microsoft Corp</a><p> <a href="http://www.intellicast.com">Intellicast Weather</a> <hr> <center><h2>ECU's Todd Dining Hall</h2></center> <center> <img src="http://www.ecu.edu/images/horiz_l/todd_day.jpg"> </center> <hr> <b>Microsoft</b>, <b>Intellicast</b>, and <b>ECU</b> are <b><i><u>not</u></i></b> responsible for the contents of this web page and are <b>only</b> used as examples of how HTML tags can be used. </body> </html> |
Favorite Web SitesMicrosoft Corp |
Program 6 - Final HTML Program
No comments:
Post a Comment