Post on 27-Dec-2015
HTML• HyperText Markup Language
• Constantly evolving - extra facilities being added regularly
• Java applets and JavaScript used to increase functionality of HTML
• A number of editors are available e.g. Microsoft Frontpage
• Different Web Browsers display information slightly differently
HTML• A mark-up system that comprises of tags
• A tag is an instruction contained within angle brackets, e.g. <HTML>
• A tag may be opened and closed e.g.– <TITLE> Information Technology </TITLE>
• Images
• Forms
• Frames
• Firms often employ graphic designers
Structure of Document
• HTML documents can be constructed using Notepad
• When saved they should have extension .htm or .html
• <HTML>– defines the start of the HTML document – always on the first line– end of the document is defined by the </HTML> tag
Tags• <Head>
– document title
– Keywords for search engines
– located at the beginning of the document
– terminated with a </Head> tag
<HTML><HEAD><TITLE> My home page</TITLE></HEAD></HTML>
More Tags
• <! -- your comments -- >
• <BR> Line Break
• <HR> Horizontal line
• <P> </P> Paragraph
• <BODY> and </BODY> enclose the code which produces the visible web page
• Background colour may be defines• Colour of Text• Background Image
<HTML><HEAD><TITLE> My home page</TITLE></HEAD><BODY BACKGROUND = “at_work_transparent_low.gif”>This document is under construction</BODY></HTML>
Viewing Documents• Type in HTML using Notepad
• View using Netscape
• This way the page can be constructed incrementally
• Changes can be easily made– graphics in wrong place– text too large– Background wrong colour
• Possible to view other pages source
Title
• Appears as title in window• appears in bookmark list• Web search engine
<HTML> <HEAD> <TITLE> Here is my title</TITLE> </HEAD><HTML>
Plain Text• No tag is required when plain text is included
<HTML> <HEAD> <TITLE> Here is my title</TITLE> </HEAD> <BODY> This is plain text information </BODY><HTML>
• Text Usually requires formatting
Paragraphs• We want to display 2 lines of text:
<BODY> Barry McCollum Lecturer </BODY>
• The Browser does not recognise this unless a tag is added
• <P> Paragraph– Inserts a blank line
• <BR> New Line
• Browser will also ignore multiple spaces:<BODY> Barry McCollum <BR> Lecturer </BODY>
• The output will look like• Barry McCollum• A special entity for spacing characters is
provided:–
Barry McCollum
Highlighting Text
• Bold– <B> Highlighted Text</B>– <STRONG> Highlighted Text </STRONG>
Highlighted Text
• Italic– <I>Highlighted Text</I>– <EM> Highlighted Text </EM>
Highlighted Text
• Underline– <U> Highlighted Text </U>
Highlighted Text
• Blinking– <Blink> </Blink>
• Subscript– <SUB> </SUB>
• Superscript– <SUP> </SUP>
Highlighting Text
Headings• There are six levels of Headings, numbered 1 through 6 (1
being the largest)• Each level is displayed using a different heading level
number:
– <HI> Introduction </H1> Introduction– <H2> Introduction </H2> Introduction– <H3> Introduction </H3> Introduction– <H4> Introduction </H4> Introduction– <H5> Introduction </H5> Introduction
– <H6> Introduction </H6> Introduction
Alignment• Default Alignment is to the left• Text may be centred
– <centre> text to be centred</centre>
• Some tags can include attributes• Used to provide additional information to the
tag<HI align=right>
Introduction
</H1>
Introduction
Comments
• Good Practice
• Author’s name, date etc..– <!--> comment <-->
Text• <Font> </Font>
– Size• range of 1 to 7
• increased by using +
• decreased by using -
– Color• Colour Codes
– Face• Victorian
• Courier
Lists
• Unnumbered with bullet
• numbered
• Definition List
• Several Tags are required
• First tag determines type of list
• Each line in the list begins with the <LI> tag
Unnumbered List
• <UL> </UL>
• Type of bullet point can be changed by the TYPE attribute:
<UL Type=square>
<LI> first
<LI> second
</UL>
Numbered List• <OL> </OL>
• Attributes– STYLE– START
Definition List• Definition term and subsequent description
– <DL> start– <DT> each term is defined – <DD> each term is described
<dl>
<dt> Floppy Disk
<dd> A Floppy Disk contains 1.4 Mbytes of info.
<dt> Compact Disk
<dd> A CD contains 640 Mbytes of information.
<dt> DVD
<dd> A DVD contains much more!
</dl>
The output looks like:
Floppy Disk
A Floppy Disk contains 1.4 Mbytes of info.
Compact Disk
A CD contains 640 Mbytes of information.
DVD
A DVD contains much more!
Nested List• A lists can be nested:
<ul> <li> A few New England states: <ul> <li> Vermont <li> New Hampshire <li> Maine </ul> <li> Two Midwestern states: <ul> <li> Michigan <li> Indiana </ul></ul>
The output looks like
A few New England states:
Vermont
New Hampshire
Maine
Two Midwestern states:
Michigan
Indiana
Hyper Links• Connect One Web page to another Web page• The <a> </a> tag is used to provide a link within a
Web Page. The “a” stands for anchor
• The general use of the <a> </a> tag is as follows:
<a href=”page to link to”>Click here!</a>
• This will display the following:
Click here!
href
• The attribute href is used to point to a Web Page. This is represented by “page to link to” and is the target page which the link is pointing to.
• There a number of forms which “page to link to” can take, depending on the type of link required.
Relative Links
• Usually the Web Site has an initial starting page (Home Page) which connects to the other pages in the Site e.g.
• The home page is created and the HTML document is called “index.html”.
• The secondary page is created and the HTML document is called “info.html”.
• Creating the link from the home page to the secondary page involves adding an <a> </a> tag to the body section of “index.html”.
<html>
<head>
<TITLE>Home Page</TITLE>
</head>
<body>
<a href=”info.html”>Click for Information</a>
</body>
</html>
Absolute Links• Uniform Resource Locators (URLs) are used instead of
relative links for linking to Web Pages on other Web Sites.
• The only difference between using absolute and relative links is that the target URL replaces the HTML document.
For example,
<a href=”http://www.qub.ac.uk”>Link to QUB</a>
• An absolute link can also be used to allow electronic mail to be sent via a Web Page.
• The http is replaced with the word mailto followed by the email address.
• For example,
<a href="mailto:rts@aws.u-net.com">Mail Us</a>
• When clicked this link will open a blank mail window automatically addressed to the email address specified in the link.
Note that the two forward slashes // are missing in this case.
Links to Specific Sections
• Anchors can also be used to move a reader to a particular section in a document (either the same or a different document)
• This type of an anchor is commonly called a named anchor
• This involves two procedures– Mark the section which the link will move to.– Add the link, specifying the section of the document to link
to, using the mark.
• Marking the appropriate section involves adding an <a> </a> tag to the HTML document with the name attribute. E.g.
<a name="endmarker">Bottom of the Page!</a>
• This attribute is used to specify an identifier, which can be any sequence of letters.
• The tag is placed at the location to which the browser must scroll when the link is followed. In this case, the tag is placed somewhere at the bottom of the Web Page.
• The link is then added to the top of the page, specifying the identifier:
•<a href=”#endmarker”>Click to scroll down</a>
• The identifier is used by the href attribute and is used instead of specifying an HTML document filename or absolute link. The hash # must be inserted before the identifier.
• An anchor can also be used to link to a specific section in another document.
• For example, a link can be made from “index.html” to a specified section within “info.html”.
• First, as before, the location to link to must be specified in “info.html”:
<a name="infomarker">Middle of Info Page!</a>
• Then the link is added to “index.html”. It takes the form:– <a href=”info.html#infomarker”>Click for some Info</a>
Images
• <IMG>– SRC– Align
• Top, middle, bottom
– HSPACE– VSPACE
• Image Maps
Visual Basic/Java
• Brings animation and Interaction to the WWW
• Can add animation sounds to the web page
• Visual Basic for Applications (VBA)
• VBScript – smaller faster subset– Embedded in HTML
Java
• Applet– a program embedded in HTML
• Application– similar, does not require a browser to run it
• Beans– each program performs a very limited function
• Run on any computer which has a Java compatible Web Browser
Javascript
• Developed by Netscape
• included directly in HTML document
• Simple to add extra functionality