# 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](/files/-LKpxEMqQM82Ddp7qjUn) ### 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](/files/-LJLReiNd5LsTo4uVRLc) 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. ![](/files/-LKpzDbekKoyX73cLw3q) ## 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.** ![](/files/-LL1sX29eEY9nz5TC5Cm) ### 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](/files/-LKq-guas8Y-XKMMhiF2) 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. ![](/files/-LKsQklUNwzPWFLVnECG) ![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="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://gilmour.online/compsci/web-design/2-http.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.