Saturday, September 10, 2016

Latihan Membuat Halaman HTML

Halaman HTML digunakan untuk menampilkan content - content yang ingin ditampilakn. Untuk membuat halaman HTML, dapat dilakukan dengan langkah - langkah berikut :

  • Buatlah kerangka halaman dengan menuliskan format dasar HTML, seperti berikut pada lembar notepad dan simpan dengan nama "test.html"

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/charset=utf-8">
<title>LATIHAN MEMBUAT HALAMAN HTML</title>
</head>

<body>
</body>
</html>


  • Selanjutnya, ketik kode berikut diantara kode <body>isi</body> pada halaman test.html untuk membuat heading.
<h1>Selamat Datang Di Halaman HTML Saya</h1>

  • Buat sebuah paragraf dengan cara mengetikkan kode berikut dibawah heading yang anda buat sebelumnya.
<p>Ini adalah Halaman Pertama Saya di HTML</p>
<p>Ini adalah Biodata Pribadi Saya</p>

  • Seterusnya tuliskan script berikut dibawah paragraf yang anda buat untuk biodata.
<ul>
<li>Nama: "Nama Anda"</li>
<li>Alamat: "Alamat Anda</li>
<li>Hobby: "Hobby Anda"</li>
</ul>
  • Simpan hasil pembuatan halaman dan lihat hasilnya dengan menggunakan browser kesukaan anda misalnya dengan mozilla firefox, google chrome dll. Double click pada halaman test.html yang anda save tadi, Hasilnya akan terlihat seperti gambar dibawah ini.

Tampilan halaman test.html

Posted by at No comments:
Labels:

Dasar - Dasar HTML

Oke lanjut gan...

Dasar HTML adalah pembelajaran awal tentang hal - hal yang umum dan biasa digunakan dalam pembuatan halaman HTML. Dan ini adalah beberapa pembahasan tentang dasar HTML :

  • Heading HTML
Berikut  adalah kode penulisan heading dalam HTML,

<h1>Isi text</h1>
<h2>Isi text</h2>
<h3>Isi text</h3>
<h4>Isi text</h4>

  • Paragraf HTML
Membuat paragraf dalam HTML dapat dituliskan dengan kode berikut,

<p>Isi paragraf 1</>
<p>Isi paragraf 2</>

  • Link HTML
Link HTML adalah sebuah tombol dalam bentuk tulisan untuk mengarahkan user ke halaman HTML lain. Berikut penulisannya,

< a href="alamat tujuan link" title="keterangan link">Judul link</a>

  • Link Gambar
Link gambar adalah link yang ditujukan ke halaman HTML yang ditampilkan dalam bentuk gambar.

<a href="alamat tujuan link" title="keterangan link"><img src="alamat penyimpanan gambar"></a>

  • Link E-Mail
Link e-mail adalah link untuk mengirim e-mail.

<a href="mailto:alamat e-mail">Tampilan text link</a>

  • List HTML
Untuk membuat list berupa simbol, dapat dilakukan dengan cara menuliskan kode berikut ini,

<ul>
<li>list pertama</li>
<li>list kedua</li>
</ul>

Untuk membuat list angka dapat dilakukan dengan cara berikut ini :

<ol>
<li>List pertama</li>
<li>List kedua</li>
</ol>

  • Gambar
Untuk menampilkan gambar, dapat dilakukan dengan kode berikut.

<img src="alamat penyimpanan gambar" title="keterangan gambar" width="lebar" height="tinggi'>

  • Underline, Italic, Bold
Untuk membuat tulisan dalam bentuk underline, Italic, Bold dapat dilakukan dengan kode berikut:

<u>Underline</u>
<i>Italic</i>
<b>Bold</b>

  • Ganti baris
Untuk membuat tulisan yang berganti baris, dapat dilakukan dengan kode berikut.

<p>Baris pertama<br/> Baris kedua</p>

  • HTML Input
Ada beberapa tipe HTML input, antara lain file, hidden, checkbox, text, e-mail, password, radio, dan lain - lain. Untuk membuatnya gunakan kode berikut.

<input type="tipe inputan" name="nama input" value="nilai" title="keterangan">
Ex; <input type="file" name="upload" value="upload" title="pilih gambar untuk diunggah">

  • HTML button
Ada beberapa jenis tombol dalam HTML, yaitu button, submit, reset, dan tombol. Pada HTml, tombol tersebut dapat ditulis dengan kode berikut.

<button type="tipe tombol" name="nama tombol">namatampilan</button>

atau dapat ditulis dengan kode berikut.

<input type="tipe tombol" name="nama tombol" value="nilai/ nama tampilan">

  • Textarea
Untuk membuat textarea, dapat dilakukan dengan menuliskan kode berikut.

<textarea name="nama textarea" rows="baris" cols="kolom"> nilai awal textarea</textarea>

  • Align
Perataan dapat dilakukan dengan menuliskan kode berikut.

<center>rata tengah</center>
<left>rata kiri</left>
<right>rata kanan</right>

  • Comment
Comment adalah script yang tidak terlihat oleh user. Comment digunakan untuk menandai script supaya mudah dimengerti atau mudah diingat oleh programmer tentang kegunaan script tersebut.

<!--isi komentar-->
Tulis script disini

  • Div tag
Div tag adalah tag untuk membuat ruang berisi konten HTML, biasanya div tag digunakan bersamaan dengan CSS untuk mengatur style.

<div id="an">Content for id "an" Goes Here</div>
<div class="an">Content for class "an" Goes Here</div>



Next....( Mencoba Membuat Halaman HTML)


Posted by at No comments:
Labels:

Thursday, September 8, 2016

Pengenalan HTML

Oke gan langsung aja....

HTML atau Hypertext Markup Language merupakan bahasa pemrograman yang biasa digunakan untuk membuat aplikasi berbasis web. Bahasa pemrograman ini ditulis dalam berkas format ASCII, supaya dapat menghasilkan tampilan wujud yang terintegrasi.

HTML adalah bahasa pemrograman web yang umum dan biasa digunakan serta mudah dipelajari. Berikut ini adalah format dasar penulisan HTML :

<!DOCTYPE HTML>
<html>
     <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Judul Halaman</title>
      </head>

<body>

         "Isi Halaman"

</body>
</html>

Nb: Perhatikan tanda disetiap awal perintah  < > harus disertai dengan tanda akhir perintah </ >               untuk menutup content perintah tersebut. 

Selanjutnya... ( belajar Dasar - Dasar HTML) 


Posted by at No comments:
Labels:
Subscribe to: Comments (Atom)