Web design. Lesson II. Solution to practice 1
Here is the solution to the practice we worked on in class on Wed. Sep. 14th 2016.
The box on the left shows the corresponding HTML code that generates the page in the right box. See below the explanation.
<!doctype html>
<html>
<head>
<title> Exercise 1 </title>
<meta charset="utf-8">
</head>
<body>
<h1>Structuring</h1>
<h2>Structuring HTML content</h2>
<h3>Formatting content </h3>
<p>We have seen that, at a bird's eye view, <strong>any web page consists on only two HTML Elements</strong>.
Let's see again how this looks like:
</p>
<p>
<code>
<!doctype html > <br>
<html> <br>
<em>...some content...</em> <br>
</html>
</code>
</p>
<p>
where <em>...some content...</em> stands for other elements that configure the page (like <code><head></code>)
or wrap the actual content (like <code><body></code<) we want to present.
</p>
</body>
</html>
Structuring
Structuring HTML content
Formatting content
We have seen that, at a bird's eye view, any web page consists on only two HTML Elements.
Let's see again how this looks like:
<!doctype html>
<html>
...some content...
</html>
where ...some content... stands for other elements that configure the page (like <head>)
or wrap the actual content (like <body>) we want to present.
Explanation
- In order to have the browser render the smaller-than (<) sign of an opening tag, say <p>, we need to write
<
- In order to have the browser render the greater-than (>) sign of an opening tag, say <p>, we need to write
>
- In order to have the browser render the ampersand (&) sign, we need to write
&
- Notice that the four lines in the center (starting with <!doctype html>) show up with a different font. The characters look more like programming code than like a text from say a book. That type of font is obtained with the tag <code>. Example use: In order to obtain
this font you would need to write <code>this font</code>. Refer to the solution box for other examples.
Note:
In order to make sure you understand this solution, you should create a web page with the code shown in the solution box on the left and double-check that indeed you obtain the text as shown in the box on the right.
Exercise: 1
Try to write a web page copying the above paragraphs (say from 'Structuring' to '...want to present.') as content of your body element.
What happens? Does is it look alike?
If you tried the previous exercise you will notice that what we have learned so far doesn't help
us on givin some structure nor emphasis to our content. The following elements will however provide
us with those features:
- Paragraph:
<p></p>. Let us structure some text as an independent paragraph. It automatically leaves a space with respect to the surrounding text.
- Emphasis:
- Bold type:
<strong></strong>. Renders the text inside this element in boldface.
- Italics type:
<em></em>. Renders the text inside this element in italics.
In addition to these we also have the headings tags. h1 defines the most important while h6 the least impotant.
- <h1></h1>. Example:
This is heading 1
- <h2></h2>. Example:
This is heading 2
- <h3></h3>. Example:
This is heading 3
- <h4></h4>. Example:
This is heading 4
- <h5></h5>. Example:
This is heading 5
- <h6></h6>. Example:
This is heading 6
Practice for tomorrow class
Take the page from exercise 1 above and use the paragraph, emphasis and headings to give your text an as similar structure as possible to the text you see above.
Don't worry if you don't quite get it exactly. Tomorrow we will see how to do it.