nt27HowInternetWorks/index.html at master · nt27web/nt27HowInternetWorks · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!doctype html>
<html lang="en">

<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <script src="js/main.js"></script>
    <!--calling the js file used to make the background image stretch all the way across screen-->
    <link href="css/main.css" rel="stylesheet" type="text/css">

    <script>
        function navigateToPage(pageId) {
            //alert(pageId);
            var page = "";
            // decide on what page should be loaded based on the index of the carousel item.
            switch (pageId) {
                case 0: page = "https://nt27web.github.io/nt27HowInternetWorks/pages/domainandICANN.html";
                        break;
                case 1: page = "https://nt27web.github.io/nt27HowInternetWorks/pages/IPAddresses_Packets_Routing.html";
                        break;
                case 2: page = "https://nt27web.github.io/nt27HowInternetWorks/pages/DNS.html";
                        break;
                case 3: page = "https://nt27web.github.io/nt27HowInternetWorks/pages/http_https.html";
                        break;
                case 4: page = "https://nt27web.github.io/nt27HowInternetWorks/pages/w3c_html_css.html";
                        break;
                default: alert("Page not found!");
            }
            // point the browser to the appropriate page
            $(location).attr('href',page);
        }
    </script>

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="https://nt27web.github.io/nt27HowInternetWorks/">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown" role="button"
                   data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                    Topics
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="pages/domainandICANN.html">Domain names | ICANN</a>
                    <a class="dropdown-item" href="pages/IPAddresses_Packets_Routing.html">IP Addresses | Packets |
                        Routing</a>
                    <a class="dropdown-item" href="pages/DNS.html">DNS</a>
                    <a class="dropdown-item" href="pages/http_https.html">HTTP | HTTPS protocols</a>
                    <a class="dropdown-item" href="pages/w3c_html_css.html">W3C | HTML | CSS</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="pages/about.html">About</a>
            </li>
        </ul>

    </div>
</nav>


<div class="container">
    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="images/HM_ICANN%20logo_edited.jpg" class="d-block w-100" alt="Domain names and ICANN" onclick="navigateToPage(0)">
                <div class="carousel-caption d-none d-md-block">
                    <h5>Domain names and ICANN</h5>
                    <p>The Internet Corporation for Assigned Names and Numbers (ICANN) </p>
                    <p> Domain Name System (DNS)</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/packet%20rotuing_HM.jpg" class="d-block w-100" alt="IP address, Packet and Routing" onclick="navigateToPage(1)">
                <div class="carousel-caption d-none d-md-block">
                    <h5>IP Addresses, Packets and Routing</h5>
                    <p>Without IP addresses you could not connect with any websites and they could not share information
                        with you</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/DNS_edit.jpg" class="d-block w-100" alt="Domain Name System" onclick="navigateToPage(2)">
                <div class="carousel-caption d-none d-md-block">
                    <h5>DNS</h5>
                    <p>Domain Name System</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/https_edited.jpg" class="d-block w-100" alt="HTTP and HTTPS protocols" onclick="navigateToPage(3)">
                <div class="carousel-caption d-none d-md-block">
                    <h5>HTTP and HTTPS protocols</h5>
                    <p>Transfer Protocol</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/styling_edited.jpg" class="d-block w-100" alt="W3C and HTML and CSS" onclick="navigateToPage(4)">
                <div class="carousel-caption d-none d-md-block">
                    <h5>W3C and HTML and CSS</h5>
                    <p>Coding and Styling</p>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

</div>
<br>
<div class="container" style="text-align: center">

    <h1>Welcome to the Website</h1>
    <h1>How Does the internet Work !</h1>
    <br/>
    <p>The Internet works through a packet routing network in accordance with the Internet Protocol (IP),
        the Transport Control Protocol (TCP) and other protocols</p>
    <br>
    <p><b>Let's dive in for more details!! Use the Menu bar to navigate to different Topics.</b></p>
    <br>

</div>


<footer class="page-footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-12">
                <h6 class="text-uppercase font-weight-bold">Additional Information</h6>
                <p></p>
                <p>This site was designed and developed by Nayana K Thakur
                    <br/> as her masters assignment for the course Web development (IS-601)</p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12">
                <h6 class="text-uppercase font-weight-bold">Contact</h6>
                <p>New Jersey Institute of Technology
                    <br/>
                    323 Dr Martin Luther King Jr Blvd, Newark, NJ 07102
                    <br/>kwilliam@njit.edu
                    <br/>+(973) 596-3000
                </p>
            </div>
        </div>

        <div style="height: 20px"></div>
        <div class="footer-copyright text-center">© 2020 Copyright:
            <a href="https://nt27web.github.io/nt27HowInternetWorks/">https://nt27web.github.io/nt27HowInternetWorks/</a>
        </div>
    </div>
</footer>

</body>
</html>