Lab 01 HTML Text, Images, and Links
Goal
- Practice using
<header>tag,<main>tag, ordered<ol>and unordered<ul>lists, anchor tags<a>, image tag<img>, and navigation tag<nav>. - Practice using file paths
- Practice organizing files
Learn
HTML Tags
<header> - Represents a container for introductory content or a set of navigational links.
Header tags typically contain:
- one or more heading elements (
<h1>-<h6>) - logo or icon
- authorship information
- website navigation
<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.
Anatomy of a Image element
- The src attribute specifies the URL path (web address) of the image.
- The alt attribute provides an alternate text for an image, if the user for some reason cannot view it like because of slow connection, an error in the src attribute, or if the user uses a screen reader.
<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
Anatomy of an Attribute
- All HTML elements can have attributes
- Attributes provide additional information about an element
- Attributes are always specified in the start tag.
- Attributes usually come in name/value pairs.
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.
Guides for File Paths
- When you are referencing a file in the same directory as the HTML file you are working, just use the filename. For example the first image tag below.
- To reference a file in a subdirectory (the images folder in the example), write the directory name in front of the path, plus a forward slash. For example the second image tag below.
<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
Preview
Experiment
Below try adding an additional list item in both the <ol> and <ul>.
HTML
Preview
Experiment
Try adding in some <br> tags to the paragraphs to create breaks.
HTML
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.
- Check to see if it says Pull Origin in the top right tab. If it does, click Pull Origin. Why? A pull occurs if you or a collaborator made a change to the repository and pushed the changes. ALWAYS MAKE SURE TO PULL BEFORE CODING!
- If the computers were wiped you made need to reclone your repository to the computer.
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
- Doctype
- Html with
lang=enattribute - Head
- Title Tag
- Meta Tags
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
- Body
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"
Create three new files with the following names
- entertainment.html
- websites.html
- recipe.html
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>
- Entertainment -
href="entertainment.html" - Websites -
href="websites.html" - Recipe -
href="recipe.html"
In the <header> add an <a> around the <h1> with an href="index.html"
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.
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">
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"
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
- Movies
- Television Shows
- Video Games
- Books
In the <main> add two <h3> for the two categories you chose.
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.
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.
- Add a
alt=""attribute that describes the image. - Add a `width="500" to set the width on the 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>
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
Add a <ul> under the Ingredients heading and an <ol> under the Instructions heading
Add a <li> in the <ul> for each ingredient
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.
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.
- Add a
alt=""attribute that describes the image. - Add a `width="500" to set the width on the image.
All pages complete
Final Steps
Validate your HTML.
- Navigate to W3C Validator
- Select the validate by file upload tab at the top of the page
Now look at GitHub Desktop. You should see all of your files listed out in the left column.
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.
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"
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.
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.