Links, Images, and Attributes

► This video looks at HTML attributes in links and images. Attributes provide additional information about HTML elements and allow us to configure or adjust the behavior of elements in a variety of ways. For example, images, videos, and several other HTML elements can have height and width attributes that determine size. In this video, we will learn: All HTML elements can have attributes. Attributes provide additional information about elements. We add attributes to the opening tag. Attributes usually come in key/value pairs like attribute="value". ► Timestamps: 0:00 Start 1:08 Attributes we saw in the last video 1:38 What are attributes? 1:48 Attribute syntax 2:02 The MDN Attribute reference 3:07 Links 3:32 The href attribute 4:37 HTTP 5:36 Dead links 5:53 The target attribute 6:32 The clickable content of links 7:01 Images 7:19 Image source 10:12 Using attributes to set image sizes 12:00 The alt attribute 14:04 Using images as links 15:28 Relative links (links to other pages within the same site) 17:25 Internal links (links to locations on the same page) 18:38 Using IDs for internal linking 22:05 Summary 23:36 Smooth scrolling with JavaScript ► Get the code: Repo: https://github.com/craigabourne/html-attributes-links-images JavaScript used for the scrolling (visit the link, copy the code and paste into the bottom of your body section): https://gist.github.com/craigbourne/53c4d695abd8fdde76c301c7c8f68e9d ► Links used in the video: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a https://unsplash.com/ https://en.wikipedia.org/wiki/Google https://developers.google.com/web/tools/chrome-devtools/ https://webaim.org/techniques/alttext/ http://wave.webaim.org/ ► The HTML for Absolute Beginners playlist: https://www.youtube.com/playlist?list=PL4cTxE4s2XIYJL6uPQUwMt25M70gPl-O6 ► Social Media: https://www.twitter.com/craigabourne https://www.instagram.com/craigabourne ► Code & Projects: https://github.com/craigabourne https://codepen.io/craigabourne