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.

Di Tag link
Di Tag style
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

Atribut-Atribut HTML

Menurut W3School

Attributes provide additional information about HTML elements.

Yang artinya, atribut-atribut HTML itu menyediakan informasi tambahan mengenai elemen HTML yang disertainya.

Pola

<tag atribut=”nilai”>isi tag</tag>

Contoh Penulisan

<p align=”center”>CodeHime</p>

Penjelasan

<p> => Tag
align => Nama Atribut
center => Nilai dari Atribut
CodeHime => isi tag
</p> => Tutup tag

Dalam contoh tersebut, atribut align akan meratakan text dalam paragraf ke tengah (center). Untuk atribut align, ada alternatif lain seperti “left”, “right”, dan “justify” yang memiliki peran masing-masing.

Atribut yang umum digunakan

align

Digunakan pada tag <p> , <table> , <h1> , dll untuk mengatur perataan text.
Contoh :<p align=”center”>CodeHime</p>

href

Digunakan pada tag <a> sebagai hyperlink ke halaman lain.
Contoh : <a href=www.codehime.blogspot.co.id>CodeHime<a>

src

Digunakan pada tag <img>, <video>, dll untuk memberitahukan sumber dari file yang digunakan.
Contoh : <img src=”codehime.png”>

class dan id

Digunakan pada semua tag HTML untuk memberikan identitas khusus.
Contoh :
<div class=”code” id=”hime”> CodeHime</div>
<span id=”code”>Hime</span>

Bisa digunakan sekaligus pada tag yang sama, atau satu per satu juga bisa.

style

Digunakan pada semua tag HTML untuk memberikan styling atau hiasan pada tag tersebut.

Contoh : <button style=”background:blue”>Login</button>

Isi dari atribut style adalah syntax-syntax yang sama persis dengan file css.

Yang perlu diingat adalah

Selalu gunakan lowercase untuk penulisan nama atribut maupun nilai dari atribut.
Selalu gunakan tanda petik dua (quotes) untuk mengapit nilai dari atribut.

Elemen – Elemen HTML

PENGERTIAN ELEMEN HTML

Menurut W3School

An HTML element usually consists of a start tag and end tag, with the content inserted in between.

Artinya kurang lebih, sebuah elemen HTML biasanya terdiri dari tag pembuka, tag penutup dan isi dari tag di antara keduanya.

Pola

<pembuka>isi dari tag</penutup>

Contoh Penulisan

<p> isi paragraf </p>
Identifikasi
<p> => Tag Pembuka
Isi paragraf => Isi dari tag
</p> => Tag penutup

Ingat ya, tag pembuka selalu diapit oleh tanda “<” dan “>” .
Sementara untuk tag penutup kita tambahkan tanda “/” di depan nama tag.

Namun ada lho, tag-tag HTML yang tidak membutuhkan tag penutup ;

Tag <br> atau <br />

Tag ini bernama line break . Fungsinya untuk memberi space / jarak antar element, biasanya antar paragraf.

Tag <hr>

Tag ini berfungsi untuk memberikan jarak dalam bentuk border / garis horizontal

Tag <input/>

Tag ini berfungsi untuk membuat sebuah kotak isian di dalam form

Dan sebagai catatan, walaupun tag-tag html tidak case sensitive (tidak mempedulikan penulisan besar kecil), namun pada umumnya para web developer menggunakan lowercase untuk penulisan nama tag.

Kenalan Dengan HTML 5

1. PENGENALAN HTML 5

Hai sobat Codehime, sebagai langkah awal mempelajari HTML 5 kita akan terlebih dahulu mengenal lebih jauh tentang HTML itu sendiri.

Menurut W3School

HTML is the standard markup language for creating Web pages.

Yang artinya kurang lebih adalah “ HTML adalah Bahasa markup yang digunakan untuk membuat halaman web. “

Menurut Wikipedia

HTML adalah sebuah bahasa markup untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet.

Menurut CodeHime

HTML adalah Bahasa markup yang fungsinya untuk membangun struktur dasar dari halaman web

Sementara itu, HTML 5 sendiri adalah versi pengembangan yang terbaru untuk Bahasa HTML. HTML 5 mulai mencuat sekitar tahun 2014 dengan trobosan-trobosan terbaru menggantikan posisi versi HTML sebelumnya.

2. TAG DASAR HTML 5

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>

<body>
<p>Contoh Paragraf</p>
</body>
</html>

3. PENJELASAN TAG DASAR

<!DOCTYPE html>

Tag ini digunakan untuk memberitahukan kepada browser bahwa kita menggunakan HTML 5

<html>

Tag ini berfungsi untuk membungkus semua tag html yang ada

<head>

Tag ini berfungsi untuk meletakkan informasi meta dari dokumen

<title>

Tag ini berfungsi untuk memberikan judul dokumen

<body>

Tag yang membungkus konten /isi dari halaman web kita

<p>

Tag yang digunakan untuk membuat paragraph

4. PENULISAN TAG HTML

Pada umumnya, tag html diawali dengan tag pembuka dan diakhiri dengan tag penutup

<tagname>….</tagname>

Namun adapula tag yang tidak memerlukan penutup tag, misal input, br dan hr.

<tagname/> atau <tagname>

CodeHime

Style HTML

Heading dan Paragraf HTML

Tag Heading

CodeHime Heading 1

CodeHime Heading 2

Tag Paragraf

Body Section HTML

Contoh Penulisan

Penjelasan

Di Dalam Body

Yang Tidak Boleh

Head Section HTML

Atribut-Atribut HTML

Elemen – Elemen HTML

Kenalan Dengan HTML 5

Popular Posts

Like us on Facebook

Labels

Flickr Images

Cari Blog Ini

Arsip Blog

Laporkan Penyalahgunaan

Video of the Day

Mengenai Saya

Video of the Day

Most Trending