Chapter 2 the client side html
This presentation is the property of its rightful owner.
Sponsored Links
1 / 23

Chapter 2: The Client Side: HTML PowerPoint PPT Presentation


  • 88 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

Chapter 2: The Client Side: HTML

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

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

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.


  • Login