Assalamu'alaikum, hallo semuanya! Kembali lagi dengan saya Fadli Mahesa, seorang siswa yang bersekolah di SMKN 4 Bandung dan duduk di bangku kelas XI RPL 3. Kali ini saya akan membagikan lagi sedikit ilmu di dunia percodingan, yaitu tentang Format teks & list pada HTML. Beberapa pemahaman yang akan saya bagikan adalah tag - tag format teks dan list pada bahasa pemrograman HMTL antara lain :
A. Format elemen teks
Dalam penulisan HTML sangat sering menggunakan format text didalamnya, baik itu dalam penulisan judul, ataupun isi dari konten/halaman dari sebuah website.
berikut format text yang sering digunanakan dalam HTML.
| tag | description |
| <b> | format text bold/tebal |
| <i> | format text italic/miring |
| <u> | format text underline/garis bawah |
| <small> | format text kecil |
| <strong> | format text yang hampir sama dengan format bold |
| <sub> | format subscripted teks |
| <sup> | format superscripted teks |
| <ins> | format text garis bawah |
| <del> | format text dengan garis di tengah |
| <mark> | format text yang berwarna |
Syntax Format Elemen Teks Dasar :
<html>
<head>
<title>Format Teks, by Fadli</title>
</head>
<body>
<p><b> Tulisan ini ditebalkan (BOLD)</b></p>
<p><strong> Tulisan ini (Strong)</strong></p>
<p><em> Tulisan ini emphasize</em></p>
<p><big> Tulisan ini besar (big)</big></p>
<p><i>Tulisan ini miring (italic)</i></p>
<p>Tulisan ini adalah<sub>SUBSCRIPT</sub></p>
<p>Tulisan ini adalah<sup>SUPERSCRIPT</sup></p>
</body>
</html>Hasil
Syntax Format Elemen Teks Dasar 2 :
<html>
<head>
<title>Mark n Del , by Fadli</title>
</head>
<body>
<body bgcolor="aliceblue">
<font face="impact" size="25 pt" color="burlywood">
<h3>HTML<mark>MARKED</mark>FORMATTING</h3>
</font>
<font color="burlywood"> My Fav Color is <del>RED</del>
</font>
</body>
</html>Hasil
B. Format teks keluaran komputer
Dalam format ini semua output akan sama seperti apa yang ada pada tag codingan HTML
berikut format text keluaran komputer yang sering digunanakan dalam HTML.
| tag | description |
| <code> | Mendefinisikan teks kode komputer |
| <kbd> | Mendefinisikan teks keyboard |
| <samp> | Mendefinisikan teks contoh kode |
| <var> | Mendefinisikan teks variabel |
| <pre> | Mendefinisikan teks terformat |
Syntax Format Elemen Teks Keluaran Komputer :
<html>
<head>
<title>Pre Format Teks, by Fadli</title>
</head>
<body>
<h1> Harga Barang Baru di Olshop Muvvah</h1>
<pre>
XYAOMI REDMY NOTE 8 ........$40,000
SUMSANG GULAXY NOTE 8 ......$60,000
ODDO FUND EX ...............$100,000
</pre>
TULISAN INI DILUAR TAG Pre
</body>
</html>Hasil
C. Format teks citations, quotations, dan definitions
Elemen ini digunakan untuk membuat teks terlihat seperti sebuah kutipan.
berikut format text citations, qoutations, dan definitions yang sering digunanakan dalam HTML.
| tag | description |
| <abbr> | Mendefinisikan sebuah singkatan |
| <address> | Mendefinisikan alamat atau kontak informasi |
| <bdo> | Mendefinisikan arah teks |
| <blockquote> | Mendefinisikan bagian yang dikutip dari sumber lain |
| <q> | Mendefinisikan sebuah kutipan pendek |
| <cite> | Mendefinisikan judul karya |
| <dfn> | Mendefinisikan sebuah istilah definisi |
Syntax Format Elemen Citations, Qoutations, dan Definitions :
<html>
<head>
<title>Blockquote, by Fadli</title>
</head>
<body>
Tulisan ini bukan quotation
<blockquote>
Tulisan ini menggunakan blockquote, dan ini adalah quotation.
<br><br>
Tulisan ini menggunakan blockquote, dan ini adalah quotation.
Tulisan ini menggunakan blockquote, dan ini adalah quotation.
</blockquote>
</body>
</html>Hasil
Challenge Membuat Halaman Resep Makanan
Membuat sebuah halaman website resep makanan dengan menggabungkan beberapa format text juga codingan dasar HTML.
Contoh Codingan :
<html>
<head><title>Seblak Indomie Makaroni, by Fadli Mahesa</title>
</head>
<body bgcolor="floralwhite">
<center><img src="Media/seblakimage.jpg"
alt="Seblak Indomie Makaroni"
width="300" height="300"></center>
<br>
<font face="lucida handwriting" size="5 pt" color="indianred">
<center>Seblak Indomie Makaroni</center>
</font>
<br>
<font face="verdana" size="4 pt" color="blueviolet">
<center><b>Seblak Indomie Makaroni ini adalah sebuah masakan sederhana
dan bahan yang mudah di dapat.</b></center></font>
<font face="verdana" size="2 pt" color="blueviolet">
<blockquote>
<p align="justify">
<b>Langkah - Langkah
<br>
1</b>
<br>
Langkah pertama adalah menyiapkan semua bahan - bahan yaitu 1 bungkus Indomie rebus, 30 gram makaroni yang sudah direbus, sedikit kerupuk bawang yang sudah di rendam air panas,
daun bawang iris, 1 buah sosis, 1 buah telur, 2 gelas air, sedikit gula dan garam juga bumbu indomie.
<br><br>
<b>2</b>
<br>
Langkah Kedua siapkan bumbu halus yaitu 3 bawang merah, 2 bawang putih, 1 cm kencur.
<br><br>
<b>3</b>
<br>
Lanjut ke langkah ke tiga, mulai memasak yaitu tumis bumbu halus dengan sedikit minyak, lalu masukkan air, setelah mendidih masukkan kocokan telur lalu orek-orek,
masukkan makaroni, lalu sosis, kerupuk, dan mie, beri sedikit gula, garam, dan bumbu indomie, aduk hingga rata.
<br><br>
<b>4</b>
<br>
Sajikan ke mangkok, dan seblak indomie makaroni sudah siap.
</p></blockquote>
</body>
</html>Hasil
D. List Tidak Berurutan(UL) dalam HTML
Daftar atau list yang tidak berurutan adalah daftar item dapat diubah posisinya secara acak. Daftar atau list seperti ini hanya menggunakan tanda atau symbol tertentu, misalnya gambar kotak atau bulat. Untuk daftar tidak berurutan(unordered list) menggunakan tag <ul> dan ditutup </ul>. Dan masing - masing item di dalam daftar harus menggunakan tag <li> dan ditutup </li>. Adapun atribut tag ul ini adalah " 'type'=disk/circle/square ".
Syntax Format Unordered List :
<html>
<head><title>Latihan 10 List UL, By Fadli</title>
</head>
<body>
<h1>VERTEBRATA</h1>
<ul>
<li>Ikan
<ul>
<li>Patin</li>
<li>Gurame</li>
<li>Mujaer</li>
</ul>
</li>
<li>Amfibi
<ul>
<li>Ordi Anura
<ul>
<li>Katak Hijau</li>
<li>Katak Darat</li>
<li>Katak Ungu</li>
</ul>
</li>
</ul>
</body>
</html>Hasil
E. List Berurutan(OL) dalam HTML
Daftar atau list yang berurutan adalah daftar item tidak dapat diubah posisinya secara acak. Daftar atau list ini menggunakan hal yang berurutan, misalnya angka, alphabet, ataupun romawi. Untuk daftar berurutan(ordered list) menggunakan tag <ol> dan ditutup </ol>. Dan masing - masing item di dalam daftar harus menggunakan tag <li> dan ditutup </li>. Adapun atribut tag ol ini adalah " 'type'=A/a/I/i ".
Syntax Format Ordered List :
<html>
<head><title>Latihan 11 Macam - Macam List OL, by Fadli</title>
</head>
<body>
<h2>Contoh OL Mulai NO 10</h2>
<ol start="10">
<li>MM</li>
<li>TKJ</li>
<li>RPL</li>
</ol>
<h2>Contoh OL Mulai Abjad Kapital ke 10</h2>
<ol type="A" start="10">
<li>Ungu</li>
<li>Merah</li>
<li>Hijau</li>
</ol>
<h2>Contoh OL "I" Romawi Kapital</h2>
<ol type="I">
<li>Kelas 10</li>
<li>Kelas 11</li>
<li>Kelas 12</li>
</ol>
<h2>Contoh OL "i" Romawi Kecil</h2>
<ol type="i">
<li>Satu</li>
<li>Dua</li>
<li>Tiga</li>
</ol>
</body>
</html>Hasil
Pembuatan List Kombinasi(OL dan UL) dalam HTML
Syntax Format Kombinasi List :
<html>
<head><title>Latihan List Kombinasi OL UL, by Fadli</title>
</head>
<body>
<h1>Kombinasi OL dan UL</h1>
<ol type="1">
<li>Daftar Makanan Tradisional</li>
<ul type="square"><li>Lotek</li></ul>
<ul type="circle"><li>Peuyeum</li></ul>
<ul type="disc"><li>Surabi</li></ul>
</ol>
</body>
</html>Hasil
F. Daftar Definisi(Definition List) dalam HTML
Daftar Definisi adalah suatu daftar yang berisi kumpulan definisi dari suatu istilah tertentu.
Syntax Format Definition List :
<html>
<head><title>Latihan Paragraf</title>
</head>
<body background="Media/WallP.jpg">
<font color="white">
<h2>Contoh List Defisini :</h2>
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language, merupakan bahasa markup yang
digunakan untuk membuat halaman - halaman web.</dd>
<dt>Internet Explorer</dt>
<dd>Web Browser yang merupakan bawaan dari sistem operasi Windows,
yang digunakan untuk menampilkan halaman - halaman web.</dd>
</dl>
</font>
</body>
</html>Hasil
Challenge Membuat Halaman Biodata
Membuat sebuah halaman website biodata dengan menggabungkan beberapa format text dan list, juga codingan dasar HTML.
Contoh Codingan :
<html>
<head><title>Biodata Fadli Mahesa</title>
</head>
<body background="Media/WallP.jpg">
<font face="aileron black" color="white">
<br><br><br><br>
<h1 align="center"><b> BIODATA DIRI </b></h1>
<center>
<img src="Media/ale.png" alt="Foto Fadli M" style="width:300; height:300; border-radius:50%;">
</center>
</font>
<font face="garamod" size="5" color="white">
<br>
<blockquote>
<p align="center">Perkenalkan nama saya Fadli Mahesa. Saya lahir pada tanggal 9 Agustus 2003 di Bandung.
Tahun ini saya menginjak jenjang SMK kelas 11, tepatnya di SMKN 4 Bandung. Di SMK ini saya memilih jurusan RPL(Rekayasa Perangkat Lunak).
Adapun hobi saya yaitu membaca, mendengar, menonton, dan menulis suatu hal yang menurut saya bermanfaat. Berbicara mengenai makanan favorit,
sate ayam bumbu kacang adalah makanan favorit no.1 bagi saya, lalu untuk minuman favorit saya memilih jus alpukat.
Saya tinggal di Kecamatan Cibiru, Kelurahan Pasir Biru, RW 07, RT 01, NO.10 .
</p>
</blockquote>
<br>
<p align="justify">Point - Point Inti Biodata :</p>
<ul>
<li> Nama : Fadli Mahesa</li>
<li> TTL : Bandung, 09 Agustus 2003</li>
<li> Sekolah : SMKN 4 Bandung</li>
<li> Jurusan : Rekayasa Perangkat Lunak</li>
<li> Kelas : 11</li>
<li> Makanan Fav : Sate Ayam Bumbu Kacang</li>
<li> Minuman Fav : Jus Alpukat</li>
<li> Alamat : Kec. Cibiru, Kel. Pasir Biru, RW 07 RT 01 NO 10</li>
</ul>
</font>
</body>
</html>Hasil
0 komentar: