HTML Basics: Images, Colors & Links - Web Development Tutorial
Document Details
Uploaded by GrandMimosa5131
City College of Tagaytay
Tags
Summary
This document provides a tutorial on fundamental HTML concepts, including working with images, setting background colors, creating links, and using style attributes for web page design. It covers essential topics for building webpages, such as image formats, and HTML tags.
Full Transcript
Here is the converted markdown format of the given document. # HTML – IMAGE, COLORS AND BACKGROUND ## HTML IMAGES - Images are very important to beautify as well as to depict many complex concepts in a simple way on your web page. - HTML images are defined with `<img />` tag ## HTML IMAGES - The...
Here is the converted markdown format of the given document. # HTML – IMAGE, COLORS AND BACKGROUND ## HTML IMAGES - Images are very important to beautify as well as to depict many complex concepts in a simple way on your web page. - HTML images are defined with `<img />` tag ## HTML IMAGES - The `<img />` tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag. ### Example: ```html <!DOCTYPE html> <html> <head> <title> SAMPLE IMAGE </title> </head> <body> <p>Simple image insert</p> <img src="image/img7.jpg" alt="Killua Zoldick"/> </body> </html> ``` ## HTML IMAGES You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image file in `src` attribute. Image name is always case sensitive. ## HTML IMAGES The `alt` attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed. ## WIDTH AND HEIGHT You can set image width and height based on your requirement using `width` and `height` attributes. ## IMAGE BORDER You can specify width and height of the image in terms of either `pixels` or `percentage` of its actual size. ## HTML BACKGROUND By default, your webpage background is white in color. ## HTML BACKGROUND HTML provides you the following two good ways to decorate your webpage background. 1. HTML Background with Colors 2. HTML Background with Images ## HTML BACKGROUND with COLORS * The `bgcolor` attribute is used to control the background of an HTML element, specifically page body and table backgrounds. ## HTML BACKGROUND with COLORS * syntax to use `bgcolor` attribute with any HTML tag. ```html <tagname bgcolor="color_value"...> ``` ## HTML Color Coding Methods There are the following three different methods to set colors in your web page: 1. **Color Names** - You can specify color names directly like green, blue, red etc. ## W3C Standard 16 Colors The table shows a list of W3C Standard 16 Colors names and it is recommended to use them. |Color|Color|Color|Color| |---|---|---|---| |Black|Gray|Silver|White| |Yellow|Lime|Aqua|Fuchsia| |Red|Green|Blue|Purple| |Maroon|Olive|Navy|Teal| ## HTML Color Coding Methods 2. **Hex Codes** - A six-digit code representing the amount of red, green, and blue that makes up the color. ## HTML Colors - Hex Codes Each hexadecimal code will be preceded by a pound or hash sign #. The following is a list of few colors using hexadecimal notation. |Color |Color HEX| |-----------------|-----------------| |#000000|| |#FF0000|| |#00FF00|| |#0000FF|| |#FFFF00|| |#00FFFF|| |#FF00FF|| |#C0C0C0|| |#FFFFFF|| ## HTML Color Coding Methods 3. **Color decimal or percentage values** - This value is specified using the rgb() property. ## HTML Colors - RGB Values |Color|Color RGB| |---|---| |rgb(0,0,0)| |rgb(255,0,0)| |rgb(0,255,0)| |rgb(0,0,255)| |rgb(255,255,0)| |rgb(0,255,255)| |rgb(255,0,255)| |rgb(192,192,192)| |rgb(255,255,255)| ## HTML BACKGROUND with IMAGES The`background` attribute can also be used to control the background of an HTML element, specifically page body and table backgrounds. ## HTML BACKGROUND with IMAGES * syntax to use the `background` attribute with any HTML tag. ```html <tagname background="Image URL"...> ``` ## HTML BACKGROUND with IMAGES * **Note:** The background attribute is deprecated and it is recommended to use Style Sheet for background setting. ## HTML BACKGROUND with IMAGES * The most frequently used image formats are JPEG, GIF and PNG images. ## HTML BACKGROUND using STYLE ATTRIBUTE * background-color * background-image * background-repeat * background-attachment * background-position ## background-color * the background-color property specifies the background color of an element ## background-image * the background-image property specifies an image to use as the background of an element ## background-image * by default, the image is repeated so it covers the entire element * background-image: url("paper.gif"); ## background-repeat * by default, the background-image property repeats an image both horizontally and vertically ## background-repeat * If the image is repeated only horizontally * background-repeat: repeat-x; ## background-position * to specify that the background image should be fixed (will not scroll with the rest of the page) use the background-attachment ## HTML - LINKS ## HTML Links - Hyperlinks * A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as **hyperlinks**. ## HTML Links - Hyperlinks * Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. ## HTML Links - Hyperlinks * A link is specified using HTML tag `<a></a>`. * This tag is called anchor tag ## HTML Links - Hyperlinks * Anything between the opening `<a>` tag and the closing `</a>` tag becomes part of the link and a user can click that part to reach the linked document. ## HTML Links - Syntax `<a href="url">link text</a>` Example: `<a href="http://www.facebook.com">Visit Facebook page</a>` ## HTML Links - Syntax * The `href` attribute specifies the destination address (http://www.facebook.com) ## HTML Links - Syntax * The `link text` is the visible part (Visit Facebook page) * Clicking on the link text, will send you to the specified address. ## HTML Links - The `target` Attribute * The `target` attribute specifies where to open the linked document. ## HTML Links - The `target` Attribute * This example will open the linked document in a new browser window or in a new tab: `<a href="http://www.facebook.com" target="_blank"> Visit Facebook!</a>` |Target Value|Description| |---|---| |_blank|Opens the linked document in a new window or tab| |_self|Opens the linked document in the same frame as it was clicked (this is default)| |_parent|Opens the linked document in the parent frame| |_top|Opens the linked document in the full body of the window| |framename|Opens the linked document in a named frame| ## HTML Links - Image as Link `<a href="default.asp"> <img src="smiley.gif" alt="Smile" style="width:42px; height:42px; border:0"> </a>` ## HTML Links - Create a Bookmark * HTML bookmarks are used to allow readers to jump to specific parts of a Web page. ## HTML Links - Create a Bookmark * Bookmarks are practical if your website has long pages. ## HTML Links - Create a Bookmark * To make a bookmark, you must first create the bookmark, and then add a link to it. ## HTML Links - Create a Bookmark * When the link is clicked, the page will scroll to the location with the bookmark. #### Example: First, create a bookmark with the id attribute: `<h2 id="tips">Useful Tips Section</h2>` #### Example: Then, add a link to the bookmark ("Useful Tips Section"), from within the same page: `<a href="#tips">Visit the Useful Tips Section</a>` #### Example: Or, add a link to the bookmark ("Useful Tips Section"), from another page: `<a href="html_tips.htm#tips"> Visit the Useful Tips Section</a>`
