How the Internet Works 9: HTML

Jeremy Keeshin — Tue, 13 Mar 2012 01:10:40 +0000

In today’s post I want to demystify the term HTML. HTML stands for HyperText Markup Language, and it is the way that you write web pages. A markup language, according to Wikipedia, is a way to “annotate the text” to provide some additional information.

Every webpage has HTML, which includes a set of “tags” to describe different parts of the page. A tag can be something like , , ,

and many more.

Here is a simple HTML page:


  
    My Page
  
  
       Welcome to my page!

There are a few things you can notice here. Tags start like this : and end like this . Tags can go underneath other tags. The outermost tag is the tag, which says this is a html page. There is a tag, which says the title of this page is “My html page”. There is a tag <H1> which says that there is a big header on the page that says “Welcome to my page!”</p> <p>The indenting shows how tags are related to each other. A tag that is more indented is said to be a “child” of the tag before it. The structure of a HTML page is said to create a “tree.”</p> <p>If I want to expand my current example to include an image to a file named “dog.jpg”, I would write</p> <pre></pre> <p>This image tag has a source attribute which tells us the filename is “dog.jpg.” Different attributes tell us whether the content should be a list, a header, a paragraph, or some different section of text. These tags can be annotated with other attributes that determine how they are styled (CSS) or what to do when certain events happen (JavaScript), but these are topics for a later date.</p> <p>The main point is that webpages are just made up of html which is a series of tags that add additional information to plain text. If you want to write html, just open a text editor, copy and paste that first example and save it as a file called “index.html”– and you can open that up in a web browser.</p> </article> <article> <h1>Facebook Friends Ranking Bookmarklet Works Again</h1> <p>Jeremy Keeshin — Tue, 14 Feb 2012 18:41:43 +0000</p> There were a ton of comments here telling me that the Facebook bookmarklet that I made broke, and this happened because Facebook changed the name of the file they were using. I’ve updated the post, so the bookmarklet there should … <a href="http://thekeesh.com/2012/02/facebook-friends-ranking-bookmarklet-works-again/">Continue reading <span class="meta-nav">→</span></a> </article> <article> <h1>How the Internet Works 8: Bytes, Megabytes, and More</h1> <p>Jeremy Keeshin — Tue, 14 Feb 2012 18:01:33 +0000</p> <p>I wrote recently about how everything in computers is stored as 0s and 1s, and the language of computers is binary. You can read about that <a href="http://thekeesh.com/2011/10/how-the-internet-works-5-bits-and-binary/">here</a>. However, one bit or a few bits doesn’t really contain that much information. In general you will be dealing with thousands, or millions, or billions, or even more binary digits!</p> <p>There are a set of prefixes that are associated with binary data, and here is what they all mean.</p> <p>First a <strong>bit</strong> is just a single 1 or 0.</p> <p>If you take 8 bits and put them together we call that a <strong>byte</strong>.</p> <p>One thousand bytes is called a <strong>kilobyte</strong> (shorthand kB). The prefix kilo means 1,000, like kilogram. One minor thing is that computers always represent things in powers of 2, so although the prefix kilo means 1,000 on a computer it is more likely that a kilobyte is 1,024 bytes, because 1,024 = 2^10– the closest power of two to 1,000. A small text file on your computer is probably a few kilobytes up to a hundred kilobytes.</p> <p>One million bytes is called a <strong>megabyte</strong> (shorthand MB). The prefix mega means 1,000,000. For a computer the exact number is the closest power of 2 which is 2^20. A standard mp3 file on your computer is probably somewhere from 3 to 10 megabytes (that is 3 to 10 MILLION bytes, or 24 to 80 MILLION 1s and 0s!).</p> <p>One billion bytes is called a <strong>gigabyte</strong> (shorthand GB). The prefix giga means 1,000,000,000. For a computer the closest power of 2 is 2^30. A full-length video of medium quality is probably around a gigabyte in size. </p> <p>Just for some more reference, the Google homepage just sent 32.1 kB of data. Just loading the home page of thekeesh.com was 440.98 kB, but doing it a second time was only 12.36kB of data. An image file in general is from tens of kilobytes to a few megabytes. </p> <p>There are more prefixes bigger than giga–</p> <p><strong>terabyte</strong> is one thousand gigabytes<br /> <strong>petabyte</strong> is one thousand terabytes<br /> <strong>exabyte</strong> is one thousand petabytes<br /> <strong>zettabyte</strong> is one thousand exabyte<br /> <strong>yottabyte</strong> is one thousand zettabyte.</p> <p>You can buy a terabyte hard drive these days for about $100 or less on a quick Google search, which is pretty crazy. </p> <p>From the wikipedia page on zettabyte:</p> <blockquote><p>As of February 2012, no storage system has achieved one zettabyte of information. The combined space of all computer hard drives in the world was estimated at approximately 160 exabytes in 2006… As of 2009, the entire Internet was estimated to contain close to 500 exabytes. This is a half zettabyte. </p></blockquote> <p>So that is a basic introduction to some of the metric prefixes as applied to bytes.</p> </article> <article> <h1>Lightweight Deployment With Git</h1> <p>Jeremy Keeshin — Thu, 26 Jan 2012 00:39:54 +0000</p> <p>I’ve used this setup so many times now that I wanted to write up a list post explaining how I do it. This method is something I found on <a href="http://toroid.org/ams/git-website-howto">this site</a>, but I just wanted to add my own commentary.</p> <p>The idea is that you are developing a website locally using git, and you want to be able to easily push to your live site with git. We will set up a remote repository on your server, and push to it.</p> <p>Let’s say you have your local repository already set up. Log on to your remote machine. Navigate to a directory where you want to keep your repository. This does not necessarily need to be the same location as your code, and you actually probably want it to be a different place.</p> <pre> ### On the remote machine corn03:/afs/ir/group/paperless2> mkdir repo.git && cd repo.git corn03:/afs/ir/group/paperless2/repo.git> git init --bare Initialized empty Git repository in /afs/ir.stanford.edu/group/paperless2/repo.git/ </pre> <p>The way this is going to work, is that we are going to create a <a href="http://book.git-scm.com/5_git_hooks.html">post-receive hook</a>. A post-receive hook means you can run some script after this repo has received a push. What we are doing here is checking out the current code to some directory, which we define as the GIT_WORK_TREE. You can make the GIT_WORK_TREE wherever you want. Then we make the script executable.</p> <pre> corn03:/afs/ir/group/paperless2/repo.git> cat > hooks/post-receive #!/bin/sh GIT_WORK_TREE=/afs/ir/group/paperless2/cgi-bin git checkout -f corn03:/afs/ir/group/paperless2/repo.git> chmod +x hooks/post-receive </pre> <p>Now, on your local machine, add the remote you want to push to. On this first one, make sure you include the branch you are including, like master.</p> <pre> ## Locally > git remote add web ssh://jkeeshin@corn23.stanford.edu/afs/ir/group/paperless2/repo.git > git push web master </pre> <p>For any future updates</p> <pre> > git push web </pre> <p>It’s pretty basic, easy to use, and works for lightweight deployment for a site by yourself or with a few other people.</p> <p>The only issue I had was one time, my internet connection went down in the middle of deployment and the git process crashed. Then the next time I tried to push, nothing happened. After a little bit of searching, the fix was that there was a file “index.lock” that was created, and once we removed that file, it worked again.</p> </article> <article> <h1>Terms and Conditions: A Hobson’s Choice</h1> <p>Jeremy Keeshin — Thu, 05 Jan 2012 00:24:01 +0000</p> <blockquote><p>Hobson’s choice: the choice of taking either that which is offered or nothing; the absence of a real alternative.<br /> Origin: 1640–50; after Thomas Hobson (1544–1631), of Cambridge, England, who rented horses and gave his customer only one choice, that of the horse nearest the stable door, from dictionary.com.</p></blockquote> <p>I just joined another site yesterday. Or it was an app, I don’t really remember. It doesn’t really matter what it was. But this site had terms and conditions that you had to accept before using it. If you are just a general internet user, there is really nothing you can do about terms and conditions. If you want to use this site or app, you have to accept them. And if you don’t agree with them (and my guess would be in most cases, you would always be able to find something you don’t agree with), you simply can’t use the site.</p> <p>This is the classic case of a Hobson’s choice, where there appears to be a real choice between two alternatives, but one of the options isn’t really an option.</p> <p>Consider a case where you are at work and the boss wants you do to something, and he says to you: “Either you can do this, or you are fired!” In this case, you have “a choice”– you can either do this task or not. But assuming you want to keep your job, you are left with no real alternative, and similarly very little bargaining power. </p> <p>The end users on the internet face this on basically every site you join. There are way too many terms and conditions for it to be at all feasible and reasonable for you to read them. Almost all sites present terms and conditions in a way where they *expect* you not to read them, but you *have* to agree to them to use the site. The sad state of affairs is that users *have* to a agree to a term sheet that they *almost certainly* never read. Many sites have terms and conditions hidden at the footer of their site that you implicitly agree to just by being there. </p> <p>If I had to guess I would say that way less than 1% of Apple users read their terms and conditions sheets. I would be very curious to know that number. </p> <p>So that’s about it. If you want to use the internet at all, just accept the fact that you had to agree to all these really stupid contracts that you have never read.</p> </article> <article> <h1>Down With Gravity: Juggling Revolution</h1> <p>Jeremy Keeshin — Tue, 03 Jan 2012 09:50:14 +0000</p> <p>We made a juggling video this past month. Lots of cool angles, fun patterns, and really nice video editing by Charlie Dunn. Check it out!</p> <p></p> </article> <article> <h1>How the Internet Works 7 – Clients and Servers</h1> <p>Jeremy Keeshin — Fri, 30 Dec 2011 09:30:37 +0000</p> <p>Part of my goal with this series of posts it to demystify a lot of the jargon that you find when people talk about the internet. Each of these topics has a whole literature and special part of the internet dedicated to it, but just knowing what the general idea is a step in the right direction.</p> <p>Today, I want to write about “clients” and “servers.” These are words that are used a lot in describing basic parts of the internet, so here is the answer:</p> <p>The definitions go hand in hand, and so that is why I will introduce them together.</p> <p>The client is someone that requests information server. The server is the one who responds to the requests. </p> <p>If you think about it like a restaurant–when you go, you sit down at your table. You are the “client,” you can order whatever food you like. The waiter or waitress is your “server,” they respond to your requests. </p> <p>In terms of the internet, <b>you</b> are the client. When you want to visit a webpage, say google.com, you make a request to get their webpage, and one of Google’s servers responds with the webpage. </p> <p></p> <p>When people talk about servers they can mean a million different things, but usually they are referring to some computer, (or part of a computer), that is responsible for “serving” up their website, or responding to the different clients who are requesting it.</p> <p>“Client” and “server” go hand in hand with another pair of words: “front-end” and “back-end.” Front-end is the client-side, or the place where you, the end-user, is. Back-end is the server-side, where the website’s big computers and data-centers are. Now if I told you that “php is a server-side programming language”–you can start to decode that phrase. </p> </article> <article> <h1>How the Internet Works 6 – Programming Languages</h1> <p>Jeremy Keeshin — Tue, 29 Nov 2011 06:29:33 +0000</p> <p>This is going to be an <i>extremely</i> brief and high level overview of what a programming language is. My goal here is that if you don’t know what a programming language is before reading this, you have an idea of what it is after.</p> <p>A programming language is just the way that you tell a computer what you want it to do. You run programs on your computer, like a web browser, or maybe iTunes. These are programs. Someone or a group of people built these programs, and the way they did it was by using a programming language.</p> <p>There is a famous first program that people write, called “Hello World” where you just try and get the program to print out “Hello World.” Here is an example in a programming language called C:</p> <pre> #include <stdio.h> int main(){ printf("Hello World"); } </pre> <p>Theres a lot of random stuff here, a lot of random syntax to get the program to run, but the basic idea is that this will output “Hello World” when you run it.</p> <p>In another programming language called python, if you want to print hello world you just write:</p> <pre> print "Hello World" </pre> <p>Different programming languages have different ways of telling the computer to do things. Many math operations also carry over, so for example you could add two numbers in python with:</p> <pre> print 5 + 10 </pre> <p>There is wayyyyyyyyyyy more to programming languages. There is a specific legal way to write things in programming languages, and that is called the syntax. There are lots of other ways to classify and talk about programming languages, but that is for another time.</p> </article> <article> <h1>How the Internet Works 5: Bits and Binary</h1> <p>Jeremy Keeshin — Mon, 31 Oct 2011 08:08:33 +0000</p> <p>Theres a lot more to how the internet works, but for a few posts I want to talk about a few side topics which sort of underly everything about computers and the internet. The topic for this post is binary and bits. </p> <p>So the first question is, what is binary? Binary is a <strong>base 2</strong> number system. That might sound confusing at first, so I’ll try and compare it to a few examples you may be familiar with.</p> <p></p> <p>Take the number 2537. Two-thousand, five hundred, and thirty-seven. What that really means is two “thousands,” five “hundreds,” three “tens,” and seven “ones.” Our normal number system is in base-10, or decimal. What that really means is that each place stands for a power of ten. So “ones” is 10^0, “tens” is 10^1, etc.</p> <p>When we talk about base-2, instead of our places standing for powers of 10, they stand for powers of two. So instead of “ones,” “tens,” and “hundreds,” we have “ones,” “twos,” and “fours.” “ones” is 2^0, “twos” is 2^1, “fours” is 2^2. (The notation X^Y means X to the power Y, so 2^3 is 2*2*2.)</p> <p></p> <p>If you look at the base-2 number 1011, what we have is a 1 in the “eights” place, a one in the “twos” place and a one in the “ones” place. Adding that up we get 8+2+1 = 11. The thing about binary is you only have ones or zeros, which is very easy for a computer to represent–it’s kind of like on and off.</p> <p>One binary digit, a “one” or a “zero” is called a bit. Basically computers store everything in bits. All information is somehow represented in bits. It’s kinda crazy, but that’s what it is. So now you know.</p> </article> <article> <h1>How the Internet Works 4: IP Addresses</h1> <p>Jeremy Keeshin — Mon, 10 Oct 2011 05:34:48 +0000</p> <p>My last few posts have been about names on the internet. I talked about <a href="http://thekeesh.com/2011/09/how-the-internet-works-2-domain-names/">domain names</a> and <a href="http://thekeesh.com/2011/09/how-the-internet-works-3-urls/">urls</a>, and today I’m going to talk about <a href="http://en.wikipedia.org/wiki/IP_address">IP addresses.</a>.</p> <p>IP Addresses continue the very interesting series of names that we find on the internet. For us, they are sort of the end of the line when it comes to the internet and names. Our friend sends us a link, a URL of another webpage. That URL is the full human readable location of that thing on the internet. Part of that url is the domain name, which refers to a computer or a bunch of computers somewhere. But unfortunately, computers don’t really read English, and when you say “Go to thekeesh.com,” it really doesn’t know where to go. </p> <p>There are a few steps in between that we will talk about later, but basically what happens is that you say “thekeesh.com” and it says: “173.230.152.171″</p> <p>So that’s my real address on the internet. It’s an IP address, or an Internet Protocol Address. </p> <p>I was going to make my own image like I’ve been doing in the past, but just found Wikipedia’s and it is pretty good.</p> <p></p> <p>So here’s an IP address broken down. It’s four numbers between 0 and 255 (8 bits, but we’ll get to that later). To be honest, it doesn’t really matter here what the numbers mean. Basically you can think of the IP Address as being the address of a domain name on the internet that computers understand.</p> <h2>The Big Issue</h2> <p>Basically, the internet has gotten really big recently, and we are running out of these numbers. <a href="http://en.wikipedia.org/wiki/IPv4_address_exhaustion">Read more about it here</a>. So people redesigned IP adresses to give us way more addresses. They are 128 bit (we will talk about that more later), but that means that there are “2^128 (approximately 340 undecillion or 3.4×1038) addresses,” according to Wikipedia. That is a huge number. We are much less worried about running out with IPv6.</p> <p>So the moral of the story: An IP Address is the number assigned to a computer that is connected to the internet. Everything connected to the internet gets one, phones and printers too!</p> </article> </main></body></html>