HTML editors - Binus Repository

Transcript HTML editors - Binus Repository

Matakuliah
Tahun
Versi
: M0284/Teknologi & Infrastruktur E-Business
: 2005
: <<versi/revisi>>
Pertemuan 18
Programming Languages
for
E-Business/E-commerce
1
Learning Objectives
• Distinguish between the static and dynamic modes of a
Web page
• Define the current state of the practice in Web page
composition
• Practice with the most common events of DHTML
• Describe how the choice of image format affects
performance in the context of limited bandwidth
• Have a brief overview of programming options
• Understand the important trends coming in the near
future
• Comprehend the standardization effort of various
associations
2
Chapter Overview
•
•
•
•
Languages used on the WWW
Similarities and dissimilarities
Advantages and disadvantages
Understanding the newer technologies in
the offing
3
HTML editors
• Many editors available, range of attributes
starting from simple Windows Notepad
4
Business should consider
•
•
•
•
Use of standards
Style sheets
Dynamic HTML
Support for the scripting language
5
Features of HTML editors
•
•
•
•
•
•
•
•
•
•
•
Collaboration and site management
Database features (ODBC, email options)
Deployment features
Design features (JavaScript & VBScript support, easy
integration with CSS1 and CSS2, DHTML)
Visual wizard for forms, tables and frames
Support for image composition and mapping
Pixel-precise positioning
Drag and drop support
Preview
Syntax checking
Site navigation overview
6
HTML editing features
• Customizable templates
• HTML validation and cross XML
compliance tool.
• Search, replace, replace all features
• Supports Java applets, ActiveX, CGI
• Syntax coloring
• In-built DHTML scripts or wizard
• Import, view, play multi-media files (GIF,
JPEG, BMP, WAV and MIDI)
7
HTML editors
• MS FrontPage (integration with Microsoft IIS and
Windows NT platform) from Microsoft
• HomeSite with WYSIWYN (what you see is what you
need) from Macromedia/Allaire is very easy and intuitive
• 1rst Page 2000 from evrSoft (a freeware)
• XMetaL 2.0 and HoTMetaL PRO 6.0 from SoftQuad
• HotDog Professional from Sausage Software
• PageMill, GoLive from Adobe. GoLive provides websites
with dynamic links.
• Ultradev from Macromedia. Ultradev & Dreamweaver
and Fireworks. Ultradev has all the best features
required to build a fine site.
• Barebones for Apple users.
8
Advanced HTML and DHTML
• Dynamic behavior of a web page can be created
using many technologies, e.g. JavaScript,
VBScript, Document Object Model (DOM), and
Cascading Style Sheets (CSS).
• The display of the web page can be changed
after the page loads.
• Use of CSS for a uniform look and feel of the
whole website.
• Event-driven animation can be interactive and
interesting.
9
Additional HTML tags
• Tags <div> and <span>
• Advisable to use <div> as a generic
container.
• Box can be placed anywhere in the page
10
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional //EN”>
<HTML>
<STYLE type = “text/css”>
<!-#pic1{
POSITION: absolute;
Z-INDEX: 1;
LEFT: 30px;
TOP: 30px;
Visibility: visible}
-- >
</STYLE>
<BODY>
<div id= pic1>
<img src= “http://mis.mgmt.umb.edu/euni.gif” width= 100
height=50 alt= “ ” border = “0”>
</div>
</BODY>
</HTML>
11
DHTML contd.
• Both absolute positioning and relative
positioning are possible.
• With DHTML, less data has to be
downloaded, as there are no large bitmap
files.
12
Elements that DHTML can control
• Ability to hide and unhide portions of
pages.
• Display attributes of style sheets (text,
background, form field, images, frames,
tables and paragraphs).
• Animation effects, make them more
interactive and engaging
• Scroll bars, ticker objects
13
Events
•
•
•
•
•
•
•
•
OnBlur
OnFocus
OnLoad
OnAbort
OnChange
OnClick
OnError
OnKeyDown
14
Portable Document Format (PDF)
• PDF writer and distiller
• On any computer platform
– (DOS, Mac, Unix, Windows)
•
•
•
•
Preserves the format and looks
Can’t be modified, tampered with if protected
PDF Reader available free of cost to any user.
FrameMaker and Illustrator are able to write
PDF format.
• Corel with WordPerfect can export to the original
PDF format but cannot modify existing
documents.
• Can be setup as an add-in to MS Word
15
Cascading Style Sheets (CSS)
• More powerful
• More flexible
• Useful for designing consistent looking
web pages, like templates
• Designers will create style sheets and
apply them to any web page.
• Developers can define their own classes,
and new HTML elements.
16
CSS Fundamentals
• Style sheets have a defined order of
precedence
• CSS1 – by W3C, a set of style sheets or
statements that may determine how a
given element is presented in a web page
format, using Netscape and I.E. browsers.
17
Advantages of CSS
• Separation of style and layout of HTML files from their
informational content.
• Provides relative measurement for any size of monitor
screen or resolution.
• Avoid breaking existing pages because older browsers
simply ignore style sheets.
• Allow readers to influence the presentation of HTML
documents.
• Enable companies to implement a house look and feel
on their site, promote branding.
• Improve the printing of web documents instead of having
unpredictable HTML transfer to paper.
• Enable access to the web for people with disabilities
(larger fonts, variation of colors)
18
CSS2
• A newer standard proposed by W3C and
agreed upon by the industry for richer and
more accessible web pages.
• See latest news:
– http://www.w3.org/Style/CSS/#news
• New features – sidebars, navigation
scrollbars
• Images can be layered
• Control over table layout
19
Useful features of CSS
• Both absolute and relative measurements
can be applied
• Color control
• Fonts and texts can be formatted
• Position, alignment properties
• Spacing and areas (which includes
borders, margins, padding, width, height,
float property and clear property).
20
Example of a simple style
<html>
<head>
<title>Style sheet</title>
<style type = “text/css”>
<!-body {background: #FFFFFF}
A:link {color: #80FF00}
A:visited {color: #FF00FF}
H1 {font-size: 24pt; font-family: arial; color:blue}
H2 {font-size: 18pt; font-family: braggadocio}
H3 {font-size: 14pt; font-family: Desdemona}
-- >
</style>
</head>
<h1>this is heading 1 </h1>
<h2>heading 2</h2>
<h3>heading3</h3>
</body>
</html>
21
Tools supporting DHTML and style
sheets
• GoLive
• Dreamweaver and Ultradev
• Netobjects Fusion
22
Some Sharewares for creating style
sheets
•
•
•
•
TopStyle
CoffeeCup StyleSheet Maker + +
Prime Style
Style Master
23

HTML editors - Binus Repository

Transcript HTML editors - Binus Repository

Directory