Cara menggunakan tulis html di html

Hai.. Pada artikel kali ini kita masih membahas tentang dasar-dasar web yaitu HTML. Kali ini kita akan belajar cara membuat list atau daftar yang berbentuk titik-titik, dimana titik-titik tersebut berupa urutan angka atau huruf. Seringkali kita menemukan daftar dengan urutan angka dari 1 ke jadi, atau dari a ke z dan seterusnya

Table of Contents Show

Menggunakan Jenis
Keuntungan JavaScript
Minimalkan interaksi server
Antarmuka yang lengkap dan mudah digunakan
Umpan balik cepat untuk pengguna
Proses debug mudah
Cara Membuat JavaScript di HTML
Cara membuat JavaScript di HTML secara langsung
Bagaimana cara menambahkan kode JavaScript ke file terpisah
Contoh JavaScript untuk memvalidasi alamat email
Penggunaan HTML langkah demi langkah?
Di mana kode HTML ditulis?
Bagaimana cara membuat paragraf dalam HTML?
Bagaimana cara menggunakan JavaScript dalam HTML?

Agar lebih mudah, silahkan baca terlebih dahulu artikel sebelumnya tentang cara membuat daftar tidak berurutan. Dan juga tulisan-tulisan lainnya, diantaranya tentang Elemen dan Atribut

Label lama

Daftar berurutan ini disebut juga Daftar Berurutan. Untuk membuatnya kita menggunakan tag _______9_______ dan _______10_______. Seperti unordered list, diikuti dengan List tag untuk isi list yang tertulis seperti ini. <li>isi daftarnya di sini...</li>

Langsung saja untuk contoh nyata tutorial Ordered List ini adalah sebagai berikut, silahkan ketik dan simpan kemudian jalankan kode dibawah ini. Simpan dengan nama file 30-html-ordered-list. html

<!DOCTYPE html>
<html>
<head>
   <title>Ordered List</title>
</head>
<body>
   <h2>Menampilkan Daftar Secara Berurutan</h2>
   <p>Daftar urutan biasa disebut juga <b><font face="Arial">Ordered List</font></b>, digunakan untuk menampilkan daftar berupa poin-poin dengan urutan tertentu, bisa berupa angka atau huruf. Contohnya:</p>
   <ol>
      <li>Ini kalimat pertama.</li>
      <li>Ini kalimat kedua.</li>
      <li>Ini kalimat ketiga.</li>
      <li>...</li>
      <li>Dan seterusnya</li>
   </ol>
</body>
</html>

Silahkan jalankan dan lihat hasilnya

Mungkin akan muncul pertanyaan, apakah daftar urut ini bisa diubah menjadi huruf, misalnya dengan urutan a, b, c dan seterusnya? . Caranya adalah dengan menggunakan atribut type

Menggunakan Jenis

Ada 5 jenis sequence yang dapat digunakan, yaitu sebagai berikut

type="1" urutan akan berdasarkan bilangan bulat (bilangan bulat), ini adalah default atau bentuk dasar, tanpa menyebutkan jenisnya, maka akan menghasilkan urutan berdasarkan angka
type="A" urutannya menggunakan huruf kapital, hasilnya A, B, F, R, dst.
type="a" urutan akan didasarkan pada huruf kecil, misalnya a, b, x, y, dll.
type="I" urutan akan didasarkan pada angka romawi dengan format huruf kapital, misalnya I, II, V, IX dan seterusnya
type="i" urutannya akan berdasarkan angka romawi juga tetapi dengan format huruf kecil seperti iii, iv, v dan seterusnya

Silakan coba ketik dan jalankan kode berikut, simpan dengan nama file 31-html-ordered-list-type. html

Kali ini kami menulis tutorial yang berisi tentang cara membuat JavaScript di HTML. Pertama kita akan membahas pengertian JavaScript, dan setelah itu kita akan fokus pada berbagai cara memasukkan JavaScript ke dalam HTML

Dalam HTML, Anda dapat menampilkan konten statis, seperti gambar. Namun belakangan ini, konten statis tidak begitu populer lagi. Sebagian besar konten saat ini sangat interaktif dan berisi tayangan slide, formulir, dan menu dengan tampilan yang menarik

Konten-konten ini memberi kesempatan kepada pengguna untuk lebih ekspresif dalam mengelola dan mengembangkan situs web mereka. Jika ingin menampilkan konten seperti itu, maka salah satu cara yang bisa dilakukan adalah script bahasa pemrograman dan JavaScript yang paling populer diantara mereka.

Kehadiran JavaScript memungkinkan pengembang untuk membuat situs web yang dapat berinteraksi dengan pengguna dan sebaliknya. Meskipun ada banyak bahasa pemrograman yang bisa dipilih, tidak ada yang sepopuler JavaScript. Untuk memaksimalkan potensi dan keunggulannya, JavaScript harus digunakan bersama dengan HTML

Unduh Lembar Cheat HTML

Keuntungan JavaScript

Pada awalnya, JavaScript dikenal sebagai LiveScript. Seiring dengan perkembangan bahasa, maka oleh Netscape, LiveScript diubah menjadi JavaScript. JavaScript pertama kali muncul pada tahun 1995 di Netscape 2. 0. Berikut adalah beberapa keuntungan menggunakan JavaScript

Minimalkan interaksi server

Salah satu cara terbaik untuk mengoptimalkan kinerja dan kecepatan situs web adalah dengan mengurangi komunikasi ke server. Dalam hal ini, JavaScript memvalidasi input pengguna di sisi klien. Skrip ini hanya akan mengirimkan permintaan ke server setelah melakukan validasi awal. Akibatnya, penggunaan sumber daya dan jumlah permintaan ke server akan berkurang secara signifikan

Antarmuka yang lengkap dan mudah digunakan

Dengan menggunakan JavaScript, Anda dapat membuat antarmuka sisi klien yang interaktif, misalnya menambahkan penggeser, tayangan slide, efek mouse roll-over, fitur drag-and-drop, dll.

Umpan balik cepat untuk pengguna

Dengan menggunakan JavaScript, pengguna akan dengan cepat mendapatkan umpan balik. Misalkan ada user yang sudah mengisi form dan ada satu kolom yang belum terisi atau kosong. Tanpa validasi JavaScript, pengguna tidak akan sadar jika ada kolom yang belum diisi hingga halaman akhirnya dimuat ulang. Dengan JavaScript, pengguna tidak perlu menunggu karena akan langsung diberikan peringatan

Proses debug mudah

JavaScript adalah bahasa yang ditafsirkan, artinya kode tertulis ditafsirkan baris demi baris. Saat muncul error, Anda akan langsung melihat nomor baris tempat terjadinya error

Cara Membuat JavaScript di HTML

Setelah membahas kelebihan yang ditawarkan JavaScript, saatnya mempelajari lebih lanjut tentang cara menyematkan JavaScript ke dalam HTML. Berikut dua cara yang bisa Anda lakukan

Cara membuat JavaScript di HTML secara langsung

Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan:

di antara tag
di antara

Loading akan berbeda tergantung pada letak atau lokasi di mana Anda menambahkan kode JavaScript ke file HTML. Anda bisa mencobanya dengan menambahkan kode tersebut ke section sehingga kode yang dimaksudkan terpisah dari konten file HTML Anda. Hanya saja, kecepatan loading akan meningkat, dalam hal ini konten webiste juga akan terload lebih cepat, jika Anda memasukkan kode ke dan setelah itu JavaScript akan di-parse. Sebagai contoh, file HTML berikut ini akan menampilkan waktu saat ini:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>JAVASCRIPT IS USUALLY PLACED HERE</script>
<title>Time right now is: </title>
</head>
<body>
<script>JAVASCRIPT CAN ALSO GO HERE</script>
</body>
</html>

Kode yang ditulis di atas tidak menyertakan JavaScript sehingga waktu saat ini tidak dapat ditampilkan. Tambahkan kode di bawah ini agar waktu dapat ditampilkan dengan benar dan akurat

var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());

Kode tersebut di-insert di antara tag dan diletakkan di bagian depan kode HTML agar setiap kali page loading, alert akan muncul untuk memberi tahu user tentang waktu saat ini. Berikut tampilan file HTML setelah kode ditambahkan:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now is: </title>
<script>
var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
</script>
</head>
<body>
</body>
</html>

Apabila Anda ingin menampilkan waktu di antara badan halaman, maka Anda harus insert script di antara tag halaman HTML. Berikut tampilan kode setelah script ditambahkan:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now is: </title>
</head>
<body>
<script>
let d = new Date();
document.body.innerHTML = "<h1>Time right now is:  " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()
"</h1>"
</script>
</body>
</html>

Inilah yang terlihat pada akhirnya

Bagaimana cara menambahkan kode JavaScript ke file terpisah

Terkadang Anda mengalami kesulitan saat membuat JavaScript langsung di HTML. Ini karena beberapa skrip JS harus digunakan di berbagai halaman. Oleh karena itu, langkah terbaik adalah menambahkan kode JavaScript ke file terpisah. Cara terbaik untuk membuat JavaScript dalam HTML adalah dengan mengimpor file eksternal. File ini direferensikan dari dalam dokumen HTML, sama seperti saat Anda mereferensikan dokumen CSS. Beberapa keuntungan menambahkan kode JS ke file terpisah adalah:

Ketika kode HTML dan kode JavaScript dipisahkan, maka segala sesuatu yang terkait lebih mudah untuk diandalkan dan digunakan
Keterbacaan dan pemeliharaan kode akan lebih mudah
File JavaScript yang di-cache meningkatkan kinerja situs web secara keseluruhan dengan mengurangi waktu yang diperlukan untuk memuat halaman

Sekarang kita mereferensikan file JavaScript dalam HTML, seperti ini

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now:</title>
</head>
<body>
</body>
<script src="js/myscript.js"></script>
</html>

Isi dari file myscript. js akan terlihat seperti ini

let d = new Date();
document.body.innerHTML = "<h1>Time right now is:  " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()</h1>"

Catatan. Anggap saja file myscript. js disimpan di direktori yang sama dengan file HTML

Contoh JavaScript untuk memvalidasi alamat email

JavaScript mendukung aplikasi dengan memvalidasi input pengguna di sisi klien. Salah satu input pengguna terpenting yang memerlukan validasi adalah alamat email. Fungsi JavaScript berikut akan membantu Anda memvalidasi alamat email yang telah dimasukkan sebelum mengirimkannya ke server

function validateEmailAddress(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate() {
$("#result").text("");
var emailaddress = $("#email").val();
if (validateEmailAddress(emailaddress)) {
$("#result").text(emailaddress + " is valid :)");
$("#result").css("color", "green");
} else {
$("#result").text(emailaddress + " is not correct, please retry:(");
$("#result").css("color", "red");
}
return false;
}
$("#validate").bind("click", validate);

Untuk melampirkan fungsi ini ke formulir input, Anda dapat menggunakan kode berikut

<form>
<p>Enter an email address:</p>
<input id='email'>
<button type='submit' id='validate'>Validate!</button>
</form>
<h2 id='result'></h2>

Di bawah ini adalah hasil tampilan yang akan Anda dapatkan setelah menggabungkan semuanya menjadi file HTML

Jika validasi salah, maka tampilan akan berbeda

Sekarang Anda tahu cara membuat JavaScript dalam HTML dengan beberapa contoh dasar

Situs web anti-lambat ekstra cepat. Dapatkan domain gratis dengan langganan hosting web 1 tahun. Pilih Hosting Web

Kesimpulan

Pada artikel ini, kami menulis dua cara untuk memasukkan JavaScript ke dalam HTML. Jika Anda sudah menguasai kedua metode tersebut, maka Anda bisa melakukan apa saja dengan kedua bahasa pemrograman tersebut. JavaScript dapat digabungkan dengan HTML untuk mendukung aplikasi modern yang intuitif, interaktif, dan ramah pengguna sehingga Anda dapat mengembangkan situs web dengan mudah. Selain itu, dengan melakukan validasi sisi klien sederhana, lalu lintas ke server akan diturunkan dan kinerja situs web secara keseluruhan dapat ditingkatkan

Penulis

Ariata C

Ariata suka menulis dan menerjemahkan, dan saat ini bekerja sebagai penerjemah di Hostinger Indonesia. Melalui artikel dan tutorial yang dipublikasikan di blog Hostinger, Ariata ingin berbagi ilmu tentang website, WordPress, dan hal-hal terkait hosting lainnya kepada para pembaca.

Penggunaan HTML langkah demi langkah?

Cara Membuat Halaman Web Sederhana dengan HTML .

Buka editor teks. .

Setel jenis dokumen ke HTML. .

Tambahkan tab judul ke halaman web Anda. .

Ketuk di bawah tanda "Kepala" tertutup. .

Selanjutnya buat judul halaman. .

Tambahkan judul tambahan jika Anda mau. .

Buatlah sebuah paragraf. .

Mengubah warna teks

Di mana kode HTML ditulis?

htm atau. html . Kita dapat menulis kode pada editor kode seperti Notepad, Sublime Teks atau yang lainnya.

Bagaimana cara membuat paragraf dalam HTML?

Paragraf adalah kumpulan dari beberapa kalimat. Di web, Paragraph biasanya digunakan untuk menampilkan teks atau artikel. Paragraf dalam HTML dibuat dengan tag . Selain tag ini, ada juga tag pendukung lainnya seperti

Bagaimana cara menggunakan JavaScript dalam HTML?

Anda dapat langsung menambahkan JavaScript di HTML dengan menggunakan tag yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis . Kode JS yang dapat ditambahkan. antara tag