Saturday, 11 October 2014

Latihan Dasar Membuat Blog Dengan HTML



Oke teman-teman semua kita akan belajar dasar-dasar HTML, siapkan makanan ya biar bisa dengan santai belajarnya J

HTML (hypertext markup language) merupakan suatu format yang digunakan dalam pembuatan. dokumen dan aplikasi yang berjalan di halaman web. HTML dirancang untuk digunakan tanpa tergantung pada suatu platform tertentu. Dokumen HTML adalah suatu dokumen teks biasa dan disebut markup language karena menggunakan tanda-tanda tertentu yang disebut tag untuk mengatur bagaimana suatu dokumen ditampilkan pada browser.

Tag HTML adalah kata kunci (nama tag) dikelilingi oleh kurung sudut:

• Tag HTML umumnya selalu berpasangan seperti <p> dan </ p>, <body> dan </body>

• Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir.

• Tag akhir ditulis seperti tag awal, tetapi dengan sebuah garis miring sebelum nama tag.

HTML dapat diedit dengan menggunakan editor HTML profesional seperti:

• Adobe Dreamweaver

• Microsoft Expression Web

• CoffeeCup HTML Editor


Bentuk HTML standart pada umumnya adalah

<html>
      <head>
           <title>judul website</title>
      </head>
      <body>
berisi apapun yang akan di tampilkan dalam halaman web, misalnya teks, gambar,video,lagu,atau apapun.
     </body>
</html>


Mari kita belajar tag-tag dasar dalam HTML


-      HTML untuk paragrap awal adalah <p>TEXT</p>

 <html>
      <head>
           <title>judul website</title>
      </head>
      <body>

          <p> TEXT </p>

     </body>
</html>



HTML untuk font adalah <font> TEXT </font>

Dalam font terdapat fungsi-fungsi lain yaitu jenis font,ukuran font,dan warna font.

Heading untuk memperbeas ukuran huruf = <hn>TEXT</hn> (n=1-7)

HTML untuk jenis font yaitu = <p><font face=”jenis font”>TEXT</font></p>

 Untuk jenis font sendiri sama dengan si Microsoft power point.

HTML untuk ukuran font yaitu <p><font size=”1-7”>TEXT</font></p>

Untuk ukuran font sendiri hanya ada 1-7 saja

HTML untuk warna font adalah <p><font color=”warna font”>TEXT</font></p>


Selain font-font diatas masih banyak fungsi font lain seperti:

Tebal atau bold : <b>TEXT</p>

Miring atau italic: <i>TEXT</i>

Garis bawah/underline : <u>TEXT</u>

Membuat paragraph baru : <br>

Text berpangkat : <sup>TEXT</sup>

Text rendah                           : <sub>TEXT</sub>



Dalam dunia website juga di kenal istilah bullet and numbering

-       Bullet

Untuk menggunakan bullet dalam web di perlukan tag <ul>


<html>
      <head>
           <title>judul website</title>
      </head>
      <body>

          <ul>

             <li>TEXT</li>

          </ul>

     </body>
</html>

Selain itu macam macam tipe bullet adalah
style="list-style-type=disc">
style="list-style-type=square">
style="list-style-type=circle">
style="list-style-type=none"


-      Numbering

Sedangkan untuk menggunakan numbering dalam web di perlukan tag <ol>

<html>
      <head>
           <title>judul website</title>
      </head>
      <body>

          <ol>

             <li>TEXT</li>

          </ol>

     </body>
</html>


Selain itu macam macam tipe bullet adalah

type="1"
type="a"
type="A"
type="i"
type="I"


membuat link dan memasukan gambar dalam halaman web


Membuat link dalam web

Dalam membeuat link selalu diawali dengan huruf (a) kecil diikuti dengan (href)

<a href="http://www.smikom.ac.id"> TEXT </a>

Jadi tampilan formatnya :
<html>
      <head>
           <title>judul website</title>
      </head>
      <body>

          <a href="http://www.smikom.ac.id"> TEXT </a>

     </body>
</html>
hasilnya www.amikom.ac.id



Menambahkan gambar kedalam web

Kita juga bisa menambahkan gambar berupa animasi kedalam website kita caranya adalah

<img src=”masukan link gambar”width=”lebar”height=”tinggi”>

<html>
      <head>
           <title>judul website</title>
      </head>
      <body>

          <img src=”masukan link gambar”width=”lebar”height=”tinggi”>

     </body>
</html>


Menambahkan/membuat kolom dan baris dalam web


untuk menambahkan kolom maka tag yang di gunakan adalah <tr> (tabel row)

untuk menambahkan baris maka tag yang di gunakan adalah <td> (tabel data)


Contoh :<html>
<head> tugas pertama

</head>
<body>
<p>membuat tabel</p>
<table>
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
   </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
   </tr>
</table>
</body>
</html>


Membuat animasi kedalam web

Sangat banyak sekali cara menampilkan animasi ke dalam website kita. Salah satunya adalah

-       Text dari kanan ke kiri

Kodenya adalah <marquee direction =”left”>TEXT</marquee>

Untuk directionnya bisa dig anti dengan “right”,”up”,”down”.


-       Untuk membeuat text zigzag

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">TEXT</marquee></marquee>


Dan masih banyak lagi silahkan sebagai referensi lihat website ini http://www.w3schools.com/

di

1 comment: