| Practice to Structure and Add Styles to the Document (2) |
As practice to further develop the HTML and the CSS skills you have studied so far, convert the sample document to HTML, then use the CSS to set styles to it.
Practice to Manage Multiple HTML Files and Set Styles on the CSS
Follow the instruction below to divide the HTML file you created in Practice 2.4 into two HTML files and let them be linked with each other. In addition, not only use the float property of the CSS to create a multiple column setting to each HTML file, but also change other presentations.
- Copy the HTML file “week10\user-ID.html” which you created in the Practice 2.4 to “week10\ex1.html” as well as “week10\ex2.html”.
-
Delete the unnecessary part in these two HTML files in accordance with the image shown below.
When you display the two files on the Web Browser after you deleted unnecessary parts, each file should look as follows:
[ ex1.html ] [ ex2.html ] In this way, ex1.html and ex2.html become “Autumn night story” page and “Professor Hearn and Kumamoto University” page, respectively.
- Rewrite link destination of the content in the HTML files above in such a way that the files are linked to each other.
For example, change the link destination of “Professor Hearn and Kumamoto University” in ex1.html to “./ex2.html” (likewise, “Autumn night story” in ex2.html).
In addition, remove the a element, replacing it with just the text of the title, because the link within the file is no longer required.
For example, the li element containing “Autumn night story” in ex1.html should be changed to just a text “Autumn night story” rather than an a element. (Likewise, “Professor Hearn and Kumamoto University” in ex2.html.) - Check if ex2.html is displayed when you display ex1.html on the Web Browser and click on the content “Professor Hearn and Kumamoto University”. Likewise, check if ex1.html is displayed when you display ex2.html on the Web Browser and click on the content “Autumn night story”. If you cannot do this, you have to work out the reason why you can’t, and correct the problem so that you can do this without a problem.
- After that, float the content area to create a multiple column setting referring to
2.5 Box Alignment.
Use the div element to group together the content (the h2 element) and the component of the content (the ol element) while setting an appropriate width property and height property so that styles are set in such a way that the content area is floated to the left.
In addition, use the div element to group together the main body area except for the author information and the horizontal rule while setting an appropriate margin-left value in such a way that the main body area is positioned to the right of the content.(Note) Please remove the horizontal rule used to separate the content from the main text in the upper part of the page, as this is no longer required.If everything goes well, you should have the pages displayed below. Please note that a background color is attached to the content area in the samples below.
[ ex1.html ] [ ex2.html ] -
Now that you have completed the main part of the two HTML files, add more styles so that the pages look as follows:
[ ex1.html ] [ ex2.html ] The following styles have been added to the pages shown above.
For your reference, >>here (in Japanese) << is the list of CSS properties we have studied so far.
[ ex1.html ]
[ ex2.html ]
Please, using the sample as a guide, change the color, size of the characters, and/or the width of the block as you like.
(Example) Mr Kim’s various free materials archive (Kimu san no iro iro furi- sozai-shu).(broken link)