CSS - Border

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

1. 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


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


3. Border Color
   border-color property used to set border color


4. 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.

HTML with Javascript

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;
}

HTML - Text Formatings

• 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

1. color : white
2. color : rgb(0, 0, 0)
3. 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;

} 

CSS - Selectors

• 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

1. As an Inline CSS
2. As an Internal CSS 
3. 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

1. 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" />

2. 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.


3. 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

1. 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



2. 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



3. 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

HTML List

There are two type of HTML lists available

1. Ordered List 
2. 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

1. 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>


2. 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>


3. 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 language = "javascript" type = "text/javascript"

------

</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">

<!--
document.write("This phrase inside the HTML Comment");
-->

</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 
  _Subscripted Text of the HTML Document define with <sub> tag
  Ex: _{_{This is a Bold Text}}
        H₂o


• Superscripted Text 
  ^{Superscripted} Text of the HTML Document define with <sup> tag
  Ex: ^{^{This is a Superscripted Text}}
        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.