HTML

 HTML:

*HTML stands for Hyper Text Markup Language.

*HTML is the standard markup language for creating Web pages.

*HTML describes the structure of a Web page.

*HTML consists of a series of elements.

*HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

STRUCTURE OF HTML:

<DOCTYPE HTML!>

<html>

<head>

<title>page title</title>

</head>

<body>

<h1>my first heading </h1>

<p>my first paragraph</p>

</body>

</html>

HEADING TAGS:

*HEADING TAG is defined with the < h1> to <h6 > tags.

*<h1> is most important heading.<h6> is least important heading.

EXAMPLE:

<DOCTYPE html!>

<html>

<head>

<title>page title</title>

<body>

             <h1>big header</h1>

             <h2>medium header</h2>

            <h3>small header</h3>

</body>

</head>

</html>

PARAGRAPH TAGS:

* The html <p> element defined as the paragraph.

EXAMPLE:

<DOCTYPE html!>

<html>

<head>

<title>page title</title>

<body>

             <h1>Introduction</h1>

             <P>The paragraph always start a new lines.</P>

 </body>

</head>

</html>

FORMATTING:

HTML contains several elements for defining text with a special meaning.

*<b>  *<strong>   *<i>  *<em>  *<mark>

*<mark>  *<small>  *<del>  *<ins>  *<sub>  *<sup>

FORMATTING EXAMPLE:

<DOCTYPE html!>

<html>

<head>

<body>

     <p><strong>This is some text.</strong></p>

        <p><sub>This is some more text.</sub></p>

        <p><del>This is even more text.</del></p>

 </body>

</head>

</html>

ORDERED LIST:

The HTML <ol> is defined as the ordered list.An ordered list can be numerical and alphabetical.

ORDERED LIST EXAMPLE:

<DOCUTYPE html!>

<!DOCTYPE html>

<html>

<body>

<h2>An ordered HTML list</h2>

<ol>

  <li> Coffee </li>

  <li> Tea </li>

  <li> Milk </li>

</ol>  

</body>

</html>

UNORDERED LIST:

The HTML <ul> is defined as the unordered list.

UNORDERED LIST EXAMPLE:

<!DOCTYPE html>

<html>

<body>

<h2>An unordered HTML list</h2>

<ul>

  <li> apple </li>

  <li> mango </li>

  <li> lemon </li>

</ul>  

</body>

</html>

HTML IMAGE TAG:

Image can improve the design and apperance of a webpages.

IMAGE TAG FILE:

<html>

<head>

         <title>my webpage</title>

</head>

<body>

<img src="C:\Users\kirthick\Pictures\mani_11.jpeg" width="100" height="100" align="left">

</body>

</html>

HTML FROM:

An html from is used to collect user input.The user input is most often sent to server of processing.

HTML FROM FILE:

<html>

<head>

          <title>from</title>

</head>

<body>

<form>
<p>Username: <input type="text" placeholder="your username"></p>

<p>Stay logged in: <input type="checkbox" checked></p>

<p>age: <input type="radio" name="age" value="u18"></p>

<p>Favourite food:

<select>
                <option>Pizza</option>
                <option >Ice Cream</option>
               <option>Sandwiches</option>
</select>
</p>
<p><input type="submit" value="Click me!"></p>

</body>

</html>

HTML LINKS:

Links are founded in nearly all web pages.link allow users to click their way from page to page.

HTML LINKS FILE:

<html>

<head>

         <title>my webpage</title>

</head>

<body>

<p id="top"><a href="http://www.google.com">Click here to go to google.com</a></p>

</body>

</html>

HTML ENTITIES

Reserved characters in HTML must be replaced with entities

* < (less than) = &lt;

* > (greather than) = &gt;

HTML ENTITIES FILES:

<html>

<head>

<title>page title</title>

<body>

                 &lt;a href="http://google.com"&gt;

</body>

</head>

</html>

AUDIO AND VIDEO:

The HTML <audio>  element is used to play audio an web pages.

The HTML <video>  element is used to play  video an web pages.

AUDIO AND VIDEO FILES:

<html>

<head>

     <title>my webpage</title>

</head>

<body>

       <video height="350" width="230" controls>

       <source src="C:\Users\kirthick\Desktop\samplevideo.mp4" type="video/mp4">

       </video>

       <audio controls>

      <source src="C:\Users\kirthick\Desktop\kaadhal.mp3" type="audio/mp3">

       </audio>

</body>

</html>


CSS  CASCADING STYLE SHEET:

* CSS is a language we use to style the web pages.

*CSS stands for cascading style sheet.

*CSS describe how  html elements are to be  display on screen ,paper, an other media.

*CSS save a lot of work. It can control the laytop the multiple pages all at once.


SYNTAX:

P {color:blue;

font-size=200px}

CLASS AND IDS:

The html class attribute is used to specific class for an html element.

multiple html elements can share the same class.

The html class attribute is used to unique for an html element.

CLASS AND IDS FILES:

<!DOCTYPE html>

<html>

<head>

<style>

/* Style the element with the id "myHeader" */

#myHeader {

  color: black;

  text-align: center;

  }

/* Style all elements with the class name "city" */

.city {

  background-color: tomato;

  color: white;

  padding: 10px;

  text-align: center;

  } 

</style>

</head>

<body>

<!-- An element with a unique id -->

<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->

<h2 class="city">London</h2>

<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>

<p>Paris is the capital of France.</p>

<h2 class="city" >Tokyo</h2>

<p >Tokyo is the capital of Japan.</p>

</body>

</html>

CSS DIV: 

The <div> element is by default the block elements,meaning it take all available width,and comes width line breaks before and after.

CSS DIV FILES:

<!DOCTYPE html>

<html>

<head>

<title>Webpage With Style</title>

<style type="text/css">

.red {color:red;}

.large {font-size: 200%;}

#green {color:green;}

.underlined { text-decoration: underline;}

#first-sectioN{color: blue;

                      background-color: pink;

                     width: 100px;}

#second-section {background-color: yellow;}

</style>

</head>

<body>

<div id="first-section">

<p>The quick brown fox jumped over the lazy dog.</p>

<p>Wow I love internal CSS!</p>

</div>

<div id="second-section">

<p id="green">This is some more text. <span class="underlined">And this text is underlined.</span></p>

<h1 class="red">CSS is cool!</h1>

</div>

</body>

</html>

CSS BORDERS:

CSS BORDER ALLOW PRORPERTY THE SPECIFY THE STYLE,WIDTH AND COLOR ELEMENTS OF THE BORDER.

EXAMPLE:

<!DOCTYPE html>

<html>

<head>

<style>

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.ridge {border-style: ridge;}

p.inset {border-style: inset;}

p.outset {border-style: outset;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

</style>

</head>

<body>

<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>

<p class="solid">A solid border.</p>

<p class="double">A double border.</p>

<p class="groove">A groove border.</p>

<p class="ridge">A ridge border.</p>

<p class="inset">An inset border.</p>

<p class="outset">An outset border.</p>

<p class="none">No border.</p>

<p class="hidden">A hidden border.</p>

<p class="mix">A mixed border.</p>

</body>

</html>

CSS ALIGING TEXT:

<!DOCTYPE html>

<html>

<head>

<title>Webpage With Style</title>

<style type="text/css">

 p {text-align: right; }

 div{ width: 300px;

     background-color: green;}

.centered {text-align: center;}

.justified {text-align: justify;}

</style>

</head>

<body>

<div>

      <p>This is some bold text!</p>

      <p class="centered">This text is centered.</p>

      <p class="justified">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

</body>

</html>

CSS STYLING LINK:

<!DOCTYPE html>

<html>

<head>

<title>Webpage With Style</title>

<style type="text/css">

a {text-decoration: none;}

a:hover {text-decoration: underline;}

a:visited {color: green;}

</style>

</head>

<body>

<div>

<p><a href="http://www.google.com">Google</a></p>

<p><a href="http://www.google.se" target="_blank">Google in a new tab</a></p>

</div>

</body>

</html>

SHADOW EFFECT:

<!DOCTYPE html>

<html>

<head>

<title>Webpage With Style</title>

<style>

     h2 {text-shadow: 2px 2px 4px green, -5px -5px 4px yellow , 2px 2px 4px red;

       color: black;}


    h3 {text-shadow: 0 0 5px red;}

#shadow {


                width: 200px;

                height: 200px;

                box-shadow: 12px 12px 6px grey;

                background-color: white;

            }


</style>

</head>

<body>

<div id="shadow">

       <h2>MANISARATHI</h2>

       <h3>SKP ENGNEERING COLLEGE</h3>

</div>

</body>

</html>

RESPONDING TO A CLICK:

<!DOCTYPE html>

<html>

 <head>

<title>JavaScript</title>

</head>

 <body>

 <p id="text">Hello World!</p>

  <button id="myButton">Change text</button>

 <script type="text/javascript">

  document.getElementById("myButton").onclick = function() {

  document.getElementById("text").innerHTML = "Hello Rob!";}

</script>

 </body>

</html>

VARIABLES:

<!DOCTYPE html>

<html>

<head>

<title>JavaScript</title>

</head>

<body>

<input type="text" id="textInput">

<button id="textChanger">Change the text!</button>

<p id="text">This is some text</p>

<script type="text/javascript">

document.getElementById("textChanger").onclick = function() {

var textEntered = "";

textEntered = document.getElementById("textInput").value;

document.getElementById("text").innerHTML = textEntered;}

 </script>

</body>

</html>

JAVASCRIPT FUNCTION:

<html>

<head>

<title>javascript function</title>

</head>

<body>

<script>

function myFunction(a, b) {

  return a * b;}

document.getElementById("demo").innerHTML = myFunction(10, 2); 

</script>

</body>

</html>

PHP INTRODUCTION:;

*PHP is a server script language,and a powerful tools for making dynammic and interactive web pages.

*PHP is a hyper text preprocessor.

*PHP script executed on the sever.

PHP VARAIABLES:

<DOCTYPE html>

<html>

<body>

<?php

$x=5;

$y="john";

echo=$x;

echo=<br>

echo=$y;

?>

</body>

</html>

PHP STRING:

STRING php are surrounded by either double quotation mark ,or single quotation mark.

EXAMPLE.

<html>

<body>

<?php

echo "hello <br>"

print 'mani'

?>

</body>

</html>



STRING TYPES:

1.STRING LENGTH.

2.STRING REVERSES.

3.STRING REPLACE 

4.STRING TO UPPER.

5.STRING TO LOWER.

6.TRIM.

7.COMPARE THE STRING.

8.CONCATENATION TWO STRING.

9.SLICING STRING.



STRNG LENGTH:

<html>

<body>

<?php

echo strlen("manisarathi");

?>

</body>

</html>



 


PHP NUMBERS:

There are three important numberic type in php.

1.INTEGER.
2.FLOAT.
3.NUMBERIC STRING.

EXAMPLE:

<html>

<body>

<?php

$a=5;
$b=7.5;
$c="25467";

var_dump($a);
echo "<br>";

var_dump($b);
echo "<br>";

var_dump($c);

?>

</body>

</html>




PHP MATH:

PHP has a set of math function that alloes you to perfrom mathametical tasks or number.

PHP  pi ( ) FUNCTION:

php is the ( pi( ) ) funticon.

<html>

<body>

<?php
echo (pi());
?>

</body>

</html



PHP MATH TYPES:

*MINIMUM - min( ). 

*MAXIMUM - max( ).

*ABSOLUTE (positive) - abs( ).

*SQUARE ROOT - sqrt( ).

*RANDOM - rand ( ).

PHP OPERATOR:

* PHP OPERATION ARE USED TO PERFORM OPERATORS ON VARIABLE AND VALUES.

PHP DIVIDES THE OPERATOR:

*Arithmetic operators.

*Assignment operators.
 
*Comparison operators.

*Increment/Decrement operators

*Logical operators

*String operators.

*Array operator.

PROGRAM:

<!DOCTYPE html>
<html>
<body>

<?php
$x = 10;  
$y = 5;
$a=15;
$b=10;

echo "addition <br>";
echo $x + $y. "<br>";

echo "subtraction <br>";
echo $x - $y ."<br>";

echo "multiplication <br>";
echo $x * $y ."<br>";

echo "division <br>";
echo $x / $y ."<br>";

echo "modulus <br> ";
echo $x % $y ."<br>";

echo "exponentation <br>";
echo $x ** $y ."<br>";

echo "equal <br>";
var_dump($a == $b) ."<br>";
echo "<br>";
echo "<br>";

echo "greater than <br>";
var_dump ($a > $b )."<br>";
echo "<br>";
echo "<br>";

echo "lesser than <br>";
var_dump($x < $y) ."<br>";
echo "<br>";
echo "<br>";

echo "greater than equal <br>";
var_dump ($a >= $b )."<br>";
echo"<br>";
echo "<br>";

echo "lesser than equal <br>";
var_dump($x <= $y) ."<br>";
echo"<br>";
echo "<br>";

echo "pre - increment <br>";
echo ++$a ."<br>";
echo"<br>";

echo "post- increment <br>";
echo $b++ ."<br>";
echo"<br>";

echo "pre - decrement <br>";
echo --$x ."<br>";
echo"<br>";

echo "post-decrement <br>";
echo $y-- ."<br>";
echo"<br>";


?>  

</body>
</html>

OUTPUT:








PHP IF...ELSE..ELSEIF:

CONDITION STATEMENTS ARE USED TO PERFROM DIFFERENT ACTION BASED
ON DIFFERENT CONDITION.

PROGRAM:

<!DOCTYPE html>
<html>
<body>

<?php
$t = date("8");

if ($t < "10") 
{
  echo "Have a good morning!";
 }
 elseif ($t < "20") 
 {
  echo "Have a good day!";
} 
 else 
{
  echo "Have a good night!";
}
?>
 
</body>
</html>




<!DOCTYPE html>
<html>
<body>

<?php
$t = date("15");

if ($t < "10") 
{
  echo "Have a good morning!";
 }
 elseif ($t < "20") 
 {
  echo "Have a good day!";
} 
 else 
{
  echo "Have a good night!";
}
?>
 
</body>
</html>




<!DOCTYPE html>
<html>
<body>

<?php
$t = date("100");

if ($t < "10") 
{
  echo "Have a good morning!";
 }
 elseif ($t < "20") 
 {
  echo "Have a good day!";
} 
 else 
{
  echo "Have a good night!";
}
?>
 
</body>
</html>





PHP SWITCH:

THE SWITCH IS USED TO PERFROM DIFFERENT ACTION  BASED  ON  DIFFERENT CONDITION .

WHEN PHP REACHES  A  "BREAK"  KEYWORD ,IT BREAK KEYWORD IS OUT OF THE  
 SWITCH BLOCKS.

PROGRAM:
<!DOCTYPE html>
<html>
<body>

<?php
$favbike = "RX 100";

switch ($favbike)
{
case "R15":
echo "my favourite bike is R15...";
break;

case "RX 100":
echo "my favourite bike is RX 100...";
break;

case "HERO HONDA":
echo "my favourite bike is HERO HONDA...";
break;

default:

echo "my favourite bike is R15 OR RX100 NEITHER HERO HONDA";

}

?>
 
</body>
</html>



PHP LOOPS:

LOOPS USED TO EXECUTED THE SAME BLOCK OF THE CODE AGAIN AND AGAIN,
AS LONG AS A CERTAIN CONDITION IS TRUE.

PHP TYPES:

1.WHILE LOOP.
2. DO WHILE LOOP.
3.FOR LOOP.

EXAMPLE:

<!DOCTYPE html>
<html>
<body>

<?php  
$i = 1;

while ($i < 6) {
  echo $i;
  $i++;
} 
?>  

</body>
</html>




<!DOCTYPE html>
<html>
<body>

<?php  
$i = 0;

do {
  echo $i;
  $i++;
} while ($i < 6)

?>  

</body>
</html>




<!DOCTYPE html>
<html>
<body>

<?php  
for ($x = 0; $x <= 10; $x++) {
  echo "The number is: $x <br>";
}

?>  

</body>
</html>

PHP ARRAY :

ARRAY IS A STORE MULTI VALUES IN ONE SINGLE VARIABLES.

PHP ARRAY TYPES:

1.INDEX ARRAY: THE INDEXING ARRAY IS AN EACH ITEMS AS INDEX NUMBER.
                                 THE FIRST ITEMS AS INDEX IS 0 AND SECOND ITEMS AS INDEX IS 1.

2.ASSOCIATIVE ARRAY: ASSOCIATIVE ARRAY IS A ARRAY THAT USED NAMED KEYS                                                     THAT YOU SIGN THEM.

3.CREAT ARRAY: YOU CAN CREAT ARRAY BY USING array( ) function.

4.ACCESS ARRAY ITMES :TO ACCESS AN ARRAY ITEMS ,YOU CAN REFER TO THE                                                         INDEX NUMBER OF INDEXED ARRAY, AND THE KEY NAME                                                     FOR  ASSOCIATIV ARRAYS.

5.MULTIDIMENSIONAL ARRAY:A MULTIDIMENSIONAL ARRAY IS AN ARRAY                                                                                CONTAINING  ONE OR MORE ARRAYS.


EXAMPLE PROGRAM:
<!DOCTYPE html>
<html>
<body>

<?php
 echo "ARRAY DEFITION: <br>"; 
$cars = array("Volvo" ,"BMW ", "Toyota "); 
echo "<br>";
var_dump($cars);
echo "<br>";

echo "<br>";
echo " INDEXING ARRAY:  <br>"; 
$cars = array("Volvo" ,"BMW ", "Toyota");
echo $cars[0];
echo "<br>";
echo $cars[1];
echo "<br>";
echo $cars[2];
echo "<br>";

echo "<br>";
echo " ASSOCIATIVE ARRAY:  <br>"; 
$cars = array("brand" => "Volvo" ,"model" => "BMW ","year" => "2024");
echo "<br>";
var_dump ($cars);
echo "<br>";

echo "<br>";
echo " ACCESS ARRAY ITEMS:  <br>"; 
$cars = array("brand" => "Ford", "model" => "Mustang", "year" => 1964);
echo $cars["brand"];
echo "<br>";
echo $cars["year"];
echo "<br>";
echo $cars["model"];
echo "<br>";

echo "<br>";
echo " MULTIDIMENSIONAL ARRAY:  <br>"; 
$bikes = array(
                array("R15","100km",2020),
array("plusar 220","100km",2022),
array("RX100","150km",2024),
array("HERO HONDA","100km",2023),
);

for ($row=0; $row <4; $row++)
{
    echo "<p><b>Row number $row</b></P> ";
echo "<ul>";
for ($col = 0; $col < 3; $col++) 
{
    echo "<li>".$bikes[$row][$col]."</li>";
}
  echo "</ul>";
}
?>

</body>
</html>




































Comments

Post a Comment

Popular posts from this blog

JSP TUTORIAL

Image
INTRODUCTION OF JSP: 1.What is jsp. 2.How jsp works in Servlet. 3.JSP VS Servlet. 4.JSP life Cycle. What is jsp: JSP ( Java Server Page) is a server side technology used to create dynamic , paltform-indepentent web application using java. When jsp page requested by User, it is complied into a servlet by the server and the server handle the request. How jsp Works (behind the scenes): A (.jsp) file is requested by a user.. The JSP Engine on the server converts it into the Servlet.   The servlet is complied and executed. The Response (HTML) is send back to the browser. JSP VS Servlet: JSP life Cycle: LINK : https://data-flair.training/blogs/jsp-life-cycle/ DIFFERENCE BETWEEN A WEBSERVER ,WEB CONTAINER AND AN APPLICATION SERVER: WEB SERVER:   It is receives  HTTP request , intercepts it. It also processes the HTTP response to the web browser of the client. EX: Apache Web server. WEB CONTAINER : A web container is J2EE compliant implementation.Its mains the job is run the ru...
Read more

JAVA TUTORIAL

Image
JAVA DEFINTION: * Java is a popular programming language,Created in 1995. *It is owend by Oracle ,and more than 3billion device run in java. *Java is used to develop  mobile  application, web  application, Desktop application , Games and so on. SYNTAX : public class NAME { public static void main ( String args[]) { System.out.println( " " ); } } sample program: we created file name   sample.java. public class sample { public static void main ( String args[]) { System.out.println( "hello world!" ) System.out.println( "I am hero" ) System.out.println( "my favourite food Biriyani" ) } } output: hello world! I am hero my favourite food Biriyani JAVA COMMENTS : Java is used to the two types of comments ( // ) and (/* ------- */). 1. // I am learning java. 2./* Java is a popular programming language .It is Awesome! */. JAVA VARIABLE : Variable are containars for storing data values. TYPES OF VARIABLE: 1. String - store text in double quot...
Read more

ORACLE DBA

Image
DAY:1 Database in collect the information in note pad ,txt ,excl etc..  Database is stored in RAM,CPU etc.. Database is collect the date for names, salaries, information, pictures, videos and anything store in database. A Database is, basically , a place that we store an organized collection of data. store, access, manipulate, retrieve. DBMS: This DBMS type is hierarchical, network, relational, object-relational DBMS. ORACLE DATABASE: Oracle database is very secured, performance, scalability,powerful coding and support a company. DAY:2 Table is used employee date store the union of all these horizontal cell is called as a record or a row. The table stored the data such that employees ID, Name, salary, phone number, department etc.. Tabular form like in job interviews or exams,etc..  RELATION DATABASE: If you create two table employees and department table. To  the employees related  the department table its relational data base. Relational databas...
Read more