Memodifikasi Tampilan HTML Menggunakan Tag Style
- 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!!!
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.
<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>
- 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
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 -
- Big things start from small things -
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