Skip to content

Latest commit

 

History

History
115 lines (94 loc) · 3.3 KB

5-html.md

File metadata and controls

115 lines (94 loc) · 3.3 KB

HTML - HyperText Markup Language

  • Defines the structure of a web page;
  • Consists of elements identified by tags;
  • "Tells" the browser how to display the content;

Structure

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>
  • <!DOCTYPE html>: declares that this document is an HTML5 document;
  • <html>: root element of an HTML page;
  • <head>: contains meta information about the document;
    • <title>: specifies a title for the document;
  • <body>: contains the visible page content;
  • <h1>: defines a large heading;
  • <p>: defines a paragraph.

Elements

  • Consists of three parts:
    • Opening tag: <tagname>;
    • Content: content;
    • Closing tag: </tagname>;
  • Some elements do not have a closing tag or content, they are called empty elements;
  • Elements can have attributes to add additional information;
    • Attributes always have a name and a value;
    • They are placed inside the opening tag;

Some Important Elements

  • <!-- comment -->;
  • <a href="url">link text</a>;
  • <br> - line break;
  • <button>Click Me!</button>;
  • <div> - division;
  • <form action="url" action="GET"> Content </form>;
  • <h1> to <h6> - headings;
  • <hr> - horizontal rule;
  • <img src="url" alt="alternative text">;
  • <input type="text" name="firstname"> - input field; has many types for different input options;
  • <label for="name">First name:</label> - label for an input field;
  • <nav> - navigation bar;
  • <li> - list item;
  • <ol> - ordered list;
  • <p> - paragraph;
  • <span> - span;
  • <select> - drop-down list;
    • <option value="volvo">Volvo</option>;
  • <table> - table;
    • <tr> - table row;
    • <th> - table header;
    • <td> - table data;
  • <title> - title of the document;
  • <ul> - unordered list.

Handlebars

  • Logic-less templating language;
  • Uses a template and an input object to generate HTML;
  • A HBS expression has the following syntax: {{ content }};

Helpers

  • {{#if}} - conditional;
    • renders the block if the value is truthy;
    • can be negated with {{#unless}};
    • can be nested;
    • can be combined with {{else}}:
{{#if condition}}
  <p>Condition is true</p>
{{else}}
  <p>Condition is false</p>
{{/if}}

  • {{#unless}} - conditional;

    • renders the block if the value is falsy;
    • opposite of {{#if}};

  • {{#each}} - iterates over an array;

    • this - current item;
    • @index - current index;
    • @key - current key;
    • @first - true if first item;
    • @last - true if last item;

  • {{#with}} - conditional;

    • renders the block if the value is truthy;
    • same as {{#if}} but sets the context to the value - this is the value;
    • can be combined with {{else}}:

To change to the context of the previous block, use ../, as in the file system; e.g. {{../name}}.