Lesson5-index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Links, Emmet, Forms</title>

    <!--

        FOLDER STRUCTURE

        lesson-5
            ∟ css
                ∟ style.css
            ∟ index.html
            ∟ form.html

    -->

    <!-- External CSS file -->
    <link rel="stylesheet" href="/css/style.css">

    <style>
        /* Your internal CSS code */
        /* This internal CSS can be cut and paste into the external file style.css */
    </style>

</head>
<body>

<!-- Navigation -->

    <!-- 4 TYPES OF LINKS

        1 - The Anchor Link
        This link will scroll down to the element with the relevant ID name
        Only ID can by used for Anchor links, not classes
        This link will scroll to the element with the ID name
        <a href="#some-id">Item1</a>

        <div id="some-id"></div>

        2 - The Internal Link, using relative path to the file
        This link is used for your other webpages in the same project folder.
        This will be used in HOMEWORK.
        <a href="/folder/about.html">About</a>

        3 - The External Link
        This is a link to the external webpage.
        <a href="https://www.somepage.com/">Some web page</a>

        4 - The Internal/External Link with Anchor
        This is a combination of examples above. The link to another page with scrolling to element with ID name.
        <a href="https://www.somepage.com/#some-id"> Some Page</a> -->


<!-- EMMET examples -->
<!-- https://docs.emmet.io/abbreviations/syntax/ -->
<!-- To use Emmet simply start to typing the emmet shortcuts (see the examples bellow) and then hit the enter. -->

    <!-- Create div with ID named "example". -->
    div#example
    <div id="example"></div>

    <!-- Create div with class named "book". -->
    div.book
    <div class="book"></div>

    <!-- Create paragraph with class named "author". -->
    p.author
    <p class="author"></p>

    <!-- Create paragraph with inserted text "dummy text". -->
    p{dummy text}
    <p>dummy text</p>

    <!-- Create parent "ul" with five children "li", and child "a" with text "Item". -->
    ul>li*5>a{Item}
    <ul>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
    </ul>

    <!-- Create parent "ul" with two children "li", and child "a" with text "Item" and number starting from 1. -->
    ul>li*2>a{Item$}

    <ul>
        <li><a href="">Item1</a></li>
        <li><a href="">Item2</a></li>
    </ul>

    <!-- Create a div with ID named "navigation" and parent "ul" with two children "li", and child "a" with text "Item" and number starting from 1. -->
    div#navigation>ul>li*2>a{Item$}
    <div id="navigation">
        <ul>
            <li><a href="">Item1</a></li>
            <li><a href="">Item2</a></li>
        </ul>
    </div>

<!-- Forms -->
    <form>

        <!-- To tight label with input filed use same names in the "for" and "name" attributes. -->
        <label for="fname"> First name</label><br>
        <input type="text" name="fname">

        <br>

        <label for="email">Your email address</label><br>
        <input type="email" name="email">

        <br>

        <label for="passengers">Passengers</label><br>
        <input type="number" name="passengers">

        <br>

        <label for="sdate">Start of your holiday</label><br>
        <input type="date" name="sdate">

        <br>

        <input type="submit" value="Subscribe">
    </form>
</body>
</html>