Links Images Contents HTML
advertisement
HTML Contents Links Images HTML- lec 3 T.A. Reem Alshnaifi 10-Feb-13 HTML Links : • writing a link • links between my own pages •Linking to a Specific Part of a Page •Email link • Link that is not underlined writing a link Example <!DOCTYPE html> <html> <head><title>Writing Links</title></head> <body> <a href="http://www.w3schools.com" target="_blank" title="Visit w3schools and learn HTML">Visit W3Schools.com!</a> </body></html> Note: • If you set the target attribute to "_blank", the link will open in a new browser window • The title attribute is used to type a short description of the link links between my own pages <!DOCTYPE html> <html> <head><title> index </title></head> <body> <a href="page1.htm"> about us </a> </body> </html> <a href="subfolder/page1.htm">about us </a> <a href="../page1.htm">A link to page 1</a> Example Linking to a Specific Part of a Page Example <!DOCTYPE html> <html> <body> <p><a href="#heading1">Link to Learn HTML</a></p> <p><a href="#heading2">Link to Learn CSS </a></p> <h1 id="heading1"> Learn HTML</h1> <p>Text text text text</p> <h1 id="heading2"> Learn CSS </h1> <p>Text text text text</p> </body> </html> Email link Example <!DOCTYPE html> <html> <body> <a href="mailto:computerdepartment@hotmail.com"> Send an e-mail to computer department </a> </body> </html> Link that is not underlined <!DOCTYPE html> <html> <body> <a href="http://www.w3schools.com" style="text-decoration:none;">Visit W3Schools.com!</a> </body> </html> Example HTML HTML Images: • Insert images • Insert images from different locations • Aligning Images Vertically • Aligning Images Horizontally • Make a hyperlink of an image Insert images <!DOCTYPE html> <html> <body> <p> An image: <img src="smiley.gif" alt="Smiley face" title="Here is a picture of a smiley face" width="32" height="32"/></p> </body> </html> Example Insert images from different locations Example <!DOCTYPE html> <html><body> <p>An image from another folder:</p> <img src="../images/chrome.gif“/> <p>An image from W3Schools:</p> <img src="http://www.w3schools.com/images/ w3schools_green.jpg"/> </body></html> Aligning Images Vertically Example <!DOCTYPE html> <html><body> <p><img src="smiley.gif" align="bottom" width="100" height="100“/> This is some text.</p> <p><img src="smiley.gif"align="middle" width="100" height="100“/> This is some text. </p> <p> <img src="smiley.gif" align="top" width="100" height="100“/> This is some text. </p></body></html> Aligning Images Horizontally Example <!DOCTYPE html> <html><body> <p><img src="smiley.gif" align="left" /> A paragraph with an image. The image will float to the left of this text. </p><hr> <p><img src="smiley.gif" align="right" /> A paragraph with an image. The image will float to the right of this text. </p> </body></html> Make a hyperlink of an image Example <!DOCTYPE html> <html><body> <center> <p>Create a link of an image without border around it :</p> <a href ="https://www.google.com.sa/"> <img border="0" src="https://www.google.com.sa/images/srpr/lo go3w.png" /></a> </center> </body></html>
