Webpage development project
Below are notes collected from Mmdn web docs: Getting start with the web, only for self-learning purpose.
When you are working on a website locally on your computer, you should keep all the related files in a single folder that mirrors the published website's file structure on the server. This folder can live anywhere you like, but you should put it somewhere where you can easily find it, maybe on your Desktop, in your Home folder, or at the root of your hard drive.
- Choose a place to store your website projects. Inside your chosen place, create a new folder called
web-projects(or similar). This is where all your website projects will live. - Inside this first folder, create another folder to store your first website in. Call it
test-site(or something more imaginative).
You'll notice that throughout this article, we ask you to name folders and files completely in lowercase with no spaces. This is because:
- Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at
test-site/MyImage.jpgand then in a different file you try to invoke the image astest-site/myimage.jpg, it may not work. - There are many ways in which using spaces in file names create issues:
- When you invoke commands in the terminal, you have to put quotes around file names with spaces in them, or the path will be interpreted as two separate items.
- Some programming languages (e.g. Python) do not work well with spaces in file names if these files are modules to be imported.
Next, let's look at what structure our test site should have. The most common things we'll have on any website project we create are an index HTML file and folders to contain images, style files, and script files. Let's create these now:
index.html: This file will generally contain your homepage content, that is, the text and images that people see when they first go to your site. Using your text editor, create a new file calledindex.htmland save it just inside yourtest-sitefolder.imagesfolder: This folder will contain all the images that you use on your site. Create a folder calledimages, inside yourtest-sitefolder.stylesfolder: This folder will contain the CSS code used to style your content (for example, setting text and background colors). Create a folder calledstyles, inside yourtest-sitefolder.scriptsfolder: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). Create a folder calledscripts, inside yourtest-sitefolder.
We need file path to make files contact with each other.
Below is a html code that display images we choose in the folder
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>My test page</title>
</head>
<body>
<img src="$/file/path" alt="My test image" />
<!-- used to import images -->
</body>
</html>