Select Page

Links and Images

Introduction to Web Development – Front End HTML/ CSS Links and Images
Lesson Progress
0% Complete

Links

If you need to connect one webpage to the other, you can use a link (aka a hyperlink). When someone viewing a website clicks on a link, it can open a new webpage. Anchor elements <a> can use an href to point to a link! Why don’t you click on THIS link!





&lt;!doctype html&gt;
  &lt;body&gt;
    &lt;h1&gt;The internet is a series of links!&lt;/h1&gt;
    &lt;hr /&gt;
    &lt;div&gt;
      Sometimes you'll want to link to a new site, or a new page! &lt;a href='https://bdpastl.github.io'&gt;I am a link! Please click me&lt;/a&gt;. By including links in your site, you can create a create a very dynamic experience!
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;





You can also link to other portions of the webpage you are currently on using the anchor tag with an ID <a href='#anchorID'></a>. Our webpages aren’t big enough yet for this to be suer useful, but it will be nice to know once we start writing much larger webpages:




&lt;!doctype html&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;h1&gt;The internet is a series of links!&lt;/h1&gt;
    &lt;hr /&gt;
   &lt;div&gt;
        Suppose I wanted to make sure somebody could navigate right to a spot on my page! I could then write an anchor with the attribute &lt;a id='comeToMe'&gt; to come directly to this spot&lt;/a&gt;.
    &lt;/div&gt;
​
    &lt;div&gt;
      On a completely different spot on the same page, we can create a navigation href by saying &lt;a href='#comeToMe'&gt;click here to go to the other spot!&lt;/a&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;






Images





When you want to include an image on your website, you’ll need the <img /> tag. Just like the anchor tag, the image tag will need an href attribute that points to the image you want to display. Take note, the image tag is a self closing tag, as there is no need to render text inside of the image tag. There are multiple ways to upload an image to your site, but for now, let’s just grab a link. We need to place the link as a value for the source attribute, like below! See the code in action!




&lt;!doctype html&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;h1&gt;Check out this dank meme&lt;/h1&gt;
    &lt;hr /&gt;
    &lt;div&gt;
        &lt;img src='https://i.imgflip.com/536zfj.jpg' /&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;





Not all images are the same size. If you need to resize your image, you can scale it yourself! Check it out:




&lt;!doctype html&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;h1&gt;Check out this (tiny) dank meme&lt;/h1&gt;
    &lt;hr /&gt;
    &lt;div&gt;
        &lt;img src='https://i.imgflip.com/536zfj.jpg' style='width:100px; height:140px' /&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;






			


			
	
 


 




		

			
						
						Previous Topic
		
		


				
								Back to Lesson			
			

							
					Next Topic
											
									
						

				

 


 


			

			

				
				
				
				
			

				
				
			

				
				
				
				
				
				
				

				

				
				
				
				
				

				
				
				
				
				
			

			

				
				
				
				
				

				
				
				
				
				
4084