From 9001021f817f1d6c67e5f905bc77fb7d263ee5bd Mon Sep 17 00:00:00 2001 From: Aaron Brager Date: Fri, 24 Jun 2016 23:53:28 -0500 Subject: [PATCH] More things --- Gemfile | 3 +- Gemfile.lock | 4 ++ body/001-hello-world.md | 16 ++++- body/002-aloha.md | 13 +++- body/003-headers.md | 18 +++++- body/004-html-and-body.md | 27 +++++++-- body/005-head-and-title.md | 15 ++++- body/006-images.md | 24 ++++++-- body/007-lists.md | 14 ++++- body/008-tables.md | 14 ++++- body/009-links.md | 15 ++++- body/010-css.md | 87 +++++++++++++++++++++++++++ body/011-external-css.md | 36 +++++++++++ body/012-selectors.md | 90 ++++++++++++++++++++++++++++ body/013-colors.md | 54 +++++++++++++++++ body/014-text.md | 73 ++++++++++++++++++++++ body/015-margins-padding-borders.md | 60 +++++++++++++++++++ {img => images}/hello-world.png | Bin spec/010-css.rb | 79 ++++++++++++++++++++++++ spec/011-external-css.rb | 82 +++++++++++++++++++++++++ spec/012-selectors.rb | 58 ++++++++++++++++++ spec/013-colors.rb | 73 ++++++++++++++++++++++ spec/014-text.rb | 31 ++++++++++ spec/015-margins-padding-borders.rb | 31 ++++++++++ 24 files changed, 889 insertions(+), 28 deletions(-) create mode 100644 body/010-css.md create mode 100644 body/011-external-css.md create mode 100644 body/012-selectors.md create mode 100644 body/013-colors.md create mode 100644 body/014-text.md create mode 100644 body/015-margins-padding-borders.md rename {img => images}/hello-world.png (100%) create mode 100644 spec/010-css.rb create mode 100644 spec/011-external-css.rb create mode 100644 spec/012-selectors.rb create mode 100644 spec/013-colors.rb create mode 100644 spec/014-text.rb create mode 100644 spec/015-margins-padding-borders.rb diff --git a/Gemfile b/Gemfile index b062642..9376805 100644 --- a/Gemfile +++ b/Gemfile @@ -1,4 +1,5 @@ source 'https://rubygems.org' gem 'rspec-html-matchers' +gem 'css_parser' gem 'pry-nav' -gem 'pry-stack_explorer' \ No newline at end of file +gem 'pry-stack_explorer' diff --git a/Gemfile.lock b/Gemfile.lock index 7c3dc12..e2ac04a 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,9 +1,12 @@ GEM remote: https://rubygems.org/ specs: + addressable (2.3.8) binding_of_caller (0.7.2) debug_inspector (>= 0.0.1) coderay (1.0.9) + css_parser (1.3.4) + addressable debug_inspector (0.0.2) diff-lcs (1.2.5) method_source (0.8.1) @@ -43,6 +46,7 @@ PLATFORMS ruby DEPENDENCIES + css_parser pry-nav pry-stack_explorer rspec-html-matchers diff --git a/body/001-hello-world.md b/body/001-hello-world.md index fe27995..9c4d0e2 100644 --- a/body/001-hello-world.md +++ b/body/001-hello-world.md @@ -1,4 +1,14 @@ -HTML is a common way to describe the meaning and hierarchy of text so it can be formatted and displayed. +### Objectives + +After this exercise, you should be able to: + +- Define HTML +- Recognize an HTML tag +- Identify the HTML paragraph tag + +### Example + +HTML, or Hypertext Markup Language, is a way to describe the meaning and hierarchy of text so it can be formatted and displayed. HTML usually looks like some human-readable text surrounded by "tags". Tags are denoted by angle brackets, like so: @@ -12,6 +22,6 @@ The closing tag inserts `/` after the left angle bracket. The most common tag is `

`, which is shorthand for *paragraph*. -## Assignment +### Exercise -Surround the text `Hello World` with the opening and closing paragraph tags. \ No newline at end of file +Surround the text `Hello World` with the opening and closing paragraph tags. diff --git a/body/002-aloha.md b/body/002-aloha.md index 6ddb200..4a6f84a 100644 --- a/body/002-aloha.md +++ b/body/002-aloha.md @@ -1,10 +1,17 @@ +### Objectives + +After this exercise, you should be able to: + +- Repeat the paragraph tag multiple times in a document + +### Example + You can add multiple paragraphs to the same document. Let's translate *Hello World* into a few other languages. -## Assignment +### Exercise - Insert `English: ` before the text in your first paragraph. -- Create three additional paragraphs with this text: +- Create three additional paragraphs: - `Hawaiian: Aloha Houna` - `Luxembourgish: Moien Welt` - `Swahili: Salamu Dunia` - diff --git a/body/003-headers.md b/body/003-headers.md index 49bfcf1..c896faa 100644 --- a/body/003-headers.md +++ b/body/003-headers.md @@ -1,10 +1,22 @@ +### Objectives + +After this exercise, you should be able to: + +- Identify the HTML header tag +- Use an HTML header tag in a document +- Understand when not to use `

` tags + +### Example + Not all text is *paragraph* text. Documents often have headings. Headings are awesome! -When writing headings, instead of using `

`, you can use `

` through `

`. +When writing headings, instead of using `

` (and `

`), you can use `

` through `

`. - `

`: most important. - `

`: least important. -## Assignment +`

`s should also only exist once on a page, while other tags can be used multiple times. For example, on a newspaper, "The New York Times" is in large letters on the front page. This is analogous to the `

`. + +### Exercise -- Add an `

` tag at the top of your document with the title `Hello World Translations`. \ No newline at end of file +- Add an `

` tag at the top of your document with the title `Hello World Translations`. diff --git a/body/004-html-and-body.md b/body/004-html-and-body.md index 3dd9fb1..c406f1d 100644 --- a/body/004-html-and-body.md +++ b/body/004-html-and-body.md @@ -1,10 +1,27 @@ +### Objectives + +After this exercise, you should be able to: + +- Identify the `` and `` tags +- Describe which of these tags comes first +- Describe why these tags are important + +### Example + The text we've added is the main content of the HTML document. This main content is called the document's *body*, and it should be surrounded by `` tags. -The document's body is one part of an HTML document. (We'll get to the other part — the document's *head* — later.) The `` tags should be surrounded by `` tags. +The document's body is one part of an HTML document. (We'll get to the other part — the document's *head* — later.) The `` tags should be surrounded by `` tags like this: + +```html + + +

Some content goes here.

+ + +``` -It may seem a bit verbose, but these strict formatting rules help web browsers display your document properly. +It may seem a bit verbose, but these strict formatting rules help web browsers display your document properly. Without them, browsers might display your content incorrectly, more slowly, or not at all. -## Assignment +### Exercise -- Surround our document so far with `` tags. -- Surround *those* tags with `` tags. \ No newline at end of file +- Correctly place `` and `` tags around our document. diff --git a/body/005-head-and-title.md b/body/005-head-and-title.md index 4275e37..5678aa7 100644 --- a/body/005-head-and-title.md +++ b/body/005-head-and-title.md @@ -1,3 +1,16 @@ +### Objectives + +After this exercise, you should be able to: + +- Identify the `` and `` tags +- Describe which of these tags comes first +- Describe why these tags are important +- Explain where the text in the `<title>` tag is used +- Identify the `DOCTYPE` instruction +- Explain why the `DOCTYPE` instruction is used + +### Example + In addition to including a body, HTML documents should include a *head* section. This includes all information that isn't visible on the page, but which the web browser (or other clients, like search engine crawlers) might need. At a minimum, you must include the `<title>` tag here which defines the title of the HTML document. It's used in a few places, like the browser's title bar and bookmarks menu. It's also used in search engine results. @@ -26,7 +39,7 @@ Once HTML has these tags, we can promise the browser that our document complies Unlike all the other tags we've worked with, `DOCTYPE` isn't an HTML tag. That's why it looks weird. It's a special web browser instruction that indicates what kind of document this is. This can make your web page render more quickly because the web browser can avoid document type guessing and supporting old versions of HTML. -## Assignment +### Exercise - Add `<head>` tags. - Add a title. diff --git a/body/006-images.md b/body/006-images.md index eca301c..37df819 100644 --- a/body/006-images.md +++ b/body/006-images.md @@ -1,4 +1,18 @@ -Let's spruce things up a bit by adding an image. Images are added using the `img` tag. It's different from other tags we've used in a few ways: +### Objectives + +After this exercise, you should be able to: + +- Understand tag attributes +- Understand tags that don't close +- Explain the difference between absolute and relative URLs +- Describe the `<img>` tag +- Discuss the `alt` and `src` attributes +- Explain why the `alt` attribute is important +- Implement a requirement to add an image to a document + +### Example + +Let's spruce things up a bit by adding an image. Images are added using the `<img>` tag. It's different from other tags we've used in a few ways: 1. It requires that we specify two *attributes* 2. It doesn't need to be closed (we don't use `</img>`) @@ -6,10 +20,10 @@ Let's spruce things up a bit by adding an image. Images are added using the `img An image tag might look like this: ```html -<img src="img/flower.png" alt="A flower pot with three petunias"> +<img src="images/flower.png" alt="A flower pot with three petunias"> ``` -`src` specifies the URL of the image to display. The above example is a *relative* URL, but you can also use an absolute URL like `http://example.com/img/flower.png`. +`src` specifies the URL of the image to display. The above example is a *relative* URL, but you can also use an absolute URL like `http://example.com/images/flower.png`. > You can [read more about relative vs. absolute URLs on webreference](http://www.webreference.com/html/tutorial2/3.html). @@ -22,6 +36,6 @@ An image tag might look like this: ## Assignment -We've provided a logo for your page at `/img/hello-world.png`. +We've provided a logo for your page at `/images/hello-world.png`. -Add the image above the heading, within the `<body>` tags. \ No newline at end of file +Add the image above the heading, within the `<body>` tags. diff --git a/body/007-lists.md b/body/007-lists.md index d4b47cc..a6093a3 100644 --- a/body/007-lists.md +++ b/body/007-lists.md @@ -1,3 +1,13 @@ +### Objectives + +After this exercise, you should be able to: + +- Define the difference between ordered and unordered lists +- Implement the `<ol>`, `<ul>`, and `<li>` tags +- Execute a conversion from paragraph text to lists + +### Example + Our page currently displays a list of information in three separate paragraphs. It would be more semantically correct to display this information as a list. HTML supports two types of lists: ordered lists (`<ol>`) and unordered lists (`<ul>`). Each list item is specified with an `<li>` tag. @@ -38,6 +48,6 @@ These are typically rendered with bullet points, like so: > - Edward Lear > - Harriet Tubman -## Assignment +### Exercise -Convert the four paragraphs into an unordered list. \ No newline at end of file +Convert the four paragraphs into one unordered list with four list items. diff --git a/body/008-tables.md b/body/008-tables.md index 183f2a5..42911ad 100644 --- a/body/008-tables.md +++ b/body/008-tables.md @@ -1,3 +1,13 @@ +### Objectives + +After this exercise, you should be able to: + +- Define an HTML table +- Understand and implement the `<table>`, `<th>`, `<tr>`, and `<td>` tags +- Execute a conversion from lists to a table + +### Example + Lists are good for showing a series of items in a single column. But some information is better represented on a grid. For example, it would be difficult to express this information in a simple list: @@ -59,11 +69,11 @@ Here's the HTML that produces the above example. Notice how the header cells are </table> ``` -## Assignment +### Exercise Convert the unordered list into a table with the following specifications: - One header row with the titles `Language` and `Translation` - Four data rows, with two columns: 1. Language (like `Luxembourgish`) - 2. Translation (like `Moien Welt`) \ No newline at end of file + 2. Translation (like `Moien Welt`) diff --git a/body/009-links.md b/body/009-links.md index 55300e3..67a689b 100644 --- a/body/009-links.md +++ b/body/009-links.md @@ -1,6 +1,15 @@ +### Objectives + +After this exercise, you should be able to: + +- Define "hyperlink" +- Understand and implement the `<a>` tag + +### Example + The table is good for showing a lot of data, but what if the user wants more information? What type of grammatical structure does Hawaiian have? Are there alternative spellings of "Luxembourgish"? Which languages affected the development of Swahili? -To help them, we can provide links to other pages on the internet. +To help them, we can provide links (short for "hyperlinks") to other pages on the internet. A link takes the following format: @@ -12,8 +21,8 @@ It looks like this when rendered: > <a href="http://www.example.com">Example Website</a> -## Assignment +### Exercise - Link the text `Swahili` to `https://en.wikipedia.org/wiki/Swahili_language` - After the table, add the text "For additional translations, visit Bing Translator." -- Link the text `Bing Translator` to `https://www.bing.com/translator` \ No newline at end of file +- Link the text `Bing Translator` to `https://www.bing.com/translator` diff --git a/body/010-css.md b/body/010-css.md new file mode 100644 index 0000000..176564e --- /dev/null +++ b/body/010-css.md @@ -0,0 +1,87 @@ +### Objectives + +After this exercise, you should be able to: + +- Recognize a CSS rule set +- Explain the difference between HTML and CSS +- List the elements of a CSS rule set +- State an example of a CSS rule set +- Understand and implement the `<style>` tag + +### Example + +We use HTML to describe the meaning and hierarchy of our content, but it doesn't say much about how that content should look. + +CSS is a separate language that describes the *presentation* of this content. + +CSS works by applying a list of "rules" with style information to a page. Together, these rules are called a "rule set". Here's an example: + +``` +h1 { + color: aqua; + text-align: center; +} +``` + +In this example: + +- `h1` is a "selector" (more on that later) +- `color` and `text-align` are "properties" +- `aqua` and `center` are "values" + +Together, one selector and one or more property/value pairs make up a "rule set". + +Try adding this CSS to your `index.html` file. It goes inside `<style>` tags within your `<head>` tags: + +``` +<head> + <title>Hello World Translations + + +``` + +Notice how the selector `h1` corresponds to the `

` HTML tag. + +Reload the page, and the header will appear in a soothing aqua color, centered on the page. + +### Exercise + +Let's spruce things up a bit. + +- Open the [CSS Reference](http://www.w3schools.com/cssref/) in a new tab. + + > For each part of the assignment, review the CSS Reference and experiment with different options. + > + > You may encounter terms you're not familiar with, like *sans serif*, *margin*, and *pixel* (px for short). These terms are defined in the CSS Reference. + +- Using the `body` selector, create some general styles: + - Set `background-color` to `black`. + - Set `font-family` to `sans-serif`. + - Set `color` to `white`. +- Using the `a` selector, set the `color` of links to `hotpink`. +- Center the logo image by making the left and right margins equal. (You'll learn more about margins later.) Using the `img` selector: + - Set `display` to `block`. + - Set both `margin-left` and `margin-right` to `auto`. +- Draw attention to the table headers by using the `th` selector to set `border` to `2px solid white`. + + > This is called a *shorthand property* because it sets multiple values at once. Review the [CSS border Property](http://www.w3schools.com/cssref/pr_border.asp) reference to learn more. + +For the final part of the assignment, you'll apply rules to *both* the `table` and `td` selectors, like so: + +```css +table, td { + … +} +``` + +- Add additional styling to `table` and `td`: + - Set `border` to `1px solid gray`. + - Set `border-collapse` to `collapse`. + - Set `padding` to `10px`. + +Before submitting this assignment, experiment with different values to observe their effects. diff --git a/body/011-external-css.md b/body/011-external-css.md new file mode 100644 index 0000000..8e0c329 --- /dev/null +++ b/body/011-external-css.md @@ -0,0 +1,36 @@ +### Objectives + +After this exercise, you should be able to: + +- Explain the difference between internal CSS and external CSS +- Execute a conversion from internal CSS to external CSS + +### Example + +The CSS we created is included within `index.html`’s `