How Does the Internet Work?

How does the Internet Work?

When you type a web address into the top of your browser and hit enter, or click a link on a website, what is really happening? To understand this, let’s pick apart a simple web address:

When we type in our browser takes us to the Lexington Public Library’s list of computer classes. How does it do this?

This web address, also known as a URL, is like a physical address or phone number, containing instructions on where on the internet to go (which server to contact) for the requested information, and what to ask for when it makes that connection.

Protocol: Describes how to encode and send the message
Domain: Lists which computer on the internet to ask for the “computerclasses” files
File path: The name of the resource that your browser is asking for

When this information is typed in, your web browser will send a message in “http” format (a type of coded message) to a computer or set of computers named “ and ask for a set of files, one of which will be called “computerclasses.html.” This computer, called “ is known as a server, which is a computer running a special program that responds to these sorts of requests.

When the server receives this message, it replies by sending a file back in ‘html format,” which is a set of instructions describing what words, pictures, and other resources should appear to the user. When your web browser receives this document, it reads it, interprets its instructions, and shows you the text and images contained in that file.

In this class we will walk you through building a basic html document, which you will be able to open in your browser.

What is a web page?

When you save a document in a program like Microsoft Word or Paint, you might save it as a “.docx” file or a “.jpeg” file. While these files can be opened as text documents or pictures by certain programs, at their core they are just files made up of specially formatted code that these programs know how to translate into text or pictures. Websites are similar, but rely on a type of code called HTML, which is designed to be simple enough to be read and written by a person. This code can be read by a web browser to show the user a web page.

To see an example of some HTML, navigate to right click anywhere on the web page, and click “View Page Source.” This will open a menu that will display the original HTML of the page.

When a “.html” document is read by the web browser, it will translate it into a website and show it to the viewer.

HTML

HTML stands for Hypertext Markup Language, and is a programming language that tells a web browser what kind of content should be displayed on a web page. Markup languages are a type of computer language that describe how something should look, and what sorts of words, images, and other resources should show up on the page. It also describes the order of the content of the page, how it looks, and can even give instructions to pull content from other places on the web.

HTML is made up of different elements, which describe different objects that appear on the page or change its behavior. An element is usually created by writing out either one or two sets oftags, enclosing an element “identifier” between one or two sets of chevrons/brackets (“>”). If the element is supposed to stand on its own, like a picture or a link, it will be made up of a single tag. If the element is supposed to contain text or other content, it will usually be written out as a pair of tags, with the second or “closing” tag containing a forward slash before the element identifier.

<p> This is my first paragraph! </p>

In this example, the “<p>” tag is the opening tag. It contains the “p” identifier, which tells the browser to show this as a paragraph of simple text. The sentence “This is my first paragraph!” is the content, and is placed between the tags to show what text should appear. Finally, the “</p>” tag is the closing tag, which tells the browser that the paragraph element is over and that it should continue on. When the browser reads this, it will just make the following text appear on the page:

This is my first paragraph!

A simple html document

When constructing an HTML document, it is important to always include certain snippets of code that are necessary for the page to properly display in most browsers.

All HTML files need to include a ”doctype,” which tells the browser which programming language the rest of the file is written in. This allows it to read the rest of the document correctly. For the latest version of HTML, HTML5, the document should be started with the tag “<!doctype html>.

Next, the entire document should be enclosed by a pair of <html</html> tags. Note that spaces and lines do not change how the HTML will display. For example, <p>I live in Lexington</p> and

<p>

I live in Lexington

<p>

…will both display on the page as “I live in Lexington.”

Inside the <html> tags, there should then be a pair of <head</head> and <body</body> tags. The head will contain information about your page that the browser might need, like what the page’s title might be. The content of the document will then go between the body tags.

When the example html document shown above is loaded into a browser, it will look like this.

HTML Cheat Sheet

HTML Document Elements and Header Elements
<!doctype html> / Document type
<html</html> / Should enclose all other elements but doctype
<head</head> / Contains technical information about the document for the browser
<body</body> / Contains all of the HTML code that will display for your user
Body Elements
 / Comment (will not be shown on document)
<p</p> / Simple text
<h?</h?> (replace ? with a number 1 – 6) / Larger “heading” text
i</i / Italics
<b</b> / Bold
<u</u> / Underlined
<a href=”?”</a> (replace ? with a url) / Link, href will be where the link leads, enclosed text will be how the link will be displayed
imgsrc=”?”> (replace ? with an image url) / Picture, src will be where the picture is stored online
br / Line break
ol</ol / Ordered list, will contain some number of <li> (list items)
ul</ul / Unordered list, will contain, some number of <li> (list items)
<li</li> / List items

Exercise: Creating a guide to popular HTML resources

Codepen.io

Begin Our Project:

We’ll use codepen, a web resource that will allow us to code in HTML and immediately see our results.

Go to
Near the upper right corner of the screen, find and click on the button that says “create” and has a downward pointing arrow. Then click “+ New Pen.” This will take us to a new pen where we can start to code
Find the bar between the boxes labeled “HTML” and “CSS.” Click on the dividing line and slide it all the way to the right, we won’t be needing any CSS or JavaScript this class.

We can now see that we have two sections on the page. The top is where we will be typing our HTML code, the bottom is where it will show what that code will do.Codepen automatically includes things like the document type and the html/body tags, so don’t worry about adding these for now.

Write Our First Lines of Code:

Time to get coding! On the first line, type the following:

This is called a “comment,” which is just a note for the programmer. By enclosing a string of text between a “” you are saying to the browser “don’t try to read this as if it were code, it’s just a note that I’m leaving for myself.”

Use the enter key to move to the next line. On line 2, type the following:

<h1>HTML Learning Resources</h1>

When you do, the words “HTML Learning Resources” should appear on the page in large “title style” letters. This is because the h1 identifier means “header.” There are 6 sizes of header. H6 produces the smallest type, almost the size created from a “<p>” element, while h1 creates the largest, intended mostly for titles of articles or pages. On line 3, type the following:

<h3>A guide to popular sites that teach you to code</h3

Just like last time, you should see this text in a smaller font size appear below your h1 element. HTML elements will appear on the page in the order that they are written in your code.

Move down to the forth line and type the following:

<p>There are thousands of resources available online that can be used to learn HTML. Listed below are some popular guides and tutorials that people around the world have used to get started on building their very own websites</p>

So far, we’ve added three HTML elements to our page, and we’ve done so by adding new elements to the next line of code. While HTML elements can take up their own lines, they can also be nested, where one element is inserted into another to change some of that larger element’s text.
To try this, change the fourth line by going to the next between the <p> tags, and adding <i</i> tags around the word “thousands,” <b</b> tags around the word “HTML”, and <u</u> tags around the phrase “very own websites.” It should now look like this:

<p>There are <i>thousands</i> of resources available online that can be used to learn <b>HTML</b>. Listed below are some popular guides and tutorials that people around the world have used to get started on building their <u>very own websites.</u</p>

While <i</i> could be used to add italic text by itself, it can also be used to change a specific string of text by nesting it inside the <p> element.

Now we’re going to add a picture. Go to the beginning of line 4 and hit enter to move that entire section of code to line 5. Then, go to the now-empty beginning of line 4 and type the following:

imgsrc=””>

The <img> element is different than the types we’ve seen so far, because it requires a special attribute in order to function. The <img> element does not actually contain a picture. Instead, it serves as a pointer that tells the browser to go to some other place on the internet and pull an image from the url. To get <img> to work correctly, we will need to provide a url so it knows where to grab that picture. The way that we do this is to change it to read:

img src="

HTML attributes are added inside the first tag, to the right of the identifier, separated by a space, in the format of attributeName=”attributeValue.” In this case, feel free to use the URL given or go to a web page like Google Image Search, look for an image that you like, right click on it, and click “copy image address.” Then paste it between the quotation marks next to src.

Your page should now look something like this:

Building Our List of Online Tutorials:

Now that we have our introduction, let’s add some content to our page. Enter the following code into the space below. As you do, try to figure out what the code that you enter is going to do before checking on the page below.

brbr

imgsrc="

<h3>w3schools.com</h3>

<p>For an introductory tutorial on different HTML tags and how they can be used, w3schools is an excellent place to start. Boasting an exhaustive list of topics and tools that let you try their example code on the page, w3schools makes an excellent reference for learning more about the general concepts and specific details of HTML.</p>

<p>To visit w3schools.com, click the link below</p>

We just used another new type of HTML element, the line break or <br>. <br> is a “self-closing tag,” a single “<br>” should stand on its own without a closing tag. <br> just moves the following content a little further down the page, giving some extra spacing between our items.

Add the following HTML on the next line:

<a href="

Anchor elements, or “<a>” are what allows us to create links to other web pages. Like with <img>, <a> requires an href attribute to function. Whatever is inserted next to the = sign in quotation marks will be where the link takes the user, and whatever is placed between the <a> and the </a> tags is how it will actually appear on the page.

We have now added our first complete section to our web page. For some additional practice, lets add some more. Enter the following code on the lines below. Again, try to guess what each line of code is going to do before you write it, then check to see what it actually did on your page.

brbrbrbr

img src="

<h3>Codecademy</h3>

<p>While many resources exist to help students learn HTML, few provide as much step-by-step coaching as Codecademy. Instead of following a book or manual, Codecademy walks students through writing code through a series of increasingly challenging exercises that are written and executed on the same browser page. Codecademy is perfect for anyone who wants to jump in head first and learn to code hands-on. </p>

<p>Some languages that Codecademy teaches include:</p>

We’re now going to try creating a bulleted list, or an “unordered list.” To create this list, we first create an unordered list element, or an <ul</ul>. Then we create some number of “list items” or <li</li> between the list tags. It should look something like this:

<li>JavaScript</li>

</ul

This will create a bulleted list. Note that the spacing and indentation doesn’t matter, if we put all 5 sets of tags on the same line it would work the same way. This indentation just makes your code easier to read, just in case you want to review it or change it later.

Finally, we will end this section by adding the following link:

<p>To try Codecademy, click <a href="

You’ll notice that we’ve nested an <a> object inside our <p> tags. This will turn the word “here” into a link, but will keep the rest of the sentence as plain text.

Only one more section to go! We will finish up our document by adding the following code:

brbrbr

img src="

<p>Building off of Codecademy's "learn it by doing it" philosophy, Free Code Camp takes coding in a browser one step further by guiding it's students through a "boot camp" like curriculum of tutorials and projects that teach both programming concepts and how to creatively apply them to solve real, interesting problems.</p>

<p>Free Code Camp trains total beginners to be full web developers by following a set study plan, giving certifications in the following skills along the way:</p>

<li>Front End Development</li>

<li>Data Visualization</li>

<li>Back End Development</li>

</ol

<p>Click <a href=" to try Free Code Camp</p

When completed, your code should look like this:

h1HTML Learning Resources</h1

h3A guide to popular sites that teach you to code</h3

imgsrc="

pThere are ithousands</i of resources available online that can be used to learn bHTML</b. Listed below are some popular guides and tutorials that people around the world have used to get started on building their uvery own websites.</u</p

brbr

imgsrc="

h3w3schools.com</h3

pFor an introductory tutorial on different HTML tags and how they can be used, w3schools is an excellent place to start. Boasting an exhaustive list of topics and tools that let you try their example code on the page, w3schools makes an excellent reference for learning more about the general concepts and specific details of HTML.</p

pTo visit w3schools.com, click the link below</p

ahref="a

brbrbrbr

imgsrc="

h3Codecademy</h3

pWhile many resources exist to help students learn HTML, few provide as much step-by-step coaching as Codecademy. Instead of following a book or manual, Codecademy walks students through writing code through a series of increasingly challenging exercises that are written and executed on the same browser page.Codecademy is perfect for anyone who wants to jump in head first and learn to code hands-on.</p

pSome languages that Codecademy teaches include:</p

liHTML</li

liCSS</li

liJavaScript</li

</ul

pTo try Codecademy, click ahref="a</p

brbrbr

imgsrc="

h3Free Code Camp</h3

pBuilding off of Codecademy's "learn it by doing it" philosophy, Free Code Camp takes coding in a browser one step further by guiding it's students through a "boot camp" like curriculum of tutorials and projects that teach both programming concepts and how to creatively apply them to solve real, interesting problems.</p

pFree Code Camp trains total beginners to be full web developers by following a set study plan, giving certifications in the following skills along the way:</p

liFront End Development</li

liData Visualization</li

liBack End Development</li

</ol

pClick ahref=" to try Free Code Camp</p

Creating a Final HTML Document:

Now, to create a real HTML document that can be opened in a browser, go to a text editor of your choice (using Word might cause problems, Try Notepad) and enter the following code:

<!doctype html>