Web Programing for Beginners

Is this blog helpful for you? Can you recommend for someone?

I much appreciate your kind suggestions and comment to improve the contents & writing method of this blog. Because you are the actual reader of this site and strive to sharpen your web programming knowledge.

You may knowing further more about the discussed topics or have articles, links related to the topics please put it in your comment. Those comments more helpful others as well as me.

--

Best regards,

Priyal

HTML Drop Down List

• Select tag
  This tag defines a drop down list to select chices
  Syntax:
  <select>
        <option>Choice 1</option>
        <option>Choice 2 </option>
  </select>
• Option tag uses to define the choices of the list. This should be within the select tag.
  
  Ex:
  
  Code:
  <form>
     Designation:
  <select>
         <option>Mr. </option>
         <option>Mrs. </option>
         <option>Ms. </option>
         <option>Dr. </option>
         <option>Rev. </option>
         <option>Prof. </option>       <option>Other. </option></select>
  
  
  Output :
  Designation: Mr. Mrs. Ms. Dr. Rev. Prof. Other.

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>

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

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

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.

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
  

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.

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: <!-- This is an HTML comment -->

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?

1. Open a notepad
2. Enter following Sample web page
3. Save the notepad with ".html" or ".htm" extension.
4. 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>