HTML group4 Report topicks about how to create a ppg.pptx

Html basic

1. HTML Link HTML Images HTML Fav Icon HTML Page Title GROUP VI R eporters, Kinicot , Renalyn P. Belleza , Mia Mae G. Rafal , Regin B. Ferianeza , Jhon Nino L. Tinambacan , John Dale J.

2. HTML Link HTML links, also known as hyperlinks, are the backbone of the web. They allow users to navigate seamlessly from one page to another or to access external resources. Hyperlink Syntax The fundamental syntax of an HTML hyperlink is the `` tag. The essential attributes are "href," which specifies the destination URL, and the text content between the opening and closing tags, which serves as the clickable link text. - MIA MAE BELLEZA

3. Example

4. Anchor Tag The `` tag is the core element for creating links. Href Attribute The `href` attribute defines the target URL for the link. Link Text The text between the opening and closing `` tags is displayed as the clickable link.

5. HTML Links Different Colors An HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or is active. HTML Link Colors: •An unvisited link is underlined and blue •A visited link is underlined and purple •An active link is underlined and red

6. HTML Links - Create Bookmarks HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.

7. Example:

8. HTML Images HTML images are essential for web design, adding visual appeal and enhancing user experience. They can be used for a variety of purposes, such as branding, showcasing products, and illustrating content. RK RK REGINE B. RAFAL

9. Embedding Images Embedding images in HTML involves using the img tag, specifying the source attribute with the image file path. It's essential to use the correct file format and dimensions for optimal display. Src Attribute 1 2 3 The src attribute specifies the location of the image file. Alt Attribute The alt attribute provides alternative text for users who cannot see the image. Width and Height These attributes specify the dimensions of the image in pixels.

10. EXAMPLE

11. Image Formats Selecting the right image format is crucial for performance and quality. Different formats offer varying levels of compression, color depth , and animation capabilities. JPEG Ideal for photographs and images with rich colors. Offers high compression, resulting in smaller file sizes. PNG Excellent for graphics with sharp edges and transparent backgrounds. Supports lossless compression, preserving image quality. GIF Suitable for animated images and simple graphics. Offers limited color depth but supports animation and transparency .

12. HTML Fav Icon A favicon image is displayed to the left of the page title in the browser tab, like this: -RENALYN P. KINICOT Favicons are small, iconic images associated with websites. They appear in browser tabs , bookmarks , and search results . A well-designed favicon enhances brand recognition and adds a professional touch to your online presence.

13. To add a favicon to your website, either save your fav icon image to the root directory of your webserver, or create a folder in the root directory called images , and save your favicon image in this folder. A common name for a favicon image is "favicon.ico" . Next , add a <link> element to your "index.html" file, after the <title> element, like this: Now, save the “index.html” file and reload it in your browser. Your browser tab should now display Your favicon image to the left of the page title.

14. Favicon Size and Resolution Browser Size Resolution Chrome, Firefox, Edge 16x16 32x32 Safari 16x16 57x57 iPhone, iPad 180x180 180x180

15. Favicon Formats ICO PNG SVG The ICO format is the traditional choice for favicons. It supports multiple sizes and resolutions, making it suitable for various browsers and devices . PNG is a lossless image format that provides good quality and supports transparency. It's a versatile option for favicons, but it might not be as widely supported as ICO. Scalable Vector Graphics (SVG) are vector-based images that can be scaled without losing quality. SVG favicons are highly responsive and adaptable to different screen sizes, making them ideal for modern web design.

16. Creating a Favicon 1 Design the Icon Create a visually appealing icon that represents your brand and website effectively. 2 Choose a Format Select the appropriate favicon format, considering compatibility and desired features. 3 Optimize for Size Ensure your favicon is optimized for size and resolution to avoid slow loading times. 4 Save and Implement Save your favicon in the correct format and place it in your website's directory. Link it in the HTML head section.

17. Example

18. History and Standardization of Favicons The favicon was first introduced in 1999 with the release of Microsoft Internet Explorer 5. Initially, it was a file called favicon.ico placed in the website's root directory. It was used in Internet Explorer's favorites (bookmarks) and displayed next to the URL in the address bar if the page was bookmarked In 2003 , the . ico format was registered by a third party with the Internet Assigned Numbers Authority (IANA) under the MIME type image/ vnd.microsoft.icon . However, Internet Explorer could not display . ico files served with this standardized MIME type when used as images . A workaround for Internet Explorer was to associate . ico with the non-standard image/x-icon MIME type in web servers. SUMMAY -Use the HTML <link> element to insert a favicon.

19. THANK YOU!