top of page
Writer's pictureDesislava Ilieva

1.4. LT - HTML links and images

Question 1


Create the other HTML pages that you have planned for the web page. (This should include all the pages that are on your <ul>). Take note of where you are saving these files in your file structure. Using the href=”” attribute and relative file paths, create links to each of the pages from the <ul> in the index.html document. Populate each new HTML file with the same <ul> for navigation and at least a <h1> header to state the page’s title.


Home page


"Why Norwegian Salmon" page


"About Us" page


"Exporters" page


Question 2


In your index.html document, add one image to one of the page <body> sections using a relative file path. Note that you need to take special care about where you put the image in the folder structure and how you link the ‘href’. Add text for the alt attribute. This should describe the image in some way in case the image is not displayed. If you want, you can experiment by adding a width or height attribute to make the image fit inside the browser display. Add another image. Observe how the images are placed on the HTML page. Add a <br> element between the images to see how the layout changes. Add an <hr> element to insert a line break between the images. Finally, add a <p> element between the images.


Image in the code screenshot

(I used images from the official NSF website (https://norwegianseafoodcouncil.com/))


Question 3


Select the root folder containing your HTML and the ‘Images’ folder and upload it to your host using an FTP client. Once uploaded, check if the remote files work in your browser. Check your page links in the live browser to see if it works properly. Check if the images display. If not, check your links and file locations.


Here is a link to my website with the results of the project so far:



Conclusion:


Since I already worked on some coding in a previous lesson, this project is a little bit easier for me to get into, but I still learned quite a lot. Coding for me is a big mess and is really hard to understand, but this module explained everything very well and I was able to follow the project through the different lessons without a problem. I learned the basics of the HTML document, some of the main elements, and how to organize them, so it is easier to understand and work on after. I was able to create links to different pages, a navigation menu, titles, and paragraphs, and add pictures to the website.

I am looking forward to working further on this project and the final result.

Comments


bottom of page