Beginning Web Development : Let’s Make a Page!

… and learn some vocabulary.

A lot of books teach you to build the site, then find hosting.  I always thought that was a bit like putting the cart before the horse.  You need a place to put your site even before it is made.  Set up your hosting first.  Check out my previous post on getting your hosting set up to make that happen.

All of my coding is happening in Notepad.  Yes, that wonderful staple of MS Windows software.  It is free and it will not fail you.  There is other free coding software available, but I want you to know how easy it is to do this yourself and with stuff you already have.

Notepad can be found in the Accessories folder of MS Windows.  Find it and open a new document.

Once you have opened your Notepad document we are going to save it with the correct file extension, .html or .htm.  This will prevent issues in the future

We are going to save the file as index.html. To do this we need to go to File -> Save As. You will need to change the “Save as Type” option to “All Files.”  On the “File Name:” line type in index.html.

We are saving the file as index.html for a reason.  Most browsers will not load the front page of a website unless it it labeled home.html or index.html.  Some hosting sites will let you flag a file to load first, but we are using free stuff and you should not expect a free host to allow that.  In addition it is good to learn to do things the smart way to prevent issues later on.

You may also want to make a file somewhere for you to put all your files.  You do not want to lose anything.  I made a file called Test Site and saved index.html in it.

You should test your index.html to make sure it is saved correctly.  The icon next to it should be the icon of whatever browser you use the most.  Internet Explorer will have the IE logo, Firefox, Chrome, Safari or Opera will have their respective logos next to the file name.  If you have a page icon next to your file name, the file was not saved with the correct file extension and will not open in a web browser.

If you double click on the file index.html it should open your web browser and show a blank page, and the file path in the address bar.

Try it!

We should go over some vocabulary before I get to far into this and lose you.

HTML: HTML is an acronym for Hypertext Markup Language.  It is the language that web browsers can read and understand.  It is what allows the browser to know what goes where.  Currently most sites are using HTML4 but HTML5 is the newest update to the language.  HTML5 it is what we will be using.

elements: HTML works by using elements to tell the browsers what certain things should look like. Elements are surrounded with <>.  An example is <body> (start the body) or </body> (end the body.)

A basic shell of a website will look like this:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset= "utf-8">
  <title>Site Name Here</title>
</head>

<nav>
Home || About
</nav>

<body>
 <h1>Welcome to the Test Site</h1>

  <h2>Greeking</h2>
<p>The gibberish in the next two paragraphs is called "Greeking." Greeking is used as a 
place holder.  That way you will know what the text on the screen will look like when you 
do various things to the page.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id orci risus. Donec id neque 
justo. Donec a ipsum vitae magna semper tristique. Morbi non pharetra enim. In finibus lectus 
nec ipsum varius ornare. Suspendisse mollis, urna non porta dignissim, leo leo vehicula risus, 
ultricies posuere massa risus sed ex. Morbi ipsum diam, viverra quis sodales quis, dictum ac 
nibh. Donec fermentum facilisis purus eu fermentum.</p>

<p>Nam id sapien vel leo elementum varius non a magna. Curabitur porttitor velit eu sapien 
maximus laoreet. Proin cursus condimentum tortor vel hendrerit. Morbi euismod neque vel 
tincidunt volutpat. Aliquam quam turpis, lacinia eget egestas eu, suscipit vel purus. 
Vestibulum tincidunt porttitor risus, in consectetur elit volutpat at. Pellentesque maximus 
tellus a mi posuere interdum. Donec lobortis dapibus luctus. Vivamus quam nibh, sagittis ac 
ultrices vitae, gravida at lectus. Curabitur porta erat ut lorem bibendum blandit. Nulla 
aliquet sit amet ex ac tincidunt. Quisque leo dui, dapibus eget felis sit amet, viverra 
placerat libero. Donec pretium in nisi id blandit. Pellentesque et pretium sapien.</p> 
</body>

<footer>
  <h3>This is the Footer</h3>
<p>In the footer we usually put links to copyright information, site maintenance 
information and even links that you think visitors might find useful but not very 
important.</p>
<p>Many people/companies put site maps, tech support information, or advertisements in this 
section.</p>
</footer>
</html>

Can you spot all the elements?

We have <! DOCTYPE html> to tell the browsers that this is an HTML document.

<head> contains information that users do not need to see but the browser needs to know in order to display the site properly.

<meta> contains things like what language your site will be in.

</head> Tells the browser that you are done with all the important content that makes the site look and act correctly.

<nav> Designates a navigation area.  This is how people will get around your site.  All the names of all your pages here, we will make them work in the next lesson.

</nav> ends the navigation area.

<body> This area is for the body of your web page.  All the important content goes here.  We have added a few other elements that will make things easier to read in the <body>.

<h1> Tells the browser to use its default Header 1 format.  A big bold header to tell people Welcome, or the name of the site.

</h1> Ends the Header 1 area.

<h2> Tells the browser to use the default Header 2 format.  It is smaller than <h1> but still nice and bold.  Good for article titles.

</h2> Ends the Header 2 area.

I hope you are seeing a pattern by now.  If you start an element you need to make sure you end it.  Not all browsers will know when to end an element and may cause things to load incorrectly.

<p> and </p> indicate the start and end of a paragraph. If you do not separate your paragraphs many browsers will just run them together.  That makes things hard to read.

</body> Ends the information in the main part of your web page.

<footer> and </footer> indicate the start and end of the footer or bottom of the page.  if you look at the bottom of most websites you will see that there is information in teeny words.  This is the footer.  It holds useful but unimportant information.

Make sure you save your file.  Test it!

It should show up as a white page with black words on it. Kind of like my test page. http://www.meremagicdesignstesting.site90.com/

IF you really want you can upload your test page so others can look at it.  You will have to follow the directions that the hosting site gives you.  They are pretty varied.  If you have issues leave a comment and I will see if I can help.

Play with the elements, check out other elements like <h3> or <h4>. Try leaving off a closing element and see what your web browser does.

Have fun with it and I will be making a new entry in a few days. 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s