Skip to content

P
Project1
Commit a80145e6 by Minarni Debora Harahap
Options

This is my first project.

parents
Showing with 349 additions and 0 deletions
Prak01_PABWE_11S14019/prak01.html 0 → 100644
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8" />
<title>Coding A CSS3 and HTML5</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript">
var person = "";
person = prompt("What is your name>");
alert("hi");
alert(person);
</script>
</head>
<body>
<section id="page"> <!-- Defining the #page section wtih the section tag -->
<header> <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>PABWE</h1>
<h3> I really love Web Development </h3>
</hgroup>
<nav class = "clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li><a href="#article1">HTML 5</a></li>
<li><a href="#article2">CSS 3</a></li>
<li><a href="#article3">JavaScript</a></li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div>
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view -->
<h2>Apa itu HTML 5?</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure> <!-- The figure tag marks data (usually an image) that is part of the article -->
<a href = "https://id.wikipedia.org/wiki/HTML5"><img src="img/html5.jpg" width="620" height="340" /></a>
</figure>
<p>HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group).
WHATWG bekerja dengan bentuk situs dan aplikasi, sedangkan W3C merupakan pengembang dari XHTM L 2.0 pada tahun 2006, kemudian mereka
memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.</p>
<p>HTML adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet.
HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan. Meskipun HTML5 telah dikenal luas oleh para
pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan
HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web".</p>
</div>
</article>
<!-- Article 1 end -->
<!-- Article 2 start -->
<div class="line"></div>
<article id="article2">
<h2>CSS 3 ADALAH: </h2>
<div class="line"></div>
<div class="articleBody clear">
<figure>
<a href="https://id.wikipedia.org/wiki/CSS_3"><img src="img/css3.jpg" width="620" height="340"></a>
</figure>
<p>Css tidak sama dengan CS(S nya 3 kali) atau CSSSS (Cascading Style Sheets Sheets Sheets). CSS3 merupakan generasi ke-3 dari
perkembangan CSS sebelumnya. Jadi pada dasarnya, pengertian CSS3 sama saja dengan pengertian CSS generasi paling awal. Hanya saja,
beberapa standar baru untuk CSS3 menggantikan CSS2 dan mungkin akan membuat kiat dapat bereksplorasi lebih dalam lagi untuk membuat
tampilan situs lebih menarik dan mulai meninggalkan situs yang membuat menunggu dengan loading yang lama.</p>
<p>CSS3 bisa lebih detail untuk mendeklarasikan objek yang akan diberikan style. Contohnya, di dalam objek 'blockquote' bisa membuat
(quote) di awal dan akhirnya menggunakan font lebih besar dari konten blockquote itu sendiri. CSS3 kaya akan fitur untuk animasi dan
efek untuk text atau objek, yang sebelumnya tidak bisa dilakukan oleh CSS2/CSS2.1, dan bisa menggantikan peran gambar.</p>
</div>
</article>
<div class="line"></div>
<article id="article3">
<h2>Apa itu Java Script</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure>
<a href="https://id.wikipedia.org/wiki/JavaScript"><img src="img/javascript.jpg" width="620" height="340" /></a>
</figure>
<p>JavaScript adalah bahasa skrip yang populer di internet dan dapat bekerja di sebagian penjelajah web populer seperti Internet Explorer
(IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.</p>
<p>JavaScript adalah sebuah bahasa komputer atau kode pemrograman yang digunakan pada website tersebut menjadi lebih interaktif dan dinamis.
JavaScript adalah jenis bahasa pemrograman client side. Penggunaan kode javascript pada sebuah website bersifet opsional, artinya tidak harus
selalu ada. Namun, website-website maupun blog modern saat ini hampir semuanya menggunakan kode javascript walaupun sedikit.</p>
</div>
</article>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2010 - www.pabwe.com</p> <!-- Change the copyright notice -->
<a href="#" class="up">Go UP</a>
<a href="#" class="by">Belajar HTML 5, CSS 3, dan JavaScript</a>
</footer>
</section> <!-- Closing the #page section -->
Prak01_PABWE_11S14019/styles.css 0 → 100644
*{
/* Universal reset: */
margin:0;
padding:0;
}
header,footer,
article,section,
hgroup,nav,
figure{
/* Giving a display value to the HTML5 rendered elements: */
display:block;
}
body{
/* Setting the default text color, size, page background and a font stack: */
font-size:0.825em;
color:#fcfcfc;
background-color:#000000;
font-family:Arial, Helvetica, sans-serif;
}
/* Hyperlink Styles: */
a, a:visited {
/*color:#0196e3;*/
color:#111111;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
a img{
border:none;
}
/* Headings: */
h1,h2,h3{
font-family:"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
text-shadow:0 1px 1px black;
}
h1{
/* The logo text */
font-size:3.5em;
padding:0.5em 0 0;
text-transform:uppercase;
}
h3{
/* The slogan text */
font-family:forte,"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
font-size:2em;
font-weight:normal;
margin:0 0 1em;
}
h2{
font-size:2.2em;
font-weight:normal;
letter-spacing:0.01em;
text-transform:uppercase;
}
p{
line-height:1.5em;
padding-bottom:1em;
}
.line{
/* The dividing line: */
height:1px;
background-color:#24404c;
border-bottom:1px solid #416371;
margin:1em 0;
overflow:hidden;
}
article .line{
/* The dividing line inside of the article is darker: */
background-color:#15242a;
border-bottom-color:#204656;
margin:1.3em 0;
}
footer .line{
margin:2em 0;
}
nav{
background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
padding:0 5px;
position:absolute;
right:0;
top:4em;
border:1px solid #FCFCFC;
-moz-box-shadow:0 1px 1px #333333;
-webkit-box-shadow:0 1px 1px #333333;
box-shadow:0 1px 1px #333333;
}
/* The clearfix hack to clear the floats: */
.clear:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* The navigation styling: */
nav ul li{
display:inline;
}
nav ul li a,
nav ul li a:visited{
color:#565656;
display:block;
float:left;
font-size:1.25em;
font-weight:bold;
margin:5px 2px;
padding:7px 10px 4px;
text-shadow:0 1px 1px white;
text-transform:uppercase;
}
nav ul li a:hover{
text-decoration:none;
background-color:#f0f0f0;
}
nav, article, nav ul li a,figure{
/* Applying CSS3 rounded corners: */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
/* Article styles: */
#page{
width:960px;
margin:0 auto;
position:relative;
}
article{
background-color:#213E4A;
margin:3em 0;
padding:20px;
text-shadow:0 2px 0 black;
}
figure{
border:3px solid #142830;
float:right;
height:300px;
margin-left:15px;
overflow:hidden;
width:500px;
}
figure:hover{
-moz-box-shadow:0 0 2px #4D7788;
-webkit-box-shadow:0 0 2px #4D7788;
box-shadow:0 0 2px #4D7788;
}
figure img{
margin-left:-60px;
}
/* Footer styling: */
footer{
margin-bottom:30px;
text-align:center;
font-size:0.825em;
}
footer p{
margin-bottom:-2.5em;
position:relative;
}
footer a,footer a:visited{
color:#cccccc;
background-color:#213e4a;
display:block;
padding:2px 4px;
z-index:100;
position:relative;
}
footer a:hover{
text-decoration:none;
background-color:#000000;
}
footer a.by{
float:left;
}
footer a.up{
float:right;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment