html your friend or foe? and a little bit from lazar
Post on 20-Dec-2015
221 views
TRANSCRIPT
![Page 1: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/1.jpg)
HTML
Your Friend or Foe?
and a little bit from Lazar
![Page 2: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/2.jpg)
Some Terms. . .
HTML: Hypertext Markup Language SGML: Standard Generalized Markup
Language DTD: Document Type Definitions HTML is a SGML DTD used on the WWW
![Page 3: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/3.jpg)
What does HTML Do?
HTML script uses a code called a tag to describe how items should look
HTML uses a syntax that is supposedly generally agreed upon to make it portable
![Page 4: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/4.jpg)
Specifications or Standards
The World Wide Web Consortium (W3) 0.0, 1.0, 2.0, 3.2, 4.0, 4.01 (recent) xhtml 1.1 http://www.w3.org Proprietary code problems
![Page 5: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/5.jpg)
Ways to Write HTML
HTML Converters (Word, StarOffice) HTML Editors
WYSIWYG WYSIWAG
UNIX Editors (pico, jpico, vi, emacs) Notepad ;} EditPlus
![Page 6: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/6.jpg)
Creating an HTML Document (AKA Web page)
Let’s look at Mary’s Resume. . .
![Page 7: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/7.jpg)
Creating an HTML Document (AKA Web page) - cont.
Document Content -- controlled by HTML Tags
<tag name Properties>
Document Content
</tag name>
![Page 8: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/8.jpg)
HTML Tags
<h1 align=center> Mary Taylor </h1>
Different Browsers interpret tags . . . differently.
<font size = "4"> Mary Taylor </font> A different approach
![Page 9: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/9.jpg)
More HTML Tags
<html><head><title></title></head><body>
</body></html>
![Page 10: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/10.jpg)
Subtle Differences. . .
h tags versus font tags <h1> versus <font size=1> spacing bold
the align property (3.2 and higher) the <p> tag -- to </p> or not to </p>? your friend the <br>
![Page 11: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/11.jpg)
Lists
Unordered Ordered Definition
![Page 12: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/12.jpg)
Unordered Lists
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</li> and a </p> are optional right now, but this is changing
![Page 13: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/13.jpg)
Ordered Lists
<ol>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
</ol>
![Page 14: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/14.jpg)
Definition List
<dl>definition list
<dt>definition term
<dd>definition
<dt>
<dt>
<dd>
</dl>
![Page 15: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/15.jpg)
Options on Lists
Unordered List <ul type=disk> <ul type=circle> <ul type=square>
Ordered List <ol type=[1,i,A,a] start=[1,i,A,a]>
Let's Look
![Page 16: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/16.jpg)
Using Notepad and Browser
Saving the file as “foo.htm” (or foo.html) Making sure to save it as "All Files (*.*)" Looking at file in browser
Saving before looking
![Page 17: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/17.jpg)
Character Tags
physical versus logical physical: exactly how you want the text to
appear -- <b>, <i>, <big>, <small> (big and small are html 3.0 and above)
logical: how you want to use the text -- <em>, <strong>, <var>, <cite>, <code>, <kbd>
when to use one over another?
![Page 18: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/18.jpg)
Example
<em><strong>
satellite technician
</strong></em>
<i><b>
satellite technician
</b></i>
![Page 19: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/19.jpg)
Horizontal Lines
<hr>
<hr align=center>
<hr size="12">
<hr width="30%"><hr width="15"> <hr align=center size="12" width="30%">
![Page 20: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/20.jpg)
More Line Options
More Options <hr noshade><p> <hr noshade size="8"><p>
With Explorer <hr color="#ff0000"><p> <hr size="10" width=30% color="green">
Let’s Look
![Page 21: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/21.jpg)
Inserting Images
Inline Image Appears directly on the Web page
External Image Browser needs a file viewer
![Page 22: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/22.jpg)
Image Tag
<img src = “filename”>
GIF versus JPEG
Needs to be one of them
![Page 23: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/23.jpg)
Two Ways to Center
<p align=center><img src=“taylor.gif”></p> (3.x and above)
<center><img src=“taylor.gif”></center>
Filenames are case sensitive!
![Page 24: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/24.jpg)
Lifecycle and Evolutionary
SDLC Hoffer, George, and Valacich Whitten and Bentley
Evolutionary Spiral model
Risk factors
End user plays somewhat of a role
![Page 25: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/25.jpg)
Lazar User-Centered Web Development Lifecycle
Define the mission of the Website and the user population
Collect the user requirements for the Website
Create the conceptual design of the Website
![Page 26: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/26.jpg)
Lazar User-Centered Web Development Lifecycle (cont.)
Create the physical design of the Website Perform usability testing on the Website Implement and market the Website Evaluate and improve the Website
![Page 27: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/27.jpg)
Challenges to Web Development
Browser Type Browser Version Screen Size Operating System Download Time Infrequency of use
Users don’t use your site all the time Some exceptions, of course
![Page 28: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/28.jpg)
Clients versus Users
Melding Mission with Need Determining User base Negotiating soltions
![Page 29: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/29.jpg)
Clients
Client versus User Not the same people
Make sure the client has a clear purpose Make sure the client is committed Keep client frequently updated Learn the client's interaction style and use it
to your advantage Meld client mission with user needs
![Page 30: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/30.jpg)
Mission of the Website
Type of Website Informational E-Commerce Entertainment
Target Population local, international audience-split?
WMU site
![Page 31: HTML Your Friend or Foe? and a little bit from Lazar](https://reader035.vdocuments.us/reader035/viewer/2022062714/56649d425503460f94a1d55d/html5/thumbnails/31.jpg)
Let’s Set Up Your Site