Chapter 2 - Web Design Tools
Download
Report
Transcript Chapter 2 - Web Design Tools
Publishing on the World Wide Web
Web technology is constantly changing.
A new browser feature or a wireless handheld
device seemingly revolutionizes the way the
world accesses the Internet.
As soon as these new technologies surface,
some Web designers charge ahead to
implement these latest advances at their
sites.
1.
2.
3.
4.
5.
6.
As a Web designer, you should ask the following
questions:
Does the new technology meet currently accepted
standards for Web development and design?
What specifically can the new technology do to further
the purpose of my Web sites?
How will implementation of the new technology affect
Web site’s visual appeal, accessibility and usability?
What impact will adding this technology have on security
and other Web site elements?
What are the direct and indirect costs of implementing
the new technology?
How soon will I see a return on investing in this new
technology?
A markup language is a coding system that uses
tags to provide instructions about the
appearance, structure, and formatting of a
document.
The markup languages used to create Web
pages are:
HTML
XML
XHTML
WML
DHTML
1.1 HTML
The Hypertext Markup language (HTML) is a
markup language used to create Web pages.
A markup language is a set of markup tags
HTML documents are described by HTML
tags
Each HTML tag describes different document
content
HTML tags are keywords (tag names) surrounded
by angle brackets:
<tagname>content</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag
is the end tag
The end tag is written like the start tag, but with
a slash before the tag name
Example of HTML document
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Outcome on your web browser
1.
2.
3.
4.
5.
6.
Example explained
The text between <html> and </html> describes an
HTML document
The text between <head> and </head> provides
information about the document
The text between <title> and </title> provides a title
for the document
The text between <body> and </body> describes
the visible page content
The text between <h1> and </h1> describes a
heading
The text between <p> and </p> describes paragraph
1.2 XML
XML stands for EXtensible Markup
Language.
XML is a markup language much like HTML.
XML was designed to describe data, not to
display data.
XML tags are not predefined. You must define
your own tags
XML is designed to be self-descriptive
XML and HTML were designed with different
goals:
1. XML was designed to describe data, with
focus on what data is
2. HTML was designed to display data, with
focus on how data looks
The following example is a note to Wani,
from Lebai, stored as XML:
<note>
<to>Wani</to>
<from>Lebai</from>
<heading>Peringatan</heading>
<body>Hang bawak bas elok-elok
wani</body>
</note>
The example note is quite self descriptive. It
has sender and receiver information, it also
has a heading and a message body.
But still, this XML document does not DO
anything. It is just information wrapped in
tags. Someone must write a piece of software
to send, receive or display it.
1.3 XHTML
XHTML stands for
EXtensible HyperText Markup Language.
XHTML is almost identical to HTML.
XHTML is stricter than HTML.
XHTML is HTML defined as an XML
application.
XHTML is supported by all major browsers.
1.
2.
3.
Why XHTML?
Many pages on the internet contain "bad" HTML.
This HTML code works fine in most browsers (even if it does not follow the
HTML rules):
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>
4.
5.
Today's market consists of different browser technologies. Some browsers run
on computers, and some browsers run on mobile phones or other small
devices. Smaller devices often lack the resources or power to interpret "bad"
markup.
XHTML can overcome this problem by following the strict HTML rules.
1.4 WML
Stand for Wireless Markup Language
(WML).
WML is an XML language used to specify
content and user interface for Wireless
Application Protocol (WAP) devices like PDA
and Mobile Phones.
1.5 DHTML
Dynamic Hyper Text Markup Language
(DHTML) is a combination of Web development
technologies used to create dynamically
changing websites.
Web pages may include animation, dynamic
menus and text effects.
The technologies used include a combination of
HTML and JavaScript/ VBScript/ CSS
Designed to enhance a Web user’s
experience, DHTML includes the following
features:
1. Dynamic content, which allows the user to
dynamically change Web page content.
2. Dynamic positioning of Web page
elements.
3. Dynamic style, which allows the user to
change the Web page’s color, font, size or
content.
CSS stands for Cascading Style Sheets.
Styles define how to display HTML
elements.
Styles were added to HTML to solve a
problem.
External Style Sheets can save a lot of work.
External Style Sheets are stored in CSS files
(.css)
CSS Example
A CSS declaration always ends with a
semicolon, and declaration groups are
surrounded by curly braces:
p {color:red; text-align:center;}
Scripting languages used to write short programs,
called scripts, that execute in real time at the server or
in the Web browser when a Web page is downloaded.
Scripts are used to make Web pages dynamic and
interactive by adding such features as multimedia,
animation and form or by connecting web pages to
underlying database.
3 types of scripting languages
1. JavaScript
2. ASP (Active Server Pages)
3. PHP (Hypertext Preprocessor)
4. MySql
3.1 JavaScript
JavaScript is a scripting language designed
primarily for adding interactivity to Web
pages and creating Web applications.
Example of JavaScript
<html>
<body>
<h1>What Can JavaScript Do?</h1>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello
JavaScript!'">
Click Me!</button>
</body>
</html>
Result of the example
Before
After
3.2 ASP
ASP stands for Active Server Pages
ASP is a Microsoft Technology
ASP is a program that runs inside IIS
IIS stands for Internet Information Services
IIS comes as a free component with Windows
2000, Vista, 7 and 8.
Internet Information Server (IIS) is a group of
Internet servers from Microsoft that can be
installed with its Windows operating systems.
What is an ASP File?
An ASP file is just the same as an HTML file.
An ASP file can contain text, HTML, XML, and
scripts.
Scripts in an ASP file are executed on the
server.
An ASP file has the file extension ".asp"
What can ASP do for you?
Dynamically edit, change, or add any content
of a Web page.
Respond to user queries or data submitted
from HTML forms.
Access any data or databases and return the
results to a browser.
3.3 PHP
PHP is an acronym for "PHP: Hypertext
Preprocessor"
PHP is a widely-used, open source scripting
language
PHP scripts are executed on the server
PHP is free to download and use
What is a PHP File?
PHP files can contain text, HTML, CSS,
JavaScript, and PHP code
PHP code are executed on the server, and the
result is returned to the browser as plain
HTML
PHP files have extension ".php"
What Can PHP Do?
PHP can generate dynamic page content
PHP can create, open, read, write, delete, and
close files on the server
PHP can collect form data
PHP can send and receive cookies
PHP can add, delete, modify data in your
database
PHP can be used to control user-access
3.4 MySql
MySQL is a database system used on the web
MySQL is a database system that runs on a server
MySQL is ideal for both small and large applications
MySQL is very fast, reliable, and easy to use
MySQL uses standard SQL
MySQL compiles on a number of platforms
MySQL is free to download and use
MySQL is developed, distributed, and supported by
Oracle Corporation
MySQL is named after co-founder Monty Widenius's
daughter: My
PHP combined with MySQL are cross-platform
You can create a simple Web page by typing
HTML tags and related text into a document
created in a plain text editor, such as Notepad.
A text editor is software used to create plain
(ASCII) text files.
Some Web designers or programmers prefer to
use an HTML editor to create Web pages.
An HTML editor is a text editor enhanced with
special features that are used to more easily
insert HTML tags and their attributes. Example
HTML-Kit, CoffeeCup, BBEdit, and NoteTab.
Text Editor
Text editor enable
you to view and
edit the code.
HTML Editor
HTML editors have
tools to assist you in
editing and entering
HTML code
Many Web designers use WYSIWYG Editor,
such as Adobe Dreamweaver, InnovaStudio,
Ephox EditLive! and Microsoft Expression Web to
create Web site.
WYSIWYG stands for “what you see is what
you get”.
Inserting and formatting text and inserting
images or links in Web page using a WYSIWYG
editor is similar to creating a document in a word
processor, such as Microsoft Word.
Additionally, using a WYSIWYG editor to
create Web pages eliminates the need to
learn a markup language, which can involve
complex coding procedures. Because the
WYSIWYG editor automatically generates
the underlying markup language tags as you
insert and format text, images and links.
Most WYSIWYG editors also allow you to
view and manipulate the underlying HTML
code, if desired.
Additional benefits of suing WYSIWYG
editors include the capability to create Web
pages rapidly and the opportunity to become
familiar with HTML at a pace you choose.
Adobe Dreamweaver
With little or no knowledge of HTML or other
Web design tools, users can quickly create a
Web site using Web Template or a Content
Management System.
A Web template is a predesigned model Web
page that you can customize for fast Web site
creation or updating.
Example of Web template:
1. DreamTemplate
2. TemplateWorld
3. TemplateMonster
4. Yahoo! Small Business
Yahoo! Small Business
DreamTemplate
A content management system (CMS) is a
software system that provides authoring and
administrative tools that enable the
management of Web content development,
including authoring, reviewing, editing and
publishing.
Many content management systems offer a
Web-based GUI, enabling publishers to
access the CMS online using only a Web
browser.
A major advantage of using a CMS is that it
requires almost no technical skill or
knowledge to manage.
Example of an award-winning content
management system (CMS) is Joomla.
Example of Web page using Joomla