HTML5 outliner

HTML NOTES 
    <abbr> is abbreviation. title is necessary for scroll-over information
    <address> just italicizes and lets the browser know that this is an address
    <time dateline="X:XX">8:00 am</time> is for displaying time values 
    <ol> and <ul> are ordered and unordered lists
        <li> for list item
    <dl> is for detailed list
        <dt> for detailed list item 
        <dd> for detailed list item's description (will be in italics unless otherwise stated in .CSS file)

Text alteration elements
    <mark> highlights words 
    <emp> emphasizes words (makes slightly larger and bold)
    <b> bolds words 
    <i> italicizes words 

Semantic elements (there is meaning that the computer interprets)
    <hr> is for a horizontal line 
    <br> is for line break (basically like hitting enter)
    <section id="subject"> is for identifying a specific section of the webpage so that you can redirect to it later using <a href="#subject">_____</a> (MORE GENERIC)
    <article id="article"> is for identifying a specific article on the webpage so that you can redirect to it later using <a href="article">______</a> (CLEAR TOPIC)
    <aside> adds a section to put commentary about original text, often used in sidebars
    <details> adds a section to put details 
    <summary> puts a little drop down arrow displaying this text. putting <p> afterwards would fill in the drop down

Non-semantic elements (there is no meaning that the computer interprets)
    <div> simply adds a divider
    <span> 

Text
    <h1> = Heading 1
    <h2> = Heading 2
    <h3> = Heading 3
    <h4> = Heading 4
    <p> = Paragraph
    
Parts of an HTML file: 
    <header> = Header
    <main> = Body
    <footer> = Footer (where addresses and other links usually go )

Tables in HTML
    <table> makes the table in the first place 
    <caption> automatically puts a col="2" slightly bolded title above chart
    <thead> section name for table header
    <tbody> section name for table body
    <tfooter> section name for table footer
    

    <th> new table head (slightly bolded and larger)
    <tr> new table row 
    <td> new table column 
        <td colspan="3">COLUMN_NAME</td>
        <td rowspan="3">ROW_NAME</td>

 <table>
        <caption>My Daily Schedule</caption>
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th scope="col">Time</th>
                <th scope="col">Activity</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Morning</th>
                <td><time datetime="8:00">8am</time>-<time datetime="11:00">11am</time></td>
                <td>Eat lunch</td>
            </tr>
            <tr>
                <td colspan="3">Free time!</td>
            </tr>
            <tr>
                <th>Afternoon</th>
                <td rowspan="2">All other times!</td>
                <td>hellooooo</td>
            </tr>
            <tr><td>hello</td></tr>
        </tbody>
        <tfooter>
            <tr>
                <td colspan="3" rowspan="2">I wish that this was my entire schedule. Unfortunately, it is just an example of a chart in HTML.</td>
            </tr>
        </tfooter>
    </table>

Forms in HTML
    <form> creates form
        <form action=""
    <label for="WHAT_THE_TEXT_WILL_BE_LISTED_AS"TEXT_INPUT:</label>
    <input type="text" name="firstname"
        input can have multiple elements put inside of its quotation marks
        type="what kind of input type it is"
        name="what the name of this input is"
        id="should match the label for input"
        placeholder="what the example text inside of the box says"
        autocomplete="on"/"off" decides if website will keep memory of inputs
        required="true" marks if this input is required or not
        autofocus= marks whether the webpage should automatically put cursor to fill in answer at loadup >

    <fieldset> creates boxes in which the questions go inside of. each question can be inside of a different box
    <legend> asks a question at the top of the fieldset

<!-- Individual form -->
<article id="contact">
    <h2>Contact Me</h2>
    <p>I really want to hear from you!</p>
    <form action="https.httpbin.org/get" method="get">
        <fieldset>
            <legend>Personal Info</legend>
                <p>
                    <label for="firstName">First Name:</label>
                    <input type="text" name="firstName"
                    id="firstName" placeholder="John" autocomplete="on" required autofocus>
                    <label for="lastName">Last Name:</label>
                    <input type="text" name="lastName
                    id="lastName" placeholder="Doe" autocomplete="on" required autofocus>
                </p>
                <p>
                    <label for="Password">Password:</label>
                    <input type="password" name="Password"
                    id="Password" placeholder="Shhhhh" required>
                </p>
                <p> 
                    <label for="phone">Phone:</label>
                    <input type="tel" name="phone"
                    id="phone" placeholder="555-555-5555" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
                </p>
                <p> 
                    <label for="decade">Decade:</label>
                    <input type="number" name="decade"
                    id="decade" min="1950" max="2020" step="10" value="1980" required>
                </p>
                <p>
                    <label for="coffee">Favorite Coffee:</label>
                    <select name="coffee" id="coffee" multiple size="5">
                        <optgroup label="Coffees">
                        <option value="regular coffee">Regular Coffee</option>
                        <option value="iced coffee">Iced Coffee</option>
                        </optgroup>
                        <optgroup label="Espresso Drinks">
                        <option value="latte" selected>Latte</option>
                        <option value="cappuccino">Cappuccino</option>
                        <option value="other">Other</option>
                        </optgroup>
                    </select>
                </p>    
        </fieldset>
        <br>
        <fieldset>
            <legend>What is your favorite food?</legend>
            <p>
                <input type="radio" name="food" id="tacos" value="tacos">
                <label for="tacos">Tacos</label>
            </p>
            <p>
                <input type="radio" name="food" id="pizza" value="pizza">
                <label for="pizza">Pizza</label>
            </p>
            <p>
                <input type="radio" name="food" id="other" value="other">
                <label for="other">Other</label>
            </p>
            <!-- Make sure that the "name" attribute is the same for everything so that each option is something different and will not select all of them-->
        </fieldset>
        <br>
        <fieldset>
            <legend>Do you have pets?</legend>
            <p>
                <input type="checkbox" name="pets" id="dog" value="dog">
                <label for="dog">Dog</label>
            </p>
            <p>
                <input type="checkbox" name="pets" id="cat" value="cat">
                <label for="cat">Cat</label>
            </p>
            <p>
                <input type="checkbox" name="pets" id="fish" value="fish">
                <label for="fish">Fish</label>
            </p>
            <p>
                <input type="checkbox" name="pets" id="otherpet" value="otherpet">
                <label for="otherpet">Other</label>
            </p>
        </fieldset>
        <br>
        <fieldset>
            <legend>Send me a note!</legend>
            <label for="message">Your Message:</label>
            <br>
            <textarea name="message" id="message" cols="30" rows="10" placeholder="Type your message here"></textarea>
        </fieldset>
        <br>
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
    </form> 
</article>

<!-- List input -->
<p>
    <label for="coffee">Favorite Coffee:</label>
    <input type="text" name="coffee" id="coffee" list="coffee-list">
    <datalist id="coffee-list">
        <option value="coffee"></option>
        <option value="latte"></option>
        <option value="espresso"></option>
        <option value="cortado"></option>
        <option value="americano"></option>
        <option value="other"></option>
    </datalist>
</p>

<main>
<body>
    <ul>
        <li>hi</li>
        <li>hellooooo</li>
        <li><a href="#address">Addresses</a></li>
    </ul>
    
    <time dateline="7:00">7:00 am</time>
    <hr>
    <p>helloooooo
        <br>hmmm let's see what happens <em>when I do this</em>
    </p>
    <p>Looks like nothing's changed!</p>
    <p>This is, for some reason, giving more me of a space though!</p>
    <br>...This is a new <abbr title="hahahahahah">line</abbr>
    
    <br>...This is very useful for making new lines!
    
    <section id="address">
    <address>
        110 State Street<br>
        Albany, New York<br>
    </addresss>
    </section>

    <dl>
        <dt>Nabi</dt>
        <dd>This is an ordinary, perhaps larger than average, orange-yellowish male <a href="https://en.wikipedia.org/wiki/Cat">cat</a>. He yearns for the snacks.</dd>
        
        <dt>Bibi</dt>
        <dd>This is a pink female sphynx cat, always ready to do mischevious things.</dd>
    </dl>
</main>

<body>
    <figure>
        <img src="img\cat1.jpg" alt="A picture of a cat!" title="I am learning about cats!" width="1500" height="200" loading="lazy">
        <figcaption>Caribbean Beach Getaway</figcaption>
    </figure>
    <figure>
        <img src="img\cat2.jpg" alt="A picture of a cat!" title="I am learning about cats!" width="1500" height="200" loading="lazy">
        <figcaption>Peruvian Summer Vacation</figcaption>
    </figure>
    <h2>Hi!!</h2>
    <p>This is a test website to learn HTML. A few years ago, I said that I was going to learn and now I feel like I have to before I break my promise any further.</p>

    Download this picture of a <a href="cat.png" download>cat!</a>
    Open <a href="https://www.google.com/"target="_blank">Google</a> in a new tab.
</body>