2018-04-19 HW

posted Apr 19, 2018, 6:06 AM by Konstantinovich Samuel   [ updated Apr 19, 2018, 7:18 AM ]

Goal: CSS is your friend
css file:
body {
background-color: black;
color: blanchedalmond;
}
h1{
    color:aquamarine;
}
p {
    font-size: 18px;
color:aqua;
    font-family: cursive;
}
table {
    color: yellow;
    font-family:monospace;
    font-size: 32px;
}

HTML FILE:
<!DOCTYPE html>
<html>
    <head>
        <title>Wow!</title>
<!--
        <link rel="stylesheet" href="style.css">

-->
<!--

        <style>
            body {
                background-color: tan;
            }
            p{
                font-family: sans-serif;
                color: blue;

            }

            h1{
                font-family: sans-serif;
                color: darkgoldenrod;
            }
            table{
              width:50%;
              height: 40px;
            }
            th,td{
              padding: 15px;
            }
            table,th,td{

                font-size: 140%;
                font-family: monospace;
                border: 2px solid black;
                border-collapse: collapse;
                padding: 15px
                background-color: antiquewhite;
                color: saddlebrown;
            }
            th{
                color: chocolate;
            }
        </style>
-->

    </head>
    <body>

      <h1>This is B - Not a visa....(h1)</h1>
      <h2>This is H2 - Not a paragraph....</h2>

        <center>This is not in a paragraph. has a center tag</center>
        <p>Lorem ipsum dolor sit amet, quis nostrud exerci tation
           ullamcorper suscipit lobortis nisl ut aliquip ex ea
           commodo consequat. Duis autem vel eum iriure dolor in
           hendrerit in vulputate velit esse feugait nulla facilisi
           molestie consequat, vel illum dolore eu feugiat nulla
           facilisis at vero eros et accumsan et iusto odio dignissim
           qui blandit praesent luptatum zzril delenit augue duis
           dolore te.
        </p>
        <p>Bacon ipsum dolor amet tail shankle hamburger,
        pork loin kielbasa leberkas sirloin flank doner pork
        corned beef ham hock cow filet mignon pancetta. Salami
        picanha alcatra pork. Short loin chuck turkey kevin pancetta.
        </p>

        Also not a paragraph... default stuff here.<br>
        More non-pargraph.<br>
        So silly... more again!
        <hr>
        <table>
        <tr>
            <th>Reel</td>
            <th>Big</td>
            <th>Fish</td>
        </tr>
        <tr>
            <td>Go</td>
            <td>
                <img width="100" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
            </td>
            <td>Yoself</td>
        </tr>
        <tr>
            <td>Red</td>
            <td>Foo , Sky</td>
            <td>Blue</td>
        </tr>
        </table>
        <h1>WHOA! HTML</h1>
        <h3>smaller header</h3>

        <p>Frankfurter pastrami ball tip, landjaeger bresaola ground
        round burgdoggen. Shankle pig shoulder ground round strip steak
        hamburger spare ribs brisket tri-tip boudin ribeye bresaola kielbasa
        frankfurter ham.</p>
    </body>
</html>




Homework (due Monday)

1. make a folder in your home directory:  public_html 
This folder can be viewed by going to a web server:   homer.stuy.edu/~YOUR_USERNAME
e.g.
homer.stuy.edu/~jmatsui01/
homer.stuy.edu/~konstans/   <- here is mine

2. Make an "about me" webpage and post in the location discussed in class.    ~/public_html/01homepage/
-Include basic "public friendly" information about you and things you like. No sensitive information. *discussion point*
-Use CSS to style the page and show off your creativity and technical skills.

Technical Requirements:
-There should be 3-4 paragraphs about you, and at least 2 different lists of things. Writing the content should be super easy, just write about stuff you like and things you find interesting. 
-Format the information using the HTML tags you have learned in a sensible way.
-Format the HTML in a reasonable way. (Tabs newlines etc)
-You may Include images
-Do NOT include sounds
-Please make it a single page, not several linked together!
-Most of the style should be in the style tag, or in an external css file, NOT in individual tags.
-Demonstrate you understand how to research and apply a variety of styles to your website

Aesthetic requirements:
-Pick a color theme that makes sense, not random colors. 
    https://coolors.co/ can help you pick some colors, and then use: http://colorsafe.co to see if it has enough contrast.
-Size your images to make sense in a browser window.

Optionally: You can ask to be judged and I will have the class vote on the best web pages! 
-More details to follow.

Comments