introduction to html....
TRANSCRIPT
Introduction to HTMLIntroduction to HTML
_______________________________________________________________________________________________________________2
OutlineOutline
Key issues on website development Key issues on website development Web page design and production techniquesWeb page design and production techniquesOverview of HTML Overview of HTML Basic HTML tags on Web page design such as:Basic HTML tags on Web page design such as: HyperlinksHyperlinks Images & Image mapsImages & Image maps HTML TablesHTML Tables HTML FramesHTML Frames HTML FormsHTML FormsOther advanced techniques such as Cascading Other advanced techniques such as Cascading Style sheets and JavaScriptStyle sheets and JavaScript
_______________________________________________________________________________________________________________3
Important Factors in Website Important Factors in Website DevelopmentDevelopment
Major factors in website development:Major factors in website development: ContentContent UsabilityUsability Download timeDownload time Browser compatibilityBrowser compatibility Screen sizeScreen size NavigationNavigation AudienceAudience Data validationData validation
_______________________________________________________________________________________________________________4
Additional Factors in Website Additional Factors in Website Development Development
Other factors which make up a usable Other factors which make up a usable user interface:user interface: System feedbackSystem feedback ConsistencyConsistency Error preventionError prevention Performance/efficiencyPerformance/efficiency User like/dislikeUser like/dislike Error recoveryError recovery
_______________________________________________________________________________________________________________5
Website Design & ProductionWebsite Design & Production
Major steps in Web page design and Major steps in Web page design and production:production: Define audiences and the information Define audiences and the information
requirementsrequirements Develop logical design of the Web site Develop logical design of the Web site Develop the perceptual designDevelop the perceptual design Content creationContent creation ProgrammingProgramming Posting and hosting the sitePosting and hosting the site
_______________________________________________________________________________________________________________6
Overview of HTMLOverview of HTML
Hypertext Markup Language (HTML) is a Hypertext Markup Language (HTML) is a markup language for telling a Web browser how markup language for telling a Web browser how to format and display a Web pageto format and display a Web pageIt is a subset of the Standard Generalized It is a subset of the Standard Generalized Markup Language (SGML) - a formal markup Markup Language (SGML) - a formal markup language for defining document format. language for defining document format. HTML employs pre-defined tags to specify the HTML employs pre-defined tags to specify the format of a web page. format of a web page. For example, by putting the word “Italics” inside For example, by putting the word “Italics” inside the <I></I> tag pairs (i.e., <I> Italics </I>), the the <I></I> tag pairs (i.e., <I> Italics </I>), the word “Italics” will be displayed by the Web word “Italics” will be displayed by the Web browser in browser in ItalicsItalics form. form.
_______________________________________________________________________________________________________________7
HTML – Basic FormatHTML – Basic Format
The basic structure of a HTML document is The basic structure of a HTML document is formed by the following tags:formed by the following tags:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Final//EN”><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Final//EN”>
<HTML><HTML>
<HEAD><HEAD>
<TITLE> ... </TITLE><TITLE> ... </TITLE>
</HEAD></HEAD>
<BODY><BODY>
......
</BODY></BODY>
</HTML></HTML>
_______________________________________________________________________________________________________________8
Basic HTML tags and a Basic HTML tags and a simple examplesimple example
<<htmlhtml>>
<<headhead>><<titletitle>A simple web page<>A simple web page</title/title>>
<</head/head>>
<<bodybody>><<h1 h1 align="align="centercenter"">First level heading<>First level heading</h1/h1>><<h2h2>Second level heading<>Second level heading</h2/h2>><<pp><><font font face="face="CourierCourier" size="" size="44"">The font face is Courier and the >The font face is Courier and the
font size is 15pt.<font size is 15pt.</font/font><></p/p>><<pp><><font font color="color="#FF0000#FF0000"">The font color is red.<>The font color is red.</font/font><></p/p>><<pp><><emem>The text is in italic form.<>The text is in italic form.</em/em><></p/p>><<pp><><uu>The text is underlined.<>The text is underlined.</u/u><></p/p>><<pp><><strongstrong>The text is expressed in bold face.<>The text is expressed in bold face.</strong/strong><></p/p>><<pp>This is<>This is<supsup>superscript<>superscript</sup/sup>and this >and this
is<is<subsub>subscript.<>subscript.</sub/sub><></p/p>><<pp><><blinkblink>This text is blinking.<>This text is blinking.</blink/blink><></p/p>><<hrhr>>
_______________________________________________________________________________________________________________9
Simple example (cont’d)Simple example (cont’d)
<<pp>This is a simple bullet list: >This is a simple bullet list:
<<ulul>>
<<lili>First item<>First item</li/li>>
<<lili>Second item<>Second item</li/li>>
<</ul/ul>>
<<pp>This is a simple numbered list: >This is a simple numbered list:
<<olol>>
<<lili>First item<>First item</li/li>>
<<lili>Second item<>Second item</li/li>>
<</ol/ol>>
<</body/body>>
<</html/html>>
_______________________________________________________________________________________________________________10
Snapshot of Sample Web PageSnapshot of Sample Web Page
_______________________________________________________________________________________________________________11
LinksLinks
Defined by <A HREF …></A>. HREF gives the URL to Defined by <A HREF …></A>. HREF gives the URL to be accessed (A is for Anchor)be accessed (A is for Anchor)
The URL can be absolute or relative:The URL can be absolute or relative: <A HREF=http://www.vbs.com/Books/Art.html>Art</A><A HREF=http://www.vbs.com/Books/Art.html>Art</A> <A HREF=Science.html>Science</A> (in current directory)<A HREF=Science.html>Science</A> (in current directory) <A HREF=../Welcome.html></A> (go back one directory)<A HREF=../Welcome.html></A> (go back one directory) <A HREF=/Welcome.html></A> (in the root directory)<A HREF=/Welcome.html></A> (in the root directory)
What are the differences?What are the differences? <A HREF=/directory/Welcome.html></A><A HREF=/directory/Welcome.html></A>
<A HREF=directory/Welcome.html></A><A HREF=directory/Welcome.html></A>
_______________________________________________________________________________________________________________12
ImagesImages
The two most commonly used graphics file formats for displaying The two most commonly used graphics file formats for displaying images on a web page are GIF and JPEGimages on a web page are GIF and JPEGThere are 3 that are supported by almost all web browsers:There are 3 that are supported by almost all web browsers:
GIF:GIF:Lossless compressionLossless compressionTransparentTransparentGive 256 colorsGive 256 colorsSupport animation (animated GIF)Support animation (animated GIF)Suitable for general-purpose imagesSuitable for general-purpose images
JPEG:JPEG:Lossy compressionLossy compressionSupports “million” of colorsSupports “million” of colorsSuitable for photosSuitable for photos
PNG:PNG:Similar to GIF without supporting animationSimilar to GIF without supporting animationCreated to circumvent CompuServe's patents on the GIF file formatCreated to circumvent CompuServe's patents on the GIF file format
_______________________________________________________________________________________________________________13
Images (cont.)Images (cont.)
Here is an example of the image tag using all the Here is an example of the image tag using all the attributes:attributes: <IMG SRC = “VBS.gif” ALT=“logo” HEIGHT=“100” WIDTH=“100” <IMG SRC = “VBS.gif” ALT=“logo” HEIGHT=“100” WIDTH=“100”
ALIGN=“LEFT” BORDER=“1”> ALIGN=“LEFT” BORDER=“1”> SRC: URL of the imageSRC: URL of the image ALT: image description during loadingALT: image description during loading HEIGHT: height of the imageHEIGHT: height of the image WIDTH: width of the image WIDTH: width of the image BORDER: border size BORDER: border size ALIGN: alignment methodALIGN: alignment method
You can also create an image link, e.g.,You can also create an image link, e.g., <A HREF=“VBS.html”><IMG SRC=“VBS.gif”></A><A HREF=“VBS.html”><IMG SRC=“VBS.gif”></A>
_______________________________________________________________________________________________________________14
HTML TableHTML Table
The table tag is <TABLE ...> ... </TABLE>The table tag is <TABLE ...> ... </TABLE>
The row tag is <TR ...> ... </TR>The row tag is <TR ...> ... </TR>
The heading tag is <TH ...> ...</TH>The heading tag is <TH ...> ...</TH>
The data cell tag is <TD ...>... </TD>The data cell tag is <TD ...>... </TD>
Following is an example of a simple table incorporating Following is an example of a simple table incorporating
the table tags and other common attributes.the table tags and other common attributes.
_______________________________________________________________________________________________________________15
Table ExampleTable Example
_______________________________________________________________________________________________________________16
What Are HTML Forms?What Are HTML Forms?
Forms are generally used to obtain data Forms are generally used to obtain data from the client for submission to the from the client for submission to the server. server. Typically, a program in the server is Typically, a program in the server is invoked to process the data, possibly with invoked to process the data, possibly with the assistance of the backend system. the assistance of the backend system. The result (in most cases, an HTML file) The result (in most cases, an HTML file) will then be passed to the web client by will then be passed to the web client by using the HTTP.using the HTTP.
_______________________________________________________________________________________________________________17
HTML Forms – General FormatHTML Forms – General Format
General format:General format:
<FORM ACTION=“Program URL” METHOD=“GET or POST”><FORM ACTION=“Program URL” METHOD=“GET or POST”>
Form input elementsForm input elements
Regular HTML contentRegular HTML content
</FORM></FORM>
ACTION: URL of the program for processing the form dataACTION: URL of the program for processing the form data
METHOD: methods for passing data to the server:METHOD: methods for passing data to the server:
GET: attach at the end of the URLGET: attach at the end of the URL
POST: embed in the HTTP request messagePOST: embed in the HTTP request message
_______________________________________________________________________________________________________________18
Common HTML Form ElementsCommon HTML Form Elements
Common HTML Form elements include:Common HTML Form elements include: TextboxTextbox Password textboxPassword textbox CheckboxCheckbox Radio buttonRadio button Submit buttonSubmit button File input fieldFile input field Hidden form fieldHidden form field TextareTextareaa Select menuSelect menu
_______________________________________________________________________________________________________________19
Cascading Style Sheets (CSS)Cascading Style Sheets (CSS)
In HTML 4.0, Cascading Style Sheets (CSS) In HTML 4.0, Cascading Style Sheets (CSS) became available to separate the style from the became available to separate the style from the structure structure By using CSS, a single style sheet can be By using CSS, a single style sheet can be applied to several web pages requiring the same applied to several web pages requiring the same stylestyleThere are three types of CSS, namelyThere are three types of CSS, namely external style sheets;external style sheets; embedded style sheets;embedded style sheets; inline style sheets.inline style sheets.
_______________________________________________________________________________________________________________20
JavaScriptJavaScript
JavaScript is a scripting language created by Netscape JavaScript is a scripting language created by Netscape to enhance the functions of HTMLto enhance the functions of HTML
It was originally known as LiveScript, but Netscape convinced It was originally known as LiveScript, but Netscape convinced Sun to let it use Java in the language name to capitalize on Sun to let it use Java in the language name to capitalize on Sun’s promotion of the Java languageSun’s promotion of the Java language
Currently called ECMAScript and has been standardized, but still Currently called ECMAScript and has been standardized, but still most commonly called JavaScriptmost commonly called JavaScript
It can be used to produce interactive and dynamic Web It can be used to produce interactive and dynamic Web pagespagesIt is supported by most commonly-used browsers It is supported by most commonly-used browsers including Internet Explorer and Netscape’s Navigator. including Internet Explorer and Netscape’s Navigator. Unlike the server-side programs, a JavaScript code is Unlike the server-side programs, a JavaScript code is included in an HTML document and executed on the included in an HTML document and executed on the client-sideclient-side