Scribd
Unggah
18 tayangan6 halaman

Struktur Dasar HTML

Dokumen tersebut memberikan penjelasan tentang struktur dasar dokumen HTML dengan menggunakan tag <html> dan <body> untuk memisahkan antara bagian header dan konten. Selain itu juga menjelaskan penggunaan CSS untuk mengatur tata letak elemen menggunakan box model, serta contoh penggunaan JavaScript untuk mengambil dan menampilkan nilai elemen HTML.

Diunggah oleh

a13964818
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
18 tayangan6 halaman

Struktur Dasar HTML

Dokumen tersebut memberikan penjelasan tentang struktur dasar dokumen HTML dengan menggunakan tag <html> dan <body> untuk memisahkan antara bagian header dan konten. Selain itu juga menjelaskan penggunaan CSS untuk mengatur tata letak elemen menggunakan box model, serta contoh penggunaan JavaScript untuk mengambil dan menampilkan nilai elemen HTML.

Diunggah oleh

a13964818
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 6

HTML HEAD

❖ Dokumen HTML harus diawali dengan tag Bagian header dalam dokumen HTML Biasanya
<html> dan diakhiri dengan </html> berisi judul halaman web
❖ Digunakan untuk memberi tahu kepada web Bentuk umum:
browser bahwa yang berada dalam kedua tag <HEAD>
tersebut adalah dokumen HTML <TITLE>Judul ini akan ditampilkan pada bagian
atas web browser
BODY </TITLE>
Bagian isi dari dokumen HTML </HEAD>
Dapat disisipkan teks, gambar, video maupun link
Isi yang ada di dalam body akan ditampilkan pada Prinsip Web responsif
halaman web Adanya media query memungkinkan desainmu
lebih sesuai dengan berbagai ukuran layar. Media
Struktur dasar html query memungkinkan website untuk dapat
<!DOCTYPE html> mengambil data mengenai ukuran layar yang
<html> digunakan untuk menampilkan konten
<head> • Menyertakan meta tag seperti berikut ini
<title>Page Title</title> dibagian <head> <meta name:”viewport”
</head> content=”widht=device-widht, initial-scale=1.0”>
<body> • Viewport: menggambarkan alat (notebook,
</body> tablet, dekstop PC, cellular phone, dll) yang dapat
</html> menampilkan halaman web. Meta viewport ini
digunakan untuk mengatur tampilan browser
pada mobile device / tablet.
Inline Style CSS • Tag “initial-scale=1.0” digunakan untuk
• Inline style berarti tag css langsung mengatur level zoom dari tampilan saat
dilakukan pada tag ditampilkan
• Contoh
<div style=”background- CSS Box Model (1)
color:blue;color:white; padding:20px; • Semua elemen HTML dapat dianggap sebagai
widht:80%”> kotak. Dalam CSS, istilah “Box Model" digunakan
ketika berbicara tentang desain dan tata letak
External Style CSS . • Model kotak CSS pada dasarnya adalah kotak
• External style berarti tag css tidak secara yang membungkus setiap elemen HTML. Ini
langsung dilakukan pada tag tetapi melalui file. terdiri dari: margin, batas, padding, dan konten
Sehingga semua dokumen html dapat yang sebenarnya.
mereferensikan file tersebut , nama filenya
berakhiran dengan .css dan diletkkan pada head CSS Box Model (2)
• Gambar di bawah mengilustrasikan Box Model
CSS Box Model (3)
Penggunaan Div digunakan untuk membuat Box
Model
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px; }
NAVBAR
<nav>
JAVASCRIPT
<div class=”container”>
<h3>Menampilkan Hasil Form HTML dengan JavaScript</h3>
<div class=”logo”>logo</div>
<form id="form1"
<div class=”menu”>name="form1" onsubmit="return false">
<label
<ul> for="select1">Pilih kota: </label>
<select id="select1" name="select1">
<li><a href=” “><label class=”btn” for=” “>Home</label></a></li>
<option
<li><a value="jakarta">Jakarta</option>
href=” “><label for=” “>About Us</label></a></li>
<option
<li><a value="bandung">Bandung</option>
href=” “><label for=” “>Support</label></a></li>
<option
<li><a value="bogor">Bogor</option>
href=” “><label for=” “>Gallery</label></a></li>
</select>
<li><a href=” “><label for=” “>Blog</label></a></li>
<input type="submit"
<li><a value="Tampilkan
href=” “><label Keterangan" onclick="tampilkan()">
for=” “>Contact</label></a></li>
</form><ul>
<p</div>
id="container"></p>
Javascript
</div>
function tampilkan(){
</nav>
var nama_kota=document.getElementById("form1").select1.value;
CSS var p_kontainer=document.getElementById("container");
nav .containerif (nama_kota=="jakarta")
{ {
margin-top: 40px; p_kontainer.innerHTML="Jakarta Ibu Kota RI";
margin-left:} 40px;
else 40px;
margin-right: if (nama_kota=="bandung") {
} p_kontainer.innerHTML="Bandung Kota Kembang";
nav .logo { }
float: left;else if (nama_kota=="bogor") {
} p_kontainer.innerHTML="Bogor kota hujan";
}
} {
nav .menu
Hasil
float: right;
}

nav .menu ul {
list-style-type: none;
display: flex;
} <h3>Contoh 1: Mengambil nilai tag span</h3>
<p>Nama: Andika Siswoyo, Nilai: <span id="nilai_andika">80</span>
nav .menu<brul/>Nama:
li { Joko Susilo, Nilai: <span id="nilai_joko">92</span></p>
<button id="tombol_p">Tampilkan
margin-right: 20px; Nilai</button>
<br/><br/>
float: left;
}

nav <h3>Contoh
.menu ul li a {2: Mengambil nilai tag input</h3>
<form onsubmit="return
text-decoration: none; false">
} <label>Rika Pratiwi: </label>
<input type="text" id="input_form" value="90"/>
<button
nav .menu ul li aid="tombol_form">Tampilkan
label { Nilai</button>
</form>
background-color: aquamarine;
border-radius: 20px;
padding: 10px 20px 10px 20px;
} <br/><br/>

nav .menu ul li a label:hover {


<h2>Hasil: <spanrgb(64,
background-color: id="hasil"></span></h2>
105, 92);
color: white;
}
Javascript
document.getElementById("tombol_p"). addEventListener("click", tampilkan_nilai_p);
document.getElementById("tombol_form").addEventListener("click",tampilkan_nilai_form);

function tampilkan_nilai_p() {
var nilai_andika=document.getElementById("nilai_andika").innerHTML;
var,,,nilai_joko=document.getElementById("nilai_joko").innerHTML; ,,,,document.getElementById("hasil").i
nnerHTML= nilai_andika+" dan "+nilai_joko
}

function tampilkan_nilai_form(){
var nilai_form=document.getElementById("input_form").value;
document.getElementById("hasil").innerHTML=nilai_form;
}

Hasil

<form>
<label for="username">Username: </label>
<input type="text" id="username" required placeholder="Nama user">
<br>
<label for="password">Password: </label>
<input type="password" id="password" required placeholder="Kata sandi">
<br>
<button type="submit" onclick="masukAkun()">Masuk</button>
</form>
Javascript
function masukAkun() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var user = "Ledy";
var pass = 123456;
if ((username === user) && (password==pass)){
alert("Login berhasil!!");
}else{
alert("Username dan password tidak sesuai atau salah");
}
}
window.onload = function() {
document.getElementById("username").focus();
};
Hasil

FORM
<h1> Form Registrasi </h1>
<form action="" method="POST">
<div>
<label>Nama Lengkap:</label>
<input type="text" name="nama" class="nama" placeholder="Masukkan Nama" />
</div>
<div>
<label>Jenis Kelamin: </label>
<p class="gender">
<input type="radio" name="gender" value="Laki-Laki">Laki-Laki<br>
<input type="radio" name="gender" value="Perempuan">Perempuan
</p>
</div>
<div>
<label>Email:</label>
<input type="email" name="email" class="email" placeholder="Masukkan Email" />
</div>
<div>
<label>Program Studi:</label>
<select name="prodi" class="prodi">
<option value="" selected>-- Pilih --</option>
<option value="Sistem Informasi">Sistem Informasi</option>
<option value="Informatika">Informatika</option>
<option value="Manajemen">Manajemen</option>
<option value="Teknologi Informasi">Teknologi Informasi</option>
</select>
</div>
<div>
<label>Hobi:</label><br>
<p class="hobi">
<input type="checkbox" name="Hobi" value="Game"> Game<br>
<input type="checkbox" name="hobi1" value="Sepak Bola"> Sepak Bola<br>
<input type="checkbox" name="hobi2" value="Badminton"> Badminton<br>
<input type="checkbox" name="hobi3" value="Renang"> Renang
</p>
</div>
<div>
<label>Alamat:</label>
<textarea class="alamat" name="alamat" type="text" placeholder="Masukkan Alamat"></textarea>
</div>
<div>
<input type="submit" class="daftar" value="Daftar" class="tombol">
</div>
</form>
CSS

body {
font-size: 12px;
background-color: gray; .nama, .email, .alamat {
} margin-top: 5px;
background-color: rgb(221, 221, 221);
h1 { }
color: white;
text-align: center; .nama, .email, .alamat,
margin-top: 30px; .daftar {
} border: 0px;
border-radius: 2px;
form { }
width: 260px;
height: 500px; .daftar {
padding: 15px; width: 55px;
background: white; height: 25px;
font-family: Arial, Helvetica, sans-serif; color: white;
margin: 30px auto; cursor: pointer;
} background-color: #3498db;
}
::placeholder {
font-family: Arial, Helvetica, sans-serif;
}

label {
font-weight: bold;
}

.nama, .email {
width: 250px;
height: 25px;
}

.gender {
margin-left: 165px;
}

.prodi {
width: 135px;
margin-left: 24px;
}

div {
margin-bottom: 10px;
}

.hobi {
margin-left: 160px;
}

.nama,
Javascript form
function validasiform(){
if (document.forms["form"]["nama"].value == "") {
alert("nama tidal boleh kosong");
document.forms["form"]["nama"].focus();
return false
}
if (document.forms["form"]["prodi"].selectedIndex < 1){
alert("pilih Prodi");
document.forms["form"]["prodi"].focus();
return false
}
if (document.forms["form"]["email"].value == "") {
alert("Email tidak boleh kosong");
document.forms["form"]["email"].focus();
return false
}
}

Anda mungkin juga menyukai