HTML Styles – CSS

Lihat! Gaya dan warna

Teks ini adalah di Verdana dan merah

Teks ini adalah di Times dan biru

Teks ini adalah 30 piksel tinggi


Cobalah Sendiri – Contoh

Menggunakan gaya dalam HTML
Bagaimana menambahkan informasi gaya dalam bagian <head>.

Link yang tidak digarisbawahi
Cara membuat link yang tidak digarisbawahi, dengan atribut style.

Link ke style sheet eksternal
Cara menggunakan tag <link> untuk link ke style sheet eksternal.


Styling HTML dengan CSS

CSS diperkenalkan bersama-sama dengan HTML 4, untuk menyediakan cara yang lebih baik untuk elemen HTML gaya.

CSS dapat ditambahkan ke HTML dengan cara sebagai berikut:

  • Inline – menggunakan atribut gaya dalam elemen HTML
  • Internal – menggunakan elemen style di bagian <head>
  • Eksternal – menggunakan file CSS eksternal

Cara yang lebih disukai untuk menambahkan CSS untuk HTML, adalah untuk menempatkan sintaks CSS pada file CSS yang terpisah.

Namun, dalam tutorial HTML kita akan belajar CSS menggunakan atribut style. Hal ini dilakukan untuk menyederhanakan contoh. Hal ini juga membuat lebih mudah bagi Anda untuk mengedit kode dan mencoba sendiri.


Inline Styles

Sebuah gaya inline dapat digunakan jika gaya yang unik yang akan diterapkan ke satu kejadian tunggal dari sebuah elemen.

Untuk menggunakan gaya inline, gunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. Contoh di bawah ini menunjukkan bagaimana untuk mengubah warna teks dan margin kiri paragraf:

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>


Contoh HTML Style – Warna Background

background-color property mendefinisikan warna latar belakang untuk elemen:

Contoh

<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>


HTML Style Example – Font, Color and Size

font-family, color, dan properti font-size mendefinisikan huruf, warna dan ukuran suatu teks pada elemen:

Example

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

Properti font-family, color, and font-size menggantikan tag “<font>”.


Contoh HTML Style – Text Alignment

Properti text-align property menentukan keselarasan horizontal suatu elemen teks:

Contoh

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Properti text-align menggantikan tag <center>


Internal Style Sheet

Sebuah style sheet internal yang dapat digunakan jika satu dokumen tunggal memiliki gaya yang unik. Gaya internal didefinisikan dalam bagian <head> halaman HTML, dengan menggunakan tag style, seperti ini:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>


Eksternal Style Sheet

Sebuah style sheet eksternal sangat ideal bila gaya diterapkan pada banyak halaman. Dengan style sheet eksternal, kita dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian <head>::

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


Tag HTML Style

Tag

Description

<style>

Mendefinisikan informasi style untuk dokumen

<link>

Mendefinisikan hubungan antara dokumen dan sumber daya eksternal

Iklan

HTML < HEAD >

Cobalah Sendiri – Contohnya

<title> – Menentukan judul untuk dokumen HTML
Gunakan tag <title> untuk menentukan judul untuk dokumen.
<base> – Default URL dan target untuk semua link
Gunakan tag <base> untuk menentukan URL default dan target default untuk semua link pada halaman.
<meta> – Menyediakan metadata untuk dokumen HTML
Gunakan elemen <meta> untuk menentukan deskripsi, kata kunci, penulis, dan set karakter dokumen.


Elemen HTML <head>
Elemen <head> merupakan wadah untuk semua elemen kepala. Elemen di dalam <head> dapat mencakup script, menginstruksikan browser di mana untuk menemukan style sheet, memberikan informasi meta, dan banyak lagi.
Tag berikut dapat ditambahkan ke bagian kepala: <title>, <style>, <meta>, <link>, <script>, <noscript>, dan <base>.


Elemen HTML <title>
Tag <title> mendefinisikan judul dokumen.
Unsur <title> diperlukan dalam semua HTML / XHTML dokumen.
Unsur <title>:
  • mendefinisikan judul di toolbar browser
  • memberikan judul untuk halaman ketika ditambahkan ke favorit
  • menampilkan judul untuk halaman dalam pencarian hasil mesin
Sebuah dokumen HTML sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document……
</body>

</html>


Elemen HTML <base>
Tag <base> menentukan alamat default atau target default untuk semua link pada halaman:
<head>
<base href=”http://www.w3schools.com/images/”><base target=”_blank”>
</head>


Elemen HTML <link>
Tag <link> mendefinisikan hubungan antara dokumen dan sumber daya eksternal.
Tag <link> paling digunakan untuk link ke style sheet:
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>


Elemen HTML <style>
Tag <style> digunakan untuk mendefinisikan informasi style untuk dokumen HTML.
Di dalam elemen style Anda menentukan bagaimana elemen HTML harus membuat dalam browser:
<head>
<style type=”text/css”>
body {background-color:yellow}
p {color:blue}
</style>
</head>


Elemen HTML <meta>
Metadata adalah data (informasi) tentang data.
Tag <meta> menyediakan metadata tentang dokumen HTML. Metadata tidak akan ditampilkan pada halaman, tetapi akan parsable mesin.
Meta elemen biasanya digunakan untuk menentukan deskripsi halaman, kata kunci, penulis dokumen, terakhir diubah, dan metadata lainnya.
Metadata dapat digunakan oleh browser (bagaimana menampilkan konten atau halaman reload), mesin pencari (kata kunci), atau layanan web lainnya.
tag <meta> selalu masuk ke dalam elemen <head>.
<meta> Tags – Contoh Penggunaan
Tentukan kata kunci untuk mesin pencari:
<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>
Tentukan deskripsi halaman web Anda:
<meta name=”description” content=”Free Web tutorials on HTML and CSS”>
Tentukan penulis halaman:
<meta name=”author” content=”Hege Refsnes”>
Segarkan mendokumentasikan setiap 30 detik:
<meta http-equiv=”refresh” content=”30″>


Elemen HTML <script>
Tag <script> digunakan untuk mendefinisikan script sisi klien, misalnya JavaScript a.
Unsur <script> akan dijelaskan dalam bab berikutnya.


HTML kepala Elements
Label
Deskripsi
Mendefinisikan informasi tentang dokumen
Mendefinisikan judul dokumen
Mendefinisikan sebuah alamat default atau target default untuk semua link pada halaman
Mendefinisikan hubungan antara dokumen dan sumber daya eksternal
Mendefinisikan metadata tentang dokumen HTML
Mendefinisikan script sisi klien
Mendefinisikan informasi style untuk dokumen

HTML Links

Link yang ditemukan di halaman web hampir semua. Link memungkinkan pengguna untuk mengklik jalan mereka dari halaman ke halaman.

Cobalah Sendiri – Contoh

HTML Link
Cara membuat link dalam sebuah dokumen HTML.
(Anda dapat menemukan lebih banyak contoh di bagian bawah halaman ini)


HTML Hyperlink (Link)

Tag <a> HTML mendefinisikan hyperlink.
Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat Anda klik untuk melompat ke dokumen lain.
Bila Anda memindahkan kursor di atas link di halaman Web, panah akan berubah menjadi tangan kecil.
Atribut yang paling penting dari elemen <a> adalah atribut href, yang menunjukkan tujuan link.
Secara default, link akan muncul sebagai berikut di semua browser:

  • Link belum dikunjungi digarisbawahi dan biru
  • Sebuah link dikunjungi digarisbawahi dan ungu
  • Link aktif digarisbawahi dan merah

HTML Link Sintaks

Kode HTML untuk link sederhana. Ini terlihat seperti ini:

<a href=” url “> Link text</a>

Atribut href menentukan tujuan link.

Contoh

yang akan menampilkan seperti ini: W3Schools Kunjungan
Mengklik hyperlink ini akan mengirim pengguna ke situs W3Schools ‘.
Tip: The “Link teks” tidak harus berupa teks. Hal ini dapat menjadi gambar atau elemen HTML lainnya.


HTML Link – Atribut Target

Atribut target menentukan di mana untuk membuka dokumen terkait.
Contoh di bawah akan membuka dokumen terkait dalam jendela browser baru atau tab baru:

Contoh

<a href=”http://www.smilecodes.blogspot.com /” target=”_blank”> smilecodes!</a>


HTML Link – Atribut id

Atribut id dapat digunakan untuk membuat bookmark dalam dokumen HTML.
Tip: Bookmark tidak ditampilkan dalam cara yang khusus. Mereka terlihat bagi pembaca.

Contoh

Jangkar dengan id dalam sebuah dokumen HTML:

<a id=”tips”>Useful Tips Section</a>

Membuat link ke “Bagian Tips Berguna” di dalam dokumen yang sama:

<a href=”#tips”>Visit the Useful Tips Section</a>

Atau, membuat link ke “Bagian Tips Berguna” dari halaman lain:

<a href=”http://www. smilecodes.blogspot.com/html_links.htm#tips”>
Visit the Useful Tips Section</a>

Catatan Dasar – Tips Berguna

Catatan:Selalu menambahkan trailing slash untuk referensi subfolder. Jika Anda menghubungkan seperti ini: href = “http://www. smilecodes.blogspot.com/html”, Anda akan menghasilkan dua permintaan ke server, server pertama akan menambahkan garis miring ke alamat tersebut, dan kemudian membuat permintaan baru seperti ini : href = “http://www. smilecodes.blogspot.com/html/”.


Contoh lainya

Gambar sebagai link
Cara menggunakan gambar sebagai link.
Link ke lokasi pada halaman yang sama
Bagaimana link ke bookmark.
Keluar dari bingkai
Bagaimana untuk keluar dari bingkai (jika situs Anda terkunci dalam bingkai).
Membuat link mailto
Bagaimana link ke pesan email (hanya akan bekerja jika Anda memiliki mail yang terinstal).
Membuat link mailto 2
Link lain mailto.


HTML Link Tags

Label
Deskripsi

Mendefinisikan hyperlink