AW 01 – HTML Basics

1.1. Hosting and file management

Part 1

Since you will create your own website using HTML and CSS in this course, you will need to acquire your own hosting service. This part of the lesson task is mandatory.

You are free to choose any hosting service, but we recommend one.com. The monthly fee is low, and the beginner plan is sufficient.

Consider your domain name very carefully. This cannot be altered. You will be able to use this domain for future website projects. (You can, of course, sign up for other domain names and delete the one you have, but “getting it right the first time” saves you a great deal of trouble.)

NOTE : will not be required to actually buy a domain; this is just to show how you would advise a client when purchasing a domain.

In this 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). So, I have advise some available domain names with information on price and how good they are to the client. These are my domain name suggestion.

lt-1.1-part-1Download

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.

lt-1.1-part-2Download

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.

lt-1.1-part-3Download

1.2. HTML basics

Part 1

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

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

lt-1.2-part-2Download

1.3. Semantic HTML

Part 1

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

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.

REMINDER : all of the elements you will use have opening and closing tags (for example, a paragraph element <p> – opening tag </p> closing tag). Check your work to make sure all tags are complete.

NOTE : White space (other than a single space) will not be added between elements you may add as many carriage returns between elements, but the HTML rendering will ignore these.

Check your page in a web browser to make sure it works properly. Don’t be discouraged if the results are not overly impressive or if the page does not work as you expected. We will be quickly moving along to more complex and visually rich pages.

Post screenshots of the code and browser result to your WordPress blog.

1.4. HTML links and images

Part 1

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. 

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.

NOTE : You can copy the <head> section and <header> section of the index.html file to all of the other pages you have created. Just remember to change the <title> tags of each document to be representative 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.

NOTE : After you have tested the webpage in a browser from the host you can delete the folder from the FTP or replace the entire folder with an updated version of your website files later.

Post screenshots of the code and browser result to your WordPress blog and write about what you have learned. 

Home page:

About page:

Contact page:

How the website looks in browser:

Home page:

About page:

Contact page:

I have learned how to code, learned what each tags mean and how to use them. I also learn to uploaded the root folder containing my HTML and the images folder to my host using an FTP client.