Skip to main content

HTML File Paths

 HTML  FILE PATHS

In HTML, file paths are used to specify the location of external files, such as images, stylesheets, scripts, and other HTML documents. There are three types of file paths commonly used:

1. **Relative Paths**: Relative paths specify the location of a file relative to the current document. They are defined based on the directory structure of the website. Relative paths can be categorized into two types:

   - **Relative Paths without a leading slash**: These paths are relative to the current directory. For example, if your current file is located at `example.com/index.html` and you want to link to an image located in the same directory, you would use `image.jpg` as the path: `<img src="image.jpg">`.

   - **Relative Paths with a leading slash**: These paths are relative to the root directory of the website. For example, if your current file is located at `example.com/blog/index.html` and you want to link to a stylesheet located in the root directory, you would use `/css/style.css` as the path: `<link rel="stylesheet" href="/css/style.css">`.

2. **Absolute Paths**: Absolute paths specify the complete URL or file path to a resource. They include the protocol (`http://` or `https://`) and the full URL or file path. Absolute paths are typically used when linking to external resources on other websites. For example: `<script src="https://example.com/js/script.js"></script>`.

3. **Root-Relative Paths**: Root-relative paths are similar to relative paths with a leading slash, but instead of being relative to the website's root directory, they are relative to the server's root directory. They start with a leading slash (`/`) but do not include the domain name. For example: `<img src="/images/image.jpg">`.

It's important to note that the correct usage of file paths depends on the file's location relative to the current HTML document and the desired resource.
Labels:
Location: India

Comments

Post a Comment

Popular posts from this blog

What is CSS (Cascading Style Sheet)

Cascading Style Sheets (CSS): In the dynamic world of web development, HTML (Hypertext Markup Language) serves as the foundation, laying out the structure of a webpage. However, for a webpage to captivate its audience with visually appealing designs and layouts, it requires the artistic touch of CSS, or Cascading Style Sheets. 👉Defining CSS: CSS is a style sheet language used to describe the presentation of a document written in HTML or XML. It enables web developers to control the visual aspects of a webpage, such as colors, fonts, spacing, and positioning, without altering the underlying structure defined by HTML. The term "Cascading" in CSS refers to the order of priority the styles are applied, allowing for flexibility and consistency. 👉Separation of Concerns: One of the key principles of web development is the separation of concerns, and CSS plays a crucial role in achieving this. While HTML focuses on the structure and content of a webpage, CSS handles the aesthetics ...
Post a Comment
Read more

Tables in HTML

How to Use Table tag in HTML In this blog we understand the table elements in HTML. How to Create a Tables in HTML Firstly we understand table elements.  1. when we create a table in editor type with <table> 2. after that we create a table row with <tr> 3. between <tr> we create table data <td> see it into sublime text editor <body> <table border="1px"> <caption> Student Data</caption> <tr> <td> Name</td> <td>Roll NO</td> <td>Marks</td> <td>total Marks</td> <td>Percentage</td> </tr> <tr> <td> JOhn</td> <td>32655</td> <td>250</td> <td>500</td> <td>50%</td> </tr> <tr> <td> Carter</td> <td>1254</td> <td>250</td> <td>500</td> <td>50%</td> </tr> </table> W...
Post a Comment
Read more

HTML BORDER WITH CSS

 Many Type of HTML Border We have many types of border in HTML. We can change it with border style and colors. So we discussed how to change a Border color and Style in HTML. 1.      Firstly we write a Code in Sublime Text and Save it to Borderwithcss file 2.      Secondly we link a stylesheet in  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>change border style</title> <link rel="stylesheet" type="text/css" href="d:/html blog/style.css"> </head> <body> <p class="b1"> this is a normal paragraph for change border style with css</p> <p class="b2"> this is a normal paragraph for change border style with css</p> <p class="b3"> this is a normal paragraph for change border style with css</p> <p class="b4"...
Post a Comment
Read more