Tuesday, June 20, 2017

Kumpulan Coding Dasar HTML

Kumpulan Coding Dasar HTML- Setelah pada postingan sebelum nya saya sudah membahas artikel tentang Pengenalan Dasar HTML , sesuai janji saya akan posting tentang artikel kumpulan coding dasar html.

Pada postingan kali ini saya akan menjelaskan tentang beberapa coding dasar html, dari yang paling mudah hingga level menengah.
Oleh karena itu silahkan baca artikel ini dengan seksama karena ini akan sangat berguna untuk anda yang ingin meneruskan karir didunia IT.(baca juga Hal yang perlu disiapkan jika ingin terjun ke dunia IT dan program)

Kumpulan Coding Dasar HTML
coding html
Sebelum ke pembahasan kumpulan coding saya akan mengingatkan kembali anda tentang coding untuk membuat suatu paragraf dan untuk mengias nya.
yaitu dengan

</p align="letak paragraf" >Konten</p>
Keterangan:
 Letak paragraf yaitu penempatan paragraf (kiri,Tengah,kanan).
Isi dengan:
Kiri  ( align="left" )
Tengah ( align="center")
Kanan (align="right")

Untuk selanjutnya ke pengcodingan untuk menghias paragraf

<p align="letak Paragrad" ><font face="style tulisan" size="ukuran tulisan" color="warna tulisan"> Konten </font></p>
Keterangan:
face untuk jenis tulisan (contoh: face="times new romans")
size untuk ukuran tulisan (contoh: size="5")
color untuk warna tulisan (contoh: color="red")
 Jangan lupa tutup dengan </font></p>

Kembali kepembahasan utama, berikut dibawah saya share beberapa coding dasar HTML yang bisa anda praktekan untuk membuat sebuah web sederhana.

1. Coding Tabel 
<table widht="600" border="1" cellspacing="0" cellpadding="0"> <tr>
        <th>Nama Barang</th>
        <th>Harga</th>
</tr>
<tr>
<td>Tabel 1 </td>
<td align="center">Tabel 1 </td>
</tr>
<tr>
<td>Tabel 2</td>
<td align="center">Tabel 2 </td>
</tr>
<tr>
<td>Tabel 3</td>
<td align="center">Tabel 3 </td>
</tr>
<tr>
</tr>
</table>
Hasil :

Tabel Kiri         Tabel kanan    
Tabel 1 Tabel 1
Tabel 2 Tabel 2
Tabel 3 Tabel 3


2. Coding Input File
<body>
<font face="Courier New, Courier, mono">---- Tambahkan
File --- </font><br>
<form >
<input type="file" name="pic" accept="image/*">
</form>
</body>
Hasil:

---- Upload File  ---

3.  Coding Text Area
<body>
<p> Silahkan diisi pada teks area yang tersedia</p>
<p><textarea NAME="papantulis" COLS=40 ROWS=6>
</textarea></p>
</body>
Hasil:
 
Silahkan diisi pada teks area yang tersedia

 

4.  Coding Pilihan
<form>
<select name="Silahkan Pilih">
<option value="Pilihan ">pilihan 1</option>
<option value="pilihan 2">pilihan 2</option>
<option value="pilihan 4">pilihan 4</option>
<option value="pilihan 5">pilihan 5</option>
</select>

</form>
Hasil:

5.  Coding Pendaftaran

<table border="1">
<tr><td><form id="form1" name="form1" method="post"
action="">
<table width="354" align="center">
<tr>
<td height="24" colspan="3"
align="center"><B>PENDAFTARAN</td>
</tr>
<tr>
<td>Nama Pengguna</td>
<td align="center">:</td>
<td><label for="textfield"></label>
<input type="text" name="textfield" id="textfield"
/></td>
</tr>
<tr>
<td>Sandi</td>
<td align="center">:</td>
<td><label for="textfield2"></label>
<input type="text" name="textfield2" id="textfield2"
/></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td align="center">:</td>
<td><input type="checkbox" name="checkbox" id="checkbox"
Pemrograman Web
Page | 33
/>
<label for="checkbox">Pria
<input type="checkbox" name="checkbox2" id="checkbox2" />
 Wanita</label></td>
</tr>
<tr>
<td>Tanggal lahir</td>
<td align="center">:</td>
<td><label for="select"></label>
<select name="select" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<label for="select2"></label>
<select name="select2" id="select2">
<option>Januari</option>
<option>Februari</option>
<option>Maret</option>
<option>April</option>
<option>Mei</option>
<option>Juni</option>
<option>Juli</option>
<option>Agustus</option>
<option>September</option>
<option>Oktober</option>
<option>November</option>
<option>Desember</option>
</select>
<label for="select3"></label>
<select name="select3" id="select3">
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
</select></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
<td><input type="submit" name="button" id="button"
Pemrograman Web
Page | 35
value="Simpan" />
<input type="reset" name="button2" id="button2"
value="Batal" /></td>
</tr>
</table>
</td></tr></table>
</form>
Hasil:

PENDAFTARAN
Nama Pengguna :
Sandi :
Jenis Kelamin :
Tanggal lahir :

6. Coding Input Text
<form>
Nama : <input type="text" name="nama"><br>
Sekolah : <input type="text" name="Lain nya">
</form>
Hasil:
Nama :
Lain nya :
7. Coding Border 
<form>
Nama : <input type="text" name="nama"><br>
Sekolah : <input type="text" name="Lain nya">
</form>
Hasil:
 

Border Coding


7. Coding Tulisan Kecil
<sup>@test</sup>
Hasil:

@test

Untuk Coding lain nya akan saya bahas di lain kesempatan.
Jika ada masukan,saran, ataupun ada yang ingin ditanyakan silahkan berkomentar dibawah.

jangan lupa Share dan ikuti terus blog ini.
Terima kasih.. 

Dilarang komentar SARA dan menyinggung perasaan orang lain.
Gunakan bahasa yang sopan!!!
Dilarang berkomentar dengan kata-kata kasar!
EmoticonEmoticon