html - Missouri State University

Transcript html - Missouri State University

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.
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
2
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
3
Parts of a Web Page


HTML markup (document) contains ________ (e.g.,
html element, head element, …)
XHTML markup has two major sections:



Elements are delimited with start and end ______.


_____ (information about the web page, not displayed)
Body (contains content visible in the browser window)
For example: <html></html>, <head></head>, …
Start tags can have ___________.

For example, <body bgcolor=“red”>
4
First HTML Example


<html>
<head>
<title> CIS 275 </title>
</head>
body
element
<body>
head
element
nested title
element:
start tag,
content, and end
tag
 Welcome to Web Application Development! 
</body>
</html>
___________
element
html end tag
5
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.
6
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
7
Basic XHTML Tags (2)

Line breaks




HTML comments




The tag is “________,” (no content, no closing tag).
 forces content to move to the next _______
Example: This is a paragraph with line
breaks
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.
8
Text Formatting

There are many tags used just for formatting text:






Carefully study the examples for the following:




, , <big> (bold, etc.)
, (__________, italicize)

, (subscript, ___________)
Example
<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
9
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.
10
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)
11
The name attribute of <a>


Used to create a specific destination (________) on a
page
Example:



Example:



<a name="tips">Useful Tips</a>
This text is given the name “tips” using the anchor tag.
<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.
12
“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


<a
href="mailto:[email protected]?subject=Hello%20a
gain">Send Mail</a>
<a
href="mailto:[email protected]?cc=someoneelse@
microsoft.com&[email protected]&sub
ject=Summer%20Party&body=You%20are%20invited%20t
o%20a%20big%20summer%20party!">Send mail!</a>
Notice that “_____” is used to create spaces
13
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.
14
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>

15
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 nonbreaking ______ ( ), used to create spaces in
an HTML document. (You could use the _____ tag.)
You can experiment using this example.
16
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>
17
More About Lists

Attributes of <ol>




Attributes of <ul>




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)
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)
18
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)
19
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.
20
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.
21
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)
22
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. 23

html - Missouri State University

Transcript html - Missouri State University

Directory