An Overview of Web Pages
Extending web page capabilities
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:
Consider it your official web coding guideline website, because that's basically what it is. ;)
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:
- Radio buttons and checkboxes
- Text boxes
- Text fields (big text boxes used for multi-line text)
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:
- 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.)
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
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.
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:
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.
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).
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.).
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! :)