Download - 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
<!-- 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 tagbody
element
___________ element
html end tag
6
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.
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 <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>
8
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.
9
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
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> <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>
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.