HTML Tutorial Part II

Reviews

Tags

HTML Tutorial Part II, HTML Tutorial, how to, web page, Web Pages, tutorial on HTML, Web Design, basic html tutorial, HTML document, HyperText Markup Language

Stats

views:: 14
rating:: not rated
reviews:: 0
posted:: 10/29/2008
language:
pages:: 0

Public Domain

HTML Tutorial Part II Page 1 of 10 HTML Tutorial Part II Home 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. Paragraphs Lists Unnumbered Lists Numbered Lists Definition Lists Nested Lists Addresses Mailto Colour Changing Background Colour Inline Images Image Size Attributes Background Graphics Tables Setting up an account for a homepage Paragraphs Unlike documents in most word processors, carriage returns in HTML files aren't significant. So you don't have to worry about how long your lines of text are. Word wrapping can occur at any point in your source file, and multiple sp aces are collapsed into a single space by your browser. You must indicate paragraphs with

elements. A browser ignores any indentations or blank lines in the source text. Without

elements, the document becomes one large paragraph. Here is an example: Memorial University College, established in 1925 to honor Newfoundlanders killed in World War I, was elevated to university status when Newfoundland joined Canada in 1949. In 1961, when the current campus opened, enrolment stood at 1,900. Thirty years later, in 1991, full and part time students numbered 17,500, and our alumni totalled over 30,000 graduates.

Memorial's St. John's campus is located in the north end of the capital city. In addition to the 50 university buildings, the campus also includes the Health Sciences Center, which houses the Faculty of Medicine and the schools of Nursi ng and Pharmacy, and the National Research Council's Institute for Marine Dynamics.

Sir Wilfred Grenfell College, our Corner Brook campus, opened in 1975. It offers a full range of university courses at the first and second-year levels. The college offers a four year bachelor of arts degree with specialization in psych ology, English or cognitive studies. The college is also the home of two fine arts degree programs in visual arts and theatre. This will produce: Memorial University College, established in 1925 to honor Newfoundlanders killed in World War I, was elevated to university status when Newfoundland joined Canada in 1949. In 1961, when the current campus opened, enrolment stood at 1,900. Thirty years later, in 1991, full and part time students numbered 17,500, and our alumni totaled over 30,000 graduates. Memorial's St. John's campus is located in the north end of the capital city. In addition to the 50 university buildings, the campus also includes the Health Sciences Center, which houses the Faculty of Medicine and the schools of Nursi ng and Pharmacy, and the National Research Council's Institute for Marine Dymanics. http://www.busi.mun.ca/buslab/html2/html2.html 11/7/01 HTML Tutorial Part II Page 2 of 10 Sir Wilfred Grenfell College, our Corner Brook campus, opened in 1975. It offers a full range of university courses at the first and second-year levels. The college offers a four year bachelor of arts degree with specializations in psyc hology, English or cognitive studies. The college is also the home of two fine arts degree programs in visual arts and theatre. Lists HTML supports unnumbered, numbered, and definition lists. You can nest lists too, but use this feature sparingly because too many nested items can get difficult to follow. Unnumbered Lists To make an unnumbered, bulleted list, 1.start with an opening list

(list item) tag followed by the individual item; no closing

tag Below is a sample three-item list:

apples
bananas
grapefruit

The output is: apples bananas grapefruit The

items can contain multiple paragraphs. Indicate the paragraphs with the

paragraph tags. Numbered Lists A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses

tag. The following HTML code:

oranges
peaches
grapes

produces this formatted output: 1.oranges 2.peaches 3.grapes Definition Lists A definition list (coded as

) and a definition definition (coded as

). Web browsers generally format the definition on a new line. The following is an example of a definition list:

NCSA: NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign.
Cornell Theory Center: CTC is located on the campus of Cornell University in Ithaca, New York.

The output looks like: NCSA NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. Cornell Theory Center CTC is located on the campus of Cornell University in Ithaca, New York. http://www.busi.mun.ca/buslab/html2/html2.html 11/7/01 HTML Tutorial Part II Page 4 of 10 The

and

entries can contain multiple paragraphs (indicated by

paragraph tags), lists, or other definition information. The COMPACT attribute can be used routinely in case your definition terms are very short. If, for example, you are showing some computer options, the options may fit on the same line as the start of the definition.

-i: invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path
-k: invokes NCSA Mosaic for Microsoft Windows in kiosk mode

The output looks like: -i invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path. -k invokes NCSA Mosaic for Microsoft Windows in kiosk mode. Nested Lists Lists can be nested. You can also have a number of paragraphs, each containing a nested list, in a single list item. Here is a sample nested list:

A few New England states:
- Vermont
- New Hampshire
- Maine
Two Midwestern states:
- Michigan
- Indiana http://www.busi.mun.ca/buslab/html2/html2.html 11/7/01 HTML Tutorial Part II Page 5 of 10

The nested list is displayed as A few New England states: Vermont New Hampshire Maine Two Midwestern states: Michigan Indiana Addresses The

tag is generally used to specify the author of a document, a way to contact the author (e.g., an email address), and a revision date. It is usually the last item in a file. For example, the last line of the online version of this guide is:

John Doe/ Memorial University of Newfoundland/ jdoe@morgan.ucs.mun.ca

The result is: John Doe/ Memorial University of Newfoundland/ jdoe@morgan.ucs.mun.ca Mailto You can make it easy for a reader to send electronic mail to a specific person or mail alias by including the mailto attribute in a hyperlink. The format is: Name For example, enter: John Doe to create a mail window that is already configured to open a mail window for John Doe. http://www.busi.mun.ca/buslab/html2/html2.html 11/7/01 HTML Tutorial Part II Page 6 of 10 Colour Changing Font Colour When creating a html file black is the default font colour used for normal text. Links also have various default colours depending on if they are active, visited or unvisited links. To change the font for the entire document type the following: The word code is replaced by the colour code number of the desired colour which are listed below. You can also change the colour of the links. To do this you can add to the normal text command or you can create a new command as follows: Type the text here (this is for changing the text to blue). The command will cause the text after it to remain the same colour as the original text. Changing Background Colour Changing background colour is done the same way that font colour is changed. It can also be included in the same set of commands as FONT, LINK, VLINK and ALINK. To change the background colour type: (this is to changed background colour to black) Basic Color Specifications: Colour White Red Green Blue Magenta Cyan Black Hex #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #00FF00 #000000 http://www.busi.mun.ca/buslab/html2/html2.html 11/7/01 HTML Tutorial Part II Page 7 of 10 Yellow #FFFF00 There are also many other colours which can be used, this is only a brief list. Biola university has an online program called Colorserve which you can select a large number of colours for links, text or background colour. When you selec t the colour you want the program will give you the 6 digit colour code for that colour. To use this program go to: http://www.biola.edu/cgi-bin/colorpro/ Inline Images Most Web browsers can display inline images (that is, images next to text) that are in X Bitmap (XBM), GIF, or JPEG format. Other image formats are being incorporated into Web browsers [e.g., the Portable Network Graphic (PNG) forma t]. Each image takes time to process and slows down the initial display of a document. Carefully select your images and the number of images in a document. To include an inline image, enter:

where ImageName is the URL of the image file. The syntax for URLs is identical to that used in an anchor HREF. If the image file is a GIF file, then the filename part of ImageName must end with .gif. Filenames of X Bitmap images must end with .xbm; JPEG image files must end with .jpg or .jpeg; and Portable Network Graphic files must end with .png. Image Size Attributes You should include two other attributes on tags to tell your browser the size of the images it is downloading with the text. The HEIGHT and WIDTH attributes let your browser set aside the appropriate space (in pixels) fo r the images as it downloads the rest of the file. (Get the pixel size from your image-processing software, such as Adobe Photoshop.) If you do not set the size attributes it then the browser will use the images normal size. For example, to include a self portrait image in a file along with the portrait's dimensions, enter:

NOTE: Some browsers use the HEIGHT and WIDTH attributes to stretch or shrink an image to fit into the allotted space when the image does not exactly match the attribute numbers. Not all browser developers think stretching/shrinking is a good idea. So don't plan on your readers having access to this feature. Check your dimensions and use the correct ones. Background Graphics Most versions of Web browsers can load an image and use it as a background when displaying a page. Some people like background images and some don't. In general, if you want to include a background, make sure your text can be read e asily when displayed on top of the image. Background images can be a texture (linen finished paper, for example) or an image of an object (a logo possibly). You create the background image as you do any image. However you only have to create a small piece of the image. Using a feature called tiling, a browser takes the image and repeats it across and down to fill your browser window. In sum you generate one image, and the browser replicates i t enough http://www.busi.mun.ca/buslab/html2/html2.html 11/7/01 HTML Tutorial Part II Page 8 of 10 times to fill your window. This action is automatic when you use the background tag shown below. The tag to include a background image is included in the statement as an attribute: Tables Tables are useful for presentation of tabular information as well as a boon to creative HTML authors who use the table tags to present their regular Web pages. Here are some table elements that are used in creating tables: : defines a table in HTML. If a BORDER attribute is present, then a browser will display the table with a border. : speciaifies a table row within a table. you may defined default attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM)

: defines the caption for the title of the table. The default position of the title is centered at the top of the table. The attribute ALIGN=BOTTOM can be used to position the caption below the table.

: defines at table header cell. By default the text in the text cell is bold and centered. Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents.

: defines a table data cell. By default the text in this cell is aligned left and centered vertically. Tabele data cells may contain other attributes to determine the characteristics of the cell and/or its contents. This is a general format of a table: start of table definition caption definition start of first row definition first cell in row 1 (a head) last cell in row 1 (a head) end of first row definition http://www.busi.mun.ca/buslab/html2/html2.html 11/7/01 HTML Tutorial Part II Page 9 of 10 start of second row definition first cell in row 2 last cell in row 2 end of second row definition start of last row definition first cell in last row last cell in last row end of last row definition

caption contents
cell contents	cell contents
cell contents	cell contents
cell contents	cell contents

end of table definition Setting up an account for a homepage Anyone with a C&C UNIX account can create your own WWW home page. Assuming your login name is "jdoe", the URL for your home page will be: http://www.ucs.mun.ca/~jdoe/ Preparing the files and directories The first thing to do is to prepare a directory for your WWW files, and arrange for the correct file permissions. This involves making a .www directory, and making sure that it and your home directory have the permissions set to allow access to known file names. This is done with the following commands: 1. Type cd 1. Type mkdir .www http://www.busi.mun.ca/buslab/html2/html2.html 11/7/01 HTML Tutorial Part II Page 10 of 10 1. Set directory mode by typing chmod a+x. .www 1. You should then make sure all files in that you wish to be on the page to be readable by typing: chmod a+r name_of_file.html Type man chmod at the UNIX prompt for detailed information. On our system there is a shell script/command: /local/bin/wwwsetup which will change the permissions on the files in your .www directory. It will also give you some indication of what it is doing and explain why it is doing it. Remember that the opening page must be named index.html. http://www.busi.mun.ca/buslab/html2/html2.html 11/7/01

Related docs

html tutorial

Views: 133 | Downloads: 27

HTML Tutorial

Views: 13 | Downloads: 5

HTML

Views: 87 | Downloads: 13

HTML Tutorial

Views: 172 | Downloads: 39

TUTORIAL HTML

Views: 62 | Downloads: 11

HTML TUTORIAL PART I