Current time: 08-23-2017, 04:07 PM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
An Introduction To Web Design (Part 1)
12-27-2011, 09:22 PM
Post: #1
An Introduction To Web Design (Part 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.
Find all posts by this user
Quote this message in a reply
02-22-2013, 12:00 PM
Post: #2
RE: An Introduction To Web Design (Part 1)
Part 2
actually doing something

If you've read the first lesson then you know there is a lot of explaining that goes on but in the end not a lot actually gets accomplished. In this lesson we hope to create a more interesting page and learn about some new tools in the HTML arsenal.

Text

Its a no-brainer that one of the most important elements on a web page is text so learning how to manipulate it is important. But what probably isn't so obvious is that HTML doesn't need to control the properties of the text elements (the size, color or fonts, etc) but rather the job of HTML is to describe each type of text element to a style sheet (more on that later) so that it can be properly represented in the final page.

For now just focus on categorizing the text on your page.

For the rest of the tutorial I will be using the PHP tags for code samples. Don't be confused, these are HTML code samples, but the syntax highlighting is similar and helpful to the learning process.

PHP Code:
...
<
body>
    <
h1>Welcome To My Page<h1>
    <
h2>Its a really good page</h2>
    <
h3>awesome even</h3>
    
    <
p>Seriously I have been working on it a long freaking time and I would appreciate a little repect.</p>
    
    <
p>I see you <span class="excited">eyeing the drapes</span>. :-/</p>
</
body>
... 

<h1> Is the most important (notice I didn't say largest) of all the headers. In HTML you are defining elements and describing their purpose rather than their physical properties.
<h2,3,4,5,6 . . . > Sub headings go down a level and so forth. If you paste the above sample (even though it is incomplete) and view the resulting page you will notice that the text contained in <h1></h1> tags are larger . . . this is because there are default style properties for certain text elements. Don't concern yourself with that now.

<p> is the most commonly used block text element. Block means that it is mean to occupy its own line or space rather than being inline

<span> is an inline element, which means it doesn't creates its own line or space but rather continues the natural flow of the current line.

You may notice that the span we have used contains a class definition. This is the proper way to delineate information so that it can be displayed correctly and also to allow manipulation of important information after the fact (more on that later).

Style

Okay now we have a little (inane) text to work with, but it is all black and white and all the fonts are different so we need to clean this up. This is normal. The process usually consists of producing information and tagging it and then process of 'prettying' the page up begins.

Now we add some style to our page:

PHP Code:
<head>
    <
style>
        
body
        
{
            
font-familyArial;
            
padding5px;
        }
        .
excited
        
{
            
font-weightbold;
        }
    </
style>
</
head

<style> tags delineate an inline style sheet. CSS (as described earlier) defines rules for the display of elements on a page

body is a standard HTML element so in your style you can refer to it by name. inside those curly brackets are rules that the browser will use to display these elements. Since we have made rules for the body, we have made rules for anything contained therein (any visible element)

.excited (note the preceding period) is our own unique class. We began by assigning this class (that didn't yet exist) to the span in our text and now we are defining rules for any element that is in this class (bold, red text)

If you put it all together you get this:

PHP Code:
<html>
    <
head>
        <
style>
            
body
            
{
                
font-familyArial;
                
padding5px;
                
backgroundblue;
                
colorwhite;
            }
            .
excited
            
{
                
font-weightbold;
                
colorred;
            }
        </
style>
    </
head>
    <
body>
        <
h1>Welcome To My Page<h1>
        <
h2>Its a really good page</h2>
        <
h3>awesome even</h3>
        
        <
p>Seriously I have been working on it a long freaking time and I would appreciate a little repect.</p>
        
        <
p>I see you <span class="excited">eyeing the drapes</span>. :-/</p>
    </
body>
</
html

And if you view that page in your browser you might see something like this:

[Image: firstpage_zps2e62fe2b.gif]

Okay it isn't awesome but its a start. Smile

In the next post we'll add some links, images and a video to our first page and also introduce some new elements to help us organize our information of the screen better.

Happy coding.

Visit this user's website Find all posts by this user
Quote this message in a reply
03-21-2013, 12:21 AM
Post: #3
RE: An Introduction To Web Design (Part 1)
Man this is awesome. I have heard a lot about such diplomas and have never been introduced with it. Honestly I like you post buddy. Will love to have more of it.

Find all posts by this user
Quote this message in a reply
03-21-2013, 12:27 AM
Post: #4
RE: An Introduction To Web Design (Part 1)
Thank you.

I plan to add more when I have time.

Visit this user's website Find all posts by this user
Quote this message in a reply
04-14-2013, 02:27 PM
Post: #5
RE: An Introduction To Web Design (Part 1)
I've come to question why I'm stilling using DOCTYPE, HTML, HEAD and BODY tags since they long since IE7 have been obsolete. In essence, you can skip DOCTYPE, HTML, HEAD and BODY:

Code:
<style type="text/css">
    .wrap {
        width: 600px;
        margin-left: 50%;
    }
    .wrap_correction {
        width: 100%;
        margin-left: -300px;
    }
    .wrap_style {
        background: #0000FF;
        color: #FF0000;
        padding: 5px;
    }
</style>

<!-- This works, too.
<link rel="stylesheet" type="text/css" href="mystyle.css">
-->

<div class="wrap">
    <div class="wrap_correction wrap_style">
        Helly, world!
    </div><!-- .wrap_correction -->
</div><!-- .wrap -->

No HTML, HEAD, or BODY required. As long if it's in an appropriate file that the server has been set to read (.HTM, .HTML, .PHP, .ASP, .BLABLAHBLAH, it will produce "Hello, world!" in the browser, with styles and js included, no matter what. All I can think of, that would have an issue with this, are bad search engines, and outdated browsers. So, my question is, why are we (as innovative designers) still making a habit out of this?
Find all posts by this user
Quote this message in a reply
04-14-2013, 07:04 PM
Post: #6
RE: An Introduction To Web Design (Part 1)
It is not a bad habit, it is the W3C standard.

Web developers all include this information as a way to specify how the browser should treat a page. In today's web with HTML5 and the latest advances a chasm is forming between the new school and the old.

It would be insanity not to include HTML structured tags in your web pages.

And yes, that code you posted will work but it is a sloppy mess and no good can come from sloppy markup.

Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


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



User(s) browsing this thread: 1 Guest(s)