ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

The Basics of HTML5 Website Creation

Updated on December 8, 2014
Source

What is HTML5?

HTML5 is the newest programming language created for a better user experience.

Unlike other versions before it, HTML5 does not allow tags that describe the way things look. For example you used to describe if text was centre <align=centre> or bold <strong>.

Now when you make something <strong> you are simply telling the computer that is is important.

All visual aspects are handled in another file using what is called Cascading Style Sheets (CSS). Web browsers will still display <strong> as bold </strong> text because that is what the CSS is telling it to do, but you can later change how the content marked as <strong> will look </strong>.

The important thing to understand is that you are not using HTML5 to have things look good.



Source

The default notepad program that can be found on all computers can be used, but it is not as good at displaying and organizing code.

Software to Write Code

Code should not be written in text editors such as Microsoft Word because these programs use unseen code to format the documents.

Code needs to be written in a plain text editor. Bellow is a list of free editors.

Free PC Editors

  • Notepad ++
  • VIM
  • UltraEdit
  • E-Text Editor

Free Mac Editors

  • Textwrangler
  • SubEtha Edit
  • Coda

There are other programs to make code writing faster and more efficient, such as Dreamweaver.

Source

HTML parts Defined


The definitions may make more sense after looking at the HTML template bellow.


Tag: a tag is a bit of writing contained in triangular brackets, for example <html>


Start Tag: a tag that tells the program when a section begins, for example <html>

End Tag: a tag with a slash tells the program when a section ends, </html>


Element: a start tag and end tag placed together create an element. Everything in between the start and end tag, including other elements, are part of that element.

For example: <html> <p>my first line of code</p> <html>

Some special elements do not have an end tag, for example <meta>


Attribute: a word placed inside the start tag that is used to add information to an element. These take the form of a word followed by an equal sign and a word in brackets, for example <time datetime="10/29/2014> </time>



Parent Tag: the tag or element that contains other tags placed inside

In the case bellow <html> would be the parent of <p>

<html> <p>my first line of code</p> <html>


Child Tag: the tag or element that has been placed inside another

In the case bellow <p> would be the chile of <html>

<html> <p>my first line of code</p> <html>


Grandchild Tag: all tags that are inside the element of focus when there are layers

<html> <body> <head> <ul><ul> </head> </body> <html>


Ancestor Tag: all tags that surround the element focus when there are layers

<html> <body> <head> <ul><ul> </head> </body> <html>


Tags are used to explain what the plain text is so the browser can read it and give it meaning.

The same tag can do different things depending of where it is used. For example:

The <head> tag placed before the <body> refers to the top of the html document where the title of the website may be placed, but not seen by those viewing the website. This information is used by the browser to locate your website to those who search for it.

The <head> tag inside of the <body> refers to the top section of the viewable webpage where the title of that page might go. Later you will learn to separate the information in your document into different sections/pages of the website.


The purpose of tags is NOT to show how text will look. It is to explain what the text is for to give it purpose.

Source

HTML5 Tags and Their Use

Tag
Main Use
Between Body Tags
<!DOCUTYPE html>
Tells the browser it is reading HTML5 code.
This only goes at the top of the document.
<!--text here-->
Text between these is recognized as a comment and not part of your code.
Does the same anywhere.
<html> </html>
Text between these tags is recognized and read as html code.
This only goes at the start and end of the entire document.
<head> </head>
A non-viable part of the webpages that has information for reading and finding the webpage.
Places permanent information at the top of the page. Ex. Sports section title and links.
<body> </body>
The text between here will be seen on the webpage.
There is only one body section.
<p> </p>
Text between this is one paragraph.
A paragraph can go anywhere in the body, inside other elements.
<h1> </h1> to <h6> <h6>
Heading importance for pages. h1 is the most important. Usually the website name or page name.
Headings can go anywhere in the body, on pages, posts, and articles.
 
 
 
Source

HTML Template

<!DOCTYPE html> This document is written in HTML5.


<html> Start reading the code.



<head> Document header. Information will not show on webpage.

<!--This is just a comment. --> The correct way to comment.


<title>My First Website</title> This is the website name. 

It will appear in browser tabs and bookmarks.

<meta charset="utf-8"> Written on a standard english keyboard. 

Code readers do not recognize letters or symbols, only code 
attached to the keys. utf-8 allows the code reader to understand
numbers and letters. 

You must search special symbol codes. For example, © is &copy;

</head>




<body> Start of the visible webpage.

All the information for all the pages, posts, or sections can
be placed here and will be separated out later.

<h1>Learning HTML</h1> The most important page heading.


<h2>Rules For Placing Code</h2>


<p>All code is made of elements or pairs of tags. Right now
I am using the paragraph tag. A paragraph is the same as when
writing an essay. You can have multiple sentences as long as
they are about the same topic.</p> 

<p>When writing code, you can place elements inside one another.
This paragraph is a child of the element <body>. The element body
is currently an ancestor of h1, h2, and p.</p>

<p>Now this HTML5 document can be viewed in any Browser.</p>


<h2>Viewing Your Code</h2> This is a secondary heading.


<p>Continue bellow to learn how to save your code and view it
in the browser. Remember that all text should be surrounded by
tags. Code that is not to be read should be between comment tags</p>



<p>&copy; 2014, Denny B. Reese</p>


</body> End of the visible webpage.



</html> Stop reading the code.
Source

How to Save Your Website Files

Save your text document

  1. click on save as
  2. create a name with (no capitals, no spaces, and no special characters)
  3. words can be separated by underscore_ or hyphen-
  4. manually include the extension .html (do not select from the list)

Example file name: my_first_html.html


Collect your related files into a folder

  1. name the folding in lower case letters

Source

How to View Your Code in a Browser

Method 1: have HTML file open

  • go to the menu bar of the word editing program
  • find the open with option
  • select one of the browser options

Method 2: locate the HTML file in documents

  1. right click
  2. go to open with
  3. select one of the browser options

OR

  1. hold and drag the file over the browser icon and release
  2. if is asks if you want to pin to the desktop say yes

Method 3: have a browser open

  1. go to the menu bar at the top
  2. go to file and select open file
  3. for Chrome use must use CONTROL O

You can open your code in a browser while editing the code in Notepad++ or other editing programs. To view the changes, simply save the file and refresh the browser.

How to check HTML code for Errors

That's easy. Go here: W3C Markup Validation Service

You will find three ways to validate

  1. paste the URL
  2. attach the file
  3. paste the code directly

At the top it will give you a summary of errors, if there are any. Below it will describe the errors and which line they are on. To see your original code, before you check, go to more options and click the show source checkbox.

HTML5 documents will show a warning notice at the top even when the code is correct. Do not worry. It shows this because HTML5 is such a new code.

The code checker may miss some errors.

Source

How to Zip folders for Upload

Your website parts should be contained inside one folder.

In order to make the size manageable for easy uploads and transport you need to zip the folder.

Steps to ZIP a folder

  1. find the file in your documents
  2. right click on the folder
  3. on Mac find the word "compress"
  4. on PC go to "open with" and select "zip compression"
  5. a zipped version of the folder will be created in the area you saved the folder

Steps to un-ZIP a folder on PC

  1. find the zipped folder in your documents
  2. right click on the folder
  3. select extract all
  4. an un-zipped copy will be created in the area you saved the folder

Steps of un-ZIP a folder on Mac

  1. find the zipped folder in your documents
  2. double-click the zipped file
  3. an un-zipped copy will be created in the area you saved the folder

Did this article help you?

See results

© 2014 DennyReese

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.