Adding external resources to your web page can add a lot of flexibility and dynamic content. External files may include links to frameworks like Bootstrap or React. You can also add external links to add additional fonts and icons to your pages using Google Fonts and Font Awesome. And then there are the marketing assets that you can add to your pages like Google Analytics, Google Maps, MailChimp, Facebook Pixel, and many more. Read below to find out where in your page you can add links to external resources.
Think of your web page as a puzzle, with various pieces coming together to form the complete picture. External files are those essential pieces, often residing outside the HTML document but linked into it. They offer several benefits that contribute to better web design and functionality:
Efficiency: When you use external files, web browsers can cache them, which means that once a user visits your site, these files are stored locally. This accelerates the loading of subsequent pages, providing a smoother user experience.
Consistency: External files promote consistency. You can use the same CSS file across multiple web pages, ensuring a uniform look and feel throughout your site. This also simplifies maintenance.
Now, let's dive into some of the essential types of external files and how to link them into your HTML pages:
You can bring in cascading style sheets by linking to them in the head section of your html web page. If the stylesheet exists in your project folder then you can simply add a link to the file starting with the folder name and then file name. If you are linking to an external stylesheet hosted on another website then you must include the https:// path to the stylesheet. Be sure to use rel="stylesheet" or your styles will not work. You then add the link to the external file in the value of the href property. The link tag is a self closing tag so you don't have to include at the end of it. Some web developers add / > to the end of the line of code for the link but it will work with or without it.
CSS (Cascading Style Sheets) files are the magic wands of web design. They define how your web content is presented, from fonts and colors to layout and animations. To link an external CSS file to your HTML page, use the <link> element in the <head> section of your HTML:
<link rel="stylesheet" type="text/css" href="styles.css">
In this example, "styles.css" is the external CSS file. By linking it into your HTML, you separate the design from the content, making it easy to update the look of your site across multiple pages.
When you work with third-party websites that provide you with a link to a script you will be told whether or not to add that link in the head tag or in the closing body tag. Scripts that go in the head tag will be scripts that need to load before anything else.
Scripts that go before the closing body tag are usually scripts that if placed in the head tag would cause rendering problems and delay your page from being quickly processed in the browser. That is why it is very important to place the link where the third party vendor tells you to. It is also important to place scrips in the correct order. You can use comments in your code to make this stand out to other developers who may be looking at your code. Leaving comments in in your code can help avoid problems when multiple developers are working on the same project. Remember that script files use the src property NOT the href property. All links to scripts must have a closing script tag.
Fonts play a significant role in web design. Custom fonts can elevate the visual appeal of your site and improve readability. You can link external font files using the CSS @font-face rule. Here's an example of linking a font file within your CSS:
src: url('customfont.woff2') format('woff2');
With this CSS rule, you define a custom font called "CustomFont" and specify the path to the font file ("customfont.woff2"). Then, you can apply this font to specific HTML elements using the font-family property.
External media files, such as images, audio, and video, are integral to modern web content. You can embed these files directly into your HTML using elements like <img>, <audio>, and <video>. Here's an example of linking an image:
<img src="your-image.jpg" alt="A beautiful landscape">
However, for multimedia-rich websites, it's often more efficient to host these files externally and then link to them from your HTML. Services like YouTube for videos or image hosting platforms can help optimize loading times and bandwidth usage.
As you continue to work with external files in HTML, keep these best practices in mind:
Use Descriptive File Names: Give your files meaningful and descriptive names. This makes it easier to identify their purpose and content.
Keep Your Directory Structure Organized: Maintain a well-structured directory hierarchy to keep your external files organized. It will save you time and reduce the risk of broken links.
Optimize File Sizes: Compress and optimize your files, especially images and fonts, to reduce loading times and improve website performance.
Use CDNs for Common Libraries: For widely-used libraries and frameworks, consider using Content Delivery Networks (CDNs). CDNs can provide faster access to these resources and lessen the load on your server.
Now that you know how to add external files to your project, you are ready to learn how to start coding in the body section of your HTML website.
At this point, you should have a basic understanding of what external files are, why web developers use them, and whether or not you should place them in the head tag or just above the closing body tag. When you feel you are ready - continue your journey toward learning HTML 5.