# 2: What are Websites? ## Expectations ### Learning Targets * I can describe how web pages are displayed on my browser using HTTP and HTML. * I can create a basic HTML page. ### Assignments * You will construct an HTML page from scratch in a guided class activity. * You will complete HTML and CSS courses on codecademy.com {% embed url="" %} ## World Wide Web ![Nobel Prize winner Tim Berners-Lee](https://1916862645-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHmXRQJbjMi37frjOn8%2F-LKpwiQZmQ2A2iCqIyen%2F-LKpxEMqQM82Ddp7qjUn%2Fimage.png?alt=media\&token=9ce70915-5ebb-4613-86cb-9ce3ee75d0d3) ### Tim Berners-Lee If one person had to be named as the creator of the Internet, it might be [Tim Berners-Lee](https://www.w3.org/People/Berners-Lee/) in 1989. More specifically, he created the World Wide Web while working at [CERN](https://home.cern/). It was a way of transferring information over the TCP/IP network talked about in last chapter. #### No more [Microfiche](https://en.wikipedia.org/wiki/Microform) ![Microfiche was text printed on tiny films. Searching through many films was a pain ](https://1916862645-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHmXRQJbjMi37frjOn8%2F-LJLQNJ_Y421EozM5O9D%2F-LJLReiNd5LsTo4uVRLc%2Fimage.png?alt=media\&token=07bce265-da62-472b-8762-1ff20ce53643) The "Internet" we think of is primarily the contents of our web browser. Trying to find information by tediously scanning film after film was not fun. People like Tim Berners-Lee wanted to **link** text together. So touching one word might connect you to relevant information without having to manually search for hours. The most important part of a website remains the [hyperlink](https://www.w3schools.com/html/html_links.asp). ### HTTP sends HTML HyperText Transfer Protocol is a set of rules to pass information (like the HTML layout of a web page) over a network. HTML is a markup language. It describes the structure and content of a page. So when you type in an web address like google.com into your browser, you're sending a GET request to the Google server. It responds with an HTML package that your browser renders into a familiar display. ![](https://1916862645-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHmXRQJbjMi37frjOn8%2F-LKpwiQZmQ2A2iCqIyen%2F-LKpzDbekKoyX73cLw3q%2Fimage.png?alt=media\&token=0675af99-2695-4fc8-8dfa-a5ebf86bb69b) ## Structure of HTML ### Tags and Elements A tag looks like this: \ \\ The stuff that's between the opening \ and the closing \ is what's inside that element. The first and most important element in a web page is a hypertext link. If I wanted to make a link that went to Google.com, it would look like this: `this is my link` The term **tag** describes the structure of the \ and \. The **element** is what type of object is being built by the tag, (an **`a`** is a hyperlink). The **contents** of an element is whatever is between the open and closing tag of an element. The `property="value"` pair that goes inside of an HTML tag is called an **attribute.** ![](https://1916862645-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHmXRQJbjMi37frjOn8%2F-LL0t0h5lA1oGhd3fFNe%2F-LL1sX29eEY9nz5TC5Cm%2Fimage.png?alt=media\&token=3c135310-0bcb-40ce-ae57-4345ae50d134) ### Page Structure Every web page has to have a `` at the very start to tell your browser that yes, this block of text is HTML and it should render it into a display. The `` element does something very similar. Every page you've ever seen online has been the contents of an HTML tag. {% code title="BlankPage" %} ```markup Page Title

My First Heading

My first paragraph.

``` {% endcode %} The `` element isn't seen by the user. The contents of the head allow you to connect other resources to the page, such as fonts or CSS. ## CSS is HTML's Sidekick ![HTML is Batman and CSS is Robin. CSS doesn't ever work alone--it's there to support HTML](https://1916862645-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHmXRQJbjMi37frjOn8%2F-LKpwiQZmQ2A2iCqIyen%2F-LKq-guas8Y-XKMMhiF2%2Fimage.png?alt=media\&token=a31c6c4c-d684-4a2c-bd1e-fb7e5e4620e4) CSS has its own style rules. But you drop it into an HTML head like any other HTML, ``. You can put the CSS in the HTML file, but the better way is to keep your CSS in a separate file. In that case, you use a `` element instead to connect the **.css** file. ![](https://1916862645-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHmXRQJbjMi37frjOn8%2F-LKsOYodDadLN3Nl0ALD%2F-LKsQklUNwzPWFLVnECG%2Fimage.png?alt=media\&token=8d26cb92-e4df-45d8-a58b-f6ad0cbc14e6) ![It can often be very frustrating to find the right CSS rule to fix your display](https://planboard.chalk.com/api/chalk/detached_files/5a65aea795deba0e720e08c4cb344275ba83f4de93b83fbf9816f5dd9daed22f) ## Practice {% embed url="" %} We'll build a practice page together in class using CodePen {% endembed %} {% embed url="" %} ### Additional Training {% embed url="" %} {% embed url="" %}