HTML

clicksand.net

Goal: Develop a website (theme) for a book author based on provided PDF mocks. Use WordPress as a CMS for the site. Test and deploy the site on the company’s server.
Web technologies used: HTML5, CSS, PHP, WordPress.
Tools and software: Photoshop, MS Visual Studio Code
Release date: May, 2017
Project type: Contract work for Civilis Marketing.
clicksand.net

merkelfinancial.com

Goal: Develop a website (theme) for a financial company based on provided PDF mocks. Use WordPress as a CMS for the site. Test and deploy the site on the company’s server.
Web technologies used: HTML5, CSS, PHP, WordPress.
Tools and software: Photoshop, MS Visual Studio Code
Release date: April, 2017
Project type: Contract work for Civilis Marketing.
merkelfinancial.com

The HTML Form Elements

The following is a list of all form elements that may be used in an HTML page.
Text Field
Text fields are one line areas that allow the user to input text.

<input type="text" name="lastName" size="25" value="Enter your name here!" />

Password Field
Password fields are similar to text fields. The difference is that what is entered into a password field shows up as dots on the screen. This is, of course, to prevent others from reading the password on the screen.

<input type="password" name="pass" size="25" value="Enter your password here!" />

Hidden Field
The hidden field does not show on the page. Therefore the visitor can’t type anything into a hidden field, which leads to the purpose of the field to submit information that is not entered by the visitor.

<input type="hidden" name="Language" value="English" />

Check Box
Check boxes are used when you want to let the visitor select one or more options from a set of alternatives.

<input type="checkbox" name="option1" value="Milk" /> Milk
<input type="checkbox" name="option2" value="Butter" checked /> Butter
<input type="checkbox" name="option3" value="Cheese" /> Cheese

Radio Button
Radio buttons are used when you want to let the visitor select one – and just one – option from a set of alternatives.

<input type="radio" name="group1" value="Milk" /> Milk
<input type="radio" name="group1" value="Butter" checked /> Butter
<input type="radio" name="group1" value="Cheese" /> Cheese
<hr />
<input type="radio" name="group2" value="Water" /> Water
<input type="radio" name="group2" value="Beer" /> Beer
<input type="radio" name="group2" value="Wine" checked /> Wine

Drop-down Menu
Drop-down menus can serve the same purpose as radio buttons (one selection only) or check boxes (multiple selections allowed). The advantage of a drop-down menu, compared to radio buttons or check boxes, is that it takes up less space. But that is also a disadvantage, because people can’t see all options in the menu right away.

<select name="mydropdown"/>
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>

Text Area
Text areas are text fields that can span several lines.

<textarea cols="40" rows="5" name="myname"></textarea>

HTML 5 Minimal Template

This is a minimal markup your web page should have in order to be validated with the W3C Markup Validation Service

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

Every HTML document should start with a declaration that tells the browser what version of HTML the document is written in. This code has been specifically designed to “fool” current browsers (that are yet to support HTML5) into treating the document as a full-blooded HTML4 document. Browser versions as far back as Internet Explorer 6 will render the page with their most standards-compliant rendering mode.

The tag should specify the primary language for the document’s content with the a attribute.

The first bit in the header should be a tag that specifies the character encoding of the page. Usually, the character encoding is declared by the web server that sends the page to the browser, but many servers are not configured to send this information. Specifying it here ensures the document is displayed correctly even when it’s loaded directly from disk, without consulting a server.

In CSS and JavaScript declaration, the type=”text/css” and type=”text/javascript” attributes that was required in HTML4 are now optional in HTML5, and all current browsers know what to do if you leave those attributes out.

Several related tips:

Always add a trailing slash to sub folder references. Otherwise, you generate two requests to the server: first, it will add the slash and second, create a new real request.

href="google.com/folder/"

To refresh a page every 30 seconds use this in the page head:

<meta http-equiv="refresh" content="30">

Specify width and height for img element. In this case the space for the image will be reserved by a browser, and the layout won’t change:

<img src="#" width="200" height="200" alt="image" />

Update Background Color with Bootstrap 4

To make a set background color slightly lighter (or darker) make these changes to _background.scss file in utilities folder of the Bootstrap 4 source folder:

Existing:
@include bg-variant('.bg-inverse', $brand-inverse);
Duplicate and modify:
@include bg-variant('.bg-inverse-lighter', lighten($brand-inverse, 10%));

Process the .scss file and use this new class (in this case bg-inverse-lighter) for the element’s background.

Sticky Footer with Bootstrap 4

To implement sticky footer, when the elements of the footer sticks to the bottom of the page, we can use Bootstrap 4 classes that are designed for navigation.

Make the footer implement “container-fluid” class. Inside the footer place a “nav” element with classes “navbar” and “fixed-bottom”. The footer will be forced to the bottom of the page.

<footer class="container-fluid">
  <nav class="navbar fixed-bottom">
    Footer text
  </nav>
</footer>