Penanganan Teks dan Warna Pada HTML
A. Penanganan Teks
HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk pemformatan teks.
v Elemen BR ( Line Break)
Element BR berfungsi untuk ganti baris. Dan element BR ini tidak mempunyai tag penutup.
Sintaks:
<br>
v Elemen B ( Bold )
Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold).
Sintaks:
<b>Teks</b>
v Elemen I (Italic)
Element I berfungsi untuk membuat tampilan teks tercetak miring (italic).
Sintaks:
<i>Teks</i>
v Elemen U ( underline )
Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline).
Sintaks:
<u>Teks</u>
v Element Center
Element CENTER berfungsi untuk menampilkan teks dengan posisi horizontal ditengah.
Sintaks:
<center>Teks</center>
Begini tampilan Website dari elemen br, b, u, i dan center
v Element Font
Element FONT berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf. Element ini mempunyai attribute color untuk merubah warna huruf, face untuk merubah jenis huruf (jika lebih dari satu jenis huruf, huruf harus dibatasi koma), dan size untuk merubah ukuran huruf (pixel).
Sintaks:
<font color="red" face="verdana" size="3"> Politeknik Negeri Padang</font>
Begini Tampilan Websitenya
v Element HR (Horizontal Rule)
Element HR berfungsi untuk membuat suatu garis horizontal. Element ini tidak mempunyai tag penutup dan mempunyai attribute:
>> align untuk menempatkan posisi secara horizontal ("left","center","right")
>> size untuk ukuran ketebalan garis ("pixel")
>> width untuk ukuran panjang garis ("persen")
>> noshade (garis solid)
Sintaks:
<hr align="left" size="3" width="50%"></hr>
v Heading
Heading merupakan salah satu elemen penting di dalam dokumen HTML. Heading didefinisikan menggunakan tag<hn> dan diakhiri dengan</hn>, di mana n menyatakan tipe dengan nilai 1-6. Untuk mengetahui bentuk semua jenis heading, buat kode HTML seperti di bawah ini. Perhatikan, kode HTML ini sengaja diringkas guna memudahkan penulis. Jadi, dalam implementasinya harus mendeklarasikan semua elemen-elemen dasar.
<html>
<head>
<title>
Teks dan Warna
</title>
</head>
<body>
<h1 align="center"><font color="yellow" face="arial">Heading 1</font></h1>
<h2 align="right"><font color="cyan" face="calibri">Heading 2</font></h2>
<h3 align="left">Heading 3</h3>
</body>
</html>
maka tampilan websitenya nya:
v Komentar
Seperti script pemograman yang lainnya, pada script HTML juga dapat disisipkan komentar agar memudahkan dalam mengelola dan memahami script pemrograman. Sebuah komentar tentu tidak akan diproses/diterjemahkan oleh browser. Cara memberika komentar pada HTML adalah:
>> Komentar satu baris : <--! tulis komentar disini -->.
>> Komentar satu baris :
<!-- komentar anda disini-->
v Preformatted Text
Kita bisa memanfaatkan keberadaan tag <pre>. Tag ini akan menampilkan teks dengan font Courier dan tetap mempertahankan spasi serta baris baru.
<html>
<head>
<title>
Teks dan Warna
</title>
</head>
<body>
<pre>
Nama Kelas
Alfi Khairi Wirayuda 3D
Saiful Rahman 3D
Gita Anggraini 3D
</pre>
</body>
</html>
maka tampilan websitenya nya:
v Fontase
HTML menyediakan sejumlah elemen yang dapat dimanfaatkan untuk mengatur font, seperti huruf tebal, huruf miring, garis bawah, dan masih banyak lagi.
Sebagai tambahan, disini juga akan dijelaskan mengenai cara mencetak tag. Seperti diketahui, tag <p> di dokumen secara otomatis akan diterjemahkan sebagai paragraf. Adapun untuk mencetak karakter <p> di layar>, kita perlu menggunakan nama entitas. Sebagai contoh, karakter <dinyatakan dengan nama entitas<dan karakter>dinyatakan dengan>.
v Hyperlink
Untuk membuat Hyperlink sederhana pada web digunakan perintah
<a herf="nama_file_html_yang_dituju.html">Keterangan link</a>
contoh:
<html>
<head>
<title>Latihan 5</title>
</head>
<body bgcolor="blue" text="white">
<h1 align="center"><b>Selamat Datang di SPADA</b></h1>
<font face="verdana" size="3"><p><marquee><i>Sistem Pembelajaran Daring</i></marquee><p>
<p align="justify">Puji Syukur kehadirat Tuhan Yang Mahakuasa karena telah memberikan rahmat-Nya kepada kita sehingga kesempatan kita semua untuk dapat menggunakan kuliah daring dengan menggunakan sistem dapat terlaksana untuk setiap jurusan di Politeknik Negeri Padang.</p>
<p align="justify">Sistem Pembelajaran Daring atau SPADA adalah implementasi Pendidikan Jarak Jauh pada Pendidikan Tinggi yang bertujuan untuk meningkatkan pemerataan akses terhadap pembelajaran yang bermutu. Untuk jangka panjang bahkan dengan sistem pembelajaran daring. SPADA Indonesia memberikan peluang bagi mahasiswa dari satu perguruan tinggi tertentu untuk dapat mengikuti suatu mata kuliah bermutu tertentu dari perguruan tinggi lain dan hasil belajarnyya dapat diakuik sama oleh perguruan tinggi dimana mahasiswa tersebut terdaftar dalam mewujudkan kampus merdeka belajar. Semoga Pemanfaatan sistem SPADA ini dapat dilakukan semaksimal mungkin dan dapat meningkatkan mutu pelaksanaan perkuliahan</p>
<p align="justify">Penulis mengucapkan terima kasih sebesar - besarnya kepada Pimpinan Politeknik Negeri Padang yang sudah membantu menyediakan fasilitas ini sehingga proses belajar mengajar di program studi dapat terlaksana dengan baik dan sesuai dengan standar yang berlaku.</p>
<p align="justify">Kami sangat menyadari keberadaan sistem ini masih banyak kekurangannya dan kedepannya harapan atas masukan yang membangun sangat kami harapkan.</p><br>
<p align="right">Padang, 10 Agustus 2021<br>
<a href="Latihan 4.html">Home</a></p>
</font>
</body>
</html>
Contoh website nya :
nb : hyperlink ada di bawah tanggal dan bisa di klik
v Grouping Element
Tag div dan span digunakan untuk mengelompokkan element-element html. Span digunakan untuk mendefinisikan inline content, sementara div digunakan untuk blocklevel content.
v Karakter Khusus
Di html, kita juga bisa menampilkan karakter-karakter khusus dengan memanfaatkan nama entitas. Tabel berikut memperlihatkan beberapa jenis karakter khusus yang dapat digunakan beserta nama entitasnya.
Karakter | Deskripsi | Nama Entitas |
ȼ | Cent | ¢ |
£ | Pound | £ |
¥ | Yen | ¥ |
€ | Euro | € |
© | Copyright | © |
® | Registered | ® |
™ | trademark | ™ |
B. Penanganan Warna
Pengaturan Background & Backcolor:
<html>
<body bgcolor="...." /background="...."
</body>
</html>
keterangan:
bgcolor = Backround warna
background = Backround gambar
Untuk memberikan warna background, HTML menyediakan atribut bgcolor di tag <body>. Atribut ini dapat diisi dengan nama warna, misalnya red atau kode heksadesimal, misalnya #FFFFFF.
Khusus untuk elemen-elemen lain tertentu, tersedia atribut color yang memungkinkan kita melakukan pewarnaan. Sama seperti bgcolor, nilai atribut ini juga berupa nama warna atau heksadesimal.
Contoh:
<html>
<head>
<title>Latihan 5</title>
</head>
<body bgcolor="blue"
</body>
</html>
Warna Font
Warna font dapat diatur pada BODY dan juga tag FONT. Untuk warna latar belakang teks dapat ditentukan dengan menggunakan atribut bgcolor pada tag body.
Dan untuk warna latar depan teks diatur melalui atribut color pada tag font.
Pemberian warna pada atribut color, bgcolor dan text dapat mengikuti aturan berikut:
>> menggunakan nama warna
>> Menggunakan nilai RGB (Red-green_blue) dengan format "#RRGGBB"
Tabel berikut menunjukkan nilai warna:
Nama Warna | RGB | Nama Warna | RGB |
Aqua | 00FFFF | Navy | 000080 |
Black | 000000 | Olive | 808000 |
Blue | 0000FF | Purple | 800080 |
Funchsia | FF00FF | Red | FF0000 |
Gray | 808080 | Silver | C0C0C0 |
Green | 008000 | Teal | 008080 |
Lime | 00FF00 | Yellow | FFFF00 |
Maroon | 800000 | White | FFFFFF |
Contoh :
Komentar
Posting Komentar