Belajar HTML Dasar Untuk Membuat Website
Monday, April 04, 2016
Add Comment
Dunia Ilmu Bersama : Haiii, pada kesempatan kali ini saya akan berbagi atau mengajarkan sobat apa saja syntax HTML yang digunakan untuk pembuatan sebuah website. Mungkin ini masih sangat dasar bagi sobat yang sudah memiliki kemampuan yang sudah tinggi, namun disini saya hanya akan mengajarkan dasarnya saja. Oke, langsung saja di bawah ini.
Materi Kali ini :
- Pengertian HTML
- Cara Membuat HTML
- Struktur Dasar HTML
- Syntax Dasar Untuk Font
- Syntax Dasar Untuk Memasukan Gambar
- Macam - Macam Heading
- Sebelumnya apa sih itu HTML ? apa sobat sudah pernah tahu ? Oke, mari saya jelaskan sedikit. HTML salah satu dari bahasa pemograman yang begitu populer saat ini, HTML sendiri ialah singkatan dari HyperText Markup Language.
- Untuk membuatnya cukup mudah kok, sobat hanya perlu membuka aplikasi editor yang akan di gunakan untuk membuat website, seperti notepad ++ , sublime, dream wiver, atom, dan masih banyak lagi aplikasi editor lainnya lalu men-save file tersebut dengan format .html ( dot html ). Lihat gambar di bawah ini.
- Dalam pembuatan website, ada bagian bagian yang harus sobat pahami fungsinya terlebih dahulu, lihat gambar berikut.
<strong> Penebalan Huruf
<em> Memiringkan Huruf
<ins> Membuat garih bawah pada huruf
<del> Mencoret Huruf
Untuk Contoh :
- <font><strong> belajar html </strong></font>
- <font><em> belajar html </em></font>
- <font><ins> belajar html </ins></font>
- <font><del> belajar html </del></font>
Hasilnya akan seperti gambar dibawah ini.
- folder
- belajar.html
- folder
- gambar.jpg
Materi Kali ini :
- Pengertian HTML
- Cara Membuat HTML
- Struktur Dasar HTML
- Syntax Dasar Untuk Font
- Syntax Dasar Untuk Memasukan Gambar
- Macam - Macam Heading
Pengertian HTML
- Sebelumnya apa sih itu HTML ? apa sobat sudah pernah tahu ? Oke, mari saya jelaskan sedikit. HTML salah satu dari bahasa pemograman yang begitu populer saat ini, HTML sendiri ialah singkatan dari HyperText Markup Language.
Cara membuat HTML bagaimana sih ?
- Untuk membuatnya cukup mudah kok, sobat hanya perlu membuka aplikasi editor yang akan di gunakan untuk membuat website, seperti notepad ++ , sublime, dream wiver, atom, dan masih banyak lagi aplikasi editor lainnya lalu men-save file tersebut dengan format .html ( dot html ). Lihat gambar di bawah ini.
Struktur Pada HTML
- Dalam pembuatan website, ada bagian bagian yang harus sobat pahami fungsinya terlebih dahulu, lihat gambar berikut.
Kesimpulan :
<html> = Adalah syntax pembuka, dimana semua isi website yang akan sobat tulis berada didalamnya hingga penutup </html>
<head> = Adalah syntax pembuka pada bagian header, dimana jika sobat ingin mengedit atau menambahkan sesuatu di bagian header website sobat, sobat bisa menaruh beberapa syntaknya pada bagian ini, ingat !! taruh syntak nya diantara <head> dan </head>
Mungkin supaya lebih jelas, ( mungkin capek ngetiknya ) sobat bisa lihat gambar dibawah ini.
Syntax Dasar Untuk Font
- Untuk membuat sebuah tulisan " belajar html ", sobat harus menggunakan syntax <font>belajar html</font>. dan untuk penambahan lainnya seperti huruf tebal, miring, bergaris bawah, sobat bisa menambahkan kode dibawah ini :
<strong> Penebalan Huruf
<em> Memiringkan Huruf
<ins> Membuat garih bawah pada huruf
<del> Mencoret Huruf
Untuk Contoh :
- <font><strong> belajar html </strong></font>
- <font><em> belajar html </em></font>
- <font><ins> belajar html </ins></font>
- <font><del> belajar html </del></font>
Hasilnya akan seperti gambar dibawah ini.
Bukan hanya seperti cara diatas saja, sobat juga bisa menggunakan syntax berikut :
<font size="10px" color="#000000" face="arial"> belajar html </font>
Catatan :
Size = untuk ukuran text
Color = warna pada text, #000000 disitu adalah warna hitam
Face = jenis tulisan atau font style
Masih banyak lagi atribut selain size,color,face . Mungkin untuk lebih lengkapnya sobat bisa mencari di google, ada banyak kok postingan tentang syntax pada HTML.
Syntax Dasar Untuk Memasukan Gambar
- Untuk memasukan sebuah gambar, syntax yang diperlukan yaitu :
<img src="lokasi gambar" alt="TEXT ALTERNATIF" />
- Contoh cara pemakaiannya, misal sobat memanggil gambar dalam satu folder dengan file html
<img src="gambar.jpg" alt="gambar" />
- folder
- belajar.html
- gambar.jpg
- Contoh apabila gambar berada di dalam folder yang berada pada folder.
<img src="folder/gambar.jpg" alt="gambar" />
- belajar.html
- folder
- gambar.jpg
- Contoh apabila gambar berada di luar folder yang berada pada folder lain.
<img src="../folder/gambar.jpg" alt="gambar" />
- folder
- gambar.jpg
- folder
- belajar.html
Kegunaan :
Src = untuk pemanggilan lokasi gambar
Alt = untuk menampilkan tulisan begitu gambar di hover ( atau diarahkan pointer ).
- Apa itu Heading ? heading adalah ukuran text / font yang akan membedakan misalnya pada buku buku non fiksi dimana terdapat BAB, SUB BAB, dan sebagainya, nah oleh karena itu dalam pembuatan website, ada 3 Heading yang biasa digunakan, berikut syntax nya.
<h1> Heading </h1>
<h2> Sub Heading </h2>
<h3> Minor Heading </h3>
Untuk lebih jelas kegunaannya, sobat bisa langsung saja mencobanya, dan berikut hasil dari syntax diatas.
<img src="../folder/gambar.jpg" alt="gambar" />
- folder
- gambar.jpg
- folder
- belajar.html
Kegunaan :
Src = untuk pemanggilan lokasi gambar
Alt = untuk menampilkan tulisan begitu gambar di hover ( atau diarahkan pointer ).
Macam macam Heading
- Apa itu Heading ? heading adalah ukuran text / font yang akan membedakan misalnya pada buku buku non fiksi dimana terdapat BAB, SUB BAB, dan sebagainya, nah oleh karena itu dalam pembuatan website, ada 3 Heading yang biasa digunakan, berikut syntax nya.
<h1> Heading </h1>
<h2> Sub Heading </h2>
<h3> Minor Heading </h3>
Untuk lebih jelas kegunaannya, sobat bisa langsung saja mencobanya, dan berikut hasil dari syntax diatas.
Mungkin ini dulu yang bisa saya tulis, untuk lebih lanjutnya, nantikan update dari saya, semoga hal ini bermanfaat bagi sobat semua, sampai jumpa pada artikel saya selanjutnya.
0 Response to "Belajar HTML Dasar Untuk Membuat Website"
Post a Comment
Note: only a member of this blog may post a comment.