Scribd
Unggah
19 tayangan6 halaman

Membuat Website Sederhana Dengan HTML Dan CSS

Dokumen ini menjelaskan cara membuat website sederhana menggunakan HTML dan CSS, dengan penekanan pada pentingnya memahami dasar-dasar HTML sebelum memulai. Selain itu, dijelaskan juga struktur dasar dokumen HTML, pentingnya CSS untuk tata letak dan estetika, serta langkah-langkah awal yang diperlukan untuk mulai coding. Akhirnya, dokumen ini membahas tentang struktur navigasi dan layout website yang baik untuk meningkatkan kenyamanan pengguna.

Diunggah oleh

metal squad metal squad
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 PDF, TXT atau baca online di Scribd
19 tayangan6 halaman

Membuat Website Sederhana Dengan HTML Dan CSS

Dokumen ini menjelaskan cara membuat website sederhana menggunakan HTML dan CSS, dengan penekanan pada pentingnya memahami dasar-dasar HTML sebelum memulai. Selain itu, dijelaskan juga struktur dasar dokumen HTML, pentingnya CSS untuk tata letak dan estetika, serta langkah-langkah awal yang diperlukan untuk mulai coding. Akhirnya, dokumen ini membahas tentang struktur navigasi dan layout website yang baik untuk meningkatkan kenyamanan pengguna.

Diunggah oleh

metal squad metal squad
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 PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 6

Membuat Website Sederhana Dengan HTML

Dan CSS
Pada kesempatan kali ini kita akan membahas cara membuat website dengan menggunakan html
dan css. Namun harus di pastikan setidaknya kalian sudah memahami dasar-dasar html.

Sebetulnya saat ini untuk membuat website itu sangat mudah, bahkan ada beberapa CMS yang telah
menyediakan fitur website builder sehingga kita bahkan tidak perlu sedikitpun untuk ngoding. Namun
sangat baik jika kalian memahami cara membuat website dari nol tanpa bantuan tools atau CMS
yang ada saat ini.

Secara umum website yang sering kita jumpai di internet menggunakan bahasa markup HTML dan
CSS (Cascading Style Sheet) serta bahasa pemrograman javascript dan PHP. Namun untuk
membuat website sederhana bersifat statis cukup dengan HTMLdan CSS saja.

Kenapa Harus Belajar CSS Juga?


Untuk menjawab pertanyaan ini perhatikan ilustrasi gambar di bawah ini:

Saat membangun sebuah website saya ilustrasikan seperti membuat kerangka bangunan rumah,
html ibaratnya komponen-komponen untuk membangun sebuah rumah sedangkan CSS akan
membuat komponen-komponen tersebut menjadi satu kesatuan yang utuh sehingga rumah tersebut
bisa dibangun dengan pas dan menarik.
CSS kita gunakan untuk mengatur jarak antar elemen, ukuran (tinggi, lebar), ukuran dan jenis font,
warna, efek hover dan masoh banyak lagi.

Jadi kita tidak bisa hanya memakai html saja untuk membuat website, kita membutuhkan css juga.

Oke, Saya harus mulai dari mana ?


Untuk mulai langkah awal kita butuh tools untuk coding dan menjalankan hasil codingan. Secara
sederhana yang kita butuhkan hanya teks editor dan broeswer.

1. Teks Editor

Teks editor ini akan menjadi tools untuk kalian membuat kode-kode HTML dan CSS yang di butuhkan
untuk membangun sebuah halaman website.

Notepad menjadi aplikasi yang paling standar dan sudah tersedia di platform windows. Jika kalian
ingin yang profesional sebaiknya kalian pakai notepad++ atau sublime text 3. Dari ketiganya yang
paling saya rekomendasikan adalah sublime text 3.

Semua aplikasi di atas bisa kalian download secara gratis di internet.

2. Browser

Website html yang kita buat melalui teks editor selanjutnya akan kita jalankan di aplikasi browser.
Browser yang saya rekomendasikan adalah chrome dan firefox kalian bisa memilih salah satunya.

Mengenal Struktur Dasar Dokumen HTML


Secara umum struktur dasar dari suatu dokumen HTML adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Web dengan HTML dan CSS - Kelasprogrammer.com</title>
</head>
<body>
<!--Elemen yang ditampilkan di halaman browser -->
</body>
</html>

Di dalam HTML versi ke-5 setiap membuat dokumen html harus di awali dengan sintak <!DOCTYPE
html> sintak ini berfungsi untuk memberitahu kepada browser bahwa dokumen html yang dibuat
menggunakan versi ke-5, fungsi lain sekaligus membantu browser untuk menampilkan setiap elemen
html dengan baik (karena menggunakan versi terbaru).

Selanjutnya dokumen HTML selalu di mulai dengan tag pembuka <html> dan kemudian di akhiri
dengan penutup </html>

Setiap tag di html di desain memiliki pasangan, ada tag pembuka dan tag penutup, walaupun ada
juga beberapa tag yang single (berdiri sendiri) seperti <br> untuk membuat baris baru <hr> untuk
membuat garis horizontal dan lainnya.

Tag selanjutnya adalah tag <head> yang berfungsi sebagai heading dari dokumen html yang kita
buat. Pada bagian <head> bisa kita buat judul dokumen, inisialisasi css, desktripsi dan meta tag
lainnya.
Di dalam tag <head> terdapat tag <title> untuk membuat judul yang nantinya akan di tampilkan pada
menu tab di browser.

Bagian utama dalam struktur dokumen html adalah bagian <body> karena di bagian ini berkaitan
dengan elemen yang tampil dan di lihat oleh pengguna, kita akan banyak membuat kode-kode html
nya.

<!DOCTYPE html>
<html>
<head>
<title>Membuat Web dengan HTML dan CSS - Kelasprogrammer.com</title>
</head>
<body>
<!--Elemen yang ditampilkan di halaman browser -->
</body>
</html>

Di dalam HTML versi ke-5 setiap membuat dokumen html harus di awali dengan sintak <!DOCTYPE
html> sintak ini berfungsi untuk memberitahu kepada browser bahwa dokumen html yang dibuat
menggunakan versi ke-5, fungsi lain sekaligus membantu browser untuk menampilkan setiap elemen
html dengan baik (karena menggunakan versi terbaru).

Selanjutnya dokumen HTML selalu di mulai dengan tag pembuka <html> dan kemudian di akhiri
dengan penutup </html>

Setiap tag di html di desain memiliki pasangan, ada tag pembuka dan tag penutup, walaupun ada
juga beberapa tag yang single (berdiri sendiri) seperti <br> untuk membuat baris baru <hr> untuk
membuat garis horizontal dan lainnya.

Tag selanjutnya adalah tag <head> yang berfungsi sebagai heading dari dokumen html yang kita
buat. Pada bagian <head> bisa kita buat judul dokumen, inisialisasi css, desktripsi dan meta tag
lainnya.

Di dalam tag <head> terdapat tag <title> untuk membuat judul yang nantinya akan di tampilkan pada
menu tab di browser.

Bagian utama dalam struktur dokumen html adalah bagian <body> karena di bagian ini berkaitan
dengan elemen yang tampil dan di lihat oleh pengguna, kita akan banyak membuat kode-kode html
nya.

Menentukan Struktur navigasi


Struktur navigasi web adalah adalah suatu struktur untuk menggambarkan bagaimana suatu
halaman di dalam website yang saling berhubungan antara satu dengan lainnya.

Penting untuk membuat struktur navigasi sebelum kita membuat website. Berikut ini contoh navigasi
halaman website yang akan kita buat:

Saat pertama kali pengguna mengakses website, halaman index akan menjadi halaman utama yang
terdiri dari menu home, kontak saya dan tentang saya, halaman home bisa kita gunakan sebagai
halaman index yang berisi konten artikel-artikel pada website kita.

Membuat Layout Website


Layout adalah tata letak dari setiap komponen elemen di dalam website. Layout berfungsi untuk
memetakan bagian-bagian dalam halaman website. Dengan desain layout yang baik akan
memberikan kenyamanan kepada pengunjung.

Secara umum website memiliki 4 bagian layout yaitu

Header – Berisi judul website


Navigasi – Untuk membuat menu navigasi
Konten – Bagian utama yang menjadi sasaran informasi yang ingin di sampaikan ke
pengunjung
Footer – Bagian paling bawah biasa berisi keterangan tambahan seperti informasi kepemilikan
atau copyright.
Baca Juga :

Kerajinan Bahan Limbah Yang Kreatif Dan Berguna

Anda mungkin juga menyukai