Format Teks Dalam Dokumen Web - Praktikum 1

Ilham Prabu Zaky Setiawan
XI RPL 2
Absen 15
SMKN 4 Bandung

Assalamualaikum wr.wb
Disini saya akan memberikan penjelasan tentang berbagai jenis tag dasar yang terdapat pada HTML. Yang akan kita bahas kali ini yaitu kita akan menelaah 4 element dari suatu tag html, yaitu dimulai dari :
  1. Heading
  2. Paragraph
  3. Link (a-href link)
  4. Img
Setiap masing-masing element diatas akan dijelaskan dan diberikan contohnya. 
Untuk lebih jelasnya langsung saja ke pembahasan dan pengerjaannya.

1. Heading

Jadi apa sih tag heading itu? Tag heading biasanya digunakan untuk membuat judul pada halaman web, tag heading pada HTML terdiri dari 6 tingkatan yaitu yang terdiri dari h1, h2, h3, h4, h5, h6. Tag heading secara default di tampilkan oleh browser dengan huruf tebal (bold), tag heading yang paling besar adalah h1 dan yang paling kecil adalah h6.

Penulisan tag heading : 

  1. <h1>.....................</h1>
  2. <h2>.....................</h2>
  3. <h3>.....................</h3>
  4. <h4>.....................</h4>
  5. <h5>.....................</h5>
  6. <h6>.....................</h6>
Berikut contoh penggunaan tag head: 
 <!DOCTYPE html>  
 <html>  
 <head>  
    <title>Heading</title>  
 </head>  
 <body>  
    <h1>This is heading 1</h1>  
    <h2>This is heading 2</h2>  
    <h3>This is heading 3</h3>  
    <h4>This is heading 4</h4>  
    <h5>This is heading 5</h5>  
    <h6>This is heading 6</h6>  
 </body>  
 </html>  


















2. Paragraph
       
Paragraf merupakan element terkecil pada tag html, tag <p> sendiri merupakan tag khusus yang diberikan oleh tag html yang didalamnya dapat memuat sebuah kumpulan kalimat / paragraf.

Penulisan tag paragraph : 

  • <p>.....................</p>
Berikut merupakan contoh penggunaan tag <p>
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Paragraf</title>  
 </head>  
 <body>  
    <p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf.   
     Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf.</p>  
    <p>Ini paragraph lainnya. Ini paragraph lainnya. Ini paragraph lainnya.  
     Ini paragraph lainnya. Ini paragraph lainnya. </p>  
 </body>  
 </html>  



3. Link


Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah ke halaman lainnya. HTML menggunakan tag <a>untuk keperluan ini.

Link ditulis dengan <a> yang merupakan singkatan dari anchor (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference).

Penulisan tag link : 

  • <a>.....................</a>
Untuk lebih jelasnya berikut kami sertakan contoh penggunaan tag link <a> :
 <!DOCTYPE html>  
 <html>  
 <head>  
    <title>Cara membuat Link</title>  
 </head>  
 <body>  
    <a href="http://www.w3schools.com"> Ini adalah link belajar web</a>  
    <br><br>  
    <a href="Lat1Heading.html"> Ini adalah link ke Lat1Heading</a>  
    <br><br>  
    <a href="Lat2Paragraf.html" target="_blank"> Link ini membuka di new tab</a>  
 </body>  
 </html>  


4. Image

Yap, berikut merupakan tag image pada html, yang bertujuan ya tentu saja untuk memasukan gambar, penulisannya adalah <img>.


Atribut src dalam tag <img>


Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute.


Untuk contoh kode HTML tentang image ini, silahkan sediakan sebuah gambar yang akan digunakan sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman, contoh :  Gambar dapat berupa JPEG, PNG, maupun GIF.


Atribut width dan height dalam tag <img>


Atribut yang membolehkan kita untuk menentukan besar dari gambar yang ditampilkan, yaitu width dan height.


Akan tetapi apabila kita memakai kan kedua atribut tersebut pada suatu gambar image maka gambar yang nanti akan muncul menjadi tidak proporsional, seperti terkesan agak dipaksa untuk memiliki ukuran sekian.


Jadi alternatifnya ialah kita hendaknya memakai satu buah atribut saja agar tidak ada yang namanya strecth pada gambar. Karena jika kita memberikan nilai kepada salah satu atribut seperti.


width = "140"

maka si atribut height juga akan menyesuaikan nilainya menjadi = "140" juga.

Atribut alt dalam tag <alt>


Tag image juga memiliki atribut penting lainnya, yaitu alt


Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika web broser telah disetting untuk tidak menampilkan gambar.


Atribut alt juga berperan penting untuk mesin pencari seperti Google. Karena cara kerja google yang meng-index seluruh situs dengan memproses tulisan yang ada, Google ‘tidak mengerti’ isi dari gambar tanpa bantuan deskripsi yang ditulis dalam atribut alt. Hal ini menambah pentingnya menambahkan atribut alt.


Penulisan tag Image : 

  • <img>.....................</img>

Contoh penggunaan tag <img>


Disini saya menggunakan dua file image yang satu berformat GIF saya taruh diluar yakni bersama file halaman html lainnya.


Nama file image: "funny-baby.gif"

src = "funny-baby.gif"

Dan untuk file image yang kedua saya taruh terpisah yakni di folder Image, untuk mengakses file imagenya pada attribut src kita tambahan didepan nama file image nya 


Nama file image:  "cute-baby.jpg"

src ="Image/cute-baby.jpg"

Berikut contohnya : 

 <!DOCTYPE html>  
 <html>  
 <head>  
    <title>Gambar atau Image</title>  
 </head>  
 <body>  
    Gambar diluar folder  
    <img src="funny-baby.gif" alt="Contoh Gambar GIF" width="104" height="142">  
    <br>  
    Gambar didalam folder  
    <img src="Image/cute-baby.jpg" alt="Contoh Gambar JPG">  
 </body>  
 </html>  




Dan setelah di buka ternyata muncullah file image yang tadi proses di tag image. Tetapi si atribut alt dapat dilihat tidak muncul, kenapa? 

Yap karena situs google berhasil memuat gambar imgnya jika tidak atribut alt pasti akan muncul sebagai pengganti atas gagalnya pemuatan imgnya.

Nah disini juga dapat dilihat pada gambar pertama 

yakni gambar img yang berformat GIF, gambar terlihat seperti tidak proporsional, kenapa? 
Karena saya disini memasukan dua buah atribut kedalam file imgnya

width = "104" 

height = "142"

Jadi gambar yang dimunculkan menjadi stretch atau meregang, jadi disini dapat kita disimpulkan lagi seperti yang sudah dijelaskan di atas bahwa alangkah baiknya jika ingin memasukan atribut ukuran masukan saja salah satunya agar tidak terjadi seperti ini.


Alhamdulillah telah selesai tugas dan pembahasan kali ini, semoga dapat dimengerti dan dipahami, mohon maaf atas atas segala kesalahan yang telah saya buat, dan saya ucapkan terimakasih atas kunjungannya.


Wassalamualaikum wr.wb.

0 Response to "Format Teks Dalam Dokumen Web - Praktikum 1 "

Post a Comment

Postingan Terbaru

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel