Tugas Teknologi Web - Javascript

Tugas Teknologi Web - Javascript
Nama Anggota :
1.Ragil Aji Prakoso (15.01.55.0052)
2. Mochammad Faizal (16.01.55.0019)
3. Gifara Alya Nor Aini (17.01.55.0032)
4. Imas Masitoh (17.01.55.0085)
Script :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: grey;
}
.header {
padding: 30px;
text-align: center;
background: red;
}
.header h1 {
font-size: 50px;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.leftcolumn {
float: left;
width: 75%;
background-color: yellow;
}
.rightcolumn {
float: left;
width: 25%;
background-color: purple;
padding-left: 10px;
}
.fakeimg {
width: 100%;
padding: 20px;
}
.card {
background-color:lightgreen ;
padding: 20px;
margin-top: 20px;
}
.card1 {
background-color:blue ;
padding: 20px;
margin-top: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
@media screen and (max-width: 800px) {

.leftcolumn, .rightcolumn,rightcolomn1 {
width: 100%;
padding: 0;
}
}
@media screen and (max-width: 400px) {

.topnav a {
float: none;
width: 100%;
}
}
.jam-digital {
overflow: hidden;
width: 200px;
margin: 10px auto;
border: 5px solid #efefef;
}
.kotak{
float: left;
width: 63px;
height: 40px;
background-color: #189fff;
}
.jam-digital p {
color: #fff;
font-size: 15px;
text-align: center;
margin-top: 15px;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Javascript</h1>
<p></p>
</div>
<div class="topnav">
<a>Terbaru</a>
<a>List</a>
<a>sains</a>
<a>Sport</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card1">
<h2>Penemuan yang Mengubah Dunia: Kemoterapi, Dulu Senjata Perang
Dunia I</h2>
<h5>Dec 9, 2017</h5>
<div class="fakeimg"<p><img src="kemoterapi.jpg" alt="kemoterapi"
style="height:150px;width:150px;float:left;"/>Ketika berbicara kanker,
kita juga membahas pengobatan. Salah satu pengobatan yang paling terkenal
melawan kanker adalah kemoterapi. Namun, siapa sangka pengobatan ini
tidak ditemukan di rumah sakit atau laboratorium. Ya, kemoterapi justru
ditemukan dalam sisa-sisa perang. Tepatnya pada Perang Dunia I, para ahli
kimia perang menyadari bahwa mayat para personel angkatan laut yang
terpapar gas mustard selama aktivitas militer memiliki perubahan beracun
dalam sel sumsum tulang yang berkembang menjadi sel darah. Pada perang
besar itu, gas ini digunakan dalam bom mustar nitrogen yang setara dengan
100 ton racun. Bom tersebut disimpan diam-diam dalam sebuah kapal AS yang
berlabuh di pangkalan milik Italia.</p>
</div>
</div>
<div class="card1">
<h2>Di Luar Dugaan, Melepas Kail Pancing Bikin Ikan Kesulitan
Makan</h2>
<h5> Sep 2, 2017</h5>
<div class="fakeimg"<p><img src="kail ikan.jpg" alt="kail ikan"
style="height:150px;width:150px;float:left;"/>Ketika kail menusuk mulut
ikan dan kemudian ikan dilepaskan dari kail, kemampuannya untuk menangkap
makanan berkurang. Kesimpulan tersebut telah teruji dan dipublikasikan
dalam jurnal Experimental Biology, Selasa (9/10/2018). Menurut para ahli
yang terlibat dalam studi ini, kail pancing tersebut mampu menurunkan
kemampuan makan ikan sampai 35 persen. Terutama ikan yang mencari makan
dengan cara mengisap atau suction feeding. Suction feeding merupakan
istilah yang dipakai untuk menjelaskan gaya ikan yang makan dengan cara
mengembangkan mulut kemudian mengisap makanan. Hal ini sama seperti saat
kita menyedot minuman dengan menggunakan sedotan. Beberapa spesies yang
makan dengan cara ini adalah kakap putih, salmon, dan trout.</p>
</div>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>Jam</h2>
<div class="jam-digital">
<div class="kotak">
<p id="jam"></p>
</div>
<div class="kotak">
<p id="menit"></p>
</div>
<div class="kotak">
<p id="detik"></p>
</div>
</div>
</div>
<div class="card">
<h2>Questbook</h2>
<form onsubmit="return false">
<label>Masukkan Nama: </label>
<input type="text" id="input_form" value=""/>
<button id="tombol_form">Submit</button>
</form>
<br/>
<h2><span id="hasil"></span></h2>
</div>
<script>
document.getElementById("tombol_form").
addEventListener("click", tampilkan_nilai_form);
function tampilkan_nilai_form(){
var nilai_form=document.getElementById("input_form").value;
document.getElementById("hasil").innerHTML=nilai_form;
}
</script>
<div class="card">
<h3>Calender</h3>
<SCRIPT LANGUAGE="JavaScript">


</SCRIPT>
</div>
</div>
</div>
<script>
window.setTimeout("waktu()", 1000);
function waktu() {
var waktu = new Date();
setTimeout("waktu()", 1000);
document.getElementById("jam").innerHTML = waktu.getHours();
document.getElementById("menit").innerHTML =
waktu.getMinutes();
document.getElementById("detik").innerHTML =
waktu.getSeconds();
}
</script>
<div class="footer">
<p> Â©teknologi web 2018 - All Rights Reserved </p>
</div>
</body>
</html>
SCREENSHOT

Tugas Teknologi Web - Javascript

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tugas Teknologi Web - Javascript

Diunggah oleh

Hak Cipta:

Format Tersedia

Tugas Teknologi Web - Javascript

@media screen and (max-width: 800px) {

@media screen and (max-width: 400px) {

Anda mungkin juga menyukai