Management Information Systems and Computer Applications For Hospitality

Management Information Systems and Computer Applications for Hospitality
Hypertext Mark-up Language (HTML)
Engr. Arthur N. Villanueva Jr.

Instructor
What is HTML?

the "mother tongue" of your browser invented in 1990 by a scientist called Tim BernersLee a language, which makes it possible to present information on the Internet What you see when you view a page on the Internet is your browser's interpretation of HTML. To see the HTML code of a page on the Internet, simply click "View" in the top menu of your browser and choose "Source".
What can I use HTML for?

HTML is used to make websites. It is as simple as that! HTML is an abbreviation of "HyperText Mark-up Language" - which is already more than you need to know at this stage. However, for the sake of good order, let us explain in greater detail.
Hyper is the opposite of linear. Text is self-explanatory. Mark-up is what you do with the text. You are marking up the text the same way you do in a text editing program with headings, bullets and bold text and so on. Language is what HTML is. It uses many English words.
What is needed?
a "browser". A browser is the program that makes it possible to browse and open websites. a simple text editor If you are using Windows you can use Notepad, which is usually found in the start menu under Programs in Accessories
Elements & Tags

Tags are labels you use to mark up the begining and end of an element. All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">". Generally, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag.
Document Tags
Document tags define the overall structure of an HTML document. There are four tags every HTML document should have. These tags define the what type of document it is, and the major sections. These tags are <html>, <head>, <title> and <body>.
Section of an HTML Document
Attributes
elements give structure to a HTML document and tells the browser how you want your website to be presented (for example, <br /> informs the browser to make a line break). In some elements you can add more information. Such additional information is called an attribute. Ex: <body style="background-color: red;">
<html> tag
Placed at the beginning and end of your document. Everything in the document goes inside <html></html>
<HTML> <HEAD> <TITLE>My Home Page</TITLE> </HEAD> <BODY> Hi There! </BODY> </HTML>
<head> tag

the cover page of the document. Just as the cover page of a book contains information about the book (such as the title), the <head> section contains information about the document.
<HEAD>
<TITLE>My Home Page</TITLE>

</HEAD>
<title> tag

<title> states the title of the document. <title> always goes in the <head> section. The text inside <title> is not displayed in the document. However, most browsers will display the title at the top of the window.
<HEAD>
<TITLE>My Home Page</TITLE> </HEAD>
<body> tag
one of the two major sections that goes inside <html> defines the visible section of the document the section that holds everything that is actually displayed. All the text, headers, tables, etc are in this section it has a number of attributes which control the overall document appearance
Attributes of the <body> tag

BGCOLOR: background color of the page BACKGROUND: background picture for the page TEXT: color of the text on the page LINK: color of links that haven't been followed yet VLINK: color of links that have been followed ALINK: color of links while you are clicking on them BGPROPERTIES: if the background image should not scroll TOPMARGIN: size of top and bottom margins LEFTMARGIN: size of left and right margins MARGINHEIGHT: size of top and bottom margins MARGINWIDTH: size of left and right margins
HTML Color - bgcolor
The bgcolor attribute is used to control the background of an HTML elmement, specifically page and table backgrounds. The HTML to change the background color is simple:
<TAGNAME bgcolor="value">
HTML Color Coding System Color Names

There are 3 different methods to set color. The simplest being the Generic terms of colors. Examples: black, white, red, green, and blue.
Generic colors are preset HTML coded colors where the value is simply the name of each color.
HTML Coloring System - RGB Values
RGB stands for Red, Green, Blue. Each can have a value from 0 (none of that color) to 255 (fully that color). The format for RGB is - rgb(RED, GREEN, BLUE), just like the name implies.
HTML Coloring System Hexadecimal
Hexadecimals are the best choice for compatible web development because of their consistency between browsers. If you want to be absolutely sure your colors will not change, use paired hex values for color. Examples: "#0011EE", "#44HHFF", or "#117788". These are called True Colors, since they will stay true in hue from browser to browser.
HTML - Background
Images can be placed within elements of HTML. Tables, paragraphs, and bodys may all have a background image. To accomplish this, we use the background attribute as follows.
<table height="100" width="150 background=background.jpg" > <tr> <td>This table has a background image</td> </tr> </table>
<font> tag
one of the most important visual elements of your page used to add style, size, and color to the text on your site. Use the size, color, and face attributes to manipulate your fonts. Attributes: SIZE: size of the font COLOR: color of the text FACE: set the typestyle for text
Example

<font size="5">Here is a size 5 font</font> <font color="#990000"> This text is hexcolor #990000 </font> <br /> <font color="red">This text is red</font> <font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph has had its font...</font>
Text Formatting Tags

<B> Bold <I> Italics <S> Strikeout <STRIKE> Strikeout <U> Underline <BIG> <SMALL> <SUB> Subscript <SUP> Superscript
Lists
HTML offers authors several mechanisms for specifying lists of information. All lists must contain one or more list elements. Lists may contain: Unordered information: <ul></ul> Ordered information: <ol></ol> Definitions. <dd></dd
<ol> tag

creates an ordered list. "Ordered" means that the order of the items in the list is important. To show this, browsers automatically number the list. Attributes: TYPE: type of numerals START: where to start counting
<li> tag
indicates the start of a new line item within a list. <li> can be used with <ol>,<ul> and <dir>
Attributes: TYPE: type of bullet or numeral VALUE: where to continue counting
Attribute type for <OL>

1 is the default: normal Arabic numerals. A makes the list use capital letters a makes the list use lowercase letters
<OL TYPE=1> <LI>Turn left on Maple Street <LI>Turn right on Clover Court </OL> <OL TYPE=A> <LI>Turn left on Maple Street <LI>Turn right on Clover Court </OL> <OL TYPE=a> <LI>Turn left on Maple Street <LI>Turn right on Clover Court </OL>
1. Turn left on Maple Street 2. Turn right on Clover Court

A. Turn left on Maple Street B. Turn right on Clover Court a. Turn left on Maple Street b. Turn right on Clover Court I. Turn left on Maple Street II. Turn right on Clover Court i. Turn left on Maple Street ii. Turn right on Clover Court
I makes the list use capital Roman Numerals

i makes the list use lowercase Roman Numerals
<OL TYPE=I> <LI>Turn left on Maple Street <LI>Turn right on Clover Court </OL>
<OL TYPE=i> <LI>Turn left on Maple Street <LI>Turn right on Clover Court </OL>
Example
this code
<H3>Meeting Agenda</H3> <OL TYPE=A> <LI>Budget <OL TYPE=a> <LI>Equipment <LI>Salaries </OL> <LI>Convention Plans <OL TYPE=a> <LI>Accommodations <LI>Schedule </OL> </OL>
produces this
Meeting Agenda A. Budget a. Equipment b. Salaries B. Convention Plans a. Accomodations b. Schedule
Attribute start for <OL>
START tells the browser what number to start counting at.

this code
We now pick up where we left off yesterday with the chilled gelatin: <OL START=5> <LI>Place gelatin mold over plate <LI>Tap gently with a spoon <LI>Lift mold off of gelatin </OL>
produces this We now pick up where we left off yesterday with the chilled gelatin: 5. Place gelatin mold over plate 6. Tap gently with a spoon 7. Lift mold off of gelatin
<ul> tag

creates an unordered list. The unordered part means that the items in the list are not in any particular order.
this code
<UL><LI>Marketing <UL> <LI>Andy Hodges <LI>Trey Gregory </UL><LI>Engineering <UL> <LI>Karen Joslin <LI>Sheila Malone <LI>Karl Heinz </UL></UL>
produces this
Marketing Andy Hodges Trey Gregory Engineering Karen Joslin Sheila Malone Karl Heinz
HTML Links and Anchors
The ability to link from one document to another is one of the most central features of HTML . These connections are made using anchor tags to create links.

Internal - Links to anchors on the current page Local - Links to other pages within your domain Global - Links to other domains outside of your site
<a> tag
the <a></a> tags to define the start and ending of an anchor. the cornerstone of HTML the tag that makes hypertext hypertext. the tag you use to make hyperlinks: the text that you can click on in your web browser to go to another web page.
Attributes of <a></a>

HREF: URL you are linking to NAME: name a section of the page TARGET: controls where the new document will be displayed when the user follows a link "_blank" "_parent" "_self" "_top" TITLE: suggested title for the document to be opened
Examples
Internal link:
<a href="resumepage.html">my resume</A> <a href="page2.htm">Go to page 2</a> <a href="http://www.yahoo.com/">Yahoo!</a> <a href="mailto:nobody@html.net">E-mail at HTML.net</a>
Local Link:
Global link:
Link to email:
Images
Images are a staple of any web designer, so it is very important that you understand how to use them properly. Images made the web cool The <img> tag is used to add images to HTML documents
Attributes of the <img> tag

SRC: where to get the picture ALT: text to show if you don't show the picture WIDTH: how wide is the picture HEIGHT: how tall is the picture ALIGN: how text should flow around the picture BORDER: border around the picture HSPACE: horizontal distance between the picture and the text VSPACE: vertical distance between the picture and the text
Example
<img SRC="../graphics/pumpkin.gif" ALT="pumpkin />
<img src="images/logo.png" />
HTML Tables
Tables are a handy way to create a site's layout The <table> tag is used to begin a table. Within a table element are the <tr> (table rows) and <td> (table columns) tags.
An Example
<table border="1"> <tr> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> </tr> <tr> <td>Row 2 Cell 1</td> <td>Row 2 Cell 2</td> </tr> </table>
output
Spanning Multiple Rows and Cells

<table border="1"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td rowspan="2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td> <td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> <tr> <td colspan="3">Row 3 Cell 1</td> </tr> </table>
Use rowspan to span multiple rows and colspan to span multiple columns.
Cell Padding and Spacing
With the cellpadding and cellspacing attributes you will be able to adjust the white space on your tables.
Spacing defines the width of the border Padding represents the distance between cell borders and the content within. Ex. <table cellspacing=5 cellpadding=10 border=1>
The value you specify for padding and spacing is interpreted by the browser as a pixel value you. So a value of 10 is simply 10 pixels wide. Most attributes that use numeric values for their measurements use pixels.
Line Breaks
Line breaks are different then most of the tags we have seen so far. A line break ends the line you are currently on and resumes on the next line. Placing <br /> within the code is the same as pressing the return key in a word processor.
<p> Will Mateson<br /> Box 61<br /> Cleveland, Ohio<br /> </p>
HTML Horizontal Rule
Use the <hr /> tag to display lines across the screen.
Note: the horizontal rule tag has no ending tag like the line break tag.
HTML Layout

HTML layout is very basic. Not many options exist with the body tag alone. Tables on the other hand are the bread and butter of HTML layouts. Any element may be placed inside of a table including tables themselves.
Basic Layout 1
Basic Layout 2
END OF LECTURE

Management Information Systems and Computer Applications For Hospitality

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Management Information Systems and Computer Applications For Hospitality

Hochgeladen von

Copyright:

Verfügbare Formate

Management Information Systems and Computer Applications for Hospitality

Hypertext Mark-up Language (HTML)

Engr. Arthur N. Villanueva Jr.

What can I use HTML for?

Elements & Tags

Section of an HTML Document

<TITLE>My Home Page</TITLE>

Attributes of the <body> tag

HTML Color - bgcolor

HTML Color Coding System Color Names

HTML Coloring System - RGB Values

HTML Coloring System Hexadecimal

Text Formatting Tags

Attributes: TYPE: type of bullet or numeral VALUE: where to continue counting

Attribute type for <OL>

1. Turn left on Maple Street 2. Turn right on Clover Court

I makes the list use capital Roman Numerals

Attribute start for <OL>

START tells the browser what number to start counting at.

HTML Links and Anchors

Attributes of the <img> tag

<img src="images/logo.png" />

Spanning Multiple Rows and Cells

Cell Padding and Spacing

HTML Horizontal Rule

Das könnte Ihnen auch gefallen