Pemformatan Teks dan Pembuatan List - Praktikum 2

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

Assalamualaikum wr.wb.
Pada kesempatan kali ini saya akan melanjutkan materi pembahasan tentang Pengenalan Dasar HTML bagian ke-duanya, melanjutkan bagian pertama 1 hari yang lalu, 
Pada materi kali ini kita akan membahas berbagai tag html lagi beserta fungsi dan penggunaannya, begitupula dengan cara penulisannya.

Yang akan kita pelajari pada  materi ini merupakan tentang "Pemformatan Teks dan Paragraf Web", dengan menggunakan tag-tag html keren yang lain lho.
Oke tanpa berlama-lama lagi mari kita lanjut ke pembahasan materinya, pertama kita disini akan menelaah berbagai tag html lagi nih, untuk lebih jelasnya mari kita bahas secara seksama. 

1. PEMFORMATAN TEKS DAN PARAGRAF WEB

a. Pemformatan Teks
 <!DOCTYPE html>  
 <html>  
 <head>  
    <title>Format Teks by Ilham Prabu Zaky S</title>  
 </head>  
 <body>  
    <p>  
      <b>Tulisan ini ditebalkan(bold)</b>  
    </p>  
    <p>  
      <strong>Tulisan ini ditebalkan(strong)</strong>  
    </p>  
    <p>  
      <em>Tulisan ini miring(emphasize)</em>  
    </p>  
    <p>  
      <big>Tulisan ini besar(big)</big>  
    </p>  
    <p>  
      <i>Tulisan ini miring(italic)</i>  
    </p>  
    <p>  
      Tulisan ini <sub>subscript</sub>  
    </p>  
    <p>  
      Tulisan ini <sup>superscript</sup>  
    </p>  
 </body>  
 </html>  



Tag bold 

Nah seperti yang kita lihat di picture diatas pada baris pertama tulisan nya itu tebal / (bold), Bagaimanakah cara melakukannya? coba lihat source code diatas nya.
Yap cara menebalkan tulisan itu memakai tag bold <b></b>, dengan menambahkan tag tersebut tulisan yang berada didalam tag akan berubah menjadi cetak tebal.
Penulisan tag : <b></b>


Tag strong 

Fungsi dari tag strong yakni sebagai penekanan terhadap kalimat penting, yang akan terjadi adalah kata / kalimat yang dipilih akan bercetak tebal seperti fungsi tag bold.
Penulisan tag : <strong></strong>

Tag emphasize 

Berfungsi untuk memaksa teks menjadi italic style. di dalam suatu font kadang kala terdapat bermacam teks atau font style yang tidak support italic, alternatif yang digunakan yakni menggunakan tag emphasize agar teks tersebut menjadi miring atau italic.
Penulisan tag : <emp></emp>

Tag big 

Berfungsi untuk memberikan ukuran besar terhadap teks yang dipilih, dengan maksud memberi size default big untuk selected text.
Penulisan tag : <big></big>

Tag Italic 

Berfungsi untuk merubah style tulisan yang dipilih agar menjadi miring/italic.Biasanya digunakan untuk memberikan tanda  terhadap kata asing/bukan bahasa nasional.
Penulisan tag : <i></i>

Tag subscript

Berfungsi untuk merubah posisi tulisan yang dipilih agar berpindah ke posisi seperti pangkat bawah.
Posisi pada subscript memiliki posisi yang berlawanan dengan superscript.
Penulisan tag : <sub></sub>

Tag superscript

Berfungsi untuk merubah posisi tulisan yang dipilih agar berpindah ke posisi seperti pangkat atas.
Posisi pada superscript memiliki posisi yang berlawanan dengan subscript.
Penulisan tag : <sup></sup>

b. Pre-Format 
 <!DOCTYPE html>  
 <html>  
 <head>  
    <title>Preformat by Ilham Prabu Zaky S</title>  
 </head>  
 <body>  
    <h2>Daftar Harga Keladi:</h2>  
    <pre>  
      Red Flash.........35.000  
      Red Fire.........60.000  
      Fannie Munson.........60.000  
    </pre>  
 </body>  
 </html>  

Tag Pre 

HTML <pre> element digunakan untuk merepresentasikan sebuah blok teks preformat (preformatted text). Teks yang ditulis didalam <pre> elemen memiliki struktur berdasarkan ketetapan tifografi, artinya teks ditulis apa adanya sesuai format yang ditulis didalam file (dokumen HTML).

c. Quotation
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>quotation by Ilham Prabu Zaky S</title>  
 </head>  
 <body>  
    Tulisan ini bukanlah quotation  
    <blockquote>  
      tulisan ini adalah quotation <br>  
      tulisan ini adalah quotation <br>  
      tulisan ini adalah quotation <br>  
    </blockquote>  
 </body>  
 </html>  


Tag quotation 

Tag <blockquote> digunakan untuk bagian text yang merupakan kutipan panjang. Disebut kutipan panjang karena tag ini merupakan tipe block element, sehingga akan memisahkan diri dari text yang ada menjadi baris baru. Tag <blockquote> lebih cocok digunakan untuk memberikan penegasan penting untuk kutipan.
Penulisan tag : <blockquote></blockquote>

d. Mark and Del
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Mark n Del by Ilham Prabu Zaky S</title>  
 </head>  
 <body bgcolor="lightblue">  
    <font face="impact" size="36 pt" color="crimson">  
      <h2> HTML <mark> Marked </mark> Formatting</h2>  
    <font color="dodgerBlue">  
      My Fave color is <del>Orange</del>  
    </font>  
 </body>  
 </html>  

Tag Mark

HTML <mark> element digunakan untuk merepresentasikan teks yang disorot atau ditandai karena memiliki peran penting, yang biasanya dimaksudkan untuk mereferensi (merujuk) atau mengingatkan akan hal penting yang berkaitan dengan konteks khusus sebuah kalimat.
Penulisan tag : <mark></mark>

Tag Del 

HTML <del> tag digunakan untuk menunjukkan kon
ten yang telah dihapus (delete) dari dokumen. Browser biasanya memberi style garis tengah pada teks didalam element del , yang menunjukkan coretan atau dihapusnya teks tersebut dari dokumen.
Penulisan tag : <del></del>

Chalange 1 - Membuat Page Sederhana
 <!DOCTYPE html>  
 <html>  
 <head>  
    <title>Chalange Pratikum 3</title>  
 </head>  
 <body bgcolor="lightblue">  
    <h1 style="font-family: courier; text-align: center"><cite><ins>Chalange 3 - Membuat Page Sederhana</ins></cite>  
    </h1>  
    <center>  
      <a href="https://www.google.com/url?sa=i&url=https%3A%2F%2Fsallysbakingaddiction.com%2Fraspberry-almond-crumb-cake%2F&psig=AOvVaw1LfOV0EF10ecB8ghTWPlF2&ust=1595435187740000&source=images&cd=vfe&ved=2ahUKEwidh6Wu4d7qAhVaJLcAHaIoAn0Qr4kDegUIARDAAQ">  
         <img border="3" width="250px" src="/IMG/Rasberry-bakewell-cake.jpg" alt="">  
      </a>  
    </center>  
    <font face="courier"><h1><center>Raspberries Bakewell cake</center></h1></font>  
    <font face="Arial">  
      <h2><center><b>- The simple almondy cake is great way of using up pick-yur-own raspberries -</b></center></h2>  
    </font>  
    <font face="Arial">  
      <h3><abbr title="Cara Membuat">Method</abbr></h3>  
    </font>  
    <font face="Arial">  
      <h3>1</h3>  
      <p>Heat oven to 180C/160C fan/gas 4 and base-line and grease a deep 20cm loose-bottom cake tin. Blitz the ground  
         almound, butter, sugar, flour, eggs and vanilla extract in a food processor until well combined </p>  
      <h3>2</h3>  
      <p>Heat oven to 180C/160C fan/gas 4 and base-line and grease a deep 20cm loose-bottom cake tin. Blitz the ground  
         almound, butter, sugar, flour, eggs and vanilla extract in a food processor until well combined </p>  
    </font>  
 </body>  
 </html>  
















Nah, jadi nih page website sederhana, kita telah berhasil menyelesaikan chalange-nya, kalian juga bisa membuatnya dengan tag-tag yang telah kita pelajari bersama, dan untuk tag dan attribut lainnya bisa anda cari di w3schools untuk link nya silahkan klik disiini.

2. PENYAJIAN  PEMBUATAN LIST DAN KOMBINASI

Yang akan kita pelajari pada  materi ini merupakan tentang "Penyajian hasil Pembuatan List Minimal & Kombinasi", dengan menggunakan tag-tag html keren yang lain lho.
Oke tanpa berlama-lama lagi mari kita lanjut ke pembahasan materinya, pertama kita disini akan menelaah berbagai tag html lagi nih, untuk lebih jelasnya mari kita bahas secara seksama.

a. Pembuatan List
 <!DOCTYPE html>  
 <html>  
 <head>  
    <title>Vertebrata by Ilham Prabu Zaky S</title>  
 </head>  
 <body>  
    <h1>Vertebrata</h1>  
    <ul>  
      <li>Ikan  
    </ul>  
      <li>Patin</li>  
      <li>Gurame</li>  
      <li>Mujair</li>  
    <ul>  
    </li>  
    <li>Amfibi  
      <ul>  
         <li>Ordo Anura  
      </ul>  
         <li>Katak Hijau</li>  
         <li>Katak Darat</li>  
         <li>Katak Ungu</li>  
    </ul>  
    </li>  
    </ul>  
 </body>  
 </html>  









Tag Unordered List (ul) dan Ordered List (ol)

<ul> menunjukkan sebuah Unordered List atau Daftar Acak. HTML <ul> element digunakan untuk merepresentasikan sebuah daftar item atau koleksi beberapa item yang dapat disusun kembali secara acak tanpa penomoran. Artinya, apabila item-item tersebut diubah urutannya, tidak akan berpengaruh pada dokumen.
Untuk menulis sebuah item dalam daftar (list), digunakan element <li> yang menunjukkan List Item. Jadi, <li> terletak didalam <ul> dan dapat ditulis lebih dari satu element. <ul> juga bisa saja terletak (ditulis) didalam <li> yang menunjukkan tingkatan daftar (list) bersarang (nested).

b. Pembuatan List Kombinasi
      
Contoh Pertama :  
 <!DOCTYPE html>  
 <htm>  
 <head>  
    <title>List Kombinasi by Ilham Prabu Zaky S</title>  
 </head>  
 <body>  
    <h1>Contoh Ordered List mulai nomor 17</h1>  
    <ol start="17">  
      <li>Multimedia</li>  
      <li>Teknik Komputer Jaringan</li>  
      <li>Rekayasa Perangkat Lunak</li>  
    </ol>  
    <h2>Contoh Ordered List mulai abjad 17</h2>  
    <ol type="A" start="17">  
      <li>Ungu</li>  
      <li>Merah</li>  
      <li>Hijau</li>  
    </ol>  
    <h4>Contoh Ordered List 'I' Romawi</h4>  
    <ol type="I">  
      <li>Kelas X</li>  
      <li>Kelas XI</li>  
      <li>Kela XII</li>  
    </ol>  
    <h4>Contoh Ordered List 'i' Romawi</h4>  
    <ol type="i">  
      <li>Satu</li>  
      <li>Dua</li>  
      <li>Tiga</li>  
    </ol>  
 </body>  
 </htm>  













Pada gambar diatas terdapat source code dan juga hasilnya di browser, nah seperti yang dapat kita lihat disini saya melakukan kombinasi list, antara tag <ol> dan tag <li>. Dengan penulisan tag <li> bersarang didalam tag <ol>.
Nah selain itu kita juga dapat mengganti type dari tag <li> nya itu sendiri, yang bertujuan agar memudahkan kita memisahkan antara list satu dengan list lainnya.

Contoh Kedua : 

 <!DOCTYPE html>  
 <html>  
 <head>  
    <title>Masih Kombinasi List by Ilham Prabu Zaky S</title>  
 </head>  
 <body>  
    <h1>Kombinasi OL dan UL</h1>  
    <ol type="1">  
      <li>Daftar Makanan Tradisional:</li>  
      <ul type="circle">  
         <li>Tahu Gejrot</li>  
      </ul>  
      <ul type="disc">  
         <li>Peuyeum</li>  
      </ul>  
      <ul type="square">  
         <li>Karedok</li>  
      </ul>  
    </ol>  
 </body>  
 </html>  








Nah gambar diatas merupakan kombinasi antara tag <ol> dan tag <li> yang kedua dalam kombinasi diatas kini yang diubah adalah type dari tag <ul>. type yang dipakai diatas ialah circle, disc dan square.

c. Pembuatan Definition List
 <!DOCTYPE html>  
 <html>  
 <head>  
    <title>Latihan Paragraf by Ilham Prabu Zaky Setiawan</title>  
 </head>  
 <body>  
    <h4>Contoh List Definisi</h4>  
    <dl>  
      <dt>HTML</dt>  
      <dd>Hyper Text Markup Language, merupakan bahasa markup yang digunakan untuk membuat  
         halaman-halaman web.  
      </dd>  
      <dt>Internet Exploler</dt>  
      <dd>Web Browser yang merupakan bawaan dari sistem operasi Windows, digunakan untuk menampilkan  
         halaman-halaman web.  
      </dd>  
    </dl>  
 </body>  
 </html>  











Yap, gambar diatas merupakan hasil dari tag-tag html untuk membuat sebuah definition list,
Ingin tau lebih lanjut? Okey mari langsung saja kita bahas.

Tag pada Definition List

HTML <dd> (Definition Description) tag merupakan element yang memberikan penjelasan sebuah istilah/term (Yang ditulis didalam element <dt> (definition term)). Adapun element <dt> dan <dd>, keduanya ditulis dalam <dl> element yang menunjukkan sebuah definition list.
<dt> dapat berisi konten sebuah istilah atau kosa kata tertentu, sedangkan penjelasan dari istilah tersebut ditulis didalam <dd>. Sehingga, <dd> harus ditulis setelah <dt>.

Perhatikan cara penulisan description list diatas, untuk setiap tag <dt>, diikuti oleh tag <dd>. Namun kita bisa juga menambahkan beberapa tag <dd> pada satu tag <dt>, dan demikian juga sebaliknya.
Di dalam web browser, isi dari penjelasan pada tag <dd> akan ditampilkan dengan sedikit menjorok (indent) dari bagian istilahnya.
Untuk memudahkan mengingat, tag <dt> bisa disebut sebagai ‘data term’, dan tag <dd> sebagai ‘data description’.

Chalange 2  - Membuat Page Biodata
 <!DOCTYPE html>  
 <html>  
 <head>  
    <title>Chalange Pratikum 3</title>  
    <style>  
    a:link {  
    color: black;  
    background-color: transparent;  
    }  
    </style>  
 </head>  
 <body background="/IMG/white-pattern01.jpg">  
    <h1 style="font-family: Arial, Helvetica, sans-serif; text-align: center">Chalange 4 - Membuat Page Biodata  
    </h1>  
    <center>  
      <a  
         href="https://instagram.com/ilhamprabu.zs?igshid=1bfceni4g17rv">  
         <img border="5" width="250px" src="/IMG/Pp-Praktikum 04.jpg" alt="">  
      </a>  
    </center>  
    <font face="Helvetica">  
      <h2>  
         <center>Ilham Prabu Zaky S</center>  
      </h2>  
    </font>  
    <font face="Helvetica">  
      <p><center><dd>Nama saya adalah Ilham Prabu Zaky Setiawan, lahir di Bandung pada tahun 2004, tanggal 15 Januari 2004. Di akta kelahiran  
      sih tanggal 14 tapi itu sebenarnya salah, karena saya lahir setelah lewat jam 12 malam. Saya merupakan anak tunggal,  
      saya tinggal bersama Ibu dan Ayah, alamat saya tinggal yakni di Jl. Stasiun lama Kiaracondong Bandung. Saya kini tengah  
      duduk di bangku SMA, tepatnya di SMKN 4 Bandung. Saya mengambil jurusan Rekayasa Perangkat Lunak atau biasa disebut  
      dengan <strong>RPL.</strong>  
      Saya kini baru menjadi kelas XI, tepatnya berada di kelas XI RPL 2. Saya dahulunya bersekolah di SDN Kebon Gedang 10,  
      lalu di SMPN 31 Bandung, dan ke SMKN 4 Bandung. Saya memiliki hobi tersendiri lho yakni saya hobi dalam informasi  
      teknologi entah kenapa kalau mendengar yang semacam itu saya sangat tertarik, oh iya alasan jaya masuk ke jurusan  
      <strong>RPL</strong> ini selain karena gajinya besar saya juga tertarik karena saya berpikir bahwa mungkin saja saya  
      cocok dengan bidang ini, saya itu tipikal orang yang kurang suka beraktivitas di luar/di lapangan, orang tua saya pun  
      demikian menyarankan saya ke jurusan ini.</dd></center></p>  
    </font>  
    <font face="Helvetica">  
      <p>Berikut untuk biodata singkatnya : </p>  
      <ul>  
         <li>Nama : Ilham Prabu Zaky Setiawan</li>  
      </ul>  
      <ul>  
         <li>TTL : Bandung, 15 Januari 2004</li>  
      </ul>  
      <ul>  
         <li>Alamat : Jl. Stasiun Lama Kiaracondong Bandung</li>  
      </ul>  
      <ul>  
         <li>Jenis Kelamin : Laki-laki</li>  
      </ul>  
      <ul>  
         <li>Agama : Islam</li>  
      </ul>  
      <ul>  
         <li>Kelas : XI RPL 2</li>  
      </ul>  
      <ul>  
         <li>Sekolah : SMKN 4 Bandung</li>  
      </ul>  
      <ul>  
         <li>No Telp : +62 81324086956</li>  
      </ul>  
      <ul>  
         <li>Alamat Email : ilhamprabuzakys@gmail.com</li>  
      </ul>  
    </font>  
 </body>  
 </html>  


















Nah, jadi nih page biodata sederhana, kita telah berhasil menyelesaikan chalange-nya, kalian juga bisa membuatnya dengan tag-tag yang telah kita pelajari bersama, dan untuk tag dan attribut lainnya bisa anda cari di w3schools untuk link nya silahkan klik disini.

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

Wassalamualaikum wr.wb

0 Response to "Pemformatan Teks dan Pembuatan List - Praktikum 2 "

Post a Comment

Postingan Terbaru

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel