Pengenalan CSS bagian 3 (CSS Sintaks & Selector)

Sebelum kita membahas CSS selector, pada materi sebelumnya kita sudah mengetahui bahwa aturan penulisan sintaks CSS adalah sebagai berikut


(source : https://www.w3schools.com/css/css_syntax.asp)

Dari gambar diatas, Selector berfungsi untuk memilih atau menyeleksi elemen mana yang akan kita atur, sedangkan declaration adalah sintaks CSS yang kita sisipkan yang terdiri dari nama properti dan value dari properti tersebut. Jika kita ingin menyisipkan beberapa deklarasi CSS, maka pisahkan dengan titik koma(;).

Jika kita masih belum paham fungsi selector, coba pahami analogi dibawah ini.
Ketika kita menyuruh tukang bangunan untuk mengecet dinding rumah kita, maka kita harus menjelaskan dinding sebelah mana yang mau dicat, karena dinding rumah itu bisa di dapur, di kamar, di bagian tengah, dll. begitu pula dengan elemen HTML. sebelum membuat CSS, kita dianjurkan untuk menyusun elemen HTML nya terlebih dahulu. lalu setelah itu satu persatu kita atur elemen mana yang akan kita rubah tampilannya, geser posisinya, sisipkan backgorund, dll dengan menggunakan CSS selector

CSS Selector digunakan untuk memilih atau menyeleksi elemen html yang akan kita atur CSS nya berdasarkan pada :

  • nama element (by Tag) contohnya h1, p, div, header, section, dll.
  • id dari suatu elemen (by ID) contohnya <section id=”home”>, <section id=”profil”>, dll.
  • class dari suatu elemen (by Class) contohnya <article class=”nobg”>, <article class=”no-padding”>, dll.
  • attribute dari suatu elemen selain id dan class (by Attribute name) contohnya <input type=”text” ../>, <input name=”phone” />
  • berdasarkan event tertentu misalnya pada saat tombol di hover (:hover) pada saat checbox di checked (:checked)
  • dan masih banyak lagi yang lainnya selama css masih dikembangkan dan disesuaikan dengan perkembangan teknologi

Untuk memahami semua selector diatas, mari kita praktekkan satu persatu.

Tag/Elemen Seletor

Selector ini menyeleksi suatu elemen berdasarkan nama tag yang kita pakai untuk menulis elemen tersebut. contohnya kita mengiginkan bahwa untuk setiap judul yang kita tulis ingin bergaris bawah, dan tulisannya huruf kapital. sedangkan untuk paragraf yang kita buat agak menjorok ke dalam.

Kadang-kadang, meskipun kita menggunakan elemen yang sama kita ingin memberikan pengaturan yang berbeda. Kita tidak mungkin untuk mengatur berdasarkan tag tersebut, dikarenakan tag tersebut digunakan ditempat yang lain dengan bentuk yeng berbeda. oleh karena itu, ada cara lain dalam menyeleksi suatu elemen yaitu dengan menggunakan ID atau Class pada elemen tersebut.

ID Selector

  • ID selector menggunakan attribut id pada elemen HTML untuk menyeleksi elemen tersebut.
  • ID pada tiap elemen harus unik, jadi ID Selector digunakan untuk menyeleksi elemen yang unik.
  • Untuk menyeleksi id pada suatu elemen gunakan karakter hash(#) lalu diikuti dengan nama id yang kita tulis pada elemen tersebut.

Class Selector

  • Class selector menggunakan attribut class pada elemen HTML untuk menyeleksi elemen tersebut.
  • Untuk menyeleksi class pada suatu elemen gunakan karakter dot(.) lalu diikuti dengan nama class yang kita tulis pada elemen tersebut.

Untuk memahami selector dengan ID dan Class perhatikan contoh dibawah ini

Perbedaan antara ID dan Class

  • ID seharusnya Unique
    • Dalam 1 elemen hanya boleh memiliki 1 ID
    • Dalam 1 document tidak boleh ada ID yang sama
    • Meskipun kita memakai id yang sama dan tetap ditoleransi oleh browser, namun jika kita menggunakan javascript, maka yang terbaca hanya satu elemen atau bahkan tidak sama sekali.
  • Class tidak Unique
    • Dalam 1 elemen boleh memiliki multi class
    • Class yang sama bisa digunakan di semua elemen meskipun dalam document yang sama

 

Selain menggunakan ke 3 selector diatas, kita pun bisa melakukan pengaturan berdasarkan nama attribut atau berdasarkan event tertentu. contohnya saya ingin merubah semua inputan bertipe text dan textarea. atau saya ingin merubah background button menu ketika di hover. Perhatikan contoh dibawah ini :

Demikian Penjelasan mengenai CSS Selector dan contoh implementasinya. mudah-mudahan bermanfaat bagi kita semua. jika ada pertanyaan terkait materi ini, atau ada yang tidak paham dengan sintaks-sintaks baru yang saya tulis diatas, silakan kirim komentar pada kolom dibawah artikel ini.

Keep Learning
Semangat ^_^

Pengenalan CSS bagian 2 (Internal dan External CSS)

Pada bab sebelumnya kita sudah mengetahui pengertian CSS dan bagaimana CSS disisipkan dengan teknik inline CSS. pada artikel kali ini , kita akan belajar bagaimana menyisipkan CSS dengan menggunakan internal/embeded CSS dan external CSS.

Internal CSS

Sebelumnya kita sudah mendapatkan gambaran bahwa Internal CSS adalah sintaks CSS yang ditulis bersamaan dengan file HTML yang kita buat dengan menggunakan elemen <style>… </style>. Internal CSS lazimnya ditulis didalam tag/elemen <head> yang berada pada bagian atas dokumen HTML, namun meskipun disimpan didalam body atau didalam elemen lainnya akan tetap terbaca selama elemen yang membutuhkannya berada di bawahnya.

Untuk menyeleksi elemen yang akan kita gunakan dalam Internal CSS kita akan mengenal istilah selector yang mana akan kita pelajari setelah memahami penggunaan External CSS.

 

berdasarkan contoh diatas, bandingkan pengunaan CSS internal dengan inline CSS, lebih rapih dan mudah bukan? ^_^. Meskipun demikian, penggunaan CSS internal sedikit sekali di gunakan untuk membangun sebuah web. CSS internal biasanya di generate bersamaan dengan tag HTML yang dihasilkan oleh server side scripting seperti PHP, nodeJS, Ruby, dll. CSS pada umumnya dibuat dengan menggunakan External CSS seperti yang akan kita bahas dibawah ini. masih semangat kan kawan-kawan?

External CSS

External CSS memisahkan antara file html dengan file CSS. file CSS berkestensi .css kemudian dihubungkan dengan menggunakan tag/elemen <link> yang biasanya di simpan di dalam tag <head>. penggunaanya mirip sekali dengan Internal CSS yang membutuhkan selector untuk menyeleksi elemen mana yang akan kita sisipkan CSS. untuk memahami penggunaan CSS External, ikuti langkah berikut ini :

  1. Buatlah halaman html yang terdiri dari header berisi text (seperti pada materi sebelumnya) kemudian berikan judul dan konten pada halaman web yang anda buat. (lihat contoh dibawah ini)
  2. pada tag <head> buatlah tag seperti dibawah ini, atau jika anda menggunakan sublime text cukup mengetikkan kata link lalu pencet tab, pastikan tampilan headnya jadi seperti ini.
  3. Buatlah file CSS seperti yang telah anda buat sebelumnya pada materi internal CSS (Lihat contoh dibawah ini)

Demikian penjelasan singkat mengenai CSS internal dan external. pada saat kita membuat CSS pada contoh diatas, secara tidak langsung kita sudah menyeleksi elemen mana yang akan kita beri CSS dengan menggunakan selector Tag/Elemen.

Apa itu Selector?
Berapa banyak tipe selector?
Pokok bahasan ini kita pelajari pada bagian selanjutnya.

Keep Learning ^_^
Semangat

Pengenalan CSS bagian 1

CSS singkatan dari Cascading Style Sheets. CSS mendeskripsikan bagaimana elemen HTML ditampilkan pada halaman web atau media lainnya. CSS dapat mempermudah pekerjaan kita dalam mengontrol beberapa layar/blok secara keseluruhan dalam waktu bersamaan. kalo kita misalkan HTML itu adalah layout/struktur elemen dari suatu rumah, maka CSS ini adalah warna chat, jenis genteng, texture keramik, dan bahkan posisi lemari.

Dalam suatu kasus, misalnya tetangga sebelah sedang membangun sebuah rumah dengan 3 buah kamar. Kamar tersebut adalah milik Budi, Wati, dan Nina. dalam kasus ini kita memiliki blok/elemen yang bernama kamar. kamar-kamar itu punya id yg berbeda-beda yaitu nama pemilik kamar tersebut. dengan adanya penamaan tersebut, kita bisa memberitahu tukang bangunan bahwa kamar Nina dan budi pengen dicat warna biru sedangkan kamar wati pengen dicat warna cream.
Berangkat dari contoh kasus diatas, hal tersebut berlaku untuk pengaturan HTML dan CSS. Untuk memberikan style pada suatu blok/layer kita harus mendefinisikan elemennya terlebih dahulu dengan menggunakan selector.
CSS dapat kita sisipkan ke dalam sebuah tag/elemen HTML dengan 3 cara:

  1. Inline CSS : sintaks CSS disipkan langsung pada tag/elemen yang kita buat dengan menggunakan attribute style
  2. Internal CSS :  sintaks CSS disisipkan pada halaman yang sama dengan menggunakan Tag <style> </style>
  3. External CSS : sintaks css disimpan pada file terpisah berekstensi .css misalnya style.css dan dihubungkan dengan menggunakan tag <link>

Untuk mempermudah memahami CSS diatas, mari kita bahas satu persatu.

Inline CSS

Seperti yang sudah kita sebutkan diatas, CSS dengan tipe ini langsung kita sisipkan pada tag HTML yang kita buat dengan menggunakan attribut style. (jika anda masih bingung apa itu tag dan apa itu attribut silakan masuk ke materi dasar HTML terlebih dahulu).

Contoh : saya mau membuat judul halaman dengan text warna biru dan bergaris bawah tipis. atau memberikan background pada suatu elemen. maka dengan menggunakan inline CSS anda cukup membuat seperti dibawah ini (lihat hasilnya pada tab result)


Contoh lainnya:

Penjelasan singkat :

color digunakan untuk membuat warna pada text yang berada pada elemen yang kita seleksi, diisi dengan kode warna. untuk mendapatkan kode warna yang mudah, anda bisa menginstall aplikasi Gpick (Open source) untuk pengguna Linux, atau Color scheme (berbayar) untuk pengguna windows, atau bisa juga dengan menggunakan software pengolah design seperti Gimp atau Adobe Photoshop. Kode warna bisa disii dengan:

  • kode valid warna (dalam bahasa inggris) contohnya red, green, blue
  • kode RGB rgb(255, 0, 0) atau rgba (255,255,255, 0.5) ditambah transparancy
  • kode hexa warna 6 digit, contohnya #000000 (Hitam), #CCCCCC (Abu-abu) atau #FFFFFF (Putih), dsb.

border digunakan untuk memberikan garis pada suatu elemen, diisi dengan jenis border (solid, dotted, dashed, double, groove, ridge, inset, outset, none, hidden, mix silakan dicoba satu persatu), kemudian diikuti oleh lebar border (1px, 2px, dll) lalu diikuti oleh kode warna. selain itu, border pun bisa kita spesifikasikan secara khusus. misalnya border-left, border-right, border-bottom, atau border-top. untuk penjelasan lebih detail mengenai border anda bisa klik link ini,

text-align digunakan untuk memberikan pertaan pada text yang kita buat, diisi dengan left, right, center atau justify.

background digunakan untuk memberikan latar belakang pada elemen yang kita buat. background bisa langsung diisi dengan menggunakan kode warna seperti pokok bahasan diatas, atau bisa juga dengan menggunakan url gambar. khusus untuk backgorund gambar, kita bisa menambahkan repeater secara horizontal atau vertikal dengan pilihan repeat, no-repeat, repeat-x,repeat-y, initial, dan inhherit. teknik ini “dulu” sering kita gunakan untuk memberikan efek realism pada design yang kita buat sebelum masuk era flat design. teknik ini digunakan apabila elemen yang kita buat lebih besar dari gambar background yang tersedia, sehingga kita diberikan pilihan untuk melakukan pengulangan secara vertikal/horizontal atau tidak sama sekali.  selain repeater, bg gambar juga bisa diatur posisinya misalnya saya pengen secara vertikal di tengah dan secara horizontal diatas. untuk memahami lebih lanjut mengenai background kita bisa temui disini

padding digunakan untuk memberikan jarak didalam suatu elemen konten. padding berbanding terbalik dengan margin, singkatnya padding kedalam sedangkan margin keluar. perhatikan gambar dibawah ini

Penjelasan mengenai sintaks-sintaks CSS lain akan kita temui pada bahasan-bahasan selanjutnya, atau bisa kita dapatkan penjelasan lengkapnya di https://www.w3.org/TR/CSS21/indexlist.html

Demikian penjelasan singkat untuk pengenalan CSS, mudah-mudahan bermanfaat. Sebetulnya, penggunaan CSS dengan menggunakan teknik inline tidak dianjurkan untuk sering digunakan, dikarenakan membuat struktur HTML jadi terlihat kurang rapi dan kita harus menyisipkan kode CSS satu persatu pada elemen yang akan kita buat. Oleh karena itu, di pembahasan selanjutnya, kita akan belajar bagaimana CSS  di susun lebih rapi dengan menggunakan selector yang akan di impelementasikan pada internal dan external CSS.

Keep Learning ^_^ dan Semangat.

CD Interaktif

CD interaktif merupakan salah satu media pembelajaran dengan menggunakan teknologi komputer yang di representasikan secara audio visual dengan beberapa keterangan yang ditampilkan secara interaktif dan menarik. CD Interaktif dapat dikemas kedalam sebuah CD (Compact Disk) dengan tujuan aplikasi interaktif di dalamnya.

Pada umumnya, CD Interaktif di bangun dengan memadukan Gambar, Video, Animasi, Text,  pengolahan/editing, serta pemberian navigasi  untuk mempelajari bagian-bagian tertentu. Dengan demikian, pembelajaran dengan metode seperti ini memudahkan pengguna untuk berinteraksi langsung dengan materi yang akan di pelajari. Beberapa kegunaan CD interaktif antara lain : Company profile, Gambaran sebuah proyek, CD materi pembelajaran, dan sebagainya.

Untuk membuat suatu CD Interaktif, ada beberapa langkah/metode yang harus dipersiapkan, diantaranya :

  1. Menentukan Tema
  2. Membuat Story Board
  3. Menyiapkan Aset (gambar, audio, video dan animasi)
  4. Merancang Design utama
  5. Membuat Tombol
  6. Membuat Halaman Materi
  7. Menyisipkan Aset ke dalam materi
  8. Membuat Transisi
  9. Mengaktifkan Tombol
  10. Publishing
  11. Membuat Autorun kedalam CD

Demikian penjelasan singkat mengenai CD interaktif. untuk selanjutnya, kita akan belajar bagaimana cara membuat CD Interaktif sederhana dengan menggunakan Action Script 3 pada Adobe Flash CS 5. Tunggu artikel berikutnya, Selamat Belajar.

Dasar HTML

Sebelum kita masuk ke bab ini, pastikan terlebih dahulu sudah memiliki text-editor seperti sublime text, notepad++, atau yang lainnya (silakan pilih salah satu). jika tidak, saya sarankan cek artikel sebelumnya untuk mengenal editor dan bagaimana cara menyimpan file html.

Elemen/Tag

Pada bab sebelumnya, kita sudah mengetahui bahwa html terdiri dari sekumpulan tag yang mewakili suatu konten. jadi, untuk membuat suatu konten kita harus mengetahui terlebih tag yang digunakan. suatu HTML biasanya terdiri dari tag pembuka, dan tag penutup dengan konten/isinya berada di kedua tag tersebut.

Bentuk baku :
<tagname>isi dari tag yang kita buat</tagname>

Attribute

Pada Umumnya semua elemen/tag HTML memiliki attribute. Attribut berisi informasi tambahan mengenai tag yang akan kita buat. contohnya kita akan membuat suatu judul dengan membuat H6. H6 ini ingin rata tengah maka kita bisa menambahkan align=”center”. Attribute pada html disimpan di tag pembuka dan biasanya bentuk umum dari suatu attribute adalah name=”value”.

Headings

Headings digunakan untuk membuat judul pada artikel atau paragraf yang akan kita buat. Heading terdiri dari h1, h2,h3, sampai dengan h6

Paragraf

Untuk membuat paragraf, kita cukup menggunakan tag p, jika kita menggunakan sublime text 3, kita cukup mengetikkan huruf p di keyboard kemudian pencet tab maka secara otomatis akan memunculkan tag pembuka dan tag penutup. untuk mendapatkan tulisan dengan dummy text lorem ipsum, kita cukup mengetikkan lorem kemudian pencet tab

Formatting text

Seperti halnya belajar software pengolah text, kadang kala kita membutuhkan tulisan berbentuk tebal, miring, dll. HTML menyediakan tag untuk formatting text, berikut adalah tag-tag yang dipakai untuk membuat format text

Tag Description
<b> Untuk membuat text menjadi tebal
<em> Untuk membuat text menjadi miring
<i> Untuk membuat text menjadi miring
<small> Untuk membuat text menjadi lebih kecil
<strong> Untuk membuat text menjadi tebal
<sub> Untuk membuat tulisan seperti H2O
<sup> Untuk membuat tulisan seperti M2
<ins> Untuk membuat garis dibawha tulisan
<del> Untuk membuat tulisan yang dicoret
<mark> Untuk menandai tulisan (defaultnya warna kuning)

List

List terbagi menjadi 2, yaitu ordered list dan unordered list

Ordered List

  1. ordered list digunakan untuk list dengan penomoran berurut
  2. tag ol digunakan untuk membuka ordered list
  3. tag li digunakan untuk isi list
  4. tag ol memiliki attribute type “a”, “A”, “I”, “i”, “1”

Unordered List

  • unordered list digunakan untuk list dengan tidak memandang urutan
  • tag ul digunakan untuk membuka ordered list
  • tag li digunakan untuk isi list
  • tag ol memiliki attribute type “square”, “circle”, “disc”, “none”

untuk memahami Ol dan Ul silakan anda buat file dibawah ini kemudian save lalu buka di browser kesayangan anda.

Contoh List didalam List

Hyperlink digunakan untuk membuat link dari satu halaman ke halaman lain atau ke url diluar website kita. misalnya kita punya file index.html lalu dengan mengklik tombol tertentu maka akan menuju ke halaman about.html atau ketika kita klik lari ke halaman facebook kita. untuk melakukan semua itu diperlukan suatu hyperlink.
Contoh penulisan hyperlink adalah sebagai berikut :

secara default, semua link html akan muncul seperti ini di smua browser :

  • Link yang belum dikunjungi akan terlihat berwarna biru dan bergaris bawah
  • Link yang sudah dikunjungi akan terlihat berwarna purple namun tetap bergaris bawah
  • Link memiliki attribute target (“_blank”,”_self”,”_top”,”_parent”)

Menyisipkan Gambar

Tag yang digunakan untuk menyisipkan image dalam HTML adalah img. selain src img memiliki attribut width dan height untuk mengatur lebar dan tinggi gambar, serta alt untuk memberikan keterangan pada gambar

Demikian penjelasan singkat untuk dasar HTML, mudah-mudahan bermanfaat. Keep Learning ^_^
Semangat.

 

Perbedaan antara inline dan inline-block

Hallo guys, ketemu kita dalam pembelajaran CSS. materi kali ini adalah materi dasar mengenai perbedaan property display : inline-block, dengan display:inline. langsung saja, simak penjelasan dibawah ini :

  1. inline elemen tidak memiliki pengaturan properti width (lebar) dan height (tinggi). dia akan selalu otomatis mengikuti content yang kita isi didalamnya. sehingga meskipun kita set width dan heightnya pada elemen ini. itu tidak akan berpengaruh, sedangkan inline-block bisa kita set sesuka hati.
  2. inline elemen tidak memiliki pengaturan untuk properti margin dan padding (hanya atas dan bawah saja), sehingga jika kita memberikan margin-top atau margin-bottom pada elemen tersebut, itu tidak akan berpengaruh sama sekali. sedangkan inline-block bisa.
  3. baik inline maupun inline block, tidak membuat garis baru dan menjadikan elemen ini bersebelahan dengan elemen sebelumnya.

untuk memahami lebih detail mengenai perbedaan inline dan inline-block, mari kita lihat contoh dibawah ini.

silakan rubah property display pada kedua CSS diatas dengan inline dan inline-block, lalu simpulkan sendiri jawabannya yah. kalo ada pertanyaan silakan tulis di kolom komentar ^_^

Thanks

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”