Langsung ke konten utama

Memformat Dokumen HTML

Dalam HTML terdapat beberapa tag yang dapat digunakan untuk memformat dokumen.Tag-tag tersebut diantaranya adalah :

1.Tag <br>,digunakan untuk pindah ke baris baru 
Tidak memerlukan penutup </br> atau bisa di tulis langsung <br/>

2.Tag<p>,digunakan untuk pindah alinea atau membuat paragraf baru.Tag ini bisa diberi akhiran </p> tapi juga bisa tidak diberi.Dalam tag ini juga bisa digunakan untuk mengatur perataan kiri,tengah,kanan dan kiri-kanan,yaitu dengan attribut ALIGN.Atribut align mempunyai nilai : LEFT,RIGHT,CENTER dan JUSTIFY

3.No Line Break: <nobr> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila garis pertama sudah terlalu panjang.

4.Tag <hr> ,digunakan untuk membuat garis horisontal.
Atributnya :

 ATRIBUT FUNGSI
 align Merupakan posisi vertikal garis pemisah.Nilainya adalah LEFT,RIGHT,atau CENTER
 width Digunakan untuk menentukan ketebalan garis
 size Digunakan untuk menentukan panjang garis dalam satual pixel
 noshade Menonaktifkan efek tiga dimensi
 color Menentukan warna garis batas

Contoh (save dengan nama horisontal.html) :

 <html>
<head>
            <tutor>Membuat Garis Horisontal</title>
</head>
<body bgcolor="fffccc">
            <font size="1" Face="Tahoma" color="blue">
Ahlan Wasahlan</font>
            <hr size="1" width="150" align="left">
            <h1><center>www.yadull.blogspot.com</h1>
            <hr size=5 align=center noshade>
</body>
</html>

5.Tag <hn>. <Hn>.. </Hn>
Digunakan untuk mengatur ukuran huruf pada header."n" mempunyai nilai antara 1 - 6 atau antara <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.

Contoh (save dengan nama hn.html) :

 <html>
<head>
      <title>Membuat Heading Dokumen HTML</title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
       <h1>Heading Tingkat 1 </h1>
       <h2>Heading Tingkat 2 </h2>
       <h3>Heading Tingkat 3 </h3>
       <h4>Heading Tingkat 4 </h4>
       <h5>Heading Tingkat 5 </h5>
       <h6>Heading Tingkat 6 </h6>
</body>
</html>
       

6.Tag <pre> ,membuat tampilan dokumen HTML pada browser sama dengan tampilan pada teks editor.Dengan tag <pre> ,maka tag <p> dan tag <br> jadi tidak diperlukan lagi.

Contoh (save dengan nama free.html) :

 <html>
<head>
      <title> Web Sederhana </title>
</head>
<body>
       <pre>
       Tampilan ini sama dengan tampilan di teks 
       editor.Klasemen
       Team      Main      Menang      Seri Kalah
       ====================================
       Team  A  3             2          1      0
       Team  B  3             2          0      1
       Team  C  3             1          1      1
       ====================================
       Kode program : for i = 1 to 10
       For j = 1 to 5
       A (i,j)=i*j
       next
       next
       </pre>
</body>
</html>

7.Tag <center> ,Teks rata tengah

Contoh (save dengan nama center.html) :

 <html>
<head>
      <title> Web Sederhana </title>
</head>
<body>
      <center>
      Teks ini rata tengah 
      </center>
</body>
</html>

8. LIST
Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga berupa tanda-tanda khusus/symbol.
Ada dua macam daftar,yaitu UNORDERED list (UI) dan ORDERED list (OI) ,
  • <UI> adalah tag untuk membuat daftar item tidak berurut
  •  <Li> adalah tag untuk membuat item dari daftar urutan
          Disc                 :Bulatan hitam (•)
          Square            :Kotak 
          Circle              :Bulatan kosong (°)

Contoh (save dengan nama UNORDERED.html) :

 <html>
<head>
           <title>Membuat Undordered List</title>
</head>
<body>
       <b><font size="3" face="Tahoma" color="blue">
       Jurusan TIK yang ada di SMK INFORMATIKA ada
       3 Program studi : </b>
       <hr size="2" width="150" align="left">
       <ul type="circle">
            <li>Multimedia
       </ul>
       <ul type="square">
            <li>RPL
       <ul type="disc">
            <li>TKJ
       </ul>
       </font>
</body>
</html>

  •  <ol> adalah tag untuk membuat daftar item berurut
  •  <li> adalah tag untuk membuat item dari daftar urutan
  •  Tag list tersebut dapat ditambahkan atribut TYPE dengan nilai :
           1  : Angka latin
           A  : Huruf A
           a  : Huruf a
           I  : Angka Romawi

Contoh (save dengan nama ordered.html) :

 <html>
<head>
<title>Membuat Ordered List</title>
</head>
<body>
       <b><font size="2" face="Tahoma" color="black">
       SMK INFORMATIKA memiliki 3 jurusan : </b>
       <hr size="2" width="150" align="left">
       <ol type="1">
             <li>TIK</li>
             <li>Mesin</li>
             <li>Otomotif</li>
       </ol>
       <hr size="3" width="500">
       <b><font size="2" face="Tahoma" color="black">
       Jurusan TIK memiliki 4 LAB Komputer : </b>
       <ol start="4">
             <li>LAB. Multimedia</li>
             <li>LAB. RPL</li>
             <li>LAB. TKJ</li>
       </ol>
       </font>
</body>
</html>

8.Tag <acronym>, untuk memberi keterangan atau screen tips

Contoh (save dengan nama cronym.html) :

 <html>
<head>
       <title>Singkatan</title>
</head>
<body>
       <acronym title="word wide web">www</acronym>
       <p>Bila kita meletakkan kursor di atas kata www maka muncul kata word wide web pada screen tips</p>
</body>
</html>

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Menggunakan Link di dalam HTML - HTML Tutorial

Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu.Jika link diklik maka dokumen HTML akan menuju ke alamat tersebut.Ditandai dengan Anchor, yaitu tag <a>. Tag <a> mempunyai dua atribut,yaitu href dan name.Atribut href digunakan jika sebuah anchor akan digunakan sebagai link,sedangkan atribut name digunakan jika anchor akan digunakan sebagai tujuan. 1.Link ke dokumen lain Untuk membuat link/penghubung dengan target ke dokumen/halaman yang berbeda,anda harus membuat dokumen yang dituju/target dan disimpan dalam direktori tertentu,baik pada direktori yang sama atau berbeda dengan dokumen yang aktif sekarang.Untuk mencoba kita akan membuat 3 file yang saling berhubungan.Sebelumnya supaya file-file yang dibuat terlihat rapi kita buat folder "tabel" terlebih dahulu jika nanti file link yang kita buat tersimpan di dalam folder "tabel". 1.link-utama.html  <html> <head> <title> Halaman Utama </title> </head...
Posting Komentar
Baca selengkapnya

Enam Kebiasaan yang tidak produktif

1.Tidak memiliki rencana dalam hidup Dalam bukunya yang terkenal William feather menyampaikan dua jenis perbuatan yang mendatangkan kegagalan. a.yang pertama orang yang bertindak tanpa rencana b.yang kedua orang yang berencana namun tak melakukan apapun. Sekali pikiran manusia telah di kembangkan dengan rencana baru maka tak akan pernah mendapatkan kembali dimensinya yang lama                                                                           Oliver Wendell Holmes 2.Kehilangan sikap dalam hidupnya Orang senantiasa akan mendapatkan apa yang paling di harapkan dalam hidupnya.Bila pengharapannya baik maka kebaikan akan mendatanginya,namun bila pengharapannya buruk,maka keburukannlah yang akan mendatanginya. Masa depan merupakan milik mereka yang percaya pada mimpi mimp...
Posting Komentar
Baca selengkapnya

Jalan Menuju Sukses

Kita tak akan pernah tahu sampai bila kita tak pernah memulai #Howard Zinn Bergeraklah cepat,jangan sampai kita menjadi penonton yang sukses.Mulailah dengan langkah nyata,gerakan langkahmu!!! Jika kita memiliki keinginan untuk menjadi seorang pengusaha yang berhasil,rasanya tidak cukup kita memiliki keinginan saja,tetapi kita tetap harus melangkahkan kaki,menggerakkan tubuh untuk mencapai keinginan tersebut.Dibenak kita harus ingat,untuk mencapai langkah keseribu kita membutuhkan langkah pertama.Tidak akan pernah ada langkah keseribu tanpa kita memulai langkah pertama.Itu pasti. Apapun jika kita ingin berangkat ke Jakarta,maka kita harus memutuskan apakah kita berangkat ke Jakarta tersebut menggunakan kendaraan umum atau berjalan kaki,apakah menggunakan kereta atau bis,apakah menggunakan motor atau mobil sendiri.Tujuan arahnya apakah melalui Cianjur atau Purwakarta.Saat ini sudah ada jalan tol Purbaleunyi,alangkah lebih cepatnya melewati jalan tol.Berbagai pilihan tersaji di depa...
Posting Komentar
Baca selengkapnya