Percobaan Internet Programming

Percobaan 0.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<a href="http://www.w3schools.com">This is a link<a>
<img src="pens.png" alt="Politeknik Elektronika Negeri Surabaya" width="316"

height="142">
<p>The hr tag define a horizontal rule:</p>

<hr>
<p>This is a paragraph.</p>
<hr>
<hr>
<p>This is<br>a para<br />graph with line breaks</p>
<p><b>This text is bold</b></p>

<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><code>This text is computer output</code></p>
<p><em>This text is emphasized</em></p>
<p>This is<sub> subcript</sub> and <sup>superscript</sup></p>
<style>
table, th, td {
border: 1px solid black;
border-collape: collapse;
}
</style>
<table style="=width:100%">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<h2>Disc bullets</h2>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Apples</li>
<li>Apples</li>
<li>Apples</li>
</ul>
<h2>Circle bullets</h2>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Apples</li>
<li>Apples</li>
<li>Apples</li>
</ul>
<h2>Square bullets</h2>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Apples</li>
<li>Apples</li>
<li>Apples</li>
</ul>
<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Berlayar Bersama Ossy</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Semangat HTML5, PHP5 dan CSS3</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center"> Copyright
Politeknik Elektronika Negeri Surabaya</div>
</div>
</body>
</html>
Percobaan 0.2

<head>
<title>Untitled Document</title>
</head>
<body>
<style>
p{
text-align:center;
color: red;
}
</style>
<p>Ossy Anita Pratiwi</p>
<p id="para1">It's me!</p>
<p>it's me!</p>
<style>
#para1 {
text-align:center;
color:blue;
}
</style>
<p id="para1">hello world!</p>

<p>This paragraph is not affected by the style.</p>
<style>
.center {
text-align:center;
color:red;
}
</style>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
<style>
p.center {
text-align: center;
color: red;
}
</style>
<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>
<style>
body{
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<h1>This is a heading</h1>
<style>
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
</style>
<h1>CSS text-align Example</h1>

<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my father gave me some
advice that I've been turning over in my mind ever since. 'Whenever you feel like
criticizing anyone,' he told me,
'just remember that all the people in this world haven't had the advantages that
you've had.'</p>
<p><b>Note:</b> Resize the browser window to see how the value "justify"
works.</p>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
Percobaan 1
<head>
<title>Percobaan 1</title>
</head>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on
issues regarding the conversation, research an restoration of the environment, formerly named the
World Widelife Fund. WWF was founded in 1961. </p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from
a named Chi Chi that was transfered from the Beijing ZOo to the London Zoo in the same year of the
establishment of WWF.</p>
</section>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011
at 21:00 PDT.....</p>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">JQuery</a>
</nav>
<p>My Family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
<article>
<header>
<h1>Internet Explorer 9</h1>
<p>time update datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011
at 21:00 PDT.....</p>
<footer>
<p>Posted by : Hege Refsnes</p>
<p>time update datetime="2012-03-01"></time></p>
</footer>
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag
plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82
feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
<figure>
<img src="pens.jpg" alt="The Pulpit Rock" width="304" height="228" />
<figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>
</figure>
<form action="#" method="get">
<input list="browsers" name="browser" />

<datalist id="browsers">
<option value="Intenet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Internet Explorer 9 and earlier versions, on in
Safari.</p>
<form oninput="x.value=parseInt (a.value)+parseInt(b.value)">0

<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #00C;"> Your browser

does not support the HTML5 canvas tag.
</canvas>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser

does not support the HTML5 canvas tag.
</canvas
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
<svg width="300" height="200">

<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-
width:5;fill-rule:evenodd;" />
Sorry, your browser does not support inline SVG.
</svg>
<h1>My first PHP page</h1>
<?php
echo "HEllo World!";
?>
<?php
fuction writeMsg() {
echo "Hello world! (di dalam fungsi)";
}
writeMsg();
?>
<?php
$cars=array("Volvo","BMW","Toyota");
echo "I like " . $cars[0] . "' " . $cars[1] . " and " . $cars[2] . ".";
?>
<?php
sort($cars);
$clenght=count($cars);
for($x=0;$x<$clenght;$x++)
{
echo $cars[$x];
echo "<br>";
}
?>
<?php
$number=array(4,6,2,22,11);
sort($numbers);
$arrlenght=count($numbers);
for($x=0;$x<$arrlenght;$x++)
{
echo $numbers[$x];
echo "<br>";
}
?>
<?php
rsort($cars);
$clenght=count($cars);
for($x=0;$x<$clenght;$x++)
{
echo $cars[$x];
echo "<br>";
}
?>
<?php
$number=array(4,6,2,22,11);
rsort($numbers);
$arrlenght=count($numbers);
for($x=0;$x<$arrlenght;$x++)
{
echo $numbers[$x];
echo "<br>";
}
?>
<?php
echo "Today is " . date("Y/m/d") . "<br>";
echo "Today is " . date("Y.m.d") . "<br>";
echo "Today is " . date("Y-m-d") . "<br>";
echo "Today is " . date("1");
?>
2010-<?php echo date("Y")?>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contac</a></li>
<li><a href="#about">About</a></li>
</ul>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
</style>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contac</a></li>
<li><a href="#about">About</a></li>
</ul>
<style>
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img a:hover img {

border: 1px solid #0000ff;
}
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>
<div class="img"
<a target=_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis"
width="110" height="90"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"
<a target=_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis"
</div>
<div class="img"
</div>
<div class="img"
</div>
<style>
div {
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 300px;
border-radius: 25px;
}
</style>
<div>The border-radius propety allows you to add rounded corners to elements.</div>
<style>
div {
border: 15px solid transparent;
width: 250px;
padding: 10px 20px;
}
#round {
-webkit-border-image : url(border.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 30 round; /*Opera 11-12.1 */
border-image: url(border.png) 30 30 round;
}
#stretch {
-webkit-border-image : url(border.png) 30 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 30 stretch; /*Opera 11-12.1 */
border-image: url(border.png) 30 30 stretch;
}
</style>
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-
image property.</p>
<p>The border-image property specifies an image to be used as a border.</p>
<div id="round">Here, the image is tileed (repeated) to fill the area.</div>

<br />
<div id="stretch">Here, the image is stretch to fill the area.</div>
<p>Here is the image that is used:</p>

<img src="border.png">
<style>
h1 {
text-shadow: 5px 5px 5px #FF0000;
}
</style>
<h1>Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, does not support the text-shadow
property.</p>
</body>
</html>

Percobaan Internet Programming

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Percobaan Internet Programming

Uploaded by

Copyright:

Available Formats

Percobaan 0.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<a href="http://www.w3schools.com">This is a link<a>

<img src="pens.png" alt="Politeknik Elektronika Negeri Surabaya" width="316"

<p>The hr tag define a horizontal rule:</p>

<p>This is<br>a para<br />graph with line breaks</p>

<p><b>This text is bold</b></p>

<div id="container" style="width:500px">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<p id="para1">hello world!</p>

<h1 class="center">This heading will not be affected</h1>

<h1>CSS text-align Example</h1>

<p>My Family and I visited The Epcot center this summer.</p>

<form action="#" method="get">

<input list="browsers" name="browser" />

<form oninput="x.value=parseInt (a.value)+parseInt(b.value)">0

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #00C;"> Your browser

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser

<svg width="300" height="200">

<h1>My first PHP page</h1>

2010-<?php echo date("Y")?>

div.img a:hover img {

<div>The border-radius propety allows you to add rounded corners to elements.</div>

<div id="round">Here, the image is tileed (repeated) to fill the area.</div>

<p>Here is the image that is used:</p>

You might also like