Web UI

Web UI

1. HTML5 document structure

   • All HTML documents have a required structure that includes the following declaration and tags: doctype, html, head, and body.
   • <!DOCTYPE>
     • The&nbsp;doctype&nbsp;declaration is used to instruct web browsers which version of HTML is being used and is placed at the very beginning of the HTML document.
   • <html lang="en">. . .</html>
     • The html root node
     • <head>...</head>
       • The&nbsp;head&nbsp;of the document is used to outline any meta data, the document&nbsp;title, and links to any external files.&nbsp;&nbsp;
       • <meta charset="utf-8">. . . </meta>
       • <title>...</title>
         • Here is the tlitle of the website
     • <body>. . .</body>
       • All of the content visible within the web page will fall within the&nbsp;body&nbsp;tags.

2. CSS basics

   • Selectors
     • A selector determines exactly which element, or elements, the corresponding styles will be applied to. Selectors can include a combination of different IDs, classes, types, and other attributes – all depending on how specific you wish to be. Selectors can be identified as everything that comes before the first curly brace,&nbsp;{.
     • Type selectors
       • HTML: &lt;p&gt;...&lt;/p&gt; CSS: p { ... }
       • Simply enough, elements without any necessary attributes are targeted to apply styles. Type selectors are preferred whenever possible as they require less code and are easy to manage.
     • ID selectors
       • ID selectors are similar to class selectors however they are used to target only one unique element at a time. Instead of using the class attribute, IDs naturally use the ID attribute. In place of a period, as with classes, IDs are denoted by identifying the ID with a leading hash sign. IDs are only allowed to be used once per page and should ideally be reserved for significant elements.
       • HTML: &lt;div id="shayhowe"&gt;...&lt;/div&gt; CSS: #shayhowe { ... }
     • class selectors
       • HTML: &lt;div class="awesome"&gt;...&lt;/div&gt; CSS: .awesome { ... }
       • Class selectors allow you to apply the same style to an array of elements by giving them all the same class attribute. Classes are denoted in CSS by identifying the class with a leading period. It is permissible to use the same class attribute on multiple elements on a page.
   • Referencing CSS
     • External CSS Stylesheets
       • &lt;link rel="stylesheet" href="file.css"&gt; goes in the the head HTML tag
     • Internal CSS
       • &lt;style type="text/css"&gt; p { color: #f60; font-size: 16px; } &lt;/style&gt;
     • In-line CSS
       • &lt;p style="color: #f60; font-size: 16px;"&gt;Lorem ipsum dolor sit amet...&lt;/p&gt;

3. Javascript