Pengertian CSS
Apa itu CSS?

• CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web.
• Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.
• Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda.
• CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.
• Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.
• Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.

Keuntungan Menggunakan CSS

• CSS memberikan keseragaman pada halaman web.
• Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat menggunakan CSS, perubahan tidak perlu dilakukan dalam setiap halaman web. Anda hanya perlu membuat perubahan dalam style sheet.
• CSS memungkinkan Anda untuk memuat halaman web Anda dengan mudah.
• Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen.
• CSS membantu Anda memelihara halaman web Anda dengan mudah dan efektif.

Referensi

• nusinau.com
• w3schools.com

HTML5 adalah standar baru untuk HTML, XHTML, dan the HTML DOM. Versi ini merupakan generasi baru HTML yang dipergunakan sejak 1999. HTML5 masih dalam proses pengembangan, biarpun demikian hampir semua browser sudah dapat “memahami” HTML5.

HTML5 merupakan hasil kerjasama dari W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group).

Walau keduanya mengkhususkan diri di bidan yang berlainan, pada tahun 2006 WHATWG & W3C memutuskan untuk bekerjasama membangun versi baru HTML. WHATWG mengkhususkan pada web forms dan web applications, sedang W3C pada XHTML 2.0.

Aturan-aturan yang disepakati dalam pengembangan HTML5

• Fitur-fitur baru harus berdasar pada HTML, CSS, DOM, and JavaScript
• Mengurangi penggunaan plugin-plugin eksternal, contoh: flash
• Error handling yang lebih baik
• Menambah markup untuk mengurangi scripting
• HTML5 harus independen
• Pengembangan harus dapat diikuti oleh khalayak umum

Fitur-fitur baru HTML5

• Elemen canvas (keperluan drawing)
• Elemen video dan audio (media playback)
• Dukungan lebih untuk pengimpanan offline
• Elemen yang lebih spesifik untuk content, contoh: article, footer, header, nav, section
• Form control, contoh: date, time, email, url, search, calendar

Dukungan Browser

HTML5 memang belum diresmikan sebagai standar penulisan sehingga belum ada browser yang memberikan dukungan penuh. Tapi hampir semua browser, seperti Firefox, Opera, Chrome, Internet Explorer sudah menambahkan fitur-fitur pada update terbaru mereka.

Contoh Atribut :
Link HTML atau HTML Links didefinisikan dengan tag <a>. Alamat link inilah yang merupakan atribut.

<a href="http://www.pemrograman.org/">Pemrograman</a>

Coba contoh HTML diatas dengan HTML Editor.

Jadi <a> merupakan elemen html, href adalah name atau nama atribut sedang Pemrograman adalah value atau nilai atribut.

Berikut adalah beberapa atribut standar yang hampir dipakai semua elemen:

Nilai suatu atribut harus selalu dimulai dan diakhiri dengan tanda petik. Biasanya menggunakan tanda petik (“…”). Tanda petik ini mengapit petikan langsung dari suatu nilai elemen. Tanda petik tunggal juga diperlehkan untuk digunakan walaupun dalam keadaan tertentu nilai suatu atribut bisa berisi tanda kutip, untuk itu di pergunakan tanda kutip tunggal yang mengapit petikan yang tersusun di dalam petikan lain. Contoh :
name=’Komunitas “Programmer” Indonesia’

Sangat disarankan untuk penulisan atribut dan nilainya tetap menggunakan huruf kecil karena pada versi HTML yang lebih baru (X)HTML meminta penulisan menggunakan huruf kecil.

HTML Element Syntax
Sintaks elemen HTML mempunyai ciri sebagai berikut:

• Elemen HTML dimulai dengan start tag / opening tag
• Elemen HTML diakhiri dengan end tag / closing tag
• Isi Elemen / element content adalah semua yang terdapat diantara start tag dan end tag
• Beberapa elemen HTML tidak memiliki isi atau konten
• Elemen yang tidak memiliki isi atau kosong ditutup pada awal tag
• Sebagian besar elemen HTML dapat diberi atribut tertentu

Nested HTML Elements
Dalam penulisan dokumen HTML dipastikan menggunakan banyak elemen. Suatu elemen dapat berada di dalam elemen lain atau elemen tersebut menjadi isi / konten pada elemen lain. Hampir semua elemen HTML dapat bersarang. Sehingga dapat disimpulkan bahwa dokumen HTML terdiri dari elemen HTML yang bersarang.

Contoh Dokumen HTML

1
2
3
4
5
6
7

<html>
 
<body>
<p>Paragraf pertama</p>
</body>
 
</html>

Pada contoh diatas terdapat tiga buah elemen. Elemen-elemen tersebut adalah:
Elemen <p>. Elemen ini mendefinisikan suatu konten yaitu sebuah paragraf pada dokumen HTML. Elemen ini dimulai dengan start tag <p> dan diakhiri dengan end tag </p>. Isi atau konten dari elemen ini adalah: Paragraf pertama

<p>Paragraf pertama</p>

Elemen <body>. Elemen ini mendefinisikan suatu konten yaitu body / tubuh dokumen HTML. Bagian ini adalah konten halaman web yang akan tertampil pada halaman web. Elemen ini dimulai dengan start tag <body> dan diakhiri dengan end tag </body>. Isi atau konten dari elemen ini adalah: elemen paragraf (yang sudah dijelaskan diatas).

<body>
<p>Paragraf pertama</p>
</body>

Elemen <html>. Elemen ini mendefinisikan sebuah dokumen HTML. Elemen ini dimulai dengan start tag <html> dan diakhiri dengan end tag </html>. Isi atau konten dari elemen ini adalah: elemen body (yang sudah dijelaskan diatas).

<html>
 
<body>
<p>Paragraf pertama</p>
</body>
 
</html>

Empty HTML Elements
Elemen HTML yang tidak memiliki konten atau isi disebut empty element / elemen kosong. Elemen dapat ditutup pada awal tag. <br> adalah contoh elemen kosong yang tidak memerlukan end tag. <br> bermakna ganti baris. Pada XHTML, XML, dan versi HTML yang lebih baru, semua elemen harus ditutup dengan end tag. Cara yang tepat untuk menutup elemen kosong yang dapat diterima oleh HTML, XHTML dan XML adalah dengan menambahkan garis miring di awal tag, seperti <br />. Walaupun <br> terbukti berjalan baik disemua browser, menulis <br /> akan lebih baik.

Terkadang kita sering lupa memberi end tag pada suatu elemen. Seperti contoh dibawah ini:

<p>Paragraf pertama</p>
<p>Paragraf kedua</p>

Hampir semua browser dapat menampilkan HTML dengan baik walaupun kita lupa memberi end tag pada suatu elemen HTML. Tetapi terdapat pula beberapa elemen yang akan menimpulkan kesalahan (errors) saat kita lupa memberikan end tag. Oleh karena itu, akan lebih baik kita tidak lupa menulis end tag pada suatu elemen.

HTML Headings
Heading atau Judul ditulis menggunakan tag <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>.

1
2
3

<h1>Judul</h1>
<h2>Judul</h2>
<h3>Judul</h3>

Coba contoh HTML diatas dengan HTML Editor.

HTML Paragraphs
Paragraf ditulis menggunakan tag <p>.

1
2
3
4
5
6

<p>Paragraf pertama</p>
<p>Paragraf kedua</p>
<p>Paragraf ketiga</p> 
<p>Paragraf keempat</p>
<p>Paragraf kelima</p>
<p>Paragraf keenam</p>

Coba contoh HTML diatas dengan HTML Editor.

HTML Links
Links ditulis menggunakan tag <a>.

1

<a href="http://www.pemrograman.org/">Pemrograman.org</a>

Coba contoh HTML diatas dengan HTML Editor.

HTML Images
Gambar ditulis menggunakan tag <img>.

1

<img src="statx.jpg" width="738" height="327" />

Coba contoh HTML diatas dengan HTML Editor.

Teman-teman bisa juga menggunakan HTML Editor yang lain seperti FrontPage atau Dreamweaver.

Cek HTML Editor.

Untuk dipahami bahwa penyimpanan file dapat dilakukan dalam ekstensi HTM atau HTML. Kedua ekstensi ini bisa berjalan dengan normal, tidak terdapat perbedaan pada keduanya. Penggunaan ekstensi HTM digunakan pada masa lalu, dimana software hanya memperbolehkan tiga buah karakter ekstensi. Untuk masa sekarang dapat menggunakan ekstensi HTML.

Pengertian HTML

HTML adalah suatu bahasa yang dipergunakan untuk mendeskripsikan halaman web.

• HTML merupakan singkatan dari Hyper Text Markup Language.
• HTML bukan merupakan bahasa pemrograman, HTML adalah suatu markup language (bahasa markah).
• Suatu markup language berupa serangkaian markup tags.
• HTML menggunakan markup tags untuk mendeskripsikan halaman web.

HTML Tags

HTML markup tags biasa disebut HTML tags.

• HTML tags berupa keywords atau kata kunci yang diapit oleh tanda kurung seperti <html>.
• HTML tags biasanya dipakai berpasangan seperti <b> dan </b>.
• Tag pertama dalam pasangan html tags adalah start tag atau tag awal, sedang tag kedua adalah end tag atau tag akhir.
• Start tags dan end tags biasa juga disebut opening tags dan closing tags.

HTML Documents = Web Pages

• HTML documents atau dokumen HTML mendeskripsikan suatu web pages atau halaman web.
• HTML documents berisi HTML tags dan plain text atau text biasa.
• HTML documents atau dokumen HTML juga biasa disebut web pages atau halaman web.

Tujuan dari sebuah web browser (seperti Internet Explorer, Firefox, Opera, Safari atau Google Chrome) adalah untuk membaca HTML documents kemudian menampilkannya sebagai halaman web. Browser tidak menampilkan HTML tags, tetapi menggunakan tag tersebut untuk menterjemahkan isi dari halaman web.

1
2
3
4
5
6
7
8
9

<html>
<body>
 
<h1>Judul Pertama</h1>
 
<p>Paragraf pertama</p>
 
</body>
</html>

Coba contoh HTML diatas dengan HTML Editor.

Penjelasan Contoh

• Teks di antara <html> dan </html> mendeskripsikan web page.
• Teks di antara <body> dan </body> adalah konten halaman web yang akan tertampil.
• Teks di antara <h1> dan </h1> digunakan untuk menampilkan judul.
• Teks di antara <p> dan </p> digunakan untuk menampilkan paragraf.

Referensi

• w3schools.com