Image links, social media icons, and floating elements
This series of videos starts to look at some of the content and presentation details of a web page. We use images to link to other pages and use the float property to bring content inline horizontally.
For image links we essentially embed an image inside an anchor tag.
Image link code example:
<a href="home.html"><img src="some-image.png"></a>
The float property takes elements out of the normal HTML flow. We can use CSS to float an element to the left or right of other elements.
CSS float example:
.my-class {float: left;}
Follow along with your own CodePen. The links to the images used are below.
Image links
<!--logo image-->https://res.cloudinary.com/dhs8rxbzp/image/upload/v1595992021/logo_2x_xabxuh.png<!--social icons-->https://res.cloudinary.com/dhs8rxbzp/image/upload/v1596586840/sm-icon-twitter_vviebz.pnghttps://res.cloudinary.com/dhs8rxbzp/image/upload/v1596586840/sm-icon-instgram_jdrjjc.pnghttps://res.cloudinary.com/dhs8rxbzp/image/upload/v1596586840/sm-icon-facebook_tpfx0v.pnghttps://res.cloudinary.com/dhs8rxbzp/image/upload/v1596586840/sm-icon-you-tube_asejhs.png
The taget attribute
The target attribute specifies where to open the linked document.
<a target="_blank"> This link will open in a new tab </a>
Value
Description
_blank
Opens the linked document in a new window or tab
_self
Opens the linked document in the same frame as it was clicked (this is default)
_parent
Opens the linked document in the parent frame
_top
Opens the linked document in the full body of the window
framename
Opens the linked document in the named iframe
Finished CodePen