Ita Blog

Just another Civitas Universitas Sebelas Maret site

Membuat Garis Horizontal

Pendahuluan

Garis Horizontal digunakan untuk sebagai pemisah antar bagian dalam halaman web. Untuk membuat garis horizontal kita bisa menggunakan perintah < hr/ >.

Script Coding

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Garis Horizontal</title>
</head>
<h1>Mawar</h1>
<hr />
<img src=”mawar.jpg” hspace=”20″ vspace=”20″ align=”right” width=”300″ height=”250″ alt=”bunga mawar” />
<p>
Bunga mawar sangatlah indah. Maka sudah sepantasnyalah para wanita sangat menyukainya.
Di balik keindahan dan keharuman baunya, mawar menyimpan sesuatu hal yang dapat menyakitkan yaitu durinya.
</p>
<p>
Analogi dari bunga mawar. Seorang wanita terkadang seperti halnya bunga mawar.
Di dalam kecantikan wanita nan rupawan terkadang tersimpan duri yang tajam.
Karena itu hati-hatilah dalam memilih wanita.
</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>Mawar</h1>
<hr width=”80%” align=”left” size=”10″ noshade=”noshade” />
<img src=”mawar.jpg” hspace=”20″ vspace=”20″ align=”right” width=”300″ height=”250″ alt=”bunga mawar” />
<p>
Bunga mawar sangatlah indah. Maka sudah sepantasnyalah para wanita sangat menyukainya.
Di balik keindahan dan keharuman baunya, mawar menyimpan sesuatu hal yang dapat menyakitkan yaitu durinya.
</p>
<p>
Analogi dari bunga mawar. Seorang wanita terkadang seperti halnya bunga mawar.
Di dalam kecantikan wanita nan rupawan terkadang tersimpan duri yang tajam.
Karena itu hati-hatilah dalam memilih wanita.
</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
<p><a href=”index.html”> Halaman Menu </a></p>
</html>

Hasil Jadi

Kesimpulan

Kita bisa mengubah ukuran garis horizontal pada halaman HTML seperti pada contoh di atas. Garis pada gambar mawar atas tidak diatur ukurannya, sedangkan garis pada gambar mawar bawah diatur, maka setelah dilihat pada tampilan jadinya akan terlihat berbeda.

Menyisipkan Gambar

Pendahuluan

Untuk menyisipkan gambar kita dapat menggunakan perintah awalan < img src=” “> dan diakhiri dengan < / img>. Dengan syarat fotonya harus satu folder dengan HTML yang kita buat. Untuk mengatur lebar gambar menggunakan perintah width=” ” dan tinggi gambar menggunakan height=” “.

Script Coding

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Image</title>
</head>
<body>
<h1>Mawar</h1>
<img src=”mawar.jpg” hspace=”20″ vspace=”20″ align=”right” width=”300″ height=”250″ alt=”bunga mawar” />
<p>
Bunga mawar sangatlah indah. Maka sudah sepantasnyalah para wanita sangat menyukainya.
Di balik keindahan dan keharuman baunya, mawar menyimpan sesuatu hal yang dapat menyakitkan yaitu durinya.
</p>
<p>
Analogi dari bunga mawar. Seorang wanita terkadang seperti halnya bunga mawar.
Di dalam kecantikan wanita nan rupawan terkadang tersimpan duri yang tajam. Karena itu hati-hatilah dalam memilih wanita.
</p>
</body>
<p><a href=”index.html”> Halaman Menu </a></p>
</html>

Hasil Jadi

Kesimpulan

Dengan menggunakan perintah-perintah diatas kita bisa menyisipkan gambar disebelah kanan paragraf dengan lebar 300 dan tinggi 250.

Singkatan Akronim

Pendahuluan

Di dalam HTML terdapat tag yang menjelaskan kepada pembaca tentang singkatan yang kita tulis. Singkatan tersebut muncul sebagai tool tip dalam browser, ketika kursor didekatkan pada singkatan tersebut. Sedangkan teks singkatan akan ditandai dengan garis bawah. Perintah yang digunakan adalah < abbr title=”kepanjangan”>dan diakhiri dengan < / abbr>.

Script Coding

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Singkatan Akronim</title>
</head>
<body>
<h1>News Dot Com – Sebuah Parodi Politik</h1>
<p>
<abbr title=”Radio Detecting and Ranging”>RADAR</abbr>
saat ini telah banyak digunakan baik dalam bidang pertahanan maupun transportasi. Di Indonesia pun, teknologi RADAR sudah banyak digunakan oleh TNI.
</p>
</body>
<p><a href=”index.html”> Halaman Menu </a></p>
</html>

Hasil Jadi

Kesimpulan

Apabila kursor didekatkan pada tulisan RADAR maka akan tampil tulisan Radio Detecting and Ranging.

Perubahan Teks

Pendahuluan

Di dalam HTML ada dua jenis tanda perubahan teks yaitu, yakni tanda sisipan teks baru dan tanda untuk teks yang telah dihapus. Untuk memberi tanda perubahan teks yang berupa sisipan teks baru dengan cara < ins> dan diakhiri dengan < / ins>. Sedangkan untuk menandai teks yang telah dihapus, gunakan < del> dan akhiri dengan < / del>.

Script Coding

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Perubahan Teks</title>
</head>
<body>
<h1>Tentang HTML 5</h1>
<h1>News Dot Com – Sebuah Parodi Politik</h1>
<p>
Satu lagi acara komedi yang selalu mengkritisi politik di negara kita telah muncul.
Acara yang bertajuk News Dot Com itu disiarkan oleh <del>RCTI</del> MetroTV …. <ins>dan disiarkan setiap hari Minggu pukul 21.30 WIB.</ins>
</p>
</body>
<p><a href=”index.html”> Halaman Menu </a></p>
</html>

Hasil Jadi

Kesimpulan

Untuk mengubah teks pada suatu konten kita bisa menandainya. Dalam contoh di atas RCTI dihapus dan diganti dengan MetroTV, dan terdapat sisipan kalimat baru yang bergaris bawah.

Favicon

Pendahuluan

Favicon merupakan suatu icon yang akan tampil pada addres bar. Untuk mengubah gambar ke icon kita bisa dengan cara mengonversi gambar ke icon secara online. Sehingga bentuknya .ico. Dan iconnya juga harus satu folder dengan web HTMLnya.

Script Coding

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>M3118042_Error Page</title>
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”/>
</head>
<body>
<h1>Error</h1>
<p>
This is an error page. This is an error page. This is an error page. This is an error page.
</p>
</body>
<p><a href=”index.html”> Halaman Menu </a></p>
</html>

Hasil Jadi

Kesimpulan

Apabila kita ingin membuat favicon kita harus mengubah dulu menjadi .ico. Dan file iconnya harus satu folder dengan web HTML.

Superscript & Subscript

Pendahuluan

Superscript adalah indeks atas seperti karakter 3 dan 2 pada contoh persamaan di bawah.
Sedangkan Subscript adalah indeks bawah seperti pada karakter 2 dan 4 pada H2SO4.
Untuk membuat superscript menggunakan perintah < sup> dan diakhiri < / sup>.
Sedangkan subscript menggunakan perintah < sub> dan diakhiri dengan < / sub>.

Script Coding

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Superscript & Subscript</title>
</head>
<body>
<h1>Superscript dan Subscript</h1>
<p>Berikut ini contoh penggunaan superscript dan subscript</p>
<p>H<sub>2</sub>SO<sub>4</sub> adalah rumus kimia dari asam sulfat</p>
<p>3x<sup>2</sup>-4x-6=0 adalah contoh persamaan kuadrat</p>
</body>
<p><a href=”index.html”> Halaman Menu </a></p>
</html>

Hasil Jadi

Kesimpulan

Dengan mengunakan subscript kita bisa membuat rumus H2SO4. Dapat mengubah angka 2 dan 4 menjadi indeks bawah. Sedangkan untuk membuat persamaan diatas kita bisa menggunakan superscript sehingga dapat mengubah angka 2 menjadi pangkat atau menjadi indeks atas.

Kutipan

Pendahuluan

Kutipan di dalam HTML dibagi menjadi 2 yaitu Blockquote dan Inline quote. Blockquote ialah kutipan yang yang diletakkan dalam blok tersendiri atau tidak satu paragraf dengan teks lain. Sedangkan Inline Quote adalah quote yang terletak dalam satu paragraf dengan yang lain.
Untuk membuat blockquote yaitu dengan perintah < blockquote cite=”url”> dan diakhiri dengan < /blockquote >. Cite digunakan untuk mencantumkan sumber referensi yang dikutip dan bersifat opsional.
Dan untuk membuat Inline Quote yakni dengan perintah < q> dan diakhiri dengan perintah < / q>.

Script Coding

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Kutipan</title>
</head>
<body>
<h1>Tentang HTML 5</h1>
<p>
HTML merupakan bahasa markup untuk membangun halaman web.
Terdapat perbedaan antara HTML5 dengan HTML4. Jika ingin mengetahui perbedaan bisa dilihat pada web w3school.
</p>
<blockquote cite=”https://www.w3schools.com/html/html5_intro.asp”>
w3school adalah salah satu web yang membantu programer pemula
</blockquote>
<p>
HTML akan menjamin konsistensi dalam penulisan tag dan akan sangat
<q>kompatibel apabila diintegrasikan dengan CSS</q>.
</p>
</body>
<p><a href=”index.html”> Halaman Menu </a></p>
</html>

Hasil Jadi

Kesimpulan

Blockquote berada terpisah dengan paragraf atasnya. Sedangkan Inline quote terdapat pada paragraf kedua dan terdapat tanda kutip diawal dan diakhir quote.

Pre Format Teks

Pendahuluan

Pre Format Teks mempunyai fungsi yang sama dengan Monospaced Font tetapi Pre Format Teks memudahkan kita jika akan membuat banyak baris. Untuk membuat Pre Format Teks kita menggunakan tag < pre> dan < / pre> .

Script Coding

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Pre Format Teks</title>
</head>
<body>
<pre>
&lt;?php<br />
$mangga = &quot;manalagi&quot;;<br />
$lampu = &quot;philips&quot;;<br />
$hewan = &quot;sapi&quot;;<br />
$kuliah = &quot;d3ti&quot;;<br />
$macamobjek = $mangga . $lampu . $hewan . $kuliah;<br />
echo $macamobjek;<br />
?&gt;
</pre>
</body>
<p><a href=”index.html”> Halaman Menu </a></p>
</html>

Hasil Jadi

Kesimpulan

Tampilan pada Pre Format Teks agak sedikit berbeda dengan Monospaced Font yakni di Pre Format Teks terdapat sedikit jarak antar barisnya sehingga lebih enak untuk dilihat. Yang membedakan pada script nya adalah, jika monospace font menggunakan tag < code> dan < / code> maka di Pre Format Teks menggunakan tag < pre> dan diakhiri dengan tag < / pre>.

Monospace

Pendahuluan

Monospace berfungsi untuk mempublikasikan code yang digunakan dalam web tersebut dengan format font yang berbeda dari teks yang ditampilkan dalam web tersebut. Untuk membuat monospace kita dapat menggunakan awalan tag < code> dan mengakhirinya dengan tag < / code>.

Script Coding

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Monospace</title>
</head>
<body>
<code>
&lt;?php<br />
$mangga = &quot;manalagi&quot;;<br />
$lampu = &quot;philips&quot;;<br />
$hewan = &quot;sapi&quot;;<br />
$kuliah = &quot;d3ti&quot;;<br />
$macamobjek = $mangga . $lampu . $hewan . $kuliah;<br />
echo $macamobjek;<br />
?&gt;
</code>
</body>
<p><a href=”index.html”> Halaman Menu </a></p>
</html>

Hasil Jadi

Kesimpulan

Dengan menggunakan tag < code> dan < / code> maka tanda $ , echo dan semua perintah nya akan ditampilkan pada halaman web.

Format Teks

Pendahuluan

Format Teks dibagi menjadi tiga bagian yakni bold atau tebal, italic atau miring, dan underline atau garis bawah. Untuk membuat bold atau tebal kita tinggal menambahkan tag < b> dan diakhiri dengan < /b>. Sedangkan untuk membuat italic atau garis miring kita bisa menggunakan awalan tag < i> dan mengakhiri dengan < /i>. Dan untuk membuat underline atau garis bawah kita bisa mengawali dengan tag < u> dan mengakhirinya dengan tag < /u>.

Script Coding

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Format Teks</title>
</head>
<body>
<p>
<b>Web server</b> merupakan sebuah aplikasi perangkat lunak.
Aplikasi web server ini dijalankan pada sebuah komputer yang di sebut dengan <i>server</i>.
<u>Web server</u> adalah salah satu jenis perangkat lunak yang menyediakan layanan halaman (dokumen) web yang dapat diakses diseluruh dunia melalui internet.
</p>
</body>
<p><a href=”index.html”> Halaman Menu </a></p>
</html>

Hasil Jadi

Kesimpulan

Dengan menggunakan tag < b> dan < /b> kita bisa merubah tulisan Web Server kalimat pertama menjadi <b>Web server</b>, dan dengan menggunakan < u> dan < /u> kita bisa merubah tulisan Web Server kalimat ketiga menjadi <u>Web server</u>, sedangkan dengan menggunakan < i> dan < /i> kita bisa merubah tulisan server pada kalimat kedua menjadi <i>server</i>.