• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Hypertext Mark-Up Language

Hypertext Mark-Up Language






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Hypertext Mark-Up Language Hypertext Mark-Up Language Presentation Transcript

    • Management Information Systems and Computer Applications for Hospitality Hypertext Mark-up Language (HTML) Engr. Arthur N. Villanueva Jr. Instructor
    •  the "mother tongue" of your browser  invented in 1990 by a scientist called Tim Berners- Lee  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 is HTML?
    • 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 - 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. <OL TYPE=1> <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 makes the list use capital letters <OL TYPE=A> <LI>Turn left on Maple Street <LI>Turn right on Clover Court </OL> A. Turn left on Maple Street B. Turn right on Clover Court a makes the list use lowercase letters <OL TYPE=a> <LI>Turn left on Maple Street <LI>Turn right on Clover Court </OL> a. Turn left on Maple Street b. Turn right on Clover Court I makes the list use capital Roman Numerals <OL TYPE=I> <LI>Turn left on Maple Street <LI>Turn right on Clover Court </OL> I. Turn left on Maple Street II. Turn right on Clover Court i makes the list use lowercase Roman Numerals <OL TYPE=i> <LI>Turn left on Maple Street <LI>Turn right on Clover Court </OL> i. Turn left on Maple Street ii. Turn right on Clover Court
    • Example this code produces this <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> 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 produces this 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> 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 produces this <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> 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
    • Attribute Values ValueDescription  _blank Load in a new window  _self Load in the same frame as it was clicked  _parent Load in the parent frameset  _top Load in the full body of the windowframenameLoad in a named frame
    • Examples  Internal link:  <a href="resumepage.html">my resume</A>  Local Link:  <a href="page2.htm">Go to page 2</a>  Global link:  <a href="http://www.yahoo.com/">Yahoo!</a>  Link to email:  <a href="mailto:nobody@html.net">E-mail at HTML.net</a>
    • 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  Use rowspan to span multiple rows and colspan to span multiple columns. <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>
    • 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