Sunday, January 20, 2013

Rough notes on studying up for HTML5 interview...

  • <link rel="stylesheet" type="text/css" href="styles.css" media="screen"> is a typical stylesheet tag, but one may also embed the stylesheet tag in HTML like so:
    <style type="text/css" media="all">
       p {
          margin-left: 20px;
       }
    </style>
  • http://validator.nu/ will crawl and validate the quality of your HTML.
  • Does HTML5 smell? (smell has a different meaning for ASP.NET and Java peeps)
  • article/section/header/footer (semantic tags instead of div for search engine spiders) http://channel9.msdn.com/Series/HTML5-CSS3-Fundamentals-Development-for-Absolute-Beginners
  • Type "Character Map" at the start menu in Windows 7 to get the character map tool:

    Bob Tabor encourages just using the real special characters in lieu of encodings.
  • <!DOCTYPE html> is the way to declare an HTML5 document and <html lang="en"> is a good line to immediately follow and will specify English. Note that <!DOCTYPE html> is not <!DOCTYPE html /> as the end slash syntax is no longer encouraged. HTML5 is not XHTML. HTML does not need to double as XML.
  • Typical structure:
    <!DOCTYPE html>
    <html lang="en">
       <head>
          <meta charset="utf-8">
          <title>Whatever</title>
       </head>
       <body>
          <header>
             Content
          </header>
          <section>
             <article>
                Content
             </article>
             <article>
                Content
             </article>   
          </section>
          <footer>
             Content
          </footer>
       </body>
    </html>
  • Associate header tags:
    <hgroup>
       <h1>Big Header</h1>
       <h2>Subheader</h2>
    </hgroup>
  • Wrap a menu in a nav tab:
    <nav>
       <ul>
          <li>Imagine a link</li>
       </ul>
    </nav>
  • A figure tag associates an caption with something else, say for example an image...
    <figure>
       <img src="whatever.gif" alt="show me in absence of an image">
       <figcaption>
          This will hug the base of the image.
       </figcaption>
    </figure>
    ...however, the img tag above could be replaced with a <pre><code></code></pre> blob too
  • <small>makes small text</small>
  • <aside></aside> is yet another tag which may be styled like a div. This one is for, well, asides. We are going to more creative lengths not to use "div" I guess.
  • overflow: hidden; ...if the item styles spills into another thing, the spillover will be "clipped"
  • list-type-style: none; ...hides bullets or numbers on a list
  • text-transform: uppercase; ...does what you might think it does
  • box-shadow: 3px 3px 5px 1px #CCCCCC; ...here the last of the five values is clearly the color while the first two items are the amount of shadow below and to the right (horizontal first, use negative numbers to go up and to the left), the third is the amount of blur, and the fourth seems to be the amount of solid shadow before a blurred edge starts
  • box-shadow: inset 3px 3px 5px 1px #CCCCCC; ...here inset makes the shadow inside the box
  • http://www.w3.org/TR/html5-author/ is the spec for HTML5.
  • http://www.w3.org/TR/html5-author/global-attributes.html has a list of attributes that are legitimate for any tag and also a list of event handlers.
  • <address></address> is for keeping contact info stuff
  • While the section and article tags behave basically like div tags but have different semantic meanings, the same is not true for some of the tags which wrap snippets of text as many of the tags, while given new semantic meanings, do NOT mundanely behave as span tags which provide nothing new without being styled, for example this html...
    <p><blockquote cite="http://www.example.com/">This isn't a real quote. It is
          an example.</blockquote>
    <cite><a href="http://www.example.com/">fake website</a></cite></p>
    <p><b>important</b> <mark>marked</mark> <em>emphasis</em> <i>offset
          mood</i> <u>unarticulate</u> <s>old, no longer valid info</s> <del>for a
          strikethrough</del></p>
    <pre>
    <code class="language-pascal">var i : Integer;
    begin
       i : 1;
    end.</code>
    </pre>
    makes this...
  • <q></q> is for quoted text per http://www.w3.org/TR/html-markup/q.html and some of the CSS that might go with it is:
    q {
       display: inline;
    }
    q:before {
       content: open-quote;
    }
    q:after {
       content: close-quote;
    }
  • <hr> still does what it used to but is now considered to be of separating themes
  • </dl>, </dt>, and </dd> can optionally be left off and if you are wondering what </dt> and </dd> are...
    <dl>
       <dt>deprecated</dt>
       <dd>to express earnest disapproval of</dd>
       <dt>depreciate</dt>
       <dd>to lessen the value or price of</dd>
    </dl>
  • Remember:
    • <input type="reset" value="reset values">
    • <button type="submit"></button>
    • <button type="reset"></button>
    • <button type="button"></button>
  • Use fieldsets and legends to put a box around a set of controls with a header as following, noting that you must immediately follow the open fieldset tag with the legend tag:
    <fieldset>
       <legend>This is part of a form</legend>
       <label for="foo"><span>Foo</span><input type="radio"
             name="whatever" value="foo"></label>
       <label for="bar"><span>Bar</span><input type="radio"
             name="whatever" value="bar"></label>
       <label for="baz"><span>Baz</span><input type="radio"
             name="whatever" value="baz"></label>
       <label for="qux"><span>Qux</span><input type="radio"
             name="whatever" value="qux"></label>
    </fieldset>
  • New attributes to decorate tags inline include required (which will force a validation both of a not-empty variety and also of a type-specific variety while returning an error message in the case of a failure) and autofocus (which will make the field the place the cursor starts when the form loads) and pattern which allows for regular expressions like this one which validates a five or nine digit zip code: pattern="^\d{5}(-\d{4})?$" ...there is also: placeholder="meh" which will prepopulate some "grey" text which will disappear when a user clicks in the field to really type something
  • there are some new types:
    • email
    • tel (telephone numbers)
    • url
    • date (or datetime, datetime-local, month, time, week)
    • number (step=5 is an example of an inline parameter for denoting what an accepted value must be divisble by)
    • range (step=5 is an example of an inline parameter for denoting what an accepted value must be divisble by, while min and max denote the range itself with zero and one hundred being the default values respectively, and value denoting the place on the slider, and yes, this control makes a slider)
    • color
  • This will create a text box which you may type anything into, but which comes with some canned selections in the name of being helpful not being strict in scope:
    <input type="text" list="somelist">
    <datalist id="somelist">
       <option label="foo" value="foo">
       <option label="bar" value="bar">
       <option label="baz" value="baz">
       <option label="qux" value="qux">
    </datalist>
  • Some of the new CSS3 stuff:
    @import url('http://www.example.com/main.css');
    p:first-letter {
       font-size: 3em;
    }
    article:before {
       content: 'hello world';
    }
    p:first-of-type {
       margin-left: 42px;
    }
    li:first-child {
       margin-left: 42px;
    }
    li:last-child {
       margin-left: 42px;
    }
    li:nth-of-type(3) {
       margin-left: 42px:
    }
    span[title] {
       color: black;
       /* find a parameter in the span tag called "title" */
    }
    span[title="first idea"] {
       text-decoration: line-through;
       /*match parameter with exact value */
    }
    a[href^="email"] {
       text-decoration: overline;
       /*match beginning of parameter value */
    }
    span[title$="marker"] {
       margin-left: 42px;
       /* match end of parameter value */
    }
    article span {
       /* any span within any article */
    }
    article > span {
       /* any span that is an immediate child of any article */
    }
    article + span {
       /* any span that has an article immediately before it */
    }
    article ~ span {
       /* any span that has an article somewhere before it */
    }
    .whatever {
       font-weight: 100;
       /* normal font weight, the lightest of the 100 to 900 scale */
    }
    #whatever {
       font-weight: 900;
       /* heavy font weight, the darkest of the 100 to 900 scale */
    }
  • vertical-align CSS options include:
    1. super
    2. sub
    3. middle
    4. top
    5. baseline
    6. text-top
    7. text-bottom
  • The following div is styled like so:
    background-color: rgb(100,0,13);
    background-image: url('http://placekitten.com.s3.amazonaws.com/homepage-
          samples/200/286.jpg');
    background-repeat: no-repeat;
    background-position: right bottom;
    border: 1px solid #FFFFFF;
    height: 400px;
    width: 400px;
  • In a table, border-collaspe: collaspe; will make two adjacent 1 pixel borders display as a 1 pixel wide line while border-collaspe: separate; will make a 2 pixel wide line in the same situation.
  • cellspacing="0" still has to be inline in a table. This is never gonna change.

 
 

Addendum 1/4/2017: list-style: none; and not list-type-style: none; gets rid of bullets. I hope you weren't pulling your hair out over this. ;)

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)