An Overview of Web Pages

Index

I have created this index due to the amount of information present in this tutorial. Feel free to skim past any sections that contain information you already know. This tutorial provides the very basic information about how web pages work in general, and near the end it starts to focus a little bit on how to extend your HTML pages with CSS and JavaScript coding.

An Overview of Web Pages
W3 Schools
HTML
CSS
Extending web page capabilities
JavaScript vs. browser plugin languages
HTML basics
Head tags
Body tags
HTML page example, with CSS and JavaScript
Conclusion


W3 Schools

Before I begin explaining the basics of how most web pages work, let me just say that if you are learning anything about web design or development then you should absolutely take a look at this W3 Schools:

http://www.w3schools.com

Consider it your official web coding guideline website, because that's basically what it is. ;)


HTML

Websites are almost always coded using some HTML. HTML (Hyper Text Markup Language) is a web language used all over the internet for delivering information, data, and media to people.

On its own, it can do very little. Some examples of what HTML can display on its include:

• Text
• Links
• Forms
• Tables
• Images
• Buttons
• Radio buttons and checkboxes
• Text boxes
• Text fields (big text boxes used for multi-line text)

Think of HTML more as a basic structuring and web page delivery language.


CSS

CSS (Cascading Style Sheets) is another web language that is useless without HTML. All it does is tell the browser additional styling, coloring, and positioning that HTML can hardly do on its own. Almost any sort of styling ever done on a web page should and could be done with CSS. Some of what CSS can modify on a web page include:

• Colors
• Fonts
• Textures
• Background images (although usually you would just use HTML for all of your images)
• LOTS of different positioning options (floating and fixed, relative, and absolute positioning)
• LOTS of other styling options (custom fonts, changing the direction of text, adding borders and outlines, shadowing text, etc.)

Think of CSS more as the "stylizer" of web pages.


Extending web page capabilities

HTML and CSS on their own can only make "static" web pages - that is, once the page is downloaded and processed by a browser, it does not actively do anything unless the viewer clicks or types.

If you are wanting to extend the capabilities of your web pages even more so that your website can do any of the following and more:

• Respond to user interaction other than them simply just clicking a link or a form's submit button and changing the page.
• Have anything on the page change as time progresses (after the page has fully loaded).
• Update data on the page without requiring the user to refresh the page or visit a new one

Then you essentially have two standard options:

1. Use JavaScript and its extensions, some of which my favorites are JQuery, Ajax, and Raphael.
2. Use Flash, Java (as opposed to JavaScript, which is an entirely different language), or Silverlight.

JavaScript vs. browser plugin languages

JavaScript and its extensions are generally slower (for graphics and calculations), so you typically would not use it for creating games with (it's more for dynamic web pages that interact with the user in simpler ways like changing content and styling, in response to what the user clicks or types), although games have been made with it before. The benefit that JS has is that it is used and usable EVERYWHERE, including all of the popular OS's and smart phones/blackberries/pads/tablets.

Flash, Java, and Silverlight have special browser plugins that run an interpreter (which reads and processes code on the spot) for their scripts and applications. They are the most capable web development solutions that you could use, and they are typically used for dealing with media and other graphics and sound intensive interfaces. Flash and Silverlight are almost always used to stream and play videos with, with some exception. I personally have not seen Java used very much on web sites.


HTML basics

Now that you have been briefed on all of the common web languages and their uses, I will show you the basic elements that should always go in an HTML page. First of all, an HTML page needs these tags which should surround the rest of the page content:

<html>

</html>

Inside the HTML tags, you should have a pair of head tags and body tags:

<html>

<head>

</head>

<body>

</body>

</html>

HTML, head, and body tags should only ever be placed into a single HTML page once, with the exception of iframes/frames that load content from other web pages and are not frequently used.


Head tags

Inside the head tags is where you do the following:

• Set the page title (which usually only ever appears in the browser's window title).
• Add meta tags (which are used primarily for search engine optimization and HTML page redirection).
• Add CSS code or references to other files that contain your page's CSS code (most of your CSS coding can be added to the HTML elements throughout your page, however this practice is for the most part discouraged (other than for testing and development purposes) because it makes it harder to change your page's styling later on).
• Add JavaScript code or references to other files that contain your page's JavaScript code. This also includes all JavaScript extensions like JQuery, Ajax, and Raphael, as well as all of the code written in those extensions. Occasionally, JavaScript code will be placed in the body tags, however this is not a welcomed practice.

Body tags

Inside the body tags is where you place all of your basic web page content (forms, images, text, links, buttons, tables, page titles, copyright claims, etc.).


HTML page example, with CSS and JavaScript

Below is an example of what an HTML page would look like with some CSS and JavaScript code. Don't get all caught up with what any of the code below does - that is not the purpose of this tutorial. All you need to be concerned with at this point is what code goes where (in the head or body tags of the page).

<html>

<head>

<link href="favicon.ico" type="image/ico" rel="icon">

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Website Title Here</title>

<link href="styling.css" rel="stylesheet" type="text/css"/>

<style type="text/css">



</style>

<script type="text/javascript" src="morecode.js"></script>

<script type="text/javascript">



</script>

</head>



<body>

<div>

<p>Hello, and welcome to my extremely boring yet simple website! :)</p>

</div>

</body>

</html> 

To give you a better understanding of what the code above actually does, this is the only thing that would be output by the page if you were to save the above code into a ".html" file and open it in your browser:

Hello, and welcome to my extremely boring yet simple website! :) 

Conclusion

Usually, several different web languages such as CSS and JavaScript will be used in conjunction with HTML in order to create the type of pages you would normally want on your final website. Now that you know how to create a basic HTML page and where to place your CSS and JavaScript code, you are much more prepared to start using it in your web pages.