Showing posts with label belajar HTML. Show all posts
Showing posts with label belajar HTML. Show all posts

Sunday, February 24, 2019

HTML : Style pada HTML

fajaryusuf.com

Sebelum Anda meneruskan untuk praktek pada tutorial HTML Style, sebaiknya Anda pelajari dulu tutorial sebelumnya yaitu HTML Paragraf, karena disini kita akan menghias paragraf yang sudah kita buat sebelumnya.

HTML Style

Seperti yang sudah saya beritahukan kepada Anda tentang pengenalan HTML bahwa HTML tidak berdiri sendiri tetapi bisa dikombinasikan dengan bahasa pemrograman lain untuk membuat website yang bagus. Nah di pembahasan tutorial kali ini kita akan pelajari bagaimana HTML bisa dikombinasikan dengan bahasa pemrograman lain. Saat ini kita akan kombinasikan dengan CSS dasar untuk pengenalan ya.

Atribut HTML Style

Untuk menghias suatu elemt HTML seperti <p>, <b>, <strong>, kita perlu atribut bernama style. Lalu Anda bertanya fungsinya apa? Fungsinya untuk mengubah tampilan. Lebih jelasnya tentang atribut style, Anda bisa lihat anatomi berikut :

<tag_pembuka style="property:value;"> Ini adalah text untuk tampil di browser </tag_penutup>

Property adalah CSS Property seperti warna background, warna text dan sebagainya.
Values adalah nilai dari CSS Property.

Begini, kalau ada text "Aku belajar HTML di fajaryusuf.com" lalu Anda ingin mengganti warna tulisan menjadi merah, maka Property yang digunakan adalah color dan nilai value-nya adalah red;

HTML Warna Background

Properti CSS yang digunakan untuk mengubah warna background adalah background-color.

Contoh

<!DOCTYPE html>
<html>
<body style="background-color:hotpink;">
 
<h1>Belajar HTML di fajaryusuf.com</h1>
<p>Dipandu oleh fajaryusuf</p>
 
</body>
</html>

Silakan Anda coba di Notepad atau di HTML Editor FajarYusuf.Com, maka background tampilan akan berubah menjadi merah muda. Bisa gita ya? hehe

HTML : Style pada HTML

HTML Warna Text

Kalau tadi kita sudah coba mengganti warna background, sekarang kita coba mengganti warna tulisan "Belajar HTML di fajaryusuf.com" dari hitam menjadi hijau ya. Untuk mengganti warna pada text, maka properti CSS yang digunakan adalah color.

<!DOCTYPE html>
<html>
<body style="background-color:hotpink;">
 
<h1 style="color:green;">Belajar HTML di fajaryusuf.com</h1>
<p>Dipandu oleh Fajaryusuf</p>
 
</body>
</html>

Silakan Anda coba di Notepad atau di HTML Editor FajarYusuf.Com. Anda juga bisa mengganti warna pada tulisan "Dipandu oleh Fajaryusuf" dengan warna lain terserah Anda.

HTML : Style pada HTML

HTML Font

Nah tadi Anda sudah pelajari bagaimana cara mengganti warna background dan warna text, sekarang saya akan beri sedikit materi tentang mengubah font text. Untuk mengubah front pada suatu text, properti CSS yang digunakan adalah font-family.

<!DOCTYPE html>
<html>
<body style="background-color:hotpink;">
 
<h1 style="font-family:verdana;">Belajar HTML di fajaryusuf.com</h1>
<p style="font-family:courier;">Dipandu oleh fajaryusuf</p>
 
</body>
</html>

Silakan Anda coba di Notepad atau di HTML Editor FajarYusuf.Com dan lihat perbedaan font pada kedua text tersebut.


fajaryusuf.com

Lalu bagaiaman cara mengganti font dan warna text secara bersamaan?



Anda bisa lakukan dengan cara seperti ini



<style="font-family:courier;color:red">Dipandu oleh fajaryusuf</p>



Anda bisa menambahkan properti lain setelah tanda ; (titik koma). Titik koma disini gunanya untuk memisahkan antar properti dan value yang satu dengan lainnya. Jadi ayo inget - inget ya.


HTML Ukuran Font

Selain mengganti warna dan font pada text, kita juga bisa memperbesar dan memperkecil tulisan kita di HTML. Caranya cukup mudah, sama seperti sebelumnya tapi untuk properti ukuran text, kita menggunakan font-size.


<!DOCTYPE html>
<html>
<body style="background-color:hotpink;">
 
<h1 style="font-size:30px;">Belajar HTML di fajaryusuf.com</h1>
<p style="font-size:20px;">Dipandu oleh fajaryusuf</p>
<p style="font-size:5px;">Dipandu oleh fajaryusuf</p>
 
</body>
</html>

Silakan Anda coba di Notepad atau di HTML Editor FajarYusuf.Com dan lihat perbedaan ukuran text di browser. Semakin besar ukuran pixel yang Anda beri, jelas ukuran text akan semakin besar.


HTML : Style pada HTML

HTML Text Alignment

Nah ini materi perkenalan bonus deh buat Anda hehe.. Disini, kita akan mengatur alinea pada paragraf atau tulisan. Properti CSS untuk mengatur alinea adalah text-alignment dengan beberapa value yaitu leftcenterright dan justify.

<!DOCTYPE html>
<html>
<body style="background-color:hotpink;">
 
<h1 style="text-alignt:center;">Belajar HTML di fajaryusuf.com</h1>
<p style="text-alignt:left;">Dipandu oleh fajaryusuf</p>
<p style="text-alignt:right;">Dipandu oleh fajaryusuf</p>
 
</body>
</html>
Silakan Anda coba di Notepad atau di HTML Editor FajarYusuf.Com dan lihat di browser maka alineanya akan berubah. Untuk values justify silakan Anda coba dengan membuat banyak paragraf dan menggunakan value justify untuk text-alinment nya.


Kesimpulan

Di tutorial HTML Style ini ada beberapa hal yang bisa kita simpulkan.
  1. Untuk menghias element HTML, perlu atribut style lengkap dengan properti dan value dari CSS.
  2. Mengganti warna background dengan properti background-color
  3. Mengganti warna text dengan properti color
  4. Mengganti font text dengan properti font-family
  5. Mengganti ukuran text dengan properti font-size
  6. Mengatur alinea tulisan dengan properti text-alignment
Sekian tutorial HTML Style yang saya berikan disini, yang jelas sekarang Anda sudah pelajari dasar untuk mempercantik tampilan HTML dengan CSS dasar. Di tutorial selanjutnya kita akan bahas HTML Quotation berupa tag khusus untuk menangani kutipan - kutipan.

Reviewer: Fajar Yusuf
ItemReviewed: HTML : Style pada HTML

HTML : Paragraf pada HTML

fajaryusuf.com

Setelah sebelumya Anda pelajari tentang HTML heading sekarang kita akan bahas tentang HTML paragraf untuk membuat paragraf atau deretan kalimat yang digabung menjadi satu untuk membahas topik tertentu.

HTML Paragraf


Untuk membuat paragraf di HTML, Anda cukup menggunakan tag <p>.

Contoh:

<!DOCTYPE html>
<html>
<body>
 
<h1>tutorial belajar HTML dasar di fajaryusuf.com</h1>
<p>Untuk belajar membuat paragraf dengan mudah</p>
<p>HTML adalah bahasa yang mudah untuk dipahami</p>
 
</body>
</html>


Silakan Anda coba di Notepad atau di HTML Editor FajarYusuf.Com dan Lihat Hasilnya. Anda akan melihat ada 2 buah paragraf disitu. Secara default, browser akan memberi jarak antara paragraf satu dengan paragraf yang lainnya.

fajaryusuf.com

Perbedaan Bentuk Paragraf


Mungkin muncul pertanyaan di dalam diri Anda, bagaimana tampilan paragraf di browser jika pengetikan paragraf di acak atau diberi enter seperti ini.

<!DOCTYPE html>
<html>
<body>
 
<h1>tutorial belajar HTML dasar di fajaryusuf.com</h1>
<p>Untuk belajar membuat
 
 
paragraf dengan mudah</p>
 
 
 
<p>HTML adalah
bahasa yang mudah
untuk dipahami</p>
 
</body>
</html>


Meskipun cara Anda mengetik paragraf seperti itu, HTML paragraf yang ditampilkan di browser tidak akan mengikuti cara penulisan Anda. Browser akan menghapus tambahan spasi atau enter yang Anda lakukan di HTML paragraf. Hasilnya akan sama seperti penulisan html sebelumnya diatas.

fajaryusuf.com

HTML Line Break


Solusi kalau Anda ingin memberi jarak atau meng-enter kalimat yang masih menjadi satu paragraf adalah dengan menambah HTML line break yang memiliki tag khusus yaitu <br/><br/> adalah tag kosong, jadi tolong diingat - ingat untuk menutupnya dengan / (slash). 

Disini Anda bisa membuat baris baru tanpa mengetik paragraf baru.

<!DOCTYPE html>
<html>
<body>
 
<h1>tutorial belajar HTML dasar di fajaryusuf.com</h1>
<p>Untuk belajar membuat
<br/>
paragraf dengan mudah</p>
 
<p>HTML adalah <br/>
bahasa yang mudah <br/>
untuk dipahami</p>
 
</body>
</html>

Silakan Anda coba menambahkan tag <br/> dan lihat perbedaan dengan sebelumnya.

HTML : Paragraf pada HTML

Tag Untuk Menebalkan dan Memiringkan


Dalam pembuatan paragraf, HTML sudah menyedia tag untuk menebalkan dan memiringkan huruf, kata, kalimat sampai paragraf. Saya akan memberi contoh satu per satu supaya Anda paham. Urutannya begini :
  1. Menebalkan dan memiringkan huruf
  2. Menebalkan dan memiringkan kata
  3. Menebalkan dan memiringkan kalimat
  4. Menebalkan dan memiringkan paragraf

<!DOCTYPE html>
<html>
<body>
 
<h1>tutorial belajar HTML dasar di fajaryusuf.com</h1>
<p><strong>U</strong>ntuk belajar membuat paragraf dengan mudah</p>
<p><em>U</em>ntuk belajar membuat paragraf dengan mudah</p>
 
<p><strong>Untuk</strong> belajar membuat paragraf dengan mudah</p>
<p><em>Untuk</em> belajar membuat paragraf dengan mudah</p>
 
<p><strong>Untuk belajar membuat paragraf dengan mudah, Anda bisa kunjungi fajaryusuf.com</strong> Karena tutorial dikemas menggunakan bahasa sederhana yang mudah dipahami</p>
 
<p><em>Untuk belajar membuat paragraf dengan mudah, Anda bisa kunjungi fajaryusuf.com</em> Karena tutorial dikemas menggunakan bahasa sederhana yang mudah dipahami</p>
 
<p><strong>Untuk belajar membuat paragraf dengan mudah, Anda bisa kunjungi fajaryusuf.com. Karena tutorial dikemas menggunakan bahasa sederhana yang mudah dipahami</strong></p>
 
<p><em>Untuk belajar membuat paragraf dengan mudah, Anda bisa kunjungi fajaryusuf.com. Karena tutorial dikemas menggunakan bahasa sederhana yang mudah dipahami</em></p>
 
</body>
</html>


Silakan Anda coba dan lihat perbedaannya masing - masing. Anda bisa coba untuk mengganti - ganti mana yang akan Anda ubah format penulisannya. Tapi hasil akhir kira - kira akan seperti ini.

HTML : Paragraf pada HTML

Penting !
 Anda akan menemukan bahwa HTML memiliki tag <i> untuk memiringkan tulisan dan tag <b> untuk menebalkan tulisan, fungsinya sama seperti <em> dan <strong>. Sebetulnya untuk memformat suatu huruf, kata, kalimat atau paragraf tidak disarankan menggunakan tag - tag ini.
Para pakar HTML lebih menyarankan untuk mengubah format penulisan menggunakan CSS. Meski begitu empat tag ini <i><em><b><strong> akan memberi efek yang sama kalau Anda gunakan. Silakan coba saja agar lebih paham

setelah Anda peajari membuat paragraf dengan menggunakan HTML paragraf, di tutorial selanjutnya akan kita bahas tentang HTML style yang berguna untuk menghias elemen HTML.

Reviewer: Fajar Yusuf
ItemReviewed: HTML : Paragraf pada HTML

HTML : Heading pada HTML

FAJARYUSUF.COM

Di dalam tutorial HTML Dasar, saya sudah bahas sekilas tentang Heading yang berguna untuk membuat judul pada HTML. Sekarang saya akan bahas tutorial yang sedikit lebih spesifik tentang heading yaitu HTML heading.

HTML Heading


Pada dokumen HTML ada tag yaitu tag heading. Tag heading memiliki urutan dimulai dari <h1> sampai <h6>. Tag ini sering digunakan untuk judul, bisa judul utama, subjudul, bab dan subbab. Semakin besar urutannya maka ukuran hurufnya akan semakin kecil.

Fungsinya apa ?

1. Fungsinya untuk mendefinisikan judul secara khusus.
2. Untuk faktor SEO, penggunaan heading ini untuk menekankan kepada search engine bahwa artikel kita memiliki topik penting yang dibahas dan memudahkan search engine untuk mengenali struktur pada halaman yang kta buat.
3. Untuk mengklasifikasikan judul. Misal judul yang paling utama menggunakan tag <h1>, untuk subjudul menggunakan tag <h2>, untuk bab menggunakan tag <h3> dan seterusnya.

Untuk lebih jelasnya ayo kita lihat penampakannya ya, Anda bisa menggunakan HTML Editor FajarYusuf.Com untuk mencobanya dan masukkan coding berikut :

<!DOCTYPE html>
<html>
<body>
 
<h1>tutorial belajar HTML dasar di fajaryusuf.com</h1>
<h2>tutorial belajar HTML dasar di fajaryusuf.com</h2>
<h3>tutorial belajar HTML dasar di fajaryusuf.com</h3>
<h4>tutorial belajar HTML dasar di fajaryusuf.com</h4>
<h5>tutorial belajar HTML dasar di fajaryusuf.com</h5>
<h6>tutorial belajar HTML dasar di fajaryusuf.com</h6>
 
</body>
</html>


Anda bisa mencoba ganti tulisan - tulisan yang diapit oleh tag - tag h diatas dengan judul - judul karangan Anda sendiri. Setelah itu lihat hasilnya di browser.


Anda akan lihat perbedaan di setiap baris judul ya? Mulai tebal dan besar sampai kecil dan tipis. Kalau Anda lihat mulai dari <h1> itu adalah judul utama yang memiliki prioritas paling penting, dalam teknik SEO heading <h1> ini digunakan untuk mempermudah search engine mengenali isi artikel Anda. Nah di HTML, fungsi heading ini secara khusus untuk judul, jadi tolong inget - inget ya.


Penting ! Meskipun tag heading mampu menebalkan dan membesarkan tulisan, gunakan tag ini khusus hanya untuk judul.



Oiya satu hal lagi yang perlu Anda tahu bahwa browser akan menambahkan space putih istilahnya margin atau jarak atas dan bawah secara otomatis sebelum dan setelah heading. Lihat gambar di bawah ini.


fajaryusuf.com

Disini Anda sudah pelajari HTML Heading yang digunakan untuk memprioritaskan judul, mengklasifikasikan judul dan membuat search engine lebih mudah mengenali struktur halaman. Kalau ada judul, ada juga paragraf. Nah di HTML kita bisa membuat paragraf yang akan saya bahas di tutorial selanjutnya yaitu HTML paragraf.

Reviewer: Fajar Yusuf
ItemReviewed: HTML : Heading pada HTML

Saturday, February 23, 2019

HTML : Dasar-dasar HTML

Belajar HTML Aturan Dasar untuk Pemula

Oke sebelumnya Anda sudah praktekkan menulis tag - tag HTML menggunakan HTML Editor. Nah sekarang Anda akan saya kenalkan dengan dasar - dasar HTML. Jangan kuatir kalau ada tag - tag HTML yang belum Anda pelajari sebelumnya karena saya akan bahas mendetail di tutorial selanjutnya. Disini saya hanya akan mengenalkan secuil saja kok untuk permulaan.

HTML Document


Setiap kali Anda membuat dokumen atau file HTML, maka ada beberapa tag yang harus ada pada dokumen Anda karena tag - tag HTML ini merupakan tag dasar yang menjadi bagian dari struktur HTML. Tag - tag HTML tersebut adalah <!DOCTYPE html>, <html>, <head> dan <body>.


Mungkin muncul pertanyaan dari Anda bagaimana jika salah satu tag HTML tersebut tidak disertakan?


Oke,

Sebelum menjawab pertanyaan tersebut, ayo kita simak dulu penjelasan dari masing - masing tag HTML tersebut satu per satu.

Tag <!Doctype>


Doctype atau DTD adalah singkatan dari Document Type Declaration yang berguna untuk memberitahu browser bahwa bahasa yang digunakan adalah HTML. Kalau misalnya DTD tidak Anda deklarasikan dalam membuat file HTML maka browser tetap akan membaca file HTML Anda seolah - olah tidak ada sesuatu yang berubah. Tetapi kalau kita lihat dengan lebih mendetail maka fie HTML yang tidak ada DTD akan dijalankan oleh browser pada quirk mode

Pada quirk mode, browser membaca halaman web sedikit berbeda karena tidak ditemukan deklarasi DTD di didalamnya dan browser mengidentifikasi bahwa halaman web Anda merupakan halaman yang usang, nah supaya tetap dapat ditampilkan dengan baik oleh browser, maka browser menggunakan quirk mode secara otomatis untuk menampilkan halaman web Anda

Tag <html>


Ini adalah tag pembuka di dalam semua halaman web. Tag - tag HTML harus berada di diantara (diapit) oleh tag <html> ini. 

Tag <head>


Tag <head> digunakan untuk mendefinisikan halaman, biasanya berisi tentang metatag dalam HTML, tag - tag CSS dan Javascript. Contoh yang paling mudah yaitu untuk memberi judul pada setiap halaman web, maka tag HTML yang digunakan adalah <title> nah tag <title>
 ini diletakkan di antara tag <head> dan </head>.

Tag <body>


Tag - tag HTML yang ada di dalam tag <body> inilah yang akan ditampilkan di browser, kalau Anda sebelumnya sudah membaca tentang HTML Editor, maka Anda akan pahami bahwa hanya tag yang berada di antara tag <body> dan </body> yang akan ditampilkan di browser. Selain itu, ada juga tag pada <head> yang bisa ditampilkan oleh browser tapi tidak semua, salah satunya yaitu tag <title> yang tadi sudah kita bahas.

Perlu Anda ingat bahwa tag - tag HTML memiliki pasangannya masing - masing yaitu tag pembuka dan tag penutupnya. Untuk memuat Anda paham, lihat penjelasan di bawah ini.

<tag pembuka>Ini adalah bagian yang ditampilkan di browser</tag penutup>

contoh :

<!DOCTYPE html>
<html>
<body>
 
<h1>Tutorial Belajar HTML di fajaryusuf.com</h1>
 
</body>
</html>


Silakan Anda coba ketik di Notepad, atau di EDITOR HTML FajarYusuf.Com dan lihat hasil tampilannya.


fajaryusuf.com
hasil tampilan menggunakan notepad dan dijalankan pada browser


fajaryusuf.com
hasil di editor html fajaryusuf.com

HTML Headings


Untuk membuat heading di HTML, kita gunakan tag <h1> sampai <h6>.
<h1> menandakan bahwa text yang diapit dengan tag ini adalah text yang penting dan tag yang diapit <h6> kurang begitu penting. Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>
 
<h1>tutorial belajar HTML dasar di fajaryusuf.com</h1>
<h2>tutorial belajar HTML dasar di fajaryusuf.com</h2>
<h3>tutorial belajar HTML dasar di fajaryusuf.com</h3>
<h4>tutorial belajar HTML dasar di fajaryusuf.com</h4>
<h5>tutorial belajar HTML dasar di fajaryusuf.com</h5>
<h6>tutorial belajar HTML dasar di fajaryusuf.com</h6>
 
</body>
</html>


Silakan Anda coba ketik di Notepad, atau di EDITOR HTML FajarYusuf.Com dan lihat hasil tampilannya.

fajaryusuf.com


HTML Paragraf


Untuk membuat paragraf di HTML, tag yang digunakan adalah <p>. Contoh :

<!DOCTYPE html>
<html>
<body>
 
<p>Belajar dasar - dasar HTML dipandu oleh fajaryusuf</p>
<p>Dibahas dengan bahasa sederhana yang mudah dipahami</p>
 
</body>
</html>

Silakan Anda coba ketik di Notepad, atau di EDITOR HTML FajarYusuf.Com dan lihat hasil tampilannya.
Lihat hasilnya, akan ada 2 paragraf yang ditampilkan.

fajaryusuf.com

HTML Link


Link adalah huruf, kata, kalimat atau gambar yang diapit dengan tag < a href="">dan </a>. Kalau Anda berusaha klik maka dia akan mengarahkan Anda ke object lain. Object yang saya maksud disini bisa saja halaman website (bisa milik Anda sendiri atau milik orang lain) dan bisa juga efek tertentu akan muncul jika Anda klik .

Contoh :

<a href="https://fajaryusuf.com">Belajar HTML Dasar Mudah Untuk Pemula</a>

Sekarang coba Anda ketik di Notepad, simpan dan buka di browser. Lalu klik tulisan "Belajar HTML Dasar Mudah Untuk Pemula" maka Anda akan diarahkan menuju situs fajaryusuf.com.

Anda bisa merubah tujuannya ke halaman profil facebook Anda dengan cara merubah isi dari attribute href dari https://fajaryusuf.com menjadi misalnya saja https://www.facebook.com/anbu.fadzar Sekarang kalau Anda coba lagi, maka akan diarahkan ke halaman profil Facebook saya.

HTML Gambar


Jika Anda ingin menampilkan gambar, maka tag yang digunakan adalah <img>. Nah tag <img> memiliki beberapa atribut yaitu src yang merupakan source dari file, alt yang berarti alternatif jika gambar tidak muncul, width dan height yang merupakan ukuran dari gambar.

Contoh :

<!DOCTYPE html>
<html>
<body>
 
<img src="https://2.bp.blogspot.com/-pG2PWHSMO0M/XAtMt5W1nSI/AAAAAAAAAno/phEQPMdYCasNwfKvOtBYkqpnd0jqrdlYgCK4BGAYYCw/s1600/fajaryusuf.com.png" alt="Gambar FajarYusuf.Com" width="400" height="150">
 
</body>
</html>

Hasil :
HTML : Dasar-dasar HTML

Nah untuk mengetahui fungsi atribut alt, silakan Anda hapus tulisan "2.bp.blogspot.com" kemudian refresh browser Anda dan lihat apa yang muncul.
HTML : Dasar-dasar HTML

Anda juga bisa saja merubah ukuran dari width dan heightnya lho. Silakan dicoba ya.

Oke, tadi sudah Anda pelajari beberapa dasar tentang tag - tag HTML dan cara pengetikannya, nanti kita bahas mulai lebih detail di tutorial selanjutnya tentang HTML Heading.

Reviewer: Fajar Yusuf
ItemReviewed: HTML : Dasar-dasar HTML

HTML : HTML Editor Menggunakan Notepad dan HTML Editor FajarYusuf.Com

Fajaryusuf.com

Setelah mempelajari tentang apa itu HTML di tutorial sebelumnya yang membahas pengertian HTML dan penerapannya dalam pembuatan website, sekarang kita akan bahas HTML editor yang merupakan tempat atau sarana kita untuk mengetik tag - tag HTML.

Mengetik HTML dengan HTML Editor


Website bisa dibuat dan dimodifikasi menggunakan HTML editor atau yang sering disebut code editor oleh kebanyakan para programmer. Code editor adalah aplikasi, software atau sebut saja alat yang kita gunakan untuk mengetik tag - tag HTML.

Karena tutorial ini saya buat cenderung untuk Anda yang masih pemula, maka saya sarankan untuk menggunakan notepad atau HTML editor fajaryusuf.com saja terlebih dahulu. Kenapa? Karena menggunakan notepad atau HTML editor fajaryusuf.com dengan tampilan yang simple dapat membantu Anda belajar HTML dengan cepat.

Selain itu Anda tidak perlu repot - repot untuk instal karena sudah tersedia (built-in) di laptop Anda masing - masing.

Untuk cara yang menggunakan Notepad :

Step 1: Buka Notepad (Windows)


Windows 8 - Windows 10
1. Buka Start Screen (simbol windows yang terletak di pojok kiri bawah)
2. Lalu ketik Notepad

Windows 7 kebawah
1. Buka Start > Apllication > Notepad

Untuk cara yang menggunakan HTML Editor FajarYusuf.Com :

Step 1: HTML editor fajaryusuf.com


fajaryusuf.com
tampilannya seperti ini, kiri adalah tempat untuk menuliskan coding atau tag - tag HTML sebelah kanan adalah hasil dari execute coding HTML yang di Running
.

Step 2: Mengetik Beberapa Tag HTML


Berikut ini tag - tag HTML sederhana yang saya buat untuk Anda, jadi silahkan di ketik di code editor yang Anda gunakan ya.

<!DOCTYPE html>
<html>
<body>
 
<h1>Belajar HTML di fajaryusuf.com</h1>
<p>Dengan Materi Yang Mudah Dipahami</p>
 
</body>
</html>




Step 3: Simpan Menjadi File HTML


Setelah Anda selesai menulis syntax HTML tadi, sekarang coba simpan filenya. Pilih File > Save As di menu notepad.

Beri nama index.html pada file tersebut dan jangan lupa pilih encoding-nya menggunakan UTF-8 (ini format yang biasa digunakan untuk HTML)

simpan syntax html di notepad

Penting ! Tadi kita beri nama file "index.html". Anda bisa menggunakan .htm atau .html sebagai extensi filenya. Tidak ada perbedaan, tapi saya sarankan menggunakan html karena extensi ini yang sering digunakan oleh kebanyakan programmer. Oke?

Step 4: Lihat Halaman HTML di Browser


Setelah tadi sudah berhasil Anda simpan, sekarang coba buka file index.html. Anda bisa langsung double click file itu atau klik kanan dan pilih open with lalu pilih browser.

Jika berhasil, maka hasilnya kurang lebih akan seperti ini ya.

HTML  : HTML Editor Menggunakan Notepad dan HTML Editor FajarYusuf.Com



Step 4: Lihat Hasil Coding di HTML EDITOR FajarYusuf.Com

fajaryusuf.com

Oke kalau hasilnya sudah sesuai dengan gambar diatas, Anda sudah selesai mempelajari HTML Editor dengan baik. Ayo lanjutkan ke tutorial selanjutnya yang membahas dasar - dasar pengetikan HTML dan apa saja yang harus diperhatikan ketika mengetik tag - tag HTML.

Reviewer: Fajar Yusuf
ItemReviewed: HTML : HTML Editor Menggunakan Notepad dan HTML Editor FajarYusuf.Com

Friday, February 22, 2019

HTML : Apa itu HTML?

fajaryusuf.com

Berniat untuk membuat website ya? Nah, hal paling dasar yang harus Anda pelajari dalam membuat website adalah HTML. Bagi Anda yang masih sangat awam tentang HTML pasti bertanya - tanya apa itu HTML. Untuk menjawab pertanyaan Anda mari kita belajar tentang penjelasan apa itu HTML.

Apa Itu HTML ?


HTML adalah singkatan dari Hypertext Markup Language. Disebut Hypertext karena mampu merubah text atau tulisan biasa sehingga mempunyai fungsi yang lain. Kemudian ada istilah Markup Language karena menggunakan tanda (mark) yang mengapit text tertentu. Nah tanda atau mark ini disebut tag HTML yang akan kita bahas di tutorial berikutnya. 

Jadi, kesimpulan dari apa itu HTML adalah tanda (mark) yang mampu merubah text biasa sehingga mempunyai fungsi lain dengan mengapit text dengan tag HTML. Dengan begitu suatu text biasa dapat kita ubah fungsinya sesuai dengan yang kita inginkan.

Penerapan HTML


Dalam pembuatan website, HTML tidak berdiri sendiri namun dipadukan dengan bahasa pemrograman lain seperti CSS, JavaScript dan PHP. Ada begitu banyak bahasa pemrograman untuk web tetapi HTML adalah bahasa paling awal yang harus Anda pelajari pertama kali.

Untuk membuat Anda memahami apa yang saya jelaskan ini, silakan Anda membuka website milik orang lain kemudian klik kanan dan pilih View Page Source. Disitu Anda akan melihat halaman baru berisi kumpulan tag - tag HTML yang dipadukan dengan bahasa pemrograman web yang lain.

HTML Mudah Dipelajari


Jangan ciut nyali dulu, HTML adalah bahasa pemrograman web yang mudah untuk dipelajari kok bahkan untuk anak selevel SMP pun bisa. Sehingga banyaknya tag - tag yang ada pada HTML bisa Anda pahami satu per satu. Pada bab belajar HTML mudah untuk pemula ini, saya mengupayakan untuk memberi penjelasan yang mudah dimengerti disertai contoh yang bisa Anda coba di code editor. Selain mempelajari dasar - dasar HTML termasuk yang sudah kita bahas tadi tentang apa itu HTML sebagai dasar pengetahuan, Anda juga harus mengerti tentang apa itu code editor dan fungsinya sehingga proses pengetikan, manipulasi dan pengembangan tag - tag bisa Anda lakukan dengan mudah.

Tools yang akan kita gunakan untuk belajar HTML disebut dengan code editor. Sebetulnya ada banyak code editor yang bisa kita gunakan untuk belajar HTML, tapi untuk pemula kita gunakan saja yang paling simple dulu ya. Baiklah kalau begitu nanti kalian akan mencoba coding html kalian di sini HTML Editor


fajaryusuf.com

Reviewer: Fajar Yusuf
ItemReviewed: HTML : Apa itu HTML?

TENTANG SITUS

SITUS INI ADALAH SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.