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
