Visual Studio Code recognizes many different programming languages. We can use the application for our Python projects and our HTML/CSS work. Show
Let’s build a simple webpage just like we did in the HTML and CSS chapters. However, this time we will do it locally. 17.7.1. Hello, Web¶Add a new directory to Our file tree should look something like this: The Notice that VS Code displays different symbols next to the files. It uses the Paste this code into
Even though the code only contains a single 17.7.2. Viewing Local Files in a Browser¶There are two ways to view our local HTML file in a browser.
Ta da! Our webpage appears. Notice the path in the address bar. It looks very similar
to the result we would see from the 17.7.2.1. Add More Elements¶
Tip VS Code has a nice feature to let us know if we have saved our work recently! In the editor tabs, if we see a solid dot ( 17.7.2.2. For Your Eyes Only¶Only you can see
your local webpage. Looking at the address bar tells us this. Instead of Much later in this course, we will learn how to deploy a website and make it visible to anyone who accesses the web. 17.7.3. Adding CSS¶Since the
Line 7 uses the identical format to what we learned in the Linking CSS to HTML section. 17.7.3.1. Try It!¶
17.7.3.2. style.css in a Different Directory¶If the CSS file is located in a
different directory from the HTML page that uses it, we need to add the proper path inside the Example
When the stylesheet is one level down from our HTML file, update the <link rel="stylesheet" type="text/css" href="./the_styles/style.css"> The path Example
When the stylesheet is one level up
from our HTML file, use the <link rel="stylesheet" type="text/css" href="../style.css"> The path Example If we pull a stylesheet from a website (like Bootstrap), use the web address for the <link rel="stylesheet" href="https://websiteURL"> Notice
that the external link does not include the Finally, we can always use the full path to the stylesheet. Right click on the 17.7.4. Local Project¶
17.7.5. Check Your Understanding¶Question Visual Studio Code automatically saves our work.
Question Visual Studio Code works with other languages besides Python, HTML, and CSS.
Question After making a change in our HTML or CSS code, how do we see those updates in a web browser?
How do I open a local file in HTML?HTML can be used to open a folder from our local storage. In order to open a folder from our local storage, use 'HREF' attribute of HTML. In the HREF attribute, we specify the path of our folder.
Can HTML read local files?HTML 5 provides a standard way to interact with local files with the help of File API. The File API allows interaction with single, multiple as well as BLOB files. The FileReader API can be used to read a file asynchronously in collaboration with JavaScript event handling.
How do I view local files in my browser?Using Google Chrome to access local files is as easy as pressing Ctrl + O at the same time. This interface will open, allowing you to navigate to whichever file or folder is needed. There are several types of files which can be opened using Chrome. These include pdf, mp3 files, some video files and most document files.
How do you reference a local file in HTML?To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g. my-image. jpg . To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. subdirectory/my-image. jpg .
|