Favicon, Kutipan Html, dan Warna dalam HTML || BLC TELKOM KLATEN

A. PENDAHULUAN

  • Pengertian
Di hari ini saya dan teman teman mempelajari dan mempraktikkan favicon, kutipan, dan warna pada HTML. 
- Favicon adalah icon atau logo yang muncul/tampil pada tab browser. semuanya menggunakan atau memasang icon favicon nya. agar lebih terlihat menarik. Website yang sudah dikatakan termasuk dalam kategori besar biasanya sudah pasti terpasang favicon di websitenya.

- Secara umum Kutipan adalah pinjaman kalimat atau pendapat/ide/gagasan orang lain yang diambil dari sumber tertentu, satu diantara tujuan mengutip ialah memperkukuh argumen dalam tulisan sendiri. Nahh di HTML juga ada tag kutipan lohh yaitu menggunakan tag <q>, <blockqoute>, <abbr>, dsb.

- HTML Colors adalah mewarnai sebuah Heading, paragraf, dan background colors. Jika ingin mewarnai ketiga tag tadi menggunakan atribut style="nama warnanya"
  • Latar belakang masalah
Mempelajari dan mempraktikkan HTML sesuai dengan target yang sudah di tentukan hari ini

B. MAKSUD DAN TUJUAN

Maksud dari kegiatan ini adalah dengan saat saya membuat website maka sudah tahu dan bisa memasang favicon, kutipan, dan warna dalam HTML


C. RUANG DAN LINGKUP PEKERJAAN

- Favicon

- Kutipan dalam HTML

- HTML colors


D. HASIL YANG DIHARAPKAN

Dapat memahami dan sudah lancar saat mengimplementasikan membuat website


E. METODE PELAKSANAAN

- Briefing

- Membaca dan memahami

- Coding


F. ALAT DAN BAHAN

- Laptop

- Koneksi internet


G. TARGET WAKTU

08.00 - 16.00


H. TAHAPAN PELAKSANAAN

- Breafing yang di pimpin oleh Mas Agus

- Mulai untuk membaca dan memahami referensi di w3schools

> Penjelasan <

- Favicon adalah icon atau logo yang muncul/tampil pada tab browser. semuanya menggunakan atau memasang icon favicon nya. agar lebih terlihat menarik. Website yang sudah dikatakan termasuk dalam kategori besar biasanya sudah pasti terpasang favicon di websitenya.
tag yang di gunakan dalam membuat favicon adalah menggunakan tag <link>
dan ditambah dengan atribut.... contohnya seperti ini :

<link rel="icon" type="image/x-icon" href="Letak filenya">


sebelum di masukkan ke dalam href gambarnya,,,,, anda harus menkonversi terlebih dahulu menjadi format .ico
kalian bisa menggunakan website di bawah ini untuk mengkonversi gambar ke format .ico :







Nahh seperti gambar di atas kalian bisa menyiapkan dulu gambarnya dan sudah dipastikan gambarnya di konversi ke format .ico

Codingannya seperti ini untuk mengundang filenya :


Dan ini adalah hasilnya :


Nahh ketika sudah saya cek hasilnya berhasil terpasang iconnya.......



- Kutipan dalam HTML

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.

Berikut adalah contoh cara penulisan dan penggunaan tag <blockquote> di dalam HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>
 
<body>
<h3>Saya sedang belajar HTML di Duniailkom.com</h3>
<p>HTML atau Hypertext Markup Language adalah dasar dari semua
halaman web di internet.</p>
<p>Berikut adalah defenisi HTML dikutip dari Wikipedia: </p>
<blockquote>HTML or HyperText Markup Language is the standard
markup language used to create web pages.
HTML is written in the form of HTML elements consisting of tags
enclosed in angle brackets.</blockquote>
</body>
 
</html>


Dan Hasilnya seperti gambar dibawah ini :



- HTML Colors
Warna pada HTML akan membuat laman website kamu semakin menarik dan meningkatkan 
user experience. Warna bisa diberikan pada bagian background laman, elemen dan font.
Pewarnaan dalam HTML dapat dilakukan dengan format RGB, HEX, HSL, RGBA, dan HSLA.

contoh penggunaan warna dasar yang dikenali oleh library HTML sebagai berikut :



jika ingin mencoba sendiri, silahkan menggunakan codingan seperti ini :

<h1 style="background-color:Tomato; color:white;text-align:center;">Tomato</h1>

- Text color background 

Untuk memberikan latar belakang warna pada tulisan dapat dilakukan melalui pemberian attribute seperti background-color=value. Contoh Syntax seperti berikut :

<h1 style="background-color:DodgerBlue;">Penggunan Warna</h1>

<p style="background-color:Tomato;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum ipsum quis justo consequat, sit amet ultricies felis luctus. Sed mattis eros nulla, vel ullamcorper nulla tempor non. Suspendisse iaculis consequat viverra. </p>

Hasilnya sebagai berikut :

Penggunaan Warna

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum ipsum quis justo consequat, sit amet ultricies felis luctus. Sed mattis eros nulla, vel ullamcorper nulla tempor non. Suspendisse iaculis consequat viverra. 


- Text color

Pemberian warna pada huruf di text diberikan melalui attribute style dengan syntax sebagai berikut :

<p style="color:red;">Hello World</p>
<p style="color:green;">Lorem ipsum...</p>
<p style="color:blue;">Ut wisi enim...</p>
Hasilnya sebagai berikut :

Hello Word
Lorem Ipsum…
Ut wisi enim


C. Color Value
Seperti yang telah dijelaskan sebelumnya jika Warna dalam HTML bisa ditulis dalam format RGB, HEX, HSL, RGBA, dan HSLA. Untuk valuenya dapat dilakukan dengan syntax sebagi berikut :

RGB syntax : rgb(255, 99, 71)
HEX syntax : #ff6347
HSL syntax : hsl(9, 100%, 64%)
1. HTML RGB
HTML RGB itu mengenali warna berdasarkan nilai dari masing-masing warna Red, Green, dan Blue. Masing-masing warna dapat dibagi ke dalam 255 warna, 0 berarti tidak ada warna dan 255 berarti warna merah penuh.

Misalkan kita menuliskan value sebagai berikut :

color : rgb (255,0,0)
Hal ini menunjukkan warna merah 255, green 0 dan blue 0. Sehingga warna yang muncul adalah Merah. Jika kita mencapurkan warna Red dan Green kita akan mendapatkan warna Yellow. Ingat!!! yang dicampurkan ini adalah panjang gelombangnya bukan berdasarkan pandangan seni (zat kiminya)

Sintax untuk mencampurkan warna Red dan Green ditulis dengan :

color : rgb (255,255,0)
Warna hitam akan muncul jika tidak ada sama sekali warna disana, dan putih akan muncul jika semua warna dimunculkan :

black = rgb (0,0,0)
white = rgb (255,255,255)
Karena masing-masing warna bisa menampilakn 255 level, maka combinasi warna yang bisa ditampilkan melalui HTML adalah :

256 x 256 x 256 = 16.777.216 warna.

Lumayan banyak warna bukan, 16,7 juta warna tentu saja tidak mungkin diberi nama satu-satu persatu. Hal ini yang membuat code RGD jadi penting dalam pewarnaan.

2. HTML HEX
Hex adalah singkatan dari Hexadesimal yang memberikan warna berdasarkan indek 6 digit desimal. Syntaxnya dimulai dari # lalu diikuti 6 angka.

#53,23,21

Secara umum indeks hex dapat diterjemahkan sebagai berikut #RRGGBB, dimana RR mewakili Red, GG mewakili Blue, dan BB mewakili Blue.

Misalkan #430000, maka code hex ini menunjukkan warna merah 43. Untuk warna dasar penuh dituliskan dengan code ff. Misalkan code #00ff00, ini menunjukkan warna Green 255 di RGB karena Red dan Blue-nya kosong.

I. TEMUAN PERMASALAHAN DAN CARA PENYELESAIANNYA

- Team masih kurang aktif saat mau membahas permasalahan yang ada, ada yang masih tidak mau mengutarakan pendapat, permasalahan dan lain lain.


Solusi : Disaat ada permasalaha sebaiknya di utarakan saja,,,,, jangan di pendam sendiri dan jangan sampai kedepannya pasif untuk berdiskusi membahas permsalahan ( Note : ketika mau bertanya harus di cari dulu referensi di internet, jika udah mentok ngga tau, baru ditanyakan....)


J. KESIMPULAN YANG DIDAPAT

-

K. REFERENSI

- W3shools
- E-book HTML5 pemrograman dasar.pdf