Lab 04 Display, Classes, and Ids
Goal
- Learn the difference between semantic and non-semantic HTML elements
- Add non-semantic HTML containers
- Learn about display block vs. inline
- Learn some new CSS selectors and HTML attributes; classes & ids
- Learn three new CSS properties
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.
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:
- Percentages, are relative to the parent element's width. So if a div element is inside a main element, and the main element's width is 100 pixels and you set the div's width to 50%. It will be 50 pixels.
- Pixels.
- Ems, these are dynamic and like percentages are based on the relative font-size of the parent of the element. Browsers default to 16px equals 1em on the body tag
- Rems, are similar to ems and percentage in that their size is relative, but rems are only relative to the html root tag not the direct parent of a tag. Rems too default to 16px equal 1rem on the html tag.
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:
- Percentages, are relative to the parent element's height. So if a div element is inside a main element, and the main element's height is 100 pixels and you set the div's height to 50%. It will be 50 pixels.
- Pixels.
- Ems, these are dynamic and like percentages are based on the relative font-size of the parent of the element. Browsers default to 16px equals 1em on the body tag
- Rems, are similar to ems and percentage in that their size is relative, but rems are only relative to the html root tag not the direct parent of a tag. Rems too default to 16px equal 1rem on the html tag.
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:
- To vertically align an inline element's box inside its containing line box. For example, it could be used to vertically position an image in a line of text.
- To vertically align the content of a cell in a table.
Values for vertical-align:
- baseline - Aligns the baseline of the element with the baseline of its parent.
- text-top - Aligns the top of the element with the top of the parent element's font.
- text-bottom - Aligns the bottom of the element with the bottom of the parent element's font.
- middle - Aligns the middle of the element with the baseline plus half the x-height of the parent.
- top - Aligns the top of the element and its descendants with the top of the entire line.
- bottom - Aligns the bottom of the element and its descendants with the bottom of the entire line.
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
CSS
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
CSS
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
CSS
Preview
Experiment Try using vertical align to get the icon to align with the top of the text.
HTML
CSS
Preview
From GitHub Desktop click Open in Visual Studio Code.
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.
Click on the Lab4 folder so it is highlighted. Then click new file. Create a new file called index.html
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.
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
- sea-jellies.html
- whales.html
- deep-sea-creatures.html
In the index.html document after the <h1> add a <nav> with three <a> elements with the following content.
- Sea Jellies
- Whales
- Deep Sea Creatures
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.
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.
Add the image with a <img>, use src="" to link to the file and alt="" to add a description of the image.
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
- Div 1
- Mertensia ovum
- Also known as the Arctic comb jelly or sea nut, is a cydippid comb jelly or ctenophore first described as Beroe ovum by Johan Christian Fabricius in 1780. Unusually among ctenophores, which normally prefer warmer waters, it is found in the Arctic and adjacent polar seas, mostly in surface waters down to 50 metres (160 ft).In addition to being weakly bioluminescent in blues and greens, comb jellies produce a rainbow effect similar to that seen on an oil slick, and which is caused by interference of incident light on the eight rows of moving cilia or comb rows which propel the organism. The comb rows beat sequentially, rather like the action of a Mexican wave. The comb rows also function as chemical sense organs, serving the same role as insect antennae. Mertensia ovum is the major source of bioluminescence from Arctic gelatinous zooplankton.
- Mertensia
- Div 2
- Cnidaria
- Is a phylum under kingdom Animalia containing over 11,000 species[6] of aquatic animals found both in freshwater and marine environments, predominantly the latter. Cnidarians mostly have two basic body forms: swimming medusae and sessile polyps, both of which are radially symmetrical with mouths surrounded by tentacles that bear cnidocytes. Both forms have a single orifice and body cavity that are used for digestion and respiration. Many cnidarian species produce colonies that are single organisms composed of medusa-like or polyp-like zooids, or both (hence they are trimorphic). Cnidarians' activities are coordinated by a decentralized nerve net and simple receptors. Several free-swimming species of Cubozoa and Scyphozoa possess balance-sensing statocysts, and some have simple eyes. Not all cnidarians reproduce sexually, with many species having complex life cycles of asexual polyp stages and sexual medusae. Some, however, omit either the polyp or the medusa stage, and the parasitic classes evolved to have neither form.
- Cnidaria
- Div 3
- Siphonophorae
- Is an order of Hydrozoans, a class of marine organisms belonging to the phylum Cnidaria. According to the World Register of Marine Species, the order contains 175 species. Although a siphonophore may appear to be an individual organism, each specimen is in fact a colonial organism composed of medusoid and polypoid zooids that are morphologically and functionally specialized. Zooids are multicellular units that develop from a single fertilized egg and combine to create functional colonies able to reproduce, digest, float, maintain body positioning, and use jet propulsion to move. Most colonies are long, thin, transparent floaters living in the pelagic zone.
- Siphonophorae
- Div 4
- Narcomedusae
- Is an order of hydrozoans in the subclass Trachylinae. Members of this order do not normally have a polyp stage. The medusa has a dome-shaped bell with thin sides. The tentacles are attached above the lobed margin of the bell with usually a gastric pouch above each. There are no bulbs on the tentacles and no radial Ianals. Narcomedusans are mostly inhabitants of the open sea and deep waters. They can be found in the Mediterranean in large numbers.
- Narcomedusae
- Div 5
- Limnomedusae
- Limnomedusae are not monophylic. The family Armorhydridae, which contains a single genus and a single species, Armorhydra janowiczi, is found living in coarse sediment, has hollow tentacles and has no radial canals. It seems to share few morphological features with the other families and probably belongs elsewhere. The inclusion of Microhydrulidae is also dubious. The medusa stage is not known and the tiny polyp has no tentacles nor mouth.
- Limnomedusae
- Div 6
- Discomedusae
- Is a subclass of jellyfish in the class Scyphozoa. It is the sister taxon of Coronamedusae. Discomedusae contains about 155 named species and there are likely to be many more as yet undescribed. Jellyfish in this subclass are much more likely to have swarming events or form blooms than those in Coronamedusae. Discomedusae consists of two orders, Rhizostomae and Semaeostomeae
- Discomedusae
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
- Div 1
- Humpback Whale
- Baleen whales (systematic name Mysticeti), also known as whalebone whales, are a parvorder of carnivorous marine mammals of the infraorder Cetacea (whales, dolphins and porpoises) which use keratinaceous baleen plates (or "whalebone") in their mouths to sieve planktonic creatures from the water. Mysticeti comprises the families Balaenidae (right and bowhead whales), Balaenopteridae (rorquals and the gray whale), and Cetotheriidae (the pygmy right whale). There are currently 16 species of baleen whales. While cetaceans were historically thought to have descended from mesonychids, molecular evidence instead supports them as a clade of even-toed ungulates (Artiodactyla). Baleen whales split from toothed whales (Odontoceti) around 34 million years ago.
- Humpback Whale
- Div 2
- Narwhal
- The narwhal, also known as a narwhale (Monodon monoceros), is a medium-sized toothed whale that possesses a large "tusk" from a protruding canine tooth. It lives year-round in the Arctic waters around Greenland, Canada, and Russia. It is one of two living species of whale in the family Monodontidae, along with the beluga whale. The narwhal males are distinguished by a long, straight, helical tusk, which is an elongated upper left canine. The narwhal was one of many species described by Carl Linnaeus in his publication Systema Naturae in 1758.
- Narwhal
- Div 3
- Beaked Whale
- The Cuvier's beaked whale or goose-beaked whale (Ziphius cavirostris) is the most widely distributed of all beaked whales in the family Ziphiidae. It is smaller than most baleen whales yet large among beaked whales. Cuvier's beaked whale is pelagic, inhabiting waters deeper than 1,000 feet (300 m). It has the deepest and longest recorded dives among whales at 9,816 feet (2,992 m) and 222 minutes respectively, though the frequency and reasons for these extraordinary dives are unclear. Despite its deep water habitat, it is one of the most frequently spotted beached whales.
- Beaked Whale
- Div 4
- Blue Whale
- The blue whale (Balaenoptera musculus) is a marine mammal belonging to the baleen whale parvorder Mysticeti. Reaching a maximum confirmed length of 29.9 metres (98 ft) and weighing up to 199 tonnes (196 long tons; 219 short tons), it is the largest animal known to have ever existed. The blue whale's long and slender body can be various shades of greyish-blue dorsally and somewhat lighter underneath.
- Blue Whale
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
- Div 1
- Anglerfish
- The anglerfish are fish of the teleost order Lophiiformes. They are bony fish named for their characteristic mode of predation, in which a modified luminescent fin ray (the esca or illicium) acts as a lure for other fish. The luminescence comes from symbiotic bacteria, which are thought to be acquired from seawater, that dwell in and around the esca. Some anglerfish are notable for extreme sexual dimorphism and sexual symbiosis of the small male with the much larger female, seen in the suborder Ceratiidae, the deep sea anglerfish. In these species, males may be several orders of magnitude smaller than females.
- Anglerfish
- Div 2
- Blobfish
- Psychrolutes marcidus, the smooth-head blobfish,[1] also known simply as blobfish, is a deep-sea fish of the family Psychrolutidae. It inhabits the deep waters off the coasts of mainland Australia and Tasmania, as well as the waters of New Zealand. Blobfish are typically shorter than 30 cm (12 in). They live at depths between 600 and 1,200 m (2,000 and 3,900 ft), where the pressure is 60 to 120 times greater than that at sea level, which would likely make gas bladders inefficient for maintaining buoyancy. Instead, the flesh of the blobfish is primarily a gelatinous mass with a density slightly less than that of water; this allows the fish to float above the sea floor without expending energy on swimming. The blobfish has a relative lack of muscle, but this is not a disadvantage, as its main food source is edible matter that floats in front of it, such as deep-ocean crustaceans.
- Blobfish
- Div 3
- Pelican Eel
- The pelican eel (Eurypharynx pelecanoides) is a deep-sea eel rarely seen by humans, though it is occasionally caught in fishing nets. It is the only known member of the genus Eurypharynx and the family Eurypharyngidae. It belongs to the "saccopharyngiforms", members of which were historically placed in their own order, but are now considered true eels in the order Anguilliformes. The pelican eel has been described by many synonyms, yet nobody has been able to demonstrate that more than one species of pelican eel exists. It is also referred to as the gulper eel (which can also refer to members of the related genus Saccopharynx), pelican gulper, and umbrella-mouth gulper. The specific epithet pelecanoides refers to the pelican, as the fish's large mouth is reminiscent of that of the pelican.
- Pelican Eel
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
header a
This selector will give styles to an <a> inside a <header>
color rgb(66, 211, 221)
header
text align center
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
.jellies, .whales, .creatures
background color rgb (19, 107, 114).
padding 1rem.
display inline-block.
margin .5rem.
vertical align top
.jellies
width 29%
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%
Final Steps
Validate your HTML.
- Navigate to W3C Validator
- Select the validate by file upload tab at the top of the page
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.
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.
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"
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.
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.