LIST- HYPERLINK- IMAGES

Company Logo Contents IMAGE HYPERLINK LIST

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 tag. Each list item starts with the tag.  Syntax: Content1 … Company Logo

HTML List  Ex: An Unordered List: Coffee Tea Milk Company Logo

HTML List  Standard Attributes: The tag supports the following standard attributes:  Optional Attributes Company Logo

HTML List  A nested list: Ex: A list inside a list: Coffee Tea Black tea Green tea Milk Company Logo

HTML List  Ordered Lists: An ordered list is also a list of items. The list items are marked with numbers.  Syntax: Content1 Content2 … Company Logo

HTML List  Ex: An Ordered List: Coffee Tea Milk Company Logo

HTML List  Optional Attributes: Company Logo

HTML List  A nested list: A nested List: Coffee Tea Black tea Green tea Milk Company Logo

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 tag.  Each term starts with a tag.  Each description starts with a. Company Logo

HTML List  Syntax: definition term definition description … Company Logo

Learning HTML Pixel 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. Resolution 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. Scanner A hardware device that allows the user to make electronic copies of graphics or text. Company Logo

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: Link text Company Logo

HYPERLINK  The href Attribute  The href attribute defines the link "address". Example: Visit 3Schools!  The target Attribute: defines where the linked document will be opened. Example Visit W3Schools! Company Logo

HYPERLINK  The name Attribute  When the name attribute is used, the element defines a named anchor inside a HTML document.  Named anchor are invisible to the reader.  Named anchor syntax: Any content  The link syntax to a named anchor: Any content  The # in the href attribute defines a link to a named anchor. Company Logo

 Example: Using htm links Internet Introduction to HTML Internet 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. Introduction to HTML 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. Company Logo

HYPERLINK  Create a mailto link: This is a mail link: Send Mail gain  Result on browser: This is a mail link: Send MailSend Mail Company Logo

HYPERLINK  Optional Attributes Company Logo

IMAGE  The Image Tag and the Src Attribute  In HTML, images are defined with the tag.  The 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

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 " has the URL:  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. Company Logo

IMAGE  Ex: An image from another folder: An image from W3Schools: Company Logo

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: Company Logo

IMAGE  Optional Attributes Company Logo

IMAGE  Ex: 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. 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. Company Logo

IMAGE Company Logo

IMAGE  HTML align Attribute Company Logo

IMAGE  Ex: Company Logo

IMAGE  Use image to create hyperlink: An image that is a link: Company Logo

IMAGE  Create an image map: Split the image into some regions. Each region is a hyperlink.  Syntax:  Type: Rect Circle Poly Company Logo

IMAGE Ex: Click on one of the planets to watch it closer: Note: 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. Company Logo

IMAGE  With the Background property of the tag, you can use a graphic file as a background image for your page.  Syntax: <BODY BACKGROUND=“Image file”  Example: Company Logo