Pengertian HTML

Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halamn web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium(W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

 

Upload pada HTML

Pendahuluan

Membuat Form Upload File.
cara membuat form upload file,kita membutuhkan bantuan HTML dan PHP.
HTML akan kita gunakan untuk membuat form uploadnya,
sedangkan PHP akan kita gunakan untuk proses penyimpanan file yang diupload oleh user.

Kita akan menggunakan variabel $_FILES untuk menerima data dari file yang diupload oleh user.
Kita akan mencoba membuat sebuah form upload gambar.

Contoh Script

<!DOCTYPE html>
<html>
<head>
<title>Membuat Check Box</title>
</head>
<body>
<h1>Upload File </h1>
<form action=”” method=”post” enctype=”multipart/form-data”>
<input type=”file” name=”fileku” />
<input type=”submit” name=”submit” value=”Kirim Data” />
</form>
</body>
</html>

Hasil Praktikum

Kesimpulan

Demikian tutorial ini cara membuat upload gambar di html, semoga bermanfaat, dan harapan penulis, untuk latihan
tidak dengan copy/paste, ketiklah setiap kode diatas agar terbiasa dan hafal dengan sendirinya.

 

Membuat Check Box pada HTML

Pendahuluan

Checkbox adalah jenis inputan yang cara memilihnya adalah dengan cara mencentang, sehingga memungkinkan user dapat
memilih lebih dari satu pilihan.Inputan jenis checkbox ini dapat anda gunakan untuk membuat inputan yang memperbolehkan
user memilih lebih dari satu contohnya jenis kemampuan.
untuk penjelasan dari skripnya adalah sebagai berikut :

Penjelasan:
– type=’checkbox’ itu adalah deklarasi agar inputan ini berbentuk checkbox
– attribute name digunakan untuk memberikan nama pada inputan ini ketika nanti inputan form di proses.
– attribute value digunakan untuk memberikan nilai pada inputan sehingga ketika user mencentang maka nilai yang dikirimkan adalah value dari attribute ini.

Contoh Script

<body>
<h1>Hobi Anda</h1>
<form method=”post” action=””>
<input type=”checkbox” name=”hobi” value=”memancing” /> Memancing
<br />
<input type=”checkbox” name=”hobi” value=”main game” /> Main game
<br />
<input type=”checkbox” name=”hobi” value=”nonton film” /> Nonton Film
<br />
<input type=”checkbox” name=”hobi” value=”travelling” /> Travelling
<br />
<br />
<input type=”submit” name=”submit” value=”Kirim Data” />
</form>
</body>
</html>

Hasil Praktikum

Kesimpulan

Demikian tutorial ini cara membuat check box di html, semoga bermanfaat, dan harapan penulis, untuk latihan
tidak dengan copy/paste, ketiklah setiap kode diatas agar terbiasa dan hafal dengan sendirinya.

 

Combo Box pada HTML

Pendahuluan

Tag yang digunakan pada combo box itu adalah <select>, dan mempunyai elemen yang harus selalu ada di antara <select> dan </select>,yaitu < option> memiliki tag penutup yaitu </ option> dan mempunyai beberapa attribut diantaranya :
– name, untuk penamaan pada combo box apabila kita membuat form pekerjaan, kita bisa memberikan nama “pekerjaan”.
Biasa nya akan digunakan untuk di panggil ke halaman lain.
– value, memberikan nama pada tiap pekerjaan misal pada dosen maka isinya “dosen”, pada dokter maka isinya “dokter”, dll.
Ini biasanya untuk tingkat lanjut akan digunakan untuk dipanggil serta ditampilkan dihalaman lain.

Contoh Script

<body>
<h1>Pekerjaan Anda</h1>
<form method=”post” action=””>
<select name=”select”>
<option value=”dosen”>Dosen</option>
<option value=”dokter”>Dokter</option>
<option value=”petani”>Petani</option>
<option value=”karyawan”>Karyawan</option>
</select>
<input type=”submit” name=”submit” value=”Kirim Data” />
</form>
</body>

Hasil Praktikum

Kesimpulan

Demikian tutorial ini cara membuat combo box di html, semoga bermanfaat, dan harapan penulis, untuk latihan
tidak dengan copy/paste, ketiklah setiap kode diatas agar terbiasa dan hafal dengan sendirinya.

Login pada HTML

Pendahuluan

Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form> dan diakhiri dengan </form>.
Tag form akan membutuhkan beberapa atribut untuk dapat berfungsi dengan seharusnya.
Atribut pertama adalah action, yang berfungsi untuk menjelaskan kemana data form akan dikirimkan.
Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP yang digunakan untuk memproses isi data form.
Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana data isian form akan
dikirim oleh web browser. Nilai dari atribut method ini bisa berupa get atau post.

Contoh Script

<body>
<form method=”post” action=”form.html”>
First name:
<br/>
<input type=”text” name=”firstname” value=”Yolanda”>
<br />
Last name:
<br/>
<input type=”text” name=”lastname” value=”Hutapea”>
<br/>
<br />
<input type=”submit” value=”Submit”>
</form>
<p>
Jika anda submit data melalui tombol submit maka data akan
ditampilkan pada halaman “form.html”.
</p>
</body>

Hasil Praktikum

Kesimpulan

Demikian tutorial ini cara membuat login di html, semoga bermanfaat, dan harapan penulis, untuk latihan
tidak dengan copy/paste, ketiklah setiap kode diatas agar terbiasa dan hafal dengan sendirinya.

 

Memformat Tabel pada HTML

Pendahuluan

Perhatikan bahwa pada tag<table>kita memberikan atribut border. Atribut borderdigunakan untuk memberikan nilai garis tepi dari tabel. Nilai ini dalam ukuran pixel.border=”1”, berarti kita mengistruksikan kepada web browser bahwa tabel tersebutakan memiliki garis tepi sebesar 1 pixel. Jika tidak ditambahkan, secara default tabel tidak memiliki garis tepi.Format dan Sintaks untuk Membuat TabelPada umumnya, untuk membuat suatu tabel digunakan tag<table>

Tag<table>mempunyai tag turunan, yaitu:

<tr> – yang berfungsi untuk membuat suatu baris pada tabel.
<td> – yang berfungsi untuk membuat suatu kolom pada tabel.
<th> – yang berfungsi sebagai kolom header atau judul pada tabel.
Tabel Pada HTML 5
Pada HTML 5 tidak ada elemen baru terkait tabel, namun banyak atribut penting
pada elemen yang sudah tidak didukung, diantaranya: atribut width, height, valign, align, dan bgcolor

Sehingga jika ingin menggunakan atribut tersebut, HTML 5 menyarankan untuk menuliskannya menggunakan model style/CSS.

 

Contoh Script

<h1>Harga Buah</h1>
<table border=”2″ align=”center” width=”48%”>
<tr bgcolor=”#b2dfdb”>
<th>Nama Buah</th>
<th>Harga/Kg</th>
</tr>
<tr>
<td bgcolor=”#eeeeee”>Apel</td>
<td bgcolor=”#eeeeee”>Rp. 8.000,-</td>
</tr>
<tr>
<td bgcolor=”#eeeeee”>Jeruk</td>
<td bgcolor=”#eeeeee”>Rp. 7.500,-</td>
</tr>
<tr>
<td bgcolor=”#eeeeee”>Klengkeng</td>
<td bgcolor=”#eeeeee”>Rp. 10.000,-</td>
</tr>
<tr>
<td bgcolor=”#eeeeee”>Anggur</td>
<td bgcolor=”#eeeeee”>Rp. 12.000,-</td>
</tr>
</table>

Hasil Praktikum

Kesimpulan

Pada tutorial kali ini Anda sudah belajar dan menguasai pembuatan format tabel
Demikian tutorial ini cara membuat tabel di html, semoga bermanfaat, dan harapan penulis, untuk latihan
tidak dengan copy/paste, ketiklah setiap kode diatas agar terbiasa dan hafal dengan sendirinya.

 

Membuat Tabel pada HTML

Pendahuluan

Tabel merupakan salah satu elemen penting untuk menampilkan data, meskipun membuat tabel relatif mudah,
terdapat hal-hal penting yang perlu untuk diketahui, untuk itu pada kesempatan kali ini kita
akan membahas lengkap bagaimana cara membuat tabel dengan HTML dan CSS.
Untuk membuat table pada halaman HTML kita harus menggunakan tag < table>…</ table>.
Elemen pada table berisi properti

…untuk menentukan baris (table row) atau membuat
baris baru yang di dalamnya terdapat property

…untuk menampilkan data pada setiap
sel table (table data) atau untuk membuat kolom baru.
Misalnya agar list dimulai dari huruf C, dimulai dari angka 2, dan sebagainya.
Nilai dari atribut start ini berupa angka.

Contoh Script

<body>
<h1>Harga Buah</h1>
<table>
<tr>
<th>Nama Buah</th>
<th>Harga/Kg</th>
</tr>
<tr>
<td>Apel</td><td>Rp. 8.000,-</td>
</tr>
<tr>
<td>Jeruk</td><td>Rp. 7.500,-</td>
</tr>
<tr>
<td>Klengkeng</td><td>Rp. 10.000,-</td>
</tr>
<tr>
<td>Anggur</td><td>Rp. 12.000,-</td>
</tr>
</table>
</body>

Hasil Praktikum

Kesimpulan

Pada tutorial kali ini Anda sudah belajar dan menguasai pembuatan tabel
Demikian tutorial ini cara membuat tabel di html, semoga bermanfaat, dan harapan penulis, untuk latihan
tidak dengan copy/paste, ketiklah setiap kode diatas agar terbiasa dan hafal dengan sendirinya.

 


HTML tutorial

 

Membuat Ordered List pada HTML

 

Pendahuluan

* Ordered List
Ordered list digunakan membuat daftar dimana setiap daftarnya memiliki angka atau huruf yang berututan.
Ordered list di mulai dengan tag <OL> …</ OL>, dan setiap bagiannya menggunakan tag < LI> tampa tag penutup (</ LI> ).

Berikut adalah TYPE atribut untuk Ordered list.

Atribut Fungsi

Type = 1 Daftar beruturan dengan menggunakan angka (1,2,3…)
Type = I Daftar berututan dengan menggunakan anggka romawi (I ,II ,III…)
Type = i Daftar yang berututan menggunakan angka romawi kecil (i, ii, iii …)
Type = A Daftar yang berurutan menggunakan abjad besar (A,B,C …)
Type = a Daftar yang berurutan menggunakan abjad kecil (a,b,c …)

Contoh Script

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF=8″>
<title> Ordered List </title>
</head>
<body>
<h1> Cara Memasak Mi Instan </h1>
<ol>
<li>Masukkan 2 gelas belimbing air ke dalam panci</li>
<li>Masukkan mie instan ke dalam panci</li>
<li>Rebus mie instan selama kurang lebih 3 menit</li>
<li>Masukkan bumbu dan minyak</li>
<li>Siapkan mangkuk</li>
<li>Tuangkan mie ke dalam mangkuk</li>
</ol>
</body>
</html>

Hasil Praktikum

Kesimpulan

Demikian tutorial ini cara membuat ordered list di html, semoga bermanfaat, dan harapan penulis, untuk latihan
tidak dengan copy/paste, ketiklah setiap kode diatas agar terbiasa dan hafal dengan sendirinya.

 

Membuat Unordered List pada HTML

Pendahuluan

Unordered List digunakan untuk daftar yang di sajikan tanpa nomor urut, melainkan dengan tanda dengan
secara default dengan tanda bulatan. Tanda ini dirubah dengan merubah nilai atribut TYPE untuk unordered
list. nilai – nilai atribut dapat dilihat di tabel yang di atas tadi. Unordered list dimulai dengan tag <UL>…</ UL>,
dan setiap bagiannya menggunakan tag <LI> tampa tag penutup ( </ LI> ).

Berikut adalah TYPE atribut untuk Unordered list.

Atribut Fungsi

Type = circle Daftar dengan menggunakan tanda lingkaran
Type = square Daftar dengan menggunakan tanda kotak
Type = disk Daftar dengan menggunakan tanda cakram

Contoh Script

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF=8″>
<title> Unordered List </title>
</head>
<body>
<ul>
<li>Jeruk</li>
<li>Apel</li>
<li>Duku</li>
<li>Stroberi</li>
<li>Nanas</li>
</ul>
</body>
</html>

 

Hasil Praktikum

Kesimpulan

Demikian tutorial ini cara membuat unorder list di html, semoga bermanfaat, dan harapan penulis, untuk latihan tidak
dengan copy/paste, ketiklah setiap kode diatas agar terbiasa dan hafal dengan sendirinya.

Membuat Anchor pada HTML

Pendahuluan

Perintah anchor <a> yang merupakan singkatan cari anchor (jangkar) digunakan untuk membuat suatu link. Untuk membuat link ke dokumen html lain digunakan perintah <a href = “nama_dokumen”> Teks pada browser < /a> (href adalah singkatan dari hypertext reference).
Anda juga bisa membuat link dalam sebuah dokumen html. Untuk itu perlu dipersiapkan nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut
name pada tag<a>. Misalnya <a name = “php”>< /a>. Cara melakukan link ke bagian tersebut ^adalah <a href = “nama_dokumen”>teks pada browser< /a>, untuk lebih jelasnya ketiklah kode dibawah ini simpan dengan nama link.html.

Contoh Script

<body>
<h1>
<a name=”daftar”>Daftar Isi</a>
</h1>
<p>
<a href=”#hal1″>Halaman 1</a><br />
<a href=”#hal2″>Halaman 2</a><br />
<a href=”#hal3″>Halaman 3</a><br />
</p>
<h1>
<a name=”#hal1″>Halaman 1</a>
</h1>
<p>
Sebuah situs web tidak bisa berdiri sendiri.Setiap situs web harus
terintegrasi dengan suatu link.Dengan adanya link, maka setiap halaman
web akan mudah dijelajahi oleh pengunjung. Di samping itu, dengan adanya
link maka pengunjung bisa menjelajahi situs lain dengan referensi yang berbeda.
Oleh karena itu, link merupakan suatu keharusan dalam sebuah situs web.
Fungsi dari link adalah menghubungkan satu halaman web ke halaman lain
(baik dalam situs yang sama maupun tidak). Cara mengaktifkan link hanya
dengan mengklik suatu objek (dapat berupa teks maupun gambar, bisa juga
dalam bentuk komponen form).
</p>
<p>
<a href=”#daftar”>Kembali ke Daftar Isi</a>
</p>
<h1>
<a name=”#hal2″>Halaman 2</a>
</h1>
<p>
Pada contoh ini, dimisalkan ada sebuah daftar isi yang terdiri dari 3
buah item yaitu halama 1, halaman 2 dan halaman 3. Adapun dari skenario
dari contoh ini adalah apabila salah satu item tersebut diklik (mis. Halaman 1)
maka browser akan memunculkan konten halaman 1. Sedangkan halam 1 terletak
dalam halaman yang sama dengan daftar isi tersebut. Setelah dibuat nama anchor,
langkah selanjutnya adalah membuat link ke anchor yang telah dibuat dengan
cara menulis perintah Nama file dituliskan jika anchor terletak pada halaman
yang berbeda dengan linknya. Sedangkan jika anchor terletak pada halaman yang sama,
cukup dituliskan #nama anchornya saja
</p>
<p>
<a href=”#daftar”>Kembali ke Daftar Isi </a>
</p>
<h1>
<a name=”hal3″>Halaman 3</a>
</h1>
<p>
Dalam desain web, tabel biasanya digunakan untuk mengatur tampilan data supaya

bagus dipandang. Selain itu tabel dapat pula digunakan untuk mengatur layout halaman web.
Sebuah tabel terdiri dari baris dan kolom. Dalam tabel terdapat pula sel yang
merupakan perpotongan baris dan kolom. Data yang akan ditampilkan dalam tabel
diletakkan dalam sel tersebut. Untuk memulai membuat tabel dalam halaman web pertama
kali harus diberikan tag pombuka dan diakhiri dengan. Di antara tag tersebut dapat
Anda masukan tag untuk membuat baris dan kolomnya. Tag yang menyatakan baris dalam
tabel ditandai dengan tr dan diakhiri dengan tr. Sedangkan sel ditandai dengan td
dan diakhiri dengan td. Tag sel harus diletakkan dalam tag baris. Sedangkan untuk nama
kolom pada tabel dunakan tag th dan diakhiri dengan th. Penulisan nama kolom ini juga
harus dalam baris tr dan tr.
</p>
<p>
<a href=”#daftar”>Kembali ke Daftar Isi</a>
</p>
</body>

 

Hasil Praktikum

Kesimpulan

Ketika kita membuat link, baik itu ketika kita membangun backlink berkualitas maupun membuat internal
linking ke artikel lama yang kita miliki, sebaiknya pilih artikel yang relevan dan gunakan anchor text
dan title link dengan kata kunci yang kita targetkan untuk artikel lama kita tersebut.Dengan demikian
popularitas artikel lama yang kita targetkan dengan kata kunci tertentu akan semakin baik dimata mesin pencari.