LT 1.4 HTML links and images

LT 1.4 HTML links and images

The task

For this lesson task, you will continue to work on the web project to promote Norwegian salmon. You can use the same HTML document you’ve been working on in the previous two lesson tasks as a starting point. 

Part 1

Create the other HTML pages that you have planned for the webpage. (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 of the new HTML files with the same <ul> for navigation and at least a <h1> header to state the title of the page.

Part 2

In your index.html document, add one image to one of the sections in the page using a relative file path. Note that you need to take special care of 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 if it’s not displayed.

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. 

Part 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. 


Part 1

Part 2

Part 3

LT 1.3 Semantic HTML

LT 1.3 Semantic HTML

The task

For this lesson task, you’ll be working on the same HTML document you created in the previous lesson task, «Creating an HTML structure».

Part 1

The following elements should now be added to the HTML document:

  • <meta> element with some metadata – charset, description, keywords, author, viewport – note: must sit within the <head> element.
  • Create a <ul> (unordered list) with <li> elements that will later form the navigation menu. (You are not required to style or link anything at this point, just list the menu items that will represent the links to the different pages of the website later). Think carefully about where you should place this list.
  • Create at least two sections in the content using either <section><article> or <aside> elements that will hold the main content.
  • Create at least one <h1> element, and one <h2> element. Note how the <h1> and <h2> elements render as different sizes, and as bold text.
  • Create at least four <p> elements.
LT 1.2 HTML basics

LT 1.2 HTML basics

The task

For this lesson task, you need to create a basic HTML structure.

Part 1

  • In Adobe Dreamweaver, open up the index.html file you created in the previous lesson task. If you do not have one, then create a new document now.
  • Make sure the HTML file is saved as index.html in the folder structure you created for the lesson task on planning the structure. Note that the tile of the page can be different from the file’s name. You always need to name at least one file index.html, as a browser will look for such a file to load first. It does not have to be your home page, but this is standard practice.
  • Now, start adding some tags. It is perfectly fine if you don’t add any information between the opening and closing tags for now, just focus on the different tags that will make up the structure of the webpage. Your HTML file should have the following content:
    • <!DOCTYPE html> – this should be the first line in the document.
    • <html>, <head> and <body> elements.
    • Page title – note: the <title> element must sit within the <head> element.
    • <header>, <main> and <footer> elements, these must sit within the <body> element.

Almost all of the elements you will use have opening and closing tags. Typical «newbie» mistakes include forgetting to close your tags. Check your work!

Take a screenshot of the HTML coded document to post to your blog.

Part 2

You have created an HTML document with the following content:

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <body>
  • <title>
  • <header>
  • <main>
  • <footer>

In one or two sentences, describe the function and meaning of each element and, where applicable, state in which parent folder you are expected to find the element.


Part 1

Part 2

<!DOCTYPE html> – States what kind of document is is, for example this is a html document.

<html> – Defines the root of a HTML document. Often the main parent in the document.

<head> – This tag contains metadata (information) for the document. Used as a instruction for browsers on how to display the content. This will not be visible on the webpage.

<body> – Everything that is visible on the webpage is going into the body section. The body is the child of the html parent.

<title> – Defines the title of the document.

<header> – This section usually contains the logo, navigation etc.

<main> – Specifies the main content of a document inside the «body». This is the child of the body parent.

<footer> – This is where all the footer information inside the document/ section is placed, such as copyright, policies etc. This will be the child of the body parent.

LT 1.1 HTML basics – Hosting and file management

LT 1.1 HTML basics – Hosting and file management

The task

The Norwegian Seafood Council wants to promote the health benefits of Norwegian salmon to the local and international market. You need to create an informative website for this purpose. (This is a fictitious client and project).

Part 1

You need to come up with a list of at least five domain names the client could purchase. Use a domain registration directory like GoDaddy to see what domain names are available. Design a one-page document you would present to your client with the domain name suggestions. 

With the list of possible domain names, you also need to provide the client with costs and a motivation for each option. The motivation can include how descriptive, short or unique it is. Post this document as a pdf or jpeg on your blog.

Part 2

Create very basic wireframes for the website, showing at least three pages. These can be low tech wireframes that show planning for the page structure and navigation.

Part 3

Create the structure for the HTML files and folders of the web page. Think about the root folder and name the folders correctly. Firstly, sketch out what the structure will look like. Then, set these up, so you are ready to code your website.

Open Adobe Dreamweaver. Click on the ‘Create New’ button, and under ‘Document type’, choose HTML. Keep the ‘Framework’ as none since we will not use a Bootstrap framework. You can give the file a name, call it ‘home’ and the ‘Doc Type’ should be HTML5.

This will open a blank document in Dreamweaver. You will see a tab called ‘Untitled-1’ in the top left bar. This is because the file is not yet saved. Hit ‘save’ and save the file as Index.html in the correct folder of the folder structure you created. One HTML document called ‘index.html’ is enough for this LT.

Remember, this structure should be set up so that it can be uploaded to a hosting server without disrupting the file paths. When you are done, take a screenshot of the folder and, together with the sketch of your structure, upload it to your WordPress blog.


Part 1

Part 2

Part 3

LT 2.1 Illustration, infographic and brochure

LT 2.1 Illustration, infographic and brochure

Practical assignment (observation and analysis)

Use the logo you created in Week 1 and design a brochure for your product. You may use any format you like, just make sure that the format is in line with and adds to your logo design. Your brochure must contain an illustration. This could be the infographic alone, or it could be the infographic and the rest of the brochure (in other words, the entire brochure may be illustrated if you’d like).

When designing the brochure and creating your illustration, make definite use of the fundamentals of visual language as discussed in this lesson. 

You must illustrate an infographic and design a brochure:

1. Illustration of infographic

The brochure design and infographic illustration should work together. Consider the format and style of your brochure and illustrate an infographic using fictitious data (or you could do research to get a better idea of actual statistics). The infographic must display the nutritious benefit of your product to dogs. It should contain the nutritional value, as compared to the necessary nutrition intake of dogs. It must also give an indication of consumption per size of dog. You may also add information of your choice that you think is relevant.

2. Design of brochure

Design a brochure that introduces your product and includes the infographic illustrated in Question 1. You can decide on the information and format of your brochure. As a guideline, consider a brochure of A4 (lying), folding to A5 (standing). You don’t have to have more than four pages in your brochure (but it depends on your design and style). You must base your brochure design on the design of your logo. Thus, look at your logo and design a brochure that complements and blends in with it.


Infographic:

Brochure:

LT 1.1 Create a logo

LT 1.1 Create a logo

Develop a name for a dog food product. Design a logo for this product, using full colour. The logo must contain a main visual and typography. (Use the “People Saving Pets” logo as a guide – this does not mean your design should be the same, it is simply an example.) Follow each of the fundamental steps outlined above, in that sequence and take note of what needs to be handed in as you progress through these steps:

  • Exploration – Use sketching techniques to draw thumbnails and hand in your thumbnails as scanned PDFs.
  • Focus – Highlight three of the thumbnail ideas that you consider the best options and state why. Hand in an A4 with visuals of the three chosen thumbnails; include reasons for choosing each of these three options.
  • Construction – Use sketching techniques and redraw ONE of your chosen concepts until you’ve reached a conclusion on a successful logo. Hand in your drawings as scanned PDFs.
  • Testing – Experiment more with your favourite options from Step 3 and ask the opinion of a few people. Hand in examples of the logos shown to people and write their feedback or opinion on each.
  • Refinement – Choose your final design and execute it in Adobe Illustrator, along with the name of the product. Hand in your final logo as an A4 PDF.

I started to sketch thinking I wanted to call my dog food brand «Good Dog», than I changed it to «Fido» before I ended up with «Fido & Max». I made a lot of very different sketches before choosing the three I liked the best.

The three sketches I liked the most and wanted to further develop was the two «Fido and Max» logos with the french bulldog illustration, and the «Good dog» logo with the dogs face to the left on the upper right picture. I asked my boyfriend and a colleague which of the three ideas they enjoyed the most and with their help I chose to digitalise the «Fido and Max» version with the bulldog illustration above the name. I also made some digital sketches before moving to the actual logo.

After playing around in illustrator I chose a font called «chinchilla» as I loved the playfulness of it, and felt like it really matched the illustration. This is how the finished logo turned out:

LT 9.2 Create a campaign

LT 9.2 Create a campaign

Billabong has decided to create a campaign especially for a new item of clothing, a snow jacket like this one.

Potential customers who see the product on Instagram, can click through to the landing page to learn more about it. Your task is to design a high-fidelity long-form landing page for this product (using Figma or Adobe XD). Check out the Mac Pro landing page for inspiration. Upload a link to your prototype, as well as screenshots of the final page.


I made the campaign landing page in Adobe XD, but unfortunately I managed to make it in the same file as my CA07 prototype so I can’t post a link, but will post screenshots. The last photo is the buttons in hover state.

LT 9.1 Create a social media visual story

LT 9.1 Create a social media visual story

You’ve been asked to design a campaign to advertise a specific product: keto bars.

The purpose of the campaign is to get Instagram followers to click on the link on the Instagram account, view a specially designed product page and purchase the product. You’ve been tasked with designing 3 graphics for Instagram posts. Use your creativity and the images on the website to get started.


LT 8.4 Getting technical

LT 8.4 Getting technical

This lesson task has two questions about the course assignment you are currently working on. Include the answers to this lesson task in your report for the course assignment as part of your research.

  • Consider how API integration can boost the efficiency of the website you are creating for your course assignment. List at least three ways that you can incorporate API integration and explain why you’ve chosen them. Also expand on how you went about integrating them, for example did you use a plugin, widget, or outside source?
  • When your website is published, inspect the load time of your site. You can do this by using a developer tool like Google PageSpeed Insights or Web Page Test. Write down how long it takes to load the full page initially. Are there any elements that you can identify that is slowing down the load time of the page? If so, try to optimize at least one file. Redo the load time and write about the success you have achieved in improving the load time.

Post your answers and changes to your website to your WordPress blog and share screenshots where possible to better illustrate what you have learned


Will answer this LT when the website is published.

LT 8.3 Page inspections

LT 8.3 Page inspections

Which are your favourite eCommerce sites that you use regularly? Pick one to focus on for this Lesson Task.

Think about the functional design and discuss why each of the following pages are effective:

  • Homepage
  • Category page
  • Product page
  • Cart
  • Checkout

Post your conclusion about the effectiveness of each of the five pages to your WordPress blog and share screenshots to support your writing.


I chose https://shop.mango.com/no

Homepage:

The homepage has a good header where you can choose between gender and age categories, as well as a search bar, favourites, cart and a customer page you can log into. It has big pictures with links that’s displays the latest trends etc.

Category page:

A dropdown menu becomes visible when you hover over one of the gender/age categories. From there you chose your main catagorie e.g. clothing and then you can chose sub-catagorie like jeans or t-shirts.

Product page:

The product page has big good quality images that displayes there products well. You can choose between showing 2 or 4 products in the frame. You can hover over the products for more images and add it to your cart instantly, instead of having to go to a new page. You can also add the products to your favourites by pressing the heart.

Cart:

The cart displayed all your chosen products and the price for everything combined. From here you can easily press «Til kasse/Checkout».

Checkout:

To get to the checkout you first have to make a user. This is good for keeping track of all you latest orders and following the shipping etc. The checkout page is where you put in all your information, chose what kind of delivery you want etc. This site offers a lot of different payment methods which is a good thing.