December 10, 2018 · coding html

What is the HTML Boilerplate

I will be using the Emmet library inside of VSCode to construct a very basic website. Emmet is a library of snippets for front-end development (for HTML,CSS etc).

In VSCode I found it hard to edited multi line snippets through Emmet so instead I deiced to use the snippets function through VSCode. To do this I went to file → preferences → user snippets → and I selected to use a html.json file type (this will change when using a different language).

The prefix is the shortcut → "prefix": "html-amy",
\t → tabs/indents, for multiple indents put more
Escape character is \ → an escape character is a character which invokes an alternative interpretation on subsequent characters in a character sequence →

\t\t\t<meta charset=\"utf-8\" />

this is the entire snippet

{
		"Amys HTML Snippet": {
		"prefix": "html-amy",
		"body": [
			"<!DOCTYPE html>",
			"\t<html>",
			"\t\t<head>",
			"\t\t\t<meta charset=\"utf-8\">",
			"\t\t\t<title></title>",
			"\t\t</head>",
			"\t\t<body>",
			"",
			"\t\t</body>",
			"\t</html>"
		],
		"description": "Amy's HTML Snippet"
	}

Entering html now enters the snippet below

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

        </body>
    </html>

Creating a new folder for your file to be held

Untitled3-1

Create a file called index.html to work from and enter the customized html snippet we just made
The first line declares the document type - then tells the browser what version of html it is using →

The second line tells the computer that the document will be using html →

The head section of the code is the section that holds information about the web page and how the browser should handle the page → the will tell the browser what the title of this particular website

    <head>
    <meta charset="utf-8">
    <title>Amy's Personal Site</title>
</head>

To view your website go hover over the index.html file and select copy path, if you paste that into your browser if will take you to your website
Untitled4-1

The line → refers to meta elements - Meta elements are tags used in HTML and XHTML documents to provide structured metadata about a Web page. The charsetis an attribute of the meta element. utf-8 refers to the type of encoding used ( utf-8 is the encoding standard with html5 - includes every character included in the Unicode character table). Using this gives your website the maximum chance to be rendered correctly on browser that are from international visitors.

Other commonly used meta tags that could be used are :

    <head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

These meta tags gives search engines data information on the content of the website

If you wanted to find the website description for a website you can go onto a website, right click and select view page source this will display the whole websites html code. Within the code search for description and this will take you there.

Untitled6-1

This will match what is displayed on your browser

Untitled7-1

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket