LIST- HYPERLINK- IMAGES .
32
LIST- HYPERLINK- IMAGES http://xuanhien.wordpress.com
-
date post
19-Dec-2015 -
Category
Documents
-
view
236 -
download
0
Transcript of LIST- HYPERLINK- IMAGES .
LIST- HYPERLINK- IMAGEShttp://xuanhien.wordpress.com
Company Logo
Contents
IMAGE
HYPERLINK
LIST
Company Logo
HTML ListUnordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles).
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Syntax:<UL Type= Shape1>
<LI Type= Shape 2> Content1<LI Type= Shape 2> Content1…
</UL>
Company Logo
HTML ListEx:
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Company Logo
HTML ListStandard Attributes: The <ul> tag supports the
following standard attributes:
Optional Attributes
Company Logo
HTML List A nested list:
Ex: <h4>A list inside a list:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Company Logo
HTML ListOrdered Lists: An ordered list is also a list of
items. The list items are marked with numbers.Syntax:
<OL Type=x Start =n ><LI Type =x1 Value=m> Content1<LI Type =x1 Value=m> Content2…
</OL>
Company Logo
HTML ListEx:
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Company Logo
HTML ListOptional Attributes:
Company Logo
HTML ListA nested list:
<h4>A nested List:</h4>
<ol type =I>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
<li>Milk</li>
</ol>
Company Logo
HTML ListDefinition Lists
A definition list is not a list of single items. It is a list of items (terms), with a description of each item (term).
A definition list starts with a <dl> tag. Each term starts with a <dt> tag. Each description starts with a <dd>.
Company Logo
HTML ListSyntax:
<DL>
<DT> definition term
<DD> definition description
…
</DL>
Company Logo
<HTML><HEAD><TITLE>Learning HTML</TITLE></HEAD><BODY>
<DL><DT>Pixel<DD> Short for picture element. A pixel refers to the
small dots that make up an image on the screen. Pixel depth refers to the number of colours which may be displayed.
<DT>Resolution<DD>The quality of the display on a monitor. The higher
the resolution, the sharper the image. The number of pixels that can be displayed on a screen defines resolution.
<DT>Scanner<DD> A hardware device that allows the user to make
electronic copies of graphics or text.</DL>
</BODY></HTML>
Company Logo
HYPERLINKHyperlink:
In web terms, a hyperlink is a reference (an address) to a resource on the web.
Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, …
An anchor is a term used to define a hyperlink destination inside a document.
Create hyperlink:
<a href="url">Link text</a>
Company Logo
HYPERLINKThe href Attribute
The href attribute defines the link "address".
Example:
<a href="http://www.w3schools.com/">Visit 3Schools!</a>
The target Attribute: defines where the linked document will be opened.
Example
<a href=http://www.w3schools.com/ target="_blank"> Visit W3Schools!
</a>
Company Logo
HYPERLINKThe name Attribute
When the name attribute is used, the <a> element defines a named anchor inside a HTML document.
Named anchor are invisible to the reader.Named anchor syntax:
<a name="label">Any content</a> The link syntax to a named anchor:
<a href="#label">Any content</a> The # in the href attribute defines a link to a
named anchor.
Company Logo
Example:<HTML>
<HEAD><TITLE> Using htm links</TITLE> </HEAD>
<BODY>
<A HREF = “#Internet”>Internet</A><BR>
<A HREF = “#HTML”>Introduction to HTML</A><BR>
<A name = “Internet”>Internet</A>
The Internet is a standardized, global system of interconnected computer networks linking millions of people worldwide. It is a network of networks that consists of millions of private and public, academic, business, and government networks of local to global scope that are linked by copper wires, fiber-optic cables, wireless connections, and other technologies.
<A name = “HTML”>Introduction to HTML</A><BR>
HTML, which stands for Hyper Text Markup Language, is the predominant markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items.
</BODY></HTML>
Company Logo
HYPERLINKCreate a mailto link:
<p>This is a mail link:
<a href=mailto:[email protected]?subject=Hello%20again>Send Mail</a>
</p> Result on browser:
This is a mail link: Send Mail
Company Logo
HYPERLINKOptional Attributes
Company Logo
IMAGEThe Image Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.
Company Logo
IMAGEThe syntax of defining an image:
The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www.w3schools.com" has the URL:
http://www.w3schools.com/images/boat.gif. The browser puts the image where the image tag
occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
<img src="url" />
Company Logo
IMAGEEx:
<p>An image from another folder:</p>
<img src="/images/chrome.gif" width="33" height="32" />
<p>An image from W3Schools:</p>
<img src="http://www.w3schools.com/images/w3schools_green.jpg" width="104" height="142" />
Company Logo
IMAGEThe Alt Attribute
The "alt" attribute tells the reader what the browser can't load images. The browser will then display the alternate text instead of the image.
Ex: <img src="boat.gif" alt="Big Boat" />
Company Logo
IMAGEOptional Attributes
Company Logo
IMAGEEx:<p>
<img src="angry.gif" alt="Angry" align="left" width="32" height="32" /> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.
</p>
<p>
<img src="angry.gif" alt="Angry" align="right" width="32" height="32" />A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.
</p>
Company Logo
IMAGE
Company Logo
IMAGEHTML <img> align Attribute
Company Logo
IMAGEEx:
<IMG src=hinh.gif Align=top>
<IMG src=hinh.gif Align=middle>
<IMG src=hinh.gif Align=bottom>
Company Logo
IMAGEUse image to create hyperlink:
<p>
An image that is a link:
<a href="http://www.w3schools.com">
<img src="angry.gif" alt="Go to W3Schools.com" width="32" height="32" border="0" />
</a>
</p>
Company Logo
IMAGECreate an image map: Split the image into some
regions. Each region is a hyperlink.Syntax:
<IMG UseMap=”Label”>
<Map Name=”Label”>
<Area Shape= “type” coords=”x1,y1,x2,y2, …” href=”URL”>
</Map>
Type:• Rect• Circle• Poly
Company Logo
IMAGEEx:
<html><body>
<p>Click on one of the planets to watch it closer:</p>
<img src="planets.gif“ width="145" height="126“ usemap="#planetmap">
<map id="planetmap" name="planetmap“><area shape="rect“ coords="0,0,82,126“ alt="Sun” href="sun.htm“>
<area shape="circle“ coords="90,58,3“ alt="Mercury“ href="mercur.htm">
<area shape="circle“ coords="124,58,8“ alt="Venus” href="venus.htm">
</map>
<p><b>Note:</b> The "usemap" attribute in the img element refers to the "id" or "name" (browser dependant) attribute in the map element, therefore we have added both the "id" and "name" attributes to the map element.</p>
</body></html>
Company Logo
IMAGEWith the Background property of the <Body> tag,
you can use a graphic file as a background image for your page.
Syntax:
<BODY BACKGROUND=“Image file”Example:
<BODY BACKGROUND =“../IMAGE/Bg.gif”>
