Web Programming

Week 2

1
Summary of the previous
lecture
• What is HTML?
• Basic Structure of HTML page
• Body tag attributes
• Text formatting tags
• Lists

2
HTML Links

3
 1. HTML links
• The crux of HTML is its capability to
reference countless other pieces of
information easily on the internet
• When you link to another page in your
own web site, the link is known as an
internal link
• When you link to a different site, it is
known as an external link
4
 1.1 Internal links
• The element <a> is used to link another
document
• Anything between the opening <a> tag
and the closing </a> tag becomes part of
the link that users can click in a browser

5
 1.1 Internal links…
• To link another page, href attribute of
opening tag of <a> is used
• the value of the href attribute is the name
of the file you are linking to
For example:
• <a href=“abc.html”> Click here </a>

6
1.1 Internal links…

7
1.1 Internal links…

8
1.1 Internal links…

9
 1.2 External links
• To link the page of another website, again
the href attribute of opening tag of <a> is
used
• the value of the href attribute is the full
web address for the page you want to link
to rather than just the filename
• <a href="https://www.google.com.pk"> Click
here </a>

10
1.2 External links …

11
3. Internal document references

12
3. Internal document references

13
 4. More attribute for <a>
• accesskey:
– <a href=“abc.html” accesskey=“a”>…..</a>
• target:
– <a href=“abc.html” target=“_blank”>….</a>
• title:
– <a href=“abc.html” title=“it,s a link”>….</a>

14
4. More attribute for <a>…

15
HTML Images

16
 1. Adding images to web pages
• <img> tag is used to add images to web pages
• SRC attribute of the <img> tag is used to
indicate the source of the image
• We can add an image by
– <img src=“image-name”>
– <img src=“abc.jpg”>

17
 1.1 Attributes of <img> tag
1. Height and width:
• <img src=“image-name” height=“100”
width=“100”>
2. Alt attribute:
– <img src=“image-name” alt=“image description”>
3. Align attribute:
– <img src=“image-name” align=“left”>
– Left, right, top, bottom, middle

18
1.1 Attributes of <img> tag …
4. Border attribute:
– <img src=“image-name” border=“2”>

19
1.1 Attributes of <img> tag …

20
1.1 Attributes of <img> tag …

21
1.1 Attributes of <img> tag …

22
1.1 Attributes of <img> tag …

Align top
middle
Align

23
1.1 Attributes of <img> tag …

Wrong image name

24
1.1 Attributes of <img> tag …

Image is found

Image not found

25
1.1 Attributes of <img> tag …

26
1.1 Attributes of <img> tag …

27
 2. Using images for linking
• We can put images between <a> and </a >
tags instead of text to link other documents
or portions of the page
• <a href=“page-reference”> <img src=“image-
srource”></a>
• <a href=“abc.html”> <img src=“img.jpg”></a>

28
 2. Using images for linking…
Link

Image

29
HTML Audio &Videos

30
 4. Adding videos to web pages
• The <video> tag is used to add a video to a
web page
• This tag is provided in HTML5
• The src attribute of the <video> tag is used to
indicate the source of the video
• We can add a video to our page as
– <video src=“abc.mp4”>

31
 4. Adding videos to web pages…
• Attributes of <video> tag:
• Auto-play
• Controls
• Height
• Loop

32
 4. Adding videos to web pages…

Source of the video

Video tag

Controls attribute
Loop attribute

Auto-play attribute

33
 5. Adding audio to web pages…
• The <audio> tab is used to add a video to a
web page
• This tag is provided in HTML5
• The src attribute of the <audio> tag is used to
indicate the source of the audio
• We can add a video to our page as
– <audio src=“abc.mp3”>

34
 5. Adding audio to web pages…
• Attributes of <audio> tag:
• Auto-play
• Controls
• Loop

35