1 / 15

Learn Advanced and Basic HTML - Lesson 6

With HTML you can create your own Website. This tutorial teaches you everything about HTML. For full HTML course visit our website www.training-n-development.com

Download Presentation

Learn Advanced and Basic HTML - Lesson 6

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. Learn HTML BasicsLesson No : 06 Publisher : Attitude Academy

  2. Chapter Summary

  3. HTML Links & Syntax Links are found in nearly all web pages. Links allow users to click their way from page to page. HTML Links - Hyperlinks HTML links are hyperlinks. A hyperlink is a text or an image you can click on, and jump to another document. In HTML, links are defined with the <a> tag: <body> <p> <a href="Url(if you have url so link there if not so use '#')">HTML</a> </p> </body>

  4. HTML Links - The target Attribute

  5. HTML Links target Attribute The target attribute specifies where to open the linked document. This example will open the linked document in a new browser window or in a new tab: <body> <p> <a href="Url(if you have url so link there if not so use '#') target="_blank">HTML</a> </p> <p> If you set the target attribute to "_blank", the link will open in a new browser window or tab. </p> </body>

  6. HTML Links - Create a Bookmark HTML bookmarks are used to allow readers to jump to specific parts of a Web page. Bookmarks are practical if your website has long pages. To make a bookmark, you must first create the bookmark, and then add a link to it. When the link is clicked, the page will scroll to the location with the bookmark. Example First, create a bookmark with the id attribute: <body> <p><a href="#C4">Jump to Chapter 4</a></p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2 id="C4">Chapter 4</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> </body>

  7. Chapter Summary image

  8. HTML Images <body> <h2>Spectacular Mountain</h2> <img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;"> </body> JPG Images

  9. HTML Images Syntax In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag. The src attribute specifies the URL (web address) of the image: <img src=“address image" alt="some_text"> The alt Attribute The alt attribute specifies an alternate text for an image, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). If a browser cannot find an image, it will display the alt text:

  10. Example <body> <p>If a browser cannot find an image, it will display the alternate text:</p> <img src="ani.gif" alt="New" style="width:128px;height:128px;"> </body>

  11. Image Size - Width and Height Image Size - Width and Height You can use the style attribute to specify the width and height of an image. The values are specified in pixels (use px after the value): Example <body> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> </body>

  12. Images in Another Folder If not specified, the browser expects to find the image in the same folder as the web page. However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute: Example <body> <img src="images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> </body>

  13. Images on Another Server Some web sites store their images on image servers. Actually, you can access images from any web address in the world: Example <body> <img src="http://www.Destop/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> </body>

  14. PRACTICAL IMPLEMENTATION

  15. Visit Us : Attitude Academy

More Related