Документ взят из кэша поисковой машины. Адрес оригинального документа : http://www.stsci.edu/hst/training/events/BeginnersHTML/supporting
Дата изменения: Unknown
Дата индексирования: Mon Apr 11 15:07:33 2016
Кодировка:
Поисковые слова: http astrokuban.info astrokuban
Beginner's HTML and Basic Web Design
STScI Logo

Hubble Space Telescope
Beginner's HTML and Basic Web Design

Outline of this Training Session:

  1. Quick Overview and Introduction - Lisa
  2. Framework of the World Wide Web - Paul
  3. Basic html Fundamentals - Lisa
  4. On-line Web Editors - Paul

Framework of the WWW

What is World Wide Web (WWW)?


WWW is a client/server information system that makes use of the Internet to distribute information.

A good summary of the history of the WWW can be found in: Physics Today, November 1998, pp 30.


Web Pages, Web Presentations and Web Sites

Hyper Text Markup Language (HTML)


Basic HTML Fundamentals

HTML Coding:

The cool thing about using html is that it is editor and browser independent.

This means that you can use any editor (vi, macs, textedit, MSWord...)
on any machine or system (unix, vms, pc, mac)
to create the web document and use any web browser to view it (Netscape, Mosaic, AOL, etc...)

HTML code is not difficult to understand once you learn to recognize basic elements.
As with all software code and programming languages, there is good and bad form in writing your code as well as the output it produces. Learning the habits of good code writing helps to make your html code more easily understandable to others and to yourself when you come back to it at a later time.

HTML IS NOT CASE SENSITIVE. It also ignors carriage returns and white spaces that appear
between lines of html code. Actual code can wrap around or continue off the line.

A quick glossary of terms:

HTML
HyperText Markup Language
The actual hard code that forms a web page that can be served on a web browser.
URL
Universal Resource Locator
The address of where a web file exists. This address can be expressed as an
absolute or a relative pathname (more on this later in "Links").

elements and tags

HTML code uses elements to manipulate the text or image that appears on the web page.
The words or letters that are placed inside the brackets are the element.

The left angle bracket, element, right angle bracket is called the tag. A tag
is usually followed by content then closing tag (left angle, slash, same element, right angle).

tag = <element>

attribute

The attribute of a tag element is found within the opening tag: 
< font size=4 color=purple> Hi Mom! </font>

The terms "color" and "size" are both attributes of the element font.
The html version of this would be: Hi Mom!

Interfacing your web page(s) with a web browser

Points to keep in mind:

The Essentials:

Here is an outline of the bare essentials of an html-coded file:

<html>
        <head>
                <title> Title Goes Here </title>
        </head>

        <body>
                
                This part of the document will be viewable on the web.

        </body>

</html>


<!-- This is a comment telling you that this source code holds the bare essentials 
necessary for a basic web page. Save the file as anything.html and pull it up in your 
web browser. You should only see the line: 

                "This part of the document will be viewable on the web."  -->

To see this in action, pull open the file "essential.html"
(http://www.stsci.edu/ssd/OTWG/SSD981130/essential.html) and view the source code.

Some Formatting Examples

Normal text with line breaks:

Welcome to my web page. My name is Lisa. How are you today?
I see that you are interested in learning basic html code... Welcome aboard.

 
        Welcome to my web page. My name is Lisa. How are you today? <br>
        I see that you are interested in learning basic html code... Welcome aboard.  <p>

Centering:

This is a test of the center-al broadcast system... This is only a test...BBBBBBBBBBBEEEEEEEEEEEEEEEEEEEEEEEEPPPPPPPPPPPPPP

<h2> Centering:</h2>

        <center> This is a test of the center-al broadcast system... This is only a 
        test...BBBBBBBBBBBEEEEEEEEEEEEEEEEEEEEEEEEPPPPPPPPPPPPPP</center>

This can also be achieved with <p align=center>

Font Styles:

Here are some examples of bold and italic fonts.

<h2> Font Styles:</h2>

        Here are some examples of <b>bold</b> and <i>italic</i> fonts.

Headers:

Headers are numbered 1 through 6.

This is Header 1.

And this is Header 2.

And this is Header 3.

And this is Header 4.

And this is Header 5.
And this is Header 6.
<h2> Headers: </h2>
        <center>

        Headers are numbered 1 through 6.  <br>
        <h1>This is Header 1.</h1>
        <h2> And this is Header 2.</h2>
        <h3> And this is Header 3.</h3>
        <h4> And this is Header 4.</h4>     
        <h5> And this is Header 5.</h5>     
        <h6> And this is Header 6.</h6>     

        </center>

How to Make a List:

There are several types of lists that each use different structuring techniques. Here are some examples:

Normal Lists

<ul>
<li>Normal Lists with Bullets
<li>Ordered or Numbered Lists
<li>Definition Lists
<li>Nested Lists
</ul>

__________________________________________

Ordered Lists

  1. Normal Lists with Bullets
  2. Ordered or Numbered Lists
  3. Definition Lists
  4. Nested Lists 
<ol>
<li>Normal Lists with Bullets
<li>Ordered or Numbered Lists
<li>Definition Lists
<li>Nested Lists
</ol>

__________________________________________

Definition Lists

For an example of a definition list- see the glossary section above.
__________________________________________

Nested Lists

Any of the above listing mechanisms can be used recursively:

Links

Linking Text to an HTML Document

To link a piece of text (or an image) to a URL so that it is now a clickable item in your web page, you must know where the file and/or page exists.

A file on your system can be viewed with a relative URL: /home/jdoe/mywebstuff/test.html and thus the link from any page on that system to that page can be done with a relative pathname: "/home/jdoe/mywebstuff/test.html" or if you are in a nearby directory: "../test.html".

An absolute pathname assumes that the web file is in an area that is also a web server. Marvel accounts and /home/username/public_html directories have absolute pathnames associated with them.
URL: http://www.stsci.edu or http://sol.stsci.edu/~jdoe

To link a word or phrase with either a relative or absolute pathname, you must use the
anchor tag: <a href>pathname</a> as in the following examples:

www.stsci.edu

 <a href="http://www.stsci.edu">www.stsci.edu</a>

and

Go to my essentials document.

 Go to my <a href="essential.html">essentials</a> document.

Linking Text to an Image

This is basically the same as linking to an html document except that the name of the image would be in the URL pathname:

View the Hubble Heritage Bubble Nebula
<a href="http://heritage.stsci.edu/public/Oct22/bubble/NGC7635small.jpg">Bubble Nebula</a>

Mailto Links

A "Mailto" is an active link that will bring up an e-mail window and is helpful if you want to give someone a quick way to reach you, with very little effort on their part. The tag element is very similar to a url link except that the "http" address is replaced with "mailto:username":

Send mail to frattare@stsci.edu.
    Send mail to <a href="mailto:frattare@stsci.edu">frattare@stsci.edu</a>

Displaying Images

Images are displayed with the <img> tag. The attribute "src" must be included to tell where the image exists. Again, both relative and absolute pathnames are allowable.

This is the Bubble Nebula: 
    This is the Bubble Nebula: 
<img src="http://heritage.stsci.edu/public/Oct22/bubble/NGC7635small.jpg"
        width=200>

The attribute "width" and also "height" help you to control the size of the displayed image.

Images as Links

Taking things one step further, an image just like a word or phrase can be used to link to somewhere else. To do this simply place your image display tag inside of a link anchor:

<a href="somewhere"> <img src="image"> </a>, as in the example:

 
<a href="http://heritage.stsci.edu/public/Oct22/bubble/NGC7635.html">
<img width=200 src="http://heritage.stsci.edu/public/Oct22/bubble/NGC7635small.jpg">
</a>

Where To Go From Here

Local Tutorials:

No Frills Beginner Guides

Text Styles and Special characters:

STScI Local Web Authoring Procedures and some web ethics issues:

Beyond This Course

Once you have the basics of html code, you are free to become more interactive with your web pages. Some more advanced web techniques include but are not limited to the following.

On-line Web Editors

Software tools to help with the development


These days we have a lot of "visual" tools that would allow us to develop web pages easily and quickly. These tools provide a Graphics User Interface (GUI) and take the HTML coding process away from the user. The interface of these programs are very similar to those of a word processor; indeed some of these programs are word processors (e.g. FrameMaker, MS Office). Using the GUI interface, one can easily incorporate different elements on a web page with a click of a button. Below lists a few examples of such tools.

Light duty - quick prototyping and editing of simple web pages.


Medium duty - Gives you a bit more control over content creation, plus they have some templates


Heavy duty - These are for those create web pages frequently, plus with site management tools.