Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
<
[-]
Welcome To Rant Central
You have to register before you can post on our site.

Username:
  

Password:
  




An Introduction To Web Design (Part 1)
#1
If you've ever wanted to create your own web page or just wondered how they work you are not alone. Many people are curious about designing web pages, but don't know where to start. A few years ago I began to take an interest in the subject and my research lead me to many discoveries that fascinated me and gave me a deeper understanding of how web pages are constructed. With so many acronyms floating around, it seemed a little difficult at first to understand the differences.

  • HTML (or XHTML) stands for Hyper-text Markup Language. Learning about HTML is essential to the process of understanding web design and coding. It defines the structure of the web page and tells the browser how to treat the information stored on the page. XHTML is a new standard for HTML that deprecates obsolete tags and references and hold the HTML code to a strict standard.
     
  • CSS stands for Cascading Style Sheets and specifies how the information on the page should be displayed. You can use CSS to style the information in HTML documents with different fonts, colors and sizes and much more.
     
  • JavaScript is a programming language that provides interactive content on web pages. It is a scripting language that runs through your browser to modify the content or the way it is displayed through user interaction. It is important to specify that there are two types of scripting languages. JavaScript runs on your browser and modifies content after the page has loaded from the server.
     
  • PHP is an example of server-side scripting. Scripts written in PHP are executed on the server before it is loaded into your browser. This allows the web page to create a customized experience for the user based on information queried from a database or user settings.
     
  • There are many other languages used to develop web content such as AJAX, JAVA(not the same as JavaScript), SQL, XML and many others. It is beyond the scope of this primer to explain each of these and their uses, but the World Wide Web Consortium(W3C) is dedicated to the furtherance of education in all fields of web development and information can be found there about all of these languages and more.

You may be wondering where to start learning and which of these languages are the most important. This tutorial and the editions that will follow are to give you an idea of how to go about learning to create your own web pages and what to learn and when.

HTML

To begin with, HTML is a great place to start because it is essential to understanding web development and no web page can be created without it. It is important to understand that HTML is not intended to store the style information of the page, but instead to delineate the information on the page and properly label it so that the browser can identify and correctly handle it.

Let's start with the most basic HTML code possible and then we can work our way up to a more detailed discussion.

Code:
<html>
    <head>
    </head>
    <body>
        A very simple example.
    </body>
</html>


Before I begin to break down the code, let me introduce you to the methods of viewing this page on your browser so that you may see what this code produces. First of all, you don't need a special editor to create HTML files and view them on your browser. A simple text editor like Windows Notepad will suffice. Word processors like Microsoft Word or OpenOffice use formatting to save style information and do not output simple text like Notepad so be sure that whatever program you use saves in plain text(ASCII/ANSI) and not in any special format. The default extension for plain text is '.txt', but in these cases we will be creating plain text files with the extension '.html'.

Open Notepad or your preferred plain text editor and paste the above example into it. Save the file somewhere that you can find it easily and save it as 'test.html'. Once you've done that, find the file and double-click it and it should immediately open in your web browser.

Don't be disappointed by the simplicity of our first page. It has only one line of text, but soon you will see that the complexity of the page is limited only by your ingenuity and the knowledge you have. Now let's break down the code:


Code:
<html>


In HTML information(text, images, videos) is tagged for identification by the browser. Each tag is enclosed between the '<' and '>' characters. This is to let the browser know that it has encountered an HTML tag. The name of the tag appears between these '<' and '>' characters and should always be lower case.

Now on to the explanation of this particular tag. If you read to the bottom of the code you will see another simliar tag:


Code:
<html>
...
...
</html>


These are opening and closing tags. An opening tag specifies that everything following is HTML code and the closing tag tells the browser that the HTML has ended. Closing tags always look just like opening tags with the addition on a forward slash(/) after the 'less-than' sign.

One exception are empty tags which cannot contain other elements or tags. More on those later.


Code:
<head>


This tag indicates that all that follows(until the closing tag is reached) is header information for the page. This is not the information that will be displayed in the page itself, but rather information about the page.

Look for the closing tag near the bottorm of the code. Now we have identified two sections of the code:


Code:
<html>
    <head>
    ...
    </head>
    ...
</html>


Notice that the opening and closing 'head' tags are both within the 'html' tags. This is not only a good practice, but is a requirement called proper nesting The following is an example of improper nesting and will generate errors or unpredictable results:


Code:
<html>
    ...
    <head>
    ...
</html>
    </head>


Now back to the code. We have one more section to break down:


Code:
    <body>
        A very simple example.
    </body>


The 'body' tag marks the actual content of the page to be displayed by the browser. In this case it is a line of text, but could include pictures, videos, hyper-links and more. In the next tutorial, we will examine how to add different content to our HTML code and produce more exciting examples of HTML in action.

Please feel free to comment and/or ask questions concerning this part of the tutorial series. Remember that if something is unclear to you, others may find it unclear as well and by asking you will be helping yourself and others.

Happy coding.
Wildcard is awesome.
Reply


Messages In This Thread
An Introduction To Web Design (Part 1) - by Mark - 12-27-2011, 09:22 PM

Possibly Related Threads...
Thread Author Replies Views Last Post
  Introduction to IRC. Spud17 6 6,710 01-19-2015, 03:31 PM
Last Post: Arachne



Users browsing this thread: 1 Guest(s)