Internet/Internet.html at master · arsiag/Internet · 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Internet</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="Internet.css" type="text/css">
    </head>
    <body>
        <div id="header">
            <div id="topHeader">
                <img id="headImage" src="images/globe.png" alt="no image">
                <h1>The Inter<span>net</span></h1>
            </div>
            <h1 id="bottomHeader">The World Wide Web</h1>
        </div>
        <div id="navigation">
            <div id="topNav">
                <h2>So, what's an <span id="navSpan1">Internet?<br><br></span></h2>
                <h3>An <span class="navSpan2">Inter</span>connected <span class="navSpan2">Net</span>work of computers all around the world!</h3>
            </div>
            <div id="buttons">
                <button id="button1" type="button">WATCH A VIDEO</button>
                <button id="button2" type="button">MORE RESOURCES</button>
            </div>
            <div id="adPic">
                <img id="navImage1" src="images/ad_background.png" alt="no image">
                <h2 id="adText">Reinvent your career in just 14 weeks</h2>
                <img id="navImage2" src="images/ninja.png" alt="no image">
                <button id="button3" type="button">Learn More...</button>
            </div>
            </div>

        <div id="main-content">
            <div id="topMain">
                <img id="mainImage1" src="images/home.png" alt="no image">
                <h3>DNS</h3>
                <img id="mainImage2" src="images/phone.png" alt="no image">
                <div id="information">
                    <p>Mon - Fri 9 a.m. - 5 p.m. (EST)</p>
                    <h1>855.967.3787</h1>
                    <p>International + 1.617.963.0555</p>
                </div>
            </div>
            <div id="main1">
                <h2>Client and Servers</h2>
                <p>Computers connected to the <span class="main1Span">Web</span> are called clinets and servers.</p>
                <ul>
                    <li><p><span class="main1Span">Clients</span> are the typical Web user's Internet-connected devices (for example, your computer connected to your WI-FI, or your phone connected to your mobile network) and <span class="main1Span">Web-accessing software</span> available on those devices (usually a web browser like Firefox or Chrome).</p></li>
                    <li><p><span class="main1Span">Servers</span> are computers that store <span class="main1Span">webpages</span>, <span class="main1Span">sites</span>, or <span class="main1Span">apps</span>. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser.</p></li>
                </ul>
            </div>
            <div id="main2">
                <img id="main2Image" src="images/client_server.jpg" alt="no image">
            </div>
            <div id="main3">
                <h2>So What Actually Happens?</h2>
                <ol id="olNum">
                    <li><p>The browser goes to the <span class="main3Span">DNS server</span> and finds the real address of the <span class="main3Span">server</span> that the website lives on.</p></li>
                    <li><p>The browser sends an <span class="main3Span">HTTP request</span> message to the server asking it to send a copy of the website to the client.</p></li>
                    <li><p>If the server approves the client's request, the server sends the client a <span class="main3Span">"200 OK" message</span>, which means "Permission granted! Here you go!", and then starts sending the website's files to the browser as a series of small chunks.</p></li>
                    <li><p>The browser assembles the small chunks into a complete website and displays it to you!</p></li>
                </ol>
            </div>
            <div id="main4">
                <img id="main4Image" src="images/html.png" alt="no image">
                <div id="main4Text">
                    <h1>The Big 3 - HTML, CSS, JavaScript</h1>
                    <p>While the server can process information in many different languages, the files that they serve to the client are <span class="main4Span">always</span> going to be some combination of HTML, CSS, and JavaScript!</p>
                    <p>Learn more about the Big 3 <a href="#">here</a>!</p>
                </div>

            </div>
        </div>
    </body>
</html>