homework2.github.io/homework2.html at master · HoiFaat/homework2.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<!-- things need to do on homework2--
1.modify the code of to use HTML5
2.use external CSS to format the page
3. clean deprecated tags or move attributes to CSS
4.include an animation in the table, to change the 1.background color from cyan to green and the color of 2. the font black (default) to white. set up the time between 5 and 10 seconds and the animation should stop with the background color green and the font color white.
5. ExCredit banner from left to right moving, short sentence.below the heading.

-->
<html lang="en">
<head>
<title>Very old HTML</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="homework2.css">
</head>
<body>
    <h1>This is the first heading</h1>
    <div id='box'></div>
    <p>This is my first paragraph and all the paragraphs in this page will start with a bigger font</p>

    <p>My life as a web developer, has been pretty much amazing! I started developing web pages when there was no CSS to be used and all formatting was done using HTML tags that currently are considered deprecated or even eliminated from good web developed pages. One example of tags that have been eliminated are: <span class='word'>&lt;font&gt;, &lt;center&gt;</span>. There are some attributes that have been also eliminated in order to clean more the HTML code and put all the formatting (style) to CSS.</p>

    <h2>Using CSS</h2>

    <p>When CSS was created, the main idea was exactly to take all of these formatting tags and attributes from the HTML document and transfer them to an external file that would only take care of formatting the HTML page. The idea is that the HTML document should be focused on the content of the page and the formatting, even layout, would be in a separated file.</p>

    <p>This standard has been supported and adopted world wide by W3C (<span class='word'>World Wide Web Consortium</span>) which is the organization that sets the standards for web development.</p>


    <h3>End of this exercise</h3>

    <p>At the end of this exercise, you will take all of these bad attributes and formatting tags that are taking too much space in this HTML document and you will create an <span class='word'>embedded CSS</span> using the <span class='word'>&lt;style&gt; tag</span> (of course, placing this tag in the appropriate section of your document). Within that style tag, you will transfer all the formatting you see in this page and create appropriate CSS in order to clean the HTML document without changing the formatting that this old style HTML has created!</p>

    <p>This a link to <a href="http://www.ccsf.edu">City College web site</a>. After you visit this page, this link should be white due to the vlink attribute in the body tag. If you have never visited this link, then, it will be red due to the link attribute in the body tag as well.</p>

<h4>The table showing below</h4>
<table>
<tr><th>This table should have a cyan background color and the text is centralized within each column</th><td>Second column, first row</td></tr>
    <tr><th>Would you please animate from cyan to green background?</th><td>Second column, second row</td></tr>
<tr><th>Remember to also animate the color of the font from black to white</th><td>Third column, third row</td></tr>
</table>

</body>
</html>