HTML Style | Setiap elemen HTML memiliki gaya standar (warna latar belakang putih dan warna teks hitam). Mengubah gaya default elemen HTML, bisa dilakukan dengan atribut style. Contoh dibawah ini cara mengubah latar belakang (background) bawaan dari putih ke lightgrey.
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
(silahkan dicoba)
HTML Style Atribute
HTML Style atribut memiliki sintak, contoh :
style="property:value"
HTML Text Color
Warna properti mendefinisikan warna teks yang akan digunakan untuk HTML.
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
HTML Font
Font-family properti mendefinisikan font yang akan digunakan untuk elemen HTML.
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
Perhatian : tag <font> didukung dalam versi HTML, tidak berlaku di HTML5
HTML Text Size
Font-size properti mendefinisikan ukuran teks yang akan digunakan untuk elemen HTML :
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
HTML Text Alignment
Text-align properti mendefinisikan perataan teks horizontal untuk sebuah elemen HTML :
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>
Perhatian : tag <center> didukung dalam versi HTML, tidak berlaku di HTML5
Ringkasan :
Gunakan atribut style untuk elemen styling HTML
Gunakan background color untuk warna background
Gunakan color untuk warna teks
Gunakan font-family untuk font teks
Gunakan font-size untuk ukuran teks
Gunakan text-align untuk perataan teks
Itulah pembelajaran HTML style hari ini. Semoga bermanfaat.
Sabtu, 05 September 2015
Rabu, 26 Agustus 2015
Belajar Paragraph HTML Untuk Pemula
Sudah lama tidak update blog Belajar HTML 5 ini. Soalnya saya sedang mengupdate satu website desain grafis yang ditujukan juga untuk belajar dan untuk kegiatan monetisasi. Nah pada hari ini saya Belajar Paragraph HTML Untuk Pemula. Jujur saja deh, saya tidak begitu tahu mengenai HTML ini, makannya saya membuat blog untuk menuliskannya kembali kedalam bahasa Indonesia.
Dokumen HTML itu dibagi kedalam Paragraph
HTML Paragraph
HTML <p> didefenisikan sebagai paragraph. Contohnya seperti ini :
<p> Ini paragraph </p>
<p> ini adalah paragraph </p>
Perhatian : Browser secara otomatis menambah baris kosong sebelum dan sesudah paragraph.
HTML Display
Anda tidak bisa yakin bagaimana HTML akan ditampilkan. Besar atau kecilnya layar, dan jendela ukurannya akan menciptakan hasil yang berbeda. Dengan HTML, Anda tidak dapat mengubah output dengan menambah spasi ekstra atau baris tambahan dalam kode HTML Anda.
Browser akan menghapus spasi ekstra dan garis ekstra saat halaman ditampilkan. Setiap jumlah ruang, dan sejumlah baris baru, dihitung sebagai satu ruang. Contoh :
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
Jangan lupakan tag akhir </p>
Contoh diatas akan berkerja hampir disemua browser, tetapi tidak bergantung juga sih dapat berkerja atau nggak. O iya, jangan sampai Anda melupakan tag akhir pada paragraph ini </p>. Karena jika tidak dituliskan, maka tidak akan menampilkan hasil yang diharapkan.
HTML Line Breaks
Elemen HTML <br> mendefinisikan breaks. Lebih enaknya bacanya yaitu, bahwa elemen html <br> ini ditujukan untuk membuat perpisahan. Dalam artian seperti menekan enter, terletak dibaris baru (bawah). Contohnya :
<p> Ini paragraph </p> <br> <p> paragraph </p>
Maka diantara paragraph baru tersebut akan terletak dibawah. Elemen <br> ini tidak memiliki akhiran atau tag akhir.
Sampai disini Belajar Paragraph HTML Untuk Pemula. Semoga bermanfaat.
Dokumen HTML itu dibagi kedalam Paragraph
HTML Paragraph
HTML <p> didefenisikan sebagai paragraph. Contohnya seperti ini :
<p> Ini paragraph </p>
<p> ini adalah paragraph </p>
Perhatian : Browser secara otomatis menambah baris kosong sebelum dan sesudah paragraph.
HTML Display
Anda tidak bisa yakin bagaimana HTML akan ditampilkan. Besar atau kecilnya layar, dan jendela ukurannya akan menciptakan hasil yang berbeda. Dengan HTML, Anda tidak dapat mengubah output dengan menambah spasi ekstra atau baris tambahan dalam kode HTML Anda.
Browser akan menghapus spasi ekstra dan garis ekstra saat halaman ditampilkan. Setiap jumlah ruang, dan sejumlah baris baru, dihitung sebagai satu ruang. Contoh :
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
Jangan lupakan tag akhir </p>
Contoh diatas akan berkerja hampir disemua browser, tetapi tidak bergantung juga sih dapat berkerja atau nggak. O iya, jangan sampai Anda melupakan tag akhir pada paragraph ini </p>. Karena jika tidak dituliskan, maka tidak akan menampilkan hasil yang diharapkan.
HTML Line Breaks
Elemen HTML <br> mendefinisikan breaks. Lebih enaknya bacanya yaitu, bahwa elemen html <br> ini ditujukan untuk membuat perpisahan. Dalam artian seperti menekan enter, terletak dibaris baru (bawah). Contohnya :
<p> Ini paragraph </p> <br> <p> paragraph </p>
Maka diantara paragraph baru tersebut akan terletak dibawah. Elemen <br> ini tidak memiliki akhiran atau tag akhir.
Sampai disini Belajar Paragraph HTML Untuk Pemula. Semoga bermanfaat.
Selasa, 18 Agustus 2015
Belajar Heading HTML
Heading HTML didefenisikan dengan dengan tag <h1> hingga <h6>. Dari setiap heading dari h1 hingga h6 memiliki ukuran yang berbeda-beda. Heading 1 merupakan heading yang paling besar sedangkan heading 6 merupakan heading yang paling kecil. Dari sekian banyaknya heading html, yang paling sering digunakan menurut pribadi saya adalah <h1> dan <h3> . Terkadang saya sendiri jika ingin membuat artikel (pada blog WordPress) menggunakan 2 heading tersebut sebagai judul.
Sekarang silahkan Anda coba sendiri membuat heading dari 1 hingga 6 menggunakan text editor yang telah Anda instal :
<h1> heading 1 </h1>
<h2> heading 2 </h2>
<h3> heading 3 </h3>
<h4> heading 4 </h4>
<h5> heading 5 </h5>
<h6> heading 6 </h6>
Apakah Heading Itu Penting ?
Teman-teman dapat menggunakan heading sebagai sub judul yang memisahkan antara topik yang sedang dibahas. Contohnya seperti judul diatas (apakah heading itu penting ?).
Dari sekian artikel yang saya pelajari, dengan adanya heading dapat mempermudah indeks pencarian mesin pencari seperti Google. Sebab dalam setiap artikel yang kita buat, pasti dong menginginkan artikel tersebut dapat ditemukan oleh pengunjung dari mesin pencari dan mendapatkan ranking darinya. Contohnya dari subjudul diatas, ada satu kata heading. Dan masih terkait sama dengan judul Belajar Heading HTML kan ?
Sampai disini saja artikel Belajar Heading HTML. Memang cukup singkat menurut saya. Tetapi jika Anda ingin belajar lebih lengkap silahkan ke sumber terpercaya seperti w3school ya. :)
Sekarang silahkan Anda coba sendiri membuat heading dari 1 hingga 6 menggunakan text editor yang telah Anda instal :
<h1> heading 1 </h1>
<h2> heading 2 </h2>
<h3> heading 3 </h3>
<h4> heading 4 </h4>
<h5> heading 5 </h5>
<h6> heading 6 </h6>
Apakah Heading Itu Penting ?
Teman-teman dapat menggunakan heading sebagai sub judul yang memisahkan antara topik yang sedang dibahas. Contohnya seperti judul diatas (apakah heading itu penting ?).
Dari sekian artikel yang saya pelajari, dengan adanya heading dapat mempermudah indeks pencarian mesin pencari seperti Google. Sebab dalam setiap artikel yang kita buat, pasti dong menginginkan artikel tersebut dapat ditemukan oleh pengunjung dari mesin pencari dan mendapatkan ranking darinya. Contohnya dari subjudul diatas, ada satu kata heading. Dan masih terkait sama dengan judul Belajar Heading HTML kan ?
Sampai disini saja artikel Belajar Heading HTML. Memang cukup singkat menurut saya. Tetapi jika Anda ingin belajar lebih lengkap silahkan ke sumber terpercaya seperti w3school ya. :)
Senin, 17 Agustus 2015
Mengenal Atribut HTML
Minggu kemarin saya libur kerja, jadinya bisa hari ini deh belajar HTMLnya. Nah hari ini saya belajar Mengenal Atribut HTML yang sumbernya berasal dari w3Schools. Gak masalah pembahasannya berbahasa Inggris. Bisa diterjemahin kok ke bahasa Indonesia. Intinya kalau mau belajar jangan malas, dan jangan ngeluh. Belum dicoba aja, udah keburu ngilang. Oke saya mulai :
Mengenal Atribut HTML
Atribut HTML memberikan informasi tambahan tentang elemen HTML. Tidak semua elemen HTML dapat ditambahakan oleh atribut ini loh teman-teman.
Mengenal Atribut HTML
Atribut HTML memberikan informasi tambahan tentang elemen HTML. Tidak semua elemen HTML dapat ditambahakan oleh atribut ini loh teman-teman.
- Elemen HTML dapat memiliki atribut.
- Atribut memberikan informasi tambahan tentang elemen.
- Atribut selalu ditentukan dalam tag awal.
- Atribut selalu berdatangan dalam nama / nilai pasangan seperti : name = "value".
The Lang Atribut
Bahasa dokumen dapat dinyatakan dalam <html> tag. Bahasa dinyatakan dalam lang atribut. Mendeklarasikan bahasa penting untuk aplikasi aksesibilitas (pembaca layar) dan mesin pencari.
<!DOCTYPE html>
<html lang="en-US">
<html lang="en-US">
<body>
<h1> Ini heading pertamaku </h1>
<p> Ini paragraf pertamaku </p>
</body>
</html>
Pada baris kedua = > <html lang="en-US>. Nah lang inilah yang disebut dengan atribut. Sebuah bahasa html tambahan untuk setiap elemen yang diperlukan. Gak semua atribut itu cuman lang doang. Ada banyak atribut yang dapat kita temukan loh teman-teman. Jadi yang sabar aja belajarnya.
Judul Atribut
Paragraf HTML didefenisikan dengan tag <p>. Dalam contoh kali ini, elemen <p> memiliki judul atribut. Nilai atributnya "BelajarHTML-5". Contoh :
<p title="BelajarHTML-5">
Penjelasan agar lebih memudahkan teman-teman. Tag <p> ditujukan sebagai elemen html nya. Sedangkan title ditujukan sebagai atributnya, dan terakhir yang didalam tanda kutip (" ") disebut sebagai nilainya.
Atribut Href
Nah mungkin sebagian dari teman-teman yang pernah belajar HTML, atau sering mengotak-atik template blogger pada bagian menu navigasi, pasti sering deh bertemu dengan atribut href ini. Atribut ini ditujukan sebagai link (penghubung) loh. Contohnya :
<a href="belajarhtml-5.blogspot.com> Belajar HTML-5 </a>
Teman-teman nanti akan belajar lebih banyak tentang link dan tag <a> pada tutorial disini.
Atribut Ukuran
Didalam HTML tidak hanya memiliki atribut link doang, ada juga atribut ukuran yang dituliskan dengan atribut src atau source. Dalam bahasa Indonesianya yaitu Sumber. Atribut ukuran ini ditemani oleh tag html yakni <img> yang merupakan singkatan dari Image atau Gambar. Jadi tujuan dari tag dan atribut ukuran ini yaitu menarik atau menampilkan suatu gambar pada website nantinya. Contohnya :
<img src="belajarhtml-5.jpg" width="200" height="300">
Atribut Alt
Nih atribut yang baru gw kenal teman-teman. Atribut alt ini menentukan sebuah text alternatif yang akan digunakan ketika sebuah elemen HTML tidak dapat ditampilkan.
Nilai atribut dapat dibaca oleh "pembaca layar". Dengan cara ini, seseorang dapat "mendengarkan" untuk halaman web, yaitu orang buta, bisa "mendengar" elemen. Contoh :
<img src="belajarhtml-5.jpg" alt="Belajarhtml-5" width="200" height="300">
Sebagai ringkasan dari pembahasan kali ini. HTML 5 standar tidak juga memerlukan tanda kutip pada nilai (value) atribut. Contoh disini adalah href untuk link.
<a href=belajarhtml5>
Sekian artikel dari Mengenal Atribut HTML. Semoga bermanfaat :)
Sabtu, 15 Agustus 2015
Pengertian Elemen HTML
Pada siang ini saya akan sedikit membahas Pengertian Elemen HTML. Seperti yang mungkin sudah Anda ketahui, bahwa Dokumen HTML dapat dibuat dengan adanya elemen HTML.
Elemen HTML terdiri dari 3 bagian. Pertama awal tag, konten, dan penghujung tag. Contohnya :
<namatag> konten </namatag>
Setiap tag elemen yang diberikan, jangan selalu lupa untuk menyertakan tag penutup atau tag akhir. Sebenarnya tidak semua tag memiliki penutup. Dipelajaran selanjutnya akan kita pelahjari kok. Sekian pelajaran hari ini mengenai Pengertian Elemen HTML. Semoga bermanfaat :)
Elemen HTML terdiri dari 3 bagian. Pertama awal tag, konten, dan penghujung tag. Contohnya :
<namatag> konten </namatag>
Setiap tag elemen yang diberikan, jangan selalu lupa untuk menyertakan tag penutup atau tag akhir. Sebenarnya tidak semua tag memiliki penutup. Dipelajaran selanjutnya akan kita pelahjari kok. Sekian pelajaran hari ini mengenai Pengertian Elemen HTML. Semoga bermanfaat :)
Jumat, 14 Agustus 2015
Contoh HTML Dasar
Dokumen HTML
Setiap dokumen html yang dibuat haruslah mencantumkan deklarasi sesuai tipenya agar dapat membaca browser dengan baik. Berikut dibawah ini adalah deklarasi umum yang digunakan pada HTML untuk browser.
xHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 5
<!DOCTYPE html>
Menurut Anda lebih enak membaca dan menuliskan dokumen html versi apa ? ya benar sekali yaitu adalah HTML 5. Lebih singkat dan mudah diingat. Maka dari itulah setiap artikel yang saya buat sebelumnya selalu mencantukan <!DOCTYPE html> ini.
Itu untuk bagian awal saja. Dalam keseluruhan yang dimaksud dalam dokumen HTML ini tidak hanya ada <!DOCTYPE html> tetapi juga bagian <html> dan diakhiri dengan </html>. Tidak ketinggalan juga agar setiap bagian dokumen dapat terlihat pada browser, maka diperlukan tag <body> dan diakhiri dengan </body>.
Judul HTML
Sebenarnya ini bisa disebutkan sebagai judul untuk setiap artikel yang kita buat, Judul atua pos pada HTML ini ditulis dalam bentuk tag <h1> hingga <h6>. H ini merupakan bahasa yang berartikan Heading atau kepala. Setiap tag dari heading memiliki ukuran yang berbeda. Kebalikannya H1 merupakan heading paling besar sedangkan H6 merupakan heading paling kecil.
Contoh sederhananya akan tertulis seperti ini :
<h1> konten </h1>
<h2> konten </h2>
Dan seterusnya. Jika Anda ingin mencobanya, silahkan mencoba menggunakan text editor pilihan Anda.
Paragraf HTML
Nah paragraf HTML ini didefenisikan dengan tag <p> dan penutupnya </p>. Jika Anda ingin membuat sebuah web html pasti sangat mementingkan paragraf dalam setiap artikel yang dibuatkan ? maka dari itu jangan dilupakan tag <p> ini ya.
Contoh :
<p> ini adalah paragraf </p>
Link HTML
Agar setiap halaman dapat terkait dengan halaman lainnya, maka harus ada link html disini. Link HTML didefenisikan dengan tag <a>.
Contoh :
<a href="http://belajarhtml-5.blogspot.com"> Ini adalah link </a>
Jika Anda lihat dengan seksama ada penambahan elemen href disitu, href disebut dengan attribut. Nanti pada pelajaran-pelajaran berikutnya kita akan belajar attribut. Oke !
Gambar HTML
Setelah link html, gambar juga sangat penting untuk dimiliki pada halaman web. Sebab dengan gambar dapat membuat mata lebih tertarik pada satu tujuan. Gambar HTML didefenisikan dengan tag <img>.
Contoh :
<img src="http://goo.gl/fhNGJV" alt="BelajarHTML-5" width="104" height="142">
Sekian Contoh HTML Dasar, ditunggu pelajaran HTML Dasar besok ya :)
Kamis, 13 Agustus 2015
Mulai Praktek Belajar HTML Dasar
Mulai hari ini kita akan Mulai Praktek Belajar HTML Dasar. Pembahasannya tidak perlu panjang lebar yah. Karena disini kita akan mulai praktek dan Andapun sudah memahami artikel pertama dan kedua di HTML Dasar, maka langsung saja kita praktek !.
O iya, untuk kegiatan praktek ini. Lebih baik Anda membuat folder khusus untuk praktek HTML dasar. Misalnya disini saya menyimpan file praktek di Local Disk D > Folder Belajar HTML.
Sekarang silahkan Anda ketikkan kode HTML seperti dibawah ini pada text editor yang telah Anda instal. Jika Anda belum tahu apa itu text editor, silahkan baca disini :
Apabila sudah diketikkan kode HTML tersebut, simpanlah format file dengan nama pilihan Anda. Namun hanya satu yang harus Anda ketahui, ekstensi penyimpanannya adalah .html atau .htm. Contoh seperti pada gambar diatas, saya meyimpannya dengan nama file praktekbelajar.html. Anda bebas ya menentukan nama penyimpanannya, terkecuali harus ekstensi tetap .html.
Dan berikut dibawah ini adalah hasil dari praktek tersebut :
Sedikit penjelasan :
Sampai disini saja Mulai Praktek Belajar HTML Dasar, semoga menyenangkan. :)
O iya, untuk kegiatan praktek ini. Lebih baik Anda membuat folder khusus untuk praktek HTML dasar. Misalnya disini saya menyimpan file praktek di Local Disk D > Folder Belajar HTML.
Sekarang silahkan Anda ketikkan kode HTML seperti dibawah ini pada text editor yang telah Anda instal. Jika Anda belum tahu apa itu text editor, silahkan baca disini :
Apabila sudah diketikkan kode HTML tersebut, simpanlah format file dengan nama pilihan Anda. Namun hanya satu yang harus Anda ketahui, ekstensi penyimpanannya adalah .html atau .htm. Contoh seperti pada gambar diatas, saya meyimpannya dengan nama file praktekbelajar.html. Anda bebas ya menentukan nama penyimpanannya, terkecuali harus ekstensi tetap .html.
Dan berikut dibawah ini adalah hasil dari praktek tersebut :
Sedikit penjelasan :
- <title> dan </title> akan ditampilkan pada bagian tab bar browser (judul pada browser)
- <body> dan </body> akan ditampilkan pada bagian
Sampai disini saja Mulai Praktek Belajar HTML Dasar, semoga menyenangkan. :)
Rabu, 12 Agustus 2015
Jenis-Jenis HTML Editor
Dihari kedua belajar HTML Dasar, kini kita akan mengenal Jenis-Jenis HTML Editor yang cukup sering digunakan oleh para programmer. O iya, jika Anda belum membaca artikel Belajar HTML Untuk Pemula, maka silahkan dibaca terlebih dahulu. Barulah jika sudah selesai baca artikel ini boleh dilanjutkan.
Untuk dapat membuat sebuah website, perlu adanya aplikasi pendukung. Aplikasi ini sering disebut dengan HTML Editor. Aplikasi HTML Editor ada yang gratis, adapula yang berbayar. Kita sebagai nubie yah tidak haruslah memakai HTML Editor yang istimewah, modern, keren bin beken. Yang penting dari satu aplikasi tersebut kita bisa menggunakannya, bisa mengaplikasikannya.
Berikut ini adalah Jenis-Jenis HTML Editor :
Sublime Text
Sublime Text adalah salah satu jenis HTML Editor yang paling saya gunakan, bahkan sering dikatakan aplikasi faforit saya sebagai tempat menampung segala macam kode HTML. Menurut pandangan saya nih, Sublime Text sangatlah menarik, tidak mudah cepat bosan karena background yang diberikan dan serta pewarnaan dari setiap kode, terus ada satu lagi nih. Yaitu text edit pilihannya banyak.
Biasanya cukup dengan masukin satu kode, tekan enter. Sim salabim langsung keluar kode temannya lagi. Jadi gak repot deh harus ngetik secara manual. Sublime Text sendiri banyak versinya, saat ini saya telah mengupdate atau menggunakan versi terbaru yaitu Sumblime Text 3. Aplikasi html editor ini mensupport Windows dan Apple.
Notepad++
Nah aplikasi editor html yang satu ini, mungkin kembarannya Notepad dari bawaan Windows. Sebenarnya sih, dengan notepad biasa sudah bisa kok digunakan untuk mengocak kode html. Cuman sayangnya yah gak asik. Gak ada warna-warninya saat mengedit, selain itu semuanya harus serba manual. Mungkin kelebihannya disini yaitu, kita bisa belajar lebih jeli untuk memahami kode html kali yah.
Aplikasi notepad++ ini dapat kita instal secara gratis loh teman-teman. Baik banget yah developernya. Text editor yang satu ini cukup ringa, sama seperti Sublime Text. Dan juga banyak fitur yang diberikan. Saya biasanya juga menggunakan text editor yang satu ini. Malahan cuman ada dua ajah yang terinstal di laptop saya.
Adobe Dreamweaver
Wah-wah, ini nih si rajanya text editor. Ketika saya masih menduduki kelas 2 SMK, saya diajarin cara membuat website dari nol. Caranya sama persis seperti struktur HTML kemarin. Perlu Anda ketahui, aplikasi ini berat banget. Walaupun berat, tapi text editor yang satu ini sangat banyak fiturnya, canggih lagi. Yang tidak hanya digunakan untuik html editor saja, namun juga bahasa pemograman lainnya. Intinya, jika teman-teman menggunakn aplikasi yang satu ini, beh pusing tujuh keliling deh.
Page Breeze
Nah ketika saya awal-awal masih belajar html, saya menemui banyak banget jenis-jenis html editor (text editor). Kemudian saya membeli satu buku cara belajar membuat website yang ada cd bonusnya. Dan didalam cd bonus tersebut terdapat software page breeze. Aplikasinya cukup ringat, modelnya agak-agak mirip adobe dreamweaver gimana gitu. Seperti terdukung oleh WYSIWYG.
Cukup sampai disini saja deh mengenal beberapa Jenis-Jenis HTML Editor. Sebenarnya banyak banget, bukan lagi banyak, tapi buannyak !. Mungkin teman-teman pembaca artikel ini, mau menambahkan list text editor pada komentar yang sudah saya sediakan. :)
Untuk dapat membuat sebuah website, perlu adanya aplikasi pendukung. Aplikasi ini sering disebut dengan HTML Editor. Aplikasi HTML Editor ada yang gratis, adapula yang berbayar. Kita sebagai nubie yah tidak haruslah memakai HTML Editor yang istimewah, modern, keren bin beken. Yang penting dari satu aplikasi tersebut kita bisa menggunakannya, bisa mengaplikasikannya.
Berikut ini adalah Jenis-Jenis HTML Editor :
Sublime Text
Sublime Text adalah salah satu jenis HTML Editor yang paling saya gunakan, bahkan sering dikatakan aplikasi faforit saya sebagai tempat menampung segala macam kode HTML. Menurut pandangan saya nih, Sublime Text sangatlah menarik, tidak mudah cepat bosan karena background yang diberikan dan serta pewarnaan dari setiap kode, terus ada satu lagi nih. Yaitu text edit pilihannya banyak.
 |
| Sublime Text 3 |
Biasanya cukup dengan masukin satu kode, tekan enter. Sim salabim langsung keluar kode temannya lagi. Jadi gak repot deh harus ngetik secara manual. Sublime Text sendiri banyak versinya, saat ini saya telah mengupdate atau menggunakan versi terbaru yaitu Sumblime Text 3. Aplikasi html editor ini mensupport Windows dan Apple.
Notepad++
Nah aplikasi editor html yang satu ini, mungkin kembarannya Notepad dari bawaan Windows. Sebenarnya sih, dengan notepad biasa sudah bisa kok digunakan untuk mengocak kode html. Cuman sayangnya yah gak asik. Gak ada warna-warninya saat mengedit, selain itu semuanya harus serba manual. Mungkin kelebihannya disini yaitu, kita bisa belajar lebih jeli untuk memahami kode html kali yah.
Aplikasi notepad++ ini dapat kita instal secara gratis loh teman-teman. Baik banget yah developernya. Text editor yang satu ini cukup ringa, sama seperti Sublime Text. Dan juga banyak fitur yang diberikan. Saya biasanya juga menggunakan text editor yang satu ini. Malahan cuman ada dua ajah yang terinstal di laptop saya.
Adobe Dreamweaver
Wah-wah, ini nih si rajanya text editor. Ketika saya masih menduduki kelas 2 SMK, saya diajarin cara membuat website dari nol. Caranya sama persis seperti struktur HTML kemarin. Perlu Anda ketahui, aplikasi ini berat banget. Walaupun berat, tapi text editor yang satu ini sangat banyak fiturnya, canggih lagi. Yang tidak hanya digunakan untuik html editor saja, namun juga bahasa pemograman lainnya. Intinya, jika teman-teman menggunakn aplikasi yang satu ini, beh pusing tujuh keliling deh.
Page Breeze
Nah ketika saya awal-awal masih belajar html, saya menemui banyak banget jenis-jenis html editor (text editor). Kemudian saya membeli satu buku cara belajar membuat website yang ada cd bonusnya. Dan didalam cd bonus tersebut terdapat software page breeze. Aplikasinya cukup ringat, modelnya agak-agak mirip adobe dreamweaver gimana gitu. Seperti terdukung oleh WYSIWYG.
Cukup sampai disini saja deh mengenal beberapa Jenis-Jenis HTML Editor. Sebenarnya banyak banget, bukan lagi banyak, tapi buannyak !. Mungkin teman-teman pembaca artikel ini, mau menambahkan list text editor pada komentar yang sudah saya sediakan. :)
Selasa, 11 Agustus 2015
Belajar HTML Dasar Untuk Pemula
HTML bisa diibaratkan sebagai pondasi dari sebuah bangunan (web), ataupun bisa juga dibilang sebagai kerangka pada website. Nah pada kesempatan kali ini saya akan membahas tentang cara Belajar HTML Dasar Untuk Pemula. Memang pada dasarnya, untuk dapat membuat sebuah website dari awal, penting untuk memahami ilmu HTML ini. Ingat ! bukan dihapali, namun dipahami.
Apa Itu HTML ?
HTML merupakan kepanjangan dari Hypertext Markup Language. Sebuah bahasa Markup (tanda) yang dipergunakan untuk menampilkan halaman website pada browser (seperti: Google Chrome, Mozilla Firefox, Safari, dan lain sebagainya).
Sebagai rumusan sederhananya, adalah seperti gambar dokumentasi dari Belajar HTML-5 dibawah ini :
Apa Itu HTML ?
HTML merupakan kepanjangan dari Hypertext Markup Language. Sebuah bahasa Markup (tanda) yang dipergunakan untuk menampilkan halaman website pada browser (seperti: Google Chrome, Mozilla Firefox, Safari, dan lain sebagainya).
HTML
dijelaskan dalam bentuk tag markup,
dan setiap tag menjelaskan isi dokumen yang berbeda. Tag-tag markup ini terdiri
dari dua bagian. Pertama tag pembuka, dan kedua adalah tag penutup. Kedua tag
ini disimbolkan dengan tanda (markup) kurung lancip pembuka ‘<’ dan ‘>’
untuk penutup. Untuk tag penutup sedikit berbeda, yakni ditambahkan oblique line (garis miring) ‘/’.
Sebagai rumusan sederhananya, adalah seperti gambar dokumentasi dari Belajar HTML-5 dibawah ini :
Sejarah HTML
Setelah
sedikit memahami mengenai apa itu HTML, kini kita beralih kepada pembahasan
sejarah HTML itu sendiri. Ketika pada tahun 1980, sebuah perusahaan bernama IBM
memikirkan suatu pembuatan dokumen yang dimana setiap elemennya dikenali dengan
suatu tanda tertentu.
Dan tim
IBM inipun telah mendapatkan ide tersebut. Mereka kemudian mengembangkan suatu
jenis bahasa berupa teks dimana terdapat perintah-perintah dari setiap pemformatan
dokumen web. Bahasa ini dimakan dengan Markup Language (Bahasa Tanda). Dan sistem tersebut dinamakan oleh
IBM sebagai GML (Generalized Markup Language).
Contoh Strukur Dokumen HTML
 |
| Struktur dokumen HTML |
Sedikit
penjelasan mengenai contoh struktur dokumen HTML diatas :
1.
<!DOCTYPE html> mendefinisikan jenis dokumen pada HTML untuk
browser*
2.
<html> dan </html>
mendefinisikan sebagai gambaran pada dokumen HTML
3.
<head> dan </head> memberikan informasi pada dokumen
4.
<title> dan</title> memberikan judul pada dokumen.
5.
<body> dan </body> menggambarkan isi untuk dokumen
6.
<h1> dan </h1> menggambarkan suatu heading (biasa sering
digunakan untuk judul)
7.
<p> dan </p> menggambarkan suatu paragraf.
*Catatan : Jenis dokumen <!DOCTYPE html> adalah
jenis dokumen untuk HTML 5, pelajaran ini nanti akan kita bahas pada
materi-materi selanjutnya.
Sampai disini dulu pengenalan Belajar HTML Dasar Untuk Pemula. Jika ada pembahasan yang kurang, mohon dimaklumi. Atau jika Anda menginginkan saya untuk menambahkan pembahasan pada artikel ini, silahkan berikan tambahan pada komentar dibawah ini. Semoga dapat bermanfaat.
Langganan:
Postingan (Atom)