Mengenal struktur HTML (body)

 Elemen-elemen yang terdapat pada body


Body

<body></body>
Elemen body adalah elemen yang menunjukan konten/isi pada sebuah dokumen.isi dari sebuah dokumen yang akan ditunjukan pada jendela browser, dalam sebuah dokumen hanya boleh terdapat satu elemen body. berikut adalah daftar dari isi elemen di dalam body

<h1></h1> sampai <h6></h6>  =  digunakan untuk membuat judul atau heading


Jika kalian save  dan dibuka pada browser maka hasilnya akan seperti ini:


<hr>  =  digunakan untuk memisahkan konten dengan menampilkan garis pembatas
<br>  =  digunakan untuk membuat garis baru






Silahkan kalian mencoba tag-tag elemen dibawah ini seperti contoh diatas:





NAMA TAG FUNGSI / KEGUNAAN
<b></b> Elemen membuat huruf cetak tebal/bold
<i></i> Elemen membuat huruf cetak miring /italic
<u></u> Elemen membuat garis dibawah teks /underline
<strong></strong> Elemen untuk membuat teks penting /bold
<ins></ins> Elemen untuk membuat teks yang telah dimasukkan ke dalam dokumen
<mark></mark> Elemen untuk menandai suatu teks /kalimat
<small></small> Elemen untuk membuat teks kecil
<img></img> Elemen untuk menampilkan gambar
<p></p> Elemen untuk membuat paragraf
<figcaption></figcaption> Elemen untuk mempresentasikan konten (ilustrasi, diagram foto)
<q></q> Elemen untuk menandai sebuah kutipan atau teks
<cite a href="..."></cite> Elemen yang digunakan untuk rujukan pada sebuah dokumen
<dfn></dfn> Elemen yang digunakan ketika mendefinisikan sebuah istilah
<sub></sub> / <sup></sup> Elemen yang digunakan untuk menunjukan sebuah rumus kimia ataupun matematika.
<footer></footer> Elemen yang digunakan sebagai catatan kaki pada sebuah elemen/ informasi hak cipta
<main></main> Elemen yang digunakan untuk menampung/mewadahi konten utama
<nav></nav> Elemen yang digunakan untuk menampung sebuah navigasi yang sifatnya penting
<article></article> Elemen yang bertindak sebagai container untuk independen konten pada sebuah halaman
<section></section> Elemen yang memiliki kesamaan konten dan memiliki sebuah heading di dalamnya dapat dikelompokan
<div></div> Elemen yang digunakan sebagai wadah (container) yang bersifat umum untuk menampung beberapa konten.
<!--...__> Elemen yang digunakan untuk membuat komentar
<abbr></abbr> Elemen untuk membuat sebuah singkatan
<address></address> Elemen untuk membuat kontak alamat
<bdi></bdi> Elemen untuk mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luarnya
<bdo></bdo> Elemen untukmengganti arah teks
<dfn></dfn> Elemen untuk membuat sebuah istilah definisi
<meter></meter> Elemen untuk membuat pengukuran skala
<pre></pre> Elemen untuk membuat teks terformat
<progress></progress> Elemen untuk memperlihatkan kemajuan tugas
<rp></rp> Elemen untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby
<rt></rt> Elemen untuk membuat sebuah anotasi / pengucapan karakter
<ruby>/<ruby> Elemen untuk membuat sebuah anotasi ruby
<var></var> Elemen untuk membuat sebuah variabel
<form></form> Elemen untuk membuat sebuah form HTML untuk input pengguna
<input></input> Elemen untuk membuat sebuah kontrol input
<textarea></textarea> Elemen untuk membuat sebuah kontrol input multibaris (text area)
<button></button> Elemen untuk membuat sebuah tombol yang dapat diklik
<select></select> untuk membuat sebuah daftar drop-down
<optgroup></optgroup> Elemen untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down
<option></option> Elemen untuk membuat pilihan dalam daftar drop-down
<label></label> Elemen untuk membuat sebuah label untuk sebuah elemen <input>
<legend></legend> Elemen untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details>
<datalist></datalist> Elemen untuk Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input
<keygen></keygen> Elemen untuk membuat key-pair generator kolom input
<output></output> Elemen untuk membuat hasil penghitungan
<figure></figure> Elemen untuk menentukan konten mandiri
<a></a> Elemen untuk membuat hyperlink
<ink></link> Elemen untuk membuat hubungan antara dokumen dan sumber daya eksternal (sering digunakan untuk link ke style sheet)
<ul></ul> Elemen untuk membuat daftar dengan selain nomor
<ol></ol> Elemen untuk membuat daftar dengan nomor
<li></li> Elemen untuk membuat sebuah item daftar
<dl></dl> Elemen untuk membuat sebuah daftar definisi
<dt></dt> Elemen untuk membuat istilah (item) dalam daftar definisi
<menu></menu> Elemen untuk membuat deskripsi dari item dalam daftar definisi
<command></command> Elemen untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat meminta
<table></table> Elemen untuk membuat tabel
<caption></caption> Elemen untuk membuat sebuah caption tabel
<th></th> Elemen untuk membuat sebuah sel header tabel
<tr.</tr> Elemen untuk membuat baris dalam sebuah tabel
<td></td> Elemen untuk membuat sel dalam sebuah tabel
<thead></thead> Elemen untuk mengelompokan isi header dalam sebuah tabel
<tbody></tbody> Elemen untuk mengelompokan isi tubuh dalam sebuah tabel
<tfoot></tfoot> Elemen untuk mengelompokan isi footer dalam sebuah tabel
<col></col> Elemen menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>
<colgroup></colgroup> Elemen menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat
<style></style> Elemen untuk membuat informasi style untuk dokumen
<span></span> Elemen untuk membuat sebuah bagian dalam dokumen
<header></header> Elemen untuk membuat sebuah header untuk dokumen atau bagian
<hgroup></hgroup> Elemen untuk mengelompokan elemen heading (<h1> sampai <h6>)
<aside></aside> Elemen untuk membuat konten lain selain dari konten halaman
<details></details> Elemen untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan
<dialog></dialog> Elemen untuk membuat sebuah kotak dialog atau jendela
<summary></summary> Elemen untuk membuat sebuah judul terlihat untuk elemen
<base></base> Elemen menentukan URL dasar / target untuk semua URL relatif dalam dokumen
<blockquote></blockquote> Elemen untuk membuat kutipan atau testimonial


Selanjutnya kita akan mencoba menuliskan elemen-elemen berdasarkan urutan struktur yang benar.

Mengenal struktur HTML (head)

 Mengenal Elemen pada HTML

Didalam HTML itu sendiri terdapat struktur dan beberapa elemen di di dalamnya, saya akan coba menjabarkan elemen-elemen itu dan menerapkannya pada text editor. pada setiap elemen HTML terdapat dua tag, yaitu tag pembuka <> dan tag penutup </> berikut akan saya jelaskan fungsi dan cara penulisan tag elemen.

DOCTYPE 
<!doctype html> documen type declaration adalah sebuah keterangan yang ditulis untuk memberitahu web browser tentang aturan penulisan dari dokumen yang sedang ditampilkan.



HEAD 

<head></head> elemen HTML yang berfungsi sebagai tempat untuk meletakkan metadata yaitu informasi-informasi halaman web yang tidak ditampilkan pada halaman tersebut. elemen ini sangat penting dan menjadi salah satu syarat minimal dalam struktur global HTML yang ada di W3C.



TITLE 

<title></title> = elemen title berfungsi untuk membuat title atau judul  yang tampil pada title bar di web browser seperti chrome, firefox dan lainnya. jadi judul tersebut tidak akan tampil di halaman web


Meta

<meta> = Elemen meta digunakan untuk menentukan set karakter, deskripsi halaman, kata kunci, penulisan dokumen, dan pengaturan viewport.
<meta charset="utf-8"> = Menentukan set karakter yang digunakan.
<meta name="keywords" content="html,css,javascript"> = Menentukan kata kunci untuk  mesin pencari.
<meta name="description" content="belajar html"> =Menentukan deskripsi halaman web
<meta name="author" content="rudi"> =Menentukan penulis halaman
<meta http-equiv="refresh" content="30"> = Merefresh halaman setiap 30detik
<meta name="viewport" content=width="device-width, initial-scale=1.0"> =Mengatur viewport agar situs terlihat bagus/proposional di semua perangkat.


Script

<script>  =  digunakan untuk mendefisinisikan client-side JavaScript.
(contoh Script akan dijelaskan pada tahap alur pembuatan JavaScript)

Base

<base>  =  digunakan untuk menentukan URL atau target untuk semua URL relative dalam sebuah halaman.

Style

<style>  =  digunakan untuk menentukan informasi style pada suatu halaman web.


sekarang cobalah menyalin apa yang ada di gambar HTML mulai dari doctype sampai penutup html kemudian save dengan cara ctrl+s (jika anda menggunakan Visual Studio Code) jika sudah masuk browser dan reload.


gambar diatas contoh jika kalian telah berhasil menerapkan elemen head. selanjutnya pada pembahasan berikut kita akan belajar mengenai elemen body.
 

Belajar HTML dasar

 

Membuat berkas HTML


Pertama utuk membuat berkas HTML  buat folder bebas dimana saja berikan judul belajar HTML lalu klik kanan NEW untuk membuat Text Document dengan nama belajarHTML, setelah itu silahkan buka TextEditor kalian (saya disini menggunakan Visual Studio Code) tapi jangan khawatir semua sama saja. Jika sudah maka tampilan awalnya sebagai berikut:




Kalian bisa close tab Welcome lalu setelah itu klik File pilih Open folder yang kalian buat tadi maka tampilannya akan sebagai berikut:




Setelah itu klik kanan pada belajarHTML.txt lalu pilih rename ubah format file txt menjadi html jika sudah maka akan ada text <>berwarna dan tampilannya akan menjadi seperti ini:




Sekarang kita coba ketikkan perintah kalimat "Hello World" setelah itu Save File tersebut kemudian anda pergi ke folder belajarHTML dan file belajarHTML tadi telah berubah menjadi icon google chrome (tergantung pilihan kalian terhadap browser utama) maka tampilan di browser seperti ini:








Selamat kalian sudah membuat website pertama kalian. Pada halaman selanjutnya kita akan belajar struktur dasar dari HTML itu sendiri ada head, body dan masih banyak lagi. karena pada dasarnya sebuah website seperti koran, buku, majalah pasti terdapat struktur yang berupa judul, subjudul, paragraf, konten , isi artikel dan masih banyak lagi kita akan membahas hal tersebut secara detail.

Belajar HTML dasar untuk pemula

 

Pengenalan HTML dasar untuk pemula




HTML adalah Hypertext Markup Language HTMLmemungkinkan seorang pengguna untuk membuat dan menyusun bagian paragraf, heading, link atau tautan untuk halaman web atau aplikasi. bahasa pemrograman ini ditulis dalam berkas format ASCII supaya bisa menghasilkan tampilan wujud yang terintegerasi. Terdapat 3 (tiga) struktur penting dalam membuat website, pertama HTML yang berguna menjadi pondasi lalu ada CSS untuk menghiasi website itu sendiri sehingga bisa mempercantik website yang kita buat, kemudian ada JAVA SCRIPT yang merupakan otak dari struktur itu sendiri sehingga membuat website lebih dinamsi dan atraktif.

BAGAIMANA CARA KERJA SEBUAH WEBSITE?


Jika kita mengunjungi Blog ini pastinya kita membutuhkan koneksi internet, karena website memerlukan sebuah web server hosting yang dapat diakses dimana saja, hal pertama yang akan dilakukan sebuah website ketika kita menekan enter pada alamat web yang kita akan tuju adalah browser menghubungi Domain Name System (DNS) server untuk mengarahkan ke alamat server. kemudian browser akan mengirimkan request agar server mengirimkan salinan dari informasi yang nantinya ditampilkan pada client (browser). jika request tersebut berhasil maka server menanggapi (response) permintaan tersebut dan mulai mengirimkan salinan yang dibutuhkan. browser menggabungkan bagian-bagian informasi yang diperoleh untuk kemudian ditampilkan di jendela browser.

Untuk menampilkan informasi pada halaman, browser menggunakan HTML dan CSS yang dikirimkan dari server. dan informasi dalam bentuk HTML dan CSS lah yang dikirimkan server untuk client (browser).  Halaman website juga membutuhkan informasi extra seperti berkas gambar, suara dan video dan semua berkas tersebut bisa ditanamkan pada (embedHTML dan sebenarnya halaman website juga membutuhkan Java Script untuk merender HTML atau CSS agar dapat menampilkan informasi secara dinamis.

Untuk mempelajari dan mendalami HTML kita akan belajar rangkaian penggunaan HTML pada website. mulai dari pembuatan berkas HTML, menggunakan elemen, serta menampilkan gambar dan menyusun layout. dan juga kita akan mempelajari dan mendalami Styling lalu menerapkannya pada website untuk mempercantik dalam penyusunan website yang menarik.


Software/tools yang dibutuhkan


Untuk langkah awal memulai membuat bahasa pemrograman kita tentu kita harus memiliki tools/text editor yang berguna untuk menuliskan kode HTML,CSS dan juga JavaScript. Sebenarnya beberapa sistim operasi komputer sudah memiliki text editor sendiri. contohnya Windows memiliki Notepad, Linux memiliki Text editor dan Mac Os memiliki Text edit. meskipun begitu banyak software yang menawarkan alternatif lain. berikut ini adalah software text editor yang memiliki banyak pengguna diantaranya adalah.

Visual studio code


Visual Studio Editor merupakan software text editor yang dikembangkan oleh Microsoft. dalam software ini terdapat fitur debugging, Git control, syntax highlighting, code completion, snippets, dan code refactoring. Visual Studio Code bisa diunduh oleh pengguna Windows, Mac Os dan juga Linux, dan pastinya text editor ini bisa dipakai secara gratis tanpa harus membeli lisensinya, untuk mendownloadnya silahkan kunjungi website: https://code.visualstudio.com/

Sublime Text


Sublime Text merupakan aplikasi editor untuk kode dan teks yang dapat berjalan di berbagai platform dengan menggunakan teknologi Phyton API. Terbentuknya aplikasi ini terinspirasi dari aplikasi Vim, Aplikasi ini sangatlah fleksible dan powerfull. Fungsional dari aplikasi ini bisa dikembangkan dengan menggunakan sublime-packages. Software ini juga mendukung berbagai bahasa pemrograman dan mampu menyajikan fitur syntax highlight hampir di semua bahasa pemrograman yang didukung ataupun dikembangkan oleh komunitas seperti: C, C++, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, Latex, Lisp, Lua, Markdown, MATLAB, OCaml, Perl, PHP, Phyton R, Ruby, SQL, TCL Textile and XML. Software ini juga bisa diunduh seraca gratis dan tidak memerlukan lisensi anda bisa mengunduhnya di: https://www.sublimetext.com/

Atom Editor


Atom Editor merupakan software text editor yang mirip dengan Sublime Text, namun fiturnya lebih lengkap dan nyaman digunakan, Atom Editor software code buatan Github yang merupakan perusahaan terkenal dengan layanan Cloud Computing untuk project open source menggunakan Git. software ini juga bisa diundah gratis dan tidak memerlukan lisensi tambahan, anda bisa mengunduhnya di: https://atom.io/

Selanjutnya kita akan mencoba membuat berkas HTML dan membangun struktur HTML lalu menerapkan elemen-elemen lainnya.

Belajar HTML dasar untuk pemula

  Pengenalan HTML dasar untuk pemula HTML  adalah  Hypertext Markup Language   HTML memungkinkan seorang pengguna untuk membuat dan menyusun...