Kelly's Notes'

The Web and HTML, Basically

How Does The Web Work?

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.

How Does HTML Work?

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 them. Most tags work in pairs of opening and closing tags, which alter the content in between them. For example, if we wanted to make text bold we would 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

Types Of Tags

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

Front End Web Development

The Big three

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

Document Object Model

The Document Object Model, or DOM, is how an internet browser interprets a webpage's code. When you open a page, the browser takes the code of that page and organizes it into a tree structure(see below).Each branch of the 'tree' is known as an element.

Boxes Everywhere

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:

will be contained within an element, like this:
Furthermore, rectangular elements can contain other elements inside of them.