Intro to Web
Begin to learn about how the web works
You probably already know what a webpage is... when you type a URL and press enter, a bunch of content shows up. That’s a webpage. But how is a webpage made?
Let’s think about that code like a document written in a foreign language. If you were looking at a document written in German, you wouldn’t know what it said in English... just like when you look at a page of HTML/CSS/JS you won’t really know what the web page is going to look like. (Look at the picture of HTML below -- do you have any idea what that will turn into? Probably not!)
Luckily, just like you can use Google Translate to input a foreign language and get english in return, a browser takes the document full of code and turns it into the kind of webpage you’re used to seeing.
The code above is actually the code for the New York Times website. Not even a professional programmer could have figured that out just by looking that that snippet of code -- that’s what we have browsers for.
HTML, CSS, and JS are three different coding languages that do different things. They are the three, and only three, different programming languages that our browser knows how to turn into a web page. Most web pages that you see online use all three of them. Let’s break it down:
HTML is everything on the page that you see, including words, images, links, and embedded content. The following page uses only HTML: http://output.jsbin.com/zovayu
CSS controls how the HTML looks by changing the fonts, the text or background color, the alignment, etc. Here is the same webpage as before with CSS to make it prettier: http://output.jsbin.com/jekedu/
Did you notice anything different? (Hint: background color, content was centered, text color, font.) All of these changes were done using CSS.