WHAT'S NEW?
Loading...

Prolog 

Artikel kali ini akan membahas tentang tag tag html yang sering digunakan oleh para programmer web dalam proses pembuatan halaman web untuk mengefisienkan kata dan waktu langsung saja kita bahas satu-persatu tag tag HTML yang sering digunakan (ok tampilkan) :

1. Tag Utama 

a. html

tag <html></html> adalah baris paling atas pada dokumen html.

b. head

tag <head> </head>, tag yang berisi informasi mengenai halaman HTML biasa berisi descripsi tentang dokument, judul, dan informasi lain di tempatkan disini.

c. body 

tag <body> </body>, tag ini berisi seluruh tampilan dokument, jadi di dalam tag <body>  seluruh element di pasang 

contoh pengunaan tag utama :

<html>
      <head> 
             # berisi informasi seperti title(judul),descripsi, dan informasi lain. 
      </head> 
      <body> 
            #berisi seluruh konten dokument misalnya heading, isi(konten), footer, sidebar, dll 
      </body> 
</html>

2.  Tag Link 

a. tag <a>

salah satu tag yang paling sering digunakan adalah <a>, tag ini digunakan untuk membuat hyperlink, intinya digunakan untuk mengaitkan halaman yang satu dengan halaman yang lain.

Attribute 

1. href 

attribute yang sering digunakan adalah href digunakan untuk menentukan target link, target disini bisa berupa link URL atau bisa juga element ID pada suatu file HTML, untuk lebih jelasnya saya berikan contoh :

/** mengunakan url external **/

<a href="google.com">  klik google </a>

/** mengunakan url directory **/

<a href="belajar/index.php"> Belajar </a>

/** mengunakan link internal dengan target ID**/

<a href="#nama_id" > klik disini </a>







2. Attribute lain 





selain atribute href masih banyak juga atribute lain yang bisa digunakan untuk tag a yaitu :download(HTML5), media(HTML5), ping(HTML5), rel, target, datafld, datasrc, hreflang, type, dll untuk lebih jelasnya anda bisa melihat penjelasan mengenai atribute tersebut di sini .



contoh-contoh lain pengunaan tag <a>



<!-- misalnya link yang di sematkan dalam sebuah gambar -->
<a href="coderware.blogspot.com">
     <img src="img/img.png" alt="coderware">
</a>





b. Tag untuk menampilkan gambar <img> 



tag ini digunakan untuk menambahkan gambar ke dalam element HTML.



Attribute 



Attribute yang sering digunakan pada tag ini adalah src, width, height, dan alt, attribute src digunakan sebagai image URL(link untuk gambar), width digunakan untuk mengatur lebar gambar, height digunakan untuk mengatur tinggi gambar, dan alt digunakan sebagai alternatif jika terjadi kesalahan dalam proses pemuatan gambar, contoh :


<img src="https://d13yacurqjgara.cloudfront.net/users/5187/screenshots/1055369/swallows_and_daggers_script.gif" width="300px" height="300px" alt="coderware">



dan hasilnya :



 
coderware





sumber : sini 



artikelnya akan di mengenal lebih dekat tag HTML bagian 2



itulah beberapa perintah dan contoh tag HTML , keep koding :)























































a. Prolog







apa itu HTML ?sebelumnya saya akan analogikan  tentang apa itu html







misal kita analogikan proses develop website itu sama dengan proses membangun sebuah rumah. dalam proses pembangunan secara garis besar proses dilakukan mulai dari awal sampai akhir anggaplah dibagi menjadi 3 bagian


    

  • proses pembangunan fondasi,tiang-tiang,dinding, dll
    • 

  • kemudian dilanjutkan dengan proses penge-cet-an dinding agar terlihat indah 
    • 

  • dan yang terakhir proses pemasangan/instalasi kompnent listrik, perabot  dan lain sebagainya 
    • 




setelah ketiga proses tersebut selesai barulah sebuah rumah dianggap telah jadi dan dapat ditinggali.







tidak jauh beda dengan proses diatas, proses pembuatan website hampir mirip dengan tahap pembangunan rumah diatas,







HTML disini berperan sebagai "fondasi/dasar". Dengan kata lain HTML bertanggug jawab membuat element-element pada halaman website , misalnya "header,content,sideabr,navigasi,footer,dan element element-element yang lain" sehingga terbentuk seuatu halaman website yang utuh..







sedangkan tahap ke-dua dan ke-tiga dilakukan oleh CSS(Cascading Style Sheet) dan Javascript (untuk penjelasan tentang apa itu CSS & javascript akan dijelaskan di postingan yang lain ..







 2. Apa itu HTML ?







HTML adalah singkatan dari (Hyper Text Markup Language) dikembangkan oleh  kolaborasi Caillau Tim dengan Berners-Lee Rober pada saat mereka bekerja untuk CERN. ( CERN adalah suatu lembaga fisika energi tinggi di jenewa) dan di populerkan pertama kali oleh browser Mosaic. selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya.










gambar tag dan atribute-nya 





Tag 





dalam proses pembuatan dokumen, HTML mengunakan code atau lebih dikenal dengan istilah "Tag" tertentu untuk melakukan instruksi  sebagai contoh untuk menampilkan "TULISAN TEBAL "  , maka penulisannya dengan cara seperti di bawah ini : 








<strong>TULISAN TEBAL</strong>





 tanda <strong> digunkan untuk menampilkan cetak tabal pada kata "TULISAN TEBAL dan diakhiri dengan </strong> untuk menonaktifkan cetak tebal tersebut





Attribute 











attribute adalah informasi tambahan untuk tag HTML, informasi ini berupa warna teks,ukuran teks,tipe dll. setiap atribute memiliki pasangan nama dan nilai(value), untuk lebih memudahkan memahami apa itu atribute saya berikan analogi seperti di bawah ini  misalkan roti itu adalah tag HTML:


<roti warna="coklat" bentuk="oval" rasa="keju">  









dari contoh diatas tag(susu) diberi atribute (warna) dengan value (coklat),atribute (bentuk) dengan value (oval), attribute (rasa) dengan value (keju).



contoh atribute yang sebenarnya di html :



<input type="submit" placeholder="ini adalah form..">  





3. Element Dalam HTML





secara gari besar ada 4 element dalam HTML yaitu 






    

  • Struktural : yaitu element yang menentukan level atau tingkatan dari sebuah tulisan misalnya : <h1> ini heading level 1 </h1> ,<h1> sampai <h6> memiliki tingkatan yang berbeda.
    • 

  • Presentasional : yaitu element yang berhubungan dengan tampilan tulisan misal: <strong> text tebal </strong>, tag <strong> akan menampilkan text tebal. tanda presentasional saat ini sudah tidak direkomendasikan digunakan lagi karna telah di gantikan dengan CSS.
    • 

  • hiperteks : tanda yang digunakan untuk mengaitkan(link) dokument yang satu dengan dokument yang lain. contohnya <a href="coderware.blogspot.com"> coderware </a>.
    • 

  • element element widget yang membuat  object-object lain seperti  tombol (<tombol>),daftar(<li>).garis(<hr>) 
    • 








4. Contoh Dokument HTML sederhana 

document HTML 5 : 




<!DOCTYPE html> 
<html> 
    <head>
          <title> selamat datang di coderware</title>
    </head>
    <body>
          <h1> Hello, stranger ! </h1>
    </body>
</html>












(sumber : disini)

itulah tsedikit penjelasan tentang HTML mudah-mudahan bermanfaat , keep coding :)














































Follow:

































Created by ThemeXpose