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.png
https://res.cloudinary.com/dhs8rxbzp/image/upload/v1596586840/sm-icon-instgram_jdrjjc.png
https://res.cloudinary.com/dhs8rxbzp/image/upload/v1596586840/sm-icon-facebook_tpfx0v.png
https://res.cloudinary.com/dhs8rxbzp/image/upload/v1596586840/sm-icon-you-tube_asejhs.pngThe 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 |
