Computer Science 318


Fundamentals of Web Design

Lab 04 Display, Classes, and Ids


Goal

Learn

Semantic vs. Non-semantic

The simple difference is semantic elements have meaning while non-semantic don't. But what does that mean?

Semantic Elements use the meaning assigned to them to tell the browser what kind of information they contain and what the element is supposed to do. Semantic elements should always be a first choice if they are appropriate to the use or content. They help with accessibility (screen reader users) and SEO, search engine optimization (how your webpage performs on google, bing, etc..).

Non-semantic Elements don't have any meaning. They don't tell anything about the content they contain.

All of the HTML elements you have learned thus far are semantic. These next two are non-semantic elements.

Div & Span

Both non-semantic html tags, meaning they are not predesignated for a certain type of content. Ideally divs and spans are used to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some CSS.

Div vs. Span

<span>- is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. Since it is an inline element it will not create a new element below but next to the previous element.

<div> - is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. Since it is a block element it will create an element underneath the previous element.

What are Inline and Block elements?!

display:block;
display:inline;
display:inline-block;

Inline and block are values that designate how an element will act and interact with other elements on a web page.

Block elements - display one after the other, starting at the top and moving down the page. Block elements appear on the screen as if they have a line break before and after them.

Inline & Inline-Block elements - display in the inline direction, that is in the direction words are displayed in a sentence, so left to right. Inline elements will be next to each other until they run out of space on the line, then they will create a new line.

The difference between inline and inline-block is inline elements ignore the margin on the top and bottom, where as inline-block elements don't ignore the margin.

Display Block vs. Inline

Classes & IDs

<h2 id="news">News</h2>
<div class="card">
    <p>Dapibus ultrices in iaculis nunc sed augue.</p>
    <p>Nisl nisi scelerisque eu ultrices vitae auctor.</p>
</div>

Class and id attributes are used to label elements on a finer scale than the element name. An ID gives an element a unique label. No other element should have that same ID. Suppose instead we want to create our own category of elements. For that, we can use the class attribute. Like all attributes IDs and classes go inside the opening tag of the element. ID and class values can then be used as selectors in CSS to add styles.

ID values are preceded by a hashtag to denote it is using an ID as a selector.

#news{
    color:red;
}

Class values are preceded by a period to denote it is using a class as a selector.

.article{
    color:red;
}

New CSS Properties Width, Height & Vertical-align

width: 100px;

Sets an element's width.

Values for Width:

height:10rem;

Sets an element's height. Most element's height will be set by the length of the content it contains. Typically there is no need for the height CSS property. It should be used with caution.

Values for height:

vertical-align:baseline;

Sets vertical alignment of an inline, inline-block elements, or table cell element.

The vertical-align property can be used in two contexts:

Values for vertical-align:

Practice

Experiment Try changing the display from inline to inline-block. Note how there is now more space above the <a>. Next try changing inline-block to block.

HTML

<a href="https://www.google.com/">Google</a> <a href="https://www.bing.com/">Bing</a> <a href="https://duckduckgo.com/">DuckDuckGo</a>

CSS

a{ margin:1rem; display:inline; }

Preview

Experiment Try adding a class attribute to the second div with a value of ad. Then create a CSS declaration with that class as a selector. Change the background color of the ad to green.

HTML

<h2 id="news">News</h2> <div class="article"> <h3>News Article 1</h3> <p>Massa vitae tortor condimentum lacinia quis vel eros. Duis at tellus at urna condimentum mattis pellentesque id nibh.</p> <p>A lacus vestibulum sed arcu non odio. Dapibus ultrices in iaculis nunc sed augue.</p> </div> <div> <h3>Advertisement</h3> </div> <div class="article"> <h3>News Article 2</h3> <p>A lacus vestibulum sed arcu non odio. Dapibus ultrices in iaculis nunc sed augue.</p> <p>Massa vitae tortor condimentum lacinia quis vel eros. Duis at tellus at urna condimentum mattis pellentesque id nibh.</p> </div>

CSS

#news{ color:blue; background-color:yellow; } .article{ background-color:pink; }

Preview

Experiment Try adding different widths to the paragraph below. Then add different height values. Notice if your height is not tall enough the content can bleed out of the element, which can cause issues with how elements interact with each other.

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS

body{ background-color:green; } p{ background-color:white; }

Preview

Experiment Try using vertical align to get the icon to align with the top of the text.

HTML

<div> <img src="https://cs318.page/images/fe-icons/practice.svg" alt="scientific beaker"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>

CSS

div{ background-color:blue; } img{ width:5rem; } p{ margin-left:1rem; width:70%; display:inline-block; background-color:green; }

Preview

From GitHub Desktop click Open in Visual Studio Code.

Repository in VSC

Create a new folder inside the cs-318 folder called Lab4.
Hint: Make sure you don't have any of the existing folders highlighted or it will create a new folder inside of that highlighted folder.

Adding new folder to VSC

Click on the Lab4 folder so it is highlighted. Then click new file. Create a new file called index.html

New file in Lab 4

Type a ! in Visual Studio Code. You should see a popup box. Hit enter. Your HTML document should be setup.

Hint: This will only work if the document is already saved as an html document.

VSC Shortcut

Change Document in the title element to "The Ocean"

Create a new document in your folder. Give it the file name styles.css

In the head of your HTML document add the following <link> element to connect the CSS and HTML together.

<link rel="stylesheet" href="styles.css">

In the <body> element add a <header> and a <main> element

In the <header> add a <h1> with the content "The Ocean"

Create three new files with the following file names

In the index.html document after the <h1> add a <nav> with three <a> elements with the following content.

Setup the href="" on each <a> to link to the coordinating html file

Add an <a> around the <h1> and setup the href="" to link to the index file.

Lab 4 Ocean header setup

Copy the entire HTML on index.html and paste into the three other documents.

Index.html

In the <main> add an <h2> with the content "Ocean"

After the <h2> add the following text in <p> elements (7 total).

The ocean is a huge body of saltwater that covers about 71 percent of Earth's surface. The planet has one global ocean, though oceanographers and the countries of the world have traditionally divided it into four distinct regions: the Pacific, Atlantic, Indian, and Arctic oceans. Beginning in the 20th century, some oceanographers labeled the seas around Antarctica the Southern Ocean, and in 2021 National Geographic officially recognized this fifth ocean.

An estimated 97 percent of the world's water is found in the ocean. Because of this, the ocean has considerable impact on weather, temperature, and the food supply of humans and other organisms. Despite its size and impact on the lives of every organism on Earth, the ocean remains a mystery. More than 80 percent of the ocean has never been mapped, explored, or even seen by humans. A far greater percentage of the surfaces of the moon and the planet Mars has been mapped and studied than of our own ocean floor.

Although there is much more to learn, oceanographers have already made some amazing discoveries. For example, we know that the ocean contains towering mountain ranges and deep canyons, known as trenches, just like those on land. The peak of the world's tallest mountains ā€¯Mount Everest in the Himalaya, measuring 8.84 kilometers (5.49 miles) high would not even break the surface of the water if it was placed in the Pacific Ocean's Mariana Trench or Philippine Trench, two of the deepest parts of the ocean.

On the other hand, the Atlantic Ocean is relatively shallow because large parts of its seafloor are made up of continental shelves parts of the continents that extend far out into the ocean. The average depth of the entire ocean is 3,720 meters (12,200 feet).

It is unknown how many different species call the ocean their home. With many marine ecosystems suffering from rising sea temperatures, pollution, and other problems, some oceanographers believe the number of species is dropping. Still, there may be many positive surprises awaiting oceanographers in the years ahead. It could be that more than 90 percent of the ocean's species are still undiscovered, with some scientists estimating that there are anywhere between a few hundred thousand and a few million more to be discovered. Currently, scientists know of around 226,000 ocean species.

Learning more about the seafloor and the rest of the ocean is the passion of National Geographic Explorer Marcello Calisti. He is a biorobotics expert who is developing an undersea exploration vehicle that uses legged locomotion, inspired by the way an octopus moves under water. His long-range goal is to design robots that can explore the depths that are difficult for humans to reach.

Since the ocean is so vast, there is plenty for future oceanographers from all corners of the globe to explore and discover.

Create a new folder inside your lab4 folder called images

Download the image below, by right clicking on the link below. Then right click on the image and save it in your images folder.

Ocean Home Page Image

Add the image with a <img>, use src="" to link to the file and alt="" to add a description of the image.

Lab 4 ocean home page

Sea-jellies.html

In the <main> add a <h2> with the content "Sea Jellies"

Add six <div> elements each with a class attribute with a value "jellies".

In each <div> you will add a <h3>, a <p> and an <img>. The content is broken out in the list below in that order

Lab 4 sea jellies content

Whales.html

In the <main> add a <h2> with the content "Whales"

Add four <div> elements each with a class attribute with the value "whales".

In each <div> you will add a <h3>, a <p> and an <img>. The content is broken out in the list below in that order

Lab 4 whale page content

Deep-sea-creatures.html

In the <main> add a <h2> with the content "Deep Sea Creatures"

Add three <div> elements each with a class attribute with a value "creatures".

In each <div> you will add a <h3>, a <p> and an <img>. The content is broken out in the list below in that order

Lab 4 deep sea creature content

CSS

body

background color rgb(6, 6, 56).
color rgb(255, 255, 255).
font family 'Courier New', Courier, monospace.
margin 0

header

background color rbg(25, 64, 100).
Notice that there is a space above the header although we have set the margin on the body to 0. This space is caused by a default margin on <h1> which you can see in the gif below while I inspect the element.
padding 2rem

Lab 4 inspecting the margin on the h1

Lab 4 body CSS

header a
This selector will give styles to an <a> inside a <header>

color rgb(66, 211, 221)

header

text align center

Lab 4 header CSS

Index.html

Add one <div> around all of the <p> elements

Add a class attribute to the <main> with a value of "home-content"

CSS

main

padding 1rem
We are adding this to the main rather than the new class because we want the padding on all of the pages not just the home page.

.home-content div

display inline-block
This will allow the paragraphs to be on the same horizontal line as the photo.
width 60%

.home-content img

width 38%
vertical-align top

Lab 4 home content page CSS

.jellies, .whales, .creatures

background color rgb (19, 107, 114).
padding 1rem.
display inline-block.
margin .5rem.
vertical align top

.jellies

width 29%

Lab 4 jellies page with too large images

Notice how some of the images are too large for the divs. By default images will render at the pixel size they are save at. I find it a best practice to always add the following CSS to ensure that images will always fit within the container or browser

img

max-width 100%

.whales

width 46%

.creatures

width 29%

Lab 4 Final CSS

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 You will have more files than shown above.

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

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.