The HTML <link> element specifies the connection between the current document and an external resource.
The HTML <link> element is often used to link to external style sheets (CSS).
The HTML <link> tag is an empty element (it contains only attributes).
The HTML <link> element should be placed in the <head> section of the document.
<link rel="stylesheet" href="example-style.css">
<h4>This is a heading.</h4>
<p>This is a paragraph.</p>
<p>This is the second paragraph.</p>
crossorigin (value- anonymous/ use-credentials) – defines how the tag handles cross-origin requests.
href (value- URL) – defines the location of the linked file.
hreflang (value- language_code) – defines the language of the text in the linked file.
media (value- media_query) – defines what kind of device the linked file will be displayed.
speech – screenreaders that “reads” the page out loud.
referrer policy (value- no-referrer/ no-referrer-when-downgrade/ origin/ origin-when-cross-origin/ unsafe-url) – defines which referrer to use when fetching the resource.
rel (required), (value- alternate/ author/ dns-prefetch/ help/ icon/ license/ next/ pingback/ preconnect/ prefetch/ preload/ prerender/ prev/ search/ stylesheet) – defines the connection between the current document and the linked file.
size (value- HeightxWidth/ any) – defines the size of the linked resource. Only for rel=”icon“.
type (value- media_type) – defines the media type of the linked file.
async (value- async) – defines that the script is executed asynchronously (can be only used if the src attribute is present).
crossorigin (value- anonymous/ use-credentials) – sets the mode of the request to an HTTP CORS Request.
defer (value- defer) – defines that the script is executed when the page has finished parsing (can be only used if the src attribute is present).
integrity (value- filehash) – allows a browser to check the fetched script to ensure that the code is never loaded if the source has been manipulated.
nomodule (value- true/false) – defines that the script should not be executed in browsers that support ES2015 modules.
referrerpolicy (value- no-referrer/ no-referrer-when-downgrade/ origin/ origin-when-cross-origin/ same-origin/ strict-origin/ strict-origin-when-cross-origin/ unsafe-url) – defines which referrer information to send when fetching a script.
Each YouTube video has a unique Id (like o5daeOwl-4Q). To check which Id has your chosen video open to video in YouTube and press on the Share button (in the new window, you will see the Id number).
Note: By pressing the button Share you can use the option Embed <> to get ready code which you can paste into your HTML document, however, if you want to set your own settings (like dimension, autoplay, loop, etc…) and learn how to write the code by yourself follow the steps below.
By using the height and width attributes you can define the dimension of the player:
An <iframe> with a specified width of 100% and a height of 400px:
You can let your video start playing automatically when a user visits your website, by adding autoplay=1 to the YouTube URL. Automatically starting video can be annoying for your website visitors so you can set the muted autoplay by adding mute=1 after autoplay=1 to let your video start playing automatically (but muted):
loading (value- eager, lazy) – defines whether a browser should load an iframe immediately or defer the loading of iframes until some conditions are met.
name (value- text) – defines the name of an <iframe>.
referrerpolicy (value- no-referrer/ no-referrer-when-downgrade/ origin/ origin-when-cross-origin/ same-origin/ strict-origin-when-cross-origin/ unsafe-url) – defines which referrer information to send when fetching the iframe.
sandbox (value- allow-forms/ allow-pointer-lock/ allow-popups/ allow-same-origin/ allow-scripts/ allow-top-navigation) – Enables an extra set of restrictions for the content in an <iframe>.
src (value- URL) – defines the address of the document to embed in the <iframe>.
srcdoc (value- HTML_code) – defines the HTML content of the page to show in the <iframe>.
width (value- px) – defines the width of an (default width is 300 px).
Adobe Premiere Pro is a video editor and is not the best tool for creating a small size GIF.
If you tried exporting GIF from Adobe Premiere Pro using the “animated GIF” option, but the image output was still poor no matter what settings you chose, you can try to fix this issue with help of Adobe Photoshop.
To export high-quality GIF using Adobe Premiere Pro and Adobe Photoshop follow the steps below:
Adobe Premiere Pro
Open the Adobe Premiere Pro and create the new sequence (go to the File ->New->Sequence…)
In the new sequence window, go to the settings and change the frame size to your preferred one. Make sure that the square pixels(Pixels Aspect Ratio) option has been selected. Press Okay.
Go to File->Import, and select the video that you want to make into the GIF.
Drag your video to the sequence panel:
If your video is in a different size then your sequence will pop the information with Clip Mismatch Warning. Press Keep Existing Settings to do not change the sequence frame size.
After dragging a video to the sequence panel your video may not match with the sequence. To fix this click on your video in the sequence panel and go to Effect Controls.
In the Effect Controls panel go to the Scale. Use the horizontal slider to fit the size of your video to the sequence.
If you want to move a video horizontally, or vertically go to the Position option (in the Effect Controls panel).
The first value in the Position option defines the horizontal position, the second value defines the vertical position. Change the values to set the wanted position of your video.
Go to File->Export->Media..
In the Export Settings, go to the format and select from the drop-down menu an option H.264 (to export a video in mp4 format).
At the bottom of the Export Settings, select the part of the movie that you want to export. On the right side of the Export Setting, you can change the name of your movie and the localization. Press Export.
Open Photoshop and go to File->Import and select an option Video Frames to Layers…
Choose a video exported from Adobe Premiere Pro, and make sure that the option – Make Frame Animation is ticked.
Go to Window->Timeline to see the timeline (all frames):
To export GIF in Photoshop go to File->Export->Save for Web(Legacy)…
Make sure that exported file will be in a GIF format. Change the Looping options to Forever. Press Save…
autocomplete (value- on/off) – defines whether a form should have autocompleted on or off.
<p>Fill in and submit the form, then reload the page, start to fill in the form again - and see how autocomplete works.</p>
<form action="" method="get" autocomplete="on">
<input type="text" id="name" name="name"><br><br>
<input type="text" id="email" name="email"><br><br>
Fill in and submit the form, then reload the page, start to fill in the form again – and see how autocomplete works:
on (default) – the browser will automatically complete values based on values that the user has entered before.
off – the user must enter a value into each field for every use.
enctype (value- application/x-www-form-urlencoded,multipart/form-data, text/plain) – defines how the form-data should be encoded when submitting it to the server.
Note: The enctype attribute can be used only for method=”post”.