Lompat ke konten Lompat ke sidebar Lompat ke footer

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 fontfont familyfont 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.

6 Contoh Penerapan Tag Style untuk Modifikasi Tampilan Web HTML
Ilustrasi Tag Style HTML

Sebelum memahami lebih dalam materi tentang Memodifikasi Tampilan HTML Menggunakan Tag Style, terlebih dahulu pelajari materi tentang: Menebalkan Teks HTML Menggunakan Tag Strong [klik], Membuat Garis Coret pada Teks HTML Menggunakan Tag Strike [klik], dan Mengelompokkan Elemen HTML Menggunakan Tag Span [klik].

Sintak:
<tagname style="property:value;">

  1. Tag name, yang juga termasuk <p>, <body>, <h1> hingga <h6>, dan lain sebagainya.
  2. Properti yang dipinjam dari CSS seperti warna, ukuran huruf, jenis huruf, dan lain sebagainya.
  3. 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 headingFont family juga termasuk semua nama yang ditemukan dalam ms office ataupun pada perangkat lunak berbasis tulisan lainnya.

Contoh:

<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>

 

<

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.

Contoh:

<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>

 

<

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>

 

<

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 centerleft, 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>

 

<

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>

 

<

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>

 

<

id = "first">

Selamt Siang Sulaiman.

</p>

 

<

class = "second">

Selamat datang Alladeen

</p>

</body>

 

</html>


Artikel ini didedikasikan kepada: Siska Sugiartiningsih, Syalvian Arial Malindo, Vildatul Savana, Vivi Khoriyah, dan Wina Nisrina Nalini.

6 komentar untuk "Memodifikasi Tampilan HTML Menggunakan Tag Style"

  1. Apa yang dimaksud dengan tag style pada dokumen html?

    BalasHapus
    Balasan
    1. Tag 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.

      Hapus
  2. Dimana tag style harus ditempatkan pada dokumen HTML?

    BalasHapus
    Balasan
    1. Tag 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.

      Hapus
  3. Apakah tag style dapat ditempatkan pada bagian body html?

    BalasHapus
    Balasan
    1. Secara 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

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 -