HTML/CSS

From The Travis van der Font Wiki
Jump to: navigation, search

To be honest, I'm still confused which parts should be in HTML or CSS...

HTML

CSS

HTML Elements (Nodes)

HTML Attributes

References / Cheat Sheets

Resources

Complete Node Architect

<!DOCTYPE html>
<html
  lang      = "en-US"
  prefix    = "og: http://ogp.me/ns#"
  itemscope
  itemtype  = "http://schema.org/Article"
  class     = "no-js logged-in client-root"
  >
    <head>
        <title>What is rel=dns-prefetch?</title>
        <meta charset="UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <meta name="google-site-verification"              content="lp3WTkoNRzWi8fIRV8tYQFXagYx6leGaOCWpVsnOe7I" />
        <meta name="HandheldFriendly"                      content="True">
        <meta name="MobileOptimized"                       content="320">
        <meta name="description"                           content="Something 225 character max description goes here."/>
        <meta name="keywords"                              content="torrent sites, vpn review, vpn service, copyright, filesharing, piracy, pirate bay, news"/>
        <meta name="robots"                                content="noodp"/>
        <meta name="robots"                                content="noydir"/>
        <meta name="robots"                                content="noimageindex, noarchive"/>
        <meta name="viewport"                              content="width=device-width, initial-scale=1"/>
        <meta name="twitter:card"                          content="summary_large_image" />
        <meta name="twitter:description"                   content="At CCN we provide you with the latest Bitcoin news, including other cryptocurrencies like Ethereum, NEO, Litecoin and ICOs." />
        <meta name="twitter:title"                         content="CCN: Bitcoin, Ethereum, ICO, Blockchain &amp; Cryptocurrency News" />
        <meta name="twitter:site"                          content="@Cryptocoinsnsews" />
        <meta name="twitter:image"                         content="https://www.falcon.io/wp-content/uploads/2017/03/FalconIO-Home.jpg" />
        <meta name="twitter:creator"                       content="@FalconIO" />
        <meta name="mobile-web-app-capable"                content="yes">
        <meta name="apple-mobile-web-app-capable"          content="yes">
        <meta name="apple-mobile-web-app-title"            content="TorrentFreak">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="msapplication-config"                  content="/browserconfig.xml">
        <meta name="msapplication-TileImage"               content="/images/favicon-270x270.png"/>
        <meta name="theme-color"                           content="#ffffff"/>

        <meta property="fb:pages"        content="221571161239992"/>
        <meta property="og:locale"       content="en_US"/>
        <meta property="og:type"         content="website"/>
        <meta property="og:title"        content="CCN: Bitcoin, Ethereum, ICO, Blockchain &amp; Cryptocurrency News" />
        <meta property="og:description"  content="At CCN we provide you with the latest Bitcoin news, including other cryptocurrencies like Ethereum, NEO, Litecoin and ICOs." />
        <meta property="og:url"          content="https://www.ccn.com/" />
        <meta property="og:site_name"    content="CCN" />

        <meta property="al:ios:app_name"     content="Instagram" />
        <meta property="al:ios:app_store_id" content="389801252" />
        <meta property="al:ios:url"          content="instagram://user?username=travisfotoslux" />
        <meta property="al:android:app_name" content="Instagram" />
        <meta property="al:android:package"  content="com.instagram.android" />
        <meta property="al:android:url"      content="https://www.instagram.com/_u/travisfotoslux/" />

        <meta itemprop="name headline" content="What is rel=dns-prefetch?"/>
        <meta itemprop="description"   content="Something 225 character max description goes here."/>
        <meta itemprop="image"         content="https://varvy.com/rel/images/rel-dns-prefetch.png"/>

        <link rel="preconnect"       href="https://graph.instagram.com" crossorigin>
        <link rel="dns-prefetch"     href="//cdn.varvy.com">
        <link rel="dns-prefetch"     href="//code.jquery.com">
        <link rel="dns-prefetch"     href="//rum-static.pingdom.net"/>
        <link rel="dns-prefetch"     href="//s.w.org"/>
        <link rel="shortlink"        href="https://www.falcon.io/"/>
        <link rel="canonical"        href="https://varvy.com/rel/dns-prefetch.html"/>
        <link rel="next"             href="https://www.ccn.com/page/2/"/>
        <link rel="publisher"        href="http://torrentfreak" />
        <link rel="icon"             href="/images/favicon-16x16.png"     sizes="16x16"   type="image/png"/>
        <link rel="icon"             href="/images/favicon-32x32.png"     sizes="32x32"   type="image/png"/>
        <link rel="icon"             href="/images/favicon-192x192.png"   sizes="192x192" type="image/png"/>
        <link rel="apple-touch-icon" href="/wp-content/themes/torrentfreakredux/assets/img/icons/120.png" sizes="120x120" >
        <link rel="apple-touch-icon" href="/wp-content/themes/torrentfreakredux/assets/img/icons/152.png" sizes="152x152" >
        <link rel="apple-touch-icon" href="/wp-content/themes/torrentfreakredux/assets/img/icons/167.png" sizes="167x167" >
        <link rel="apple-touch-icon" href="/images/apple-touch-icon.png"                                  sizes="180x180" />
        <link rel="apple-touch-icon" href="/wp-content/themes/torrentfreakredux/assets/img/icons/120.png">
        <link rel="apple-touch-icon-precomposed" href="/images/apple-touch-favicon-180x180.png"/>
        <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/static/images/ico/apple-touch-icon-76x76-precomposed.png/932e4d9af891.png">
        <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/static/images/ico/apple-touch-icon-120x120-precomposed.png/004705c9353f.png">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/static/images/ico/apple-touch-icon-152x152-precomposed.png/82467bc9bcce.png">
        <link rel="apple-touch-icon-precomposed" sizes="167x167" href="/static/images/ico/apple-touch-icon-167x167-precomposed.png/515cb4eeeeee.png">
        <link rel="apple-touch-icon-precomposed" sizes="180x180" href="/static/images/ico/apple-touch-icon-180x180-precomposed.png/94fd767f257b.png">
        <link rel="manifest"         href="/content/manifest.json"/>
        <link rel="mask-icon"        href="/images/safari-pinned-tab.svg" color="#5bbad5"/>
        <link rel="shortcut icon"    href="/images/favicon.ico">
        <link rel="pingback" href="/xmlrpc.php" />

        <link rel="alternate" href="https://www.instagram.com/travisfotoslux/?hl=de" hreflang="de" />
        <link rel="alternate" href="https://www.instagram.com/travisfotoslux/?hl=fr" hreflang="fr" />

        <link
             rel   = "stylesheet"
             type  = "text/css"
             id    = "font-awesome-css"
             href  = "/css/font-awesome.min-1.0.0.css"
             media = "all"
       />
    </head>

    <body>

        <header
          id    = "masthead"
          role  = "banner"
          class = "banner">
            <nav role="navigation" class="nav-primary">
                <section class="middle">
                    <div>
                        <h1 class="title">Big Title here</h1>
                    </div>
                </section>
            </nav>
        </header>

        <aside role="contentinfo" class="sidebar">
            <noscript>
                <a
                  href  = "https://www.privateinternetaccess.com/pages/buy-vpn/TF001"
                  title = "Private Internet Access"
                  >
                    <img src="/images/small-camo.png" alt="PIA"/>
                </a>
            </noscript>
        </aside>

        <main class="main d-flex flex-column">
            <article class="post-134739">
                <div
               class = "entry-content"
               role  = "banner"
               style = "padding-bottom:52.5%;">
                    <table class="form-table">
                        <tr>
                            <th>
                                <label for="add_newsletter">Subscribed</label>
                            </th>
                            <td>
                                <input
                              type  = "text"
                              name  = "add_newsletter"
                              id    = "add_newsletter"
                              value = "abc123"
                              class = "regular-text"
                              />
                           </td>
                        </tr>
                    </table>
                    <a
                  href        = "/link/page.html#hashtag"
                  rel         = "bookmark"
                  title       = "Link Page Title here"
                  aria-hidden = "true"
                  class       = "links"
                  >
                        <span>link text here</span>
                    </a>
                    
                    <form
                      id           = "example_form"
                      name         = "example_form"
                      autocomplete = "off"
                      >

                    <input name="password" type="password" />
                    <input name="another_field" autocomplete="on" />
                    <input
                      type           = "text"
                      id             = "search"
                      autocomplete   = "off"
                      autocorrect    = "off"
                      autocapitalize = "none"
                      spellcheck     = "false"
                      />



                        <select
                      name      = "carlist"
                      form      = "example_form"
                      size      = "3"
                      style     = "width:100%;"
                      disabled
                      autofocus
                      multiple
                      required
                      >
                            <option value="volvo">Volvo</option>
                            <option value="saab" >Saab</option>
                            <option value="opel" selected>Opel</option>
                            <option value="audi">Audi</option>
                        </select>
                    </form>
                </div>
            </article>

            <div id="map">
                <iframe
                 class      = "gmap"
                 rameborder = "0"
                 height     = "100%"
                 width      = "100%"
                 src        = "https://www.google.com/maps/embed/v1/place?key=abc&q=test"
                ></iframe>
            </div>

        </main>

        <footer class="content-info"></footer>
        <script
        type = "text/javascript"
        src  = "/javascript_file.js"
        async
        ></script>
    </body>
</html>