FAVICON

Favicon

Favicon, kependekan dari favorite icon, adalah ikon utama yang muncul pada address bar suatu laman web dan merupakan logo dari laman web tersebut; juga dikenal sebagai shortcut icon, website icon, URL icon, atau bookmark icon. Dengan adanya favicon web akan lebih menonjol dibanding website lain sehingga orang dapat dengan mudah menemukan website Anda. Agar mendapatkan hasil terbaik, tentu ada standar ukuran favicon yang harus Anda terapkan. Sebaiknya Anda menggunakan gambar persegi dengan rasio 16 X 16 pixel agar favicon bisa tampil maksimal di browser internet. Selain itu Anda perlu mengubah format file gambar menjadi .ico agar bisa terbaca oleh browser internet. Terdapat banyak favicon generator yang dapat membantu Anda untuk mengubah gambar Anda menjadi bersegi dan formatnya menjadi .ico. Salah satu favicon generator yang bisa Anda gunakan adalah favicon-generator.org

Contoh Coding

<link rel=”shortcut icon” href=”favicon.ico” type=”favicon.ico”>
<link rel=”icon” href=”favicon.ico” type=”favicon.ico”>
</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>

Screenshot

Kesimpulan

Untuk mendapatkan icon pada website, maka perlu menggunakan favicon. Favicon sendiri sangat berguna untuk pembuat website. Dengan adanya favicon, orang – orang akan mengetahui dengan mudah website yang Anda buat.
Lalu untuk membuat favicon sendiri mudah sekali, seperti pada penjelasan diatas tadi.

PERUBAHAN PADA TEXT

Perubahan Pada Text

Untuk mengubah teks dalam suatu konten halaman web sebaiknya teks tersebut diberi tanda. Dengan itu maka pengunjung akan mengetahui mana yang diralat atau dirubah. Dalam HTML ada dua jenis tanda perubahan teks, yaitu tanda untuk sisipan teks baru dan tanda untuk teks yang telah dihapus. Untuk memberi tanda teks berupa sisipan baru caranya dengan menulis tag < ins > dan diakhiri < /ins >. Sedangkan untuk menandai teks yang telah dihapus menggunakan tag < del > dan diakhiri < /del >.

Contoh Coding

<h1 style=”font-family:Imprint MT Shadow;”> News Dot Com – Sebuah Parodi Politik</h1>
<p style=”font-family:Imprint MT Shadow;”>
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>

Hasil Screenshot

Kesimpulan

Tampilan halaman web pada praktikum ini menampilkan kalimat yang dihapus dengan menggunakan tag < del > dan ditutup tag < /del >.
Selain itu juga menampilkan kalimat yang ditandai dengan garis bawah yang ditulis menggunakan tag < ins > dan ditutup tag < /ins >.

 

SUBSCRIPT DAN SUPERSCRIPT

Membuat Pangkat

Penggunaan subscript dan superscript biasanya digunakan untuk menulis unsur dan senyawa pada kimia.  Agar terlihat perubahannya.Dengan menggunakan tag untuk membuat text menjadi subscript dan < sup >< /sup > untuk membuat text menjadi superscript. Penggunaan subscript dan superscript biasanya digunakan untuk menulis unsur dan senyawa pada kimia.

Contoh Coding

<p>Berikut ini contoh penggunaan superscript dan subscript</p>
<p>H<sub>2</sub>SO<sub>4</sub> adalah rumus kimia dai asam sulfat</p>
<p>3x<sup>2</sup>-4x-6=0 adalah contoh persamaan kuadrat</p>

 

Screenshot

Kesimpulan

Tampilan pada halaman web pada praktikum ini membuat tampilan pada senyawa kimia. Selain itu juga terdapat pangkat. Jadi superscript dan subscript itu berguna untuk penulisan senyawa kimia dan untuk menulis pangkat.

 

PREFORMATTED TEXT

Preformatted Text

Agar browser web menampilkan sesuai dengan dokumen web tersebut di dalam editor teks, maka teks yang bersangkutan harus menggunakan preformatted text. Preformatted text diberikan dengan tanda tag < pre > di awalnya dan < /pre > di akhir teks. Dengan tag tersebut maka teks akan menjaga spasi, baris baru, dan tap sesuai dengan aslinya pada saat di tampilkan dalam browser. Penggunaan dari preformatted teks adalah untuk menampilkan suatu source program dalam web.

Contoh Coding

<pre style=”color:white;”>
&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>

Screenshot

Kesimpulan

Tampilan dalam script di dalam halam web adalah menampilkan contoh coding. Sebenarnya fungsi preformatted ini
sama dengan monospaced text. Hanya saja bedanya lebih rapi karena ada baris yang memisahkan antar teks.

 

Kembali Ke Daftar Isi

 

KOMENTAR

Komentar

Komentar biasanya digunakan untuk sarana dokumentasi. Suatu saat halaman web pasti akan mengalami perubahan, maka untuk itu sangat diperlukan komentar pada halaman web. Untuk membuat komentar di HTML, kita menggunakan awalan < ! – dan penutup – >. Tag komentar ini juga akan berlaku selama belum di temukan tag penutup.

Contoh Coding

<!– ini adalah paragraf pertama –>
<p style=”color:white;font-family:Bradley Hand ITC”><strong>
Hijau adalah warna yang tenang karena biasanya di kaitkan dengan lingkungan dan alam.
Di dalam desain, kita bisa menggunakan warna hijau untuk memberikan kesan segar.
Dan dengan mudah kita bisa memberikan nuansa membumi dengan kombinasi warna hjau dan coklat gelap.
<strong></p>
<br />
<!– ini adalah paragraf kedua –>
<br />
<p style=”color:white; font-family:Bradley Hand ITC”> <strong>
Warna hijau bisa di ibaratkan sebagai musik klasik (atau musik-musik meditasi).
Maka itu berhati – hatilah memadukan merah dan hijau, karena akan sedikit bermasalah.
</body>

Screenshot

Kesimpulan

Kesimpulannya, komentar ini sangat diperlukan apabila suatu saat nanti halaman web mengalami perubahan.
Jadi dengan adanya komentar, maka bisa menandai mana yang akan berubah nantinya.

 

HEADING

Heading

Membuat heading pada HTML dari yang paling besar ke yang terkecil dengan tag < h1 > – < h6 >.
Jadi dalam HTML terdapat heading dengan 6 level. Semakin besar levelnya maka ukuran fontnya semakin kecil.
Heading dalam HTML ini biasanya digunakan untuk menulis judul.

Contoh Coding

<h1 style=”font-family:Goudy Stout;”>Heading 1</h1>
<h2 style=”font-family:Goudy Stout;”>Heading 2</h2>
<h3 style=”font-family:Goudy Stout;”>Heading 3</h3>
<h4 style=”font-family:Goudy Stout;”>Heading 4</h4>
<h5 style=”font-family:Goudy Stout;”>Heading 5</h5>
<h6 style=”font-family:Goudy Stout;”>Heading 6</h6>
<h7 style=”font-family:Goudy Stout;”>Heading 7</h7>
<h8 style=”font-family:Goudy Stout;”>Heading 8</h8>
<h9 style=”font-family:Goudy Stout;”>Heading 9</h9>
<h10 style=”font-family:Goudy Stout;”>Heading 10</h10>

Screenshot

Kesimpulan

Kesimpulan yang dapat diambil, dalam praktikum ini membuat heading yang fungsinya sendiri kebanyakan untuk membuat judul. Namun heading dalam HTML hanya terdapat 6 level, jadi heading h7 – h10 bentuknya sama dengan heading 6.

APA ITU HTML?

HTML adalah kependekan dari Hyper Text Markup Language, yaitu sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web. Si HTML inilah yang menyusun sebuah halaman web menjadi sebagaimana yang kita lihat melalui browser (penjelajah internet). So, belajar HTML dan mengerti bagaimana cara HTML bekerja akan sangat penting jika kamu ingin terjun ke dunia web development.

Disebut Markup Language karena bahasa HTML menggunakan tanda (mark), untuk menandai bagian-bagian dari text. Misalnya, text yang berada di antara tanda tertentu akan menjadi tebal, dan jika berada di antara tanda lainnya akan tampak besar. Tanda ini di kenal sebagai HTML tag.

Jika anda ingin melihat bagaimana sebenarnya HTML, silahkan klik kanan halaman ini, lalu pilih View Page Source (di Browser Mozilla Firefox atau Google Chrome). Akan tampil sebuah halaman baru yang merupakan kode HTML dari halaman ini.

  • 1
  • 2