Panduan Belajar HTML Dasar PART 1 - Pengertian HTML

Panduan HTML

Panduan Belajar HTML Dasar PART 1 - Pengertian HTML

PART 1 - Pengertian HTML

TipsIM.com - Belajar HTML dasar. Pernahkah anda tertarik untuk mempelajari pemrograman web, sob? Jika iya, maka hal pertama yang perlu anda ketahui adalah anda harus paham mengenai HTML. Mulai dari pengertian HTML, maksud dari setiap kode HTML, hingga penerapannnya.

HTML itu sendiri merupakan dasar dari semua halaman web yang ada di internet. Ya, setiap halaman web atau blog yang anda kunjungi di internet itu memiliki dasara pengcodingan yang disebut HTML. Lalu, sebenarnya apa sih HTML itu? Nah, di postingan kali ini saya akan mencoba membuat tutorial atau panduan belajar HTML. 

Insyaallah panduan ini akan saya buat mulai dari awal pengertian HTML hingga penerapannya. Tapi karena panduannya terlalu panjang, akan saya pisah per-BAB-nya satu halaman. Jadi setiap satu postingan berisi satu BAB. 

Kita akan mulai dari awal, yaitu pengertian HTML. Simak panduannya di bawah ini.

Pengertian HTML

HTML (Hypertext Markup Language) adalah bahasa markup internet berupa kode dan simbol yang dimasukkan ke dalam sebuah file dengan tujuan untuk ditampilkan dalam sebuah website. Atau lebih singkatnya adalah bahasa markup yang digunakan untuk membuat halaman website. Dan halaman ini bisa dilihat dengan menggunakan software atau aplikasi browser atau aplikasi penjelajah internet seperti Mozilla Firefox, Google Crome, dan Internet Explorer.

HTML adalah singkatan dari HyperText Markup Language. Dari kepanjangan HTML itu ada penjelasannya masing-masing. Berikut ini penjelasannya:

• HyperText. Disebut hypertext karena di dalam HTML sebuah text biasa dapat berfungsi lain, text tersebut dapat diubah menjadi bentuk link yang dapat membawa kita berpindah dari halaman 1 ke halaman lainnya ketika kita meng-klik text tersebut. Kemampuan inilah yang disebut hypertext, meski tidak hanya text saja yang dapat dijadikan link.
• Markup Language. Bisa disebut markup language karena bahasa HTML ini menggunakan tanda mark untuk menandai bagian-bagian dari text. Misalnya, ketika anda meletakkan tulisan diantara tag <i> . . . </i> , maka tulisan yang ada didalamnya tersebut akan menjadi miring tercetak miring. Dan jika di ganti dengan tag <b> . . . </b> ,maka akan berubah menjadi tebal atau bold. Tanda itulah yang dikenal dengan nama tag.

 Mengapa HTML disebut sebagai bahasa dasar pembuatan web? Karena didalam pembuatan web, jika hanya dipasang kode HTML saja, tampilannya akan terlihat hambar atau tidak beraturan. Sebenarnya ada bahasa pemrograman yang digunakan untuk memanipulasi kode HTML, seperti JavaScript dan PHP. Namun sebelum mempelajari bahasa pemrograman tersebut, kita harus bisa memahami HTML. Karena HTML adalah yang paling dasar.

Yang perlu kita ketahui adalah, HTML bukanlah bahasa pemrograman, akan tetapi merupakan suatu bahasa markup. Memang terdengar sedikit aneh, namun jika anda mengenal berbagai macam bahasa pemrograman, dalam HTML anda tidak akan menemukan struktur yang biasa ditemukan dalam bahasa pemrograman, seperti IF, LOOP, maupun variabel. HTML hanya sebuah struktur untuk menandai bagian-bagian dari sebuah halaman web.

Sebenarnya anda bisa melihat kode HTML dari suatu web yang anda kunjungi. Misalnya web atau blog TipsIM ini. Anda bisa melihat kode HTMLnya dengan klik kanan mouse anda di halaman ini, pilih view page source, dan kemudian akan tampil sebuah halaman baru yang berisi kode-kode HTML dari halaman TipsIM ini. Anda bisa melihatnya dengan browser Mozilla Firefox atau Google Chrome.

Berikut ini caranya:

Memang kodenya terlihat membingungkan, dan saya pun juga mengalami kebingungan. Namun kita akan belajar dari awal agar bisa memahami setiap kode HTML yang ada disuatu halaman web.

Selain HTML, sebenarnya ada juga kode lain yang disebut xHTML atau singkatan dari eXtensible Hypertext Markup Language. xHTML ini merupakan kode versi lama dari HTML (sebelum era HTML5 seperti saat ini). Pada xHTML, penulisan kodenya menggunakan peraturan yang lebih ketat. Namun sebenarnya tidak terlalu jauh perbedaan antara HTML dengan xHTML. Anda bisa mencari tahu tentang xHTML di search engine.

Inilah sedikit penjelasan mengenai pengertian HTML. Jika kurang lengkap, anda bisa memadukan atau menggabungkan pengertian HTML dari web-web lain yang membahas mengenai pengcodingan web. Semoga postingan mengenai pengertian HTML ini bisa bermanfaat.

Silahkan lanjut di BAB selanjutnya yaitu BAB 2 - Fungsi Web Browser.

Terimakasih.

Tutorial Desain Web Menggunakan Corel Draw X7

Website

Tutorial Desain Web Menggunakan Corel Draw X7

Tutorial Desain Web Menggunakan Corel Draw X7

TipsIM.com - Tutorial desain web. Ketemu lagi dengan saya sob. Di postingan kali ini, saya akan mencoba membuat astikel tentang tutorial atau panduan bagaimana cara mendesain web menggunakan Corel Draw.

Kebetulan di mata kuliah saya sekarang ada tugas membuat desain web, dengan pilihan ingin menggunakan photoshop atau corel draw, namun saya memilih corel draw karena menurut saya lebih mudah. hehe

Lalu kenapa saya memilih corel draw x7? Ini karena di laptop saya hanya tersedia corel draw x7. Dan versi x7 ini juga memiliki fitur yang lebih lengkap dari versi sebelumnya.

Oke, itu sedikit basa-basi sekaligus curhatan singkat saya sebagai pembuka postingan ini sob. hehe..

Nah, sebelum membuat desainnya, anda harus paham dulu mengenai bagian-bagian dari website sob. Untuk mempelajari tentang bagian-bagian dari website, anda bisa membuka poastingan saya tentang Panduan Lengkap Merancang Website. Di postingan itu saya sudah menjelaskan lebih lengkap mengenai bagian-bagian website atau bagian layoutnya.

Setelah anda paham bagian dasar dari website, sekarang saatnya anda mulai mendesain. Namun sebelumnya saya akan memberikan gambaran mengenai desain web saya kali ini. Desainnya cukup simpel dan mudah untuk dibuat. Saya membuat desain web untuk tampilan home atau beranda atau tampilan awal atau depan.

Berikut ini gambar desain web simpel dari saya beserta penamaan setiap bagian-bagiannya. Bagian inilah yang nantinya akan kita buat satu per satu.

Oke, langsung saja kita mulai mendesain webnya sob.

1. Silahkan buka Software Corel Draw X7 nya. Jika belum punya, bisa mendownload di internet. Atau anda bisa menggunakan versi lainnya yang ada di laptop anda.

2. Buat lembar baru dengan mengeklik creat new atau Ctrl+N.

Silahkan sesuaikan pengaturan kanvasnya sesuai pada gambar di bawah ini sob. Atau anda bisa mengaturnya sesuai keinginan anda.

 

3. Setelah muncul lembar kanvas barunya, silahkan buat frame dasar, (dalam layout web biasa disebut dengan Outer Wrapper). Anda bisa membuat frame dasar tersebut dengan menggunakan rectangle tool dan sesuaikan dengan panjang dan lebar kanvasnya.. Untuk warnanya terserah anda sob, namun di sini saya menggunakan warna abu-abu atau grey. 

4. Kemudian, buatlah headernya sob. Setelah header lalu buat judul web dan juga menu-menunya. Gunakan rectangle tool untuk membuat kotak headernya, dan gunakan text tool untuk tulisan judul dan menunya.

Untuk posisi desain web milik saya ini, saya sengaja men-sejajar-kan antara judul web dengan menu-menunya agar terlihat lebih simpel. Lihat gambar di bawah ini.

5. Buatlah tempat konten atau artikelnya. 

Keterangan:

1. Buatlah kotak frame untuk tempat postingannya (gambaran di atas tampilan home). 
2. Pasangkan foto terserah anda.
3. Beri judul postingan. 
4. Isi dari konten atau artikel atau postingan.

6. Setelah itu, buatlah tempat widgetnya sob. Widget yang pertama dalam desain saya adalah kolom pencarian atau search. Silahkan lihat gambar di bawah ini.

Untuk pembuatan kotak searchnya bisa menggunakan rectangle tool, dan tombol atau button search bisa menggunakan ellips tool. Untuk lebih jelas pembuatannya lihat gambar gif berikut ini.

7. Kemudian, buatlah widget subscribe seperti pada gambar di bawah ini.

Untuk membuatnya, anda bisa menggunakan rectangle tool, lalu beri tulisan dengan menggunakan text tool. Silahkan lihat gambar gif di bawah ini.

8. Lalu buatlah tempat widget popular post atau artikel populer dan footer dengan menggunakan rectangle tool. Seperti pada gambar di bawah ini.

Selesai sob. 

Kurang lebihnya seperti itu langkah-langkah membuat desain web menggunakan corel draw x7. Ingat sob, tutorial ini hanya sekedar membuat konsep gambaran desainnya saja, belum masuk pada penerapannya menggunakan software Dreamweaver atau software sejenisnya.

Semoga tutorial mendesain web dengan corel draw ini bisa bermanfaat. Terimakasih telah berkunjung dan membaca sob. Selamat mencoba.

Baca juga Panduan lengkap merancang website

Daftar Situs Belajar Online Terbaik yang Lengkap, Gratis, dan Mudah Dipahami

Situs terpilih

Daftar Situs Belajar Online Terbaik yang Lengkap, Gratis, dan Mudah Dipahami

Daftar Situs Belajar Online Terbaik

TipsIM.com - Daftar situs belajar online. Ketemu lagi dengan saya sob di blog TipsIM. Maaf lama tidak posting, maklum anak kuliah banyak tugas sob, jadi sementara blognya dikesampingkan. Hehe. Tapi tenang sob, meskipun saya mengesampingkan blog untuk sementara, bukan berarti saya membiarkan sepenuhnya tanpa update postingan. Saya akan tetap update postingan tapi tidak sesering biasanya.

Nah, di postingan kali ini, saya akan mencoba membahas mengenai situs belajar online sob. Mungkin sobat akan bertanya-tanya,

"Kenapa membahas situs belajar online? Apakah adminnya kehabisan ide untuk membuat postingan mengenai IM dan blogging?"

Jawabannya "Tidak, sob". Mengapa saya membuat postingan artikel mengenai daftar situs belajar online? 

Yang pertama adalah artikel ini merupakan artikel spesial untuk teman-teman blogger saya yang baik hati kepada saya. Baik secara langsung maupun tidak langsung.

Yang kedua adalah karena saya akan mencoba memberikan jalan akses kepada anda, agar anda lebih mudah dalam belajar. Dengan belajar online, anda akan mendapatkan pengetahuan yang lebih banyak dan lebih luas tentunya, karena seperti yang kita ketahui bahwa internet itu merupakan sumber pengetahuan yang sangat luas.

Di zaman yang serba canggih ini, kita tidak perlu selalu membawa buku kemana-mana untuk belajar, anda bisa langsung membuka smartphone dan mengakses internet dengan mengetik alamat situs belajar online. Jadi, anda tidak perlu repot-repot membawa buku besar dan berat. Dengan internet anda bisa belajar lebih cepat, lebih mudah, dan juga lebih lengkap.

Lalu, situs apa saja yang bisa dijadikan sebagai tempat belajar? Sebenarnya banyak sob, anda tinggal pilih saja berdasarkan topik. Ya, anda ingin mempelajari tentang apa, tinggal cari di internet dan ketemu deh.

Tapi yang perlu kita ketahui, tidak semua situs belajar online itu terpercaya dan bisa dipercayakan kebenarannya sob. Jadi, kita harus pilah-pilih mana yang tepat untuk kita jadikan sebagai tempat belajar.

Nah, saya merekomendasikan bagi anda yang ingin belajar secara online. Berikut ini daftar beberapa situs online terbaik, lengkap, gratis, dan mudah di pahami sob.

1. Blog Mas Sugeng (Situs belajar blogging)

Bagi anda yang sering berselancar di dunia internet, tentu tidak asing lagi dengan blog mas sugeng ini. Blog yang memiliki alamat Sugeng.id ini membahas mengenai panduan belajar blog secara lengkap. Artikel di blog ini juga mudah di pahami meskipun bagi orang awam atau pemula sekalipun. 

Seperti alamatnya, blog ini milik seorang master blogger bernama Sugeng Riyadi. Di blog mas sugeng ini lebih mendalami pembahasan seputar panduan dan tips-tips blogging yang baik dan benar.

Nah, bagi anda yang ingin belajar mengenai blog, anda bisa langsung kunjungi situs blog mas sugeng di sugeng.id.

2. Panduan IM (Situs belajar Internet Marketing dan SEO)

Situs panduan IM ini merupakan situs yang membahas mengenai panduan-panduan belajar internet marketing. Jadi, bagi anda yang ingin belajar mengenai internet marketing, saya sangat merekomendasikan di situs Panduan IM ini. 

Situs ini milik mas Darmawan, yaitu seorang master blogger profesional dalam bidang Internet Marketing. Sebenarnya dalam situs ini tidak hanya membahas soal IM, tapi juga panduan blogging, lebih khususnya untuk blog wordpress.

Jika anda ingin belajar mengenai Internet Marketing atau belajar blog wordpress lengkap, anda bisa mengunjungi situs panduanim.com.

3. Arlina Design (Situs belajar merenofasi atau mendesain template blog)

Anda suka meng-otak-atek template blog anda? Jika anda suka, saya merekomendasikan blog arlina design ini sebagai sumber referensi belajar anda sob. Di blog arlina design ini membahas mengenai cara-cara atau tutorial memperindah, mendesain, merenofasi, atau menambah asesoris template blog dengan mengedit HTML, CSS, PHP, JS, dan lain sebagainya. Di blog arlina design ini juga menjual berbagai macam template blog blogspot.

Seperti nama alamatnya, blog arlina design ini milik seorang blogger professional bernama Arlina Fitriyani. Namun ada juga yang bilang blog ini milik seorang pria, yaitu kekasih dari mbak arlina. Hanya saja blog tersebut diberi nama sesuai nama kekasihnya yaitu mbak Arlina itu sendiri. Tapi soal kebenarannya saya juga belum begitu paham, yang paling penting adalah isi blognya bermanfaat.

Penasaran dengan blog mbak arlina? Silahkan buka di arlinadzgn.com untuk belajar mengenai pengcodingan blog serta desain template blog.

4. KerjaLebah (Situs belajar mengenai bisnis online, dunia internet, dan smartphone)

Bagi anda yang ingin belajar mengenai dunia internet dan dunia smartphone lebih lengkap lagi, anda bisa memilih tempat belajar online di situs kerjalebah. Di blog ini membahas mengenai tips dan panduan blog, mengenai smartphone, internet, komputer, dan masih banyak lagi. 

Di blog ini juga dapat menuntun anda bagaimana cara berbisnis. Ya, meskipun anda memiliki modal sedikit, anda tetap bisa berbisnis atau membuka peluang usaha. Anda bisa belajar berbisnis dan juga bisa mencari peluang usaha dengan modal sedikit di Daftar Peluang Bisnis dengan Modal Kecil.

Blog ini milik seorang blogger professional yaitu mas Hadad. Anda bisa belajar bisnis internet, atau mencari pengetahuan seputar dunia internet dan aplikasi atau smartphone, silahkan kunjungi kerjalebah.com.

Itulah beberapa situs belajar online yang bisa anda jadikan sebagai tempat belajar anda. Selain mudah dipahami, semua situs di atas merupakan situs belajar yang gratis. Jadi, anda tidak perlu mengeluarkan biaya sepeserpun untuk belajar online di situs tersebut.

Semoga postingan artikel daftar situs belajar online ini bisa bermanfaat bagi anda sob. Terimakasih sudah berkunjung dan membaca. Semangat belajar sob.

Baca juga Panduan Lengkap Merancang Website.