html-starter/index.html at master · lavanyack5/html-starter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!doctype html>
<html lang="">
    <head>
        <!-- This tells the browser that we're using the most modern character encoding.
        This is especially important for special characters like ® or å. -->
        <meta charset="utf-8">

        <!-- This is your title tag. Shows up in the browser tab, and search results.
        Often, for a multi-page site, we'd do something like "Name of Site | Name of Page" -->
        <title></title>

        <!-- This meta tag is what Google uses in the search results. Describe what the page is so people will click! -->
        <meta name="description" content="">

        <!-- This tells the browser not to zoom, and that our content should be the same width as the browser window.
        CRUCIAL for responsive design. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Here's a few icons. There's more you can do, but these will cover you in most cases.
        https://en.wikipedia.org/wiki/Favicon
        There are a lot of online generators to help you, here's two: http://www.favicon.cc, https://realfavicongenerator.net/
        Start with a 180 x 180 png for the apple, but note that it will show up MUCH smaller as a favicon. Your smallest file used by most browsers is an .ico file, which Photoshop can't create directly, which is why you need a generator.
        If you decide to generate all icons, start with a 228px x 228px file.
        -->
        <link rel="icon" type="image/x-icon" href="favicon.ico" />
        <link rel="apple-touch-icon" href="apple-touch-icon.png">

        <!-- Our first stylesheet normalizes differences between browsers. It's from https://necolas.github.io/normalize.css/ -->
        <!-- You can get more information on this here: https://bitsofco.de/a-look-at-css-resets-in-2018/ -->
        <link rel="stylesheet" href="css/normalize.min.css">
        <!-- This is a basic print stylesheet. It has a media query in it, so it will only be applied when people hit print.  -->
        <link rel="stylesheet" href="css/print.css">
        <!-- Here's our custom stylesheet. Open it up to add styles to your page. -->
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>

        <h1>This is HTML5 Boilerplate.</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat nam at lectus urna. Ornare lectus sit amet est placerat in egestas erat. Arcu risus quis varius quam quisque id diam.
        </p>

        <!-- This pulls jQuery from Google's Content Delivery Network -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <!-- This code checks for the existence of the jQuery object, if it doesn't exist, that means the line above failed,
        Google's CDN is down. So, let's write a tag that pulls in our local jQuery instead. -->
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
        <!-- Here's our own custom javascript file. We load jQuery first, so we can use the jQuery library in our code -->
        <script src="js/main.js"></script>
    </body>
</html>