Minggu, 03 Februari 2019

Atribut HTML

Atribut memberikan informasi tambahan tentang elemen HTML.

Atribut HTML
  • Semua elemen HTML dapat memiliki atribut
  • Atribut memberikan informasi tambahan tentang suatu elemen
  • Atribut selalu ditentukan dalam tag awal
  • Atribut biasanya datang dalam pasangan nama / nilai seperti: name = "value"
Atribut "href"

Tautan dalam HTML didefinisikan dengan tag <a>. Alamat tautan ditentukan dalam atribut href:

 Contoh :

Anda akan mempelajari lebih lanjut tentang atribut "href" dan tag <a> pada tutorial selanjutnya.

Atribut src

Gambar HTML didefinisikan dengan tag <img>. Nama file sumber gambar ditentukan dalam atribut "src" :

Contoh :

 Silahkan ketikan script di bawah ini, dan simpan file dengan nama "gambar.html"



buka file menggunakan web browser, maka tampilannya akan seperti gambar di bawah :


*Catatan : untuk gambar dan ukuran gambar bisa disesuaikan dengan kebutuhan masing-masing

Atribut width dan height

 Gambar dalam HTML memiliki satu set atribut ukuran, yang menentukan lebar dan tinggi gambar:

Contoh :

Ukuran gambar ditentukan dalam satuan piksel (px) : width = "500" berarti lebar 500 piksel. Anda akan belajar lebih banyak tentang atribut gambar ini pada bagian Gambar HTML.

 Atribut alt

Atribut alt menentukan teks alternatif yang akan digunakan, ketika gambar tidak dapat ditampilkan. Nilai atribut ini dapat dibaca oleh pembaca layar. Dengan cara ini, setiap orang akan bisa mengerti gambar apa yang hendak ditampilkan dalam web browser walaupun gambar yang dimaksud tidak dapat ditampilkan.

Contoh :

 <img src="img_girl.jpg" alt="Girl with a jacket">
Catatan : Atribut alt berfungsi menampilkan keterangan gambar jika gambar tidak dapat ditampilkan.

Silahkan ketik kode program dibawah ini :


Setelah itu simpan file dengan nama alt.html, lalu buka file menggunakan browser anda sehingga muncul tampilan seperti berikut


Gambar tidak dapat ditampilkan dan fungsi atribut alt akan menampilkan keterangan dari gambar tersebut yaitu "Girl with a jacket".


Rabu, 28 November 2018

Elemen HTML

Elemen HTML biasanya terdiri dari tag awal dan tag akhir, dengan konten disisipkan di antara:

<tagname> Konten diletakkan di sini ... </ tagname>

Elemen HTML adalah segalanya dari tag awal hingga tag akhir:

<p> Paragraf pertamaku. </ p>


Elemen HTML tanpa konten disebut elemen kosong. Elemen kosong tidak memiliki tag akhir, seperti elemen <br> (yang menunjukkan jeda baris).

Elemen HTML Tersarang

Elemen HTML Tersarang elemen HTML yang dapat diulang (elemen dapat mengandung elemen). Semua dokumen HTML terdiri dari elemen HTML yang disarangkan. Contoh di bawah ini berisi empat elemen HTML:

Cotnoh Elemen HTML Tersarang
Penjelesan dari contoh diatas :
  • Elemen <html> mendefinisikan seluruh dokumen.
  • Elemen ini memiliki tag awal <html> dan tag akhir </ html>.
  • Isi elemen adalah elemen HTML lain (contoh : elemen <body>).
  • Elemen <body> mendefinisikan badan dokumen.
  • Elemen <body> memiliki tag awal <body> dan tag akhir </ body>.
  • Isi elemen adalah dua elemen HTML lainnya (<h1> dan <p>).
  • Elemen <h1> mendefinisikan sebuah heading.
  • Elemen <h1> memiliki tag awal <h1> dan tag akhir </ h1>.
  • Isi elemennya adalah: "Judul Pertama Saya".
  • Elemen <p> mendefinisikan sebuah paragraf.
  • Elemen <p> memiliki tag awal <p> dan tag akhir </ p>.
  • Isi elemennya adalah: "Paragraf Pertama Saya".

Jangan Lupakan Tag Akhir

Beberapa elemen HTML akan ditampilkan dengan benar, meskipun Anda lupa tag akhir:

Contoh :


Contoh di atas berfungsi di semua browser, karena tag penutup dianggap opsional.

"Jangan bergantung pada ini. Ini mungkin bisa menampilkan sebuah hasil atau mungkin kesalahan yang tidak terduga jika Anda lupa tag akhir."

Elemen HTML Kosong 

Elemen HTML tanpa konten disebut elemen kosong. <br> adalah elemen kosong tanpa tag penutup (tag <br> berfungsi untuk membuat baris baru). Elemen kosong dapat "ditutup" di tag pembuka seperti ini: <br />. HTML5 tidak memerlukan elemen kosong untuk ditutup. Tetapi jika Anda ingin validasi yang lebih ketat, atau jika Anda perlu membuat dokumen Anda dapat dibaca oleh parser XML, Anda harus menutup semua elemen HTML dengan benar.

Gunakan Tag Huruf Kecil

Tag HTML tidak membedakan huruf besar atau kecil: <P> berarti sama dengan <p>.

Standar HTML5 tidak memerlukan tag huruf kecil, tetapi admin merekomendasikan huruf kecil dalam HTML, dan sangat menganjurkan penggunaan huruf kecil untuk jenis dokumen yang lebih ketat seperti XHTML.


MUSLIM PROMO

Contoh Dasar HTML

Jangan khawatir jika contoh ini menggunakan tag yang belum Anda pelajari.
Anda akan belajar mengenai tag-tag tersebut pada postingan berikutnya.

Dokumen HTML

Semua dokumen HTML harus diawali dengan deklarasi tipe dokumen : <!DOCTYPE html>.
Dokumen HTML selalu diawali dengan <html> dan diakhiri dengan </html>.
Bagian yang terlihat dari dokumen HTML adalah antara <body> dan </ body>.


Contoh Dokumen HTML

HTML Headings

Judul HTML didefinisikan dengan tag <h1> hingga <h6>.

<h1> mendefinisikan tajuk yang paling penting. <h6> mendefinisikan tajuk yang paling tidak penting:


Contoh HTML Headings

Paragraf HTML

Paragraf HTML didefinisikan dengan tag <p>:

Contoh Paragraf HTML

Link HTML

Link / Tautan HTML didefinisikan dengan tag <a>:

Contoh Link HTML

Tujuan link ditentukan dalam atribut href. Atribut digunakan untuk memberikan informasi tambahan tentang elemen HTML. Anda akan belajar lebih banyak tentang atribut di postingan selanjutnya.

HTML Images

HTML Images didefinisikan dengan tag <img>. File sumber (src), teks alternatif (alt), width, dan height disediakan sebagai atribut:
Cotnoh HTML Images

HTML Buttons

HTML Buttons didefinisikan dengan tag <button>:

Contoh HTML Buttons

HTML List

HTML List didefinisikan dengan daftar <ul> (tidak beraturan / daftar peluru) atau <ol> (daftar berurutan / bernomor), diikuti oleh tag <li> (item daftar):

Contoh HTML List





MUSLIM PROMO

Minggu, 25 November 2018

HTML Editors

Menulis HTML Menggunakan Notepad atau TextEdit

Halaman web dapat dibuat dan dimodifikasi dengan menggunakan editor HTML profesional. Namun, untuk belajar HTML kami merekomendasikan editor teks sederhana seperti Notepad (PC) atau TextEdit (Mac). Kami percaya menggunakan editor teks sederhana adalah cara yang baik untuk mempelajari HTML. Ikuti empat langkah di bawah ini untuk membuat halaman web pertama Anda dengan Notepad atau TextEdit.

Langkah 1: Buka Notepad (PC)

Windows 8 atau lebih baru:
  • Buka Layar START (simbol jendela di kiri bawah pada layar Anda). Ketik Notepad.

Windows 7 atau yang lebih lama:
  • Buka START >  Program >  Aksesori > Notepad


Langkah 1: Buka TextEdit (Mac)
  • Buka Finder> Aplikasi> TextEdit
  • Juga ubah beberapa preferensi untuk mendapatkan aplikasi untuk menyimpan file dengan benar. Di Preferences> Format> pilih "Plain Text"
  • Kemudian di bawah "Buka dan Simpan", centang kotak yang mengatakan "Display HTML files as HTML code instead of formatted text".
Kemudian buka dokumen baru untuk menempatkan kode.



Langkah 2: Tulis Beberapa HTML

Tulis beberapa HTML dibawah ini ke Notepad.

<!DOCTYPE>
<html>
<body>

<h1>Judul Pertama Saya</h1>

<p>Paragraf Pertama Saya</h1>

</body>
</html>



MUSLIM PROMO
Langkah 3: Simpan Halaman HTML

Simpan file di komputer Anda. Pilih File> Save as dalam menu Notepad.

Nama file "index.html" dan atur encoding ke UTF-8 (yang merupakan pengkodean yang lebih disukai untuk file HTML).


Anda dapat menggunakan .htm atau .html sebagai ekstensi file. Tidak ada perbedaan, terserah Anda.

Langkah 4: Lihat Halaman HTML di Browser Anda

Buka file HTML yang disimpan menggunakan browser favorit Anda (klik dua kali pada file, atau klik kanan - dan pilih "Open with").

Hasilnya akan terlihat seperti ini:


Catatan : mohon tidak hanya copy - paste code program jadilah programer yang bijak dengan menuliskan sendiri code program, dengan begitu anda akan membiasakan diri anda dalam berinteraksi dengan kode - kode program.




Sumber : www.w3school.com.com

MUSLIM PROMO

Sabtu, 18 Agustus 2018

Editing pada Sublime Text

Assalamualaikum wr wb......

Senang berjumpa lagi dengan teman-teman dalam tutorial lanjutan mengenai Sublime Text. Setelah sebelumnya kita telah belajar bagaimana melakukan Konfigurasi Sublime Text, kali ini kita akan mempelajari cara cepat melakukan editing pada sublime text atau bisa dibilang kita akan belajar apa saja shortcut yang ada pada sublime text dalam melakukan pengeditan.

Baiklah tidak perlu panjang lebar kita langsung saja pada tutorialnya, pertama-tama silahkan teman-teman membuat file dengan eksistensi .html, .php, .css dan .js atau bisa langsung saja mendownloadnya pada link di bawah ini :

FILE LATIHAN

Jika sudah memiliki filenya silahkan teman-teman buka pada sublime text, selanjutnya teman-teman bisa melakukan pengeditan sekarang pada file tersebut, berikut adalah shorcut yang dapat mempermudah teman-teman dalam melakukan pengeditan :

=} Untuk membuat komentar tekan CTRL /, komentar bertujuan agar mempermudah kita dalam memahami code program, contoh perhatikan gambar berikut
Contoh komentar pada file html
 
Contoh komentar pada file php dan javascript
=} Selain dapat digunakan untuk membuat komentar, shorcut diatas juga dapat menonaktifkan script yang sudah kita buat caranya adalah dengan memblok script yang ingin dijadikan komentar, kemudian tekan CTRL /, maka secara otomatis script akan nonaktif dan berubah menjadi komentar, sebagai contoh perhatikan gambar berikut :

Sebelum menekan ctrl /
Sesudah menekan ctrl /
=} Jika teman-teman ingin memunculkan atau menghilangkan tampilan sidebar pada sublime tekan tombol CTRL K, B.

Tampilan Sidebar
=} Untuk membuat lebih dari satu cursor atau Multiple Cursor, tekan dan tahan tombol CTRL kemudian arahkan pada bagian mana cursor lainnya akan diletakan. Tujuan dari multiple cursor ini agar memudahkan kita meuliskan kata atau kode program yang sama hanya dengan satu kali mengetik, untuk lebih jelasnya perhatikan video berikut ini


=} Untuk Menyeleksi satu karakter atau kata arahkan cursor pada bagian tengah kata yang ingin diseleksi lalu tekan CTRL D, dan apabila ingin menyeleksi karakter/kata yang sama dan lebih dari satu, teman-teman dapat mengarahkan kursor pada bagian tengah kata kata lalu tekan tombol Alt + F3, maka secara otomatis semua kata yang sama akan terseleksi.

Demikianlah tutorial kita pada kali ini jika ada hal yang ingin ditanyakan atau ingin memberikan saran silahkan tinggalkan dikolom komentar, dan juga admin mohon maaf jika terdapat kekurangan dalam penulisan tutorial ini.

Terimakasih atas kunjungan teman-teman, sampai jumpa di tutorial selanjutnya.....😆

Sumber :

Kamis, 16 Agustus 2018

Konfigurasi Sublime Text

Assalamualaikum wr wb.....

Jumpa lagi di blog PINIM.NET, pada potingan kali ini kita akan mempelajari bagaimana cara melakukan konfigurasi pada Sublime Text.

Baik langsung saja ke tutorialnya :
  • Untuk memperbesar ukuran huruf tekan (ctrl +) sedangkan untuk memperkecilnya tekan (ctrl -)
  • Untuk merubah warna latar pada sublime text, pilih menu "Preferences >> Color Scheme" lalu silahkan pilih tema warna yang teman-teman sukai
  • Untuk memberikan jarak antar tulisan silahkan pilih menu "Prferences >> Setting" pada bagian "Setting Default", teman-teman cari saja kata "line_padding" dengan menekan (CTRL F), lalu copy "line_padding" dan pastekan pada "Setting User", lalu atur jaraknya sesuai keinginan. Lebih jelasnya perhatikan gambar berikut :


    Jangan lupa untuk disimpan, agar perintahnya dapat dijalankan.
Demikianlah sedikit tutorial bagaimana melakukan konfigurasi pada sublime text, jika ada hal yang ingin ditanyakan atau saran silahkan meninggalkan di kolom komentar, dan mohon maaf jika terdapat kesalahan dalam penulisan kata-kata.

Terimakasih sudah berkunjung di blog ini, nantikan tutorial-tutorial selanjutnya....😄
Wassalamualaikum wr wb....!!!

Cara Download dan Instal SublimeText

Assalamulaikum wr wb..... gmana kbr teman-teman semua? Semoga sehat selalu y....

Pada postingan kali ini kita akan belajar bagaimana cara mendownload serta menginstal sublimetext, setelah kita mengetahui apa itu SublimeText dan fitur apa saja yang ada pada sublimetext pada postingan sebelumnya yang berjudul "Pengenalan SublimeText". Baiklah tanpa panjang lebar kita langsung saja ke tutorialnya.

Cara Download dan Instal Sublime Text :

  • Silahkan teman-teman download terlebih dahulu filenya DISINI
  • Kemudian ekstrak filenya
  • Lalu install Sublime Text (sesuaikan dengan windows dari teman-teman jika 32 bit pakai yang x86 dan 64 bit pakai yang x64)
  • Setelah proses penginstalan selesai, selanjutnya pada folder "Patch", copy file "patchnya" ke folder instalasi di C:\Program Files\Sublime Text 3
  • Jalankan Patchnya dan klik tombol "Patch"
  • Selesai
Nah itulah tutorial singkat bagaimana cara download dan menginstall sublimetext 3, semoga bermanfaat. Jika ada salah-salah kata admin mohon maaf sebesar-besarnya, dan apabila ada hal yang ingin didiskusikan silahkan meninggalkannya pada kolom komentar

Dan saya ucapkan terimakasih telah berkunjung di blog ini, nantikan tutorial-tutorial selanjutnya....😆
Wassalamualaikum wr wb...