<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<!-- 

Hello Camper!

For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

--><html>
  
  <head></head>
  
  <body>
    
    <div class="main-body">
    <nav id="navbar">
      <header>World Wide Web</header>
      <a href="#Introduction" class="nav-link">Introduction</a>
      <a href="#History" class="nav-link">History</a>
      <a href="#Function" class="nav-link">Function</a>
      <a href="#Security" class="nav-link">Security</a>
      <a href="#Privacy" class="nav-link">Privacy</a>
      </nav>
    
    <main id="main-doc">
      
      <section class="main-section" id="Introduction">
      
      <header>Introduction</header>
      
      <article id="article">
        <p>
          The World Wide Web—commonly referred to as WWW, W3, or the Web—is an interconnected system of public webpages accessible through the Internet. The Web is not the same as the Internet: the Web is one of many applications built on top of the Internet.</p>
        
        
        <p> Tim Berners-Lee proposed the architecture of what became known as the World Wide Web. He created the first web server, web browser, and webpage on his computer at the CERN physics research lab in 1990. In 1991, he announced his creation on the alt.hypertext newsgroup, marking the moment the Web was first made public.</p>
          
        <p>The system we know today as "the Web" consists of several components:</p>
        
        <ul>
          <li>The HTTP protocol governs data transfer between a server and a client.</li>
          <li>To access a Web component, a client supplies a unique universal identifier, called a URL (uniform resource location) or URI (uniform resource identifier) (formally called Universal Document Identifier (UDI)).</li>
          <li>HTML (hypertext markup language) is the most common format for publishing web documents.
          </li>
        </ul>
        
        <p>Linking, or connecting resources through hyperlinks, is a defining concept of the Web, aiding its identity as a collection of connected documents.

Soon after inventing the Web, Tim Berners-Lee founded the W3C (World Wide Web Consortium) to standardize and develop the Web further. This consortium consists of core Web interest groups, such as web browser developers, government entities, researchers, and universities. Its mission includes education and outreach.</p>
          </article>
      </section>
      
      <section class="main-section" id="History">
        <header>History</header>
        <p>Tim Berners-Lee's vision of a global hyperlinked information system became a possibility by the second half of the 1980s.[11] By 1985, the global Internet began to proliferate in Europe and the Domain Name System (upon which the Uniform Resource Locator is built) came into being. In 1988 the first direct IP connection between Europe and North America was made and Berners-Lee began to openly discuss the possibility of a web-like system at CERN.</p>
        <p>While working at CERN, Berners-Lee became frustrated with the inefficiencies and difficulties posed by finding information stored on different computers.[13] On March 12, 1989, he submitted a memorandum, titled "Information Management: A Proposal",[14] to the management at CERN for a system called "Mesh" that referenced ENQUIRE, a database and software project he had built in 1980, which used the term "web" and described a more elaborate information management system based on links embedded as text: "Imagine, then, the references in this document all being associated with the network address of the thing to which they referred, so that while reading this document, you could skip to them with a click of the mouse." Such a system, he explained, could be referred to using one of the existing meanings of the word hypertext, a term that he says was coined in the 1950s. There is no reason, the proposal continues, why such hypertext links could not encompass multimedia documents including graphics, speech and video, so that Berners-Lee goes on to use the term hypermedia.</p>
      </section>
      
      <section class="main-section" id="Function">
        <header>Function</header>
        <p>The terms Internet and World Wide Web are often used without much distinction. However, the two terms do not mean the same thing. The Internet is a global system of interconnected computer networks. In contrast, the World Wide Web is a global collection of documents and other resources, linked by hyperlinks and URIs. Web resources are accessed using HTTP or HTTPS, which are application-level Internet protocols that use the Internet's transport protocols.</p>
        <p>Viewing a web page on the World Wide Web normally begins either by typing the URL of the page into a web browser, or by following a hyperlink to that page or resource. The web browser then initiates a series of background communication messages to fetch and display the requested page. In the 1990s, using a browser to view web pages—and to move from one web page to another through hyperlinks—came to be known as 'browsing,' 'web surfing' (after channel surfing), or 'navigating the Web'. Early studies of this new behaviour investigated user patterns in using web browsers. One study, for example, found five user patterns: exploratory surfing, window surfing, evolved surfing, bounded navigation and targeted navigation.</p>
        <p>The following example demonstrates the functioning of a web browser when accessing a page at the URL http://example.org/home.html. The browser resolves the server name of the URL (example.org) into an Internet Protocol address using the globally distributed Domain Name System (DNS). This lookup returns an IP address such as 203.0.113.4 or 2001:db8:2e::7334. The browser then requests the resource by sending an HTTP request across the Internet to the computer at that address. It requests service from a specific TCP port number that is well known for the HTTP service, so that the receiving host can distinguish an HTTP request from other network protocols it may be servicing. HTTP normally uses port number 80 and for HTTPS it normally uses port number 443. The content of the HTTP request can be as simple as two lines of text: </p>
        <p id="http1">GET /home.html HTTP/1.1
Host: example.org</p>
        
        <ul>
          <li>HTML 
            <p>Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. 
            With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web.
              HTML use tags for make the structure of page:</p>
            <p>e.g. the <code>head</code> element is a container for metadata (data about data) and is placed between the <code>html</code> tag and the <code>body</code> tag.</p>
            <p>HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
HTML elements like <code>html</code> can contain <code>body</code> element, inside of this <code>h1</code> element can be conteined, and <code>p</code> element can be inside of <code>h1</code></p>
       </li>
          <li>linking</li>
          <li>WWW prefix</li>
          <li>scheme specifiers</li>
          <li>page</li>
          <li>website</li>
          <li>browser</li>
          <li>server</li>
          <li>cookie</li>
          <li>search engine</li>
          <li>deep web</li>
          <li>caching</li>
        </ul>
      
      </section>
     
      <section class="main-section" id="Security">
        <header>Security</header>
        <p>For criminals, the Web has become a venue to spread malware and engage in a range of cybercrimes, including (but not limited to) identity theft, fraud, espionage and intelligence gathering.[71] Web-based vulnerabilities now outnumber traditional computer security concerns,[72][73] and as measured by Google, about one in ten web pages may contain malicious code.[74] Most web-based attacks take place on legitimate websites, and most, as measured by Sophos, are hosted in the United States, China and Russia.[75] The most common of all malware threats is SQL injection attacks against websites.[76] Through HTML and URIs, the Web was vulnerable to attacks like cross-site scripting (XSS) that came with the introduction of JavaScript[77] and were exacerbated to some degree by Web 2.0 and Ajax web design that favours the use of scripts.[78] Today by one estimate, 70% of all websites are open to XSS attacks on their users.[79] Phishing is another common threat to the Web. In February 2013, RSA (the security division of EMC) estimated the global losses from phishing at $1.5 billion in 2012.[80] Two of the well-known phishing methods are Covert Redirect and Open Redirect.</p>
      </section>
      
      <section class="main-section" id="Privacy">
        <header>Privacy</header>
        <p>Every time a client requests a web page, the server can identify the request's IP address. Web servers usually log IP addresses in a log file. Also, unless set not to do so, most web browsers record requested web pages in a viewable history feature, and usually cache much of the content locally. Unless the server-browser communication uses HTTPS encryption, web requests and responses travel in plain text across the Internet and can be viewed, recorded, and cached by intermediate systems. Another way to hide personally identifiable information is by using a virtual private network. A VPN encrypts online traffic and masks the original IP address lowering the chance of user identification.</p>
      </section>
    
    </main>
    </div>  
  </body>
  
</html>

div.main-body {display: grid; 
  grid-template-columns: 300px auto; 
grid-template-areas: "navbar maincontent";
grid-gap: 20px;
font-size:22px;
font-family: sans-serif}

nav#navbar {
  grid-area: navbar;
  position: fixed;
}

nav#navbar a {
  display: block; 
  border: 2px solid black;
  padding: 7px;
  margin: 13px 0; 
  background: #E5E7E9;
  color: #424949;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

main#main-doc {
  grid-area: maincontent;
  position: 
}

header {
  font-size: 1.5em;
  font-weight: bold; 
}

code{
  background-color:#E5E7E9; 

  padding: 4px;
}

#http1 {color: #0000FF; background: #E5E7E9;
padding: 20px;}

@media screen and (max-width: 750px) {
  
  div.media-body { grid-template-columns: 1fr;
  grid-template-areas: "navbar" "maincontent"; }
}
  
// !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.