Computer Science 318

Fundamentals of Web Design

Lab 05 The Onion

Goal

Learn

New HTML

<section>
    <h2>Famous Wizards</h2>
    <p>Gandalf, Dumbledore, Rincewind...</p>
</section>

<section> - represents a standalone section which doesn't have a more specific semantic element to represent it contained within an HTML document. Typically, but not always, sections have a heading.

<article>
    <h2>How to be a wizard</h2>
    <ol>
        <li>Grow a long, majestic beard.</li>
        <li>Wear a tall, pointed hat.</li>
        <li>Have I mentioned the beard?</li>
    </ol>
    <footer>
        <p>© 2018 Gandalf</p>
    </footer>
</article>

<article> - represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributed or reused. Examples would be a forum post, magazine or newspaper article, or a blog entry.

<footer> - element represents a footer for a section of content. Typically <footer> are used in a <section>, <article>, <main>, or <body>. A footer typically contains information about the author of the section, copyright data or links to related documents.

<a href="importantdocument.pdf">Important Document</a>
<a href="mailto:hansontm@uwec.edu">Email Me</a>
<a href="tel:123456789">Call Me</a>
<a href="#one">Go Section 1</a>

<section id=one>
    <p>...</p>
</section>

<a> - Thus far we have only used the <a> anchor tag to create a link to a website, but there are other possibilities. Using the href attribute you can link to a file (like a pdf), telephone number, email address, and locations within the same page.

file - When linking to a file use the url or file path in the href.
email - When linking to a email address use mailto: followed by the email address in the href.
phone - When linking to a phone number use tel: followed by the phone number without spaces or dashes in the href.
id - When creating a jump link to an id use # followed by the ID attributes value.

CSS

div{
    border-width:.125rem;
    border-style:dashed;
    border-color:red;
}
div{
    border:.125rem dashed red;
}

border-width - sets the width of an element's border.
border-style - sets the line style for all four sides of an element's border.
border-color - sets the color of an element's border.
border - shorthand for all border settings. Values must be in this order: width | style | color

Values for border-style:

CSS Pseudo-class

a{
    color:blue;
}
a:hover{
    color:red;
}

Is a keyword added to a selector that specifies a special state of the selected element(s). For example above the <a> font color is blue, but when the user hovers over it, it will turn red.

HTML Comment Tag

<!--This is a comment. Comments are not displayed in the browser-->

The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.

You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code.

Practice

Experiment Try adding a dashed yellow border to the a. Then add a new declaration for the hover state on the a. For hover change the background color to yellow, font color to blue, and the border to blue.

HTML

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

CSS

a{ background-color:blue; color:yellow; padding:2rem; display:inline-block; }

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 lab5

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

Setup your HTML file

Create your stylesheet

Link your stylesheet to the HTML

Create an images folder.

Add the following svg to the images folder

the-onion-logo.svg
Note this image is white. When you open it in the browser right click on the white space and select save image. I promise the image is there.

Change Document in the title element to "The Onion"

In the <body> element create a <header>, <main>, and <footer> in that order

Add three <section> to the <main>

Add the following content into the <header> "The Onion News Sports Entertainment"

Add the following bullet points of content into the <section>

Add the following content into the <footer> "Email Us Call Us PDF of Articles"

Lab 5 content setup

In each <section> add a <h2> around the first word; News, Sports, Entertainment

In the <header> add a <h1> around "The Onion"

In between The and Onion in the <h1> add a <br>

Add three <a> in the <header>. One around News, Sports, and Entertainment

Add one <nav> around all three of the <a>.
We will be setting up the href as a jump link later using an id attribute

Lab 5 header html

Inside the <section> divide up the news articles into individual <article> elements.
Tip: each article ends with a date. Also you can use the pdf to see the content of each article to help you break them down.

Add a <h3> to the each <article> element to the article's title (7 total titles).

Lab 5 articles and titles setup

Add a <footer> to each <article> around the content at the end; "The Onion" and "Month, Date Year"

Add a <p> around the content inside the <footer>. In the <article> only, not the very last <footer> on the page.

Add a <span> inside of the <p> you just added, around just "The Onion".
Hint:We are putting a span around "The Onion" because we will add some specific styling to just that content but still want it to be inline with the date. See the example below. 

<p><span>The Onion</span> September 27, 2018</p>

Add <p> around the individual paragraphs in the articles (27 paragraphs total).
Hint: Two of the articles have no paragraphs. If you are having a hard time figuring out where each paragraph begins and ends look at the pdf.

the-onion-articles.pdf

Add all the following images into your images folder.

Add an <img> into each <article> after the <h3>

Lab 5 paragraphs and images

Add the logo as a <img> element before the <h1> in the <header>.
Hint: If you refresh your page and your content has disappeared don't panic, scroll down a bit. The content is there, but the logo image is just huge and white.

Add an ID attribute to each <h2> with the following values

In the href="" for the <a> in the <header> add the corresponding values

Lab 5 header html with logo

Add an <a> around the following content and href in the <footer> at the bottom of the <body>

Content

HRef

Add this file to your lab5 folder:

the-onion-articles.pdf

CSS

body

font family - Times New Roman, Times, Serif

margin 0

header

background color #275218

color #fff

header>img
This selector will only select direct descendent images of the header

max-width 6rem

margin 1rem

header>h1

display inline-block

margin 1rem 0

Use vertical-align to align the top of the words with the top of the logo, like in the image below.

Lab 5 header css

header>nav>a

background-color #fff

color #275218

text-decoration none

padding 1rem

header>nav

Use padding to add 1rem to the bottom and left, and 0 to the top and right of the navigation.

Hint: If you use four values for padding they are in this order: top | right | bottom | left

Lab 5 navigation links overlapping main

Now the links should look like the image above, however they are overlapping on to the main area. Use the display property on the header>nav>a to fix this. Use one of the three following values to achieve the desired results in the image below:

Lab 5 navigation links fixed

header>nav>a:hover

background-color #275218

color #fff

border 1px solid #fff

Lab 5 navigation links hover error

Now when you hover you will have green buttons with white border, however the buttons jump around when you hover over them. Why is this? This is happening because when an element's width is calculated by the browser does the following:

content+padding+border=element's width

So let's say our content for the first button is 40px and our padding on the nav a is 1rem on both the left and right which would convert to 32px, the math would be the following:

40px + 32px + 0px = 72px - non-hover

40px + 32px + 2px = 74px - hover

To fix this inequality we are going to add a transparent border to the nav>a at 1px on each side.

header>nav>a

border 1px solid transparent

Lab 5 navigation hover effect fixed

main

background-color #ebebeb

padding 1rem

max-width 60rem

margin 1rem auto

Hint: When adding a width or max-width to an element, you can also take advantage of auto on margin to center the element. The browser in this instance will calculate the following:

browser's width - element's width / 2 = margin on left and right

h2

background-color #275218

color #fff

padding 1rem

margin 0 0 1rem

article

background-color #fff

padding 1rem

margin 1rem 0

Lab 5 main and article styles

Now if you scroll through the web page it looks pretty good, however the images are all different sizes. This is because by default they will display at their actual resolution. So let's fix this.

article>img

max-width 100%

width 30rem

Now they are all the same size, but it would look nice if the text wrapped around the images. So we are going to use the property float on the images to get the text to wrap.

article>img

float left

margin 0 1rem 1rem 0
This will create space on the right and bottom of the image.

Lab 5 image setup

However, if you scroll down to the sports and entertainment sections, they look terrible. This is happening because there isn't very much text in two of the articles so the float is causing issues. We will add a class to two of the images to fix this.

Lab 5 article image issues

In the html document add class="image-only" to the baseball image and the mahersaali image.

article>.image-only

float none

margin 0

width 100%

Lab 5 images fixed

article>footer
This will only style the footers in the articles. We don't want these styles applied to the footer after the main.

font-style italic

font-weight 900

article>footer span

color #275218

font-size 1.25rem

Lab 5 article footer styles

body>footer

background color #275218

color #fff

padding 1rem

text-align center

body>footer>a

color #fff

margin 1rem

Lab 5 body footer

Lab 5 Final

Final Steps

Validate your HTML.

Lint your CSS at Jigsaw.w3.org

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 Lab5 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 Lab5

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.