Learn Advanced and Basic HTML - Lesson 6

1
Learn HTML BasicsLesson No 06

• Publisher Attitude Academy

2
Chapter Summary
Tag Description
ltagt element to define a link
Href attribute to define the link address
Target attribute to define where to open the linked document
Id attribute (id"value") to define bookmarks in a page
Href attribute (href"value") to link to the bookmark
Img  element (inside ltagt) to use an image as a link
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 ltagt tag
ltbodygt ltpgt lta href"Url(if you have url so link
there if not so use '')"gtHTMLlt/agt lt/pgt lt/bodygt
4
HTML Links - The target Attribute
Tag 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
_parent Opens the linked document in the parent frame
new Opens the linked document in a new window or tab
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
ltbodygt ltpgt lta href"Url(if you have url so link
there if not so use '') target"_blank"gtHTMLlt/agt
lt/pgt ltpgt If you set the target attribute to
"_blank", the link will open in a new browser
window or tab. lt/pgt lt/bodygt
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
ltbodygt ltpgtlta href"C4"gtJump to Chapter
4lt/agtlt/pgt lth2gtChapter 1lt/h2gt ltpgtThis chapter
explains ba bla blalt/pgt lth2gtChapter
2lt/h2gt ltpgtThis chapter explains ba bla
blalt/pgt lth2gtChapter 3lt/h2gt ltpgtThis chapter
explains ba bla blalt/pgt lth2 id"C4"gtChapter
4lt/h2gt ltpgtThis chapter explains ba bla
blalt/pgt lth2gtChapter 5lt/h2gt ltpgtThis chapter
explains ba bla blalt/pgt lth2gtChapter
6lt/h2gt ltpgtThis chapter explains ba bla
blalt/pgt lt/bodygt
7
Chapter Summary image
Tag Description
 ltimggt element to define an image
src attribute to define the URL of the image
alt   attribute to define an alternate text for an image, if it cannot be displayed
 Width and Height  attributes to define the size of the image
8
HTML Images
ltbodygt lth2gtSpectacular Mountainlt/h2gt ltimg
src"pic_mountain.jpg" alt"Mountain View"
style"width304pxheight228px"gt lt/bodygt
JPG Images
9
HTML Images Syntax
In HTML, images are defined with
the ltimggt tag. The ltimggt 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 ltimg srcaddress
image" alt"some_text"gt
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
ltbodygt ltpgtIf a browser cannot find an image, it
will display the alternate textlt/pgt ltimg
src"ani.gif" alt"New" style"width128pxheight
128px"gt lt/bodygt
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 ltbodygt ltimg src"html5.gif" alt"HTML5
Icon" width"128" height"128"gt lt/bodygt
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 ltbodygt ltimg src"images/html5.gif"
alt"HTML5 Icon" style"width128pxheight128px"
gt lt/bodygt
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 ltbodygt ltimg src"http//www.Destop/images/
html5.gif" alt"HTML5 Icon" style"width128pxhei
ght128px"gt lt/bodygt
14
PRACTICAL IMPLEMENTATION
15

• Visit Us Attitude Academy