SlideShare a Scribd company logo
1 of 6
Inserting images into a webpage
<img> element is used to include images into
webpages. This can have special functions
added to make an image look different in a
webpage.
Inserting images into a webpage

The Src attribute specifies the location of a
particular image.

Width specifies the width of an image.

Height specifics the height of an image.

Align will place an image in a particular
direction which can be top, middle, bottom,left
and right.
So in html, it could appear as <img
src=”image.jpg” width=”100” align=left>
Task one

Create a webpage that will show an image in
the middle with a height of 250 and width of
200.
Task two

Create a webpage that will show 2 images
aligned to the left side of the webpage and
with a title in the middle.
Internal linking between
webpages
The <a> element is known as the anchor
element and specifies the phrase that is to be
used for a hyperlink and gives the reference to
the linked location. There are 3 attributes for
this element-

Href- location specified in the link in the value
is the destination of the hyperlink.

Name- allows the element to create a link to
another section on the same webpage.

Shape-used to define the shape of zones for a
graphical link.
Task three

Create a webpage with a name link, it should
be created by following this example-
<a href=”#link”> link here </a> <br>
<a name=”link”>
<p> this has brought to this section of the page
</P>
Task three

Create a webpage with a name link, it should
be created by following this example-
<a href=”#link”> link here </a> <br>
<a name=”link”>
<p> this has brought to this section of the page
</P>

More Related Content

Similar to Linking

Sadielai10x10presentation
Sadielai10x10presentationSadielai10x10presentation
Sadielai10x10presentation
sadielai
 
07. session 07 adv css properties
07. session 07   adv css properties07. session 07   adv css properties
07. session 07 adv css properties
Phúc Đỗ
 

Similar to Linking (20)

Web forms and html lecture Number 2
Web forms and html lecture Number 2Web forms and html lecture Number 2
Web forms and html lecture Number 2
 
Html 5 and CSS - Image Element
Html 5 and CSS - Image ElementHtml 5 and CSS - Image Element
Html 5 and CSS - Image Element
 
Html images syntax
Html images syntaxHtml images syntax
Html images syntax
 
Std 10 Computer Chapter 3 Handling Images in HTML (Part 1)
Std 10 Computer Chapter 3 Handling Images in HTML (Part 1)Std 10 Computer Chapter 3 Handling Images in HTML (Part 1)
Std 10 Computer Chapter 3 Handling Images in HTML (Part 1)
 
Unit 2.7 Images
Unit 2.7 ImagesUnit 2.7 Images
Unit 2.7 Images
 
How to place images inside widgets in the sidebars in WordPress
How to place images inside widgets in the sidebars in WordPressHow to place images inside widgets in the sidebars in WordPress
How to place images inside widgets in the sidebars in WordPress
 
Html images
Html imagesHtml images
Html images
 
Html 5
Html   5Html   5
Html 5
 
lecture4.ppt
lecture4.pptlecture4.ppt
lecture4.ppt
 
Web forms and html (lect 2)
Web forms and html (lect 2)Web forms and html (lect 2)
Web forms and html (lect 2)
 
Chapter 4 class power point
Chapter 4 class power pointChapter 4 class power point
Chapter 4 class power point
 
HTML Images
HTML Images HTML Images
HTML Images
 
HTML_Images.ppt
HTML_Images.pptHTML_Images.ppt
HTML_Images.ppt
 
Web htmlt2
Web   htmlt2Web   htmlt2
Web htmlt2
 
What is HTML Hyperlinks and HTML Images?
What is HTML Hyperlinks and HTML Images?What is HTML Hyperlinks and HTML Images?
What is HTML Hyperlinks and HTML Images?
 
HTML5 - Insert images and Apply page backgrounds
HTML5 - Insert images and Apply page backgroundsHTML5 - Insert images and Apply page backgrounds
HTML5 - Insert images and Apply page backgrounds
 
Sadielai10x10presentation
Sadielai10x10presentationSadielai10x10presentation
Sadielai10x10presentation
 
S3 HTML Hyperlinks and Images
S3 HTML Hyperlinks and ImagesS3 HTML Hyperlinks and Images
S3 HTML Hyperlinks and Images
 
07. session 07 adv css properties
07. session 07   adv css properties07. session 07   adv css properties
07. session 07 adv css properties
 
More on HTML Communication Skills BASICS
More on HTML Communication Skills BASICSMore on HTML Communication Skills BASICS
More on HTML Communication Skills BASICS
 

More from Max Friel (20)

Assum 4
Assum 4Assum 4
Assum 4
 
Assum 3
Assum 3Assum 3
Assum 3
 
Tourism
TourismTourism
Tourism
 
Practice programs
Practice programsPractice programs
Practice programs
 
Project 1
Project 1Project 1
Project 1
 
Practice and debugging
Practice and debuggingPractice and debugging
Practice and debugging
 
Debugging
DebuggingDebugging
Debugging
 
Strings
StringsStrings
Strings
 
Loops
LoopsLoops
Loops
 
Loops
LoopsLoops
Loops
 
If conditions
If conditionsIf conditions
If conditions
 
Keywords used in javascript
Keywords used in javascriptKeywords used in javascript
Keywords used in javascript
 
Variables
VariablesVariables
Variables
 
Basics
BasicsBasics
Basics
 
Developing html skills 1
Developing html skills 1Developing html skills 1
Developing html skills 1
 
Matching game
Matching gameMatching game
Matching game
 
activity flowcharts
activity flowchartsactivity flowcharts
activity flowcharts
 
Lesson one
Lesson oneLesson one
Lesson one
 
Summer course
Summer courseSummer course
Summer course
 
Law
LawLaw
Law
 

Recently uploaded

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Recently uploaded (20)

[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 

Linking

  • 1. Inserting images into a webpage <img> element is used to include images into webpages. This can have special functions added to make an image look different in a webpage.
  • 2. Inserting images into a webpage  The Src attribute specifies the location of a particular image.  Width specifies the width of an image.  Height specifics the height of an image.  Align will place an image in a particular direction which can be top, middle, bottom,left and right. So in html, it could appear as <img src=”image.jpg” width=”100” align=left>
  • 3. Task one  Create a webpage that will show an image in the middle with a height of 250 and width of 200. Task two  Create a webpage that will show 2 images aligned to the left side of the webpage and with a title in the middle.
  • 4. Internal linking between webpages The <a> element is known as the anchor element and specifies the phrase that is to be used for a hyperlink and gives the reference to the linked location. There are 3 attributes for this element-  Href- location specified in the link in the value is the destination of the hyperlink.  Name- allows the element to create a link to another section on the same webpage.  Shape-used to define the shape of zones for a graphical link.
  • 5. Task three  Create a webpage with a name link, it should be created by following this example- <a href=”#link”> link here </a> <br> <a name=”link”> <p> this has brought to this section of the page </P>
  • 6. Task three  Create a webpage with a name link, it should be created by following this example- <a href=”#link”> link here </a> <br> <a name=”link”> <p> this has brought to this section of the page </P>