Mr. Camel

HTML Snippets: The Most Useful Ready-to-use Examples

HTML is super easy to write, but when creating webpages you often need to do the same repetitive tasks, such as creating forms.

In this user guide, I have compiled 10+ ready-to-use HTML snippets to fasten your front-end coding.

• HTML5 Starter Template
• Load JavaScript Asynchronously
• Define Viewport for Responsive Websites
• Get Directions Form (Google Maps)
• Base64 Encode of a 1*1px “spacer” Gif
• Regexp Pattern For Email Validation
• Bootstrap Login Form
• Valid Flash Embed
• Insert HTML Video With Flash Fallback
• iPhone Call & SMS Links
• Autocompletion With HTML5 Datalists
• Country Dropdown List For Web Forms
• Downloadable Files
• Restrict Uploads To Specific Mime Types
• Crash IE6
• Frequently Asked Questions
  • What is a HTML Snippet?
  • How Do I Insert HTML Code to a WordPress Post or Page?
  • What Kind of Hosting is the Best for HTML?

  HTML5 Starter Template

  When starting a new project, you need a starter template. Here is a concise and clean template to serve as a basis for your HTML5 projects.

  Load JavaScript Asynchronously

  One of the best features of HTML5 is the possibility to asynchronously load JavaScript files. This is done very easily, simply by adding the async attribute to your script tags:

  This simple code snippet shows an asynchronous loading of a JavaScript file. This will make the page load much faster as the browser will simultaneously load both the HTML and the JavaScript file.

  Define Viewport for Responsive Websites

  When creating a responsive website, setting the viewport is a must.

  The following HTML snippet should be inserted into the head section of your document.

  This HTML snippet set the view on all screens at a 1×1 aspect ratio and remove the default functionality from iPhones and other mobile devices which render websites at full-view and allow users to zoom into the layout by pinching.

  Get Directions Form (Google Maps)

  Here is a simple yet powerful code snippet to create a form where the user can enter his location to get directions to a specific place. Very useful for contact pages.

  Base64 Encode of a 1*1px “spacer” Gif

  I don’t recommend using transparent “spacer” gifs, but I know that even in 2019, people are still using them from time to time. If you’re one of them, you’ll probably enjoy this Base64 encode of a 1*1px “spacer” gif. Way better than using an image.

  Regexp Pattern For Email Validation

  HTML5 allows, among other things, to validate emails using a regular expression pattern. Here is a ready to use input field with the regexp pattern to validate an email address.

  Bootstrap Login Form

  

  A very basic Bootstrap form template that can be easily enhanced and modified to suit almost any need. Use this HTML snippet as a starting point for almost any kind of simple forms, such as login forms, contact forms, etc.

   
   
  Email address: 
  Password: 
   Remember me 
   Submit  

  Valid Flash Embed

  Are you often embedding Flash files into your html pages? If yes, you’ll better save the valid flash embed code below for future use.

  Insert HTML Video With Flash Fallback

  Another great feature of the HTML5 specification is definitely the video tag which allows you to easily embed video files.

  Unfortunately, older browsers can’t deal with embedded HTML5 videos. So here is a complete HTML snippet with a flash fallback for old browsers.

  iPhone Call & SMS Links

  With the release of the iPhone, Apple introduced a quick way to create call and sms links. Here is a sample code snippet to keep in your snippet library.

  Autocompletion With HTML5 Datalists

  Using the datalist element, HTML5 allows you to create a list of data to autocomplete a input field. Super useful! Here is a sample code to re-use in your own projects.

  Country Dropdown List For Web Forms

  Here’s another time saver: A ready-to-use dropdown list with all countries.
  Due to the size of the code, please see source directly.
  Source: https://snipplr.com/view/4792/country-drop-down-list-for-web-forms/

  Downloadable Files

  HTML5 allows you to force download of files using the download attribute. Here is a standard link to a downloadable file.

  Restrict Uploads To Specific Mime Types

  The accept attribute was introduced in the HTML5 specification. Used on an input type=»file» element, it restricts file upload to specified mime types:

  The accept attribute allows to specify a comma-separated list of mime types that will be accepted for upload. In the above code snippet, only images are accepted.

  Crash IE6

  In 2019, most people have finally upgraded from the horrible Internet Explorer 6 which gave nightmares to every front-end developer for years. But some persons are still using it. If you want to get rid of this prehistoric browser for good, here is a very funny code to include in your HTML pages.

  This code will crash IE6. Bam!

  Frequently Asked Questions

  

  What is a HTML Snippet?

  An HTML snippet is a small portion of source code in HTML markup. Snippets like those featured in this user guide are easy to re-use in your own projects, hence their popularity among developers.

  How Do I Insert HTML Code to a WordPress Post or Page?

  When displaying an HTML snippet on a WordPress post or page, make sure to encode the HTML code and embed it with

  and

  . For more information, please refer to this display code in WordPress guide.

  What Kind of Hosting is the Best for HTML?

  Pure HTML pages can be hosted on any hosting plan. Bluehost provides a secure platform for HTML and PHP sites for $3.95/mo. More information can be found on our best web hosting guide.

  Источник

  HTML Web Page Examples with Source Code

  In this article, we are going to see some HTML web page examples with source code. We will also see some of the key points to learn how to create these web pages.

  HTML Web Page Example 1

  This is an example of a simple HTML web page that shows the profile of a professional camel.

  Here is how the camel profile is designed in HTML:

  1. Container — The complete HTML web page is wrapped in a container. The container is a div element with the class container .
  2. Header — Inside the container, we have a header element that contains the logo and the navigation menu.
  3. Aside — Aside contains the profile picture and other navigational links.
  4. Main — The main element contains the profile information. Like the name, the career, the skills, the contact form, etc.
  5. Footer — The footer contains copyright information.

  Here is the complete code of the camel profile:

  @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); body < margin: 0; box-sizing: border-box; >.container < line-height: 150%; >.header < display: flex; justify-content: space-between; align-items: center; padding: 15px; background-color: #e9e9e9; >.header h1 < color: #222222; font-size: 30px; font-family: 'Pacifico', cursive; >.header .social a < padding: 0 5px; color: #222222; >.left < float: left; width: 180px; margin: 0; padding: 1em; >.content < margin-left: 190px; border-left: 1px solid #d4d4d4; padding: 1em; overflow: hidden; >ul < list-style-type: none; margin: 0; padding: 0; font-family: sans-serif; >li a < display: block; color: #000; padding: 8px 16px; text-decoration: none; >li a.active < background-color: #84e4e2; color: white; >li a:hover:not(.active) < background-color: #29292a; color: white; >table < font-family: arial, sans-serif; border-collapse: collapse; width: 100%; margin: 30px 0; >td, th < border: 1px solid #dddddd; padding: 8px; >tr:nth-child(1) < background-color: #84e4e2; color: white; >tr td i.fas < display: block; font-size: 35px; text-align: center; >.footer
  Mr. Camel
  About Me
  I don't look like some handsome horse, but I am a real desert king. I can survive days without water.
  My Career
  I work as a web developer for a company that makes websites for camel businesses.
  
  How Can I Help You?
  SKILL 1SKILL 2SKILL 3Cleaning kaktus in your backyardStoring some fat for youTaking you through the desertEmail: 
  Mobile: 
  Enter your message