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

TRAINING

Jan-2013

Basic HTML & CSS USER BAGIAN 3

Training Basic HTML & CSS

Table of Contents 1 BASIC HTML....................................................3 Font Family.......................................................8 1.1 Text & Paragraph............................................3 Font Style..........................................................8 Paragraf (Paragraph).........................................3 Font Size...........................................................8 Pindah Baris (Break Row)................................3 Text Color.........................................................8 Tengah (Center)................................................3 Text Alignment.................................................9 Header (Heading) .............................................3 Text Decoration................................................9 Garis Horisontal (Horizontal Row)...................4 Text Transformation..........................................9 Font...................................................................4 Text Indentation................................................9 Garis Miring (Italics)........................................5 2.2 Background & Border...................................10 Garis Bawah (Underline)..................................5 Background Color...........................................10 Cetak tebal (Strong)..........................................5 Background Image..........................................10 1.2 Link & Images................................................5 Background Repeat.........................................10 Link (Hyperlink)...............................................5 Background Position.......................................10 Images (IMG)...................................................5 Background.....................................................11 1.3 List & Table....................................................6 Border Style....................................................11 Daftar Berangka (Ordered List)........................6 Border Width...................................................11 Daftar Tidak Berangka (Un-ordered List).........6 Border Color...................................................12 Tabel (Table).....................................................6 Border.............................................................12 2.3 Margin & Padding........................................12 2 BASIC CSS.........................................................8 Margin.............................................................12 2.1 Font & Text.....................................................8 Padding...........................................................13

Page 2


Training BASIC HTML & CSS

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 . 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 : 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 : . Contohnya :

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

HEADER (HEADING)

Page 3


Tag Heading 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 :
Heading Besar 1

Heading Besar 2

Heading Besar 3

Heading Besar 4

Heading Besar 5

Heading Besar 6
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
. GARIS HORISONTAL (HORIZONTAL ROW) Tag
berfungsi untuk menambahkan garis horisontal yang biasanya diletakkan di bawah sebuah teks maupun objek lainnya. Pada tag
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

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


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 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 Facebook IMAGES (IMG) Tag 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

Page 5


•

height : tinggi gambar

Penggunaan tag dapat dicontohkan seperti pada bagian berikut ini : Dibawah ini seharusnya muncul gambar logo GOOGLE

1.3 List & Table DAFTAR BERANGKA (ORDERED LIST) Tag Ordered List
adalah tag yang berfungsi menampilkan daftar dengan angka/nomer. Setiap Item daftar ditutup dengan tag List Item
untuk membatasi itemnya. Contoh penggunaannya :

Berikut ini daftar buku-buku yang tersedia :

Buku 1

Buku 2

Buku 3

DAFTAR TIDAK BERANGKA (UN-ORDERED LIST) Tag Unordered List
adalah tag yang berfungsi menampilkan daftar tanpa angka/nomer. Sama seperti OL, semua item list juga diberi tag List Item
sebagai penandanya. Contoh penggunaannya :

Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

Perang Padri

Teuku Umar

Wolter Monginsidi

Dan lain-lain

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

Page 6


Kolom 1 baris 1 Kolom 2 baris 1 Kolom 3 baris 1



Page 7


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 :

Merah & Tegak

Page 8


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.

Page 9


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 :

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 :

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 :


Page 10


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 :

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.
maka garisnya akan tetap mengelilingi

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

Page 11



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 :


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

pada daerah di luar border memiliki jarak
atas : 10px
kanan : 20px
bawah : 30px
kiri : 5px

Page 12


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 :

pada daerah di dalam border memiliki jarak
atas : 5px
kanan : 10px
bawah : 20px
kiri : 10px

Page 13

Kolom 1 baris 1	Kolom 2 baris 1	Kolom 3 baris 1
Kolom 1 baris 2	Kolom 2 baris 2	Kolom 3 baris 2
Kolom 1 baris 3	Kolom 2 baris 3	Kolom 3 baris 3

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

Recommend Documents

Heading Besar 1

Heading Besar 2

Heading Besar 3

Heading Besar 4

Heading Besar 5

Heading Besar 6