DBC BLOG

Belajar itu mudah, menyenangkan dan pastinya kalian bisa !!!

HTML Favicon

FAVICON

Pengunaan Favicon

Favicon adalah ikon utama yang muncul pada address bar suatu laman web dan merupakan logo dari laman web tersebut. Untuk membuat favicon , terlebih dahulu kalian harus memiliki gambar berupa icon berupa 16×16 pxel, usahakan dalam bentuk .ico.

 

Contoh Script

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTP-8″>
<title>M318027_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 a error page.
</p>
</body>
</html>

Hasil Script

HTML TAG MEMBUAT GARIS HORIZONTAL

GARIS HORIZONTAL

Penggunaan Garis Horizontal

Garis Horizontal biasanya digunakkan untuk pemisah antar bagian dalam halaman web. Garis ini bukanlah image, namun obyek yang dihasilkan secara otomatis oleh tag <hr/>.

Contoh Script

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>DBCBLOG</title>
</head>
<body>
<h1>Mawar</h1>
<hr/>
<img src=”mawar.jpg” hspace=”20″ align=”right” width=”300″ height=”250″ alt=”bunga mawar” />
<p>
Bunga mawar sangatlah indah. Maka sudah sepantasnyalah para wanita sangat menyukainya. Di balik keindahaan 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>
</html>

Hasil Script

HTML TAG MENYISIPKAN GAMBAR

TAG MENYIPSIPKAN GAMBAR

Penggunaan Tag Menyisipkan Gambar

Disini akan membahas cara menampilkan gambar dan mengatur gambar. Dalam menampilkan gambar menggunakkan tag <img scr=””> dan ditutupi dengan </img>, peletakan file foto harus satu folder dengan halaman html yang dibuat. Jika ingin mengatur ukuran gambar maka menggunakan perintah width=” ” untuk lebar gambar dan tinggi gambar menggunakan height=” “.

Untuk mengatur jarak tepi gambar dengan teks, menggunakan atribut hspace=”x” dan vspace=”y”. Atribut hspace digunakan untuk mengatur jarak horizontal antara teks dengan tepi gambar (x dalam satuan pixel). Sedangkan vspace digunakan untuk mengatur jarak vertikal antara tepi gambar dengan teks (y dalam pixel). Sedangkan untuk mengatur floating gambar atau tata letak gambar di tengah, kanan atau kiri dapat menggunakan align=” “. Apabila membuat alternate text cukup menambahkan atribut alt=”alternate text”. Alternate memiliki fungsi menambahkan keterangan pada gambar tersebut.

 

Contoh Script

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Mawar</h1>
<img src=”bunga-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 kecantikkan wanita nan rupawan terkadang tersimpan duri yang tajam. karena itu hati-hatilah dalam memilih wanita.
</p>
</body>
</html>

Hasil Script

HTML SINGKATAN

SINGKATAN

Penggunaan Singkatan

Dalam HTML tedapat tag yang dapat menjelaskan kepada pembaca atau pengunjung web kalian tentang sebuah singkatan yang kalian tulis. Biasanya penjelasan singkatan tersebut muncul sebagai tool tip dalam browser, bergitu kursor didekatkan pada singkatan tersebut. Sedangkan teks singkatan akan ditandai dengan garis bawah (Underline). Untuk menjelaskan abbrevation, gunakan tag <abbr title=”kepanjangan”></abbr>.

Contoh Script

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>News Dot Com – Sebuah Parodi Politik</h1>
<p>
<abbr titile=”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>
</html>

Hasil Script

HTML MENANDAI PERUBAHAN TEKS

MENANDAI PERUBAHAN TEKS

Penggunaan Perubahan Teks

Apabila suatu saat kalian mengubah teks dalam sebuah konten halaman web sebaiknya teks tersebut diberi tanda. Hal ini akan membuat pembaca atau pengunjung situs kalian tahu adanya ralat atau perubahn. Pada HTML ada 2 jenis tanda perubahan teks, yaitu tanda untuk sisipan teks baru dan tanda untuk teks yang telah dihapus. Untuk memberi tanda perubahan pada teks yang berupa sisipan teks baru yaitu dengan cara menuliskan <ins>…</ins>. Sedangkan untuk menandai teks yang telah dihapus dapat menggunakan <del>…</del>.

 

Contoh Script

<!DOCTYPE html>
<html>
<head>
<title></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>
</html>

 

Hasil Script

 

HTML SUPERSCRIPT & SUBSCRIPT

SUPERSCRIPT & SUBSCRIPT

Penggunaan Superscript dan Subscript

Superscript adalah indeks atas seperti karakter 3 dan 2 contoh persamaan diatas. Sedangkan subscript adalah indeks bawah seperti pada karakter 2 dan 4 pada H2SO4. Untuk membuat superscript dengan cara memberikan perintah <sup> …</sup>. Sedangkan subscript dengan perintah <sub>…</sub>.

 

Contoh Script

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Tentang HTML 5</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>
</html>

Hasil Script

HTML MEMBUAT KUTIPAN (QUOTES)

QUOTES

Penggunaan Quotes/Kutipan

Dalam kutipan (quotes). Dalam HTML terdapat 2 jenis yaitu Blockquote dan Inline quote. Blockquote adalah kutipan yang diletakkan dalam blok tersendiri (tidak dalam satu paragraf dengan teks lain). Sedangkan inline quote adalah kutipan yang terletak dalam suatu paragraf. Untuk membuat blockquote caranya dengan memberikan perintah <blockquote cite=”url”> dan diakhiri dengan </blockquote>. Sedangkan inline quote caranya cukup dengan perintah <q>…</q>.

Contoh Script

<!DOCTYPE html>
<html>
<head>
<title></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 perbedaannya bisa dilihat pada web w3school.
</p>
<blockquote cite=”https://wwww.w3schools.com/html/html5_intro.asp”>
w3school adalah salah satu halaman 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>
</html>

 

Hasil Script

HTML PREFORMATTED TEXT

PREFORMATTED TEXT

Penggunaan Preformatted Text

Preformatted Text mempunyai fungsi yang sama dengan Monospaced Font hanya saja bedanya preformatted text lebih memudahkan jikan terdiri dari baris yang banyak. Untuk membuat preformatted text dengan memberikan perintah <pre> dan di akhiri dengan </pre>.

 

Contoh Script

<!DOCTYPE html>
<html>
<head>
<title></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;<b />
?&gt;
<pre>
</body>
</html>

Hasil Script

HTML MONOSPACED FONT

MONOSPACED FONT

Penggunaan Monospaced Font

Monospaced Font. Monospaced Font digunakan jika ingin mempublish code yang digunakan dalam Web tersebut dengan format font yang berbeda dari text yang ditampilkan dalam web tersebut. Untuk membuat monospaced font dapat gunakan perintah <code> dan diakhiri dengan </code>.

 

Contoh Script

<!DOCTYPE html>
<html>
<head>
<title></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;<b />
?&gt;
<code>
</body>
</html>

 

Hasil Script

HTML FORMAT TEKS

FORMAT TEKS

Penggunaan Format Teks pada HTML

Dalam penulisan HTML sangat sering menggunakan format text didalamnya. Baik itu dalam penulisan judul, ataupun isi dari content/halaman dari sebuat website itu sendiri.

Berikut beberapa penjelasan dan contoh dari format text pada html :

  1. Format text bold (tebal). Untuk membuat teks menjadi tebal pada tampilan halaman web menggunakan tag <b>.
  2. Format text italic (miring). Untuk membuat teks miring pada HTML menggunakan tag <i>.
  3. Format text underline (garis bawah). Untuk membuat teks underline/garis bawah pada HTML menggunakn tag <u>.

 

Contoh Script

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>
<b>Web server</b> merupakan sebuah aplikasi perangkat lunak.
Aplikasi web server ini dijalankan pada sebuah komputer yang disebut 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>
</html>

Hasil Script