Graham Morby-Raybould

Designer. Developer. Freelancer.

Simple HTML up


Simple HTML up

For those of you using such programs as sublime text or Notepadd +++, its rather annoying when you have to type up those pesky tags. Open and close HTML tags then followed by Open and Close body tags , etc etc add Stylesheets or bootstrap, the list goes on. For those of you new to web developement I feel the need to better explain myself, so each HTML document has a required few tags to function correctly, those are the HTML tag, the Body tag and the Head tag. 

<html></html>

The HTML tag is where yep you guessed it all the html on the page goes, pretty much everything! 

<head></head>

The head tag will contain all links and meta information.  it sits in between the HTML tags and has all styles and script links plus keywords and page title.

<body></body>

This is where the content your end user will see on his computer.

So the final product looks like this

<html>
<head>
</head>

<body>
</body>
</html>

So this is the basic and I mean very basic make up of tags on a HTML document, lets push it a little further and add some information.

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

So now we have a title for the page and some wording to spill out. Lets add the lat bits and some styles and off we go.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
   <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Page Title goes here</title>
    
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

And there you go, each and every time you set up a page use the above and you will have a grid framework, the JS script and your good to go.


Created: 2017-02-08.



Recent posts

Basic Laravel install

So you want to set up a new Laravel Install? Correct? Right ok so lets begin..... First...

2017-06-15

Read More

Back to blogging and a headache

It's a hard thing this day in age to decide what is best to do in terms of technology and how...

2017-05-23

Read More

Twitter