HTML BASICS
1.1 Lesson - Hosting & File Management
Activity 1
Brief: Open the following website in your browser: https://delassus.com/en/products/citrus
Right-click anywhere on the page and choose “View Page Source” to reveal what the website really looks like before the browswer interprets and displays the page as you view it in the browser.
Activity 2
Brief: Download the provided folder onto your computer. It’s filled with website files but without a structure. Take a screenshot of the folder showing the files unorganised. Start creating folders and organise the website content in a good file structure.
Unorganised
Organised
1.2 Lesson - HTML Basics
Activity 1
Brief: In the previous lesson, you downloaded a folder containing website files. Open Adobe Dreamweaver on your computer and open the index.html file. Click on the “Code” view option.
The <header> and <main> sections of the code on your screen have no indents. Create indents to nest the elements correctly so that each child element is moved one tab to the right.
Before
After
Activity 2
Brief: Open the Chrome browser on your computer and navigate to any website of your choice. Right-click on the webpage and choose “Inspect”. See if you can identify the <head> and <body> sections of the page. See if you can identify the <header>, <main>, and <footer>.
Inspect
Head
Body
Header
Main
Footer
1.3 Lesson - Semantic HTML
Activity 1
Brief: Open the browser on your computer and type in a specified search. Work with the top three results and pay close attention to the title and the description.
Open each of the websites and inspect the site’s code. Open the <head> section and look for the title, meta description, and meta keywords and see if it matches what was displayed in the Google search results.
Top Three Results for "Lactose Free Milk Chocolate"
LACTAID Chocolate Milk
Lactose-Free Chocolate Bars
Vegan Milk Chocolate
LACTAID Chocolate Milk
The title matches with the Google search results. The description is different. No keywords are included.
Lactose-Free Chocolate Bars
The title and description both match with the Google search results. No keywords are included.
Vegan Milk Chocolate
The title and description both match with the Google search results. No keywords are included.
Activity 2
Brief: Open the website https://connormurphy.design in your browser, then inspect the code. Find the <head> section of the code and look for links to the stylesheet and favicon.
Repeat the same exercise for the website https://radicle-health.com and note how many link elements to stylesheets you can identify. In between these, find one link element that contains the stylesheet for fonts from Google.
I managed to find three link elements to CSS stylesheets and two to stylesheets for fonts from Google.
Activity 3
Brief: Go back to your browser and open any website. Using the “inspect” developer tool, see how many semantic elements you can spot inside the HTML code and where you see them displayed on the website.
<header> with <nav>
<main> with <section>
<footer> with 3x <section>
Activity 4
Brief: Open Adobe Dreamweaver on your computer. Create a new document and choose “HTML”, then give your document a simple title. Choose “Split” from the view options.
In the <body> section, start an opening <p> tag. Dreamweaver will automatically add a closing </p> tag. Type any short sentence between the opening and closing <p> tags. Note how it renders in the result window. Now, change the <p> and </p> tags to <h1> and </h1> and note the change in how it displays.
Repeat this exercise with <h2>, <h3>, <h4>, and <h5> tags and note how it renders to understand the semantic meaning of each of these elements.
Paragraph
Header 1
Header 2
Header 3
Header 4
Header 5
Activity 5
Brief: Go back to dreamweaver. Type an opening <ol> and closing </ol> tag. List five words without any numbering or bullets between the <ol> tags. Check how it renders in the result window. It will display as five words on one line. Now, using the enter key, place each word on a different line.
You can see that the words are still displayed on a single line. For text to display on a new line, you need to nest it inside a pair of block-level tags.
Let’s fix our list by telling the browser that each of the words in the list are list items. Nest each of the words inside an opening <li> and closing </li> tag.
Now, change the <ol> and </ol> tags to <ul> and </ul> and note the change in display.
1.4 Lesson - HTML Links & Images
Activity 1
Brief: Let’s practice creating a simple navigation that links between two HTML pages. Create a folder on your local computer and name it. Open Adobe Dreamweaver and create two new HTML documents. Name the first “Home” and save it as “index.html”, and the second “About” and save it as “about.html”.
Create a simple unordered list containing two list items – one for each of the two pages you created.
Transform the list items into link items by nesting the <a> element inside the <li> opening and closing tags. The links are created, but do not yet link to anything. Create a link using the “href” attribute inside the opening <a> tag. Use a relative file path to link the two pages you have created.
Unordered List
Link Element
Add a simple header element inside the <body> of the “index-html” file that says “Home”.
Copy everything you have done into the Source Code window of the “about.html” file and change the <h1> heading to “About”.
Home Heading
About Heading
Test if your navigation works by opening the “index.html” file in your browser. Click on the “About” link window to see if the link works. From the “About” page, click on “Home” to test if it takes you back to the homepage.
Browser Home
Browser About
Activity 2
Brief: Go back to Adobe Dreamweaver and re-open the “index.html” file from the folder you downloaded earlier. Locate the <nav> element inside the <header> element. You will notice a <ul> item with three <li> items: Home, About, and Contact. You will see an added link item <a> nested inside each <li> and an “href” attribute inside the opening tag of the link item. The links do not work because a placeholder “#” was placed inside the “href” attribute of each of the navigation links.
Add relative paths to the “href” attribute of each link element so that the navigation works. Open the “index.html” file in your browser to test that it works.
"href" Attribute
Browser Home
Browser About
Browser Contact
Activity 3
Brief: Re-open the “index.html” file and look for the image inside the <header> section of the HTML code. This link is broken. Fix it with the knowledge you have gained. Repeat the exercise for the “about.html” and “contact.html” files.
