Kelly's Website

The World Wide Web consists of several key elements:

1. Your Computer and Browser
2. The Internet
3. Servers, or computers built for hosting files
4. HTTP, or Hyper Text Transfer Protocol
5. HTML, or Hyper Text Markup Language

Whenever you sit down at your computer and type something into the address bar of your browser, several things start to happen. The first part of a web address -- HTTP -- sends a request to a server for information. Hopefully, that server sends information through the internet in the form of HTML back to your computer. Finally, your browser translates the HTML into something that is visually friendly for you to use.

HTML, like the web, also consists of several different parts.

1. Text content -- what you see.
2. Markup -- what it looks like.
3. References to other documents -- images and video .
4. Links to other pages.

While text content makes up a large part of every webpage, markup is working behind the scenes to make your viewing experience more sophisticated than a large wall of text. Markup consists mostly of tags which alter the content in and around use the <b> tag. Something written in HTML like this:

Old, gold, and <b>bold</b>

...will be displayed like this:

Old, gold, and bold

Furthermore, elements can be nested inside of one another. So if we added an <em> tag to the previous example...

<em>Old, gold and <b>bold</b></em>

We would get this result:

Old, gold, and bold

The word 'bold' is techinically located inside two different tags. Therefore, it takes on the characteristics of both of those tags (it is bold and italicized).

HTML tags can vary greatly in how they function and what they look like. Many tags contain attributes, which give that tag additional information on how it will work within the context of the document. One common example is the <a> tag, which stands for 'anchor' and can link it's contents to other websites. One important distition between tags would be inline versus block elements. While an inline tag will work within a wrtten line, a block tag will create a box around its content. What this boils down to is that inline tags will not start a new line, while block tags do. Here is a list of common tags and the categories they belong to:

Inline Elements	Block Elements
<br> Break	<p> Paragraph
<a> Anchor	<div> Document Division
<span> Inline Element Grouping	<form> Input Form
<img> Image	<table> Table
<strong> Important Text	<header> Page Header

The web conists of three main programming languages, each with their own distinct role. Those languages are:

HTML - Provides the structure of every webpage.
CSS - Provides Styling for elements on a given webpage
Javascript - Provides more advanced ways to interact with a given webpage

The Document Object Model, or DOM, is a convention -- an industry-wide agreement-- for how an internet browser interprets a webpage's code. In order to understand the importance of the DOM, we have to keep in mind the role of the web browser: keeping the internet a user friendly place. Without web browsers, whenever we got information from a server, we might be faced with a wall of HTML instead of a neatly aranged interface.

In order to achieve its goal, the browser uses the DOM to create a tree-like structure from the code. In one of the previous sections, How does HTML Work, we learned how tags can nest inside one another. The DOM takes certain tags, for example a <div> tag, and will turn them into branches of the DOM Tree. For example, if the DOM gets this code:

<div class="body">
    <div class="subject1">
    <div class="subject2">

the DOM would create two branches for the div elements 'subject1' and 'subject2' from the existing 'body' branch.

Think of how files and folders are organized on your computer. Folders can exist within one another, or next to each other in the same location. The DOM works in a very similar way.

Here is a great visualization of the Tree Structure, and how HTML Elements may be parsed:

After all of this parsing, it may look extremely similar to the original HTML document. Keep in mind that there may be small, subtle differences made by the browser in order to properly display the page. But regardless of any changes, we now have a structure that is easily navigable. We can now, using the 'Developer Tools' on our browser, find any element in the DOM by clicking on the webpage display, or on the tree structure itself. Another handy use of the DOM is collapsing and expanding branches so that we can focus on certain parts of the DOM and ignore other parts

Each element displayed on a webpage is in the shape of a rectangle. Even if you were to display a picture of a circle, like this:

it will be contained within an element, like this:

Furthermore, rectangular elements can contain other elements inside of them.

CSS, which stands for Cascading Style Sheets, is a programing language meant to provide style and aestheic changes to HTML documents. While HTML is capabable of doing this by itself (by using the <style> tag), CSS speeds up the process by using far less code. CSS has a feature called inheritence, which is what the cascading part of CSS stands for. If you were to write code in CSS that affects an HTML element, that same code will generally affect elements nested inside of the first element. For Example, if you had this element:

<div class="Bowie">Is there life on <em>Mars</em>?</div>

...and applied CSS...

.Bowie { color: orange;}

It would turn out like this ...

Is there life on Mars?

Because the <em> tag is embedded in the <div> tag, it is also affected by the CSS styling.

In the last example, we used what is called a Class Selector to make changes to all elements defined under the class 'Bowie'. While Class Selectors are perhaps the most popular, there are many different selectors we can use while coding in CSS as well. Here's a list of other helpful tags:

Type	Example	Uses
Class Selector	.Bowie {...	applies to classes, assigned to various <div> tags
ID Selector	#Bowie {...	applies to a single element given an ID. Overides other selectors
Tag Selector	<p>	applies to all of a single element type, such as <a> or <p>
Attribute Selector	[alt="Bowie]	applies to attributes, inside of elements, like rel="nofollow noopener" target="_blank" href or src

We already know that elements are shaped like boxes, and that elements can be nested inside of one another.To complicate things a bit, each element consists of four different boxes, which serve different functions in the layout of a webpage.

Body - is the innermost box and is the meat of the element.
Padding - defines the space between the body the outside of the element.
Border - is the outermost portion of the element.
Margin - defines the space between the element and other elements.

Moving past languages like CSS and HTML, languages begin to become a little more abstract. Our first abstract concept to grasp is the variable. Simply put, a variable is a place holder for other values. Even if you're not writing very complex code in Python, variables are immediately useful in terms of code readability. For example, if we had an equation like this:

3,806,000 / 323,055, 000

We would assign the numbers in this equation their own variables, so that anyone reading our code can easily see what, exactly, we are calculating

squaremilesinus = 3806000
peopleinus = 323055000
milesperpersoninus = squaremilesinus / peopleinus

Furthmore, we can use a small, easy to remember variable to hold the place of a long or arbitrary number.

In order to give a variable a value in Python, we use the '=' symbol. For example, if we wanted the variable 'cat' to have a value of 5, we would do it like so:

cat = 5

In arithmetic, the '=' is used to signify that everything on each side of it is equal in value. This is not true for languages like Python. In Python, whenever we are introducing a new variable, or reassigning an existing variable, we put it on the left side of the '=' symbol. On the right side of the '=', we put the value we are assigning to the variable. Take this code:

x = 5
x = x-1

That second line would be an impossible equation if we were to encounter it in algebra class. In Python, it means the existing value of 'x', which is 5, is being reassigned to a value of 4.

A variable can be assigned more than just a numerical value, we can also it a string. Strings a a series or grouping of characters. We use "" or '' to denote a string.

bowie = 'Ground control to Major Tom'

Numbers can also be a part of strings, which can cause some confusion. Consider the two equations:

2 + 2
'2' + '2'

The result of the prior will be 4, because we add the value of 2 and 2 together. However, the result of the latter will be 22, Because we put the characters '2' and '2' together.