1 / 32

LIST- HYPERLINK- IMAGES

LIST- HYPERLINK- IMAGES. http://xuanhien.wordpress.com. Contents. LIST. HYPERLINK. IMAGE. HTML List. Unordered Lists An unordered list is a list of items. The list items are marked with bullets (typically small black circles).

malaya
Download Presentation

LIST- HYPERLINK- IMAGES

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. LIST- HYPERLINK- IMAGES http://xuanhien.wordpress.com

  2. Contents LIST HYPERLINK IMAGE Company Logo

  3. HTML List • Unordered 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

  4. HTML List • Ex: <h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> Company Logo

  5. HTML List • Standard Attributes: The <ul> tag supports the following standard attributes: • Optional Attributes Company Logo

  6. 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

  7. HTML List • Ordered 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

  8. HTML List • Ex: <h4>An Ordered List:</h4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Company Logo

  9. HTML List • Optional Attributes: Company Logo

  10. HTML List • A 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

  11. HTML List • Definition 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

  12. HTML List • Syntax: <DL> <DT> definition term <DD> definition description … </DL> Company Logo

  13. <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

  14. HYPERLINK • Hyperlink: • 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

  15. HYPERLINK • The href Attribute • The hrefattribute 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

  16. HYPERLINK • The 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

  17. 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

  18. HYPERLINK • Create a mailto link: <p>This is a mail link: <a href=mailto:someone@microsoft.com?subject=Hello%20again>Send Mail</a> </p> • Result on browser: This is a mail link: Send Mail Company Logo

  19. HYPERLINK • Optional Attributes Company Logo

  20. IMAGE • The 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

  21. IMAGE • The 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

  22. IMAGE • Ex: <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

  23. IMAGE • The 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

  24. IMAGE • Optional Attributes Company Logo

  25. IMAGE • Ex: <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

  26. IMAGE Company Logo

  27. IMAGE • HTML <img> align Attribute Company Logo

  28. IMAGE • Ex: <IMG src=hinh.gif Align=bottom> <IMG src=hinh.gif Align=middle> <IMG src=hinh.gif Align=top> Company Logo

  29. IMAGE • Use 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

  30. IMAGE • Create 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

  31. IMAGE Ex: <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

  32. IMAGE • With 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”> Company Logo

More Related