Advertisement

Monday, February 18, 2019

Cara Membuat Judul/Heading di HTML


Setelah mengetahui bagaimana cara untuk membuat paragraf di HTML, pada kesempatan kali ini kita akan mempelajari cara pembuatan judul di HTML.

Cara Membuat Judul/Heading di HTML (tag h1)

Dalam dunia HTML, ada istilah yang disebut dengan heading, inilah yang akan kita bahas kali ini. Heading adalah sebuah tag yang disediakan untuk membuat judul dalam suatu paragraf, dan letaknya akan dipisahkan dengan paragraf itu sendiri.

Dalam penggunaannya, heading memiliki 6 tingkatan, mulai dari tingkat 1 sampai tingkat ke-6 yaitu <h1>,<h2>,<h3>,<h4>,<h5>,dan <h6>. Setiap heading memiliki ukuran default berbeda-beda, <h1> akan memiliki ukuran paling besar dan <h6> memiliki ukuran terkecil. 

Berikut contoh penggunaan tag heading dalam HTML
[code hl="1, 4, 7"] <!DOCTYPE html> <html> <head> <title>Penggunaan Tag Heading</title> </head> <body> <h1>menggunakan tag h1 </h1> <h2>menggunakan tag h2 </h2> <h3>menggunakan tag h3 </h3> <h4>menggunakan tag h4 </h4> <h5>menggunakan tag h5 </h5> <h6>menggunakan tag h6 </h6> </body> </html> [/code]

Dalam prakteknya, satu halaman website biasanya hanya menggunakan satu tag h1 dan beberapa tag h2, h3 dan tag p. Ini bertujuan untuk membuat artikel yang baik untuk dibaca dan juga memiliki SEO yang bagus.

Contoh struktur artikel sederhana
[code hl="1, 4, 7"] <html> <head> <title>Struktur Artikel Sederhana</title> </head> <body> <h1>Judul Utama</h1> <p>----Pembahasan----</p> <h2>Sub Judul 1</h2> <p>----Pembahasan Sub Judul 1----</p> <h2>Sub Judul 2</h2> <p>----Pembahasan Sub Judul 2----</p> <h2>Sub Sub Judul 2.1</h2> <p>----Pembahasan Sub Judul 2.1----</p> </body> </html> [/code]
Dengan menggunakan struktur sederhana seperti contoh diatas, kita sudah bisa membuat struktur konten pada HTML.

Penggunaan tag heading itu akan membantu Search Engine seperti Google, Bing dan lain-lain untuk mengindeks situs kita lebih baik. Mesin pencarian akan menilai tag <h1> lebih dari pada tag <h2>, tag <h2> dinilai lebih dari tag <h3> dan seterusnya.

Setelah memahami penggunaan tag heading dalam struktur sederhana artikel dalam HTML, kita juga harus mempelajari cara membuat daftar atau list yang akan sangat berguna saat membuat artikel. Jadi pada artikel selanjutnya kita akan membahas Cara Menggunakan Daftar/List di HTML menggunakan tag <li>,<ol>, dan <ul>.

Sunday, February 17, 2019

Cara Membuat Paragraf dengan HTML


Cara Membuat Paragraf dengan HTML(tag p)

Setelah memahami Struktur Dasar dari HTML, selanjutnya kita akan mempelajari Cara Membuat Paragraf dengan HTML. Dalam membuat paragraf di dokumen HTML sedikit berbeda dengan membuat paragraf pada aplikasi seperti Ms. Word atau semacamnya. Jadi web browser tidak akan menampilkan beda enter atau spasi.

Lebih jelas lagi buatlah dokumen HTML dengan struktur seperti yang sudah kita pelajari kemarin.

[code hl="1, 4, 7"] <html> <head> <title>Title Website Anda</title> </head> <body> Ini adalah paragraf 1 Ini adalah paragraf 2 </body> </html> [/code]

Pada kode diatas, kita tambahkan kata "paragraf 1" dan "paragraf 2" dengan memisahkannya menggunakan 'enter'. Save hasil kerja tersebut dengan nama paragraf.html dan jalankan filenya.



Hasil dari kode diatas menampilkan "paragraf 1" dan "paragraf 2" dalan satu baris, walaupun sudah kita pisahkan dengan 'enter'. Hasil ini juga akan sama jika kita menggunakan 'spasi'. Hal ini terjadi karena HTML mengabaikan 'spasi' dan 'enter'.

Jadi pada intinya kita harus memberikan instruksi pada web browser untuk membuat paragraf satu dengan yang lain harus bertempat pada baris yang berbeda.


Tag Paragraf <p> 

Pada pembuatan paragraf dalam HTML menyediakan tag yang dikhususkan untuk membuat paragraf, yaitu tag <p>. Sekarang kita gunakan tag ini pada dokumen kita yang tadi. 

[code hl="1, 4, 7"] <!DOCTYPE html> <html> <head> <title>Title Website Anda</title> </head> <body> <p>Ini adalah paragraf 1</p> <p>Ini adalah paragraf 2</p> </body> </html> [/code]

Setelah menambahkan tag p pada setiap kalimat, setiap paragraf akan ada pada posisinya masing dan tentunya web browser memberikan spasi yang seharusnya ada antara paragraf.

Tag Break <br> 

Selain menggunakan tag p, kita juga bisa menggunakan tag break (<br>) untuk membuat baris baru dalam dokumen HTML. Ketikkan kode dibawah dan jalankan.


Dalam pengunaan tag <br> ada dua opsi pilihan, yaitu tag <br> dan kemudian di tutup dengan tag </br>. Atau menggunakan tag <br /> tanpa menggunakan tag penutup. Dan hasilnya akan tetap sama.

[code hl="1, 4, 7"] <!DOCTYPE html> <html> <head> <title>Title Website Anda</title> </head> <body> <br>Ini adalah paragraf 1</br> Ini adalah paragraf 2<br /> </body> </html> [/code]


Sebenarnya tag <br> ini bukan untuk membuat paragraf, melainkan hanya untuk memisah baris suatu teks dengan teks lain saja. jadi jika kita ingin membuat sebuah struktur paragraf baru, lebih baik menggunakan tag <p>.


Tag Tebal dan Tag Cetak Miring dalam HTML(Tag Strong & Em)

Saat kita membaca artikel atau sebuah berita dikoran, biasanya kita mendapati kata yang dicetak tebal atau-pun miring, ini bertujuan untuk melakukan penekanan pada kata yang diperlukan. Sama halnya dengan artikel atau berita diwebsite. 

Untuk menebalkan dan memiringkan suatu kata dalam dokumen HTML, kita bisa menggunakan tag <strong> untuk menebalkan dan tag <em>(emphasis) untuk memiringkan teks.

Contoh pengunaan tag <strong> dan <em>.

[code hl="1, 4, 7"] <!DOCTYPE html> <html> <head> <title>Title Website Anda</title> </head> <body> <p> Belajar <em>pemrogaman web</em> akan mudah jika kita<br /> mau mempelajarinya dengan <strong>sungguh-sungguh</strong> dan penuh<br /> semangat<br /> </p> </body> </html> [/code]

Dalam HTML juga terdapat tag lain yang memiliki fungsi sama dengan kedua tag diatas, yaitu tab <b> untuk menebalkan huruf dan tag <i> untuk memiringkan huruf. Namun penggunaan tag ini tidak disarankan karena akan mengganggu tampilan dari HTML.
Setelah memahami cara untuk membuat paragraf, selanjutnya yang kita pelajari adalah membuat judul dalam dokumen HTML dengan menggunakan tag <h1>.

Saturday, February 16, 2019

Struktur Dasar HTML

Belajar Struktur Dasar HTML.

Setelah kita belajar mengenal Tag, Elemen, dan Atribut pada HTML, materi belajar berikutnya adalah mempelajari Struktur Dasar HTML.

Struktur Dasar HTML

Saat ini sebuah dokumen HTML terdiri dari tag DTD(Document Type Declaration) atau lebih dikenal dengan tag DOCTYPE, tag head, tag body, dan tentunya tag html. Mungkin ada pertanyaan "bagaimana dengan tag-tag lainnya seperti tag <p> atau pun tag <a>". Jika timbul pertanyaan seperti diatas, jawabannya itu karena diatas hanyalah contoh paling sederhana dari struktur HTML. 

Masih banyak tag-tag yang terdapat dari satu dokumen HTML pada suatu website, untuk mengetahuinya, silahkan gunakan kombinasi Ctrl + U untuk mengetahui rupa dari struktur HTML sebenarnya.

Untuk lebih memudahkan memahami struktur dasar ini, buka notepad kalian dan ketikkan kode dibawah.
[code hl="1, 4, 7"] <html> <head> <title>Title dari Websiteku</title> </head> <body> <p>Selamat Pagi Dunia, Hello World!</p> </body> </html> [/code]
Setelah selesai, save kode diatas sebagai halaman.html lalu jalankan file tersebut dengan klik 2 kali, atau dengan klik kanan lalu Open With -> Chrome



Setelah mengerti tentang mengerti struktur dasar HTML, yang selanjutnya kita akan membahas satu persatu-satu dari tag yang kita gunakan diatas.


Pengertian DTD atau DOCTYPE

Yang pertama kita bahas kali ini adalah tag DTD atau yang lebih dikenal dengan DOCTYPE. DTD adalah akronim dari kata Document Type Declaration. Yan mana berfungsi untuk memberitahukan kepada web browser bahwa yang kita gunakan ini adalah dokumen HTML.

Penggunaan tag <!DOCTYPE> dikenal setalah HTML5 ada, jadi sebelumnya penggunaan tag <!DOCTYPE> DTD menggunakan sebuah deklarasi yang sangat panjang, bahkan termasuk susah untuk dihafalkan. Contohnya seperti DTD pada xHTML 1.0, pada versi ini DTD yang digunakan sangatlah panjang, bahkan sangat susah untuk dihafal. Berikut ini adalah kodenya,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Sebuah file HTML itu tetap dapat berjalan dengan normal walaupun tanpa dengan DTD. Namun sebenarnya web browser anda menjalankan file HTML tersebut dengan mode quick, sayangnya untuk mengetahui ini kita harus menggunakan Mozilla. Jika sudah menggunakan Mozilla, silahkan buka file HTML anda yang menggunakan DTD dan tidak menggunakan DTD, lalu klik kanan pada halaman web yang tampil tersebut lalu Lihat Informasi Halaman, selanjutnya akan muncul jendela pop up baru yang berisikan informasi tentang halaman yang dimuat.




Saat halaman yang dimuat mengandung DTD, render yang akan dijalankan dalam Mode pemenuhan standar, namun jika halaman yang diload tidak mengandung DTD, web browser akan merender halaman tersebut dengan Mode quirk. 

Tag <html>

Struktur dasar HTML selanjutnya adalah tag HTML. Tag ini berfungsi sebagai wadah dari semua kode/tag pada halaman website. Dalam penulisannya tag HTML dimulai dengan <html> dan diakhiri </html>.

Tag <head>

Tag selanjutnya adalah <head>, tag head ini biasanya berfungsi untuk menempatkan kode CSS atau Javascript yang digunakan untuk memanipulasi halaman suatu website. Selain itu, tag head juga berisi dengan informasi yang diperlukan seperti title dan lain-lain. 

Tag title berfungsi untuk menentukan title dari website kita, contohnya seperti yang ada pada kode HTML diatas.

sama halnya dengan yang lainnya, tang title dan tag head memiliki tag penutup.

Tag <body>

Dan yang terakhir adalah tag <body>, fungsinya adalah untuk wadah dari segala tag yang ingin ditampilkan pada halaman website seperti form, paragraf, gambar dan masih banyak lainnya. tag ini diakhiri dengan </body>.Dalam membuat website, kita akan lebih banyak menghabiskan waktu diantara tag body ini.

Yang perlu perhatian adalah saat kita menggunakan tag <html>, jangan melupakan tag penutup (</html>). Ini sering dilupakan karena letak tag-nya yang berjauhan satu sama lain.
Contoh diatas adalah struktur HTML yang paling sederhana, pada halaman website yang sesungguhnnya bisa terdiri dari ratusan baris bahkan ribuan. Jadi pemahaman ini hanya untuk pondasi dari pembelajaran HTML. Selanjutnya yang akan kita pelajari adalah tag-tag HTML, untuk yang pertama kita akan membahas tag <p>.

Thursday, February 14, 2019

Pengertian Tag, Elemen, dan Atribut dalam HTML


Setelah sebelumnya kita telah belajar bagaimana menyimpan dan menjalankan file HTML di web browser. Yang perlu dipelajari dari HTML adalah penggunaan & pengertian tag, elemen dan atribut. 

Pada dasarnya, Halaman seluruh web yang ada didunia pasti menggunakan HTML sebagai kode yang digunakan untuk menampilkan data yang pada web itu sendiri. Nah, untuk memberitahu web browser akan fungsi dari teks yang ada digunakan lah tag. Dengan tag, kita bisa memberikan fungsi dari setiap teks yang ada, seperti membuat paragraf, huruf cetak miring/tebal, dan masih banyak lagi.

Dalam prakteknya, penggunaan tag pada HTML biasanya terdapat tag berbeda dalam satu fungsi. Contoh, pada saat kita akan menggunakan tag untuk heading, kita ambil heading 2 untuk contoh ini.
[code hl="1, 4, 7"]

Ini adalah heading 2

[/code]

untuk melihat perbedaan dari pengunaan tag, save dan jalankan file dengan tag <h2>, maka hasilnya akan menampilkan tulisan "Ini adalah heading 2" terlihat lebih besar dari pada tidak menggunakan tag <h2>.

Tag <h2> diatas menggunakan macam tag, yaitu tag pembuka <h2> dan tag penutup </h2>. ada juga tag yang tidak memiliki pasangan seperti tag <br />, namun sekarang tag yang tidak memiliki pasangan sudah jarang digunakan.

Banyak tak lagi selain <h2>, ada tag <p> untuk membuat paragraf, tag <b> untuk membuat huruf centak tebal, dan masih banyak lagi.
HTML tidaklah case-sensitive yang artinya, penulisan tag <h2> dengan <H2> akan menghasilkan output yang sama, namun saat ini penggunaan huruf besar sudah jarang digunakan karena para web-developer lebih terbiasa menggunakan huruf kecil.

Pengertian Elemen & Contohnya


Elemen adalah seluruh bagian mulai dari awal tag pembuka sampai tag penutup termasuk juga tag itu sendiri. Atribut sebenarnya juga termasuk dari elemen, namun tidak semua tag memiliki atribut. Contoh,
[code hl="1, 4, 7"] Ini adalah sebuah paragraf baru [/code]
Pada kode diatas "<>Ini adalah sebuah paragraf baru</i>" merupakan elemen dari i

Dalam praktiknya, sebuah elemen biasanya dapat memiliki lebih dari satu tag atau lebih mudahnya, dalam tag satu bisa kita tambahkan tag-tag lain. Contoh.
[code hl="1, 4, 7"] Belajar HTML di website siswamalang.blogspot.com [/code]

Pengertian Atribut dan Contohnya

Atribut adalah informasi yang ditambahkan pada suatu tag yang bisa berupa kode untuk merubah warna teks, ukuruan teks, dan masih banyak lagi. Sebenarnya penggunaan atribut ini tidak terlalu banyak digunakan, karena tidak semua dari tag HTML membutuhkan atribut.

Namun, penggunaan atribut nanti akan sering digunakan saat kita memanipulasi halaman website dengan CSS dan Javascript

tag HTML yang paling sering menggunakan atribut adalah tag <a> yang digunakan untuk membuat link. Contoh,

[code hl="1, 4, 7"] Ini menggunakan atribut href [/code]

diatas merupakan contoh penggunaan atribut href pada tag <a>. Setiap atribut memiliki nama dan nilai dari atribut tersebut. Dan nilai biasanya ditulis dengan memiliki tanda kutip, baik itu kutip satu (') atau pun kutip 2 (").

Pada contoh kode HTML diatas, href="https://siswamalang.blogspot.com" adalah sebuah atribut disertai dengan nilai atribut tersebut. Nilai dari atribut href adalah "https://siswamalang.blogspot.com" yang merupakan sebuah alamat link dari website ini. 

Nilai dari sebuah atribut tidak akan tampil, melainkan akan disimpan didalan tag yang menggunakan atribut tersebut, setelah kode diata dijalankan yang tampil di web browser hanya "Ini menggunakan atribut href".
Sebenarnya banyak sekali tag dalam HTML yang memiliki atribut, href hanya salah satu dari atribut yang ada. Setelah memahami tentang Pengertian Tag, Elemen, dan Atribut dalam HTML, selanjutnya yang akan dipelajari adalah Struktur Dasar dari Halaman HTML.

Friday, February 8, 2019

Menjalankan File HTML

Menjalankan File HTML


Pada tutorial sebelumnya kita sudah membahas tentang memilih Web Browser dan Text Editor. Nah, Pada kesempatan kali ini kita akan belajar mengenai 'bagaimana menjalankan file HTML'.