Untitled

<html>
    <head>
        <title>Compiled Notes</title>
        <link rel="stylesheet" type="text/css" href="HTML-Notes-CSS.css">
    </head>
        <body>
        <h1 id="top"><b>Compiled Notes HTML/CSS</b></h1>
            <div>
                <ul id="navigationbuttons">
                    <li><a href="#semantic_markup">Semantic Markups</a></li>
                    <li><a href="#lists">Lists</a></li>
                    <li><a href="#links">Links</a></li>
                    <li><a href="#images">Images</a></li>
                    <li><a href="#tables">Tables</a></li>
                    <li><a href="#forms">Forms</a></li>
                </ul>
            </div>
            <div>
            <h1 id="structual_markup"> Structural Markups and Examples</h1>
                <h3> Bold < b ></h3>
                    <p>This is how you make something <b>bold</b> just add < b ></p>
                <h3> Italics < i ></h3>
                    <p>This is how make something in <i>italics</i> just add < i ></p>
                <h3> superscripts < sup ></h3>
                    <p>This is how you make something have something like the 4<sup>th</sup> just add < sup ></p>
                <h3>Subscripts < sub ></h3></li>
                    <p>This is how you make something like sup but instead it's sub CO<sub>2</sub> just add < sub > </p>
                <h3>Breaks < br /></h3>
                    <p> The breaking of a paragraph can be weird <br /> But with this <br /> It's fairly simple <br /> Just add< br /> </p>
                <h3>Line Breaks < hr > </h3>
                    <p> This is getting a little tricky, adding lines and all. </p>
                <hr/>
                    <p> This isn't actually all that hard to do, just add < hr  > in the middle where you want the line.</p>
            </div>
            <h1 id="semantic_markup"> Semantic Markups and Examples </h1>
                <h3>Strong < strong ></h3>
                    <p>Having a <strong>strong</strong> item isn't too far off of having a bold. Just add < strong ></p>
                <h3>Emphasis < em ></h3>
                    <p>Adding <em>emphasis</em> is just adding italics again. Just add < em > </p>
                <h3>Blockquotes < blockquote ></h3>
                    <blockquote cite="https://en.wikipedia.org/wiki/Computer_programming">
                        <p>Blockquotes have their own little solitude that they enjoy. Just add < blockquote ><br /> with the beginning but then close the < p > before you end the blockquote. Check out the source of this<br /> that's what is causing this indentation</p>
                    </blockquote>
                <h3>Quotations < q ></h3>
                    <p>The younger brother to blockquotes are just <q>adding quotations in reality</q> rather than the having a block of its own. Just add < q ></p>
                <h3>Abbreviations and Acronyms < abbr title = "" ></h3>
                    <p>Abbreviations are shortened form of a word or phrase like; <abbr title="Proffesor">Prof</abbr> or <abbr title="Doctor">Doc.</abbr> Make sure to out the phrase between the abbreviation or acronym</p>
                <h3>Citations < cite ></h3>
                    <p>If I wanted to cite a paper <cite>I Pencil</cite> by Leonard Read I would use < cite >.</p>
                <h3>Definitions < dfn ></h3>
                    <p>If someone doesn't know what the definition of <dfn>mellifluous</dfn> I would use the < dfn > tag.</p>
                <h3>Addresses < address ></h3>
                    <address>
                        <p>If I wanted to someone to e-mail me at<a href="seancl10@yahoo.com"> seancl10@yahoo.com</a> I would use the < address > tag</p>
                    </address>
                <h3>Insertion < ins > and Deletion < del ></h3>
                    <p>To add or subtract a set of words you will either <del>delete</del> or <ins>add</ins> a word or set of words</p>
                <h3>Slashes < s ></h3>
                    <p>To put a <s>slash</s> through something is rather simple, add < s ></p>
            <h1 id="lists"> Lists and Examples</h1>
                <h3>Ordered lists < ol >, < li ></h3>
                    <p>For me to add numbers of some sort I would have an ordered list</p>
                    <ol>
                        <li>Milk</li>
                        <li>Eggs</li>
                        <li>Waffle mix</li>
                    </ol>
            <h3>Unordered Lists < ul >, < li ></h3>
                <p>For me to add bullets or dots to something I would need to use unordered list</p>
                    <ul>
                        <li>Milk</li>
                        <li>Eggs</li>
                        <li>Waffle Mix</li>
                    </ul>
            <h3>Definition lists < dl >, < dt >, < dd ></h3>
                <p>For me to have a long list of my favorite words and define them, I would use a definition list.</p>
                    <dl>
                        <dt><b>Mellifluous</b></dt>
                                <dd>Musical or sweet sounding</dd>
                        <dt><b>Argy-Bargy</b></dt>
                                <dd>A vigrous argument</dd>
                        <dt><b>Ossify</b></dt>
                                <dd>To turn into bone</dd>
                    </dl>
            <h3>Nested Lists (same as unordered lists structurally)</h3>
                <p>In order to set up child bullet points you have to have a nested list, check sorce</p>
                    <ul>
                        <li>Mousses</li>
                        <li>Pasteries</li>
                            <ul>
                                <li>Croissant</li>
                                <li>Mille-feuille</li>
                                <li>Palmier</li>
                            </ul>
                        <li>Tarts</li>
                        <li>Other misc. items</li>
                    </ul>
                    <h1 id="links"> Link Examples (If ID then # if Class then . (CSS))</h1>
        <h3>Linking to other sites</h3>
        <p> < a href="http://www.whateversiteyouwant.com" ></p>
            <ul>
                <li><a href="http://www.youtube.com">Youtube</a></li>
                <li><a href="http://www.google.com">Gooogle</a></li>
                <li><a href="http://www.twitch.tv">Twitch</a></li>
            </ul>
        <h3>Links to the Same Page</h3>
        <p>< a href="index.html" ></p>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about-us.html">About</a></li>
                <li><a href="movies.html">Movies</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        <h3>Email Links</h3>
            < a href="mailto: seancl10@yahoo.com" >
                <p><a href="mailto: seancl10@yahoo.com">Email Sean</a></p>
        <h3>Openinig Links in a New Window</h3>
            <p>< a href="http://www.whateversiteyouwant.com" target="blank" ></p>
                <a href="http://www.imdb.com" target="blank">Internet Movie Database</a>(IMDB)
    <h1 id="images">Images and Examples</h1>
        <h3>Putting an Image In  < img src="whatever/image/you/want.jpg ></h3><br><br>
        <img src="Images/colosseum.jpg" alt="The Colosseum or Coliseum also known as the Flavian Amphitheatre is an oval amphitheatre in the centre of the city of Rome." width="600" height="400" /><hr>
        Let's say I wanted to put a picture between my text, I would just put the code right about <img src="Images/random image.jpg" alt="There's supposed to be an image here" width="100" height="100"> here<hr>
        <img src="images/colosseum.jpg" /> <br>
        <figcaption>The Colosseum or Coliseum also known as the Flavian Amphitheatre is an oval amphitheatre in the centre of the city of Rome.</figcaption>
        <p>This caption above was accomplished by adding < figcaption ></p><br><br><br>
    <h1 id="tables">Tables</h1>
        <h3>Basic Tables < table > < tr > < td ></h3>
            <table>
                <tr>
                    <td>15</td>
                    <td>30</td>
                    <td>45</td>
                </tr>
                <tr>
                    <td>60</td>
                    <td>75</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>30</td>
                    <td>15</td>
                    <td>45</td>
                </tr>
            </table>
        <h3>Table Headings < table > < th > < th scope="col" > < th scope="row" ></h3>
        <table>
            <tr>
                <th></th>
                <th scope="col">Saturday</th>
                <th scope="col">Sunday</th>
            </tr>
            <tr>
                <th scope="row">Tickets Sold:</th>
                <td>150</td>
                <td>140</td>
            </tr>
            <tr>
                <th scope="row">Total Sales:</th>
                <td>$600</td>
                <td>$550</td>
            </tr>
        </table>
        <h3>Spacing Columns < table > < tr > < th > < colspan="#" ></h3>
        <table>
            <tr>
                <th></th>
                <th>9am</th>
                <th>10am</th>
                <th>11am</th>
                <th>12pm</th>
            </tr>
            <tr>
                <th>Monday</th>
                <td colspan="2">Geography</td>
                <td>Math</td>
                <td>Art</td>
            </tr>
            <tr>
                <th>Tuesday</th>
                <td colspan="3">Gym</td>
                <td>Home Ec</td>
            </tr>
        </table>
        <h3>Spanning Rows < table > < tr > < th > < rowspan="#"></h3>
        <table>
            <tr>
                <th></th>
                <th>ABC</th>
                <th>BBC</th>
                <th>CNN</th>
            </tr>
            <tr>
                <th>6pm - 7pm</th>
                <td rowspan="2">Movie</td>
                <td>Comedy</td>
                <td>News</td>
            </tr>
            <tr>
                <th>7pm - 8pm</th>
                <td>Sport</td>
                <td>Current Affairs</td>
            </tr>
        </table>
        <h3>Long Tables < table > < thead > < tr > < tbody > < tr > < tfoot ></h3>
        <table>
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Income</th>
                    <th>Expenditure</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1st January</th>
                    <td>250</td>
                    <td>36</td>
                </tr>
                <tr>
                    <th>31st January</th>
                    <td>129</td>
                    <td>63</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td></td>
                    <td>379</td>
                    <td>99</td>
                </tr>
            </tfoot>
        </table>
        <h3>Width and Spacing < td width="#" >  cellpadding="#" >  Cellspacing="#"></h3>
        <table width="400" cellpadding="10" cellspacing="5">
            <tr>
                <th width="150"></th>
                <th>Withdrawn</th>
                <th>Credit</th>
                <th width="150">Balance</th>
            </tr>
            <tr>
                <th>January</th>
                <td>250.00</td>
                <td>660.50</td>
                <td>410.50</td>
            </tr>
            <tr>
                <th>February</th>
                <td>135.55</td>
                <td>895.20</td>
                <td>1170.15</td>
            </tr>
        </table>
        <h3>Border and Background < border > < bgcolor="" > </h3>
        <table border="2" bgcolor="#efefef">
            <tr>
                <th width="150"></th>
                <th>Withdrawl</th>
                <th>Credit</th>
                <th width="150" bgcolor="#cccccc">Balance</th>
            </tr>
            <tr>
                <th>January</th>
                <td>250.00</td>
                <td>660.50</td>
                <td bgcolor="cccccc">410.50</td>
            </tr>
            <tr>
                <th>February</th>
                <td>135/55</td>
                <td>895.20</td>
                <td bgcolor="cccccc">1170.15</td>
            </tr>
        </table><br>
    <h1 id="forms">Forms</h1>
    <h3>Basic Form Structure</h3>
        <form action="www.example.com/subsribe.php" method="get">
            <p>< form action="www.example.com/subscribe.php"method="get"</p>
        </form>
        <h3>Text Input <... type="text" ></h3>
        <form action="http://www.example.com/login.php">
            <p>Username:
                <input type="text" name="username" size="15" maxlength="30" /></p>
        </form>
        <h3>Password Input</h3>
        <form action="http://www.example.com/login.php">
        <p>Username:
            <input type="text" name="username" size="15" maxlength=" 30" /></p>
            <p>Password:
                <input type="password" name="password" size="15" maxlength="30" /></p>
            </form>
        <h3>Text Area < textarea cols="#" rows="#"></h3>
        <form action="http://www.example.com/comments.php">
            <p>What did you think of this gig?</p>
            <textarea name="comments" cols="20" rows="4">Enter your comments...</textarea>
        </form>
        <h3>Radio Button <... type="radio"</h3>
        <form action="http://www.example.com/profile.php">
            <p>Please select your favorite genre:
                <br>
                <input type="radio" name="genre" value="rock" checked="checked" />Rock
                <input type="radio" name="genre" value="pop" />Pop
                <input type="radio" name="genre" value="jazz" />Jazz
            </p>
        </form>
        <h3>Checkbox <... type="checkbox" ></h3>
        <form action="http://www.example.com/profile.php">
            <p>Please select your favorite service(s)
                <br>
                <input type="checkbox" name="service" value="itunes" checked="unchecked" /> iTunes
                <input type="checkbox" name="service" value="Spotify" checked="unchecked" /> Spotify
                <input type="checkbox" name="service" value="lastfm" checked="unchecked" /> Last.fm
            </p>
        </form>
        <h3>Drop Down List box < option value="..." /option></h3>
        <form action="http://www.example.com/profile.php">
            <p>What service do you listen to music on?</p>
            <select name="devices">
                <option value="ipod">iPod</option>
                <option value="radio">Radio</option>
                <option value="computer">Computer</option>
            </select>
        </form>
        <h3>Multiple Select Box <... multiple ></h3>
        <form action="http://www.example.com/profile.php">
            <p>Do you play any of the following instruments? (You can select more than one option by holding down control on a PC or command key on a Mac while selection different options.)</p>
            <select name="instruments" size="4" multiple="multiple">
                <option value="guitar" selected="selected">Guitar</option>
                <option value="drums">Drums</option>
                <option value="keyboard" selected="selected">Keyboard</option>
                <option value="bass" value="bass">Bass</option>
            </select>
        </form>
        <h3>File Input Box <... type="file"</h3>
        <form action="http://www.example.com/upload.php" method="post">
            <p>Upload your song in MP3 format:</p>
            <input type="file" name="user-song"><br>
            <input type="submit" value="upload">
        </form>
        <h3>Submit Button <... type="submit"</h3>
        <form action="http://www.example.com/subscribe.php">
            <p>Subscribe to our email list:</p>
            <input type="text" name="email">
            <input type="submit" name="subscribe" value="subscribed">
        </form>
        <h3>Image Button < type="image" src="images/location" size ></h3>
        <form action="http://www.example.com/subscribe.php">
            <p>Subscribe to our email list:</p>
            <input type="text" name="email">
            <input type="image" src="images/subscribe.jpg" width="100" height="20">
        </form>
        <h3>Button and Hidden Controls <... type="hidden"</h3>
        <form action="http:www.example.com/add.php">
            <button><img src="Images/Up-Arrow.jpg" alt="add" width="10" height="10">upload</button>
            <input type="hidden" name="bookmark" value="lyrics">
        </form>
        <h3>Labeling Form Controls</h3>
        <label>Age:<input type="text" name="age"></label>
        <br>
        Gender:
        <input id="female" type="radio" name="gender" value="f">
        <label for="female">Female</label>
        <input id="male" type="radio" name="gender" value="m">
        <label for="male">Male</label>
        <h3>Grouping Form Elements</h3>
        <FIELDSET>
            <legend>Contact details</legend>
            <label>Email:<br>
            <input type="text" name="email"></label><br>
            <label>Mobile:<br>
            <input type="text" name="mobile"></label><br>
            <label>Telephone:<br>
            <input type="text" name="telephone"></label>
        </FIELDSET>
        <h3>HTML5 Form Validation < required="required" ></h3>
        <form action="http://www.example.com/login/" method="post">
            <lable for="username">Username</lable><br>
            <input type="text" name="username" required="required"><br>
            <lable for="password">Password</lable><br>
            <input type="password" name="password" required="required"><br>
            <input type="submit" value="submit">
        </form>
        <h3>HTML5: Date Input</h3>
        <form action="http://www.example.com/bookings/" method="post">
            <label for="depart">Departure date:</label>
            <input type="date" name="depart">
            <input type="submit" name="submit">
        </form>
<a href="#top">Top</a>
<p id="verybottom"></p>
</body>
</html>