Contoh Aplikasi Web HTML, CSS dan Javascript ~ Info PWB

Contoh Aplikasi Web HTML, CSS dan Javascript

Assalamualaikum wr wb..

Kami akan share tentang contoh aplikasi web HTML5, CSS dan Javascript.
Kami membedakan antara kode dengan tampilan agar pembaca mudah memahami.

Semoga bermanfaat bagi pembaca..

Kode HTML5 dan CSS

<!DOCTYPE html>
<html>

<title>Pemrograman Web</title>
<head>

<style type="text/css">
header, section, footer, aside, nav, article, figure, figcaption {
display: block;}

body {
color: #F2E8E8;
background-image:url(background3.jpg);
background-position: center;
}
header {
height: 53px;
padding-top: 14px;
background: black;
}

.wrapper {
width: 940px;
margin: 20px auto 20px auto;
border: px solid #000000;
background-color: #710808;;}

footer {
clear: both;
color: white;
background-color: #000000;
height: 30px;}

section.courses {
float: left;
width: 659px;
border-right: 3px solid #000000;
margin-top: 15px;
}
article {
clear: both;
width: 100%;}
hgroup {
margin-top: 40px;}
figure {
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;}
aside {
width: 230px;
float: left;
border :10px;
padding: 0px 0px 0px 20px;}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;}
aside section a:hover {
color: #985d6a;
background-color: #efefef;}
a {
color: white;
text-decoration: none;}
h1, h2, h3 {
font-weight: normal;}
h2 {
margin: 10px 0px 5px 0px;
padding: 0px;}
h3 {
margin: 0px 0px 10px 0px;
color: white;}
aside h2 {
color: white;}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;}
</style>
</head>
<body>
<div class="wrapper">
<header>
<div align="center"><img src ="header.png"/></div>
</header>
<section class="courses">

<article>
<figure>
<img src="download.jpg" width="290" height="220">
</figure>
<hgroup>
<br/>
<h2> <a href="js.html">Contoh Javascript</h2></a>

<h3>Javascript</h3>
</hgroup>
<p>Javascript itu mengasyikkan...</p>
</article>
</section>
<aside>
<section class="popular-recipes">
</br>
</br>
<h2>Populer Post</h2>
<a href="js.html">Contoh JavaScript</a>

</section>
<section class="contact-details">
<h2>Kontak</h2>
<p>Pin BBM : 22e2bab8<br />
                    75221b05</br>
                    79994ae6</br>
                    75df0e5a</br>
                    7454bdec</br>

</section>
</aside>
<footer>
<marquee>Created by Novi, Faris, Luby, Lely dan Dimas</marquee>
</footer>
</div>
</body>
</html>

Tampilan Project HTML5 dan CSS

File untuk gambar dan aplikasi bisa juga di download di bawah ini..

Kode Javascript

<!DOCTYPE html>

<html>

<head>

<title>Belajar JavaScript di infopwb.blogspot.com</title>

alert ("Selamat Datang MasBro dan MbakBro")

</script>

function tambah_semangat()

{

var a=document.getElementById("div_semangat");

a.innerHTML+="<p>Dengan ini saya mengakui bahwa adminnya cantik dan ganteng</br> Sumpah adminnya cantik dan ganteng...!!!</p>";

}

</script>

</head>

<body>

<h1>Belajar JavaScript</h1>

Klik tombol ini untuk menambahkan kalimat baru:

</body>

</html>

Untuk melihat hasilnya bisa klik [DISINI]

Sumber : www.nyekrip.com dan www.duniailkom.com

2 comments

Click here for comments

S_r

admin

7 April 2020 at 14:23 ×

Terimakasih telah memposting blog ini, bergu a sekali, dan membantu saya mengerjakan tugas kuliah saya,
Tutorialnya mudah dipahami dan dimengerti walaupun sintaxnya memang banyak. Tetap berkarya kak, semoga blog kakak bisa menginspirasi lagi kedepannya. Perkenalkan nama saya : Shofi Rachmawati, NIM : 1922500133, dan jangan lupa kunjungi web kampus saya :
https://www.atmaluhur.ac.id

VIDI BACHRUM

9 April 2020 at 20:25 ×

Terimah kasih artikelnya sangat membantu kami terutama mahasiswa yang sedang belajar tentang web saya mahasiswa dari stmik atmaluhur dengan nim 1922500109 vidi bachrum ini situs kampus saya https://www.atmaluhur.ac.id/

Thanks for your comment

Info PWB

Contoh Aplikasi Web HTML, CSS dan Javascript

Related Post

2 comments