CSCI E-1a

Web Development

by Spencer Tiberi

Internet Recap

Web Browser

Web Server

HTTP

HTTP Status Codes

Code Status Meaning
200 OK Everything is OK
301 Moved Permanently Browser should redirect to new location
302 Found Browser should redirect to new location
304 Not Modified Browser will cache files if things don’t change to save time/bytes from requests
401 Unauthorized Not authorized to view content; Could require login
403 Forbidden Not able to view content
404 Not Found The requested data could not be found because it doesn’t exist on the server
500 Internal Service Error Not your fault; The server erred

HTML

Atom

Images

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>image</title>
    </head>
    <body>
        <img alt="Grumpy Cat" src="cat.jpg"/>
    </body>
</html>

Paragraphs

Headings

Lists

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>unordered list</title>
    </head>
    <body>
        <ul>
            <li> foo </li>
            <li> bar </li>
            <li> baz </li>
        </ul>
    </body>
</html>

Unordered List

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>ordered list</title>
    </head>
    <body>
        <ol>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ol>
    </body>
</html>

Ordered List

Tables

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>table</title>
    </head>
    <body>
        <table>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>*</td>
                <td>0</td>
                <td>#</td>
            </tr>
        </table>
    </body>
</html>

Table

Implementing Google

Forms

<!DOCTYPE html>

<html>
    <head>
        <title>search</title>
    </head>
    <body>
        <form action="https://www.google.com/search" method="get">
            <input name="q" type="text"/>
            <input type="submit" text="Search"/>
        </form>
    </body>
</html>

css0.html

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>css0</title>
    </head>
    <body>
        <header style="font-size: large; text-align: center;">
            John Harvard
        </header>
        <main style="font-size: medium; text-align: center;">
            Welcome to my home page!
        </main>
        <footer style="font-size: small; text-align: center;">
            Copyright &%169; John Harvard
        </footer>
    </body>
</html>

DOM

css1.html

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>css1</title>
    </head>
    <body style="text-align: center;">
        <header style="font-size: large;">
            John Harvard
        </header>
        <main style="font-size: medium;">
            Welcome to my home page!
        </main>
        <footer style="font-size: small;">
            Copyright &%169; John Harvard
        </footer>
    </body>
</html>

css2.html

css3.html

<!DOCTYPE html>

<html lang="en">
    <head>
        <style>

            body
            {
                text-align: center;
            }

            header
            {
                font-size: large;
            }

            main
            {
                font-size: medium;
            }

            footer
            {
                font-size: small;
            }

        </style>
        <title>css3</title>
    </head>
    <body>
        <header>
            John Harvard
        </header>
        <main>
            Welcome to my home page!
        </main>
        <footer>
            Copyright &%169; John Harvard
        </footer>
    </body>
</html>

css4.html

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="css4.css" rel="stylesheet"/>
        <title>css4</title>
    </head>
    <body>
        <header>
            John Harvard
        </header>
        <main>
            Welcome to my home page!
        </main>
        <footer>
            Copyright &%169; John Harvard
        </footer>
    </body>
</html>

body
{
    text-align: center;
}

header
{
    font-size: large;
}

main
{
    font-size: medium;
}

footer
{
    font-size: small;
}

Closing Thoughts