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

Elemen-elemen dasar HTML untuk memformat halaman web

Sumber gambar peterwebs.com 1.Elemen Head Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML.Isi bagian head kecuali judul dokumen tidak akan terlihat oleh pembaca dokumen tersebut. Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut : Menyediakan judul dokumen Menjabatani hubungan antar dokumen Memberitahu browser untuk membuat form pencarian Menyediakan metode untuk mengirim pesan ke tipe browser Elemen yang mungkin terdapat pada bagian head : 1.Tag <title>,digunakan untuk memberi judul dokumen.Penggunaannya sebagai berikut : <title> Judul </title> 2.Tag <base>,digunakan untuk menentukan basis URL sebuah dokumen.Penggunaannya adalah sebagai berikut : <base href="url"> contoh : <base href="//www.alamat.com/direktori"> 3.Tag <link>,digunakan untuk menunjukkan relasi antar do...
2 komentar
Baca selengkapnya

Pentingnya belajar berfilsafat

 Ingatlah kita ini kayak kereta yang harus dikendalikan oleh akal.Jangan sampai akalnya mati bolak-balik.Kayak katanya Aristoteles itu bilang manusia adalah binatang yang mikir,jangan sampai mikirnya ini mati,karena begitu mikirnya mati yang tersisa tinggal binatangnya,dia pengendalinya. Oke,makanya belajarlah filsafat.Nanti di bagian-bagian awal simposium diskusimu muncul ,,,kenapa kok tiba-tiba ngomong cinta...Ya,karena awalnya ngomong filsafat. Jadi,katanya Socrates kan sering bilang bahwa filsafat itu adalah satu bidang keilmuwan,bidang pengetahuan yang membuat kita bisa hidup lebih baik.Kenapa?karena kita bisa berfikir lebih baik..Socrates kan gitu..pengetahuan keniscayaan kebaikan..pengetahuan yang benar,perbuatan pasti juga benar.Enggak mungkin orang ngerti pengetahuan yang baik,perbuatannya salah..Kenapa orang kayak gini katanya Plato berarti dia belum benar-benar tau,dan dia orang bodoh..Karena kalau orang benar-benar ngerti,kalau dia tau kebaikan dia pasti melakukan kebai...
Posting Komentar
Baca selengkapnya

Membangun Sikap Percaya Diri

Aset paling berharga bagi banyak orang adalah juga aset yang paling belakangan dihargai.Aset itu,apabila ditangani dengan sebenarnya,akan mampu memberikan hasil secara dramatis.Aset yang tidak dapat dikenakan harga setinggi apa pun adalah otak manusia,pikiran dan proses berpikir.             Otak merupakan kawasan penyimpanan dan kapasitasnya luar biasa,menjadi pentingkah untuk berhati-hati di dalam mengisinya.Sebagian orang mempunyai otak yang penuh dengan pemikiran dan pengalaman negatif.Mereka akan secara terus-menerus menanamkan berbagai masukan sehingga ketika dihadapkan pada sebuah kesempatan atau tantangan baru,otak mereka,ketika ditanya,mengirimkan jawaban : Tidak, kamu tidak mampu, atau tanggapan lain semacam itu.Langkah yang diperlukan untuk membangun kepercayaan diri dan yang pada gilirannya membangun rasa percaya diri bagi motivasi diri dari dalam.             Begitu banyak orang mengurungkan niat mereka dengan ...
Posting Komentar
Baca selengkapnya