Intro to HTML

HTML is the backbone if most web pages and is the standard for a markup language. It stands for HyperText Markup Language. It's the most basic building block of the web and provides the overall foundation. HTML is easy to learn and once you start to understand just a little bit of HTML, you can start to add a little CSS or Cascading Style Sheets.

Think of HTML as the foundation of a house. The concrete, frame, nails, screws etc., are all used accordingly to build the structure of a home. Once the foundation is built, you can start to add some paint to make it start looking good. This is where CSS comes in. CSS is used to make your foundation appear the way you want it. Maybe you want it to have blue paint with white trim. This is the job of CSS. Once you have it looking the way you want, you start adding some plumbing and electrical. This is where Javascript comes in. Javascript adds function and logic. Now that everything looks good, it probably needs to achieve an outcome. You'll need to turn on lights, alarms, water and heat. This would be the role of Javascript. 

Here is the basic HTML skeleton.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>

  <body>


  </body>

</html>

Let's add a little bit of content to our HTML skeleton. Inside the meta tag, you can put special information about the website such as content type, keywords, description etc. This information is not displayed on the website, but it is parsed by the browser or server. In HTML5, we are able to define the viewport through meta tags.  

Here's an example of how meta tags could be laid out.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="author" content="thecodecrypt.com">
    <meta name="description" content="Put your website description here">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
  </head>

  <body>
      <h1>This is my first website!</h1>

  </body>

</html>

 

In the above code, it will allow the browser to get the proper character encoding which the standard is UTF-8. It will also allow the description to get parsed which is often used by search engines to display the 160 character snippet that shows what your site is about before someone clicks on it.

What about the Viewport?

The viewport is set to define the user's visible area of a web page. Before mobile phones and tablets came around, websites were designed as static or fixed pages that were created for desktop computer screens only. Once mobile phones and tablets and the countless number of various screen widths came into play, users would have to scroll horizontially on their devices to view website.

That's not good!

So, prior to the viewport, but after the mobile devices came out, browers started scaling down websites so users wouldn't have to scroll horizontially so much, but that made websites really small and hard to read on screens.

This is where HTML5 viewport meta comes in handy. It allows us to set the visible content width of our web pages. Checkout the following example on your phone. With Viewport Meta

Comments (0)

Rated 0 out of 5 based on 0 voters
There are no comments posted here yet

Leave your comments

  1. Posting comment as a guest. Sign up or login to your account.
Rate this post:
Attachments (0 / 3)
Share Your Location
© 2019 The Code Crypt. All Rights Reserved.