From 0ca1c9fe5993556d1989ba400ff37f3166a12e1b Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Tue, 11 Apr 2017 17:18:06 -0400 Subject: [PATCH] lectures/labs --- 1. HTML/HTML.md | 134 +++++++++++++ 1. HTML/student_labs/.gitkeep | 0 1. HTML/student_labs/README.md | 13 ++ 1. HTML/student_labs/mockup.png | Bin 0 -> 32691994 bytes 2. CSS/CSS.md | 160 +++++++++++++++ 2. CSS/student_labs/.gitkeep | 0 2. CSS/student_labs/README.md | 9 + 2. CSS/student_labs/mockup.png | Bin 0 -> 32691994 bytes 3. Layout/BOX_MODEL.md | 138 +++++++++++++ 3. Layout/student_labs/.gitkeep | 0 3. Layout/student_labs/README.md | 14 ++ 3. Layout/student_labs/mockup.jpg | Bin 0 -> 85518 bytes .../ADVANCED_INLINE_LAYOUT.md | 51 +++++ .../student_labs/.gitkeep | 0 .../student_labs/README.md | 18 ++ .../student_labs/mockup.jpg | Bin 0 -> 85518 bytes .../1. ADVANCED_SELECTORS.md | 88 +++++++++ .../2. RESPONSIVE_DESIGN.md | 79 ++++++++ .../student_labs/.gitkeep | 0 .../student_labs/README.md | 4 + .../student_labs/wireframe.jpg | Bin 0 -> 12679 bytes .../1. FONTS.md | 183 ++++++++++++++++++ .../2. FORMS.md | 109 +++++++++++ .../3. PSEUDO_SELECTORS.md | 90 +++++++++ .../student_labs/.gitkeep | 0 .../student_labs/README.md | 26 +++ .../1. TRANSFORM.md | 53 +++++ 7. Motion, Transform, and Design/2. MOTION.md | 83 ++++++++ 7. Motion, Transform, and Design/3. DESIGN.md | 71 +++++++ .../student_labs/.gitkeep | 0 .../student_labs/README.md | 7 + 8. Flex Boxes/FLEX.md | 103 ++++++++++ 8. Flex Boxes/student_labs/.gitkeep | 0 8. Flex Boxes/student_labs/README.md | 3 + 34 files changed, 1436 insertions(+) create mode 100644 1. HTML/HTML.md create mode 100644 1. HTML/student_labs/.gitkeep create mode 100644 1. HTML/student_labs/README.md create mode 100644 1. HTML/student_labs/mockup.png create mode 100644 2. CSS/CSS.md create mode 100644 2. CSS/student_labs/.gitkeep create mode 100644 2. CSS/student_labs/README.md create mode 100644 2. CSS/student_labs/mockup.png create mode 100644 3. Layout/BOX_MODEL.md create mode 100644 3. Layout/student_labs/.gitkeep create mode 100644 3. Layout/student_labs/README.md create mode 100644 3. Layout/student_labs/mockup.jpg create mode 100644 4. Advanced Inline Layout/ADVANCED_INLINE_LAYOUT.md create mode 100644 4. Advanced Inline Layout/student_labs/.gitkeep create mode 100644 4. Advanced Inline Layout/student_labs/README.md create mode 100644 4. Advanced Inline Layout/student_labs/mockup.jpg create mode 100644 5. Responsive Design and Advanced Selectors/1. ADVANCED_SELECTORS.md create mode 100644 5. Responsive Design and Advanced Selectors/2. RESPONSIVE_DESIGN.md create mode 100644 5. Responsive Design and Advanced Selectors/student_labs/.gitkeep create mode 100644 5. Responsive Design and Advanced Selectors/student_labs/README.md create mode 100644 5. Responsive Design and Advanced Selectors/student_labs/wireframe.jpg create mode 100644 6. Fonts, Forms, and Pseudo Selectors/1. FONTS.md create mode 100644 6. Fonts, Forms, and Pseudo Selectors/2. FORMS.md create mode 100644 6. Fonts, Forms, and Pseudo Selectors/3. PSEUDO_SELECTORS.md create mode 100644 6. Fonts, Forms, and Pseudo Selectors/student_labs/.gitkeep create mode 100644 6. Fonts, Forms, and Pseudo Selectors/student_labs/README.md create mode 100644 7. Motion, Transform, and Design/1. TRANSFORM.md create mode 100644 7. Motion, Transform, and Design/2. MOTION.md create mode 100644 7. Motion, Transform, and Design/3. DESIGN.md create mode 100644 7. Motion, Transform, and Design/student_labs/.gitkeep create mode 100644 7. Motion, Transform, and Design/student_labs/README.md create mode 100644 8. Flex Boxes/FLEX.md create mode 100644 8. Flex Boxes/student_labs/.gitkeep create mode 100644 8. Flex Boxes/student_labs/README.md diff --git a/1. HTML/HTML.md b/1. HTML/HTML.md new file mode 100644 index 0000000..d1de5b3 --- /dev/null +++ b/1. HTML/HTML.md @@ -0,0 +1,134 @@ +# HTML - Tags, Content, Attributes, & Semantic HTML + +## Lesson Objectives + +1. Describe what HTML is +1. Describe what a tag is +1. Describe what the content of a tag is +1. List some common tags +1. Describe what the attributes of a tag do +1. List some common tags that have attributes +1. Describe what Semantic HTML means + +## Describe what HTML is + +HTML stands for Hyper Text Markup Language. It's a way to give structural meaning to text. It allows computers and programmers to easily determine what the purpose of a chunk of text does. + +## Describe what a tag is + +HTML creates this meaning by surrounding text with tags. Tags look like this: ``. Note that there is an opening and a closing part of the tag. We call these "opening" and "closing" tags. + +## Describe what the content of a tag is + +Between the opening and closing tags, we insert the text or "content" of the tag. The final result would look like this: `Content Goes in here`. Tags can also be placed within other tags: + +```html + + + +``` + +Note that when placing a tag inside another tag, you should indent the new tag to show it is a child of its parent tag. + +## List some common tags + +In general, we don't create our own tags. Instead there are a set of predefined tags with functionality already associated with them. + +### Initializing a page + +Every site should start with: + +```html + + + + + +``` + +1. The DOCTYPE tag is special and doesn't get closed. It also is the only tag that can have non-alpha-numeric (letters/numbers) values in it. +1. html: shows where the html begins +1. head: contains content specifically for the browser, not the user, to see. +1. body: contains all the content that the user will see when viewing the html in a web browser like Chrome, Firefox, etc. + +### basic tags + +1. h1, h2, h3, h4, h5, h6 + - These are headers. Imagine you're giving a lecture and you want to have an outline. These will help a computer/programmer figure out what are the title, sub sections, sub-sub sections, etc. of your outline. + - The lower the number, the more important the header is. h1 tags are generally the title of the page. h2 denote a section, and so on. +1. p + - These are paragraphs + +### specific structure + +Of course a website is more than just headers and paragraphs, though. It has many sections to it that a normal outline doesn't. Here are some of the more common tags we use to give structure to the page + +1. header + - could contain elements like a log and a nav bar. Perhaps the title of the page too? +1. footer + - could contain disclaimers, copyrights, and less important links (privacy, terms and conditions, legal, etc). +1. main + - the bulk of your site goes in here +1. section + - within some of the tags listed above, there can be different sections. Use this tag to block each section off +1. nav + - this will hold navigation links +1. article + - if you're writing a blog, or have a page with many self contained sections, this might work well +1. aside + - this is for tangential material. Sidebars, inserts, etc. + +### generic structure + +Sometimes we need a tag that doesn't fit into any of the previously defined categories. If this is the case, we can use one of two generic tags + +1. div + - used to block out chunks of content +1. span + - use to block out small bits of content (e.g. words, sentences, etc) + +### elements + +Some elements are not structural, but actually make the content display differently + +1. ul/ol/li + - creates a list, either unordered (ul) or ordered (ol) + - inside each `ul` or `ol` is a set of `li` list item elements. +1. em + - this will emphasize a chunk of text, usually making it italics +1. strong + - this will emphasize a chunk of text, usually making it bold. + +### decorative elements + +Some elements do not contain content and instead are purely for decoration. Elements that do not contain content are written like so ``. Note there is no closing tag and the slash comes before the final `>` + +1. hr + - horizontal rule, `
` creates a divider +1. br + - break, `
`, starts a new line in a chunk of text. + +## Describe what the attributes of a tag do + +We can add more meaning to a tag by adding "attributes" to it. The looks like `` or ``. Again, in general, we don't create our own attributes, but instead choose from predefined ones which have specific functionality depending on what tag they're attached to. + +## List some common tags that have attributes + +1. a + - Anchor tag. Creates a clickable link to another page. Uses the `href` attribute to do so + - example: `This link will go to Google` + - note that the actual URL (location) of the page is hidden, and that only the content is shown. +1. img + - self closing, but contains a `src` attribute with is the URL to an image + - examle: `` +1. video + - like `img` but goes to a video + - example: `