Learn HTML

Learn to code and become a Front End Web Developer.

Campsite Coders Bootcamp Coding Adventure

HTML External Files

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.

The Power of External Files in HTML


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:


Modularity: External files allow you to modularize your code. Instead of cluttering your HTML with long CSS styles or extensive JavaScript, you can neatly organize these components into separate files.

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.

Collaboration: In team settings, external files make collaboration more manageable. Designers can work on CSS, developers on JavaScript, and content creators on HTML, all concurrently without interfering with each other's work.

Now, let's dive into some of the essential types of external files and how to link them into your HTML pages:

CSS Files: Styling Your Web 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.

external style sheets


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:

<head>

<link rel="stylesheet" type="text/css" href="styles.css">

</head>

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.

JavaScript Files: Adding Functionality

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.

external javascript shown in html


JavaScript files bring interactivity and functionality to your web pages. They enable features like form validation, dynamic content updates, and responsive user interfaces. To link an external JavaScript file, use the <script> element at the bottom of your HTML, just before the closing </body> tag:

<script src="script.js"></script>

</body>

"script.js" is the external JavaScript file in this case. By placing it at the end of your HTML, you ensure that the page's content loads before any JavaScript functions are executed.


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.

external script files shown at bottom of html file


Font Files: Enhancing Typography


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:

@font-face {

font-family: 'CustomFont';

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.

Media Files: Enriching Content

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.


Best Practices for Linking External Files

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.

In the ever-evolving landscape of web development, external files are invaluable tools that streamline design, enhance functionality, and optimize web performance. Whether it's CSS files for styling, JavaScript files for interactivity, font files for typography, or other external resources, they all play a vital role in creating dynamic, engaging, and efficient web experiences. By mastering the art of linking external files into your HTML pages, you're equipped to build websites that not only look great but also deliver exceptional user experiences. As you continue your journey in web development, remember that external files are your allies in crafting modern, feature-rich web content, and they are essential for staying at the forefront of web design and functionality. Keep exploring, keep coding, and keep pushing the boundaries of what's possible in the digital world. Your web development journey is full of exciting possibilities!


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.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved