FEU-NRMF STUDENT WEB SITES

| home | launch pad | about the author |

Web Page Construction Tutor

Welcome to the page that will teach you to construct your own web page by making a hypertext markup language (html) file using a plain text word processor like Notepad. The html is very similar to the language of deoxyribonucleic acid (DNA). If you are already knowledgeable in html and you want free webpage templates, click here. Otherwise, proceed to step 1.

LINKS: writing html : W3Schools : HTML Code Tutorial : intro to html : web design group : html kit : bare bones guide to html : interactive html tutorial for beginners

Step 1: Start the program Notepad by:
      (1) moving your mouse pointer towards the lower left corner of the screen.
      (2) clicking your mouse button when the mouse pointer is on top of the start button.
      (3) moving the mouse pointer to [Programs].
      (4) moving the mouse pointer to [Accessories].
      (5) moving the mouse pointer to [Notepad].
      (6) clicking the mouse button when the mouse pointer is on top of Notepad. molecular bonding,

Step 2: Type the following in Notepad.
 <html>
 <head>
 <title>
 "your title"
 </title>
 </head>
 <body>
 "contents of your web page"
 </body>
 </html>

Step 3: You can change the text within the quotation marks.

Step 4: Save the file with an extension .htm

Step 5: Use any web browser to view the file you have created.
Be sure to include the path to the file. The html file is also called the source file which is the source of the information that tells the browser software/program what to do and how to present the html file as a web page. What differences do you notice between the source file and the web page?

(1) The source file contains text inside less than (<) and greater than (>) signs. These are called tags.

(2) The source file contains a pair of text inside < and > signs. The second one contains a forward slash bar / after the < sign. The tag without a forward slash bar is the opening tag while the one with the forward slash bar is the closing tag. The rule is that most tags must be closed in order for the tag to work. The closing tag limits the scope of the tag (command).

Just like tags in html, there are codons in the messenger-RNA (mRNA). In a complementary manner, DNA codes for the initiating codons (beginning tag in html) and terminating codons (ending tag in html) found in mRNA. The initiating codon will specify where in the mRNA protein synthesis will begin and the terminating codon will specify where in the mRNA protein synthesis will end.

(3) The tags are commands recognized by the web browser and tells the browser to present the text within the opening and closing tag (after the opening tag and before the closing tag) to be displayed in the Web Page in a way (format or layout) specified by the tag. For example, the <html> tag tells the web browser that the text between the opening and closing html tag should be read as an HTML File.

In a similar manner, the initiating and terminating codons (tags) are recognized by the gene expression system (web browser) at the end of which, a protein (web page) is produced.

Below is a partial list of tags and their definitions

Opening tag: <head> Closing tag: </head>: Define the part of the web page that will not be seen. The text within this tag may indicate technical information about the site.
Opening tag: <title> Closing tag: </title>: Defines the title of the Web Page in which the text within this tag will be presented at the title bar (top bar in Internet Explorer Web Browser) of the web browser window.
Opening tag: <body> Closing tag: </body>: Defines the part of the html file that will be seen in the Web Page.
Opening tag: <h1> to <h7> Closing tag: </h1> to tag: </h7> (may not be required): Tells the Web Browser to present the text within the tag as a subject header with its own special formatting.

Below is a list of examples of heading tags indicating the amount of space above and below the heading.

Sample h1 tag


Sample h2 tag


Sample h3 tag


Sample h4 tag


Sample h5 tag


Sample h6 tag

 Sample h7 tag (This heading tag is not really a header but is used to make indented paragraphs.)
Opening tag: Closing tag: : Orders the Web Browser to make the text within the tag bold in the Web Page.
Opening tag: Closing tag: : Orders the Web Browser to make the text within the tag italics in the Web Page.
Opening tag: Closing tag: : Orders the Web Browser to make the text within the tag underlined in the Web Page.
Opening tag: <center> Closing tag: </center>: Tells the Web Browser to position the text within the tag at the center of the Web Page.
Opening tag: <strike> Closing tag: </strike>: Tells the Web Browser to add a strikethrough to the text within the tag when the text is shown in the Web Page.
Opening tag: <ol> Closing tag: </ol>: Tells the Web Browser to show the text within the tag as a list of items in a definite numerical order. This tag requires the tag <li> before every item in the list. The numbering will be according to the sequence of listing.
Opening tag: <ul> Closing tag: </ul>: Tells the Web Browser to show the text within the tag as a list of items in a definite order but not numbered.
Opening tag: Closing tag: : Inserts a non-indented paragraph break. It is the same as two tags with the text of the paragraph following the second tag.

This is an example of a paragraph break showing the amount of space above and below the paragraph.

Below is a partial list of tags that do not require a closing tag

Opening tag: Closing tag: (not required): Tells the Web Browser to insert a line break at the position where the tag is located. When creating the html file, additional line breaks using the enter key will not be recognized or will be disregarded by the Web Browser when showing the html file as a Web Page.
Opening tag: <li> Closing tag: (not required): Tells the Web Browser to show the text that follows as an item in the listing.
Opening tag:   Closing tag: (not required): Tells the Web Browser to insert a Non-Breaking Space. Just like pressing your space bar once for every   tag. When creating the html file, additional spaces using the spacebar will not be recognized or will be disregarded by the Web Browser when showing the html file as a Web Page. However, this feature can be used to organize the your html file. You can create an HTML file with all the text in only one line

<html> <head> <title> "your title" </title> </head> <body> "contents of your web page" </body> </html>

or you can add spaces and tabs to help you oranize the file and
make you easily spot the absence of a closing tag.

 <html>
 <head>
 <title>
 "your title"
 </title>
 </head>

 <body>
 "contents of your web page"
 </body>

 </html>

Below is a partial list of attributes: (Each tag has its own specific set of attributes that specifies the characteristics of tags.)

width
height
size
color
align
valign
target

This is a sample bar.

This is the horizontal rule tag and its attributes that you will encode in your html file to show a horizontal line or a bar:

< hr width = "50%" Size="3" Align="center" Color="blue" >

This will illustrate an animation. DBN Logo

This is the graphics image or animation tag and its attributes that you will encode in your html file:

< img src="animation.gif" alt="alternate name" align="center" width="400" height="200" >

This will illustrate a link to other sites.
View Animation of Rotatory Catalysis in Oxidative Phosphorylation

This is the opening and closing link tags:

< a href="http://www.devillacentral.com/OxPhos.htm" >descriptive name of the link</a>

This will illustrate a link that will allow your site visitors to communicate with you by sending you and e-mail.
Mail Me!

This is the opening and closing link tags to an e-mail address: <a href="mailto:r_devilla@hotmail.com?subject=Saying Hi&cc=rdv@yahoo.com"> Mail Me! </a>

This will illustrate a link that will enable you to move up and down a very long page.
Back to Top

This is the opening and closing tags of a link to a portion/section (e.g. top) of a long page:

< a href="#top" >Back to Top</a>

Then, at the position in the page where you want your reader to go, include this tag:

Sample h1 tag

Sample h2 tag

Sample h3 tag

Sample h4 tag

Sample h5 tag

Sample h6 tag