List Demonstration

object

an item or actualized concept

scope

realm or domain of validity

tone

degree of specification adherence

Chp 2 Understanding the Power of HTML

steps

1. change view, debug mode
2. right click, inspect element or tools and web developer, inspector
3. Inspector
4. left is HTML panel, middle is CSS, right is font
5. You can now dig into the structure of the page

HTML attributes

      1. Global attributes: attributes that can be applied to any HTML elements
      
      2. Class attribute: allows us to target all elements with that class in our CSS or Javascript 
        < p class="intro" >
               this is the Introduction.
        < /p >

      3. ID attribute: allows us to target one element with that ID in our CSS or Javascript
        < p class="intro" id="article-intro">
               this is the Introduction.        
        < /p >

      4. < blockqoute contenteditable="true" > allows us to edit the content of the blockquote
        < /blockqoute >

      5. something about "lang" that we'll get into in Chp 7
    

ARIA Roles

      1. ARIA roles are used to define the purpose of the element in the page.
  
      2. CSS layout
        a. open depth tool
        b. turn on accessability to access tree
      3. fix messed up text using ARIA
        a. "aria-label="hello world""
      4. So basically she's an assitant to clean up text code spams
    

Formatting HTML

      1. something about adding comments in code?
        a. add comment to code by typing in " < ! - - " with no space
      2. so for the most part, most tags require an opening and closing tag. however, there are some tags that do not require a closing tag. there are also some tages that don't have any content in between the opening and closing tag. Some tags have the closing slash in the same tag. 
    

Weird Characters

      1. using characters that are also used in code like " > " or " < "
      2. Entity codes are used to display characters that are not on the keyboard.
        a. "&" is the entity code for the & symbol
        b. "<" is the entity code for the "<" symbol
        c. ">" is the entity code for the ">" symbol
        d. """ is the entity code for the "quotation mark" symbol
        e. "'" is the entity code for the "apostrophe" symbol
        f. "¢" is the entity code for the "cent" symbol
        g. "£" is the entity code for the "pound" symbol
        h. "¥" is the entity code for the "yen" symbol
        i. "€" is the entity code for the "euro" symbol
          etc.
      3. non-breaking space is used to add a space between words.
        a. " " is the entity code for the non-breaking space
          a1. it allows you to basically hold two words together despite the space between them. throughout all the content in the code.                                              
    

Chp 4 Linking and Navigation

Links

        1. to make a link, you need to use the "a" tag.
            a. "href" is the attribute that you use to specify the link.
            b. Example: < a href="https://www.google.com">link< /a > 
        2. Absolute links are links that are linked to a specific web address.
            a. must include the "http://" or "https://"
        3. HTTP stands for HyperText Transfer Protocol
        4. HTTPS stands for HyperText Transfer Protocol Secure
          

URL paths

        1. Abosolute URL
            a. "https://www.google.com/search?q=cats"
        2. Relative URL
            a. "/search?q=cats"
        3.The "/" is the root directory which basically means it digs inside the file system for the next directory.
            a. https://awesomedogs.com/blog/march-9.html
            
          

Navigation

        1. Making a navigated url list WITH CSS (AS SEEN BELOW) / WITHOUT CSS IT IS A LIST 
            
        2. to make a page the main page, you need to add "< nav role="navigation" "> 
            a. you can also add "aria-label="main navigation" to the nav tag to make it more accessible.
          

Chp 5 Images and Graphics

images

        1. Need 3 main components
            a. "< img src " with image file/link
            b. "alt"
            c. "width" and "height"
        2. can leave alt text can be left blank though you should really add something
          

image formats

        1. Goal is to have highest quality image with smallest file size.
        2. 4 types of file images
            a. GIF
              a1. does well compressing large ares of a single color
              a2. limited color space of 256 colors
              a3. can do transparency, with jagged edges
              a4. can have multiple frames, and make a little movie
            b. SVG (Scalable vector graphic)
              b1. Logos, icons, etc
              b2. contains instruction for how to draw the image
              b3. can be scaled to any size
              b4. can be vectorized, meaning it can be drawn with code
            c. JPG 
              c1. image format for compressing photos
              c2. make sure to compress for site speed
            d. PNG
              d1. image format for compressing photos
              d2. images that need transparency
              d3. photos and images
          

Responsive width

        1. make multiple versions of the image for different screen sizes.
            a. use the "srcset" attribute to specify different versions of the image for different screen sizes.
            b. utilize just like this
              
          

Responsive pictures

        1. Instead of saying 1x, 2x, 3x, etc, you can just tell code the width
            a. using the sizes attribute lets the browser know what sizes to use based on the user's screen size.
            a. adding "sizes=" in the code like the following
            
        2.altering photo for differnt screen sizes 
            a. wrap the image in a "picture tag". It will uncrop and recrop photos based on user's screen size.
            
          

figure and figcaption

        1. wrapping caption in the figcaption tag 
        2. wrap both image and caption in a figure tag
            a. lets the browser know that both image and caption are together
            
 
            

            
            
          

Chp 6 Media

audio

video

Captions and subtitles

Embedding other media through iframes

Chp 8 Putting it all together

HTML page

    

  
URL
      Everything saved in 1 text file
   
HTML File is the first file that's returened in response to a request for a webpage
    
 
    
  
      
 Doctype Declaration declares which era this HTML file was written in.
      
HTML element= "< !doctype html >" 
      
 
Head element contains informaiton the browser needs to know about the page, but it doesn't appear on the page. 
      
the body element contains the informaiton that appears on the page.
      
 example listed below
      
 
      
    
    
              

Document Head

    1. The meta element is used only inside the head
      - Conveys metadata about the page
    2. The title element is used inside the head
    3. Use the following to allow scalable websites to be viewed on all devices
                - 
    4. Use the following to give site a description, similar to "alt" for images
                - 
    5. The following allows you to adjust tab 
                - 
    6. The link element is used to link to external style sheets
    7. the rel attriute is used to specify the relationship between the current document and the linked document.
                - 
                - keep in mind that the browser will list the files in the order they are listed in the HTML file.
    8. script tag tells the broswer to load a script file
                - 
              

Structuring content

    1. the main element is used to specify the main content of a document
    2. the header element is used to contain introductory content
    3. the footer element is used to contain information about the author of the section or document (usually info at the bottom of a page)
    4. the article element is used to contain content that is independent of the main content of the document
    5. the section element is used to contain content that is related to the main content of the document
    6. the aside element is used to contain content that is related to the main content of the document, but is not essential to it            
              

Examples of putting it all torgether

Chp 9 Forms and interactive elements

HTML form basics

    1. Forms
              - use the form element with labels element like the following image (Dont forget about "Input" elements)
               
    2. use " Button " element to create a button for form submission (use "action" and "method" attributes) reference Image below
              - 
    3. A few steps in one: reference previous image and the following to create a label for a form
              - 
              - the following is just a test
                

                  Name
                  
                  Email  
                  
                  

                  Name  
                  Email 

                  Send Cash
                

              

More on forms

    1. adding "type attribute" which allows the browser to check to make sure the user's input is valid (ex. email, password, etc)
              - 
    2. Adding "required" attribute to the input element will make the browser require the user to fill out the field
              - 
    3. Adding "placeholder" attribute will allow the user to see what they need to fill out in the input field
              - 
    4. use "value" attribute to set hard text in input fields (requires users to delete text in input field should they want it changed)
                
              

Additional form element types

    1. can use css to change visuals for appeal
    2. "text area" elemet is used to create a multi-line text input field
              - 
    3. Adding 3 other attributes
              - "date" 
              - "color"
              - "file"
              - 
    4. Checkboxes and radio buttons are used to create a single-choice input field (don't forget to use "fieldset" element)
              - 
               

                
              

Chp 10 Structuring Tabular Data

When to use tables

    1. Use only when you need to display data in a tabular format
              - Only for organizing DATA
                
              

Building table rows

    1. to use a table you need the following ELEMENTS
              - "table"
              - "tr"
              - "th"
              - "td"
    
    2. The following are step to use a table
              - step 1 Format 
                

              - step 2 Rows 
                

              - step 3 Header