General Topics

Javascript

JavaScript is a scripting language that will allow you to add real programming to your webpages.


JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari.


What is JavaScript?

• JavaScript was designed to add interactivity to HTML pages
• JavaScript is a scripting language
• A scripting language is a lightweight programming language
• JavaScript is usually embedded directly into HTML pages
• JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
• Everyone can use JavaScript without purchasing a license

Are Java and JavaScript the same?
NO!
Java and JavaScript are two completely different languages in both concept and design!
Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++.

What can a JavaScript do?

• JavaScript gives HTML designers a programming tool - HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small "snippets" of code into their HTML pages
• JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write("
  
  

  " + name + "

  ") can write a variable text into an HTML page
• JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element
• JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element
• JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
• JavaScript can be used to detect the visitor's browser - A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser
• JavaScript can be used to create cookies - A JavaScript can be used to store and retrieve information on the visitor's computer

The Real Name is ECMAScript

JavaScript's official name is ECMAScript.
ECMAScript is developed and maintained by the ECMA organization. 
ECMA-262 is the official JavaScript standard.
The language was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all Netscape and Microsoft browsers since 1996.
The development of ECMA-262 started in 1996, and the first edition of was adopted by the ECMA General Assembly in June 1997.
The standard was approved as an international ISO (ISO/IEC 16262) standard in 1998.
The development of the standard is still in progress.

CSS

Introduction to CSS

Welcome to Cascading Style Sheets (CSS) : An Interactive Tutorial for Beginners. With the help of this hands-on CSS tutorial, you can learn virtually every aspect of CSS1, by example, according to the official W3C specifications.

Imagine you've just designed a two hundred page web site for a client (or maybe for yourself) but at the last minute your client (or you) decide the font is a little two small or the typeface should be serif instead of sans-serif? You didn't know how to use cascading style sheets (CSS) so you coded all of the pages with the old-style tag. If you didn't know CSS, chances are you'd have to replace every occurrence of the old tag with the new tag. But if you had decided to write the site with CSS from the get-go, all you would have to do is replace one single line of code in a master file, and your entire site would be rendered immediately in your new style.

That's just one file to upload. That's a lot better than two hundred. Now you can do other things with your time. This is one major reason cascading style sheets are important. CSS makes web site maintenance easier.

Basics of using CSS Styles

To start off our understanding of cascading style sheets, we're going to use a special line of CSS code that does something HTML alone could never do right… we're going to indent every paragraph automatically.

Here's the CSS code:

p { text-indent: 3em; }

As you can imagine, in its current form, the code does not but display p { text-indent: 3em; } on the screen instead of changing the way the paragraph tag behaves. We have several choices to implement this as an actual style, all of which are covered in this chapter:

• Write it inline inside each and every tag
• Place a  at the beginning of the web page
• Dedicate and link a CSS file and write it inside that file
• Use @import to include it as portion of a page's CSS 

Writing inline style inside each tag is one of the worst ways to design a CSS page, although there are a few rare circumstances where it may be appropriate. But to know CSS, you need to know how to do it, and it will also help you understand how the CSS system works.

In our example, p is the selector, that is, what is selected to follow your chosen style. What the web browser understands is that when it sees the tag p, before writing any content, it needs to indent the text 3em. (1 em is a size for laying out glyphs in print... the important thing to understand about 3em is that 3em is about 5 spaces, the typical indentation choice).text-indent is a property, and 3em is the value of that property.

All definitions in CSS follow this format:

selector { property: value; }

HTML

HTML stands for the Hyper Text Markup Language. Web sites are created with the codes of the HTML language. HTML is extremely easy to learn, and it's completely free to code web sites with it. (You don't have to pay a license fee to use HTML.)

The basics of the HTML language are easy to learn with a few short lessons.

HTML allows web sites to bring together graphics, music, video and links. The HTML code you type can be viewed on any computer. If you type it on a Windows PC, it can be viewed on both Windows and Apple computers, and if you type it on an Apple Mac, you can view it on both Macs and PCs. It doesn't matter what computer someone uses, as long as it has Internet access.

HTML is short for HyperText Markup Language.

• Hypertext is simply a piece of text that works as a link.
• Markup Language is a way of writing layout information within documents.

Basically an HTML document is a plain text file that contains text and nothing else.
When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages.
Since HTML documents are just text files they can be written in even the simplest text editor.
A more popular choice is to use a special HTML editor - maybe even one that puts focus on the visual result rather than the codes - a so-called WYSIWYG editor ("What You See Is What You Get").
Some of the most popular HTML editors, such as FrontPage or Dreamweaver will let you create pages more or less as you write documents in Word or whatever text editor you're using.
However, there are some very good reasons to create your own pages - or parts of them - by hand...
WHY LEARN HTML?
It is possible to create webpages without knowing anything about the HTML source behind the page.

There are excellent editors on the market that will take care of the HTML parts. All you need to do is layout the page.

However, if you want to make it above average in webdesign, it is strongly recommended that you understand these tags.

The most important benefits are:

• You can use tags the editor does not support.
• You can read the code of other people's pages, and "borrow" the cool effects.
• You can do the work yourself, when the editor simply refuses to create the effects you want.

You can write your HTML by hand with almost any available text editor, including notepad that comes as a standard program with Windows.

All you need to do is type in the code, then save the document, making sure to put an .html extension or an .htm extension to the file (for instance "mypage.html").
Basically, a computer sees an "A" as simply an "A" - whether it is bold, italic, big or small.

To tell the browser that an "A" should be bold we need to put a markup in front of the A.

Such a markup is called a Tag.

All HTML tags are enclosed in < and >.

Example: a piece of text as it appears on the screen. 

This is an example of bold text.

HTML: the HTML for the above example:

This is an example of bold text.

As you can see, the start tag  indicates that whatever follows should be written in bold. The corresponding end tag  indicates that the browser should stop writing text in bold.
All normal webpages consist of a head and a body.

Head

Body

• The head is used for text and tags that do not show directly on the page.
• The body is used for text and tags that are shown directly on the page.

Finally, all webpages have an  tag at the beginning and the end, telling the browser where the document starts and where it stops.

The most basic code - the code you will use for any page you make, is shown below:

HEAD SECTION
The head section of the webpage includes all the stuff that does not show directly on the resulting page.

The  tags encapsulate the title of your page. The title is what shows in the top of your browser window when the page is loaded.
Right now it should say something like "Basics - Html Tutorial" on top of the window containing this text.

Another thing you will often see in the head section is metatags. Metatags are used for, among other things, to improve the rankings in search engines.

Quite often the head section contains javascript which is a programming language for more complex HTML pages.

Finally, more and more pages contain codes for cascading style sheets (CSS).
CSS is a rather new technique for optimizing the layout of major websites.

Since these aspects are way out of reach at this stage we will proceed with explaining the body section.

BODY SECTION
The body of the document contains all that can be seen when the user loads the page.

In the rest of this tutorial you can learn in detail about all the different aspects of HTML, including:

• Text
• Formatting
• Resizing
• Layout
• Listing
• Links
• To local pages
• To pages at other sites
• To bookmarks
• Images
• Inserting images (GIF and jpg)
• Adding a link to an image
• Backgrounds
• Colors
• Images
• Fixed Image
• Tables
• Frames
• Forms
• Metatags
• Hexadecimal Colors

HOW TO LEARN MORE
This introduction presented you with the very basics of HTML.

In the rest of this tutorial you can study each of the different HTML tags in detail.

To the upper right on all pages you will find the HTML tutorial menu.

The links are arranged so you can approach this tutorial as an ongoing course.

Each link will take you to a "chapter" - 5 to 10 pages - explaining the selected topic in depth.

If you are completely new to HTML, you should start with the chapter about text and work your way through the links - ending with the chapter about hexadecimal colors.

Once you become familiar with HTML you could proceed to the javascript section, the java applet section or the Shockwave Flash section.


INTRODUCTION
To enter text on your pages - all you have to do is simply enter the text.

If you do not specify any attributes for text it will use the default size, font etc. of the visitor's browser.

Browsers can only show fonts available on the visitor's PC.

Therefore you are limited to using the fonts that are available on almost any computer.

If you need to use a fancy font, you should use your graphics program to make an image with the text. This will assure that the visitor will see it - even if he doesn't have the fancy font you're using.

Since images take up much more space than plain text, thus increasing download time, you should use this option with care.

---

On the following pages you will learn how to customize the font settings - both on normal text and text that works as a link.

Furthermore, you will learn to control how the text aligns on your pages.

Now click the Read More link to get started...


BASE FONT
To specify the overall font for your page add the  tag at the beginning of the  section.

Example: The page as it looks in the browser.

Hello! This is my page. All text looks the same since I only specified a basefont.

HTML: The code to produce the above example.

Hello! This is my page. All text looks the same since I only specified a basefont.

The color attribute selects the desired color for your text. The face attribute selects the desired font.

Note:
If you enter a list of fonts, like in the example, the browser will use the first font in the list available on the visitor's computer.
The size attribute specifies the desired size, between 1 (smallest) and 7 (biggest).
FONT
The  tag will change the font.

Example: How the output looks in the browser.

Hello! This is my page. This local text looks different. This text looks like the first line.

HTML: The code to produce the above example.

Hello! This is my page. This local text looks different. This text looks like the first line.

The color attribute selects the desired color for your text. The face attribute selects the desired font.

Note:
If you enter a list of fonts, like in the example, the browser will use the first font in the list available on the visitor's computer.

TEXT LINKS
The tags used to produce links are the  and .
The  tells where the link should start and the  indicates where the link ends.

Everything between these two will work as a link.

The target of the link is added to the  tag using
the href="http://nagawebdesigningtutorials.blogspot.com" setting.

The example below shows how to make the word here work as a link to yahoo.

Click here to go to google.

You simply: 

• Specify the target in the .
• Then add the text that should work as a link.
• Finally add an  tag to indicate where the link ends. 

TEXT FORMAT

These are the tags for text formats:

text	writes text as bold
text	writes text in italics
text	writes underlined text
text	lowers text and makes it smaller
text	lifts text and makes it smaller
text	guess yourself! (Note: Netscape only.)
text	strikes a line through the text
text	writes text as on a classic typewriter
text	writes text exactly as it is, including spaces.
text	usually makes text italic
text	usually makes text bold

Note:
The  tag is only supported by Netscape browsers, and should be avoided.