Chapter 2 the client side html
1 / 23

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

  • 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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
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


  • 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 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 -->



<title> CIS 275 </title>



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



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


  • 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="">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="” 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

    • <a href="mailto:[email protected]?subject=Hello%20again">Send Mail</a>

  • Complex example

    • <a href="mailto:[email protected][email protected]&[email protected]&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">Send mail!</a>

  • Notice that “_____” is used to create spaces


  • 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.




    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" >





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.


  • There are three kinds of XHTML lists:

    • Ordered (displays items numbered 1, 2, …)





    • _________ (use ____ instead of <ol>, displays bullets)

    • Definition (displays formatted _______ and definitions)



      <dd>Black hot drink</dd>


      <dd>White cold drink</dd>


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)


  • 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

  • The URL for the page page1.htm would be in the format

  • If you have a home page named ___________, you can use the URL 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

  • Go to

  • 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 .

  • At, 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.