Post: Beginner CSS - HTML - JavaScript
Options
08-21-2011, 02:30 AM
#1
4G
Banned
Welcome to the HTML, JavaScript & CSS tutorial thread. 
ENJOY TUTORIALS!!
ENJOY TUTORIALS!!
Definitions
HTML - Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages
JavaScript - JavaScript is a prototype-based, object-oriented scripting language that is dynamic, weakly typed and has first-class functions. It is also considered a functional programming language like Scheme and OCaml because it has closures and supports higher-order functions.
CSS - Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
Big Thanks to derfleurer
[multipage=XHTML Tutorial]
I'll begin with a few pointers:
Requirements
* Don't use any WYSIWYG-only programs, such as FrontPage and FPExpress (less still, NetObjects Fusion), or IDE "Design mode", such as Visual Studio's "Web Forms Designer" or Dreamweaver's "layout mode"
XML?
XHTML is the HTML schema on XML, XML is a subset of the fully blown SGML. HTML is a variant of SGML.
Confused yet?
The XML specification has certain rules, the main ones are:
1) XML markup is used to describe the data it contains
2) NOT its rendering
3) Tags must be semantic, relevant
4) ...And must be formatted accordingly (ie: If you start a paragraph <p>, then you MUST close it with a </p>, you can't overlap tags, such as <b>bold<i>bold-italic</b>italic</i> either
5) For cross-platform applications, tags and attributes (but not nessacerily attribute values) must be in lower case, the XHTML specifiction states everything must be in lower case (i
Okay, so lets get started with the basics:
Semantics
Semantics is concerned with the meaning of words, and in this context... that the tag is representing something meaningful....
Take the <table> element for example. Semantically, the <table> element should only be used for the display of tabular data. NOT to layout a page, I'll get into that later
XHTML is intended to be used as a means of information exchange, a common, open format for structuring documents so that they can be read on any device with an appropriate reader in place. Therefore, the contents of XHTML documents should be platform-agnostic, kapeesh?
You can have a lengthy graduate thesis document, or a simple paragraph page, or even a website gallery... all of these can be defined with semantic XHTML.
Consider the graduate thesis:
We'd have, say... a title
The document title would be the topmost heading, so we use the <h1> tag.
Like so:
<h1>My Graduate Thesis</h1>
We are also required to make the <title> element, the child of <head> to be appropriate as well, so:
<html>
<head>
<title>My graduate thesis</title>
</head>
<body>
<h1>My Graduate Thesis</h1>
</body>
</html>
This makes sense so far?
Okay, before we continue... there are differences in the way browsers are meant to handle XHTML compared to HTML, therefore, we need to tell the browser what version of HTML or XHTML we're using. Right now, I'm developing with XHTML 1.1, the latest incarnation of the standard. Note that there is no "strict", "frameset", or "transitional" variant, because this is FINAL and you're meant to stick to it. I'll explain Frames later on.
This:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Is a DTD, a "Doctype Declaration", it tells the agent/software, what XML/HTML scheme is in place. The URI to the w3.org is the location of the schema which a browser can download if it doesn't "understand" XHTML1.1
We need to include the DTD at the top of the code so that its the first thing that the browser downloads.
Moving on.... my graduate thesis would contain a list of all the pages, a "table of contents". Now, some might go "oooh! ooh! its a table of contents, so therefore, I use a table!", well no... you're wrong.
A table of contents isn't a table in the strict sense, its more of a "list". Remember that the web is NOT the same media as print, fixed sized designs do NOT sell.
So therefore, we use one of the 3 list elments.... <ol> <ul> and <dl>
<ol> is the "ordered list", since its ordered the browser should display them in an ordered manner, typically its numeric and the numbering is done automatically, so this:
<ol>
<li>Hello</li>
<li>World!</li>
</ol>
[code]
would be rendered as:
[code]
1. Hello
2. World!
<ul> is the "undordered list", its essentially the same as the ordered list, except that it uses bullets instead, since no specific order is implied by the list given
Don't worry if you're wondering why you can't use the "type=""" attribute to change the "type" of the list to say... roman numerals, you do this using CSS, which I'll explain later
<dl> and its child elements, <dt> and <dd> are used to define "title/text" pairs, these are mainly used for things such as glossaries and definition lists (hence the name... DL - Definition List)
So anyway, now I know how to define the contents list:
<ol>
<li><a href="#intro">Introduction</a></li>
<li><a href="#xhtml">Beginning XHTML</a></li>
</ol>
You'll notice I've added anchor tags that link to #intro and #xhtml sections in the document
okay, its only a short list, but you get the idea.
Okay, so now that we've got a title and contents list, lets start with the content:
<h2 id="intro">Introduction</h2>
<p>Lorem Ipsum Dolor Sit Amet</p>
You'll notice I used <h2 id="intro"> rather than <a name="intro">, this is because the "ID" attribute replaces the "name" attribute of HTML3.02. Any "#" links tell the UA to go to that ID in the page, XHTML is so wonderful y'see
Note:
I'd just like to add that all tags that don't have closing pairs... such as <img src=""> and <br> are meant to be typed up diferently
Since in XML everything needs to be closed properly, you define these tags as being "self-closing", note the following:
HTML3.02
<img src="something.img">
<br clear="both">
in XHTML1.1
<img src="something.img" alt="" />
<br />
You'll notice the " />" at the end, this tells the UA that this tag hasn't got a closing half.
The line-break tag also doesn't have any clear attribute anymore, this is handled by CSS now.
Oh, and the <img /> element now has a REQUIRED attirbute, "alt=""" which tells the UA what to render if the image can't be found OR if the UA can't render the image, its "alternate text". It is NOT, I repeat, NOT. meant to be abused as a tooltip. If you want tooltips in graphical browsers, then use the title="" attribute. Only IE6 incorrectly renders alt="" as a tooltip.
[multipage= JavaScript Tut]
How do I address javascript?
* You use the <script></script> tags. Inside them you will put the js to be executed. The correct way to write it is <script type="javascript"> but js is the default scripting language for all browsers so <script> works fine.
How do I write text?
* You would first write your tags. Then you would write
document.write("hello"); Example below.
<script>
document.write("hello");
</script>
So, what the heck is this saying? document tells the browser to look at the document of the window and write says to write the text in the parenthesis. Together they say, look at the document and write hello into it. ; says to end it. It stops the code there so it doesn't combine with the ones that follow. You will see why hello(our text) needed quotations later.
Writing comments
<script>
document.write("how ya doin?"); //text you want displayed
</script>
Something new. //text. This is a comment. It doesn't show up in the code, it is used to to guide people through your script so they know what each part means. If your comment is going to be more than 1 line long then use this instead
/*My Comment*/
So far we've covered how to address javascript, how to use it to write text, and how to create comments. These a necessities. Next we will go over variables.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
What are variables?
Variables are used to store data in javascript.
<script>
var myVariable="hello";
</script>
What's that mean? var declares a variable. myVariable is the newly declared variable's name. The = sign says that myVariable equals some value. Here, the value of myVariable is hello. The names and values of your variables can be anything. Keep in mind that variable names are case-sensitive and cannot contain spaces. Now we'll get into why it must have quotations.
<script>
var myVariable2=15;
</script>
Notice something different? There are no quotations around our value. Anything in quotations is called a string. Strings are like sentences and they are displayed as they are written.
How do I write variables?
<script>
var myVariable="hello";
document.write(myVariable);
</script>
Ok...so why isn't myVariable in quotations? Like I said, anything in quotations is a string and strings are displayed as they are written. So, if it were in quotations, it would have written the words myVariable instead of the value of myVariable.
So now we know how to write variables. What's next?
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<script>
alert("hello");
</script>
What's this do? It creates an alert box that says hello. This is just like our document.write(); You can use variables here as well.
<script>
prompt("What's your name?","derfleurer");
</script>
This creates a prompt. Prompts have 2 parts. There's a request and an input. The first set of quotations is the request and the second is the input. Either can be left blank. Variables can be used here too...they can be used almost anywhere.
<script>
var myPrompt=prompt("What's your name?","Kate");
</script>
If you're using alerts/prompts/etc. in your variables don't put quotations around them. They would be identified as a string and the alert or prompt would not be executed but instead be written.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<script>
var myVariable="my name is ";
document.write(myVariable + "joe");
</script>
As you know, variables won't have quotations and strings will. So how would you combine them? Look at the above script. It declares a variable with the value my name is . Below it we write the variables and use + to combine the variable with a string. So, the above will do the same thing as saying:
<script>
document.write("my name is joe");
</script>
Cool, eh? But how can this be useful? Here's an example:
<script>
var myPrompt=prompt("what's your name?","");
document.write("Hello" + myPrompt + ", welcome to HTML Help Central");
</script>
This declares a variable with a prompt value. We then write Hello plus whatever the user's input in the prompt is plus , welcome to HTML Help Central. So, if you put your name as Mike in the prompt, you would recieve a message saying Hello Mike, welcome to HTML Help Central.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
For this lesson, we'll be reviewing what you've learned thus far.
<script>
var myPrompt=prompt("What's your name?","");
alert("Hello " + myPrompt);
</script>
This should be pretty obvious to you. We have created a variable with a prompt value. The prompt's request is What's your name?. We then created an alert combing Hello with the users input in the prompt. So, if you said your name was Jackie, you would have recieved an alert saying Hello Jackie.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
What's an Array?
An array is very similar to a variable. It is used to store multiple values.
<script>
var myArray=newArray("value1","value2","value3");
</script>
So, what's this saying? We have created a variable with multiple values thanks to an array. This makes things alot easier when scripting. newArray(); addresses the array. Inside the parenthesis is where we hold the array's values. So, instead of making 3 different variables with 3 different values, we now have only one variable which carries all 3 values.
How do I write the Array?
<script>
var myArray=newArray("value1","value2","value3");
document.write(myArray);
</script>
Since our array is myArray's value, we simply write it like we would any other variable. So, the above would say value1value2value3.
Wait...so how do I write each value separately?
<script>
var myArray=newArray("value1","value2","value3");
document.write(myArray[0]);
</script>
This is the same as our previous example except for [0]. What's this saying? It says to write the first value of myArray which would be value1. Javascript starts counting at zero so value1 would be [0], value2 would be [1], and value3 would be [2].
Don't go any further unless you completely understand Lessons 1 through 6.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<script>
var myPrompt=prompt("What's 9x9?","");
if (myPrompt=="81"){
alert("Correct!")}
</script>
Confused? Don't worry, I'll be breaking this down and explaining every bit of the script.
What's new? Almost everything! First i'll explain what this does. This creates a prompt asking what 9 times 9 equals. If you say 81, you will get an alert saying Correct!.
The major focus here is if(){}. That is the soul of our script. It says that if some statement is true, execute the javascript in these brakets {}. Look at the below. We will now begin to break down the script.
<script>
if (some statement is true)
{
do something
}
</script>
Inside the parenthesis () you will put your statement. In our previous example we said if (myPrompt=="81"). This states that if the users input in the prompt equals 81, execute whats in the brackers {}. {}, whatever is in these brackets will be executed if the statement in the parenthesis is true. In our previous example we said alert("Correct!");. So, altogether we said, if the users input in the prompt is 81, execute the alert Correct!. Still a little confused? Let's do some more examples.
<script>
if (5<10)
{
alert("Hello")
}
</script>
Ok, what's our statement say? It says that if 5 is less than 10, execute what's in the brackets {}. Now, if the stement above is true, what will be executed? If our statement 5 is less than 10 is true, we will recieve an alert saying Hello. Ok, a couple more examples and we're ready for the next lesson.
<script>
if (5>10)
{
alert("Hello");
}
</script>
This says that if 5 is more than 10, execute the alert Hello. Well...is 5 more than 10? No, it's not. And since the statement is false, we will not recieve the Hello alert.
<script>
var myPrompt=prompt("What's the password?","");
if (myPrompt=="yokjijo")
{
alert("Correct!");
}
</script>
This says that if the users input in the prompt equals yokijo, execute the alert Correct!. Ok...why is yokijo in quotations? It's in quotations because it's a string. If it didn't have quotations, it would have been identified as an undefined variable. So, why didn't the other examples have quotations? if (5>10) let's look at this one. It doesn't have quotations because it involves numbers. If they had quotations, they would be identified as strings and wouldn't have the same properties as numbers.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Ok, make sure you understand Lesson 7 before you go into Lesson 8.
<script>
var myPrompt=prompt("What's the password?","");
if (myPrompt=="abc123")
{
alert("Correct!");
}
else
{
alert("Wrong!");
}
</script>
What's this say? This says that if the user's input in the prompt is abc123, execute the alert Correct! and if their input is not abc123, execute the alert Wrong!.
Else? Else says that is the statement is not true execute what's in the brackets {} that follow. Here's what I mean:
<script>
if (some statement is true)
{
do something
}
else
{
do something
}
</script>
Again, else executes what's in the brackets {} if the statement is false.
Remember this?
<script>
if (5>10)
{
alert("Hello");
}
</script>
Let's add else to it.
<script>
if (5>10)
{
alert("Hello1");
}
else
{
alert("Hello2");
}
</script>
So, since five is not more than ten, the statement is false, so the js following else will be executed instead. This means you'll get the alert Hello2.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
for loops are used to count through things in javascript.
<script>
for (var i=0; i<5; i++)
{
document.write(i);
}
</script>
What's new? This is our for loop for(){}. What goes inside the parenthesis? Just look below:
<script>
for (variable; statement; increment)
{
do something
}
</script>
The first part of the for loop is your variable. In our previous example we declared the variable i and gave it the value 0. The second part is your statement. In the previous example we said i<5. This asks the browser if the value of i is less than 5. If it is, the increment comes into play. It says to increase i by 1 each time. Together they say, Declare the variable i and give it the value 0, if i is less than 5, increase i by one each time it's less than 5.
<script>
for(var i=0; i<10; i++)
{
document.write(i);
}
</script>
This will write 0123456789.
Is there a way to loop arrays?
Yes.
<script>
var myArray=newArray("value1","value2","value3");
for (var f=0; f<myArray.length; f++)
{
document.write(myArray[f]);
}
</script>
What's new here is .length and myArray[f]. By adding .length to myArray we have now created myArray.length which is now addressed by the browser as the number of values in the array. So, for our above example myArray.length holds the value 3. myArray[f] says to loop myArray with i.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Congratulations. You've completed the tutorial, you're on your way. I'd like you to try and write some of your own scripts and expirament a bit. Here are some examples for you. I'll break down the first one. Try and explain the others and if you think you got it p.m. me and i'll check it over.
<script>
var myPass=prompt("What's the password?","");
var theAnswer="yokijo";
if(myPass==theAnswer){
alert("Correct!");}
else{
alert("Wrong!")}
</script>
Pretty obvious, right? First we declared some variables. myPass had a prompt value. theAnswer contains the value needed to make the if-then statement true. Neither of these variables do anything or have any meaning without if(){}. The if-then statement says that if the users input in myPass equals the value of theAnswer, execute the alert Correct! and if it doesn't, execute the alert Wrong!.
If there's something you don't understand, look back in the tutorial. If your still lost, p.m. me for support.
<script>
var myPrompt=prompt("What's your name?","");
document.write("Hello " + myPrompt);
</script>
<script>
for(i=0;i<=9;i++){
document.write(i);}
</script>
<script>
var myPrompt=prompt("9x9=","81");
var myArray=new Array("That's right!","I'm disappointed in you.");
if(myPrompt=="81"){
document.write(myArray[0]);}
else{
document.write(myArray[1]);}
</script>
[multipage=JaveScript Game]
Introduction:-
Here I will show you how to make a simple 'Guess The Number' game. It will do fine as your first game!
Solution:-
This goes in the <head>:-
<SC
T LANGUAGE="JavaScript">
var num = Math.floor(Math.random() * 101);
function guessnum(){
var guess = document.forms['form1'].num.value;
if (guess == num)
{
alert("Great you Guessed! How did you know that?");
}
if (guess < num)
{
alert("No your number is too low!");
}
if (guess > num)
{
alert("No your number is too high");
}
}
</SCT>
And this in the <body>
<form name="form1">
Enter a number <input type="text" size=5 maxlength=3
name="num"> <input type="button" onClick="guessnum();"
value="Enter">
</form>
Explanation:-
var num = Math.floor(Math.random() * 101);
This is a Mathematical Function Math.Random() is to choose a random number *101 means up to 100 so the numbers will be from 0 to 100 and Math.floor is so to eliminate any decimal points
[multipage= CSS Tutorials]
AN INTRODUCTION TO CASCADING STYLE SHEETS
CSS is the abbreviation of: ‘Cascading Style Sheets’. CSS is an extension to basic HTML that allows you to style your web pages.
An example of a style change would be to make words bold. In standard HTML you would use the <b> tag like so:
Code:
<b>make me bold</b>
This works fine, and there is nothing wrong with it per se, except that now if you wanted to say change all your text that you initially made bold to underlined, you would have to go to every spot in the page and change the tag.
Another disadvantage can be found in this example: say you wanted to make the above text bold, make the font style Verdanna and change its color to red, you would need a lot of code wrapped around the text:
Code:
<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif"><strong>This is text</strong></font>This is verbose and contributes to making you HTML messy. With CSS, you can create a custom style elsewhere and set all its properties, give it a unique name and then ‘tag’ your HTML to apply these stylistic properties:
Code:
<p class="myNewStyle">My CSS styled text</p>And in between the <head></head> tags at the top of your web page you would insert this CSS code that defines the style we just applied:
Code:
<style type="text/css">
<!--
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
-->
</style>
In the above example we include the style sheet code inline, or in other words, in the page itself. This is fine for smaller projects or in situations where the styles you’re defining will only be used in a single page. There are many times when you will be applying your styles to many pages and it would be a hassle to have to copy and paste your CSS code into each page.
Besides the fact that you will be cluttering up your pages with the same CSS code, you also find yourself having to edit each of these pages if you want to make a style change. Like with JavaScript, you can define/create your CSS styles in a separate file and then link it to the page you want to apply the code to:
Code:
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css">
The above line of code links your external style sheet called ‘myFirstStyleSheet.css’ to the HTML document. You place this code in between the <head> </head> tags in your web page.
HOW TO CREATE A LINKED EXTERNAL STYLE SHEET
To create an external style sheet all you need to do is create a simple text document (on windows you simply right-click and select new -> text document) and then change the file from type .txt to .css.
You can change the file type by just changing the files' extension. The files' extension on windows tells the computer what kind of file it is and allows the computer to determine how to handle the file when for example you try to open it.
You probably guessed it; CSS files are just specially formatted text files, and much in the same way HTML pages are. There is nothing special or different in the file itself, rather it is the contents of the file that make an HTML document and a CSS page what they are.
When working with a external CSS document, there are a couple of points to remember:
1. You don’t add these tags in the CSS page itself as you would if you embedded the CSS code in your HTML:
Code:
<style type="text/css">
</style>
Since the CSS link in your web page says that you are linking to a CSS page, you don’t need to declare (in the external CSS file) that the code in the CSS page is CSS. That is what the above tags do. Instead you would just add your CSS code directly to the page like so:
Code:
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my2ndNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my3rdNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
In the above example I have created a series CSS classes that can be applied to any HTML tag like so:
Code:
<p class="myNewStyle">My CSS styled text</p>
or
Code:
<h2 class=”my3rdNewStyle”>My CSS styled text</h2>You will notice that in the above example I applied a CSS style to a <h2> tag. Normally this tag sets the size of the text that it wraps to a size that is preset in the browser (ex: 10 pixels).
When you apply a CSS class to it, the CSS code overrides the default size that you would normally get with an <h2> tag in favor of the size specified in the CSS class. So now you can see that CSS can override default HTML tag behavior!
In the above examples, I have CSS code where I define my CSS classes and then ‘apply’ them to various elements in the page. Another way to apply CSS is to globally redefine an HTML tag to look a certain way:
Code:
h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; }
What this CSS code does is set the font style and size of all <h1> tags in one shot. Now you don’t have to apply a CSS class as we did before to any <h1> tags since they are automatically all affected by the CSS style rules.
Here is another example of where I give the whole page bigger margins:
Code:
body { margin-left: 15%; margin-right: 15%; }
As you can see, you can redefine any tag and change the way it looks! This can be very powerful:
Code:
div {
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;
}
The above CSS code sets that any <div></div> tag will now have a background color of ‘rgb(204,204,255)’ and have a padding of 0.5em and a thin 1 pixel border that is solid black.
A few things to explain about the above:
Color in CSS can be expressed in a few ways:
1. In Hex -> for example: #000000 – this is black and this: #FF0000 is red.
2. In rgb -> rgb(204,204,255) is a light purple blue color.
3. With named colors like: ‘red’ or ‘blue’
I typically use hex color since I am familiar with them or I just use named colors. So the last example can be rewritten like so:
Code:
div {
background: green;
padding: 0.5em;
border: 1px solid #FF0000;
}
So instead of ‘rgb(204,204,255)’ , I just specified ‘green’.
By using RGB (RGB is the acronym for: ‘Red Green Blue’
and Hex color, you can really get the exact color you want easily when you know your codes. Luckily many programs (like Dreamweaver) provide easy to use color pickers for you so you don’t need to know the values for the code.In this last example I will show you the ‘super cool’ CSS code that allows you to create link roll-over affects without images:
Code:
a:link { color: rgb(0, 0, 153) }
a:visited { color: rgb(153, 0, 153) }
a:hover { color: rgb(0, 96, 255) }
a:active { color: rgb(255, 0, 102) }The above CSS will cause your links to change color when someone hovers their mouse pointer over it, instant rollovers with no images! One important note with the above code, is that it is important that the style declarations be in the right order:
Code:
"link-visited-hover-active",
... otherwise it may break it in some browsers.
CSS is very powerful and allows you to do things that you can’t do with standard HTML. It is supported nicely now in all the modern browsers and is a must learn tool for web designers.
The above examples are just a small sample of what you can do with CSS, but it should be more than enough for you to start styling your pages nicely.
Like with many technologies CSS has a lot of capability that most people will not need to use often, if at all. So don’t get caught in the trap of thinking that if there is some functionality/feature available that you have to use it.
[multipage=How to make a Website]
Not providing the tutorial here but go to
You must login or register to view this content.
and
You must login or register to view this content.
[multipage=Final]
Well that's it (for now) thanks for looking
if you need more tutorials and like the Post quote me also if you need a question answered
---------- Post added at 09:30 PM ---------- Previous post was at 07:48 PM ----------
Done!!!!!!
09-17-2011, 06:35 AM
#2
jaidondax
Save Point
I suggest you use Beginning HTML, XHTML, CSS, and JavaScript book. Also, I prefer this book. This is one of the best written technical books that I've read lately. If you've capital to know, "how do I accomplish a web page from scratch?" this book will explain how, footfall by step. I'm already adequate with a lot of aspects of HTML, so I'm moving on to the more interesting areas: CSS and JavaScript.
09-18-2011, 06:40 PM
#4
Alexis Rhodes
#get rekt
Copyright © 2026, NextGenUpdate.
All Rights Reserved.
