B2 Intermission Work

Answer these Check for Understanding questions as you work through the assignments.

HTML

What is HTML?
- HTML stands for Hyper Text Markup Language. It consists of a series of elements that describe the structure of a Web page.
- Elements tell a browser how to display content and are represented by tags.
- A Web browsers purose is to read and display HTML documents.
- Browsers don't display tags, but use them to render content a certain way on a page.
- Tags generally come in pairs, a start tag <> and a closing end tag </>.
- <!DOCTYPE html> declaration appears once at top of the page, and helps browsers to display content correctly.
- Proper declartion for HTML5 : <!DOCTYPE html>
- There have been 6 versions of HTML since its inception in 1991.
What is an HTML element?
- Elements are the individual components of HTML documents, defined by their opening and closing tags. A single element is everyting from the start tag to end tag.
- Elements can be nested, containing additonal elements.
- Example: a <p> tag defines a paragraph element.
- Certain elements don't require closing tags, but it is best practice to not rely on this.
- An element with no content is called an empty element.
- HTML tags are NOT case sensitive, but it is best practice to use lowercase.
What is an HTML attribute?
- Attributes are used to provide additional information about HTML elements.
- Example: the <src> attribute works in combination with the <img> element to provide the filename source for the image. The <width> and <height> attributes also follow to define the pixel size for the image. The <alt> attribute can also be used with the 'img' element to provide an alternative text for the image that a screen reader can use.
- The <style> attribute is used on any element to specify styling like color or font.
- <p style="color:red">This is a paragraph.</p>
- The <lang> attribute can be used to declare a language, which helps with accessibility apps and SEO.
- the <title> attribute is used with a <p> element to add a title display to the paragraph.
- HTML does not require quotes around attribute values but it is best practice to use them. Double quotes are best practice but if the attribute value already uses double quotes you can encase that in single quotes.
What is the difference between a class and an id? When would you use one vs. the other?
- An id can identify only one element whereas class can identify many.
- ID's are unique, classes are not.
- Class should be used when information or styling is reusable, and ID should be used when creating styling unique to a certain element.
- ID's have special browser functionality that allow for the browser to locate the ID and automatically scroll to that location.
What HTML would you write to create a form for a new dog with a "name" and an "age"?

<form>
 Name:<br>
 <input type="text" name="name">
 <br><br>
 <input type="submit" value="Submit">
</form>

What are semantic tags? When would you use them over a div?
- Semantic tags are a new feature to HTML5 that give meaning to elements and allow you to define sections and containers more easily.
- <section>, <article>, <header>, <nav>, <figure> are all examples of new semantic tags.
- It would be best practice to use semantic tags over div whenever possible as it allows browsers to easily reference what kind of container is being displayed.
Explain what each of the following HTML tags do and when you would use them:
- <h1>, <h2>, etc.
  - These represent heading tags, <h1> represents the largest and most important heading, which decrease down to <h6>.
  - Search engines use headings to index content of web pages.
  - You can use the <style> attribute on headings to specify size.
- <p>
  - This is a paragraph tag, you would use this to put the main text of your paragraphs onto your page.
  - HTML always removes extra spaces and lines when rendering unless enclosed with a <pre> element.
  - Use <br> elements to add line breaks.
- <body>
  - All the visible content of an HTML document is located between the opening and closing body tags.
- <a> and the href attribute
  - HTML links are defined with an tag, the links destination is specified with the href attribute.
- <img> and the src attribute
  - the <img> tag defines an HTML image element, src stands for source file, and is an attribute used with the the <img> tag to specify the destination address.
  - You can use a 'local link' by not using the https://www. reference.
  - You can customize link <style> using CSS.
- <div>
  - A block display element that is use as a container for other elements and/or styling.
- <section>
  - A semantic element used to define a new section, and to group styling and content thematically.
- <ul>, <ol>, and <li>
  - These are all examples of list tags. The <ul> tags create an unordered/bullet list and the <ol> tags create a ordered/ numbered list.
  - The <li> tags are used within the previous tags to actually create the indiviual listed elements.
- <form>
  - The form element defines a form that can be used to collect and store user input. These are used all over the web, particularly in things like application.
- <input>
  - The input element is used within a form element to describe how to display the forms inpyt elements.
  - Used in combination with type attribute: <input type ="radio" name="ethnicity">

CSS

What is CSS?
- CSS stands for Cascading Style Sheets.
- It describes how HTML elements are displayed.
- It helps saving a lot of work with its ability to control several page layouts at once.
- External sheets stored in .css file types.
What is a CSS selector? How do you use the ID selector? The class selector?
- Selectors in CSS are the begining syntax of a css command, and are what "find" certain HTML elents, id's, or classes.
- To select an element: p { color: red; }
- To select an ID, you use the # character: #para1 { text-align: center; }
- To select a class, use .:

.center {

  text-align: center;

  color: red;

}

p.center {

  text-align: center;

  color: red;

}

What are the three ways to include CSS in your HTML documents? What are the pros and cons of each?
- You can include CSS styling externally, internally, or inline.
- Externally: Styling written in a seperate .css file that can be added with a <link> element.
  - This is useful when writing styles that will be used on elements on several different pages.
- Internally: Used when writing styling contained to elements used on that page only. Include within a <style> element
- Inline: Used on a single element and declared within the opening tag of that element as the style attribute.
What is the Box Model? Describe each component of the Box Model.
- The box model describes the components of the box that wrap HTML elements.
  - Content: The main contents of the box, this is where text and images will appear.
  - Padding: An area around the content that is empty space between the border.
  - Border: The border than goes around the paddding.
  - Margin: Clears space beyond the border, is transparent

SQL

Jumpstart Lab Tutorial

What is a database?
- A database a virtual structure for storing, managing, and manipulating data.
What is SQL?
- Stands for Structured Query Language, is a computer language designed for accessing and altering databases.
- Can do everything from creating, altering, optimizing, and maintaing databases.
What is SQLite3?
- SQLite3 is a free and lightweight database good for expierimentation and local database work. Rather than hiding databases like most other management systems, it stores its entire database in a file on the host machine.
What is a Table?
- Tables are how data is stored in a database. Tables are made of rows and columns that hold different pieces of data.
What is a primary key?
- The primary key is each rows uniquue identity. Primary keys are often stored in a single column as an ID of somesort.
What is a foreign key?
- Foreign keys are fields in a table that refer to primary key of another.
- Foreign keys allow for linking fields of tables together, creating a relational database.
Explain what each of the following SQL commands do:
- insert
  - the INSERT command can be used to add new rows of data to tables.
- select
  - SELECT is used to declare which data to return in the result-set.
- where
  - WHERE is a conditional clause used for filtering result-set.
- order by
  - ORDER BY is used to sort the result-set ascending or DESC values.
- inner join
  - INNER JOIN will select results that have matching values between tables.
```
        SELECT column_name(s)
    FROM table1
    INNER JOIN table2
        ON table1.column_name = table2.column_name;
```

PG Exercises

How can you limit which columns you select from a table?
- You can select which columns you wan't your result-set to return my listing those variable names after SELECT
```
 SELECT id, name FROM customers;
```
How can you limit which rows you select from a table?
- You can filter dated by using the WHERE statement.
```
 SELECT id, name, money FROM customers WHERE money > 10000;
```
How can you give a selected column a different name in your output?
- Using the AS statement after a variable name will rename the results-set.
```
 SELECT id, name, money AS riches FROM customers WHERE money > 100000000;
```
How can you sort your output from a SQL statement?
- Using ORDER BY allows you to sort by specified columns in ascending or descending order.
```
 SELECT * FROM customers ORDER BY money
```
What is joining? When do you need to join?
- Joining allows you to combine data from other tables based on a shared field. You need to join when you need data out of more than one table.
```
 SELECT cust.name, trns.moneyspent FROM customers cust 
 	INNER JOIN transactions trns ON trns.custid=cust.id;
```
What is an aggregate function?
- Aggregate functions allow for calculating on sets of values to return a scalar value
List three aggregate functions and what they do.
- AVG: Calculated the average of a set of values.
- COUNT: Counts rows in a specified table.
- SUM: Calculates the sum of a set of values.
What does the group statement do?
- GROUP BY allows you to construct a batch of data into groups. This will produce a new, aggregated value, that is run seperately for each group.
```
 SELECT name, money FROM customers GROUP BY money;
```
How does the group statement relate to aggregates?
- Being that aggregates summarize table data. It is then useful to use GROUP statements to group the summarized data. Aggregates operate across the entire table when used on their own, but when used with GROUP their calculations are "reset" after every group change, allowing for subtotals.

Rails Tutorial: Task Manager

Copy and Pase the link to your repo here: https://github.com/tylorschafer/Task-Manager

Define CRUD.
- Create
- Read
- Update
- Delete
Define MVC.
- MVC stands for Model View Controller.
- MVC is the underlining structure for which dynamic web apps are built. It allows for the user to interact with a user interface.
- Users interact with the controller with CRUD behaviors, the controller handles all the requests and can then send that info to the model.
- The model is the back end where requests arrive at the servers, the model can then assemble the response and send that back to the View.
- The view is the HTML returned response from the model.
What three files would you need to create/modify for a Rails application to respond to a GET request to /tasks, assuming you have a Task model.
1. You would first need to update your config/routes.rb to include get '/tasks', to: 'tasks#index'
2. Next, you need to create a controller that responds to whereever you are redirecting. In this example we are redirecting to tasks#index, so I create a controllers/welcome_controller.rb file with an empty method: def index end
3. Finally, you need to create your view for this request, you create a views/tasks directory and a file in the directory called index.html.erb.
  - In this file is where you write your html to display whatever you want your index page to show.
What are params? Where do they come from?
- Params come from the users broswer when sending HTTP requests. They are formatted as hashes in Rails.
- With rails, we can access these params with hash syntax and use that to access the parameters from the user and write code based on that logic.
Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task?
- The reason you need two routes for eash of these requests is that you first need to GET (read) the information of that requests, and then you need to either POST (create) a new task, or PATCH (update) and exisiting task.

tylorschafer/TylorSchaferMod2Prework.md

Select an option

No results found

Select an option

No results found

B2 Intermission Work

HTML

CSS

SQL

Jumpstart Lab Tutorial

PG Exercises

Rails Tutorial: Task Manager