Computer Science 318


Fundamentals of Web Design

Lab 01 HTML Text, Images, and Links


Goal

Learn

HTML Tags

<header> - Represents a container for introductory content or a set of navigational links.

Header tags typically contain:

<nav> - Defines a set of navigation links. It is intended only for major block of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

<a> - The anchor tags primary use is to create a link to a url, image, or file which is used to link from one page to another. The href attribute (href="") specifies the destination of the link.

<header>
    <nav>
        <a href="www.link1.com">Link 1</a>
        <a href="www.link2.com">Link 2</a>
    </nav>
</header>

<main> - Specifies the main content of a document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

<img> - Defines an image in an HTML page. Image tags require two attributes: src attribute (src="") and alt attribute (alt=""). Image elements are self-closing, note in the image below there is no closing tag.

Image element anatomy
Anatomy of a Image element

<main>
    <h2>Main Content</h2>
    <img src="images/dog.jpg" alt="Grey pitbull">
</main>

<ol>- Is a block element used to designate an ordered list. It is useful for creating lists that are either numbered or alphabetical.

<ul> - Is a block element used to designate an unordered list. It is useful for creating bulleted lists, those in which the order of the items is arbitrary.

<li> - Is used to represent an item in a list. It must be contained in a parent element: an ordered list <ol>, an unordered list <ul>.

<br>- Is used within a large block of text about one topic to break it up into paragraphs. In the example below try adding in some <br> tags to break up the lines of the paragraphs.

Attributes

Attribute Anatomy
Anatomy of an Attribute

HTML Element Anatomy breakdown of an anchor tag with attributes
Anatomy of a HTML Element with Multiple Attribute

Organization

Organization is important when coding. In this class we will be using folders to separate different kinds of file types, like CSS, Scripts, and images, etc... When separating files with folders (also called directories) you will need to use a specific file path to tell the browser where those files are located.

File Paths

Describes the location of a file in a web site's folder structure.

Lets looks at an example of how file paths work. In the screenshot below you can see the organization of the files. There is a image in an images folder and one in the same location as the html file.

Files in folders with an image inside an images folder and one outside of it.

Guides for File Paths

<img src="image.png" alt="Image 1">
<img src="images/image2.png" alt="Image 2">

Practice

Experiment

Below you can see an anchor tag that links to the UWEC website. Now navigate to a different website in your browser. Copy the URL for the website and paste it into the href. Then change the content to the name of the website you are linking to.

HTML

<a href="https://www.uwec.edu/">UWEC</a>

Preview

Experiment

Below try adding an additional list item in both the <ol> and <ul>.

HTML

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

Preview

Experiment

Try adding in some <br> tags to the paragraphs to create breaks.

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis pellentesque id nibh tortor. Congue mauris rhoncus aenean vel elit. Amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Non odio euismod lacinia at quis risus sed vulputate. In eu mi bibendum neque egestas. Hendrerit dolor magna eget est lorem ipsum dolor sit amet.</p> <p>Amet facilisis magna etiam tempor. Ullamcorper velit sed ullamcorper morbi. Blandit aliquam etiam erat velit scelerisque in dictum non. Vitae semper quis lectus nulla at volutpat. Quis eleifend quam adipiscing vitae. Faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae. Dictum non consectetur a erat nam at lectus. Diam ut venenatis tellus in metus vulputate eu scelerisque felis. Cras sed felis eget velit. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque.</p>

Preview

Open GitHub Desktop (you may need to download the program again if the computers get wiped.)

Couple of things to check in GitHub Desktop.

With your cs-318 repository selected, Click open in Visual Studio code.

Create a new folder called lab01

Create a new file called index.html in the lab01 folder

Add base HTML tags to your document

In the <title> tag replace Document with "My Favorite Things"

In the <body> add a <header> tag

In the header tag add a <h1> with "My Favorite Things" and a <h2> with "by First and Last Name"

HTML rendered in browser displaying Theresa Hanson in an H1

Create three new files with the following names

In the <header> add a <nav> tag after the <h2>.

In the <nav> add three <a> tags, and add each content and href below to an <a>

  1. Entertainment - href="entertainment.html"
  2. Websites - href="websites.html"
  3. Recipe - href="recipe.html"

In the <header> add an <a> around the <h1> with an href="index.html"

Lab 1 navigation rendered in browser Index Page rendered in the browser

Copy all of the HTML in index.html and paste it into the other three documents. Now you should be able to navigate from page to page.

Navigating from page to page on Lab 1

In each document add a <main> immediately after the </header>

Index.html

Add the following content in a <p>

"Hi, my name is First Name and this is a website dedicated to my favorite things."

Add a new folder in Lab1 called images

Add an image of yourself in the images folder. Use the file name firstname-lastname.

Add an <img> tag after the <p> to display your image. Add an alt= tag describing the image.

For Example

<img src="images/me.jpeg" alt="Theresa Hanson with Barack Obama">

Lab 1 picture of myself too big for browser

Now depending on the size of your image file, it may or may not fit on the page. So to ensure everyone's image looks great we are going to add another attribute to the image.

Inside the <img> after the alt="" add width="500"

Resized lab 1 image

Entertainment.html

In the <main> add a <h2> with the content "My Favorite Entertainment"

Now you will be creating two list with favorites, you can choose from the following categories

In the <main> add two <h3> for the two categories you chose.

Lab 1 Entertainment page headings

Under each <h3> create an unordered list <ul>

In each <ul> add five list items <li>

Add your top five favorites (books, movies, tv shows, video games) individually in <li> under each corresponding category heading.

Lab 1 Lists of favorite books and tv shows

Now find one image for one list item in each category (two images total). Save them in your images folder with sensible filenames. For example rick-and-morty.jpg

After each <ul> add an <img> with the corresponding image for that category.

Lab 1 Favorite lists with images

Websites.html

In the <main> add a <h2> with the content "My Favorite Websites"

Under the <h2> create an unordered list <ul>

In the <ul> add five list items <li>

In each <li> add an <a> with an href leading to a url to a website and the content as the name of the website.

For Example

<li><a href="https://theresahanson.com/">My Portfolio</a></li>

Lab 1 favorite websites list

Recipe.html

In the <main> add a <h2> with the content "My Favorite Recipe"

Locate a recipe or recall one from memory that you enjoy. The recipe must have 5+ ingredients and 5+ steps in the instructions.

Add a <h3> next with the name of the recipe

Add two <h4> next, one for Ingredients and one for Instructions

Lab 1 recipe page with headings

Add a <ul> under the Ingredients heading and an <ol> under the Instructions heading

Add a <li> in the <ul> for each ingredient

Lab 1 ingredients for Beef Bourguignon

Add a <li> in the <ol> for each instruction. Hint: If you need to make multiple paragraphs in one instruction use a <br> to create a line break.

Lab 1 Recipe with instructions

Now find an image of the recipe you are making. Save the image in the images folder with a sensible name like beef-bourguignon.jpeg

After the <h3> add an <img> with the recipe image.

Lab 1 recipe page with image of beef bourguignon

Lab 1 final render in browser

All pages complete

Final Steps

Validate your HTML.

Now look at GitHub Desktop. You should see all of your files listed out in the left column.

GitHub Desktop files listed

Now you are going to commit your changes.

With all of the files checked. Fill out the Summary field in the bottom left and then click Commit to main.
Committing is staging the files, so they can be pushed to the repository hosted at GitHub.

GitHub Desktop Summary field.

Now you want to push your changes to the Repository. Now if you access the repository from another computer Lab01 will be there. After you push in the top right of the nav it should say "Fetch Origin" instead of "Push Origin"

GitHub Push Origin

Your are Done with Lab01

Are you someone who needs to double check that it worked? If you want to make sure the push was successful click on the "View on GitHub" button from GitHub Desktop. It will open up your repository in the browser. From there you should be able to see all of your files.

...What if I need to make a change after pushing?

So let's say you have already pushed but noticed an error. No worries, this is easy to fix.

In visual studio code make any changes you need to. Once you are done making corrections. Save.

Go back to GitHub Desktop. You should see your changes to the documents listed there.

GitHub fixing an error.

Fill out the Summary field again. I suggest saying what you fixed. For example: "Fixed paragraph error on Sea-Jellies"

Click "Commit to main"

Click "Push Origin" and you are done.