DASAR-DASAR HTML

 Pengenalan HTML, Serta Cara menggunakan nya


Tag HTML

Dalam melakukan codingan pada html biasa nya kita hanya mengetahui tag yang digunakan secara umum seperti ( <html>, <head>, <title>, dan <body> )padahal masi banyak tag tag lain nya yang digunakan untuk memperbagus atau memaksimal kan hasil kodingan. 

<html> : Untuk menyatakan pada browser bahwa dokumen Web yang digunakan adalah html

<head>:  Untuk  kepala dari dokumen HTML

<body>:   Tag untuk menampilkan isi dokumen HTML

<title>:    Judul dari dokumen HTML yang ditampilkan pada judul jendela browser

<br>:   Tag untuk ganti baris

<p>: Membuat paragraf

<h1>: Header 1, untuk judul sebuah web

<b>:   Bold, tag html yang berfungsi untuk mempertebal teks

<i> : Italic, tag html yang berfungsi untuk membuat tampilan teks tercetak miring

<u>:  Underline, tag html yang berfungsi untuk membuat tampilan teks tercetak garis bawah

<pre>: Preformated Text, tag html berfungsi untuk menampilkan teks apa adanya sesuai text editor

<center>:  Tag html berfungsi untuk menampilkan teks dengan posisi horizontal ditengah

<font> :Tag html berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf

<hr>: Tag html berfungsi untuk membuat suatu garis horizontal

<ol>: Order List, tag html berfungsi untuk membuat nomor daftar urut, bisa berupa angka, huruf atau angka romawi.

<ul>:  Unorder List, tag html berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet)

<li>:    List Item, tag yang berada di elemen OL dan UL yang berbentuk list

<table>: Tag yang berfungsi untuk membuat suatu data yang terdiri dari baris dan kolom

<caption>…</caption>: Tag yang berfungsi untuk membuat judul dari tabel

<tr>:  Table Row, mendefiniskan baris pada tabel, dan tag ini harus ada dalam tag TABLE

<td>:  Table Data, terletak di dalam tag TR, yang berfungsi untuk memasukkan data-data

<img>:  Tag html untuk menampilkan gambar

<a>:  Tag html yang berfungsi untuk menghubungkan ke internal atau eksternal halaman web

<form>:   Tag html berfungsi untuk mendefiniskan form interakti

 1.Tabel

Tabel biasa kita gunakan untuk menyajikan data dalam bentuk kolom dan baris. Tabel di tulis dengan tag <table>. Sebuah table dibgagi menjadi berapa baris (dengan menggunakan tag <tr>), dan setiap baris dibagi menjadi beberapa kolom (dengan tag <td>). Td merupakan singkatan dari "table data" yang memiliki arti tempat menyimpan data (data cell). Cell data dapat berupa teks, image, list, paragraf, tabel,form,dll.

Disini saya akan mencontohkan cara untuk membuat tabel dan mewarnai background tabel pada website blogger

Contoh:

<table border="1">
    <tbody>
    <tr>
    <th>Nama</th>
    <th>Kelas</th>
    </tr>
    <tr>
    <td>Udin</td>
    <td>X</td>
    </tr>
    <tr>
    <td>Jamal</td>
    <td>XI</td>
    </tr>
    <tr>
    <td>Asep</td>
    <td>XII</td>
Hasil nya :
  Nama    Kelas  
  UdinX
  JamalXI
  AsepXII

Contoh:
<table border="1">
    <tbody>
    <tr>
    <th>Hari</th>
    <th colspan="3">Jadwal Sekolah</th>
    </tr>
    <tr>
    <td>Senin</td>
    <td>IPA</td>
    <td>IPS</td>
    <td>MTK</td>
    </tr>
    </tbody>
    </table>

 
Hasil nya :
HariJadwal Sekolah
SeninIPAIPSMTK

Contoh Tabel Berwarna :
Untuk membuat warna pada backgrounnd tabel kita tambahkan ( background-color )

Contoh:
<table border="1" style="background-color: blue;">
    <tbody>
    <tr>
    <th>Hari</th>
    <th colspan="3">Jadwal Sekolah</th>
    </tr>
    <tr>
    <td>Senin</td>
    <td>IPA</td>
    <td>IPS</td>
    <td>MTK</td>
    </tr>
    </tbody>
    </table>


Hasil nya :
HariJadwal Sekolah
SeninIPAIPSMTK


 2.List

List digunakan untuk mengelompokan suatu data baik berurutan  (ordered list) maupun yang tidak berurutan (unordered list).

A.Ordered List

Untuk membuat list yang berurutan menggunakan (ordered list), kita menggunakan tag pembuka <ol> dan penutup </ol>, sedangkan saat kita mendata setiap itemnya menggunakan tag <li>  sebagai pembuka dan </li> sebagai penutup.

Contoh:
Daftar hari:
<br>
<ol>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jumat</li>
<li>Sabtu</li>
<li>Minggu</li>



Hasil nya :

Daftar hari:
  1. Senin
  2. Selasa
  3. Rabu
  4. Kamis
  5. Jumat
  6. Sabtu
  7. Minggu


B.Unordered List

Untuk membuat list yang tidak berurutan nomer(unordered list), kita menggunakan tag pembuka <ul> dan penutup </ul>.sedangkan saat kita mendata setiap itemnya mennggunakan tag <li> sebagai pembuka dan </li> sebagai penutup.

Contoh :
Daftar hari:
<br>
<ul>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>khamis</li>
<li>Jummat</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>

Hasil nya :

Daftar hari:
  • Senin
  • Selasa
  • Rabu
  • khamis
  • Jummat
  • Sabtu
  • Minggu

 3.Hyperlink

HTML mempunyai kemampuan untuk memberikn link dari teks maupun gambar menuju dokumen atau bagian lain dalam suatu dokumen. Website akan menyorot teks atau gambar yang dikonfirmasi sebagai link dengan warna atau garis bawah untuk menunjukan kepada pembaca bahwa itu adalah hyperlink
HTML menggunakan tag <a> yang kita sebut sebagai tag anchor untuk membuat suatu link kepada dokumen lain

Contoh :

<a href="https://www.youtube.com">Link ke www.youtube.com</a>


Hasil nya :

Link ke www.youtube.com


Membuat Link Untuk Window Baru
Untuk membuat link untuk membuka window baru dapat ditambahkan atribut: target="_blank"


Contoh :
 Buka halaman <a href="http://www.youtube.com" target="_blank">www.youtube.com</a> di window baru



Hasil nya :

Buka halaman www.youtube.com di window baru


4.Form

Form HTML merupakan sebuah area atau tempat yang mengandung elemen-elemen form. Elemen form adalah sebuah elemen yang memungkinkan user untuk memasukkan informasi seperti text, textarea, menu drop-down, radio button, checkbox,dll. Sebuah form didefinisikan menggunakan tag <form>

Field Text
Contoh :

<form>
    Nama Depan : <input id="NamaDepan" name="NamaDepan" type="text" /><br />
    Nama Belakang :<input id="NamaBelakang" name="NamaBelakang" type="text" />
</form>
Hasil nya :

Nama Depan  :
Nama Belakang :

Field Text - Passworld
Contoh :
<form>
    Username : <input id="username=" name="Username" type="Username" />                <br />
    Password : <input id="Password" name="Password" type="password" />
    </form>

Hasil nya :
Username :
Password  :




5.Heading
Heading biasa kita gunakan untuk menandain judul content untuk menunjukan kepada pembca tingkat keberatian dari artikel yang kita buat

Contoh :
<body>
    <h1>CONTOH JUDUL</h1>
</body>

Hasil nya :

CONTOH JUDUL

6.Paragraf
Paragraf merupakan bagian yang memuat isi content yang dibuat. Setiap membuat paragraf kita harus memulai dengan memberi tag <p> dan di akhiri dengan </p>

Contoh :
<body>
    <p align="left">
         contoh pargraf rata kiri
         contoh pargraf rata kiri
         contoh pargraf rata kiri
        </p>
    <p align="center">
        contoh pargraf rata tengah
        contoh pargraf rata tengah
        contoh pargraf rata tengah
    </p>
    <p align="right">
        contoh pargraf rata kanan
        contoh pargraf rata kanan
        contoh pargraf rata kanan
        </p>
</body>

Hasil nya :

contoh pargraf rata kiri contoh pargraf rata kiri contoh pargraf rata kiri

contoh pargraf rata tengah contoh pargraf rata tengah contoh pargraf rata tengah

contoh pargraf rata kanan contoh pargraf rata kanan contoh pargraf rata kanan

7.Tombol
Button adalah salah satu elemen html yang sering di jumpai pada suatu website, elemen ini biasanya digunakan untuk submit form atau bisa juga untuk lainnya, Di dalam HTML 5, button dapat dibuat menggunakan tag <button> namun tidak hanya sebatas itu, tombol button juga bisa di buat menggunakan tag <input> dengan tipe submit atau reset.

Contoh :
<body>
    <button>TOMBOL</button>
    <a href="#">TOMBOL LINK</a>
    <input type="submit" value="TOMBOL SUBMIT">
    <input type="reset" value="TOMBOL RESET">
</body>
Hasil nya :
TOMBOL LINK  

8.Membuat huruf tebal
Menebalkan huruf atau biasa disebut (bold) kita menggunakan tag <b></b>
Contoh :
<body>
    <b>TULISAN INI TEBAL</b>
</body>
Hasil nya :

TULISAN INI TEBAL

8.Membuat huruf miring
Memiringkan huruf atau biasa disebut (italic) kita menggunakan tag <i></i>
Contoh :
<body>
    <i>TULISAN INI MIRING</i>
</body>
Hasil nya :

TULISAN INI MIRING

10.Menampilkan gambar
Contoh :

<img src="https://i.pinimg.com/originals/88/ea/9a/88ea9ae8bed4f7dfa02404cfecb7fac7.png">

Hasil nya :
 

11.Menampilkan vidio
Contoh :

<iframe
      width="560"
      height="305"
      src="https://www.youtube.com/embed/hTIMbpxlfsI"
      title="Hati Hati Donut Rasa Api"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>

Hasil nya :

Komentar