Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

Chapter 1: Introduction To HTML and Css

Download as pdf or txt
Download as pdf or txt
You are on page 1of 21

176400307593

CHAPTER 1: INTRODUCTION TO HTML AND CSS

Table and Marquee


<!doctype HTML >
<head>
</head>
<body>
<table border="1" width="100%" >
<tr height="60px">
<th width="15%"></th>
<th width="70%" colspan="4"><img src="https://www.gtu.ac.in/img/1.gif"
width="100%" height="100%">
</th>
<th width="15%"></th>
</tr>
<tr >
<th colspan="6" >
<marquee bgcolor="maroon" height="100px" scrolldelay="2" direction="down"
behavior="alternate" >
<marquee direction="right" behavior="alternate">GUJRAT TECHNOLOGICAL
UNIVERSITY </marquee>
</marquee>
</th>
</tr>
<tr>
<th width="20%" >1</th>
<th width="10%"><a target="_alternte"
href="https://www.gtu.ac.in/Achievements.aspx"> Achievements</a></th>
<th width="10%"><a target="_alternte" href="https://www.gtu.ac.in/Reports.aspx">
Reports</a></th>

1|Page
176400307593

<th width="10%"><a target="_alternte" href="http://international.gtu.ac.in/">


international</a></th>
<th width="10%"><a target="_alternte" href="http://international.gtu.ac.in/"
>international</a></th>
<th width="20%" >1</th>
</tr>
<tr height="600px">
<td width="20%"></td>
<td colspan="4" width="60%"></td>
<td colspan="0" width="20%"></td>
</tr>
</table>
</body>
</HTML>

Audio and video controls in html5


<!DOCTYPE html>
<head>
</head>
<body>
<audio controls>
<source src="3.mp3">

2|Page
176400307593

</audio>
<audio controls autoplay>
<source src="3.mp3">
</audio>
<audio controls autoplay loop>
<source src="3.mp3">
</audio>
<audio controls loop > <!-- background-->
<source src="3.mp3">
</audio>
<audio controls>
<source src="3.mp3">
<source src="/wp-content/uploads/flamingos.mp3"> You will see this text if native audio
playback is not supported.
<!-- You could use this fall-back feature to insert a JavaScript-based audio player. -->
</audio>
</body>
</html>
<!DOCTYPE html>
<head>
</head>
<body>
<video >
<source src="a.mp4">
</video>
<video controls >
<source src="a.mp4">
</video>
<video controls="autoplay">
<source src="a.mp4">

3|Page
176400307593

</video>
<video controls="autoplay loop">
<source src="a.mp4">
</video>
</body>
</html>

css
<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8" />

<link rel="stylesheet" href="font.css" />

4|Page
176400307593

<link

href="https://fonts.googleapis.com/css?family=Mountains+of+Christmas&display=swap"

rel="stylesheet"

/>

<title></title>

</head>

<body>

<!--

<h1 id="font">hello</h1>

<p id="font">How are you??</p> -->

<p id="textcss">You must be the change you wish to see in the world</p>

<p id="textcss">

Life is really simple, but we insist on making it complicated.

</p>

</body>

</html>

5|Page
176400307593

LINK AND HOVER

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="link.css" />
<!-- <link
href="https://fonts.googleapis.com/css?family=Mountains+of+Christmas&disp
lay=swap" rel="stylesheet"> -->
<title></title>
</head>
<body>
<a
href="https://www.google.com/ "
target="_blank"
>
here is your link!!!
</a>
</body>
</html>
CSS////////////////////////////////
a:link {
color: green;
}

a:visited {
color: black;

6|Page
176400307593

}
a:hover {
color: #193259;
}
a:active {
color: red;
}

POSITION

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="pos.css">
</head>
<body>
<div class="father">
<div class="child1">child1</div>
<div class="child2">child2</div>

7|Page
176400307593

<div class="child3">child3</div>
<div class="child4">child4</div>

</div>
</body>
</html>

*{
margin: 0;
padding: 0;
}
.father{
width: 700px;
height: 300px;
background-color: #bf6592;
position: absolute;
}
.child1{
width:100px;
height: 50px;
background-color: #5a56b8;
position: absolute;
left: 60px;
top: 70px;
}
.child2{
width:100px;
height: 50px;

8|Page
176400307593

background-color: #52b379;
position: absolute;
right: 10px;
}
.child3{
width:100px;
height: 50px;
background-color:#63295b;
position: absolute;
bottom: 0;
right: 0;
}
.child4{
width:100px;
height: 50px;
background-color:#c4c474;
position: absolute;
bottom: 0;
}

9|Page
176400307593

CSS 3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="ani.css" />
<title>Document</title>
</head>
<body>
<div id="wrapper">
<div id="object">
It's ME!
</div>
<div id="left">
left
</div>
</div>
</body>
</html>

10 | P a g e
176400307593

11 | P a g e
176400307593

CHAPTER 2: WORKING WITH BASIC BULDIONG BLOCKS OF


PHP

OUTPUT STATEMENT

echo "hello world";

print "Hello world";

variables
$a = 12.3;

$b=123;

$stR = "YATRIK";

var_dump($stR);

var_dump($a);

variables
integers

$a = 12;

Doubles

$a = 1322.34;

Boolean

$st = "YATRIK";

Strings

$fruits = array('BANANA', 'orange','graps');

12 | P a g e
176400307593

Gettype and settype


<?php

$value = "hi";

$value1 = true;

settype($value,"integer");

settype($value1,"string");

echo gettype($value)."<br>";

echo gettype($value1);

?>

PHP OPERATORS

<?php

$x = 10;

echo $x; // Outputs: 10

$x = 20;

$x += 30;

echo $x; // Outputs: 50

$x = 50;

$x -= 20;

echo $x; // Outputs: 30

$x = 5;

13 | P a g e
176400307593

$x *= 25;

echo $x; // Outputs: 125

$x = 50;

$x /= 10;

echo $x; // Outputs: 5

$x = 100;

$x %= 15;

echo $x; // Outputs: 10

?>

<?php

$x = 25;

$y = 35;

$z = "25";

var_dump($x == $z); // Outputs: boolean true

var_dump($x === $z); // Outputs: boolean false

var_dump($x != $y); // Outputs: boolean true

var_dump($x !== $z); // Outputs: boolean true

var_dump($x < $y); // Outputs: boolean true

var_dump($x > $y); // Outputs: boolean false

var_dump($x <= $y); // Outputs: boolean true

var_dump($x >= $y); // Outputs: boolean false

?>

14 | P a g e
176400307593

<?php

$x = 10;

echo ++$x; // Outputs: 11

echo $x; // Outputs: 11

$x = 10;

echo $x++; // Outputs: 10

echo $x; // Outputs: 11

$x = 10;

echo --$x; // Outputs: 9

echo $x; // Outputs: 9

$x = 10;

echo $x--; // Outputs: 10

echo $x; // Outputs: 9

?>

<?php

$x = array("a" => "Red", "b" => "Green", "c" => "Blue");

$y = array("u" => "Yellow", "v" => "Orange", "w" => "Pink");

$z = $x + $y; // Union of $x and $y

var_dump($z);

var_dump($x == $y); // Outputs: boolean false

var_dump($x === $y); // Outputs: boolean false

var_dump($x != $y); // Outputs: boolean true

var_dump($x <> $y); // Outputs: boolean true

var_dump($x !== $y); // Outputs: boolean true

?>

15 | P a g e
176400307593

FLOW CONTROLS

<!-- if else -->

<?php

$t = date("H");

if ($t<20) {

echo "30";

else if ($t==20) {

echo "elseif"; # code...

else{

echo "string";

?>

<!-- loops -->

<?php

$a =0;

while ($a<=10) {

echo "the current value".$a."<br>";

$a++;

continue;

16 | P a g e
176400307593

do{

echo "string";

$a++;

}while($a==10);

for ($j=0; $j <6 ; $j++) {

echo "current value is:".$j."<br>";

for($i=1;$i<=10;$i++)

echo "2 X ".$i."=".($i*2)."<br>";

$hi = array("hello","world");

foreach($hi as $value)

echo $value." ";

?>

17 | P a g e
176400307593

CHAPTER:3 WORKING WITH PHP ARRAYS


ANF FUNCTIONS

ARRAY
$fruits = array('mango', 'orange','graps');

$NUMBER = array(50,40,30);

MULTI DIMENSIONAL ARRAY


$ RESULT = array(
array("name" => "yatrik", "age" => 19, "marks" => 500),
array("name" => "akashy", "age" => 20, "marks" => 450),
array("name" => "trushali", "age" => 18, "marks" => 480)
);
foreach ($RESULT as $c) {
while (list($k, $v) = each($c)) {
echo "$k :: $v <br>";
}
}

18 | P a g e
176400307593

STRING AND MATH FUNCTIONS

<?php
$fruits = array('mango', 'orange','graps');
$fruit= 'hello world';
$fruit1 = " HELLO WORLD";
// var_dump($fruits);
$var = null;
// var_dump($var);
echo strlen($fruit),"<br>";
echo str_word_count($fruit),"<br>";
echo strrev($fruit),"<br>";
echo strpos($fruit, 'world'),"<br>";
echo str_replace('world', 'suraj', $fruit),"<br>";
echo ord($fruit)."<br>";
echo strtolower($fruit1)."<br>";
echo trim($fruit1)."<br>";
echo substr($fruit,3,1)."<br>";
echo strcmp($fruit,$fruit1)."<br>";

?>

19 | P a g e
176400307593

<?php
$a = 10;
$b = 20;
$c = 4.43;
echo ceil($c)."<br>";
echo floor($c)."<br>";
echo abs($c)."<br>";
echo min($c,$a)."<br>";
echo max($c,$a)."<br>";
echo pow(5,2)."<br>";
echo sqrt(25)."<br>";
echo "System date ::".date("Y M d");
?>

20 | P a g e
176400307593

USER DEFINED FUNCTIONS


USER DEFINED
<!-- functions -->
<?php
function average_numbers($num1,$num2)
{
$avg = ($num1+$num2)/2;
return $avg;
}
echo average_numbers(5,5);
?>

21 | P a g e

You might also like