chapter 2: the client side: html

Chapter 2: The Client Side: HTML

CIS 275—Web Application Development for Business I

2

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

3

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

4

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

5

First HTML Example



<html> <head> <title> CIS 275 </title> </head>

<body> Welcome to Web Application Development! </body></html>

HTML __________

head element nested title

element: start tag,

content, and end tagbody

element

___________ element

html end tag

6

HTML Elements HTML tags

All text associated with a pair of HTML tags, such as This text is bold., 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. (, not )

Tag attributes In the tag <body bgcolor=“red”>, bgcolor is an ________

of <body>. Attribute ______ should be in double quotes.

7

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 Text between and is not ___________, but

will have a blank line before and after. Example: This is a paragraph This is

another paragraph

8

Basic XHTML Tags (2) Line breaks

The tag is “________,” (no content, no closing tag).

 forces content to move to the next _______ Example: This is a paragraph with

line breaks HTML comments

Comments begin with  Comments are used to ________ your HTML code Example: 

Miscellaneous Browsers _______ spaces and blank lines you try to add <hr /> will add a horizontal _______ or line.

9

Text Formatting There are many tags used just for formatting

text: , , <big> (bold, etc.) , (__________, italicize) , (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

10

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.

11

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)

12

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.

13

“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

14

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.

15

A Simple Example The file “buttonnext.gif” is in the same directory as the

page.<html><body> 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> </body></html>

16

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 <. The most common character entity is the non-

breaking ______ ( ), used to create spaces in an HTML document. (You could use the _____ tag.)

You can experiment using this example.

17

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>

18

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)

19

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)

20

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.

21

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.

22

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)

23

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.

chapter 2: the client side: html

Documents