TRAINING. Basic HTML & CSS. Jan-2013 USER BAGIAN 3

(1)

TRAINING

Jan-2013

Basic HTML & CSS

(2)

Training

B A S I C H T M L & C S S

1 BASIC HTML

Dalam pengelolaan web, pengetahuan dasar HTML (Hypertext Markup Language) perlu dikenalkan sebagai bagian tidak terpisahkan dari strukturasi isi berita/artikel pada halaman website. Isi website yang terlihat pada halaman browser merupakan susuan tag-tag khusus html.

Tag HTML umumnya berupa tag yang berpasang-pasangan dan diapit dengan simbol < dan >. Pasangan atau penutup perintah dari sebuah tag ditandai dengan tanda /. Sehingga dapat dicontohkan jika pasangan dari tag <example> adalah </ example >.

Beberapa tag ada yang menggunakan atribut di dalamnya. Contoh : , pada contoh ini

P adalah namatag, sedangkan align adalah nama atribut dan center adalah nilai atribut.

1.1 Text & Paragraph

PARAGRAF (PARAGRAPH)

Tag : merupakan tag yang berfungsi untuk menandakan area pargraph dari sebuah tulisan. Contohnya :

Ini adalah isi dari paragraph html. Diapit oleh dua tag P dengan lebih dari satu kalimat.

PINDAH BARIS (BREAK ROW)

Tag : Tag ini digunakan untuk menurunkan teks sebanyak yang kita inginkan, dengan kata lain satu tag sama dengan anda menekan tombol Enter satu kali. Contohnya :

Mudah-mudahan anda cepat bisa belajar HTML Amin …!

TENGAH (CENTER)

Tag <CENTER></CENTER> : berfungsi untuk meratakan teks ketengah. Untuk mengakhiri penengahan teks (yakni agar teks berikutnya tidak terletak ditengah terus menerus), kita perlu menambahkan tanda penutup berupa tanda slash (/), cara penulisannya adalah : </center>. Contohnya :

<center>Kalimat ini akan terus menerus berada di tengah. Anda bisa menghentikannya dengan menutup tag center tadi.</center>

(4)

Tag Heading <H_> ini digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Ukuran yang ada pada tag heading ada 6 buah ukuran yang paling besar ditunjukan dengan penomoran yang paling kecil yaitu angka 1 dan yang paling kecil ditandai dengan nomor terbesar yaitu 6. Contohnya : <H1>Heading Besar 1</H1> <H2>Heading Besar 2</H2> <H3>Heading Besar 3</H3> <H4>Heading Besar 4</H4> <H5>Heading Besar 5</H5> <H6>Heading Besar 6</H6>

seperti halnya pada tag , Tag Heading juga memiliki atribut. Salah satu atribut yang bisa digunakan adalah atribut align yang bisa bernilai : center, left, right, justify. Cara menuliskan pada dokumen HTMLadalah <h1 align="center">.

GARIS HORISONTAL (HORIZONTAL ROW)

Tag <HR> berfungsi untuk menambahkan garis horisontal yang biasanya diletakkan di bawah sebuah teks maupun objek lainnya. Pada tag <hr> juga bisa ditambahkan atribut-atribut seperti berikut ini :

• Size : Untuk merubah Ketebalan garis • Width : Untuk merubah lebar garis

• Align : Untuk mengatur tata letak teks dalam baris

• Noshade : Untuk merubah agar garis yang dibuat tidak disertai bayangan Dapat dicontohkan seperti bagian berikut ini :

Yayasan Beujroh 

<hr size="5" width=”25%” align ="left" noshade> Jalan Darma No. 27 C 

Kelurahan Kampong Laksana  Banda Aceh - 23122

FONT

Tag berfungsi untuk merubah ukuran, warna dan attribut font dari kalimat/kata yang diinginkan. Contohnya :

Ini kalimat berwarna merah dengan ukuran 12 pixel.

Untuk attribut pewarnaan (color), selain kata-kata dalam bahasa Inggris(RED,BLUE,GREEN etc), anda dapat menggunakan angka hexadesimal RGB dengan format #XXYYZZ.

Dimana XX adalah komponen warna MERAH(RED) dengan nilai dari 00 sampai dengan FF, dan YY adalah komponen warna HIJAU (GREEN) dengan nilai dari 00 sampai dengan FF dan ZZ adalah

(5)

komponen warna BIRU(BLUE) dengan nilai dari 00 sampai dengan FF. Jangan lupa memberikan tanda pagar di awal angka seperti contoh berikut ini :

Ini Merah, Ini Hijau, Ini Biru.

GARIS MIRING (ITALICS)

Tag adalah tag yang berfungsi untuk membentuk tulisan miring. Contohnya :

Kata-kata normal berikut ini seharusnya tidak tertulisMiring

GARIS BAWAH (UNDERLINE)

Tag adalah tag yang berfungsi untuk membentuk tulisan bergaris bawah. Contohnya :

Bukankah belajar dasar HTML itu mudah ?

CETAK TEBAL (STRONG)

Tag adalah tag yang berfungsi untuk membentuk tulisan tercetak tebal. Contoh penggunaanya :

Dan bukankah berbagi ilmu dan amal adalah hal yang menyenangkan ?

1.2 Link & Images

LINK (HYPERLINK)

Tag <a href=””></a> adalah tag HTML bisa digunakan dengan atribut href yang mengacu ke alamat lain. Atribut tambahan dari tag link (hyperlink) adalah target dimana berisi nilai “_blank” untuk membuka tab/browser baru, maupun “_self” untuk membuka halaman browser sendiri. Secara default bila target tidak dinyatakan, maka dianggap sebagai target=”_self”. Contoh penggunaanya :

ini adalah link ke <a href="http://www.facebook.com/" target=”_blank”>Facebook<a/>

IMAGES (IMG)

Tag <img /> adalah tag HTML untuk menampilkan gambar pada halaman web. Terdapat beberapa attribut utama yang dapat dijelaskan sebagai berikut :

• src : alamat url gambar • width : lebar gambar

(6)

• height : tinggi gambar

Penggunaan tag <img /> dapat dicontohkan seperti pada bagian berikut ini :

Dibawah ini seharusnya muncul gambar logo GOOGLE 

<img src=”http://www.google.com/images/srpr/logo3w.png” width=”100px” height=”200px” />

1.3 List & Table

DAFTAR BERANGKA (ORDERED LIST)

Tag Ordered List <OL></OL> adalah tag yang berfungsi menampilkan daftar dengan angka/nomer. Setiap Item daftar ditutup dengan tag List Item <LI></LI> untuk membatasi itemnya. Contoh penggunaannya :

Berikut ini daftar buku-buku yang tersedia :  <OL>

<LI>Buku 1</LI> <LI>Buku 2</LI> <LI>Buku 3</LI> </OL

DAFTAR TIDAK BERANGKA (UN-ORDERED LIST)

Tag Unordered List <UL></UL> adalah tag yang berfungsi menampilkan daftar tanpa angka/nomer. Sama seperti OL, semua item list juga diberi tag List Item <LI></LI> sebagai penandanya. Contoh penggunaannya :

Daftar Buku Sejarah dan Pahlawan Kemerdekaan: <UL> <LI>Perang Padri</LI> <LI>Teuku Umar</LI> <LI>Wolter Monginsidi</LI> <LI>Dan lain-lain</LI> </UL TABEL (TABLE)

Tag <table> berfungsi untuk menampilkan sebuah tabel pada halaman HTML. Sebuah tabel HTML terdiri dari beberapa elemen antara lain <tr>, <th>, dan elemen <td>. Elemen <tr> mendefinisikan baris tabel, elemen <th> mendefinisikan header tabel, dan elemen <td> mendefinisikan sebuah sel tabel. Contoh penggunaannya sebagai berikut :

(7)

<table> <tr> <td>Kolom 1 baris 1</td> <td>Kolom 2 baris 1</td> <td>Kolom 3 baris 1</td> </tr> <tr> <td>Kolom 1 baris 2</td> <td>Kolom 2 baris 2</td> <td>Kolom 3 baris 2</td> </tr> <tr> <td>Kolom 1 baris 3</td> <td>Kolom 2 baris 3</td> <td>Kolom 3 baris 3</td> </tr> </table>

(8)

2 BASIC CSS

CSS (Cascading Style Sheet) adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih indah. Untuk pelatihan basic CSS disini, akan diberikan dalam bentuk Inline stylesheet dimana tag-tag CSS dibentuk dalam penulisan tag didalam elemen HTML sehingga lebih mudah diimplementasikan.

Attribut dalam tag HTML yang akan disisipi adalah tag STYLE. Contohnya :

Ini paragraph dengan style berwarna merah

2.1 Font & Text

FONT FAMILY

Tag font-family merupakan tag css yang berfungsi untuk membentuk font tampilan HTML. Nilai-nilai attribute font-family bisa berisi : Times New Roman, Georgia, Arial, Verdana, Courier New, Lucida Console. Contoh penggunaannya adalah :

ini font Verdana sementara ini font Arial

FONT STYLE

Tag font-style merupakan tag css yang berfungsi untuk menormalkan maupun memiringkan text. Attribute font-style bisa memiliki nilai : normal atau italic. Contoh penggunaannya :

Tegak berdiri Agak miring sedikit

FONT SIZE

Tag font-size merupakan tag css yang berfungsi untuk mengubah ukuran font sesuai dengan nilai attribute yang diberikannya. Contoh penggunaanya adalah :

Tegak Sebesar 100px Miring sebesar 30px

TEXT COLOR

Tag font-color merupakan tag css yang berfungsi untuk merubah warna font sesuai dengan nilai attribute yang diberikannya. Contoh penggunaannya adalah :

(9)

Miring & Hijau

TEXT ALIGNMENT

Tag text-alignment merupakan tag css yang berfungsi untuk mengatur alignment horizontal text. Pilihan nilainya : center, right dan justify.

Merah & tengah Miring & rapat kanan

TEXT DECORATION

Tag text-decoration adalah tag css yang berfungsi untuk menambahkan dekorasi pada text. Pilihan nilai pada attribut ini adalah : overline, line-through, underline, blink. Contoh penggunaannya adalah :

garis bawah dan tengah

Kalimat ini dicoret.

TEXT TRANSFORMATION

Tag text-transformation adalah tag css yang berfungsi untuk menentukan tampilan text berupa huruf besar atau huruf kecil. Nilai attributenya dapat berisi : uppercase, lowercase dan capitalize.

garis bawah dan jadi huruf besar semua

setiap kata dalam kalimat ini berhuruf besar diawal.

TEXT INDENTATION

Tag text-indention adalah tag css yang berfungsi untuk menggeser tampilan text sebesar nilai attributnya. Contoh penggunaannya adalah :

jadi huruf besar semua dengan bergeser 10px

kalimat ini bergeser ke kiri sebesar 100px.

(10)

2.2 Background & Border

BACKGROUND COLOR

Tag background-color adalah tag css yang berfungsi untuk memberikan warna pada latar belakang (background) dari tulisan atau tag HTML lain yang dideklarasikannya. Nilai attribut ini sama seperti pada bagian html diatas yaitu bisa berupa warna dalam bahasa inggris maupun angka hexadesimal. Contoh penggunaanya adalah :

kalimat ini berlatar belakang warna merah.

kalimat ini berlatar belakang warna hijau.

BACKGROUND IMAGE

Tag background-image menentukan gambar untuk digunakan sebagai latar belakang dari elemen HTML yang menyertainya. Contoh penggunaannya adalah :

<p style=”background-image :

url('http://www.google.com/images/srpr/logo3w.png');”> kalimat ini berlatar belakang gambar google.

BACKGROUND REPEAT

Tag background-repeat secara default dapat menyertai tag background-image yang berfungsi untuk memberi nilai repetisi secara horisontal dan vertikal. Contoh penggunaannya adalah :

<p style=”background-image :

url('http://www.google.com/images/srpr/logo3w.png');background-repeat:repeat-y;”>

kalimat ini berlatar belakang gambar google.  bila kalimatnya panjang kebawah, 

maka gambarnya akan ditulis ulang kebawah. 

BACKGROUND POSITION

Tag background-position berfungsi untuk menetapkan posisi gambar latar belakang pada titik tertentu layar. Contoh penggunaannya adalah :

<p

style=”background- image:url('http://www.google.com/images/srpr/logo3w.png');background-repeat:no-repeat;background-position:right top;”>

(11)

bila kalimatnya panjang kebawah,  maka gambarnya akan tetap berada  pada posisi kanan atas.

BACKGROUND

Sekian tag diatas (background-color, background-image,background-repeat, background-position) dapat juga disingkat dengan tag yang lebih pendek bernama background. Contoh penggunaannya adalah sebagai berikut :

<p style=”background:#FF0000

url('http://www.google.com/images/srpr/logo3w.png') no-repeat right top;”> kalimat ini berlatar belakang gambar google. 

bila kalimatnya panjang kebawah,  maka gambarnya akan tetap berada  pada posisi kanan atas.

BORDER STYLE

Tag border-style memiliki fungsi memberikan style garis pembatas. Nilai attributenya dapat berisi antara lain :

• none : Tanpa border

• dotted : Border berbentuk titik (dot)

• dashed : Border berbentuk garis pendek(dashed)

• solid : Border berbentuk garis utuh(solid)

• double : Border bergaris double

contoh penggunaannya dapat dijelaskan sebagai berikut :

kalimat ini berlatar memiliki garis batas.  bila kalimatnya panjang kebawah,  maka garisnya akan tetap mengelilingi  

BORDER WIDTH

Tag border-width digunakan untuk memberikan nilai lebar garis pembatas (border). Contoh penggunaannya :

(12)

 kalimat ini berlatar memiliki garis batas.  bila kalimatnya panjang kebawah,  maka garisnya akan tetap mengelilingi  

BORDER COLOR

Tag border-color berfungsi memberikan warna garis pembatas (border) dari area yang akan dibatasi. Nilainya bisa berupa angka hexadesimal maupun warna dalam bahasa Inggris. Contoh penggunaannya :

 kalimat ini berlatar memiliki garis batas. 

bila kalimatnya panjang kebawah,  maka garisnya akan tetap mengelilingi  

BORDER

Sekian tag diatas (border-color, border-width, border-style) dapat juga disingkat dengan tag yang lebih pendek bernama border. Contoh penggunaannya adalah sebagai berikut :

kalimat ini berlatar memiliki garis batas 5px.  bila kalimatnya panjang kebawah, 

maka garisnya akan tetap mengelilingi.  

2.3 Margin & Padding

MARGIN

Tag margin berfungsi untuk membersihkan daerah sekitar elemen di luar perbatasan (diluar border). Biasanya digunakan untuk memberikan jarak tertentu. Margin tidak memiliki warna latar belakang, dan benar-benar transparan. Contoh penggunaannya adalah :

 kalimat ini berlatar memiliki garis batas 5px. 

bila kalimatnya panjang kebawah,  maka garisnya akan tetap mengelilingi.  pada daerah di luar border memiliki jarak  atas : 10px 

kanan : 20px  bawah : 30px  kiri : 5px

(13)

PADDING

Tag padding membersihkan daerah di sekitar konten tetapi di dalam perbatasan(border) dari elemen HTMLnya. Padding dipengaruhi oleh warna latar belakang dari elemen. Contoh penggunaannya adalah :

 kalimat ini berlatar memiliki garis batas 5px. 

bila kalimatnya panjang kebawah,  maka garisnya akan tetap mengelilingi.  pada daerah di dalam border memiliki jarak  atas : 5px 

kanan : 10px  bawah : 20px  kiri : 10px

TRAINING. Basic HTML & CSS. Jan-2013 USER BAGIAN 3

TRAINING

Jan-2013

Basic HTML & CSS

Table of Contents

Training

1

BASIC HTML

1.1 Text & Paragraph

1.2 Link & Images

1.3 List & Table

2

BASIC CSS

2.1 Font & Text

2.2 Background & Border

2.3 Margin & Padding