Memodifikasi Tampilan HTML Menggunakan Tag Style
Tag style pada HTML membantu untuk melakukan modifikasi tampilan pada dokumen yang kemudian ditampilkan pada layar monitor. Proses modifikasi menggunakan tag style juga termasuk ukuran font, font family, font color, dan lain sebagainya. Tidak hanya teks yang dapat dilakukan modifikasi dengan menggunakan tag style, tetapi juga dapat dilakukan modifikasi pada bagian body dari dokumen html. Berikut diperlihatkan beberapa atribut yang didukung penggunaannya menggunakan tag style.
Sintak: <tagname style="property:value;">
satu, HTML Font Family: digunakan untuk mengubah font style dari teks, dan dapat digunakan untuk pengaturan tag tulisan seperti <p> atau tag heading. Font family juga termasuk semua nama yang ditemukan dalam ms office ataupun pada perangkat lunak berbasis tulisan lainnya.
Contoh:
dua, HTML font size: digunakan untuk mengubah ukuran dari teks dan juga dapat digunakan untuk penulisan tipe tag seperti tag <p> ataupun tag heading. Nilai unit dapat diberikan dalam satuan persen, pixel, ataupun lainnya.
Contoh:
tiga, HTML Font Color: digunakan untuk mengubah warna dari teks dan dapat digunakan untuk teks apapun seperti tag <p> atau tag heading, juga dapat digunakan untuk nama dari dari warna yang digunakan ataupun kode warna, seperti kode warna hexadesimal.
Contoh:
empat, HTML Text Align: digunakan untuk mengubah perataan dari teks termasuk perataan center, left, atapun right.
Contoh:
lima, HTML Background color: atribut ini digunakan untuk mengubah warna dari background ataupun juga web page. Atribut ini juga digunakan bersamaan dengan tag body untuk mengubah seluruh warna dari body html, dan juga dapat digunakan bersamaan dengan tag text untuk mengubah blok warna dari teks.
Contoh:
Contoh:
Sebelum memahami lebih dalam materi tentang Memodifikasi Tampilan HTML Menggunakan Tag Style, terlebih dahulu pelajari materi tentang: Menebalkan Teks HTML Menggunakan Tag Strong, Membuat Garis Coret pada Teks HTML Menggunakan Tag Strike, dan Mengelompokkan Elemen HTML Menggunakan Tag Span.
- Tag name, yang juga termasuk <p>, <body>, <h1> hingga <h6>, dan lain sebagainya.
- Properti yang dipinjam dari CSS seperti warna, ukuran huruf, jenis huruf, dan lain sebagainya.
- Juga nilai atau value yang dipinjam dari CSS.
satu, HTML Font Family: digunakan untuk mengubah font style dari teks, dan dapat digunakan untuk pengaturan tag tulisan seperti <p> atau tag heading. Font family juga termasuk semua nama yang ditemukan dalam ms office ataupun pada perangkat lunak berbasis tulisan lainnya.
<html>
<head>
<title>
Font Family
</title>
</head>
<body>
<h1
style="font-family:commanders;">
Halo Semua.
</h1>
<h2
style="font-family:Chaparral Pro Light;">
Halo Semua.
</h2>
<h3
style="font-family:algerian;">
Halo Semua.
</h3>
<p
style="font-family:Castellar;">
Hai Orang Asing!!!
</p>
</body>
</html>
Output:Halo Semua.
Halo Semua.
Halo Semua.
Hai Orang Asing!!!
<html>
<head>
<title>
Font Size
</title>
</head>
<body>
<h1
style="font-size:80%;">
Halo Semuanya.
</h1>
<h2
style="font-size:150%;">
Halo Semuanya.
</h2>
<h3
style="font-size:20px;">
Halo Semuanya.
</h3>
<p
style="font-size:30px;">
Halo Semuanya.
</p>
</body>
</html>
Output:Halo Semuanya.
Halo Semuanya.
Halo Semuanya.
Halo Semuanya.
tiga, HTML Font Color: digunakan untuk mengubah warna dari teks dan dapat digunakan untuk teks apapun seperti tag <p> atau tag heading, juga dapat digunakan untuk nama dari dari warna yang digunakan ataupun kode warna, seperti kode warna hexadesimal.
Contoh:
<html>
<head>
<title>
Font Color
</title>
</head>
<body>
<h1
style="color:red;">
Halo Semua.
</h1>
<h2
style="color:#8CCEF9;">
Halo Semua.
</h2>
<h3
style="color:green;">
Halo Semua.
</h3>
<p
style="color:#810CA6;">
Halo Semua.
</p>
</body>
</html>
Output:Halo Semua.
Halo Semua.
Halo Semua.
Halo Semua.
empat, HTML Text Align: digunakan untuk mengubah perataan dari teks termasuk perataan center, left, atapun right.
Contoh:
<html>
<head>
<title>
Text Align
</title>
</head>
<body>
<h1
style="text-align:left;">
Halo Semuanya.
</h1>
<h2
style="text-align:center;">
Halo Semuanya.
</h2>
<p
style="text-align:right;">
Selamat Pagi Penderitaan.
</h2>
</body>
</html>
Output:Halo Semuanya.
Halo Semuanya.
Selamat Pagi Penderitaan.
lima, HTML Background color: atribut ini digunakan untuk mengubah warna dari background ataupun juga web page. Atribut ini juga digunakan bersamaan dengan tag body untuk mengubah seluruh warna dari body html, dan juga dapat digunakan bersamaan dengan tag text untuk mengubah blok warna dari teks.
Contoh:
<html>
<head>
<title>
Background Color
</title>
</head>
<body
style="background-color:#616A6B;">
<h1
style="font-family:commanders;
background-color:yellow;">
Hai Jamila.
</h1>
<h2
style="font-family:algerian;
background-color:cyan;">
Hai Jamila.
</h2>
<p
style="font-family:Castellar;
background-color:green;">
Hai Jamal!.</p>
</body>
</html>
Penerapan CSS
Setelah mempelajari bagaimana menggunakan atribut style untuk penggunaan kode CSS pada elemen HTML, maka sekarang akan dipelajari bagaimana cara menggunakan kode CSS itu sendiri. Properti CSS dapat dipanggil pada bagian tag style yang terdapat di dalam tag head. Setiap elemen CSS akan menyediakan properti unik dengan cara menyebutkan tag unik yang mengikutinya seperti h1 atau p. Dan jika properti yang disebut lebih dari satu properti, maka akan dilakukan dengan cara memberikan tanda menggunakan id atau class yang berfungsi untuk membedakan properti tersebut terhadap properti lainnya.Contoh:
<html>
<head>
<title>
CSS
</title>
<!--Properti CSS diterapkan
dalam tag style-->
<style>
body
{
background-color: #616A6B;}
h1
{
font-family: commanders;
background-color: yellow;}
h2
{
font-family: algerian;
background-color: cyan;}
#first
{
font-family: Castellar;
background-color: green;
color: blue;}
.second
{
text-align: right;
background-color: white;
font-size: 30px;
color: red;}
</style>
</head>
<body>
<h1>
Hai Semuanya.
</h1>
<h2>
Hai Semuanya.
</h2>
<p
id = "first">
Selamt Siang Sulaiman.
</p>
<p
class = "second">
Selamat datang Alladeen
</p>
</body>
</html>
Baca Juga:
Memodifikasi tampilan halaman web menggunakan tag gaya adalah salah satu aspek penting dalam pengembangan situs web. Hal ini memungkinkan pengembang untuk mengubah penampilan elemen-elemen halaman seperti teks, gambar, dan tata letak secara dinamis. Penggunaan tag gaya di dalam dokumen HTML memberikan fleksibilitas dalam mendesain halaman web sesuai dengan keinginan atau kebutuhan pengunjung. Dalam artikel ini, akan dibahas bagaimana tag gaya digunakan untuk memodifikasi tampilan HTML, serta pentingnya pemahaman konsep dasar mengenai hal tersebut.
Pada dasarnya, tag gaya digunakan untuk menyematkan aturan desain langsung pada elemen-elemen dalam sebuah halaman web. Dengan mengaplikasikan tag gaya ini, pengembang dapat memberikan perintah spesifik mengenai warna, ukuran, jarak, jenis huruf, dan berbagai elemen tampilan lainnya. Tag gaya ini sering digunakan di dalam dokumen HTML untuk mengubah berbagai properti elemen secara lebih fleksibel tanpa memerlukan pengaturan eksternal yang kompleks.
Tag gaya umumnya diletakkan di dalam elemen head dalam dokumen HTML. Meskipun tag ini bisa juga diterapkan di dalam elemen-elemen tertentu di dalam tubuh halaman, menempatkan tag gaya dalam elemen head memiliki kelebihan karena dapat mengatur tampilan seluruh halaman web secara seragam. Hal ini memudahkan pengaturan desain secara global tanpa harus mengubah setiap elemen satu per satu. Sebagai contoh, pengaturan warna latar belakang atau font utama untuk seluruh halaman web bisa dilakukan dengan menambahkan aturan gaya di dalam elemen head.
Salah satu alasan mengapa penggunaan tag gaya sangat penting adalah karena memberikan pengembang kontrol lebih besar atas tampilan halaman web tanpa mengubah struktur HTML itu sendiri. HTML berfungsi untuk menyusun elemen-elemen pada halaman, sementara tag gaya memungkinkan elemen-elemen tersebut ditampilkan dengan cara yang lebih menarik dan sesuai dengan tujuan desain. Dengan menggunakan tag gaya, tampilan halaman web bisa disesuaikan untuk menciptakan pengalaman visual yang lebih baik bagi pengunjung.
Selain itu, tag gaya memungkinkan pengaturan elemen-elemen dalam halaman web menjadi lebih konsisten dan mudah dipelihara. Pengaturan gaya yang diterapkan pada dokumen HTML dapat dilakukan secara global, artinya perubahan satu kali pada aturan gaya dapat mempengaruhi banyak elemen di seluruh halaman. Hal ini sangat bermanfaat bagi pengembang yang ingin menjaga konsistensi desain pada berbagai bagian halaman tanpa perlu mengubah setiap elemen satu persatu. Proses pemeliharaan dan pembaruan halaman web menjadi lebih mudah, terutama ketika situs web berkembang dan membutuhkan perubahan desain.
Penggunaan tag gaya juga memberikan fleksibilitas dalam mendesain elemen-elemen responsif yang dapat menyesuaikan dengan berbagai ukuran layar perangkat. Misalnya, elemen-elemen pada halaman web bisa diatur untuk menyesuaikan lebar layar perangkat pengguna, sehingga tampilan situs web tetap nyaman dilihat di berbagai jenis perangkat, seperti ponsel pintar atau komputer meja. Dengan menggunakan tag gaya, elemen-elemen HTML dapat dibuat lebih fleksibel, yang pada gilirannya meningkatkan pengalaman pengguna ketika mengakses situs web.
Namun, meskipun penggunaan tag gaya memiliki banyak kelebihan, ada beberapa hal yang perlu diperhatikan saat mengimplementasikannya dalam dokumen HTML. Penggunaan aturan gaya yang tidak terorganisir dengan baik dapat menyebabkan masalah dalam pemeliharaan dan pengembangan jangka panjang. Oleh karena itu, pengembang perlu memiliki pemahaman yang baik mengenai cara mengorganisir aturan gaya secara efisien. Hal ini termasuk memahami cara mengelompokkan aturan gaya yang memiliki kesamaan fungsi dan menghindari pengulangan aturan gaya yang tidak perlu.
Salah satu prinsip penting dalam memodifikasi tampilan HTML menggunakan tag gaya adalah pemisahan antara struktur HTML dan tampilan. Struktur HTML seharusnya digunakan untuk menentukan elemen-elemen yang ada dalam halaman, sedangkan gaya atau penampilan sebaiknya dikelola menggunakan tag gaya. Pemisahan ini tidak hanya mempermudah pengelolaan dan pemeliharaan situs web, tetapi juga memungkinkan pengembang untuk membuat desain yang lebih fleksibel dan mudah beradaptasi dengan perubahan kebutuhan.
Selain itu, salah satu cara untuk mengoptimalkan penggunaan tag gaya adalah dengan memanfaatkan gaya yang disertakan dalam file terpisah. Penggunaan file gaya eksternal memungkinkan pengembang untuk membuat aturan gaya yang terpisah dari dokumen HTML utama. Hal ini memiliki beberapa keuntungan, termasuk meningkatkan performa halaman web, karena file gaya hanya perlu dimuat sekali dan dapat digunakan untuk semua halaman dalam situs web. Selain itu, pemisahan file gaya ini memudahkan pengelolaan dan pembaruan desain situs web, terutama pada proyek-proyek yang lebih besar dengan banyak halaman.
Tag gaya juga sangat berguna untuk menciptakan tampilan halaman yang lebih dinamis. Dengan menggunakan berbagai aturan gaya, elemen-elemen seperti gambar, teks, dan tombol dapat diposisikan dengan lebih tepat dan responsif terhadap interaksi pengguna. Penggunaan animasi dan transisi juga memungkinkan elemen-elemen tersebut bergerak atau berubah ketika pengguna berinteraksi dengan halaman web. Hal ini dapat meningkatkan keterlibatan pengunjung dan memberikan pengalaman yang lebih menarik saat mengakses situs web.
Namun, penggunaan tag gaya tidak boleh berlebihan. Penerapan aturan gaya yang terlalu rumit atau berlebihan dapat memperlambat waktu muat halaman web dan mengurangi kinerja keseluruhan situs. Oleh karena itu, pengembang perlu memastikan bahwa penggunaan tag gaya dilakukan secara efisien dan sesuai dengan tujuan desain yang diinginkan. Menggunakan aturan gaya yang sederhana dan terorganisir dengan baik dapat membantu mengurangi beban pada halaman web dan memastikan pengunjung dapat mengakses situs dengan cepat.
Di samping itu, penggunaan tag gaya juga harus memperhatikan aksesibilitas. Desain yang baik bukan hanya soal penampilan visual, tetapi juga memastikan bahwa situs web dapat diakses oleh semua pengguna, termasuk yang memiliki keterbatasan penglihatan atau keterbatasan lainnya. Oleh karena itu, pengembang perlu mempertimbangkan kontras warna, ukuran teks, dan elemen-elemen lainnya agar halaman web tetap dapat diakses dengan mudah oleh semua orang.
Secara keseluruhan, penggunaan tag gaya dalam memodifikasi tampilan HTML merupakan bagian penting dalam pengembangan situs web. Tag gaya memberikan pengembang kemampuan untuk mengubah penampilan elemen-elemen dalam halaman secara dinamis dan fleksibel. Dengan pemahaman yang baik tentang cara menggunakan tag gaya, pengembang dapat menciptakan desain yang menarik, konsisten, dan responsif yang akan meningkatkan pengalaman pengguna secara keseluruhan. Pemisahan antara struktur HTML dan gaya, serta penggunaan file gaya eksternal, akan membantu dalam menjaga keteraturan dan efisiensi dalam pengelolaan situs web.
Referensi Tambahan:
- 4 Atribut Utama Penggunaan Tag Tfoot pada HTML
- 15 Atribut Utama Penggunaan Tag TH pada HTML
- 4 Atribut Utama Penggunaan Tag Thead pada HTML
- Cara Mudah Mengatur dan Menampilkan Waktu Menggunakan Tag Time HTML
- Cara Mudah Membuat Judul pada Dokumen HTML Menggunakan Tag Title
- Cara Membuat Teletype Teks pada HTML Menggunakan Tag TT
- 2 Contoh Pembuatan Garis Bawah pada Teks Menggunakan Tag U HTML
Artikel ini akan dibaca oleh: Siska Sugiartiningsih, Syalvian Arial Malindo, Vildatul Savana, Vivi Khoriyah, dan Wina Nisrina Nalini.
6 komentar untuk "Memodifikasi Tampilan HTML Menggunakan Tag Style"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Apa yang dimaksud dengan tag style pada dokumen html?
BalasHapusTag STYLE pada HTML digunakan untuk mendefinisikan informasi style pada kode CSS untuk sebuah dokumen. Dengan menggunakan tag style user dapat menentukan bagaimana elemen HTML harus dirender pada browser.
HapusDimana tag style harus ditempatkan pada dokumen HTML?
BalasHapusTag STYLE pada HTML dapat digunakan untuk mendeklarasikan style sheet dalam dokumen HTML. Dimana setiap dokumen HTML dapat berisi beberapa tag style, dan setiap tag SYTLE harus ditempatkan diantara tag HEAD atau elemen NOSCRIPT yang merupakan elemen turunan dari elemen HEAD pada dokumen HTML.
HapusApakah tag style dapat ditempatkan pada bagian body html?
BalasHapusSecara harfiah tidak ada yang salah jika menempatkan tag SYTLE di dalam bagian body HTML. Hanya saja masalah yang sering muncul jika SYTLE ditempatkan pada bagian body adalah dokumen HTML tidak dapat benar-benar membatasi ruang lingkup dari SYTLESHEET pada dokumen HTML.
Hapus