Scribd
Upload
157 views21 pages

Chapter 1: Introduction To HTML and Css

The document provides code examples for HTML, CSS, and PHP concepts including: 1) HTML code for tables, audio/video controls, and links with corresponding CSS code for styling. 2) PHP code examples demonstrating basic syntax like variables, operators, flow control, and arrays. Functions for string manipulation and math are also shown. 3) Code for multi-dimensional arrays and foreach loops to iterate through arrays in PHP.

Uploaded by

suraj kushwaha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
157 views21 pages

Chapter 1: Introduction To HTML and Css

The document provides code examples for HTML, CSS, and PHP concepts including: 1) HTML code for tables, audio/video controls, and links with corresponding CSS code for styling. 2) PHP code examples demonstrating basic syntax like variables, operators, flow control, and arrays. Functions for string manipulation and math are also shown. 3) Code for multi-dimensional arrays and foreach loops to iterate through arrays in PHP.

Uploaded by

suraj kushwaha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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