Dasar - Dasar HTML (Sintaks HTML)

Dalam dunia blog, kita tidak bisa lepas dari bahasa HTML. untuk membuat blog kita menjadi menarik pun perlu sintaks-sintaks HTML. dengan mengerti bahasa HTML akan memudahkan kita adalam mengoprek dan mengoptimasi website atau blog kita, oleh karena itu saya menulis sedikit tentang Dasar-Dasar HTML agar kita bisa mempelajarinya. 

A.  DEFINISI HTML
   HTML (Hypertext Markup Language) merupakan suatu bahasa pemrograman untuk membangun sebuah dokumen dalam bentuk halaman di web (walaupun banyak orang yang keberatan)  menyebut HTML sebagai bahasa pemrograman Karena dirasa terlalu sederhana, hanya terdiri dari tag sampai , selain itu juga, HTML  tidak memiliki ‘looping’ seperti bahasa pemrograman lain. Namun dalam hal ini, tidak bisa dipungkiri bahwa HTML selalu ada pada sebuah halaman web page, karena HTML dapat dipergunakan sebagai hypertext link yang mampu membentuk hubungan antara teks dan dokumen lain. Dengan demikian pembaca dokumen bisa melompat dari satu dokumen ke dokumen yang lain dengan mudah.

B.  STRUKTUR DASAR HTML     Adapun susunan penulisan HTML, secara mudah mempunyai struktur sebagai berikut berikut:
     




semua data, baik itu tulisan,gambar,maupun suara akan ditampilkan disini.



Dalam HTML juga terdapat suatu komponen (tag) yang kegunaannya dapat dilihat dibawah ini:
      Tag Dasar

C.    MENGENAL TAG PADA HTML
1.      Tag HeadlineDalam model tag headline ada beberapa macam yang sering digunakan untuk memformat tampilan huruf dari kecil dan besar yang dimulai dari

sampai

.
Contoh penggunaan :

 
 
 
 

Heading h1

 

Heading  h2

 

Heading  h3

 

Heading  h4

 

Heading  h5

 

Heading  h6

  Heading  h7
 


2.      Tag ListTag ini biasanya digunakan untuk menampilkan informasi dalam bentuk daftar (list). Adapun jenis tag list ini ada dua yaitu format bullet (bulleted list) dan dalam bentuk nomor (ordered list). Biasanya ditambahkan dengan tag yang berbeda  yaitu dengan tag

dan
.
Contoh penggunaan :






Daftar Nama Dalam Bentuk Nomor 





1. Aryasatya
   
2. Bumi
   
3. Sasongko
   




  Daftar Nama Dalam Bentuk Bullet 





• Aryasatya
  
• Bumi
  
• Sasongko
  




3.      Tag hr Tag

---

digunakan untuk membuat garis batas horizontal dan sekaligus akan membentuk baris baru. 4.      Tag BrTag biasanya digunakan untuk penggantian baris baru. Sehingga kita dapat membuat baris baru bagi dokumen yang memerlukan pergantian baris. D.    MEMFORMAT FONT DAN MENEMPATKAN GAMBAR Dalam halaman web kita juga dapat melakukan pengaturan font dan gambar sehingga halaman web kita dapat terlihat lebih indah dan menarik. Penulisan perintah untuk memformat Font adalah sebagai berikut : , untuk atribut dapat berupa size, face maupun lainnya. Sedangkan penulisan perintah untuk menempatkan gambar adalah sebagai berikut dengan format yang sering digunakan adalah JPG, GIF dan PNG.    
Tag selalu diikuti dengan atribut src yang menunjukkan lokasi dan nama file grafik yang ingin kita tampilkan. URL (Universal Resources Locator) adalah alamat absolut dari file grafik tersebut. Atribut tambahan untuk instruksi adalah Align. Atribut ini  mengendalikan letak (alignment) teks yang berada di baris yang sama dengan grafik terhadap sisi vertikal gambar. Atribut Align ditulis dengan cara sebagai berikut :
    
     Anda dapat melihat atribut pada image seperti pada table dibawahi ini:
 
E.   MEMBUAT TABLE DENGAN HTML
       Keberadaan tabel sangatlah penting dalam menampilkan dokumen atau informasi yang memerlukan banyak kolom dan baris. Namun lebih dari itu, table dapat menjadi alat utama dalam HTML untuk mengendalikan tata letak dokumen pada web kita..
 
Anda dapat lebih memahami tag tag diatas dengan mencoba membuat table dengan kode HTML dibawah ini. Contoh penggunaan :      






















kolom1	kolom2	kolom3
isi baris 1 kolom 1	isi baris 1 kolom 2	isi baris 1 kolom 3
isi baris 2 kolom 1	isi baris 2 kolom 2	isi baris 2 kolom 3












isi baris 3 kolom 1

isi baris 3 kolom 2

isi baris 3 kolom 3





F.     MEMBUAT LINK
       Kelebihan HTML adalah dapat berpindah dari satu halaman ke halaman yang lain. Suatu link hypertext, dalam suatu dokumen Web, dapat berupa gambar atau teks. Bila Anda mengklikkan mouse pada link-link tersebut, browser akan membawa Anda menuju ke dokumen lain yang ditunjukkan oleh link tersebut. Beberapa model link yang dapat anda gunakan adalah seperti dibawah ini:  
1.   Model link Absolute       Model ini dapat ditulis sebagai berikut dengan intruksi:

2.   Model berpindah Halaman

3.   Model link satu halaman Dengan catatan nama_link telah didefinisikan terlebih dahulu dengan cara: G.    ELEMEN FORM
       Keberadaan form dalam HTML sangatlah penting, Form dalam HTML ditandai dengan tag
dan
. Sewaktu kita membuat elemen form, kita perlu menentukan bagaimana dan kemana data yang diisikan ke dalam form tersebut akan dikirimkan dari browser ke Web server. Hal ini dilakukan dengan pernyataan Action dan Method. Action menunjukkan lokasi tempat program CGI yang hendak dijalankan, sedangkan Method menunjukkan bagaimana informasi yang diisikan dalam form harus dikirimkan ke web server. method yang umum adalah get dan post.
1.    Elemen Textarea
       Textarea biasanya dipakai, bila kita menginginkan tempat bagi user web untuk memasukkan informasi yang panjangnya beberapa baris. perintah yang dipergunakan adalah : </span><br style="color: rgb(0, 0, 255);">       Name menyatakan nama data yang akan dimasukkan ke dalam textarea ini. cols dan rows berturut-turut menentukan banyak lebar textarea dan jumlah baris di dalam textarea. bila cols dan rows tidak ditentukan dalam kode textarea, maka nilai yang akan dipergunakan adalah <i>40 karakter lebar </i>dan <i>4 baris tinggi.</i><br></div><p style="text-align: left; clear: both;" class="separator"><b>2.    Elemen select<br></b></p><div style="text-align: justify;">       Terkadang Anda ingin menyediakan beberapa pilihan kepada user dokumen Web Anda sebagai masukan. <i><SELECT> </i>akan menampilkan suatu daftar yang dapat dipilih oleh user , baik dalam bentuk menu pop-up maupun menu gulung.<br></div><p style="text-align: left; clear: both;" class="separator"> </p><p style="text-align: left; clear: both;" class="separator"><b>3.      Elemen input<br></b>Adapun elemen input ini biasanya terdiri dari:<br>         <b>a.      Textbox<br></b>                  Elemen ini digunakan untuk membuat kotak text yang mampu menerima masukkan berupa string atau bisa juga text yang teleh dienkripsi.<br>                  Untuk model text biasa<br>                  Nama:  <i style="color: rgb(0, 0, 255);"><input type ="text" name=tnama size=xx><br></i>                  Dimana type yang digunakan yaitu berupa text<br>                  Untuk model text yang telah dienkripsi.<br>                  Password:<br>                  <span style="color: rgb(0, 0, 255);"><input type ="password" maxlenght=”6”></span><br style="color: rgb(0, 0, 255);">          <b>b.      Radio button<br></b>                   Elemen ini digunakan untuk menampilkan suatu daftar masukan berupa pilihan, dimana pengguna hanya diperbolehkan memilih satu dari pilihan yang ada.<br>Contoh:<br>                   jenis kelamin :<br>laki-laki<span style="color: rgb(0, 0, 255);"> <br></span></p><p style="text-align: left; clear: both;" class="separator"><span style="color: rgb(0, 0, 255);"><input type ="radio" name=jenkel value="laki-laki"></span><br style="color: rgb(0, 0, 255);">perempuan                   <br><span style="color: rgb(0, 0, 255);"><input type ="radio" name=jenkel value="perempuan"></span><br style="color: rgb(0, 0, 255);"><br><b>c.       Tombol<br></b>Elemen ini digunakan untuk menampilkan tombol, baik itu tombol Submit , maupun Reset.<br>            Contoh.<br><span style="color: rgb(0, 0, 255);">    <input type ="submit" value="kirim"></span><br style="color: rgb(0, 0, 255);"><span style="color: rgb(0, 0, 255);">    <input type ="reset" value="batal"></span></p><p style="text-align: left; clear: both;" class="separator"><br style="color: rgb(0, 0, 255);">1)      Submit digunakan untuk membuat tombol yang fungsinya untuk mengirimkan dara form agar diolah<br>2)      Reset digunakan untuk membuat tombol yang fungsinya untuk menghapus seluruh isian form yang telah diberikan<br> </p><p style="text-align: left; clear: both;" class="separator"><b>d.      Checkbox<br></b></p><div style="text-align: justify;">Serupa dengan tombol, Checkbox memungkinkan user dokumen untuk memilih suatu pilihan dari beberapa pilihan yang tersedia, bedanya Checkbox mengijinkan user memilih lebih dari satu pilihan. Perintah yang digunakan :<br></div><p style="text-align: left; clear: both;" class="separator"><span style="color: rgb(0, 0, 255);">    <input type=”checkbox”></span> <br style="color: rgb(0, 0, 255);"></p><p style="text-align: center; clear: both; color: rgb(0, 0, 255);" class="separator"> </p><p style="text-align: center; clear: both;" class="separator"><a style="margin-left: 1em; margin-right: 1em;" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhErNkg7Ix-WgbhPDrRiKOInCgig8JP-x271nsbQd7S0YvKQ0Bzlh-T3Ofx52IXzoGdw8NEgDYfjLx77sL3S2uTAtub6urwjT1XXnhJw4EADo90y_5j2RAeuMWACl-phsW_7yVSxIwTPeI/s1600/-1.bmp" imageanchor="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhErNkg7Ix-WgbhPDrRiKOInCgig8JP-x271nsbQd7S0YvKQ0Bzlh-T3Ofx52IXzoGdw8NEgDYfjLx77sL3S2uTAtub6urwjT1XXnhJw4EADo90y_5j2RAeuMWACl-phsW_7yVSxIwTPeI/s400/-1.bmp" style="" border="0" height="203" width="400"></a></p><p style="text-align: justify;"><font class="fullpost"><br></font></p>