- Hyper-Text-Markup-Language. The standard markup language for websites and describes the structure of the site.
- Tells the browser how to display the content.
- used to provide additional information about HTML elements
- Class: points to a class name in a style sheet. Used by javascript to access/manipulate elements with the specific class name. Would use when you want a collection of elements to be styled similarly.
- ID: Specifies unique ID for an HTML element. Used to style a single element.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php" method="get">
<label for="name">name:</label><br>
<input type="text" id="name" name="name" value="Rover"><br>
<label for="age">age:</label><br>
<input type="text" id="age" name="age" value="3"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Semantic tags are more about structure than navigation as a <div> would be. Semantic elements define different parts of the page and their placement, where thematic elements are similar. Semantic elements also tell more info about their content whereas <div> just says "Division here"
<h1>, <h2>, etc.: various sized headings, h1 being largest and "most important"
<p>: shows a new paragraph and adds hard returns
<body>: shows that this is the information that should be displayed on the page
<a> and the href attribute: <a> shows that this is a link while the <href> tells the destination.
<img> and the src attribute: shows that this is an image retrieved from a source file (src)
<div>: starts a new line and takes up the whole width of the page
<section>: defines a section of the page with similar thematic elements
<ul>, <ol>, and <li>: Unordered List (use for "bullets") Ordered List(use for numbered/lettered), List Item (used as items within the other two tags)
<form>
<input>
- Cascading Style Sheets: used to describe how HTML elements should be displayed
- A selector points to the element you want to style. For instance using p { property: value} will style all paragraphs in this manner.
- An ID selector is the individual element ID such as
#para1for "paragraph 1" - A class selector uses
.classto style all elements with that class designation.
- External:
- Pros - Only have to change one file.
- Cons - external storage could lead to loading errors? Only last style sheet read is used.
- Internal:
- Pros - Used for unique pages.
- Cons - Won't scale if project expands
- Inline:
- Pros - Used for unique elements. Quick. Priority style sheet.
- Cons - Won't scale and can get easily lost.
- Used to describe the area around every HTML element consisting of (from inside out):
- Content - content of the element: text, images, etc...
- Padding - clears an area around the content. Transparent.
- Border - goes around padding and content.
- Margin - clears area outside of the border. Transparent
Jumpstart Lab Tutorial
- our means of storing, fetching, calculating, and sorting data
- Structured Query Language: how we interact with most databases
- a database system used for experiments and local development; built in to MasOS
- a way of representing data in a row x column format
- a unique ID to the pieces of data which are imported directly
- an ID which references data in another table
insert - inserts data into a table
select - gathers data based on specifications
where - limits returned values to those meeting specified attributes
order by - sorts data by given attribute
inner join - creates a new table by joining others referencing a ON key
- by using the name after the SELECT command
- by adding attributes after the WHERE command
- SELECT column AS new_name
- ORDER BY column
- combining data from multiple tables which share a key value
- needed when one table does not contain all the necessary information
- computes a single result from multiple input rows
- COUNT: counts number of rows which meet criteria
- MAX: finds maximum value of given column
- AVG: calculates average of given column
- batches data into groups
- using a GROUP BY in conjunction will run the aggregate function on the GROUP BY indicated
- Copy and Paste the link to your Task Manager repo here: https://github.com/crc2231/task_manager
- Copy and Paste the link to your Static Challenge here: https://github.com/crc2231/static_challenges
- C: Create (a request)
- R: Read (or retrieve data)
- U: Update (or change data)
- D: Delete (retrieved/altered data)
- Model: assembled data to fit view
- View: the end expected result which user receives
- Controler: where the view is requested from; gathers info
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.
- routes
- controller
- index
- parameters stored as a hash with specific key-value pairs; come from user input using a form.
Check out your routes. Why do we need two routes each for creating a new Task and editing an existing Task?
- They are two different methods, one applied to create an object from the data tables, and one applied to an already existing object, adding into the existing data table.