Chapter 21: Navigation Bars

Basic Navigation Bar

Navigation bars are essentially a list of links, so the ul and li elements are used to encase navigation links.

 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>

HTML5 Navigation Bar

To make a navigation bar using the HTML5 nav element, encase the links within the nav tag.

 <a href="#">Home</a>
 <a href="#">About</a>
 <a href="#">Contact</a>

Chapter 18: Forms

accept-charsetSpecifies the character encodings that are to be used for the form submission.
actionSpecifies where to send the form-data when a form is submitted.
autocompleteSpecifies whether a form should have autocomplete on or off.
enctypeSpecifies how the form-data should be encoded when submitting it to the server (only for
methodSpecifies the HTTP method to use when sending form-data (POST or GET).
nameSpecifies the name of a form.
novalidateSpecifies that the form should not be validated when submitted.
targetSpecifies where to display the response that is received after submitting the form.

Read More

Chapter 17: Input Control Elements

classIndicates the Class of the input
idndicates the ID of the input
typeIdentifies the type of input control to display. Acceptable values are hidden, text, tel, url, email,
password, date, time, number, range, color, checkbox, radio, file, submit, image, reset, and button.
Defaults to text if not specified, if the value is invalid, or if the browser does not support the type
nameIndicates the name of the input
disabledBoolean value that indicates the input should be disabled. Disabled controls cannot be edited, are
not sent on form submission, and cannot receive focus.
checkedWhen the value of the type attribute is radio or checkbox, the presence of this Boolean attribute
indicates that the control is selected by default; otherwise it is ignored.
multipleHTML5 Indicates multiple files or values can be passed (Applies only to file and email type inputs )
placeholderHTML5 A hint to the user of what can be entered in the control . The placeholder text must not
contain carriage returns or line-feeds
autocompleteHTML5 Indicates whether the value of the control can be automatically completed by the browser.
readonlyBoolean value that indicates the input is not editable. Readonly controls are still sent on form
submission, but will not receive focus. HTML5: This attribute is ignored when the value of type
attribute is either set to hidden, range, color, checkbox, radio, file or button.
requiredHTML5 Indicates a value must be present or the element must be checked in order for the form to
be submitted
altAn alternative text for images, in case they are not displayed.
autofocusThe <input> element should get the focus when page loads.
valueSpecifies the value of <input> element.
stepThe step attribute specifies the legal number intervals. It works with the following input types:
number, range, date, datetime-local, month, time and week.

Read More

Chapter 16: Image Maps

<img>Below are the image map-specific attributes to use with <img>. Regular <img> attributes apply.
usemapThe name of the map with a hash symbol prepended to it. For example, for a map with name=“map”, the image should have usemap=“#map”.
nameThe name of the map to identify it. To be used with the image’s usemap attribute.
<area>Below are <area>-specific attributes. When href is specified, making the <area> a link, <area>
also supports all of the attributes of the anchor tag (<a>) except ping. See them at the MDN docs.
altThe alternate text to display if images are not supported. This is only necessary if href is also set on the <area>.
coordsThe coordinates outlining the selectable area. When shape=“polygon”, this should be set to a list of
“x, y” pairs separated by commas (i.e., shape=“polygon” coords=“x1, y1, x2, y2, x3, y3, …”).
When shape=”rectangle”, this should be set to left, top, right, bottom. When
shape=“circle”, this should be set to centerX, centerY, radius.
hrefThe URL of the hyperlink, if specified. If it is omitted, then the <area> will not represent a hyperlink.
shapeThe shape of the <area>. Can be set to default to select the entire image (no coords attribute necessary), circle or circ for a circle, rectangle or rect for a rectangle, and polygon or poly for a polygonal area specified by corner points.

Read More

Chapter 15: Images

srcSpecifies the URL of the image
srcsetImages to use in different situations (e.g., high-resolution displays, small monitors, etc)
sizesImage sizes between breakpoints
crossoriginHow the element handles crossorigin requests
usemapName of image map to use
ismapWhether the image is a server-side image map
altAlternative text that should be displayed if for some reason the image could not be displayed
widthSpecifies the width of the image (optional)
heightSpecifies the height of the image (optional)

Read More

Chapter 14: Using HTML with CSS

CSS provides styles to HTML elements on the page. Inline styling involves usage of the style attribute in tags, and is highly discouraged. Internal stylesheets use the <style> tag and are used to declare rules for directed portions of the page. External stylesheets may be used through a <link> tag which takes an external file of CSS and applies the rules to the document. This topic covers usage of all three methods of attachment.

Read More

HTML 5 Notes For Professional – Chapter – 13: Include JavaScript Code in HTML

srcSpecifies the path to a JavaScript file. Either a relative or absolute URL.
typeSpecifies the MIME type. This attribute is required in HTML4, but optional in HTML5.
asyncSpecifies that the script shall be executed asynchronously (only for external scripts). This attribute
does not require any value (except of XHTML).
deferSpecifies that the script shall be executed when the page has finished parsing (only for external scripts). This attribute does not require any value (except of XHTML).
chrsetSpecifies the character encoding used in an external script file, e.g. UTF
crossoriginHow the element handles crossorigin requests
nonceCryptographic nonce used in Content Security Policy checks CSP3

Read More

CSS3 – Sticky Header on Scroll Example

In this tutorial I’ve setup an example of how to add an animated sticky header to a website using almost pure CSS with just a touch of javascript.

The header becomes ‘sticky’ when the top header bar is scrolled out of view, in the demo this is 40px but can be changed using the LESS variables at the top of the /content/site.less file.

Read More

Pin It on Pinterest