Commit 644169a7 authored by Evan Raskob's avatar Evan Raskob

finishing assignment

parent d1908876
**Assignment: Finding Meaning in the HTML**
==============================================================
**Assignment: Making Meaning in the HTML**
===================================================
Web pages are made up of "blocks" of content called _Elements_. It's worth looking at [Mozilla Developer Network AKA MDN's guide to all Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) to get a feel for what they are and what they are used for. Bookmark it for later use!
Semantic HTML Blocks remixing and re-styling exercise. Choose at least 2 of the following 5 examples to work on:
This is a _Semantic HTML blocks_ remixing and re-styling exercise. You will explore the meaning and usage of HTML elements by using different elements to represent some common types of structured information: lists.
Goals
------
Choose _at least_ 2 of the following 5 examples of lists to work on.
At the end of this assignment, for each of your 2 lists you should have:
- a folder that has a descriptive name, like "portfolio" or "cat_breeds" (this will make sense soon!)
- a basic web page consisting of an HTML file, inside the folder
- a CSS file that describes layout and visual presentation, inside the folder
Each folder and necessary images should be uploaded to Igor and the links should be submitted to Learn.
Example lists
-------------
The following are lists of different types of data. Each one can be visually and conceptually organised in a different way. Some data should be read in a particular order, like reading a title then a subtitle then article text. Some data doesn't have a particular order, such as a collection of projects that are all in the same category.
Choose at least 2 of these to complete. Think about how these should be ordered (or not!) using HTML and CSS. Read the steps below to see how to order them.
1. [Shopping list](lists/shopping_list.md)
2. [informational article](lists/news_article.md)
3. [List of cat breeds](lists/list_of_cat_breeds.md)
4. [News website](lists/news_website_list.md)
5. [Personal Portfolio](lists/portfolio_list.md)
Decide how it should be represented in HTML, e.g. as an ordered list ``<ol>``, unordered list ``<ul>``, using headers (``h1``, ``h2``, ``h3``), using semantic markup ([``<article>``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article), [``<nav>``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav), [``<section>``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section), [``<figure>`` and ``<figcaption>``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure).). Modify the CSS styling as necessary to accommodate them.
Steps to follow
---------------
### Decide on an ordering scheme
Steps
------
Think about the list you chose.
1. Remix our list and examples. Use our [Meaning in HTML](html_examples/meaning_in_html.html) example as a starting point.
2. Move style into separate file
Is the order of the list elements important? Is there even an order, or are they all the same?
Are these single lists, or are there lists inside of lists? Are they different in some way?
How would you describe the purpose of these list elements? Are they navigation buttons? Could they be described as _articles_? Do they map to any HTML elements that you know, like ``<article>`` or ``<header>`` or ``<footer>`` or ``<nav>`` or something else?
Goals
------
Look at the [Meaning in HTML](html_examples/meaning_in_html.html) example to see different ways of representing lists in HTML as a starting point. Some of the lists are _ordered_ like ``<ol>`` which means they have a visual sequence to them, and some are unordered ``<ul>``.
**Using this example file as a starting point, try to translate the text list from the Example lists into HTML. Delete whatever HTML you don't need (but don't delete the CSS unless you know what you're doing!)
**
Don't worry about headers and images, unless you want to do something extra!
#### Basic example
**A basic, finished example might have some code like:**
```html
<h1>Corgis of the world</h1>
<em>from <a href="https://twitter.com/soapachu/status/1317575196912603146?s=20">this twitter thread</a></em>
<ul>
<li><img src="https://pbs.twimg.com/media/Ekj3qL6XEAAlZZI?format=jpg&name=small" alt="dalmation corgi"><p>Dalmation Corgi dog</p></li>
<li><img src="https://pbs.twimg.com/media/Ekj3tjMX0AQDY-q?format=jpg&name=small" alt="husky corgi">
<p>Husky Corgi dog</p></li>
</ul>
```
#### More advanced example
```html
<h1>Corgis of the world</h1>
<em>from <a href="https://twitter.com/soapachu/status/1317575196912603146?s=20">this twitter thread</a></em>
<ul>
<li>
<figure>
<img src="https://pbs.twimg.com/media/Ekj3qL6XEAAlZZI?format=jpg&name=small" alt="dalmation corgi">
<figcaption>Dalmation Corgi dog</figcaption>
</figure>
</li>
<li>
<figure>
<img src="https://pbs.twimg.com/media/Ekj3tjMX0AQDY-q?format=jpg&name=small" alt="dalmation corgi">
<figcaption>Husky Corgi dog</figcaption>
</figure>
</li>
</ul>
```
### Separate out the style
This file uses a number of CSS styles for easily creating a column and row-based layout, from the **skeleton.css** project: ``<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css">``. This line loads a css file from another website. You can see it if you open it in your browser.
We are going to do a similar thing for our CSS so it loads from another file, to make this one easier to read and manage.
The styles for our example page are included in the ``head`` of the document. You might have noticed these CSS classes and styles defined in the section starting with ``<style type="text/css">`` and ending with ``</style>``.
Correctly move the main ``<style>`` block to a separate file called ``style.css`` so you can import it by putting this code into your HTML file:
```css
<link rel="stylesheet" src="style.css">
```
At the end of this assignment you should have a basic web page (HTML + CSS) for each of the above examples. This webpage and any sub pages or images should be uploaded to Igor and the link submitted to Learn.
**Pro tip:** you can use the same css file for _all_ of your examples.
*Extra task:* The styles for our example page are included in the ``head`` of the document. Move them to a separate file.
### Reflect on the Learn forum
Reflect on the Learn forum
--------------------------
**Note: You can submit your reflection for credit**
**You can submit your reflection for credit**
Some ideas for reflection:
- Why did you choose to use (for example) an ``article`` element instead of a list (``ul``, ``ol``) element on one of your pages?
- Does the appearance reflect the content? Is there anything missing?
- What's different about HTML elements that are displayed horizontally (rows) vs. vertically (columns)? Why would you choose either one of those?
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment