ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)