Introduction - lillie
Download
Report
Transcript Introduction - lillie
Tools to Create Web Pages
Fall 2013
Tools
• Text Editors
– Notepad (free)
– Notepad++ (free)
• Word Processor
• Some HTML, some
WYSIWYG
• SeaMonkey (free)
• WYSIWYG
– Dreamweaver (expensive)
– Complete list of HTML Editors
• HTML
– http://en.wikipedia.org/wik
– HTML Kit (free, but there
i/List_of_HTML_editors
is a commercial version)
– MS Word (Expensive)
Text Editor:
Notepad
• Easy to use
• Doesn’t add clutter
to code
• Need to know HTML
• Not good for large
or complicated web
sites
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<big><big><b>Simple Web
Site</b></big></big><br>
<big><b><font color="#ff0000">Different Size
Fonts</font></b></big><br>
<small><small>Smaller</small></small><br>
<small>Small</small><br>
Regular<br>
<big>Medium</big><br>
<big><big>Large</big></big><br>
<big><big><big>Larger</big></big></big><br>
<big><big><big><big>Even
Larger</big></big></big></big>
</body>
</html>
Open with Notepad
Text Editor:
Notepad++
• Easy to use
• Doesn’t add clutter
to code
• Need to know HTML
• Not good for large
or complicated web
sites
• Provides color
coded syntax
checking
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<big><big><b>Simple Web
Site</b></big></big><br>
<big><b><font color="#ff0000">Different Size
Fonts</font></b></big><br>
<small><small>Smaller</small></small><br>
<small>Small</small><br>
Regular<br>
<big>Medium</big><br>
<big><big>Large</big></big><br>
<big><big><big>Larger</big></big></big><br>
<big><big><big><big>Even
Larger</big></big></big></big>
</body>
</html>
Open with Notepad++
Word Processor:
MS Word
• Familiar
• Adds formatting
capability
• Don’t need to know
HTML
• Can do more
complicated web sites
• WYSIWYG to some
extent
• Adds clutter to
maintenance
Sample MS Word Web Page
saved as HTML
Open in Web Browser
sampleWord.html
Open in Notepad++ or Notepad
sampleWord.txt
Open in MS Word
HTML Editor:
HTML Kit
• Work directly in HTML
• Has Preview tab
• Tabs to help format,
add links and objects
• Need to know HTML,
but has some help
• Can do more
complicated web sites
• More control over web
pages, but need to
know HTML
HTML Kit Example
Do HTML Kit demonstration
HTML/WYXIWYG Editor:
SeaMonkey
• See what the page looks
like as you develop it
• Can switch to HTML
• Provides better formatting
control, especially for
tables
• Keeps up with latest
changes to technology
• Can do some complicated
web things
• I use it primarily to work
with tables
SeaMonkey Example
Do SeaMonkey demonstration
WYSIWYG Editor:
Dreamweaver
• See what the page looks
like as you develop it
• Can switch to HTML
• Uses CSS for formatting
control
• Can work with Javascript
• Provides better formatting
control
• Keeps up with latest
changes to technology
• Can do complicated web
sites
Dreamweaver Example
Do Dreamweaver demonstration