Download
1 / 30
300 likes | 427 Views
SAK 3002. SAK 3002. Teknologi Maklumat dan Penggunaannya. Information Technology and its Application. The HTML. Ahmad Rodzi Mahmud. CONTENT. The HTML. Example. The Page in HTML. <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
E N D
SAK 3002 SAK 3002 Teknologi Maklumat dan Penggunaannya Information Technology and its Application The HTML Ahmad Rodzi Mahmud
CONTENT • The HTML
The Page in HTML • <HTML> • <HEAD> • <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252"> • <META NAME="Generator" CONTENT="Microsoft Word 97"> • <TITLE>Steve's HTML Page</TITLE> • </HEAD> • <BODY> • <P><FONT SIZE=6><P>Steve's HTML Page • </FONT> </P> • </BODY> • </HTML>
Tags • HTML is a markup language • Tags are items surrounded by angle brackets containing codes indicating how text should be displayed • E.G. <B>Hello</B> appears Hello • <B> is the start-tag and </B> is the end tag
Editor vs Handwritten HTML • Using Editor is imprecise but easier • Writing HTML code by hand is laborious but more powerful
More HTML • Classic HTML works on a principle of semantic coding - markup is based on meaning (e.g this is emphasised, this is a heading, this is a subheading) rather than look (this is font size 16) • However pure HTML doesn’t really exist any more
Headings • H1 to H6 used to indicate importance of topic • In practice we rarely use less than H3 • Using <font> tag to emphasize severely frowned on • users cannot control the display of the text • speech browsers cannot register the importance of the section
Emphasis • The tags <em> and <I> are identical in as much as they produce italics, but the <em> is more classical and better style (semantics!) • The tags <strong> and <b> are identical in as much as they produce bold text but again the <strong> is more classical
Lists • Two types: • <OL> ordered list, which numbers the items of the list • <UL> unordered list, which separates items with bullet points • List items are enclosed with the tags • <li> and </li>
Paragraphs • Used with the <P></P> tags • Also the <BR> tag is used to create simple line breaks within the same paragraph
Hyperlinks • What makes the web the web - a document can link to another document • Links can be either absolute or relative • Absolute specifies a full URL e.g. • http://www.microsoft.com • Relative specifies a file relative to the current file e.g • index2.htm
Structure of a Hyperlink • Hyperlink uses the following syntax • <A HREF=”index2.htm”>My second page</A> • Where HREF = hypertext reference i.e. • The file to link to • “My second page” is the text being clicked
Tags with Attributes • The <A> (anchor) tag is interesting in that it has an attribute (HREF) which has to be specified • The <FONT> tag is similar as is • The <IMG> tag • The <BODY> tag
Font Tag • <FONT SIZE=16 FACE=“Times New Roman” COLOR=“00FFFF”> • Remember that the use of the FONT tag is frowned upon and so should be used sparingly
IMG Tag • <IMG SRC=“next.gif” WIDTH=200 HEIGHT=360 BORDER=0 ALT=“Go to Next Page”> • width and height specify the size the image will take up within the page (not constrained by the original size of the image) • border is not normally used except when the image is to be a hyperlink itself • ALT a very important tag meaning alternative text I.E when the browser cannot display the image
Images for Hyperlinking • Used all the time in navigation bars • You must specify the border to be 0 otherwise an unpleasant blue border will appear around the image
The Body Tag • Very important tag which determines the background of the page • <BODY BGCOLOR=“#ff00ff” BACKGROUND=“waves.gif”> • If a colour is specified, that becomes the background colour, but if a background image is also specified this will override the colour
The META Tag • Technically relevant tag controlling the behaviour of browsers and robots • Two possible attributes • <META HTTP-EQUIV="name" CONTENT="content"> controls browser display (equivalent to http header) • <META NAME="name" CONTENT="content"> controls other aspects; not clearly separated
Distribution • Each HTML file exists only as a node within a vast network • Each image that appears on it comes from a separate file which is not part of it
Back To Word • Adding a picture using Insert>Object>Microsoft Word Picture
Look at the HTML now • <FONT SIZE=6><P>Steve's HTML Page</P> • <P><IMG SRC="Image16.gif" WIDTH=288 HEIGHT=192> </P></FONT></BODY> • Image now automatically generated by Word
Adding a second HTML file • Create a new file in word • Save that has HTML in the same directory as the first file • Make a link to it from the first file • (write some text, select it, click on the globe+link icon, then select the file you’ve just created as being the linked file)
What is a web site? • A lot of linked documents, a heterogeneous information space • A machine of meaning for a variety of users • It therefore requires thought regarding • Intended Audience • Design Motifs • Information Architecture
How To Structure a Web Site • Hierarchical • tree structure, categories, sub categories • Data Driven • database with pages dynamically created • Hypertextual • pages with random, content driven links to other pages
Hierarchical • The most common form of web site because mental model can be easily created by human beings • Problematical because of items which cross categories (tomato in fruit/vegetable schemas) • Design challenges (narrow and deep or broad and shallow) • Maintenance might not be easy
Data Driven (see FEIS site) • Usually for subsections of web sites • e.g staff directories, telephone numbers, knowledge bases • Advantage is separation of content and form • visual appearance of site can be redesigned at will • Often rigid and bland
Hypertextual • Links pages in web sites • Or whole sites (academic) • Good for serendipitous searching (we want to find something but we’re not sure what it is) • Can be disorienting (we don’t know where we or or how to get back to where we came from)
