Translate

Kamis, 31 Mei 2018

Belajar HTML

Apa itu HTML?
Secara harafiah, HTML adalah Hypertext Markup Language. Berikut penjelasan dari tiap-tiap kata yang membentuk singkatan HTML:

1. Hypertext adalah sebuah teks yang apabila diklik akan membawa kita pergi dari satu dokumen ke dokumen lainnya. Dalam prakteknya, Hypertext berwujud sebuah link yang bisa mengantar kita kedunia internet yang sangat luas
2. Markup adalah tag (semacam kode) yang mengatur layout dan tampilan-tampilan visual yang kita lihat di sebuah website, termasuk font, warna teks, gambar dan sebagainya.
3. Language yang merupakan penunjuk bahwa HTML adalah semacam script pemograman.

Dengan kata lain, HTML adalah bahasa yang digunakan pada dokumen web sebagai bahasa untuk pertukaran dokumen web.


             STRUKTUR HTML

 Selanjutnya kita akan membahas tentang struktur HTML,
Berikut adalah Contoh dasar Struktur HTML:


<html>
<head>
<title>Judul Dokumen HTML</title>
</head>
<body>
Isi Dokumen
</body>
</html>

Struktur di atas adalah struktur dasar dalam setiap dokumen HTML. Berikut Penjelasan strukturnya:

 mendeklarasi dokumen HTML5
<html> mendefinisikan dokumen HTML
<head> berisi informasi tentang dokumen
<title> berisi judul dokumen
<body> berisi konten halaman yang terlihat

Dokumen HTML terdiri dari komponen yaitu tag, elemen, dan atribut.

TAG
Tag adalah tanda awal < dan tanda akhir > yang digunakan seabagai pengapit suatu elemen. Tag elemen pembuka diawali dengan tanda < dan diakhiri dengan tanda >. Sedangkan elemen penutup di awali dengan tanda < dan / kemudian diakhiri dengan anda >. Untuk penulisan tag elemen tunggal cukup menuliskan tanda < dan sebelum tanda> ditambahkan tanda /. Berikut conoth penulisan tag:

<head> ...(1)
</head> ...(2)
<input type=”text” /> ...(3)

Penjelasan
1. Tag elemen pembuka HEAD
2. Tag elemen penutup HEAD
3. Tag elemen tunggal

ELEMEN
Elemen adalah nama penanda yang diapit oleh tag yang memiliki fungsi dan tujuan tertentu pada dokumen HTML. Elemen dapat memiliki elemen anak dan juga nilai. Elemen anak adalah suatu elemen yang berada di dalam elemen pembuka dan elemen penutup induknya. Nilai yang dimaksud adalah suatu teks atau karakter yang berada diantara elemen pembuka dan elemen penutup. Berikut contoh elemen:

<head> ...(1)
<title> ...(2)
Judul Dokumen ...(3)
</title>
</head>

Penjelasan:
1. Elemen HEAD
2. Elemen anak dari elemen HEAD
3. Nilai dari elemen TITLE

ATRIBUT
HTML Attributes atau atribut HTML adalah suatu informasi tambahan yang bisa disertakan pada suatu elemen HTML. Suatu elemen dapat memiliki atribut. Atribut ini memberikan informasi tambahan tentang elemen yang bersangkutan. Atribut selalu digunakan pada awal tag / start tag. Cara mendefinisikan atribut dengan memberikan informasi name dan value dari suatu elemen, seperti name=”value”.

Contoh Atribut :
Link HTML atau HTML Links didefinisikan dengan tag <a href="https://www.blogger.com/null">. Alamat link inilah yang merupakan atribut.

<a href="http://www.w3.org/">HTML</a>

Jadi <a href="https://www.blogger.com/null"> merupakan elemen html, href adalah name atau nama atribut sedang Pemrograman adalah value atau nilai atribut.


                ELEMEN HEAD

Elemen Head dapat digunakan sebagai tempat penulisan judul dokumen, informasi mengenai dokumen dan definisi referensi alamat. Berikut elemen dan atribut yang dapat digunakan pada elemen Head. 


1. Elemen Base
Elemen Base digunakan untuk mendefinisikan suatu alamat URL agar browser mengikutsertakan alamat tersebut dalam pencarian suatu objek pada dokumen. 

Contoh:
<head>
<base href="http://www.w3.org>
</head>
<body>
<img src="logo.png">


2. Elemen Title
Elemen Title digunakan untuk mendefiniskan judul dokumen. Judul dokumen dapat dilihat pada tab browser. 
Contoh:
<title> Contoh Elemen Title </title>

3. Elemen Meta
Elemen Meta digunakan untuk mendefiniskan keterangan pada dokumen, seperti nama penulis dokumen, deskripsi dokumen dan informasi kata kunci yang digunakan mensin pencarian seperti Google, Yahoo, Bing dan lain-lain dalam pencarian halaman yang sesuai dengan pencarian. 

Contoh:
<meta http-equiv=”Content-type” content=”text/html charset=utf-8”/>
<meta name=”copyright” content=”Rifai” />
<meta name=”author” content=”Rifai” />
<meta name=”Keyword” content=”belajar, html” />

4. Elemen Script
Elemen Script digunakan untuk mendefinisikan suatu script fungsi seperti Javascript, VBScript atau mendefinisikan tautan lokasi file script untuk digunakan dokumen. 

Contoh:
<script type="text/javascript"> alert("SELAMAT DATANG "); </script>

5. Elemen Link
Elemen Link digunakan untuk mendefinisikan style dokumen dan mendefinisikan tautan lokasi file style untuk menghubungkan antara dokumen dengan sumber lainnya. 

Contoh:
<link rel=”stylesheet” type=”text/css” href=”style.css”>



Elemen Body

Elemen Body digunakan sebagai tempat untuk menampilkan konten dokumen. Elemen Body juga disebut sebagai layar presentasi, karena setiap perubahan pada elemen Body akan mempengaruhi informasi yang tampil pada browser. Berikut elemen yang dapat digunakan pada elemen Body. 

1. Elemen Block
  • Elemen P
  • Elemen H1, H2, H3, H4, H5, H6
  • Elemen DL
  • Elemen DT
  • Elemen DD
  • Elemen OL
  • Elemen UL
  • Elemen LI
  • Elemen Address
  • Elemen Blockqoute
  • Elemen INS
  • Elemen DEL
  • Elemen DIV
  • Elemen Span
  • Elemen HR
  • Elemen Nonscript
  • Elemen Pre
  • Elemen Script
2. Elemen Inline
  • Elemen A
  • Elemen BR
  • Elemen Bdo
  • Elemen Cite
  • Elemen Ins
  • Elemen Del
  • Elemen Blockquote
  • Elemen SUB
  • Elemen SUP
3. Elemen Phrase
  • Elemen Abbr, Acronym
  • Elemen Dfn
  • Elemen EM
  • Elemen Strong
  • Elemen Code
  • Elemen Samp
  • Elemen Kbd
  • Elemen Var
  • Elemen B
  • Elemen I
  • Elemen Big
  • Elemen Small
  • Elemen TT
4. Elemen Image dan Objects
  • Elemen Img
  • Elemen Area
  • Elemen Map
  • Elemen Object
5. Elemen Form
  • Elemen Form
  • Elemen Button
  • Elemen Fielset
  • Elemen Input
  • Elemen Label
  • Elemen Legend
  • Elemen Select
  • Elemen Option
  • Elemen Optgroup
  • Elemen Textarea
6. Elemen Table
  • Elemen Table
  • Elemen TR
  • Elemen TH
  • Elemen TD
  • Elemen Colgroup
  • Elemen COL
  • Elemen Caption
  • Elemen Thead
  • Elemen Tbody
  • Elemen Tfoot
7. Elemen Frame
  • Elemen Frameset
  • Elemen Frame
  • Elemen Noframes
  • Elemen Iframe


Elemen Block

Tag dengan tipe block level element, bertujuan untuk membagi halaman HTML menjadi bagian yang terpisah, atau menjadi ‘blok’.Elemen Block akan ditampilkan terpisah dari seluruh tag sebelum dan sesudahnya.

1. Elemen P
Elemen P digunakan untuk mendefinisikan suatu paragraph, elemen ini berisi nilai teks.

Contoh:
<p> Belajar HTML </p>

Hasilnya
Belajar HTML

2. Elemen H1, H2, H3, H4, H5, H6
Elemen Heading digunakan untuk mendefinisikan suatu judul.

Contoh:
<h1> Heading 1</h1>
<h2> Heading 1</h2>
<h3> Heading 1</h3>
<h4> Heading 1</h4>
<h5> Heading 1</h5>
<h6> Heading 1</h6>

Hasilnya

Heading 1

Heading 1

Heading 1

Heading 1

Heading 1
Heading 1

3. Elemen DL
Elemen DL digunakan untuk mendefinsikan daftar definisi.

Contoh:
<dl>
<dt>Buah</dt>
<dd>Apel</dt>
<dt>Sayur</dt>
<dd>Tomat</dd>
<dd>Bayam</dd>
</dl>

Hasilnya
Buah
Apel
Sayur
Tomat
Bayam

4. Elemen DT 
Elemen DT digunakan untuk mendefinsikan item pada <dl>, secara format tulisan DT sejajar kiri.
Lihat contoh <dl>
5. Elemen DDElemen DD digunakan untuk mendefinisikan item pada <dl>, secara format tulisan DD sejajar kanan.
Lihat contoh <dl>
6. Elemen OL
Elemen OL digunakan untuk mendefinisikan daftar dengan menampilkan urutan angka atau huruf.

Contoh:
<ol>
<li>Belajar </li>
<li>HTML</li>
</ol>

Hasilnya
  1. Belajar
  2. HTML

7. Elemen UL
Elemen UL digunakan untuk mendefinisikan daftar tanpa urutan.

Contoh:
<ul>
<li>Belajar</li>
<li>HTML</li>
</ul

Hasilnya
  • Belajar
  • HTML

8. ELemen LI
Elemen LI digunakan untuk mendefinsikan item dari <ol> atau <ul>.
Lihat contoh <ol> atau <ul>
9. Elemen Address
Elemen Address digunakan untuk mendefinisikan teks dalam format alamat 

Contoh:
<Address>
JL. Daeng Tata No.1 <br>
Makassar <br>
Telp : (0411) 861935<br>
</address>

Hasilnya
JL. Daeng Tata No.1
Makassar
Telp : (0411) 861935

10. Elemen Blockqoute
Elemen ini digunakan untuk mendefinisikan suatu kutipan, format teks menjorok kekanan dan memberikan jarak spasi sebelum dan sesudahnya. 

Contoh:
<blockquote> Taka ada rahasia untuk menggapai sukses. Sukses itu dapat terjadi karena persiapan, kerja keras, dan mau belajar dari kegagalan. </blockquote>

Hasilnya
Taka ada rahasia untuk menggapai sukses. Sukses itu dapat terjadi karena persiapan, kerja keras, dan mau belajar dari kegagalan.

11. Elemen INS
Elemen ini digunakan untuk mendefinisikan teks yang baru ditambahkan pada dokumen, format penulisan digaris bawahi. <ins> ditulis beriringan dengan element <del> yang biasanya digunakan untuk memperbaharui (update) teks atau konten tertentu, <del> menunjukkan konten yang dihapus (ditandai dengan tulisan yang dicoret) sedangkan <ins> menunjukkan konten baru yang dimasukkan, sebagai pembaharuan dari konten lama yang dihapus tersebut. 

Contoh:
Saya Ingin pergi ke <del>Bali</del><ins>Jakarta</ins>

Hasilnya
Saya Ingin pergi ke Bali Jakarta

12. Elemen DEL
Elemen ini digunakan untuk mendefinisikan teks yang digunakan pada dokumen, format penulisan garis dutengah teks. 
Lihat contoh <ins>

13. Elemen DIV
Elemen ini digunakan untuk mendefinisikan wadah konten.

Contoh:
Diluar Elemen DIV
<div Style="background: Red;">
Elemen dalam DIV
</div>

Hasilnya
Diluar Elemen DIV
Elemen dalam DIV

14. Elemen Span
Elemen ini digunakan untuk mendefinsikan wadah teks.

Contoh:
Diluar Elemen Span
<span Style=”color:blue”>
Elemen dalam Span
</span>

Hasilnya
Diluar Elemen DIV Elemen dalam DIV

15. Elemen HR
Elemen ini untuk membuat garis horizontal.

Contoh: 
<hr />

Hasilnya

16. Elemen Noscript
Elemen ini digunakan untuk mendefinsikan kondisi jika browser tidak mendukung script (javascript).

Contoh:
<noscript> Tulisan ini muncul jika browser tidak mendukung javascript</noscript>

Hasilnya

17. Elemen PRE
Elemen ini digunakan untuk mendefinsikan paragraph menggunakan teks asli tanpa format.

Contoh:
Function()
{
Alert(‘contoh PRE’);
}

18. Elemen Script
Sama seperti penjelasan elemen script pada elemen head.

Elemen Inline

Berbeda dengan Elemen Block, tag dengan tipe inline level elemen akan ‘menyatu’ dengan tag sebelum dan sesudahnya. Tag ini tidak akan memulai blok atau baris baru namun akan tetap berada di dalam blok tersebut. Tag inline juga tidak akan ditampilkan dengan jarak dari tag sebelum dan sesudahnya. 

1. Elemen A
Elemen ini digunakan untuk mendefinsikan tautan menuju dokumen lain, juga dapat digunakan sebagai penanda posisi (anchor) pada dokumen. 

Contoh:
<a href="https://www.google.com">Google</a>

Hasilnya

2. Elemen BR
Elemen ini digunakan untuk mendefinisikan baris baru atau paragrap baru.

Contoh:
Baris 1 <br> Baris 2<br>

Hasilnya
Baris 1
Baris 2

3. Elemen BDO
Elemen ini untuk mendefinisikan arah penulisan teks, dari kiri ke kanan atau dari kanan ke kiri.

Contoh:
<bdo dir="rtl"> Belajar HTML </bdo>

Hasilnya
Belajar HTML


4. Elemen CITE
Elemen ini digunakan untuk mendefinisikan teks dalam format huruf miring seperti penulisan suatu pujian. 

Contoh:
<cite> Belajar HTML</cite>

Hasilnya
Belajar HTML

5. Elemen INS
Lihat INS pada elemen block

6. Elemen DEL
Lihat DEL pada elemen block

7. Elemen Blockquote
Lihat Blockquote pada elemen block

8. Elemen SUB
Elemen ini digunakan untuk mendefinsikan teks subscript.

Contoh:
Diluar Elemen SUB <sub> Dalam elemen SUB</sub>

Hasilnya
Diluar Elemen SUB Dalam elemen SUB

9. Elemen SUP
Elemen ini digunakan untuk mendefinisikan teks superscript

Contoh:
Diluar Elemen SUP <sup> Dalam elemen SUP</sup>

Hasilnya
Diluar Elemen SUP Dalam elemen SUP


Elemen Phrase


1. Elemen ABBR, ACRONYM
Elemen ini digunakan untuk mendefinisikan singkatan.

Contoh:
<abbr title="Personal Computer">PC </abbr>

Hasilnya
PC

2. Elemen DFN
Elemen ini digunakan untuk mendefinisikan suatu istilah.

Contoh:
<dfn>DFN</dfn>
<em>EM</em>
<strong>STRONG</strong>
<code>CODE</code>
<samp>SAMP</samp>
<kbd>KBD</kbd>

Hasilnya
DFN
EM
STRONG
CODE
SAMP
KBD

3. Elemen EM
Elemen ini digunakan untuk mendefinisikan penekannan pada teks, format penulisan ditampilkan dengan huruf miring. 

Lihat contoh DFN

4. Elemen STRONG 
Elemen ini digunakan untuk mendefinisikan penekannan pada format penulisan ditampilkan dengan huruf tebal. 
Lihat contoh DFN

5. Elemen CODE
Elemen ini digunakan untuk mendefinisikan teks dalam format penulisan potongan code program. 
Lihat contoh DFN

6. Elemen SAMP
Elemen ini digunakan untuk mendefinisikan teks dalam format penulisan hasil cetak printer. 
Lihat contoh DFN

7. Elemen KBD
Elemen ini digunakan untuk mendefinisikan teks dalam format penulisan keyboard. 
Lihat contoh DFN

8. Elemen VAR
Elemen ini digunakan untuk mendefinisikan teks dalam format penulisan variabel pada code program.

Contohnya:
<var>VAR</var> <br>
<b>B</b> <br>
<i>I</i> <br>
<big>Big</big> <br>
<small>Small</small> <br>
<tt>TT</tt>

Hasilnya
VAR
B
I
Big
Small
TT


9. Elemen B
Elemen ini digunakan untuk mendefinisikan teks dalam format penulisan huruf tebal.
Lihat contoh VAR

10. Elemen I
Elemen ini digunakan untuk mendefinisikan teks dalam format penulisan huruf miring.
Lihat contoh VAR

11. Elemen Big
Elemen ini digunakan untuk mendefinisikan ukuran huruf teks naik satu tingkat dari ukuran normal.
Lihat contoh VAR

12. Elemen Small
Elemen ini digunakan untuk mendefinisikan ukuran huruf teks turun satu tingkat dari ukuran normal.
Lihat contoh VAR

13. Elemen TT
Elemen ini digunakan untuk mendefinisikan teks dalam format penulisan teleks (teletype).
Lihat contoh VAR



Elemen Image dan Objects

1. Elemen IMG 
Elemen ini digunakan untuk mendefinisikan wadah gambar pada dokumen.

Contoh:
<img src="file:///android_asset/gambar.jpg" />

Hasilnya

2. Elemen Area 
Elemen ini digunakan untuk mendefinisikan peta pada gambar, sama seperti <a>, perbedaannya <area> berlaku untuk gambar.

Contoh:
<map name="imagemap">
<area shape="rect" cords="0,0,70,29" href="i1.html" alt="i1" />
<area shape="circel" cords="0,0,20,41" href="i2.html" alt="i2" />
</map>

3. Elemen MAP 
Elemen MAP digunakan untuk mendefinisikan lokasi peta pada gambar.
Lihat contoh Area

4. Elemen Object 
Lihat contoh elemen Object pada elemen Head




Elemen Form

1.Elemen Form
Elemen ini digunakan untuk mendefinisikan suatu formulir pada dokumen. 

Contoh:
<form action="proses.php" method="post">
<fieldset>
<legend>Login:</legend>
<label for="username">username</label>
<input type="teks" name="username" /><br >
<label for="password">password</label>
<input type="text" name="password" /><br >
<input type="submit" value="proses" />
<button type="reset">Reset</button>
</fieldset>
</form>

Hasilnya
Login:

 

2. Elemen BUTTON
Elemen ini digunakan untuk mendefinisikan suatu tombol. 
Lihat <form>

3. Elemen FIELDSET
Elemen ini digunakan untuk mendefinisikan wadah pengelompokan kontrol input-an pada formulir.. 
Lihat <form>

4. Elemen INPUT (type: text, radio, checkbox, button, submit, reset, image, password, hidden, file) 
Elemen ini digunakan untuk mendefinisikan suatu kontrol standar input-an pada formulir. 
Lihat <form>

5. Elemen LABEL
Elemen ini digunakan untuk mendefinisikan label atau keterangan dari kontrol input-an. 
Lihat <form>

6. Elemen LEGAND
Elemen ini digunakan untuk mendefinisikan judul dari <fieldset> 
Lihat <form>

7. Elemen SELECT
Elemen ini digunakan untuk mendefinisikan kontrol daftar pelihan. 

Contoh:
<select>
<optgroup label="minuman">
<option value="t">Teh</option>
<option value="k">kopi</option>
</option>
<option value="s">Susu</option>
</select>

Hasilnya

8. Elemen OPTION
Elemen ini digunakan untuk mendefinisikan item dari kontrol daftar pilihan <select> 
Lihat <select> 

9. Elemen OPTGROUP
Elemen ini digunakan untuk mendefinisikan grup item dari <option>. 
Lihat <select>

10. Elemen TEXTAREA
Elemen ini digunakan untuk mendefinisikan kontrol teks dengan banyak baris. 

Contoh:
<textarea crows="3" cols="30">
Contoh textarea
</textarea>

Hasilnya



Elemen Table

1. Elemen Table
Elemen ini digunakan untuk mendefinisikan tabel. 

Contoh:
<table border="1" cellspacing=0 cellpadding=0 width="100&">
<caption align="center">Contoh Tabel</caption>
<thead>
<tr>
<th>Header Tabel</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer Tabel</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Body Tabel</td>
</tr>
</tbody>
</table> 

Hasilnya
Contoh Tabel
Header Tabel
Footer Tabel
Body Tabel

2. Elemen TR
Elemen ini digunakan untuk mendefinisikan baris tabel. 
Lihat <tabel> 

3. Elemen TH
Elemen ini digunakan untuk mendefinisikan judul kolom tabel. 
Lihat <tabel> 

4. Elemen TD
Elemen ini digunakan untuk mendefinisikan sel baris tabel. 
Lihat <tabel> 

5. Elemen COLGROUP
Elemen ini digunakan untuk mendefinisikan spesifikasi grup kolom tabel. 

Contoh:
<table border="1">
<colgroup span="2"></colgroup>
<tr>
<th>No.</th>
</tr>
<tr>
<td>1</td>
</tr>
</table>

Hasilnya
No.
1

6. Elemen COL
Elemen ini digunakan untuk mendefinisikan spesifikasi kolom tabel. 

Contoh:
<table border="1">
<col align="right"/>
<tr>
<th>No.</th>
</tr>
<tr>
<td>1</td>
</tr>
</table> 

Hasilnya
No.
1

7. Elemen CAPTION 
Elemen ini digunakan untuk mendefinisikan judul tabel. 
Lihat <tabel> 

8. Elemen THEAD
Elemen ini digunakan untuk mendefinisikan bagian kepala tabel. 
Lihat <tabel> 

9. Elemen TBODY
Elemen ini digunakan untuk mendefinisikan bagian konten tabel. 
Lihat <tabel> 

10. Elemen TFOOT
Elemen ini digunakan untuk mendefinisikan bagian kaki tabel. 
Lihat <tabel> 



Elemen Frame

1.Elemen FRAME 
Elemen ini digunakan untuk mendefinisikan susunan bingkai dokumen. 

Contoh:
<frameset cols="25%,50%,25%">
<frame name="left" src="http://www.en.w3eacademy.com/html/top_ frame.htm" />
<frame name="center" src="http://www.en.w3eacademy.com/html/main_ frame.htm" />
<frame name="right" src="http://www.en.w3eacademy.com/html/bottom_ frame.htm" />
<noframes>
<body>
Browser kamu tidak mendukung frame.
</body>
</noframes>
</frameset>

Hasilnya

2. Elemen FRAMESET 
Elemen ini digunakan untuk mendefinisikan bingkai dari .
Lihat <frameset>

3. Elemen NOFRAMES 
Elemen ini digunakan untuk mendefinisikan, kondisi jika browser tidak mendukung <frameset>.
Lihat <frameset>

4. Elemen IFRAME 
Elemen ini digunakan untuk mendefinisikan bingkai yang berdiri sendiri dalam bingkai. 

Contoh:
<body>
<p>Document content goes here...</p>
<iframe src="/html/menu.htm" width="555" height="200">
Maaf, browser kamu tidak mendukung inline frame.
</iframe>
<p>Document content also go here...</p>
</body>

Hasilnya



CSS

HTML dan CSS sering kali tak terpisahkan, karena CSS hadir untuk melengkapi kelemahan HTML terutama yang berkaitan erat dengan style atau gaya. 
Cascading Style Sheet (CSS) adalah kode-kode yang mengatur bagaimana format sebuah tag mempengaruhi gaya tampilan web page di jendela browser. Ada dua cara yang biasa digunakan untuk menyisipkan kode-kode CSS. Yang pertama adalah dengan menulis kode-kode itu langsung di area <head> ... </head> script HTML. Cara kedua adalah dengan memisahkan kode-kode CSS itu dalam file terpisah dan kemudian di gabungkan dalam script HTML menggunakan. Cara kedua ini ideal jika ingin bekerja dengan banyak script HTML dengan memanfaatkan kode CSS yang sama. Selain itu, kita juga bias menyisipkan kode style langsung ke dalam tag-tag tertentu. 

Penulisan
Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:
h1 {
color: #0789de;
}

Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value. Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan #0789de adalah value. Selain itu ada tiga metode penulisan CSS atribut, yaitu :[

Inline Style SheetCSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain. Contoh penulisan CSS dengan metode Inline Style Sheet :
<p id="cth1">< Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>

<p id="cth2" style="font-size:20pt"> Tag P ini diformat dengan besar font 20 point </p>

<p id="cth3" style="font-size:14pt; color:red"> Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah

Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan. Contoh penggunaan CSS dengan metode Embedded Style Sheet : 
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>


Sifat CSS
Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka script itu dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka script CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu. Sifat yang kedua adalah eksternal di mana script CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di script tersebut.

Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)