View
38
Download
0
Category
Preview:
DESCRIPTION
Basic HTML. `. Skill Area 215.2. Lecture Overview. HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on another page Linking to mail software Ordering links to a new window Image maps List Table. - PowerPoint PPT Presentation
Citation preview
`
Skill Area 215.2
Basic HTML
Lecture Overview• HTML Body Elements• Linking techniques• HyperText references• Linking images• Linking to locations on a page• Linking to a fragment on another
page• Linking to mail software• Ordering links to a new window• Image maps• List• Table
HTML Body Element• The <body> element encloses
all page contents.
• Example web page contents:– Text– List– Image– Etc.
HTML Body Element - TEXT
There are two categories of text element:
• Block elements– For marking up large blocks of content
such as headings and paragraphs
• Inline elements– For marking up individual words or
phrases or to emphasize words in a sentence.
HTML Body Element - TEXT
Headings
• There are six different levels of heading:– <h1>– <h2>– <h3>– <h4>– <h5>– <h6>
<h1> is the top level heading content, e.g. site or page title
<h6> is the for the least important heading, e.g. a sub-section
<h1>This is heading 1</h1>
HTML Body Element - TEXT
Paragraph
• The <p> element defines a paragraph.
• When a browser displays a paragraph, it adds a new line before the paragraph.
• Paragraphs should not be nested inside other paragraphs.
<p>The purpose of this page is to demonstrate a basic XHTML document.</p>
HTML Body Element - TEXT
Inline element
• Inline elements are used to markup small portions of text.
• Inline elements must always be nested inside a block level element.
<p>The purpose of this page is to demonstrate a basic <b>XHTML</b> document.</p>
HTML Body Element - TEXT
Styling your text
• HTML used to feature many ‘physical style’ tags
• Tags such as <font> can be join with several attributes to specify the colour, typeface and size of text.
<font face="verdana" size="6" color="red">This is so red</font>
HTML Body Element - IMAGE
• An image can be specified using <img> as shown below.
src is use to specify the location of the imagewidth is use to specify the width of the
image height is use to specify the height of the
image alt is use to specify alternative text in case
the image is corrupted.
** Picture should be saved in similar directory with HTML document
<img src=“Koala.jpg" width="400" height="523" alt=“Koala"/>
Linking Techniques• Links on a website can be created
using an attribute called a HyperText reference (href) which is applied to an anchor element <a>.
• For example:
Linking Techniques
• Two ways of linking: Text based & Image based.
Text based
Linking Techniques
Image based
HyperText References• HyperText references provides the path of
the link for the browser to follow.– The path can be:
• Linking to a page within the site• Linking to a page outside of the site
– The link can be:• (X)HTML documents• Images• Documents• Multimedia elements
HyperText References• Linking to a page within the site.
– When linking to a page within your site server, relative URLs are used.
– For example if linking to page2.html of your site just use the pathname:
• Linking to a page outside of the site.– When linking to pages or sites external to your
site, server absolute URLs are used– For example, when linking to www.w3c.org
include the full protocol and path to the page:
HyperText References• Some rules when linking to pages within the site:
If the (X)HTML page is within the same directory, use:
If the (X)HTML page is within a lower directory, use:
HyperText References• Some rules when linking to pages within the site:
If the (X)HTML page is within an even lower directory, use:
If the (X)HTML page is within a higher directory, use the Unix pathname convention“../”
HyperText References• Some rules when linking to pages within the site:
If the (X)HTML page is within an even higher directory, use:
Do not use backslashes - instead use forward slashes “/” for web programmingto separate directory and file components of a path
Linking Images• Linking images also has several rules:
If you are in page2.html as shown in structure below and would like to use picture.gif, use:
Linking Images• Linking images also has several rules:
If you are in page2.html as shown in structure below and would like to use picture.gif:
Linking to Locations on A Page• Known as linking to a
document fragment.• Allows you to link to specific
points on a page.• Clicking on a subject in the
contents at the top of the page allows the user to be directed to the desired heading further down the page.
Linking to Locations on A Page• To do linking to locations on a page, two features
are needed: Name the destination using the id attribute Link to the destination using the octothorpe symbol
(#)
The id attribute• The actual headings in the body of the page need
to be marked with the id attribute. This uniquely identifies an element within the contents for the browser to find.
• For example, in the main body of text, Heading 1 would read:
Linking to Locations on A PageThe octothorpe symbol (#)• Each heading is linked to the corresponding text
by including the # value in the href attribute.• The destination is given a name, in this case
“hereisH1” for the first heading:
Linking to A Fragment on Another Page• Add the fragment name to the end of the page
URL in the href link.• For example if the headings were all contained
within “page4.html”, a page in the same directory, the link would read:
Linking to Mail Software• Use the mailto protocol.• This allows users to send emails to the
specified address from client-side email software.
• For example, linking to an email address myemail@address.com can be write as the following:
Opening Links in A New Window
• Use the target attribute in the anchor <a> element.
• This will tell the browser in which window the linked content should be displayed
• For example:
• This will open all links with this target in a window called “display1”
Image Maps
• An imagemap is a defined region of an image that is given a link.
• For a client-side imagemap, the browser is required to match the location of the user’s mouse to the coded coordinates of the linked area.
Image Maps• To produce an imagemap you will need:
– An image file within an <img> element
– A usemap attribute within the <img> element that defines the map in use
– A <map> element that contains the definitions of each of the required <area> elements to be applied to the image
Image Maps• For example, an image split into 2
coloured regions that link to 2 separate pages:
The “usemap” attribute tells the browser to use the “2pages” map with the image.
Image MapsShape Values• In this example the shape values chosen are a
circle and square.• The values are based on the coords.
HTML Elements - LIST
• List of items can be specify using <ul>, <ol> and <li>.– The <ul> tags specify an unordered (bullet pointed) list. – The <ol> tags specify an ordered list. – The <li> elements define each item in the list.
<ul> <li>Triangle</li> <li>Quadrilateral</li> <li>Pentagon</li> <li>Hexagon</li></ul>
<ol> <li>Triangle</li> <li>Quadrilateral</li> <li>Pentagon</li> <li>Hexagon</li></ol>
HTML – Table’s Structure• In (X)HTML the structure of the same table
is:
• Tables are constructed from cells• Cells contain the content of the table• A cell can contain any content, from
graphics to multimedia content to even other tables
HTML – TABLE – Element Definition
• <table> is a block level element that always starts on a new line.
• (X)HTML tables are “row-centric” as there are no column elements.
• The number of cells in each row determines the number of columns.
HTML – TABLE – Element Definition
• The (X)HTML elements would appear like this:
• If the <tr> elements don’t match up, the browser will not display the table correctly
HTML – TABLE – Element Definition
• Shown left is the (X)HTML source for this table as it would be written within the main body of the page.
• The convention is to stack the <td> elements to make them easier to locate in the code.
HTML – TABLE – Columns & Rows• Column spans are generated with the
colspan attribute within the <td> or <th> elements.
• These resize a cell to the right to make it span over the preceding columns.
• For example:
HTML – TABLE – Columns & Rows• (X)HTML for merging columns:
HTML – TABLE – Columns & Rows• Row spans are similar to column
spans but merge rows instead.• For example:
HTML – TABLE – Columns & Rows• (X)HTML for merging row:
HTML – TABLE – Cell Padding
• Cell Padding is the amount of space between the cell content and the edge of the cell containing it.
• The default value for cell padding is 1 pixel
HTML – TABLE – Cell Padding
• The cellpadding attribute can only be applied to the <table> element. This means that all cells within the table are affected by it.
• The value of cellpadding can be defined. For example:
• If cell by cell values are required, CSS can be used to fine tune the padding.
HTML – TABLE – Cell Spacing
• Cell Spacing is the amount of space between the cells.
• The browser default is 2 pixels.• To change this value, use the cellspacing
attribute in the <table> element:
HTML – TABLE – Caption
• To give the table a brief title or description, use the <caption> element.
• The caption is displayed above the table by default.
• The caption must be the first thing in the <table> element.
HTML – TABLE – Caption
ReferencesRobbins, J.N. (2007) Learning Web Design – A Beginners Guide to (X)HTML, Style Sheets, and Web Graphics. 2nd edition. Galatea Training Services Ltd.. Singapore
END
Recommended