Web Design Notes (01)

advertisement
HKCEE CIT (Mod D)
Web Design
Web Design (2)
Basic Web Design
Web Authoring Tools (Ref: Web Ch.8)
1. There are various tools to compose a web page. They are called HTML editors, Web Design
Software, or sometimes Web Authoring Tools, depending on the functionalities provided.
A list of HTML editors can be found at:
http://en.wikipedia.org/wiki/Comparison_of_HTML_editors
2.
Text Editors:
a) Since HTML is a plaintext file, it is possible to edit a web document by using text editor,
which is a basic tool in all operating systems.
Notepad is the default text editor in Windows
b) Some text editors have syntax highlighting function. Tags, attributes and values are
displayed in different colors to enhance reading .
Examples are Notepad2, NoteTab
Light, and Notepad++.
Notepad++ is a powerful open-source text editor, and can be downloaded at:
http://notepad-plus.sourceforge.net/tw/download.php?lang=tw
c)
Some HTML editors are advanced text editors providing extra functionality and control
over HTML codes. Some may also provide auto-complete function. Some may provide
buttons or shortcuts to add the codes for specific HTML elements, so that the author
doesn’t have to type all the codes.
Code completion in action.
(Software: CoffeeCup HTML Editor)
Supplementary Notes – Web Design (2)
P.1/4
HKCEE CIT (Mod D)
3.
Web Design
Some HTML editors provide WYSIWYG (What You See Is What You Get) feature so that
“content displayed during editing appears very similar to the final output”. These WYSIWYG
HTML editors has GUI, making the editing of a web page similar to that of a word processing
document. The author does not need to memorize the HTML codes.
Ref: http://en.wikipedia.org/wiki/WYSIWYG
4.
Integrated web authoring tool refers to software that provide not only web page editing but also
web site management functions. The author can manage the file structure of a web site, and
may also upload web files (or synchronize files between web server and local hard disk).
(Ref: Web pp.42-46).
5.
Web-based HTML editor provides basic functionalities for creation and modification of a web
page. The page is not downloaded as any local file, but is edited online.
a) Some web-hosting site provides online web page editing.
E.g. Google Sites (http://sites.google.com/)
b) “Most of the time, these html editors are used within content management systems where
administrators or authors can easily create posts and contents from the backend system.”
Ref: “15 Really Useful Web-based HTML Editors”
http://www.webdesignbooth.com/15-really-useful-web-based-html-editors/
Editing HTML (or XHTML) File
6. To start with, it’s better to use a free text editor with syntax highlighting.
7.
E.g. Notepad++.
Note that the file extension of an HTML file should be “.htm” or “.html”. Both of the
extensions are valid, and are recognized by the operating system as HTML file.
8.
As there are different (X)HTML standards, it is necessary to tell the web browser which
standard the web page follows. A doc-type tag <!DOCTYPE> is used:
a) It is optional (not required, but recommended).
b) It should be the very first thing in a web document, before the <html> tag.
c) It tells the browser which HTML or XHTML specification the document uses.
d) It has no end tag.
e) Document types:
i.
HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
ii. XHTML 1.0 Transitional  Recommended:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
iii. Other examples:
http://www.w3schools.com/tags/tag_doctype.asp
Supplementary Notes – Web Design (2)
P.2/4
HKCEE CIT (Mod D)
9.
Web Design
The first and the most basic HTML tag is <html>, together with its end tag </html>, telling
the web browser the start and the end of an HTML document.
10. A web page document normally contains two parts: head and body. The two tags <head>
and <body> should be the child elements of <html>.
a)
Head: It contains information about the web page (meta data), such as its title, character
set, keywords that may be useful to search engines, and other data.
i. Title: Every document must have a <title> element in the <head> section.
The title is shown at the title bar of a window.
ii. Meta data are defined using the <meta> tag. Example:
<meta name="author" content="Isaac Lau">
<meta name="keywords" content="web,html,xhtml">
iii. The character set (e.g. “big5”, “utf-8”) should also be specified in <head>.
If
character set is not specified, the web browser may not know the language and the text
may be garbled (displayed in unrecognizable characters).
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
b) Body:
It contains the document’s content that will be displayed in the browser window.
11. The following is an example of a simple web page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Testing Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="background: #ffffcc; font-family: arial, sans-serif">
<h1 style="text-decoration: underline">Testing</h1>
<p>It is a <strong>testing</strong>
page!</p>
<hr />
<img src="http://www.google.com/logos/autumn08.gif" alt="Google" />
<br />
<a href="http://www.google.com/">Google</a>
</body>
</html>
The word “testing” is bold.
(strong). Note that the
words appear on the same
line!
A hyperlink to Google. (a)
It starts on a new line! (br)
Heading (h1)
Horizontal Rule (hr)
The image of Google’s
logo. (img)
12. Other than typing the above example in a text editor, you can also try it here:
http://w3schools.com/html/tryit.asp?filename=tryhtml_basic
13. To validate your file (check whether it follows the specifications correctly):
http://validator.w3.org/
Supplementary Notes – Web Design (2)
P.3/4
HKCEE CIT (Mod D)
Web Design
Some Basic HTML Tags (Ref: Core Ch.12.3~5; Web Ch.7.3~7, Web Ch.10.2, Web Ch.11.1~3)
14. The following table shows some of the basic HTML tags. Note that some of the tags or the
attributes are DEPRECATED, which means that they are outdated and should be avoided.
Tag
Meaning
html
The whole HTML document.
head
It contains information about the document.
title
The title of document. Must be defined in <head>.
body
It contains document's content.
Attributes:
bgcolor: Background color [DEPRECATED]
background: Background image [DEPRECATED]
text: Text color [DEPRECATED]
link: Color of links [DEPRECATED]
vlink: Color of visited links [DEPRECATED]
alink: Color of active links [DEPRECATED]
h1,h2,h3,
h4,h5,h6
Headings, automatically bold, with extra space above and below.
and <h6> is the smallest one.
p
Paragraph.
br
Line break (i.e. opening a new line).
b,i,big,
small,tt,u
Font style elements: Bold, Italic, Bigger font, Smaller font, Teletype (monospaced text),
Underline. Note: <u> is in fact DEPRECATED.
sup,sub
Superscript and subscript.
font
It changes font size, color and typeface. Note: <font> is a DEPRECATED tag.
Attributes:
size: Possible values: 1~7 or relative size (e.g. “+1”) [DEPRECATED]
color: Text color [DEPRECATED]
face: Typeface [DEPRECATED]
em,strong,
cite,abbr
Phrase elements: Emphasis, Stronger emphasis, Citation, Abbreviation.
Note: The presentation of phrase elements depends on the user agent. Generally, visual user
agents present <em> text in italics and <strong> text in bold font.
Speech synthesizer
user agents may change the synthesis parameters, such as volume, pitch and rate
accordingly.
blockquote,q
Quotations: long quotation (block-level content) and short quotation (inline content).
pre
Preformatted text.
ins,del
<ins> and <del> are used to markup sections of the document that have been inserted or
deleted with respect to a different version of a document.
http://www.w3.org/TR/html401/struct/text.html#h-9.4
div,span
Generic elements: block-level and inline. Block-level element begins on new line.
structural meaning, but no presentational effects.
hr
Horizontal rule. A horizontal line is displayed.
No end tag, type “<hr />” for
XHTML.
Attributes:
align: Alignment (right,center,left). Default is center. [DEPRECATED]
size: Height [DEPRECATED]
width: Width [DEPRECATED]
<h1> is the largest one
Space is added between two paragraphs.
No end tag, type “<br />” for XHTML.
Text is displayed as how it is typed in the HTML document.
It has
15. Note: in HTML, white spaces and new lines are all interpreted as a separation only (except
within the <pre> element). To add extra spaces, the non-breaking space character
(&nbsp;) should be use. To start a new line, the link break tag <br> should be used.
Supplementary Notes – Web Design (2)
P.4/4
Download
Related flashcards
Web colors

17 Cards

Web design

34 Cards

Web design

12 Cards

Web designers

34 Cards

Create flashcards