Programming Languages for Beginners: 2012

CSS - Border

Borders can be applied within the body of HTML Document. It allows to specify the style & color of the border.

Border Style

none - Defines no borders
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines two borders outline with same width
groove - Defines 3D groove border
ridge - Defines 3D ridge border
inset - Defines 3D inset border
outset - Defines 3D outset border

Border Width
border-width property is used to set values for the border width

Border Color
border-color property used to set border color

Different side Borders

Border-top
Ex:
border-top-style : dotted;

Border-right
Ex:
border-right-color : red;

CSS - Padding

Padding is the property for space inside of the element.

Ex:
p{
padding : 3px;
}

Following are the properties related to the padding

padding-top
padding-bottom
padding-right
padding-left

CSS - Margin

Margin is the property for space outside of the element.

Ex:
p{
margin : 3px;
}

Following are the properties related to the margin

margin-top
Margin-top property specify the space from the top border to the text.
margin-bottom
Margin-bottom property specify the space from the bottom border to the text.
margin-right
Margin-right property specify the space from the right side border to the text.
margin-left
Margin-left property specify the space from the left side border to the text. This is the default margin. Same output comes with margin-left & margin.

Javascript is a client-side scripting language and can be used with HTML.

alert
Web browser displays Message Window with the event of calling javascript.

<a href = "http://programmingforbeginers.blogspot.com" onclick = "alert('This is a Javascript message')">Programming Languages for Beginners</a>

CSS - Styles for Text

Font color
This property specify the color of the texts.
Eg:
body{
color : red;
}

Font Family
font-family property specifies the font face of the texts. Most of them uses arial, Verdana, Times New Roman. You can specify morethan one font seperated by commas. Purpose is that if there is not available the font you specified as first then browser will go to the next font. Font name is not a one word then specify it within the quoted marks.
Ex:
p
{
font-family: Times, "Times New Roman", serif;
}

Font Size
font-size property specifies the Size of the Text. It is important to manage font size in the web page. Don't use font sizes for the paragraph looks like a heading or make headings as a paragraph. Use proper HTML tags for the formattings. Value of the Font can be either relative or absolute.

Absolute Size
Set the text to specified size which is useful for the known out put text sizes
Relative Size
Set the size relative to the elements and allows users to change the text sizes in the browser.

Ex:
p
{
font-size : 12px;
}

Div - Formatting of Block Text
The <div> Tag provides easy way to refer a block text.This element is very important when you are applying styles to block of text.
Ex:
<div align = "center">
   Programming Languages for Beginners <br />
   Priyal Kulathilake
   SriLanka
</div>

Span Formatting Inline Text
The <span> element selects inline text to apply styles.
Ex :
   <div align = "center">
      This is my Blog Site <span style = "color : Blue">Programming for Languages Beginners
</span> for the absolute beginners of Web Programming   </div>

Out put:
This is my Blog Site Programming Languages for Beginners for the absolute beginners of Web Programming
Blink
Displays enclosed text as blinking on and off approximately once a second.
Ex:
<blink style = "color : Blue">Programming Languages for Beginners</blink>

Output
Programming Languages for Beginners

Marquee
Displays scrolling text in a marquee style. That displays a moving banner.
Ex:
<marquee align = "left" loop = "infinite" behavior = "bounce" bgcolor = "orange" direction = "right" style = "color : Blue">Programming Languages for Beginners</marquee>

direction: direction of the moving text
Ex: Left to Right, Top to bottom
behavior : behaviour of the marque
Ex: Scroll, Slide, Alternate, Bounce

Will be continue

CSS - Colors

Defining Color values of the CSS as same as the HTML. You can define colors 3 ways

color : white
color : rgb(0, 0, 0)
color : #000000

Font Color

We can specify the style for font color by using "color" property for the each selector

Ex :

body{

color : yellow;

}

Background Color

We can specify the style for Background color by using "background-color" property for the each selector

Ex :

body{

background-color : orange;

}

Selector

In the CSS We are using Selectors instead of the tags of HTML. I think now you are familiar with tags in HTML. Selectors are the names similar to HTML tags given to Internal and External Stylesheets. Selectors are defines with curly brackets.

Properties

Within the curly bracket of Selector specifying properties. Properties are like to be an HTML attributes such as color, backbround. Value of the property following a colon (in HTML value given after equal sign). Each of property value pairs ends with semi colon. But last value can be defined without a semi colon at the end of it.
p{
color : blue;
font-size : 12;
text-align :justify
}
These values apply to the font color, font size & align of the text to every Paragraphs in the HTML Document.

How to Apply CSS

How to apply CSS to HTML

There are 3 ways to apply CSS to HTML

As an Inline CSS
As an Internal CSS
As an External CSS Document

Inline CSS
Inline CSS Style is included to the HTML tags using style attribute. Inline styles apply to the defined segment only. Each propery seperated by ";".
Ex:
<a style = "color : Blue">This is a Inline styled Text</p>

Internal CSS
Internal CSS styles can be used to the whole HTML Document and defines inside the header segment using style tag. Each propery seperated by ";".
Ex:
<html>
<head>
<style = "text/CSS">
a{
color : blue
}
body{
color : red;
background : orange
}
</style>
</head>
This Stlyes apply for the whole body of the HTML document & all links

External CSS
In this method, using a seperate CSS file to format the HTML Document. It saved with extention of CSS ank link to the HTML document.
Ex:
myStlye.css
P{
color : blue
}
body{
background-image : url("images/backgroung.jpg")
}

MyFile.html
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "myStyle.css" />
</head>
<body>
.....
</body>
</html>

HTML - Colors

Few of W3C predefine Color Values

Aqua	#00ffff
Black	#000000
Blue	#0000ff
Gray	#808080
Green	#008000
Lime	#00ff00
Maroon	#800000
Red	#ff0000
White	#ffffff
Yellow	#ffff00

CSS - Hyperlink Formatting

Following Example says how to make internal styles for HTML Hyperlink.

Ex:
<head>
   <style type = "text/css">
      body{
         background : orange;
         color : black
       }

      a:link{
         color : red
      }

      a:visited{
         color : green
      }

      a:active{
         color : blue
      }

      a:hover{
         color : yellow
      }

   <style>
</head>

<body>
   Welcome to my blog of Programming.
    <a href = "http://programmingforbeginers.blogspot.com/">The Best Programming for Beginners </a>
</body>

HTML Forms

HTML Forms are used to send data to a server accross the web. There are lot of form elements such as text fields, radio button, check boxes, buttons and more. In HTML we can define the form elements with various html tags.
The basic tags used for forms are <form>, <input>, <textarea>, <select> and option.

<form> tag uses to create HTML forms.
Syntax :
<form>
--Form elements --
</form>
Attributes of the form element

action
action attribute describes where the form content will be sent when it is submitted.
method
method attribute specify hot to passes this information. There are 02 methods available for data passing i.e get & post.

GET
default method is get. when using this method browser displays sending data with its URL.
POST
Post method hides information. Passwords & othere confidential data sending with this method

Ex:
<form action = "getDetails.php" method = "POST">
-- Form elements --
</form>

Text Boxes
This tag defines a single-line input field to enter texts
Syntax:
<input type = "text" value = "Text here" />

Value attribute uses to define default value of the text box.
Ex:
Code:
<form>
Name: <input type = "text" value = "Your Name here" />
Address: <input type = "text" value = "Your Address here" />
</form>

Output :
Name :
Address:

HTML Images

Images are the most common form of multimedia using to create attractive web pages. HTML Images are defined with <img> tag.

Important Attributes of the <img> element

src
This attribute define where the image loads by browser. When defining the path of the image you can specify it as a relative or absolute way.
Ex:I have a image folder in the root directory of my site & use myHome.jpg image can be this way

* Absolute path

<img src = "http://programmingforbeginers.blogspot.com/image/myHome.jpg" />

* Relative Path

<img src = "image/myHome.jpg" />
width & height
width & height attributes define the size of the image. If excluded these attributes browser will tend to load the image as its original size.

alter
This attribute uses to define the alternative description of image which is unable to load view.

Ex: <img src = "image/myHome.jpg" height = "100" width = "150" alt = "My Home image"/>

HTML - Tables

HTML Tables

HTML Tables define with <table> tag and ends with </table> tag. Normally a table have rows & columns. intersection of both column and row is called a cell. In HTML we can define Rows with the its cells. Table row defines with <tr> & </tr> tag pairs and each cell defines <td> tag.

Ex:
<table>
<tr>
<td>1 - 1</td>
<td>1 - 2</td>
<td>1 - 3</td>
</tr>

<tr>
<td>2 - 1</td>
<td>2 - 2</td>
<td>2 - 3</td>
</tr>
</table>

Out put

1 - 1	1 - 2	1 - 3
2 - 1	2 - 2	2 - 3

HTML Table Headers
Each column header can be define with <th> tag. When using <th> tag most of the browsers display the text as strong and centered text.
Ex:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>Taylor</td>
<td>25</td>
<td>America</td>
</tr>
<tr>
<td>Mark</td>
<td>30</td>
<td>England</td>
</tr>
</table>

Out put

Name	Age	Address
Taylor	25	America
Mark	30	England

Important Attributes of Table Element

Border
This attribute uses to define the border of the table. By default table border gets as zero thickness.
Ex: <table border = "1"> </table>

Out put

Table Border is 1

Colspan
This attribute uses to merge cells in the row. This can be uses with both <th> & <td> elements.
Ex:
<table>

<tr>

<th>Name</th>

<th>Age</th>

<th colspan = "3">Address</th>

</tr>

<tr>

<td>Taylor</td>

<td>25</td>

<td colspan = "2">Newyork</td>

<td>America</td>

</tr>

<tr>

<td>Mark</td>

<td>30</td>

<td>150</td>

<td>Wrexham</td>

<td>England</td>

</tr>

</table>
Output

Name Age Address

Taylor 25 Newyork America

Mark 30 150 Wrexham England

Width
This Attribute uses to Define the width of the table or data cell.
Ex:
<table width = "50"> - This creates a table of 50 pixels width
<table width = "50%"> - This creates a table, half of the web page
<td width = "50"> - This creates a cell of 50 pixels width

Name	Age	Address
Taylor	25	Newyork	America
Mark	30	150	Wrexham	England

HTML List

There are two type of HTML lists available

Ordered List
Unordered List

Ex:

Ordered List	Unordered List
List 1 List 2 List 3 Sub List 1 Sub List 2	List 1 List 2 List 3 Sub List 1 Sub List 2

HTML Ordered List
An Ordered List of HTML starts with <ol> tag and ends with </ol> tag. Each line of the list starts with <li> and ends with </li> tags.
Ex: Simple Ordered List
<ol>
<li>List 1</li>
<li>List 2</li>
</ol>

Ordered List with sub levels
<ol>
<li>List 1</li>
<li>List 2</li>
<ol>
<li>Sub List 1</li>
<li>Sub List 2</li>
</ol>
</ol>

HTML Unordered List
An Unordered List of HTML starts with <ul> tag and ends with </ul> tag. Each line of the list starts with <li> and ends with </li> tags.
Ex: Simple Unordered List
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>

Unordered List with sub levels
<ul>
<li>List 1</li>
<li>List 2</li>
<ul>
<li>Sub List 1</li>
<li>Sub List 2</li>
</ul>
</ul>

HTML Definition List
HTML definition List is a descriptive list, it includes the description of the each list item. A Definition List starts with <dl> tag and ends with </dl> tag. Description of the list notifies with <dd>tag. Description of the list item is conjuct with the List item by <dt> tag
Ex:
<dl>
<dt>New Cars</dt>
<dd> - These are brand New Full option Cars imported from Japan. </dd>
<dt>Old Cars</dt>
<dd> - These are Recondition & used Cars. </dd>
</dl>

Out put
New Cars
- These are brand New Full option Cars imported from Japan.
Old Cars
- These are Recondition & used Cars.

CSS - Where to put

Where to put CSS

There are three ways to insert CSS

Inline Style
Internal Style sheet
External Style sheet

1. Inline Style

Inline Styles come with basic features. To use Inline Styles, you can use style attribute with the relevant HTML element tag. Style attribute containg any CSS property.

Ex:

<p style = "align : center; color : Red"> This is a Paragraph uses CSS styles </p>

This example displays the text of "This is a Paragraph uses CSS styles" with center align and red color. All CSS properties related to the HTML element define as the value of style attribute and each property seperated by a semi colon. Value of the property define with a colon mark.

HTML HyperLinks

HTML Hyperlinks

Hyperlinks allow users to connect from page to page by clicking. A Hyperlink can be a text, group of texts, images, animation, video or any kind of object that facilitate to jump another document by click on it. You can find the links, when moving the mouse pointer over a link in a HTML Document, the arrow will change into a little hand.
Hyperlinks are specified in the HTML documents by <a> tag.
Ex:
<a href = http://programmingforbeginers.blogspot.com>Programming Languages for Beginners homepage</a>
The href attribute specifies the destination location of a link. This displays like this: This is a Link to Programming Languages for Beginners homepage
Destination of the link not only be a HTML, it can be an image, video or any other object.

HTML Hyperlink Target Attribute
Document which is link to the page, we can specify where to open it. We can nominate following locations to load linked document

in the body of the documet
In a new browser window
in a frame of the document body

<a target = "_blank" href http://programmingforbeginers.blogspot.com"> Connect me </a>
Open the linked document in a new browser window

CSS Syntax

CSS Syntax

CSS Syntax has two parts namely a Selector and one or more Declaration. The Selector is a normal HTML element. Each Declaration consists of a property which is the attribute you want to change and property's value.
Ex:
body{
color : yellow;
}

For more readable, put one declaration on each line.

CSS Comments
Comments are used to describe the code & more helpful to refer code later date. For both single line & multiple lines uses same comment in CSS. It starts with /* & ends with */.
Ex:
/* This is a CSS Single line comment */
body{
color : yellow; /* This describes font color of the HTML Body */
}

CSS Introduction

What is CSS

CSS Stands for Cascading Style Sheets
CSS defines how HTML elements are to be displayed
Use to control the style and layout of HTML Documents
CSS can define internally or externally to the HTML Document
External CSS Files enable you to change the appearance of the whole website by editing one single file
All Web Browsers support CSS

JavaScript Basic

We use <script> tag to insert javascript to a HTML document. Inside the script tag we use Type attribute to define the scripting language. It is optional to use the attribute of Language to define the script language.

JavaScript can be put under the header segment or body segment. Something needed to do before loading the page, you can define under header segment.

Syntax:

<script language = "javascript" type = "text/javascript" >

------

</script>

Opening tag of <script language = "javascript" type = "text/javascript" > and the closing tag of </script> tells where the JavaScript starts and ends.

To write some output to the HTML body we use standard JavaScript command of document.write()
Ex:
<script language = "javascript" type = "text/javascript" >

document.write("Hello!.. This is my 1st JavaScript Program");

</script>

JavaScript

What is Java Script?

Introduced in 1996 by the Netscape team and release with Netscape 2.0
Javascript was design to add interactivity to HTML documents
Javascript is a scripting language specially a client side scripting language
Javascript is usually embedded directly into HTML documents
Javascript is a dynamic type programming Language
Javascript supports all the browsers namely Internet Explorer, Mozilla Firefox, Google Chrome, Opera & Safari.
Javascript can be used to form verification
Javascript can be used to Basic document intelligence that can embed a base level of intelligence to the document by linking elements to script via events
Javascript can be used to document animation and automation
Everyone can be used to react to events
The standard was approved as an International ISO (ISO/IEC 16262) standard in 1998.

Syntax:

------

</script>

* Some earlier browsers are not supporting for Javascript & display the code as body content. To prevent that, include javascript inside the HTML comment tag. Javascript supporting browsers interpret following & others hiding the code.
Ex:
<script language = "javascript" type = "text/javascript">

</script>

HTML Text Formatting

Bold Text
Bolded Text of the HTML Document define with <b> tag
Ex: <b> This is a Bold Text</b>

Italian Text
Italian Text of the HTML Document define with <i> tag
Ex: <i> This is a italian Text</i>

Underline Text
Underline Text of the HTML Document define with <u> tag
Ex: <u> This is a Underline Text</u>

Big Text
Big Text of the HTML document defines with <big> tag
Ex: <big>This is a Big Text </big>

Emphasize Text
Emphasize Text of the HTML Document define with <emp> tag
Ex: <emp> This is a emphasize Text</emp>

Small Text
Small Text of the HTML Document define with <small> tag
Ex: <small> This is a UnderlineText</small>

Strong Text
Strong Text of the HTML document defines with <strong> tag
Ex: <strong>This is a Big Text </strong>

Subscripted Text
_SubscriptedText of the HTML Document define with <sub> tag
Ex: <sub> _{This is a Bold Text}</sub>
H₂o

Superscripted Text
^{Superscripted}Text of the HTML Document define with <sup> tag
Ex: <sup> ^{This is a Superscripted Text}</sup>
01^st December

Inserted Text
Inserted Text of the HTML document defines with <ins> tag
Ex: <ins>This is a inserted Text <ins>

Deleted Text Deleted Text of the HTML document defines with <del> tag
Ex: <del>~~This is a inserted Text~~ <del>

Please comment here with your name if this blog useful for the begining.

HTML Paragraph

HTML Paragraph
Paragraphs in the HTML document define by <p> tag.
Ex: <p>Paragraph 1 </p>
<p>Paragraph 2 </p>

Normally brosers automatically add an empty line before & after a paragraph. Therefore does not needed to add line break. Remember that closing tag of the paragraph tag. Without closing tag it produce unexpected result or error.
Inside the paragraph you can break lines by <br /> tag.
Ex: <p> This is the 1^st line of the paragraph <br />
This is the 2^nd line of the paragraph</p>

Why use <br /> tag instead of <br>
It is a coding standard coming to allow in future for all browsers that is all tags required to close properly.

HTML Basics

Horizontal Lines
Horizontal Lines in the HTML document define by <hr /> tag.
Ex: <h1>Heading 1 </h1>
<hr />
<p> This is the paragraph</p>

New Line
<br> tag defines new line in the html document
Ex: <p> No: 50, <br />
Galle Rd, <br />
Colombo 05. </p>

HTML Comments
For the purpose of maintaining more readability & understandability of the code, programmers use comments. HTML also supports for comments.
Ex:

HTML Attributes

HTML Attributes

HTML elements can have attributes to provide additional information
Attributes are always specified in the start tag
Attributes come in name vale pairs and both of them are case insensitive.
Ex: <img src = "mypic.jpg" /> images are define with img tag and the path of the image specified in the src attribute

Attribute Name Value pairs
Attribute values always be enclosed in quotes. Most commonly used double quotes, but single quotes are also applicable Ex: <p align = "center">
* Sometimes attribute values itself contain quotes, it is necessary to use single quotes Ex: name = 'Bill "president" Clington'

HTML Elements

HTML Elements

An HTML element start with an Opening Tag and ends with a Closing Tag.
Ex: <p>----</P>
Between the Opening tag & ending tag called Element Content
Some HTML elements which are called Empty Elements closed in the start tag.
Ex: <img src = "myImage.jpg" />
Most HTML elements can have additional information than the element whic are called Attributes
Ex: <p align = "Center"> This is the Paragraph</p>

The <p> element defines a paragraph in the HTML Document
The element has a opening tag <p> and its enfing tag </p>
The element Content is "This is the Paragraph"
No case sensitive because you can define <p>..... </P> or <P>... </p>
The attribute of this element is align it describe the alignment of the paragraph.

HTML - Basics

HTML Basics

HTML Links
HTML Links are defined with the <a> tag and the linked location specified to href attribute.
Ex:
1. <a href = "http://programmingforbeginers.blogspot.com/"> This is a Link to our forum </a>
2. <a href = "#"> This is a link to same location </a>

HTML Images
HTML Images are defined with the <img> tag and defining the image path with "Src" attribute.
Ex:
1. <img src = "myImage.jpg" /> This tag loads the image with its original size.
2. <img src = "myImage.jpg" width = "100" height = "100"/> This tag attributes change the image size.

HTML Elements
- An HTML element start with an Opening Tag and ends with a Closing Tag.
  Ex: <p>----</P>
- Between the Opening tag & ending tag called Element Content
- Some HTML elements which are called Empty Elements closed in the start tag.
  Ex: <img src = "myImage.jpg" />
- Most HTML elements can have additional information than the element whic are called Attributes
  Ex: <p align = "Center"> --------</p>

Nested HTML Elements
Most of the HTML elements can contain other HTML elements. This is calling nested elements.
Ex:
1.
<html>
   <head>
      -----
      -----
   </head>
</html>

HTML Attributes
- Most HTML elements can have attributes.
- Attributes provide further information about the element
- Always specified in the opening tag
- Attributes come in name-value pairs.

HTML - Basics

HTML Basics

HTML Headings
HTML Headings are defined with <h1> to <h6> tags. <h1> is the largest font size for header & <h6> is the smallest font. All the opening tags of header tags closed
Opening & Closing tag pairs can be
either;
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

Or
<h1></h>
<h2> </h>
<h3> </h>
<h4> </h>
<h5> </h>
<h6> </h>

sample code :
<h1> Heading 1</h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<h4> Heading 4</h4>
<h5> Heading 5</h5>
<h6> Heading 6</h6>
HTML Paragraph
HTML Paragraph defines with <p> & </p> tag pair.

Sample Code :
<p>This is 1st paragraph</p>
<p>This is 2nd paragraph</p>

HTML - Basics

HTML Basic Tags

<html>
The Text between <html> & </html> describes the HTML Document (Web Page).
<body>
The Text between <body> & </body> describes the visible page content of HTML Document.
<title>
The text between <title> & </title> defines the title of the web browser.
<head>
Header section of the HTML document consistes in between <head> & </head>.

How to write an HTML Document?

Open a notepad
Enter following Sample web page
Save the notepad with ".html" or ".htm" extension.
Open the document with a web browser (ex: Internet Explorer, Mozilla Firefox)

Sample Web Page

<html>

<head>

<title>Hello World</title>

</head>

<body>

Hi!... This is my First Web Page.

</body>

</html>

HTML - Getting Started

Needs for HTML

Does not needed specific tool for writing HTML Documents. A plain text editor also can be used to create HTML Documents. Use of a Plain Text Editor is the best way to learn HTML.

For editing and writing HTML Documents you can use many different editors such as Dreamweaver, Visual Studio, Front Page & etc. However, in this tutorial I use a plain text editor (ex: notepad, wordpad) to edit HTML Documents.

File Extension

File extension of saved HTML document can be a .html or a .htm & there is no difference.

HTML - Introduction

This chapter describes how to create a website using HTML tags & supports beginers to be an expert in web site development.

What is HTML?

HTML is a Markup Language using for displaying web pages and other information that can be displayed in a web browser.

HTML stands for Hyper Text Markup Language
HTML is not a programing Language. It is a markup language.

HTML Tags

HTML markup tags are usually called HTML Tags.
HTML Tags use to describe web pages.
HTML Tags are indicated by angle brackets within the web page. (ex: <html>, <body>)
HTML tags mostly come with opening & closing pairs of tags. (ex: <html> </html>)
Rest of the tags are come with unpaired tags which are known as empty elements. (ex: <br>, <img>)
In between these tags, can add texts, comments & other type of text-based contents.

Sample HTML

<html>

<head>

<title>Hello, This is my First Web Page </title>

</head>

<body>

<h2>Hello, Welcome </h2> <h3>to my Web Page. This is my first experience with HTML </h3>

</body>

</html>

Programming Languages for Beginners

Pages

CSS - Border

CSS - Padding

CSS - Margin

HTML with Javascript

CSS - Styles for Text

HTML - Text Formatings

CSS - Colors

CSS - Selectors

How to Apply CSS

HTML - Colors

CSS - Hyperlink Formatting

HTML Forms

HTML Images

HTML - Tables

HTML List

CSS - Where to put

HTML HyperLinks

CSS Syntax

CSS Introduction

JavaScript Basic

JavaScript

HTML Text Formatting

HTML Paragraph

HTML Basics

HTML Attributes

HTML Elements

HTML - Basics

HTML - Basics

HTML - Basics

HTML - Getting Started

HTML - Introduction

Programming Languages for Beginners

Translate

Total Pageviews

Topics

Top Programming Lessons

Followers