Membuat dan Menjalankan Website Sederhana

Di blog sebelumnya saya menerangkan mengenai Apa itu HTML (HyperText Markup Language) dan di blog ini kita akan mencoba mempraktikan dan juga membuat website sederhana menggunakan HTML.

1. Tulis Kode HTML

Kode HTML bisa ditulis di mana saja, asalkan ekstensi file nya .html , kode html bisa ditulis di notepad, sublime ,vscode atau text editor lainnya asalkan ekstensi filenya .html .

Untuk menulis kode html awali dengan tag berikut :

<!DOCTYPE html>

kode diatas akan memberitahu sistem bahwa file ini berisi kode html, dan akan mulai membacanya. kemdian seluruh kode html akan ditulis diantara tag <html> ... </html> 

<!DOCTYPE html>

<html>

    ...

</html>

kemudian di dalam tag <html> ada dua tag utama yaitu tag <head> dan <body> . 

<!DOCTYPE html>

<html>

  <head>

    ... 

  </head>

  <body>

    ...

  </body>

</html>

Di dalam tag <head> ini akan berisi title serta meta information mengenai kode html yang ditulis, nantinya browser akan membaca kode html ini sesuai dengan informasi yang ada di dalam tag <head> ini.

dan kode lain seperti tulisan, kata, gambar, sematan video, atau yang lainnya akan berada di tag <body> .

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>websiteku</title>

  </head>

  <body>

    <h1>Hello World</h1>

    <p>Paragraf 1</p>

    <p>Paragraf 2</p>

  </body>

</html>

kode di dalam tag <meta> merupakan meta information yang akan dibaca browser saat menjalankan kode html.  

contoh meta diatas memberikan informasi bahwa di kode ini akan menggunakan charset utf-8 dan  lebar halaman website ini akan selebar layar pengguna.

dan di dalam tag <body> terlihat saya isi dengan beberapa tag html dasar yaitu <h1> alias heading 1 yang artinya kata yang ada didalamnya akan menjadi heading dan <p> atau paragraf yang biasa digunakan untuk menulis paragraf.

2. Menjalankan Kode HTML

Setelah menulis kode html di text editor, tinggal kita simpan kode tersebut dengan ekstensi .html tentu saja. dan kemudian pergi ke file => klik kanan => buka dengan browser(chrome, firefox, dll). 

dan kemudian file html kita akan dijalankan di browser :

dan begitulah langkah pertaman untuk menjalankan kode html, memang masih terlihat sangat sangat sederhana tanpa warna, block atau yang lainnya. dan tentu saja hal ini membuat html kita jadi tidak indah.

maka dari itu ada yang namanya CSS alias Cascading StyleSheet. yaitu sebuah kode yang ditambahkan ke kode html kita untuk mempercantik dan memperindah tampilannya.

Demikian untuk blog kali ini semoga bermanfaat, 

terima kasih

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Mengakses Perangkat Cisco Melalui Console

Mengakses perangkat Cisco melalui console merupakan keterampilan dasar yang perlu dikuasai oleh seorang jaringan atau administrator sistem.  Console adalah saluran komunikasi fisik yang memungkinkan pengguna untuk terhubung langsung dengan perangkat Cisco dan mengonfigurasi atau mengelolanya. Dalam blog ini, kami akan memberikan panduan langkah demi langkah tentang cara mengakses perangkat Cisco melalui console, mulai dari persiapan hingga proses koneksi. Persiapan Awal Sebelum mengakses perangkat Cisco melalui console, ada beberapa persiapan awal yang perlu dilakukan: Kabel Console: Anda akan membutuhkan kabel console atau kabel rollover yang sesuai untuk menghubungkan perangkat Cisco ke komputer Anda. Kabel ini memiliki konektor RJ-45 di satu ujung dan konektor serial di ujung lainnya. Komputer dan Terminal Emulator: Pastikan Anda memiliki komputer atau laptop yang terhubung ke perangkat Cisco. Anda juga membutuhkan terminal emulator seperti PuTTY (untuk Windows) atau Terminal (u...
Baca selengkapnya

Mempercantik Website Dengan CSS : Tutorial CSS Dasar

Menghubungkan CSS (Cascading Style Sheets) ke HTML adalah langkah penting dalam mengatur tampilan dan gaya halaman web. Dalam blog ini, kami akan memberikan panduan langkah demi langkah tentang cara menghubungkan CSS ke HTML dan juga menjelaskan beberapa style dasar yang bisa diterapkan ke elemen HTML. Dengan memahami konsep ini, Anda akan dapat membuat halaman web yang menarik dan estetik. Bagian 1: Menghubungkan CSS ke HTML Buat File CSS: Pertama, buat file baru dengan ekstensi ".css" dan simpan dalam direktori yang sama dengan file HTML Anda. Misalnya, "styles.css". Tambahkan Tag Link di HTML: Buka file HTML dan tambahkan tag <link> di dalam tag <head>. Gunakan atribut href untuk menunjukkan file CSS yang akan digunakan. Contoh: <link rel="stylesheet" href="styles.css">. Atur Selektor dan Properti CSS: Di file CSS, gunakan selektor untuk memilih elemen HTML yang ingin Anda gayakan. Kemudian, terapkan properti CSS untuk mengub...
Baca selengkapnya

Apa itu IP address, dan Apa Perbedaannya dengan MAC Address

Dalam dunia jaringan komputer, IP Address dan MAC Address adalah dua konsep yang penting untuk dipahami. Meskipun keduanya berhubungan dengan identifikasi perangkat dalam jaringan, mereka memiliki perbedaan penting. Dalam blog ini, kami akan menjelaskan pengertian IP Address dan MAC Address, serta membandingkan perbedaan mendasar antara keduanya. Pengertian IP Address IP Address (Internet Protocol Address) adalah serangkaian angka yang unik yang diberikan kepada setiap perangkat yang terhubung ke jaringan komputer. IP Address digunakan untuk mengidentifikasi dan memetakan alamat dari sebuah perangkat di jaringan, sehingga memungkinkan komunikasi antarperangkat dalam skala yang luas. Dalam perkembangan teknologi dan kebutuhan akan alamat IP yang lebih banyak, terdapat dua versi IP Address yang umum digunakan, yaitu IPv4 (Internet Protocol version 4) dan IPv6 (Internet Protocol version 6). IPv4, yang merupakan versi awal dari protokol IP, menggunakan format angka desimal yang terdiri dar...
Baca selengkapnya