chapter 2 the client side html
Download
Skip this Video
Download Presentation
Chapter 2: The Client Side: HTML

Loading in 2 Seconds...

play fullscreen
1 / 23

Chapter 2: The Client Side: HTML - PowerPoint PPT Presentation


  • 147 Views
  • Uploaded on

Chapter 2: The Client Side: HTML. CIS 275—Web Application Development for Business I. Introduction. Some HTML facts HTML stands for “hypertext _________ language” An HTML file is a _______ file containing content surrounded by HTML ______ that define structure.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Chapter 2: The Client Side: HTML' - athena-lawrence


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
chapter 2 the client side html

Chapter 2: The Client Side: HTML

CIS 275—Web Application Development for Business I

introduction
Introduction
  • Some HTML facts
    • HTML stands for “hypertext _________ language”
    • An HTML file is a _______ file containing content surrounded by HTML ______ that define structure.
    • HTML files must have extensions ._____ or ._______
    • HTML files can be created in a text ________ (like Notepad) or an HTML editor (like _____________)
  • Steps in creating and viewing a simple HTML file
    • Open Notepad
    • Type valid HTML _________ code (tags and content)
    • Save file as myfirstpage.htm (for example) on your disk
    • Double-click this file to open it in your default browser
more about html
More About HTML
  • HTML is a ________ language that “marks up” or formats content.
  • HTML is NOT a ____________ programming language like Java or VB.NET.
  • See http://www.w3schools.com for helpful tutorials
parts of a web page
Parts of a Web Page
  • HTML markup (document) contains ________ (e.g., html element, head element, …)
  • XHTML markup has two major sections:
    • _____ (information about the web page, not displayed)
    • Body (contains content visible in the browser window)
  • Elements are delimited with start and end ______.
    • For example: <html></html>, <head></head>, …
  • Start tags can have ___________.
    • For example, <body bgcolor=“red”>
first html example
First HTML Example

<!-- main.html -->

<!-- Our first Web page -->

<html>

<head>

<title> CIS 275 </title>

</head>

<body>

<p> Welcome to Web Application Development! </p>

</body>

</html>

HTML __________

head element

nested title element:

start tag, content, and end tag

body element

___________ element

html end tag

html elements
HTML Elements
  • HTML tags
    • All text associated with a pair of HTML tags, such as <b>This text is bold.</b>, is called an HTML _________.
    • Most tags come in pairs, a start tag and an ______ tag.
    • A tag is surrounded by < and >, called _______ brackets.
    • An end tag must contain a ____.
    • Text between tags is called element __________.
    • HTML tags should be _______ case. (<p>, not <P>)
  • Tag attributes
    • In the tag <body bgcolor=“red”>, bgcolor is an ________ of <body>.
    • Attribute ______ should be in double quotes.
basic html tags 1
Basic HTML Tags (1)
  • Headers
    • Use the tags <h1> (_______) through <h6> (_______)
    • Headers are totally unrelated to the ________ tag.
    • The purpose of headers is to provide text with standard sizes, bolded, with a _______ line before and after.
    • Example: <h3>Rules of the game:</h3>
  • Paragraphs
    • Use the tag <p>
    • Text between <p> and </p> is not ___________, but will have a blank line before and after.
    • Example: <p>This is a paragraph</p> <p>This is another paragraph</p>
basic xhtml tags 2
Basic XHTML Tags (2)
  • Line breaks
    • The <br> tag is “________,” (no content, no closing tag).
    • <br> forces content to move to the next _______
    • Example: <p>This <br> is a para-<br>graph with line breaks</p>
  • HTML comments
    • Comments begin with <!-- and end with -->
    • Comments are used to ________ your HTML code
    • Example: <!-- File modified on 5/12/07 -->
  • Miscellaneous
    • Browsers _______ spaces and blank lines you try to add
    • <hr /> will add a horizontal _______ or line.
text formatting
Text Formatting
  • There are many tags used just for formatting text:
    • <b>, <strong>, <big> (bold, etc.)
    • <em>, <i> (__________, italicize)
    • <small>
    • <sub>, <sup> (subscript, ___________)
    • Example
  • Carefully study the examples for the following:
    • <pre> (____________ text, preserves your formatting)
    • <abbr> and <acronym> (abbreviations and acronyms)
    • <blockquote> and <q> (quotations)
  • Important: You can view and save a web page’s HTML code by clicking View, ________ in IE
links
Links
  • A hyperlink is an object on a Web page used to __________ another Web page or other file.
  • The <a> tag and the href attribute
    • <a> is called the __________ tag.
    • <a> is a little odd because it is used to create a hyperlink and to create a ___________ for a hyperlink.
    • The value of the href attribute is the ______ (destination) of the hyperlink.
  • Example:
    • <a href="http://www.w3schools.com/">Visit W3Schools!</a>
    • Tip: Always add a trailing ___ to subfolder references.
the target attribute of a
The target attribute of <a>
  • Determines how the result will be displayed
  • Example: <a href="http://www.w3schools.com/” target=“_blank”>Visit W3Schools!</a> (page will display in a _____ window)
  • Other target values:
    • _self (_______ window, default)
    • _parent (_______ window when using frames)
    • _top (_______ window, to break out of frames)
the name attribute of a
The name attribute of <a>
  • Used to create a specific destination (________) on a page
  • Example:
    • <a name="tips">Useful Tips</a>
    • This text is given the name “tips” using the anchor tag.
  • Example:
    • <a href= “homepage.htm#tips"> Read the Useful Tips section</a>
    • This link goes to the anchor (bookmark) named “tips”
  • Use bookmarks to identify major sections of a page for the purpose of linking to them.
mailto value of href
“mailto:...” value of href
  • The following example creates an entire e-mail message (if e-mail software is installed on the _____)
  • Simple example
  • Complex example
  • Notice that “_____” is used to create spaces
images
Images
  • Images are added to web pages with the _____ tag.
  • The key attribute of the <img> tag is _____, which specifies the ______ of the graphics file.
  • The _____ attribute specifies the alternative text that appears when the pointer is positioned over a pic.
  • Images take time to load, so use them carefully.
  • Other information about images:
    • You can use the background attribute of the <body> tag
    • <img> has attributes align, height, width
    • Place the <img> tag between <a></a> to make it a link
  • Check the examples for more information.
a simple example
A Simple Example
  • The file “buttonnext.gif” is in the same directory as the page.

<html>

<body>

<p>

You can also use an image as a link:

<a href="lastpage.htm">

<img border="0" src="buttonnext.gif"

alt="Go to last page"width="65"

height="38" >

</a>

</p>

</body>

</html>

character entities
Character Entities
  • Certain characters (such as <) have special meaning in an HTML document and cannot be used as _________.
  • Other characters don’t exist on the __________.
  • In either case, a character _______ must be used instead.
  • E.g., a < must be written as _____ or &#60;.
  • The most common character entity is the non-breaking ______ (&nbsp;), used to create spaces in an HTML document. (You could use the _____ tag.)
  • You can experiment using this example.
lists
Lists
  • There are three kinds of XHTML lists:
    • Ordered (displays items numbered 1, 2, …)

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

    • _________ (use ____ instead of <ol>, displays bullets)
    • Definition (displays formatted _______ and definitions)

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

more about lists
More About Lists
  • Attributes of <ol>
    • type (possible values are “1”, “A”, “a”, “I”, “i”)
    • Example: <ol type=“i”> for lower case _______ numerals
    • type is _________ (do not use, use styles instead)
  • Attributes of <ul>
    • type (possible values are “disc”, “circle”, “square”)
    • Example: <ul type=“circle”> for open circle bullets
    • type is deprecated (do not use, use styles instead)
  • A nested list
    • A new list is placed within _________ (see example)
backgrounds
Backgrounds
  • The <body> tag has two attributes associated with backgrounds, __________ (for a color) and background (for an _______).
    • These are deprecated in HTML 4.01—CSS recommended.
  • The value of the bgcolor attribute can be a ___________ code, an ____ triplet, or a color _____.
  • You should be very careful in your selection of a background image for style and readability reasons.
  • About _____ million colors are available using 256 different shades each for red, green, and blue.
    • Hexidecimal ranges: #000000 (black) to #FFFFFF (white)
color calculations
Color Calculations
  • Hexadecimal code uses base ___. The symbols used are 0-9 and A=10, B=11, C=12, D=13, E=14, F=15.
  • A hexadecimal number such as AC = A x 16 + C x 1 = 10 x 16 + 12 x 1 = _____.
  • To convert a decimal number to hexadecimal, you divide by ____. For example, 209 /16 = 13 r 1 = D1.
  • Since all colors are combinations of 256 values for red, green, and ______,
    • #000000 = rgb(0, 0, 0) = black
    • #FFFFFF = rgb(255, 255, 255) = white
    • #17B4AA = rgb(23, 180, 170) = some kind of teal
    • See W3C’s pages for colors, color values, and color names.
placing web pages on magenta
Placing Web Pages on Magenta
  • First, set up your account at https://cams.missouristate.edu/selfservice/
  • The URL for the page page1.htm would be in the format http://www.student.missouristate.edu/r/raj127f/page1.htm
  • If you have a home page named ___________, you can use the URL http://www.student.missouristate.edu/r/raj127f/ to load that page.
copying files to magenta
Copying Files to Magenta
  • Open you web folder on Magenta:
    • Select Start, ______
    • Enter \\magenta, click OK
    • Open the Web folder, open the folder with the name that is the first letter in your userid, open the folder with the name that is your userid
    • Do NOT delete any _________ folders or files in your web folder on Magenta
    • Copy all HTML documents to the ______ directory of your web folder (or create subfolders to hold your HTML files)
    • All multimedia files should be placed in the ________ folder (you may want to put sound files or movie files in their own special folders)
creating a site on tripod com
Creating a Site on Tripod.com
  • Go to http://www.tripod.lycos.com/.
  • Select New Users: Sign Up
  • Select Tripod Free Sign Up (free hosting displays ads)
  • Complete Step 1: Membership
  • Complete Step 2: Confirmation
  • If your username is “cis275msu”, your URL is http://cis275msu.tripod.com/ .
  • At http://www.tripod.lycos.com/build/index.html, you can use Tripod’s HTML Editor or File Manager.
  • Things are a lot easier if you use FrontPage or Dreamweaver to create, edit, and publish pages.
ad