link 2 examples + interpretation
The video tutorial below presents the following
- linking 2 resources: a favicon and a css style sheet:
1st example: <link rel="icon" href="favicon.png" type="image/png" sizes="16x16">
2nd example: <link rel="stylesheet" type="text/css" href="main.css" hreflang="en" media="print"> - explaining each part of the code
- interpretation for the 2nd example
- removing step by step each attribute to highlight the impact in Browser if any
Video demonstration interpreting link's attributes
HTML5 interpreting link's attributes Tutorial
| min | video details |
|---|---|
| 00:17 | 1st example: adding a favicon to our HTML5 document |
| 00:21 | the favicon we're going to add |
| 00:28 | the html code we need to link the that favicon to our html page |
| 00:30 | Explaining each part of the code |
| 00:31 | link: we will link favicon.png to index.php through link element |
| 00:35 | href: and we will add the path toward the favicon.png through href attribute |
| 00:40 | rel: then we must specify the relationship this resource has with the current document through rel attribute |
| 00:45 | type: for user agents, a useful information is to specify the resource MIME type through type attribute |
| 00:51 | sizes: only for icons, we can add the sizes attribute to specify the width and height of the resource note: sizes attribute currently not supported in Browser |
| 01:00 | test |
| 01:04 | test result ok; the icon is linked to our document and displays in browser |
| 01:07 | sizes attribute currently not supported in browser |
| 01:11 | icon size did not change |
| 01:17 | rel attribute is required; removing it → the linked resource no longer displays |
| 01:31 | 2nd example: adding a print style sheet |
| 01:37 | the html code we need to link the the style sheet to our html page |
| 01:40 | Explaining each part of the code |
| 01:40 | link: we will link main.css to index.php through link element |
| 01:45 | href: and we will specify the path of the resource main.css through href attribute |
| 01:49 | rel: then we must specify the relationship between the resource and the current document through rel attribute |
| 01:55 | type: for user agents, a useful information is to specify the resource MIME type through type attribute |
| 01:59 | hreflang: we can also specify the language of the linked resource through hreflang attribute |
| 02:04 | media: the linked resource should apply only when the specified media occurs: in print preview mode and when printing the current document |
| 02:09 | INTERPRETATION: we linked (link) the main.css file to our page, which is CSS style sheet (rel), type text⁄css (type), this linked resource is in english (hreflang), and will apply only when users intend to print (media) the html document |
| 02:26 | refreshing the page and test |
| 02:29 | entering the "Print Preview" mode |
| 02:37 | test result ok: the style defined inside main.css file applied to print media |
| 02:44 | test result ok: the style defined inside main.css file did not apply to other media (screen) |
| 03:06 | changing the media: form print to screen and test |
| 03:10 | removing the media and test |
| 03:32 | removing the rest of the optional attributes: hreflang, type and test |
| 03:40 | page display in different media not affected |
| 03:49 | removing rel attribute which is required → the linked resource no longer applies |