fix(curriculum): Replace single-line blocks with multi-line blocks for Responsive Web Design (#41519)
* fix(curriculum) replace single-line block with multi-line blocks * fix(curriculum) replace single-line block with multi-line blocks (missed blocks)
This commit is contained in:
@ -13,7 +13,9 @@ Let's add a `submit` button to your form. Clicking this button will send the dat
|
||||
|
||||
Here's an example submit button:
|
||||
|
||||
`<button type="submit">this button submits the form</button>`
|
||||
```html
|
||||
<button type="submit">this button submits the form</button>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
@ -13,7 +13,9 @@ You can add images to your website by using the `img` element, and point to a sp
|
||||
|
||||
An example of this would be:
|
||||
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg">`
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg">
|
||||
```
|
||||
|
||||
Note that `img` elements are self-closing.
|
||||
|
||||
@ -25,7 +27,9 @@ Ideally the `alt` attribute should not contain special characters unless needed.
|
||||
|
||||
Let's add an `alt` attribute to our `img` example above:
|
||||
|
||||
`<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">`
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -33,9 +37,7 @@ Let's try to add an image to our website:
|
||||
|
||||
Within the existing `main` element, insert an `img` element before the existing `p` elements.
|
||||
|
||||
Now set the `src` attribute so that it points to this url:
|
||||
|
||||
`https://bit.ly/fcc-relaxing-cat`
|
||||
Now set the `src` attribute so that it points to the url `https://bit.ly/fcc-relaxing-cat`
|
||||
|
||||
Finally, don't forget to give your `img` element an `alt` attribute with applicable text.
|
||||
|
||||
|
@ -13,7 +13,9 @@ You can set a checkbox or radio button to be checked by default using the `check
|
||||
|
||||
To do this, just add the word `checked` to the inside of an input element. For example:
|
||||
|
||||
`<input type="radio" name="test-name" checked>`
|
||||
```html
|
||||
<input type="radio" name="test-name" checked>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
@ -21,7 +21,9 @@ It is considered best practice to explicitly define the relationship between a c
|
||||
|
||||
Here's an example of a checkbox:
|
||||
|
||||
`<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>`
|
||||
```html
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
@ -15,7 +15,9 @@ Now let's create a web form.
|
||||
|
||||
You can create a text input like this:
|
||||
|
||||
`<input type="text">`
|
||||
```html
|
||||
<input type="text">
|
||||
```
|
||||
|
||||
Note that `input` elements are self-closing.
|
||||
|
||||
|
@ -13,7 +13,9 @@ dashedName: inform-with-the-paragraph-element
|
||||
|
||||
You can create a paragraph element like this:
|
||||
|
||||
`<p>I'm a p tag!</p>`
|
||||
```html
|
||||
<p>I'm a p tag!</p>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
@ -13,7 +13,9 @@ You can use `a` (*anchor*) elements to link to content outside of your web page.
|
||||
|
||||
`a` elements need a destination web address called an `href` attribute. They also need anchor text. Here's an example:
|
||||
|
||||
`<a href="https://freecodecamp.org">this links to freecodecamp.org</a>`
|
||||
```html
|
||||
<a href="https://freecodecamp.org">this links to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
Then your browser will display the text `this links to freecodecamp.org` as a link you can click. And that link will take you to the web address `https://www.freecodecamp.org`.
|
||||
|
||||
|
@ -19,19 +19,27 @@ You can nest links within other text elements.
|
||||
|
||||
Let's break down the example. Normal text is wrapped in the `p` element:
|
||||
|
||||
`<p> Here's a ... for you to follow. </p>`
|
||||
```html
|
||||
<p> Here's a ... for you to follow. </p>
|
||||
```
|
||||
|
||||
Next is the *anchor* element `<a>` (which requires a closing tag `</a>`):
|
||||
|
||||
`<a> ... </a>`
|
||||
```html
|
||||
<a> ... </a>
|
||||
```
|
||||
|
||||
`target` is an anchor tag attribute that specifies where to open the link. The value `_blank` specifies to open the link in a new tab. The `href` is an anchor tag attribute that contains the URL address of the link:
|
||||
|
||||
`<a href="http://freecodecamp.org"> ... </a>`
|
||||
```html
|
||||
<a href="http://freecodecamp.org"> ... </a>
|
||||
```
|
||||
|
||||
The text, `link to freecodecamp.org`, within the `a` element is called <dfn>anchor text</dfn>, and will display the link to click:
|
||||
|
||||
`<a href=" ... ">link to freecodecamp.org</a>`
|
||||
```html
|
||||
<a href=" ... ">link to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
The final output of the example will look like this:
|
||||
|
||||
|
@ -19,11 +19,15 @@ Most HTML elements have an opening tag and a closing tag.
|
||||
|
||||
Opening tags look like this:
|
||||
|
||||
`<h1>`
|
||||
```html
|
||||
<h1>
|
||||
```
|
||||
|
||||
Closing tags look like this:
|
||||
|
||||
`</h1>`
|
||||
```html
|
||||
</h1>
|
||||
```
|
||||
|
||||
The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.
|
||||
|
||||
|
@ -13,7 +13,9 @@ You can make elements into links by nesting them within an `a` element.
|
||||
|
||||
Nest your image within an `a` element. Here's an example:
|
||||
|
||||
`<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>`
|
||||
```html
|
||||
<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>
|
||||
```
|
||||
|
||||
Remember to use `#` as your `a` element's `href` property in order to turn it into a dead link.
|
||||
|
||||
|
Reference in New Issue
Block a user