Belajar Dasar HTML #3 : Menjalankan File Serta Struktur HTML
Sebelumnya kita sudah mempelajari tentang Mengenal Aplikasi Editor & Web Browser, sekarang kita akan membahas, Menjalankan file serta Struktur HTML dengan Aplikasi Editor Atom dan kita jalankan ke web browser.
File HTML
Dokumen HTML yang berakhir dengan ekstensi .html atau .htm. Ekstensi ini bisa dilihat dengan menggunakan web browser. browser akan membaca file html dan me-render isi kontenya sehingga dapat dilihat dan dibaca oleh pengguna user lainnya.Pada bagian halaman HTML terdiri dari beberapa tags ( disebut juga dengan elements), yang mengacu pada building block halaman web. Sebagian element HTML memiliki tag pembuka dan penutup yang menggunakan syntax <tag> isi </tag>.
Agar kalian mudah dalam mengaksek file, lebih baik kalau kita buat dulu foldernya. Disini saya akan menyimpan folder pada Disk D dengan format "Belajar_HTML_CSS". kalian boleh membuat format atau tempatnya berbeda, tidak harus seperti saya. Folder ini nantinya akan kita jadikan untuk seluruh tempat halaman HTML yang akan saya buat.
Untuk selanjutnya, kita buka aplikasi Atom, atau aplikasi editor lainnya. Kemudian kalian klik pada bagian File, lalu klik New File ( alternatif Ctrl+N). Setelah itu kalian Save As dulu (alternatif Ctrl+Shift+S), format namanya bebas tetapi untuk ekstensinya harus .html. Di sini saya menggunakan format Belajar_HTML.html. Dan ketik seperti di bawah ini, (kalian bisa ubah text yang berwarna putih)
Setelah itu buka pada browser, kalian bisa membukanya melalui windows explorer dengan menarik file tersebut ke dalam browser kalian, atau kalian juga bisa membukanya pada aplikasi atom, seperti dibawah ini.
Selamat, File HTML kita sudah berhasil, meskipun di dalamnya belum ada kode htmlnya.
Sekian untuk pembahasan kali ini, Selanjutnya kita akan membahas tentang Mengenal beberapa tag, elemen dan atribut di dalam HTML.
Untuk selanjutnya, kita buka aplikasi Atom, atau aplikasi editor lainnya. Kemudian kalian klik pada bagian File, lalu klik New File ( alternatif Ctrl+N). Setelah itu kalian Save As dulu (alternatif Ctrl+Shift+S), format namanya bebas tetapi untuk ekstensinya harus .html. Di sini saya menggunakan format Belajar_HTML.html. Dan ketik seperti di bawah ini, (kalian bisa ubah text yang berwarna putih)
<!DOCTYPE html>
<html>
<head>
<title> Syteekno </title>
</head>
<body>
<h1> Selamat Datang Di SyTeekno </h1>
<p>
Halo lagi sahabat syteekno, kita bertemu lagi
</p>
<h2> Sub Judul pertama </h2>
</body>
</html>Selamat, File HTML kita sudah berhasil, meskipun di dalamnya belum ada kode htmlnya.
Struktur HTML
Dibawah ini merupakan kode HTML yang baru saja sudah kita buat, dan sudah saya tambahkan beberapa tag pada bagian body :
Hasil kode
Halaman HTML memiliki 3 struktur dasar yang sangat penting, terdiri dari bagian Deklarasi (tag <!DOCKTYPE html> dan tag <html>), bagian Head (tag <head>), dan bagian Body (tag <body>), dan juga ingat setiap beberapa tag pada html ini selalu diakhiri dengan tag penutup </>, kecuali bagian DTD tidak meggunakan tag penutup.
Apa yang dimaksud dengan bagian Deklarasi, Head, dan Body?. mari kita bahas satu per satu.
Hasil kode
Halaman HTML memiliki 3 struktur dasar yang sangat penting, terdiri dari bagian Deklarasi (tag <!DOCKTYPE html> dan tag <html>), bagian Head (tag <head>), dan bagian Body (tag <body>), dan juga ingat setiap beberapa tag pada html ini selalu diakhiri dengan tag penutup </>, kecuali bagian DTD tidak meggunakan tag penutup.
Apa yang dimaksud dengan bagian Deklarasi, Head, dan Body?. mari kita bahas satu per satu.
Bagian Deklarasi
Pada bagian awal baris, terdapat tag DTD (Document Type Declaration) yaitu <!DOCTYPE>. Berfungsi untuk memberitahu kepada browser tentang jenis dokumen apa yang diharapkan. DTD pada contoh diatas merupakan DTD versi HTML 5.
Kita juga boleh DTD tidak ditulis, browser tetap menampilkan dan memproses seperti aslinya, tentunya tidak lazim jika tidak menggunakan DTD karena melanggar aturan standar W3C.
Untuk penjelasan lebih dalam lagi tentang DTD akan kita bahas dalam pembahasan terpisah.
Kemudian dibawah DTD ada tag deklarasi, terdapat tag pembuka HTML. Tag <html> ini wajib ditulis pada jenis dokumen HTML. Didalamnya terdapat tag penting, yaitu <head> dan <body>, kemudian ditutup dengan tag </html>.
Pada contoh diatas saya menggunakan tag <title>, yang digunakan untuk menampilkan title yang akan tampil pada bagian atas tab web browser (berisi judul web kita), seperti contoh diatas title dari website saya beri Syteekno.
Kita juga boleh DTD tidak ditulis, browser tetap menampilkan dan memproses seperti aslinya, tentunya tidak lazim jika tidak menggunakan DTD karena melanggar aturan standar W3C.
Untuk penjelasan lebih dalam lagi tentang DTD akan kita bahas dalam pembahasan terpisah.
Kemudian dibawah DTD ada tag deklarasi, terdapat tag pembuka HTML. Tag <html> ini wajib ditulis pada jenis dokumen HTML. Didalamnya terdapat tag penting, yaitu <head> dan <body>, kemudian ditutup dengan tag </html>.
Bagian Head
Bagian ini merupakan bagian kepala HTML, diawali dengan <head> dan diakhiri dengan </head>. Biasanya berisi berbagai definisi, seperti tag meta SEO, tag title, kode program CSS, JS dan kode lainnya yang tidak akan tampil dalam browser.Pada contoh diatas saya menggunakan tag <title>, yang digunakan untuk menampilkan title yang akan tampil pada bagian atas tab web browser (berisi judul web kita), seperti contoh diatas title dari website saya beri Syteekno.
Bagian Body
Pada bagian tag body, semua bagian/elemen akan tampil pada halaman web browser. Diawali dengan tag <body>, kemudian berisi kode CSS, JS dan element seperti judul/subjudul (H1, H2, dst), paragraf (p), link (a href), gambar (img), tabel, dll, setelah itu ditutup dengan </body>.Sekian untuk pembahasan kali ini, Selanjutnya kita akan membahas tentang Mengenal beberapa tag, elemen dan atribut di dalam HTML.
Posting Komentar untuk "Belajar Dasar HTML #3 : Menjalankan File Serta Struktur HTML"