Block dan Inline Elemen pada HTML

Tag HMTL pada dasarnya, sebelum kita melakukan modifiksi pada CSS memiliki pengaturan secara default (pengaturan bawaan) tergantung dari jenis tag yang kita gunakan. diantaranya ada yang bertipe block dan ada yang bertipe inline. untuk memahami perbedaan dari kedua tipe tersebut, simak penjelasan dibawah ini.

1. Block Element

Block element selalu di mulai dengan baris baru/alinea baru, dan mengambil space melebar  secara keseluruhan mengikuti space yang kita berikan pada tag induknya. sehingga, jika kita membuat beberapa elemen yang bertipe ini, elemen akan saling bertumpuk (tidak bersebelahan). ini merupakan karakter dari block elemen.

Contoh dari block element:

  • <div>
  • <h1> – <h6>
  • <p>
  • <form>
  • <table>
  • <tr>
  • <p>
  • <header>
  • <article>
  • dll

2. Inline Elemen

Inline Elemen kebalikan dari Block Elemen, elemen ini tidak dimulai dengan baris baru dan hanya mengambil space sesuai dengan isi konten yang kita tulis. contohnya jika kita menulis “nama saya budi”, maka lebar yang diambil oleh elemen ini berkisar selebar 14 huruf tersebut. sehingga, jika kita membuat beberapa elemen dengan tipe inline, maka elemen tersebut akang saling bersebelahan.
“ini contoh penggunaan inline elemen dengan formatting text”

Beberapa contoh Inline Elemen :

  • <span>
  • <a>
  • <img>
  • <u>, <i> , <b>, <strong>, <em>
  • dll

Berikut penjelasan singkat mengenai kedua blok diatas, mudah-mudahan sedikit banyak memberikan gambaran mengenai Block dan Inline Elemen. Ok, Bagaimana kawan-kawan sudah nambah pemahamannya?
Dulu, waktu saya pertama kali mengetahui hal ini, langsung saya coba untuk melakukan perubahan di property display pada CSS. namun ternyata pilihan untuk display tidak hanya inline dan block saja, melainkan banyak sekali. anda bisa membacanya lebih lengkap disini.
yang akan saya jelaskan disini adalah perbedaan antara inline dan inline-block dan kapan kita menggunakannya. silakan kunjungi artikel ini :

Perbedaan antara inline dan inline-block

Perkembangan HTML

Seiring berkembangnya Teknologi IT, HTML pun berkembang dari tahun ketahun. Berikut beberapa versi HTML :

Versi Tahun
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
Tim Berners Lee

Pada tahun 1980 seorang ahli fisika, Tim Berners-Lee, dan juga seorang kontraktor di CERN (Organisasi Eropa untuk Riset Nuklir) mengusulkan dan membuat prototipe ENQUIRE, sebuah sistem untuk digunakan para ilmuan dalam berbagi dokumen dan hasil riset. Pada tahun 1989, Tim Berners Lee menulis sebuah memo untuk mengajukan sistem hypertext yang berbasis internet. sehingga pada akhir tahun 1990, Berners-Lee menspesifikasikan suatu HTML dan membuat browser beserta software server di akhir tahun 1990. di tahun yang sama, Berners-Lee dan Robert Cailliau (CERN data system engineer) berkolaborasi dalam sebuah permintaan untuk pendanaan, namun tidak diterima secara resmi oleh CERN. Di catatan pribadinya sejak 1990 kemudian dia mendata beberapa orang yang menggunakan hypertext lalu mengumpulkannya kedalam sebuah ensiklopedia untuk pertama kalinya.

Pada mulanya HTML adalah sebuah dokumen yang disebut “HTML Tag”, pertama kali disebutkan di Internet oleh Tim Berners-Lee pada akhir 1991. Ini menggambarkan 18 elemen yang terdiri dari, desain relatif sederhana awal HTML. Kecuali untuk tag hyperlink, ini sangat dipengaruhi oleh SGMLguid , pada Standard Generalized Markup Language (SGML) berbasis format dokumen di CERN. Sebelas elemen ini masih ada di HTML 4.

HTML adalah bahasa markup yang web browser gunakan  untuk menafsirkan dan menulis teks, gambar, dan bahan lainnya ke dalam sebuah web baik secara visual atau suara. Karakteristik default untuk setiap item dari markup HTML didefinisikan dalam browser, dan karakteristik ini dapat diubah atau ditingkatkan dengan menggunakan tambahan halaman web desainer dengan menggunakan CSS . Dalam perkembangannya, HTML secara progresif telah pindah ke arah yang lebih maju dengan bantuan CSS.

source lengkap : https://en.wikipedia.org/wiki/HTML

 

Pengertian HTML

HTML adalah singkatan dari Hypertext Markup Language merupakan bahasa markup standar untuk pembuatan website. Sebelum membahas lebih lanjut mengenai HTML, ada beberapa istilah penting yang perlu anda ketahui terlebih dahulu.

Website : Suatu halaman web yang saling berhubunga, umumnya berada pada suatu situs dan berisi sekumpulan informasi yang disediakan oleh perorangan, kelompok atau perusahaan (sumber : wikipedia).
Sedangkan menurut pendapat saya, website adalah adalah suatau halaman digital yang berisikan informasi baik itu perorangan, kelompok atau perusahaan yang bisa diakses oleh semua orang yang terhubung kedalam suatu jaringan.

Browser : Suatu Aplikasi pada komputer yang digunakan untuk membuka halaman website. jadi, tanpa browser kita tidak bisa membuka suatu halaman website.

Text Editor : Suatu Aplikasi pengolah text yang digunakan untuk mengolah text baik itu menulis, mengedit dan menyimpan file text. Ada beberapa text editor yang khusus digunakan untuk mengolah HTML, untuk materi ini akan saya bahas di materi selanjutnya.

Menurut W3Schools, ada beberapa point penting mengenai HTML

  • HTML merupakan singkatan dari Hypertext Markup Language
  • HTML mendeskripsikan struktur web dengan menggunakan Markup
  • Elemen HTML merupakan serangkaian blok-blok/tag-tag yang disusun untuk membangun halaman web.
  • Elemen HTML dibuat dengan menggunakan tag HTML
  • tag HTML merupakan mark atau singkatan yang mewakili label dari suatu konten. misalnya “heading” dengan tag <h1> .. <h6>, “paragraph” dengan <p>, “table” dengan <table> dan lain lain.
  • Browser tidak menampilkan tag html secara langsung, namun merender mereka untuk menjadi suatu halaman web. untuk melihat tag html dari suatu webiste anda bisa menggunakan tombol ctrl+u atau view page source pada halaman browser anda

Contoh penulisan sintaks HTML

Penjelasan Singkat

  • The <!DOCTYPE html> mendeklarasikan document HTML5
  • The <html> elemen ini adalah root atau dasar dari semua elemen html
  • The <head> elemen ini mengandung semua meta informasi tentang halaman yang kita buat
  • The <title> elemen ini berisi judul halaman
  • The <body> semua tag dan sintaks yang anda tulis disini akan muncul pada halaman browser
  • The <h1> elemen ini mendefinisikan judul paragraf/artikel dengan ukurang paling besar
  • The <p> elemen inimendefinisikan paragraf
  • The <header>,<nav>,<section>,<article>,<footer> elemen ini mendefinisikan area/daerah dari suatu blok html ke dalam tag yang lebih spesifik. namun tidak ada pengaturan khusus untuk tag-tag ini. tag-tag ini diperkenalkan pada HTML5, nanti akan kita bahas lebih lanjut di artikel selanjutnya.

Demikian pengenalan singkat mengenai HTML. Selamat Belajar

Rumus jadi orang kaya

Dikisahkan seorang satpam yg bernama Afrizal. Afrizal sudah 10 tahun jadi satpam, tahun 2007 tiba-tiba dia kena PHK dengan uang pesangon sekitar 3 juta rupiah. tidak terima dengan uang pesangon yg dia terima, akhirnya dia mengajukan protes dan banding sana sini. Sungguh naas memang nasib rakyat kecil suara yg dilayangkan jangankan didengar, sampai meja pengadilan pun tidak.
Hari itu, dia mengira itulah kiamat dalam hidupnya, dia tidak punya Skill atau kemampuan lain karena selama ini dia jadi satpam dan tidak tau kalau akhirnya di PHK. Uang bulanan yg selama ini jadi penantian, kini hilang seketika.

Continue reading “Rumus jadi orang kaya”

Mengapa kita harus belajar Sintaks Dasar Linux?

Setelah googling untuk mendapatkan jawaban yang relevan, ditambah pengalaman dan pengetahuan saya selama menggunakan salah satu sistem operasi ini, akhirnya saya tulis kembali dengan sedikit kesimpulan menjadi beberapa poin.

Linux sebagian besar digunakan sebagai POSIX compliant OS. artinya, OS ini mendukung pengembangan program untuk semua sistem operasi yang berbasis UNIX. POSIX sendiri merupakan singkatan dari (Portable Operating System Interface for Unix). jadi, menurut sumber yang saya baca (linknya dibawah) pertanyaan ini bisa di generalkan menjadi “Mengapa kita harus belajar UNIX?”. jawabannya adalah dikarena banyak sekali sistem operasi yang dibangun dan dioperasikan dengan basis UNIX. Mac OSX berbasis BSD, sedangkan BSD berbasis UNIX sehingga banyak sekali perintah-perintah pada console Mac yang sama dan bisa anda temui pada linux. begitu pula Android, Android menggunakan Linux sebagai kernelnya. jika kita ingin melakukan flashing, atau meroot android, maka kita harus menjalankan beberapa shell Unix dan mengetikkan perintah-perintah khusus pada console. Selain itu, banyak sekali device-device lainnya mulai dari sistem pesawat terbang, sistem dan perangkat jaringan yang menggunakan Linux atau BSD sebagai Sistem Operasinya.

Linux sendiri sebetulnya tidak menyediakan dekstop, atau aplikasi-aplikasi software pendukung, dsb. akan tetapi banyak distro-distro linux seperti Debian, CentOs, atau turunan Debian seperti Ubuntu, yang menyediakan semua itu. Sebagai informasi tambahan, meskipun Red Hat termasuk salah satu distro linux, namun memiliki aplikasi yang sangat berbeda dibandingkan dengan distro linux lainnya. dan BSD merupakan turunan dari UNIX dan bukan berbasis Linux.

Salah satu kelebihan linux tidak menyediakan desktop adalah kita bisa menggantinya sesuai keinginan kita. misalnya saja, saya mau menggantinya menjadi Unity, Mate, Cinnamon, KDE, LXDE, dsb.

Selain itu, semua distro linux bisa kita modifikasi sekehendak kita. semua kode-kode yang ditulis tersedia dan bisa dirubah sekehendak hati, sehingga kita bisa membuat, membetulkan atau bahkan menghapus bagian-bagian yang tidak kita butuhkan selama itu tidak merubah Core Linux yang bisa menyebabkan error.

Artikel ini hampir keseluruhan mengutip jawaban dari :

Richard Bross, CTO and Founder at SilverSpore

https://www.quora.com/Why-should-I-learn-Linux

Memulai pembelajaran di hari pertama

Cara mengajar seorang guru di sekolah kejuruan harus sedikit berbeda dengan guru di sekolah umum (baca : SMA). kita sebagai pengajar dituntut untuk menyiapkan SDM (Sumber Daya Manusia) yang siap bekerja baik secara skill maupun mental. oleh karena itu, tidak sedikit pengajaran yang saya berikan berisi motivasi-motivasi dan ajakan untuk mencari minat dan bakat sesuai passion yang siswa miliki.

Sebelum saya berangkat lebih jauh membicarakan apa dan bagaimana saya memulai pembelajaran dengan metode saya sendiri, mari kita tinjau pendidikan yang terjadi di sekitar kita.

Meskipun pendidikan tingkat SMK dan Perguruan Tinggi sudah dikelompokkan berdasarkan subjek dan bidang tertentu, tidak sedikit bahkan banyak pelajar yang saya jumpai masih kehilangan arah. Layaknya seorang petualang di tengah hutan yang berlari kesana-sini tanpa mengetahui tujuan yang dia cari, atau layaknya kapten kapal yang mengarungi lautan tanpa mengetahui tempat berlabuh. beginilah kondisi pelajar kita pada umumnya. 

Dibeberapa kasus, banyak pula pelajar yang menyimpang dari tujuan pendidikan yang semestinya. Pendidikan seharusnya digunakan sebagai sarana untuk mencari ilmu, menambah pengetahuan atau sekedar menjawab rasa keingintahuan. Sering kita temui, ada beberapa dari siswa dan mahasiswa yang saya ajar hanya mencari nilai atau selembar kertas sertifikat/ijazah. Mereka mengira dengan nilai yang tinggi atau dengan menempuh pendidikan yang tinggi, mereka bisa mendapatkan pekerjaan yang bagus* dan penghidupan yang layak. Kita tidak tau darimana semua ini berakar, bisa jadi ada yang salah dengan sistem pendidikan kita, dan  ini merupakan tanggngung jwab kita semua (orang tua dan para pengajar).

Berangkat dari semua itu, ada beberapa hal yang saya coba demi mendapatkan cara yang tepat dan benar untuk menjadi seorang pengajar yang baik. Hal pertama yang saya lakukan ketika mengisi hari pertama di kelas adalah:

Menanyakan harapan mereka ketika berada disekolah
Pertanyaan diatas terlihat sepele dan bisa dijawab dengan enteng misalnya untuk belajar pak, biar pintar atau sekadar untuk mendapatkan ilmu dan pengetahuan. Jawaban tersebut tidaklah salah, namun jauh dari jawaban tersebut coba kita renungkan kembali pintar itu masih luas, pintar dalam bidang apa? bagaimana cara membuktikan kepintaran seseorang? kalo nilai dijadikan tolak ukur untuk menilai kepintaran seseorang maka jangan heran kalo banyak pelajar yang mengejar nilai semata.

Menanyakan cita-cita mereka
Pertanyaan ini lebih lucu lagi. mungkin sebagian orang sering menayakan hal ini ketika kita kecil. waktu kecil, cita-cita dan harapan itu sebetulnya masih buram. kenapa buram? anak hanya tau hal-hal tersebut berdasarkan dogma-dogma orangtua atau masyarakat sekitar yang terkadang tidak memberikan pilihan bagi seorang anak untuk berpikir. jawaban yang kita jumpai ketika bertanya hal ini adalah

saya ingin menjadi dokter,
saya ingin menjadi polisi,
saya ingin menjadi guru, dll

Cita-cita atau profesi yang disebtukan rata-rata pekerjaan mulia dan baik. namun, perlu di kaji kembali apakah pekerjaan atau profesi yang baik hanya sebatas itu? banyak profesi yang bisa disesuaikan dengan passion yang lebih subjektif atau khusus. contohnya Programmer, Designer, Atlit Sepakbola, Penulis, dan banyak hal lainnya. Selain itu, jarang sekali saya mendengar cita-cita seorang anak ingin menjadi pengusaha dan menciptakan lapangan kerja.

Memberikan gambaran tentang hidup dan kehidupan

Semua orang yang bernyawa pasti merasakan kehidupan. tidak terkeculi siswa-siswi kita, namun kehidupan disini adalah kehidupan yang nyata, dimana kita harus berjuang untuk mendapatkan kehidupan yang layak. Saat ini, mereka masih hidup didampingi oleh orangtua atau wali mereka.

kehidupan menurut KBBI adalah cara (keadaan, hal) hidup sedangkan “gaya hidup” menurut KBBI adalah: pola tingkah laku sehari-hari segolongan manusia di dalam masyarakat. untuk mendapatkan semua itu, maka siswa diarahkan untuk mulai berpikir bagaimana mereka mencari penghidupan/pencaharian di masa yang akan datang.

Banyak kita jumpai pekerjaan-pekerjaan yang dipandang sebelah mata, contohnya tukang parkir, tukang ojeg, pemulung, dll. pernahkah kita bertanya, Apakah mereka berharap untuk mendapatkan pekerjaan itu? Apakah mereka diberikan kesempatan untuk mendapatkan pekerjaan yang lebih layak?

mungkin sebagian orang menganggap itu semua adalah takdir. takdir itu tidak bisa dirubah, dan pasrah dengan takdir yang diberikan. perlu diketahui bahwa takdir itu sesuatu hal yang ghaib. kita semua tidak ada yang tau mengenai takdir, jadi berusahalah untuk menjemput takdir yang baik. saya tidak akan berbicara panjang lebar mengenai takdir, berikut ini adalah penjabaran menganai takdir (Qodar)

Hukum Membicarakan Permasalahan Qadar

setelah memberikan gambaran mengenai kehidupan, mudah-mudahan siswa/i kita sedikit banyaknya bersiap diri untuk menyongsong kehidupan di masa yang akan datang. Mereka harus menyiapkan skill/kemampuan untuk bersaing di era globalisasi ini.

Saya yakin, sebetulnya sudah banyak guru yang memulai atau bahkan memiliki method yang lebih baik dari apa yang saya lakukan. demikian coretan-coretan yang saya tulis untuk berbagi pengalaman dan berharap mendapat masukan dari pembaca sekalian untuk menemukan method yang lebih baik dan cocok di lingkungan yang kita ajar.

Raw Materi “Dasar Pemrograman Web untuk Pemula”

Berikut ini, adalah raw materi “Dasar Pemrograman Web untuk Pemula” yang akan saya tulis didalam blog ini. semoga bermanfaat untuk rekan-rekan developer yang baru belajar.

Note : Penulisan artikel ini tidak terstruktur, saya buat dan sesuaikan dengan materi pengajaran yang akan saya berikan di kelas. jadi saya mohon maaf karena masih ada beberapa materi yang belum tersedia, Terima kasih.
(materi yang sudah tersedia, ditandai dengan hyperlink bergaris bawah)

Pengenalan HTML
Pengertian HTML
Perkembangan HTML
– Browser
– Editor

Persiapan Belajar
– Pengenalan git
– Dasar-dasar git
– Penggunaan Sublime

Dasar HTML
Elemen/Tag
Attribute
Headings
Paragraph
Formatting text
List
Hyperlink
Images
– Studi Kasus

CSS
Pengertian CSS
Inline CSS
Internal CSS
External CSS
Selector CSS dengan menggunakan ID, Clas, Tag
CSS Selector lanjutan
CSS Selector lanjutan bagian 2
Inline & Block Element
Perbedaan block dan inline pada elemen HTML
CSS Box Model
– Studi Kasus

Table
Pengertian Baris dan Kolom
Penggabungan Cell
Penerapan CSS dalam Table
– Studi Kasus

Form
– Pengertian Form
– Elemen-elemen Form
– Form Attribute
– Penerapan CSS dalam Form
– Studi Kasus pembuatan facebook registration page

Media
– Audio/Video
– Canvas
– SVG
– Studi Kasus

layouting
– Pengenalan Layout dan Grid
– HTML Table
– CSS Float Property
– Studi Kasus 1
– CSS framework
– CSS flexbox
– Studi Kasus 2

CSS Responsive
– Pengertian Responsive Webdesign
– Viewport dan Grid View
– Media Queries
– Studi Kasus

Pembuatan template
– Pengenalan Software Design
– Design & Slicing
– Menulis Kode HTML
– Menulis Kode CSS
– CSS Responsive
– Publish to git page

CSS Trick
– Dropdown Menu
– Penggunaan Google Font
– Membuat Background FullWidth
– Image Sprite