Web Programming 1_Lab_3
HTML Images
HTML Images Syntax
• The HTML <img> tag is used to embed an image in a web page.
• The <img> tag contains attributes only, and does not have a closing
tag.
• The <img> tag has four required attributes:
o src - Specifies the path to the image
o alt - Specifies an alternate text for the image
owidth
oHeight
• <img src="url" alt="alternatetext">
HTML Images
• <!DOCTYPE html>
• <html>
• <head>
• <title>Images</title>
• </head>
• <body>
• <img src="Flowers.jpg" alt="Flowers Image">
• </body>
• </html>
HTML Images
• <!DOCTYPE html>
• <html>
• <head>
• <title>Images</title>
• </head>
• <body>
• <img src="Flowers.jpg" alt="Flowers image" width = "200"
height = "200">
• </body>
• </html>
Images on Another Server/Website
• <!DOCTYPE html>
• <html>
• <head>
• <title>Images</title>
• </head>
• <body>
• <img src="https://www.w3schools.com/images/w3schools_green.jpg"
alt="W3Schools.com">
• </body>
• </html>
Animated Images
• <!DOCTYPE html>
• <html>
• <head>
• <title>Images</title>
• </head>
• <body>
• <img src="Images/200.gif" alt="W3Schools.com">
• </body>
• </html>
HTML Links
HTML Links - Syntax
• The HTML <a> tag defines a hyperlink.
• <a href="url">link text</a>
• The most important attribute of the <a> element is the
href attribute, which indicates the link's destination.
HTML Links
• <!DOCTYPE html>
• <html>
• <head>
• <title>Links</title>
• </head>
• <body>
• <a href="https://www.w3schools.com/">Visit
W3Schools.com!</a>
• </body>
• </html>
HTML Links - The target Attribute
• The target attribute specifies where to open the linked document.
• The target attribute can have one of the following values:
o _self - Default. Opens the document in the same window/tab as it was clicked
o _blank - Opens the document in a new window or tab
HTML Links - The target Attribute
• <!DOCTYPE html>
• <html>
• <head>
• <title>Links</title>
• </head>
• <body>
• <a href="https://www.w3schools.com/" target = "_blank">Visit
W3Schools.com!</a>
• </body>
• </html>
Link to an Email Address
• Use mailto: inside the href attribute to create a link that opens the user's email program
• <!DOCTYPE html>
• <html>
• <head>
• <title>Links</title>
• </head>
• <body>
• <a href="mml.9237.gabr@gmail.com">Send email</a>
• </body>
• </html>
Link Titles
• The title attribute specifies extra information about an element. The information is most
often shown as a tooltip text when the mouse moves over the element.
• <!DOCTYPE html>
• <html>
• <head>
• <title>Links</title>
• </head>
• <body>
• <a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
• </body>
• </html>
Task
<!DOCTYPE html>
<html>
<head>
<title>I love HTML </title>
</head>
<body>
<h1 align="center">
HTML Practice Exersice
</h1>
<br>
<img src="Images/Picture1.png" alt="Flowers Image" height = "50" width = "50">
<a href="https://www.google.com/" target = "_blank">Google</a>
<br>
<hr>
<p>I love <i>HTML</i> because:</p>
<ol>
<li>I learned it quickly</li>
<li>I can make web pages using code</li>
<li>It is fun</li>
</ol>
<hr>
<p>My professor's e-mail address is
<a href="fdgdfi.9237.gabr@gmail.com">Send email</a>
</p>
<h2>Have a great day!</h2>
</body>
</html>
