HTML (HYPERTEXT MARKUP LANGUAGE)
A. World Wide Web
Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya
di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang
beragam di seluruh dunia untuk dapat berkomunikasi.
World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan
paling populer. WWW bekerja merdasarkan pada tiga mekanisme berikut:
¾ Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer
networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.
¾ Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource
Locator) yang di gunakan sebagai standard alamat internet.
¾ HTML digunakan untuk membuat document yang bisa di akses melalui web.
B. Pengenalan HTML
Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan
document web, yang bisa anda lakukan dengan HTML yaitu:
¾ Mengontrol tampilan dari web page dan contentnya.
¾ Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.
¾ Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi
secara online.
¾ Menambahkan object-object seperti image, audi, video dan juga java applet dalam
document HTML.
C. Browser dan Editor
Browser
Browser merupakan software yang di install di mesin client yang berfungsi untuk
menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan
biasanya Internet Explorer, Netscape Navigator dan masih banyak yang lainya.
Editor
Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang
bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.
D. BASIC TAG HTML
D.1. Struktur HTML Document
Document HTML bisa di bagi mejadi tiga bagian utama:
HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML
<HTML> </HTML>
HEAD
Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini
biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. BENGKEL INTERNET PENS-ITS
Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi
tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan
lainyan pada tag META.
BODY
Document body di gunakan untuk menampilkan text, image link dan semua yang akan di
tampilkan pada web page.
D.2. Basic HTML Element
Block Level Element
Block level element yang sering di gunakan : Heading (H1 sampai H6)
Paragraf (P) List Item(LI)
List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang
tidak berurutan (unordered list).
Ada dua macam list yang bisa anda tambahkan ke document HTML:
1. Unordered List (Bullet) :
2. Ordered List (Numbering)
Contoh :
Tag Attribute Value Description
<UL> TYPE SQUARE Bullet Kotak
DISC Bullet Titik
CIRCLE Bullet Lingkaran
Tag Attribute Value Description
<OL> TYPE I i Upper Roman Lower Roman
A a Upercase Lowercase
<OL> START n Begin Number
Definition List
Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag menentukan definition
term serta <DD> tag menentukan definition itu sendiri.
Horizontal Rules(HR)
Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam document HTML.
Attribute Description
Position menetukan posisi dari HR, dengan value : canter |
right | left.
Width Untuk menentukan panjang HR default 100%
Size Untuk menentukan tebal dari HR dalam pixel
Noshad Efek bayangan.
D.3. Pemformatan Page Break
Tag <BR> di gunakan untuk memulai baris baru pada document HTML, tag ini fungsinya
mirip dengan carriage return. BENGKEL INTERNET PENS-ITS
Font
Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML
seperti color, size, style dan lainya.
Contoh:
Attribute Description
color Untuk menentukan warna font, anda bisa
menggunakan nama font atau hexadecimal
(#000000 – #ffffff)
size Untuk menentukan ukuran dari font 1 – 7
face Untuk menentukan jenis font biasanya dalam satu list
ada beberapa font dan akan di baca mulai dari yang
paling kiri.
Color
Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body,
font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue.
Masing-masing color didefinisikan dalam dua digit hexadecimal number.
#RRGGBB
Hexadecimal Color
#FF0000 Red
#00FF00 Green
#0000FF Blue
#000000 Black
#FFFFFF White
Alignment
Align attribute digunakan untuk menentukan perataan object dalam document HTML baik
berupa text, object, image, paragraph, division dan lain-lain.
Value Description
Left Rata kiri
Right Rata kanan
Center Rata tengah
Justify Rata kanan kiri
Format text
Physical Formatting
Tag Description
<B> … </B> Bold text
<I> … </I> Italic text
<U> … </U> Underline Text
<BIG> … </BIG> Untuk ukuran yang lebih besar
dari normal
<SMALL> … </SMALL> Untuk ukuran yang lebih kecil
dari normal
<STRIKE> … </STRIKE> Untuk memberi garis di tengah
text BENGKEL INTERNET PENS-ITS
<SUP> … </SUP> Superscript text
<SUB> … </SUB> Subscript text
<CENTER> … </CENTER> Center document
Logical Formatting
Tag Description
<EM> … </EM> Text miring / <I>
<STRONG> …
</STRONG>
Text tebal / <B>
<DEL> … </DEL> Mencoret text / <STRIKE>
<INS> … </INS> Underline text / <U>
Preformatted text
Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.
Hyperlink
Link Address
Absolute Address – merupakan full internet address (URL) yang meliputi protocol, network
location dan path dan nama file.
Contoh:
http ://www.yahoo.com/index.html
Relatif Address – URL yang tidak menyebutkan protocol dan network locationya (hanya path
dan nama filenya).
Anchor
Anchor tag <A> untuk menentukan hyperlink dalam document HTML. HREF property
digunakan untuk menentukan tujuan dari hyperlink tersebut.
E. TABLE
Membuat table
Tag <TABLE> digunaka untuk membuat table dalam document HTML , bagian pokok dari
table adalah cell yang didefinisikan dengan menggunakan tag <TD>.
Berikutnya kalo anda ingin membuat beberapa baris cell dalam table gunakan tag <TR>.
Menambahkan Heading cell
Untuk menambahkan heading pada table tambahkan tag <TH> pada table yang sudah di buat.
Pemformatan table
Untuk memformat perataan text di dalam table anda bisa gunakan attribute Align dan Valign
Sabtu, 31 Agustus 2013
Rabu, 28 Agustus 2013
Dasar Javascript
Javascript
adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di
sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi
semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan
untuk memvalidasi masukanmasukan pada formulir sebelum formulir
dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua
bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya
bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh
pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.
Struktur JavaScript
Struktur dari JavaScript adalah sbb :
<SCRIPT LANGUAGE = ”JavaScript”>
<!- -
Penulisan kode javascript
// - - >
</SCRIPT>
Keterangan :
Kode <!- - // - - > umumnya disertakan dengan tujuan agar
sekiranya browser tidak mengenali JavaScript maka browser akan
memperlakukannya sebagai komentar sehingga tidak ditampilkan pada
jendela browser.
JavaScript sebagai bahasa berorientasi pada obyek
Properti
Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil.
Penulisan :
Nama_objek.nama_properti = nilai
window.defaultStatus = ”Selamat Belajar Dasar-Dasar JavaScript”;
Metode
Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan
terhadap objek.
Penulisan :
Nama_objek.nama_metode(parameter)
document.write (”Hallo Sahabat Sampul Ilmu”)
Letak JavaScript dalam HTML
Skrip Javascript dalam dokumen HTML dapat diletakkan pada :
1. Bagian Head
2. Bagian Body (jarang digunakan).
Contoh Dasar-Dasar JavaScript
Sebelum mencoba belajar JavaScript Terlebih dahulu buatlah halaman HTML di komputer anda, untuk cara pembuatannya clik disini
Pemakaian alert sebagai property window
Copy Code Dibawah ini yang (berwarna biru) dan Paste kedalam Halaman HTML anda Yang Telah dibuat sebelumnya.
<HTML>
<HEAD>
<TITLE>Alert Box</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
window.alert("Mari Belajar Bersama Sampul Ilmu");
//-->
</SCRIPT>
</BODY>
</HTML>
Pemakaian metode dalam objek.
Copy Code Dibawah ini yang (berwarna biru) dan Paste kedalam Halaman HTML anda Yang Telah dibuat sebelumnya.
<HTML>
<HEAD>
<TITLE>Skrip JavaScript</TITLE>
</HEAD>
<BODY>
Percobaan memakai JavaScript:<BR>
<SCRIPT LANGUAGE = "JavaScript">
<!--
document.write("Selamat Mencoba JavaScript<BR>");
document.write("Semoga sukses!");
//-->
</SCRIPT>
</BODY>
</HTML>
Pemakaian prompt
Copy Code Dibawah ini yang (berwarna biru) dan Paste kedalam Halaman HTML anda Yang Telah dibuat sebelumnya.
<HTML>
<HEAD>
<TITLE>Pemasukan Data</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nama = prompt("Siapa nama Anda?","Masukkan nama anda");
document.write("Hai, " + nama);
//-->
</SCRIPT>
</BODY>
</HTML>
Pembuatan fungsi dan cara pemanggilannya
Copy Code Dibawah ini yang (berwarna biru) dan Paste kedalam Halaman HTML anda Yang Telah dibuat sebelumnya.
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<SCRIPT language="Javascript">
function pesan(){
alert ("memanggil javascript lewat body onload")
}
</SCRIPT>
<BODY onload=pesan()>
</BODY>
</HTML>
Dasar CSS
saya ingin membagikan kepada anda sebuah tutorial CSS yang sangat penting anda kuasai dalam pembuatan website yang dinamis dan cantik untuk dilihat. Seperti yang kita tahu, dalam mendesign website, kita amatlah membutuhkan Code CSS , tanpa CSS , Website yang kita buat seakan-akan tidak berwarna atau tidak berseni sama sekali. Jadi dapat kita simpulkan bahwa tutorial CSS kali ini sangatlah berguna bagi kita semua terutama bagi para pemula . Oke langsung saja .
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value .
Adapun format penulisan kalimat CSS :
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
Contoh Syntax:
Dari contoh di atas dapat kita simpulkan atau kita lihat bahwa :
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.
Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Hal ini bertujuan agar terlihat rapi.
Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.
Kenapa kita perluh belajar membuat comment dalam CSS ? alasannya karena kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.
1. Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.
Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.
2. Embedded CSS
Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. Kode CSS-nya diletakkan pada halaman yang sama dengan yang ingin diformat.
Contoh:
Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat menggunakan font berwarna biru.
3. External CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css atau ekstensi .css . Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
4. Import CSS
Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import "style.css";
atau
@import url("style.css");
Penggunaan Lebih dari Satu Kode CSS
Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.
Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sebagai berikut:
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:
Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sebagai berikut :
CLASS dan ID SELECTOR
Masih ingat kan pada pelajaran syntax CSS pada bagian atas posting ini , yang di tulis adalah selector. Pada contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai selector.
Misalkan anda membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika anda ingin memformat tag <h1> dengan warna / property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna hitam.
Untuk kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.
Cara penulisan Class Selector:
Untuk menempelkan class ke dalam tag HTML:
Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di akhiri dengan tag </div>.
Contoh:
Penulisan kode CSS:
Pemakaian kode CSS
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Hasilnya jika di jalankan pada browser adalah :
Cara penulisan ID Selector:
Untuk menempelkan ID selector ke dalam tag HTML:
Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.
Cara penulisan:
property -> font-family
value -> nama-nama font, disarankan menggunakan hanya nama-nama font default
Contoh penulisan:
Hasilnya jika dijalankan di browser :
Cara penulisan:
property -> font-variant
value -> small-caps
Contoh penulisan:
Hasilnya jika dijalankan pada browser :
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value .
Adapun format penulisan kalimat CSS :
selector { property: value }
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
Contoh Syntax:
h1 { color: red }
Dari contoh di atas dapat kita simpulkan atau kita lihat bahwa :
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).
Pengelompokan Selectors
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Hal ini bertujuan agar terlihat rapi.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
color:red;
font-family:arial;
font-size:150%;
}
Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.
CSS Comment
Kenapa kita perluh belajar membuat comment dalam CSS ? alasannya karena kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.
/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
INPLEMNTASI CSS
Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:- Inline CSS
- Embed atau memasang kode css ke dalam bagian <head>
- Pada link ke external CSS
- Import CSS file
1. Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.
Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
<P style=”color:blue”>
Isi paragraf.
</p>
Isi paragraf.
</p>
Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.
2. Embedded CSS
Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. Kode CSS-nya diletakkan pada halaman yang sama dengan yang ingin diformat.
Contoh:
<head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>
Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat menggunakan font berwarna biru.
3. External CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css atau ekstensi .css . Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
- Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
p {font-family: arial; font-size: small;}
h1 {color: red; }
- Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
4. Import CSS
Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import "style.css";
atau
@import url("style.css");
Penggunaan Lebih dari Satu Kode CSS
Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.
Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sebagai berikut:
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:
h1 {
text-align: right;
font-size: 20pt
}
text-align: right;
font-size: 20pt
}
Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sebagai berikut :
color: red;
text-align: right;
font-size: 20pt
text-align: right;
font-size: 20pt
CLASS dan ID SELECTOR
Masih ingat kan pada pelajaran syntax CSS pada bagian atas posting ini , yang di tulis adalah selector. Pada contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai selector.
Misalkan anda membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika anda ingin memformat tag <h1> dengan warna / property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna hitam.
Untuk kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.
Class Selector
Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.Cara penulisan Class Selector:
.nama-class {property:value;}
Untuk menempelkan class ke dalam tag HTML:
taghtml.nama-class {Property:value;}
Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di akhiri dengan tag </div>.
Contoh:
Penulisan kode CSS:
.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Hasilnya jika di jalankan pada browser adalah :
Teks tengah akan berwarna merah.
Tag H1 tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
ID Selector
ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar.Cara penulisan ID Selector:
#nama-ID {property:value;}
Untuk menempelkan ID selector ke dalam tag HTML:
taghtml#nama-ID {Property:value;}
Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.
CSS Font Family
CSS dapat memformat font dengan berbagai macam cara mulai dari pengaturan tipe font, ukuran, dll. Saya akan coba bahas satu per satu ya.1. CSS Font Family
Kalau anda biasa menggunakan ms word atau aplikasi lainnya dimana anda bisa merubah jenis / tipe font, pasti anda sudah mengenal nama-nama font seperti: arial, verdana, times new roman dll. Nah kalau di CSS kita sebut tipe font ini Font Family.Cara penulisan:
property -> font-family
value -> nama-nama font, disarankan menggunakan hanya nama-nama font default
Contoh penulisan:
h1 {
font-family: verdana;
}
h2 {
font-family: “times new roman”;
}
font-family: verdana;
}
h2 {
font-family: “times new roman”;
}
Hasilnya jika dijalankan di browser :
Ini adalah Heading 1 (H1) menggunakan font Verdana
Ini adalah Heading 2 (H2) menggunakan font Times New Roman
2. CSS Font Variant
Properti font variant digunakan untuk menampilkan font dalam huruf kapital kecil. Jadi semua huruf non kapital akan berubah menjadi huruf kapital, tetapi ukuran nya tetap sama. Perlu diketahui, tidak semua jenis font dapat menggunakan properti ini.Cara penulisan:
property -> font-variant
value -> small-caps
Contoh penulisan:
h1 {
font-size: 14px;
font-variant: small-caps;
}
font-size: 14px;
font-variant: small-caps;
}
Hasilnya jika dijalankan pada browser :
Ini adalah Heading 1 (H1) menggunakan properti font variant
Dasar Pembuatan Tabel Di HTML
Belajar HTML Dasar Part 12: Cara Membuat tabel di HTML (tag table)
Dalam menampilkan data yang terstruktur atau tampilan dari database, kita biasanya akan membuatnya dalam bentuk tabel. HTML juga menyediakan Tabel tag digunakan untuk menampilkan data dalam bentuk tabel. Dalam tutorial belajar HTML cara membuat tabelHTML ini kita akan membahas cara penggunaannya.
Tabel tag setidaknya membutuhkan 3 buah tag, yaitu <tabel>, <tr>, dan <td>.
- <tabel> digunakan untuk memulai tabel
- <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
- <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
Contoh penggunaan tag <tabel>:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <!DOCTYPE html><html><head><title>Penggunaan Tag Tabel</title></head><body><h1>Belajar Tag Tabel</h1><table border="1"> <tr> <td>Baris 1, Kolom 1</td> <td>Baris 1, Kolom 2</td> <td>Baris 1, Kolom 3</td> </tr> <tr> <td>Baris 2, Kolom 1</td> <td>Baris 2, Kolom 2</td> <td> Baris 2, Kolom 3</td> </tr> <tr> <td> Baris 3, Kolom 1</td> <td> Baris 3, Kolom 2</td> <td> Baris 3, Kolom 3</td> </tr> <tr> <td> Baris 4, Kolom 1</td> <td> Baris 4, Kolom 2</td> <td> Baris 4, Kolom 3</td> </tr></table></body></html> |
Langganan:
Postingan (Atom)