WHAT'S NEW?
Loading...

Style HTML


Style adalah sebuah tag di HTML yang digunakan untuk mendefinisikan berbagai styling untuk elemen-elemen HTML kita.

Contoh
<style>p{color:orange;}</style>

 Penjelasan
Tag style di atas akan memberikan warna orange pada semua tag Paragraf di halaman kita.

Hasil
Contoh Paragraf yang terkena styling
Penulisan

Ada berbagai cara untuk menuliskan styling yang akan kita gunakan.

  1. Di Tag link
  2. Di Tag style
  3. Menggunakan atribut style

Dari ketiga cara di atas, biasanya para web designer lebih memilih menggunakan file css dari luar untuk styling. Karena selain rapi, kita bisa dengan mudah jika ingin melakukan perubahan script.


Heading dan Paragraf HTML

Tag dasar HTML adalah tag yang sudah hampir pasti ada dalam setiap page.

Tag Heading


Heading adalah tag yang digunakan untuk memberikan judul untuk bagian HTML tertentu. Terdiri dari yang terbesar <h1> , <h2> , sampai yang terkecil <h6>.

Contoh Penulisan
…
<h1>CodeHime Heading 1</h1>
<h2>CodeHime Heading 2</h2>
…
Hasil
…

CodeHime Heading 1

CodeHime Heading 2

 …
Catatan:
Gunakan tag Heading hanya sebagai heading atau judul.

Tag Paragraf


Paragraf adalah tag yang digunakan untuk membuat sebuah paragraf. Ditulis dengan <p>…</p>

Contoh Penulisan
…
<p>CodeHime Paragraf</p>
…
Hasil
…
CodeHime Paragraf
 …
Tag paragraf juga bisa diisi dengan tag lain, misal tag <b> , <i> , <u> , dan <br>. Tujuanya untuk memperindah tampilan dari paragraf yang kita buat.

Kita juga bisa memperindah tampilan dengan menggunakan atribut align. Atribut ini akan mengatur alignment isi paragraph sesuai dengan nilai dari atribut align.
Contoh :

<p align=”justify”>Code Hime Paragraf, Code Hime Paragraf , Code Hime Paragraf , Code Hime Paragraf , Code Hime Paragraf , Code Hime Paragraf , Code Hime Paragraf , Code Hime Paragraf , Code Hime Paragraf , Code Hime Paragraf </p> 
Hasil :

Code Hime Paragraf, Code Hime Paragraf , Code Hime Paragraf , Code Hime Paragraf , Code Hime Paragraf , Code Hime Paragraf , Code Hime Paragraf , Code Hime Paragraf , Code Hime Paragraf , Code Hime Paragraf



Body Section HTML

Pengertian
Tag <body> adalah tag HTML yang berfungsi untuk menampilkan bagian utama atau konten utama dari sebuah halaman.

Tag <body> banyak terdiri atas elemen-elemen HTML lain di dalamnya. Bisa heading, paragraf, tabel, form, dan lain-lain.

Contoh Penulisan

…
<body>
     <h1>Heading</h1>
     <p>Paragraf CodeHime</p>
     <p>Paragraf CodeHime 2</p>
     <p>Paragraf CodeHime 3</p>
</body>
…

Penjelasan

Tag <body> pada contoh, akan menampilkan heading di atas dan 3 buah paragraf di bawahnya.

Di Dalam Body

Tag <body> bisa diisi apa saja, tergantung dari isi halaman yang ingin kita buat. Kita bisa membuat body sederhana hanya berisikan heading dan paragraf, juga bisa membuat halaman kompleks yang terdiri dari beberapa bagian layout dan berisikan berbagai elemen HTML.

Yang Tidak Boleh

Tag <body> tidak boleh berisikan elemen-elemen dari tag <head> , kecuali <script> .
<script src=”” type=””>…</script>
Dalam beberapa kasus, tag <script> sering disisipkan di bagian body, terutama bagian akhir sebelum tag penutup body
…
<script src=”” type=””>…</script>
</body>
…


Head Section HTML

Pengertian

<head> adalah tag HTML yang mendefinisikan kepala dari sebuah page. Di dalamnya berisi informasi-informasi mengenai dokumen HTML itu sendiri.
Contoh
…
<head>
    <meta charset=”utf-8”
    <title>Judul Halaman</title>
</head>
…
Penjelasan

Pada contoh di atas , elemen head berisikan 2 elemen anak, yaitu ; meta dan title

meta
Adalah elemen yang menunjukkan informasi tentang dokumen HTML kita. Dan pada contoh, tag meta memberitahukan bahwa halaman kita akan menggunakan character set (charset) UTF-8.
Selain charset ada juga atribut-atribut lainnya, seperti name, content dll.
title
Seperti namanya, tag title digunakan untuk memberikan judul pada halaman dan akan ditampilkan di bagian tab atas browser Bersama dengan icon web.
Tambahan

Selain meta dan title, elemen head juga bisa digunakan untuk meletakkan file-file yang memiliki hubungan dengan halaman. Misalnya saja file css ataupun javascript, namun beda fungsi file beda pula tag yang digunakan.

Contoh :

css
<head>
      <link rel=”stylesheet” type=”text/css” src=”style.css”>
</head>
Tag Link digunakan untuk memanggil file syle.css dan difungsikan sebagai stylesheet pada halaman
javascript
<head>
   <script type=”text/javascript”> src=”javascript.js”></script>
</head>
Tag script digunakan untuk memanggil file javascript.js untuk digunakan pada halaman
Yang perlu diingat
  • Semua tag beserta atribut HTML selalu ditulis dengan lowercase
  • Kita hanya diperbolehkan menggunakan satu tag head pada setiap halaman



Follow:

Blogger Templates20 Created by ThemeXpose