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

Transkripsi

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

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

3 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> HEADER (HEADING) Page 3

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

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=" 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 Page 5

6 height : tinggi gambar Penggunaan tag <img /> dapat dicontohkan seperti pada bagian berikut ini : Dibawah ini seharusnya muncul gambar logo GOOGLE <img src= 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 : Page 6

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

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 : Merah & Tegak Page 8

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. Page 9

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 : 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 : kalimat ini berlatar belakang gambar google. 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 : kalimat ini berlatar belakang gambar google. Page 10

11 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 : kalimat ini berlatar belakang gambar google. 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

12 kalimat ini berlatar memiliki garis batas. 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. 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. 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. maka garisnya akan tetap mengelilingi. pada daerah di luar border memiliki jarak atas : 10px kanan : 20px bawah : 30px kiri : 5px Page 12

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. maka garisnya akan tetap mengelilingi. pada daerah di dalam border memiliki jarak atas : 5px kanan : 10px bawah : 20px kiri : 10px Page 13