After Uploading Html It Is Showing Only Half of the Content

فروردین ۲۳, ۱۴۰۱ ارسال یک نظر

Dealing with files

Previous
Overview: Getting started with the web
Adjacent

A website consists of many files: text content, code, stylesheets, media content, and so on. When you're edifice a website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and become all your content looking right before yous somewhen upload them to a server. Dealing with files discusses some issues you lot should exist aware of then y'all can fix a sensible file structure for your website.

Where should your website live on your computer?

When yous are working on a website locally on your computer, yous should keep all the related files in a single folder that mirrors the published website'due south file structure on the server. This folder can live anywhere yous similar, just you should put it somewhere where you tin easily notice information technology, maybe on your Desktop, in your Habitation folder, or at the root of your hard drive.

Cull a identify to store your website projects. Inside your called place, create a new binder chosen web-projects (or similar). This is where all your website projects will live.
Inside this get-go folder, create some other folder to shop your outset website in. Call it test-site (or something more imaginative).

An aside on casing and spacing

You'll notice that throughout this article, nosotros inquire y'all to proper name folders and files completely in lowercase with no spaces. This is because:

Many computers, particularly web servers, are case-sensitive. And then for example, if yous put an epitome on your website at test-site/MyImage.jpg and and then in a different file yous try to invoke the image equally test-site/myimage.jpg, it may not work.
Browsers, spider web servers, and programming languages practise not handle spaces consistently. For example, if yous use spaces in your filename, some systems may treat the filename as two filenames. Some servers will supplant the areas in your filenames with "%20" (the graphic symbol code for spaces in URLs), resulting in all your links being broken. It'due south better to separate words with hyphens, rather than underscores: my-file.html vs. my_file.html.

The brusk respond is that y'all should utilise a hyphen for your file names. The Google search engine treats a hyphen as a word separator just does non regard an underscore that way. For these reasons, it is best to get into the habit of writing your folder and file names lowercase with no spaces and with words separated past hyphens, at least until yous know what you lot're doing. That way you'll bump into fewer problems afterward downward the route.

What structure should your website take?

Adjacent, let's await at what structure our test site should have. The virtually mutual things we'll accept on any website project we create are an index HTML file and folders to contain images, mode files, and script files. Allow's create these now:

index.html : This file will generally comprise your homepage content, that is, the text and images that people come across when they first become to your site. Using your text editor, create a new file called index.html and save it just within your test-site folder.
images binder: This binder will contain all the images that you use on your site. Create a folder called images, inside your test-site folder.
styles folder: This folder volition contain the CSS lawmaking used to mode your content (for instance, setting text and background colors). Create a folder called styles, inside your test-site folder.
scripts folder: This folder will incorporate all the JavaScript lawmaking used to add interactive functionality to your site (e.g. buttons that load data when clicked). Create a binder called scripts, inside your examination-site binder.

Annotation: On Windows computers, you might have trouble seeing the file names, because Windows has an pick called Hibernate extensions for known file types turned on by default. By and large, you can turn this off by going to Windows Explorer, selecting the Folder options... option, unchecking the Hide extensions for known file types check box, then clicking OK. For more specific data covering your version of Windows, you lot can search on the web.

File paths

To make files talk to one some other, you have to provide a file path between them — basically a route, so one file knows where another one is. To demonstrate this, we volition insert a little flake of HTML into our index.html file, and make it brandish the image you lot chose in the article "What will your website await like?" Alternatively, you tin can choose an existing prototype at your disposal, on your computer or from the Spider web, and utilise it in the following steps:

Re-create the epitome you chose earlier into your images folder.

Open up up your index.html file, and insert the following lawmaking into the file exactly as shown. Don't worry about what it all means for now — we'll look at the structures in more detail later in the series.

                                                                  <!                        DOCTYPE                        html                        >                                                                                              <html                        >                                                                                              <head                        >                                                                                              <meta                        charset                                                  =                          "utf-8"                                                >                                                                                              <championship                        >                      My test folio                                                  </title                        >                                                                                              </head                        >                                                                                              <body                        >                                                                                              <img                        src                                                  =                          "                          "                                                alt                                                  =                          "My exam image"                                                >                                                                                              </body                        >                                                                                              </html                        >

The line <img src="" alt="My test prototype"> is the HTML code that inserts an image into the page. We demand to tell the HTML where the prototype is. The image is inside the images directory, which is in the same directory equally index.html. To walk downward the file structure from index.html to our paradigm, the file path nosotros'd need is images/your-image-filename. For example, our image is called firefox-icon.png, and so the file path is images/firefox-icon.png.
Insert the file path into your HTML code betwixt the double quote marks of the src="" code.
Save your HTML file, then load it in your web browser (double-click the file). You should encounter your new webpage displaying your epitome!

A screenshot of our basic website showing just the Firefox logo - a flaming fox wrapping the world

Some general rules for file paths:

To link to a target file in the same directory as the invoking HTML file, just utilise the filename, e.g. my-image.jpg.
To reference a file in a subdirectory, write the directory proper name in front of the path, plus a forward slash, e.k. subdirectory/my-image.jpg.
To link to a target file in the directory above the invoking HTML file, write two dots. So for instance, if index.html was inside a subfolder of test-site and my-image.jpg was within examination-site, you could reference my-epitome.jpg from alphabetize.html using ../my-epitome.jpg.
You can combine these as much as you similar, for example ../subdirectory/another-subdirectory/my-image.jpg.

For now, this is about all you need to know.

Note: The Windows file system tends to utilize backslashes, not forward slashes, e.g. C:\Windows. This doesn't matter in HTML — even if you are developing your website on Windows, you should still apply frontwards slashes in your code.