CS1115/CS5002

Web Development 1

Dr Derek Bridge

School of Computer Science & Information Technology

University College Cork

Running example

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Party Party Party - Cocktails - Mojitos</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        
        <header>
            <h1>Party-Party-Party</h1>
            <p>The site for all your party needs</p>
        </header>
        
        <nav>
            <ul>
                <li>Cocktails
                    <ul>
                        <li><a href="cubalibre.html" lang="es">Cuba Libre</a></li>
                        <li><a href="" lang="es">Mojitos</a></li>
                        <li><a href="screwdriver.html">Screwdriver</a></li>
                        <li><a href="zombie.html">Zombie</a></li>
                    </ul>
                </li>
                <li>Finger Food
                    <ul>
                        <li><a href="guacamole.html" lang="es">Guacamole</a></li>
                        <li><a href="pizzafritata.html" lang="it">Pizza Fritata</a></li>
                        <li><a href="samosas.html" lang="pa">Samosas</a></li>
                    </ul>
                </li>
                <li>Party Games
                    <ul>
                        <li><a href="spinthebottle.html">Spin-the-Bottle</a></li>
                        <li><a href="twister.html">Twister</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <main>
        
            <h1>Mojitos</h1>
        
            <p>
                 To bring the spirit of the Caribbean to your party, why not serve 
                 <i class="cocktail" lang="es">Mojitos</i>? Sweet but cool, they're 
                 sure to get you in touch with your Latin side. 
            </p>

            <figure>
                <img src="mojito.jpg" title="A mojito"
                     alt="A mojito is packed with mint leaves and served in a long glass." />
                <figcaption>
                    <a href="https://www.flickr.com/photos/preppybyday/5084101811/">Mojito</a>
                    <span class="attribution">
                        by <a href="https://www.flickr.com/photos/preppybyday/">The Culinary Geek</a>
                        (licenced under <a href="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>)
                    </span>
                </figcaption>
            </figure>

            <section id="ingredients">
        
                <h1>Ingredients</h1>
            
                <ul>
                    <li>2 oz. <em>white</em> rum</li>
                    <li>8 <em>fresh</em> mint leaves</li>
                    <li>4 tsp. sugar</li>
                    <li>ice</li>
                    <li>&frac12; lime</li>
                    <li>7 oz. club soda</li>
                </ul>
            
            </section>

            <section id="instructions">
        
                <h1>Instructions</h1>
            
                <p>
                    For the best <i class="cocktail" lang="es">Mojitos</i> this side 
                    of Waterford,
                </p>
                <ol>
                    <li>Gently <b>crush</b> the mint leaves in a cool tall glass;</li>
                    <li><b>squeeze</b> the lime over the leaves;</li>
                    <li><b>sprinkle</b> the sugar into the mix;</li>
                    <li><b>fill</b> with ice;</li>
                    <li><b>toss in</b> the rum;</li>
                    <li><b>trickle in</b> in the club soda; and finally</li>
                    <li><b>stir</b> lightly.</li>
                </ol>
            
            </section>
        
            <p id="warning">
                <strong>Enjoy alcohol sensibly.</strong>
            </p>
                    
        </main>

        <aside>
        
            <h1>Did you know&hellip;?</h1>

            <p>
                <i class="cocktail" lang="es">Mojito</i> is pronounced 
                <i>Moh-HEE-toh</i>.
            </p>

            <p>
                <i class="cocktail" lang="es">Mojitos</i> should be served in a 
                Collins glass.
            </p>

            <p>
                <i class="cocktail" lang="es">Mojitos</i> were a favourite with author
                <a href="http://en.wikipedia.org/wiki/Ernest_Hemingway">Ernest Hemingway</a>. 
                It is said that he enjoyed them at their birthplace, 
                <i lang="es">La Bodeguita del Medio</i> in Havana, Cuba.
            </p>
            
        </aside>
        
        <footer>
            <p>
                <small>
                    &copy; Derek Bridge. All rights reserved.
                </small>
            </p>
        </footer>

    </body>
</html>

HTML5 elements

Elements for page structure

header
A group of introductory elements
nav
A group of page or site navigation links (a navigation menu)
main
The main content of the page (only one per page; never nested within the other elements on this slide)
aside
A group of content that is tangentially related to the page or surrounding context (e.g. an advertising sidebar)
footer
Information about the page or section or article (author, copyright, etc.)

Sections and articles

Class exercise: section or article?

Question: What happens if you make the wrong choice?

The div element

Headings, again

HTML5: Text-level elements

Class exercise: em, strong, i or b?

Class exercise

What's the difference between these two?

What tag is used in the second?

HTML5: big and small

The span element

Does it matter?