Pengertian, Syntax, dan Implementasi CSS (Cascading Style Sheet)

Seperti janji saya dari lama untuk melanjutkan Tutorial mengenai HTML, saya coba mulai dari Pengenalan CSS.

Apa itu CSS?

CSS singkatan dari Cascading Style Sheet, atau jika diterjemahkan yaitu Bahasa Lembar Gaya. CSS merupakan bahasa yang digunakan untuk mengatur tampilan/desain suatu halaman web. CSS sama halnya dengan styles pada aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).

Dengan kata lain, Cascading Style Sheet adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website. Singkatnya dengan menggunakan metode CSS ini mudah mengubah secara keseluruhan warna dan tampilan yang ada pada website. Dengan CSS, temen-temen dapat lebih mempercantik tampilan web. baik dari style text, button, textfield, table, dan lain-lain.

Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. Sebagai contoh, perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf), colors (warna), margins (ukuran), background (latar belakang), font size (ukuran font) dan lain-lain. Elemen-elemen tersebut disebut juga dengan styles.

Perkembangan CSS

CSS 1

CSS pertama yang menjadi Rekomendasi W3C resmi CSS level 1, diterbitkan pada Desember 1996.dikembangkan berpusat pada pemformatan dokumen HTML.

CSS 2

CSS2 mendukung penentuan posisi konten, huruf (font), tampilan pada tabel (table layout) dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama.

CSS 3

Dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D.
Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni @media query.
Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image.

Tools CSS

Editor

Sama halnya seperti HTML dan bahasa pemrograman lainnya, CSS berisi kode teks yang dapat dibuat menggunakan text edtor seperti Notepad, Notepad++, Dreamweaver, dll.

Designer

Konsep untuk membuat tampilan web dengan menambahkan CSS berbeda-beda. Mungkin sebagian orang bisa langsung membuat CSS dari nol hingga menghasilkan tampilan yang bagus. Tetapi pada umumnya seorang web designer terlebih dahulu menggunakan tools image editor seperti Photoshop, Adobe Ilustrator, dll untuk membuat design mockup. Mockup tersebut kemudian dijadikan acuan untuk membuat kerangka tampilan web menggunakan HTML dan CSS. Setelah itu, mockup tersebut di-"slice" (dipotong-potong) menjadi bagian-bagian kecil untuk dimasukkan ke dalam kerangka tampilan web tadi. Metode ini sering disebut dengan slicing.

Result & Troubleshoot

Untuk melihat hasil dari CSS yang telah dibuat, tentunya dengan membuka file HTML pada browser, misalnya menggunakan Mozilla Firefox, Google Chrome, Internet Explorer, dll.
Jika setelah dibuka ternyata terdapat ketidaksesuaian pada hasil tampilan, dapat dilakukan troubleshoot dengan menggunakan fitur melihat source code pada browser. Untuk Firefox, bisa menggunakan plugin Firebug. Pada Google Chrome, bisa digunakan Developer Tools yang terdapat pada opsi menunya.

Manfaat CSS

Manfaat yang bisa diperoleh jika kita membuat tampilan web dengan sentuhan CSS diantaranya :

• Kode menjadi sederhana dan lebih mudah diatur
• Ukuran file menjadi lebih kecil, sehingga load file lebih cepat
• Mudah untuk mengubah tampilan, hanya dengan mengubah CSS saja
• Dapat berkolaborasi dengan Javascript
• Dapat digunakan dalam hampir semua web browser

Syntax CSS

CSS memiliki syntax yang sederhana dan menggunakan sejumlah kata kunci berbahasa Inggris untuk menentukan nama-nama berbagai properti. CSS memiliki dua aturan utama, yaitu Selector dan Declaration. Untuk lebih jelasnya, lihat cara penulisan serta komponen yang terdapat pada CSS berikut :

• Dalam kode CSS, ada 2 bagian yang terpisah, yaitu Selector dan Declaration.
• Selector biasanya merupakan elemen HTML atau tag dimana berbagai properti diberi suatu nilai.
• Setiap Declaration terdiri dari Property dan Value.
• Untuk penulisan Declaration harus menggunakan tanda kurung kurawal {...}
• Property adalah atribut style yang ingin dirubah, misalnya color, background, margin, dll.
• Setiap Property memiliki Value (nilai) sesuai dengan jenis property-nya.

Pengelompokan Selector

Seperti yang dilihat pada contoh di atas, salu selector dapat memiliki beberapa property. Jika terdapat beberapa selector yang memiliki property yang sama, dapat dilakukan pengelompokan selector. Lihat contoh berikut :

- Syntax CSS

h1, body, p, ul { color: blue; }

- Syntax HTML

<body>
<h1>Warna Biru</h1>
Contoh teks
</body>

Pada contoh di atas, elemen header, body, paragraph, dan unordered list berada pada group yang sama. Semua elemen tersebut nantinya akan memiliki teks berwarna biru.

ID dan Class

Untuk memahami tentang ID dan Class, dapat melihat contoh kode CSS berikut :

#identitas {
   font-size: 20px;
   color: #FF0000;
   background-color: #000;
}

.kelas {
   font-size: 30px;
   color: #12FF34;
   background-color: #FFFFFF;
}

• Selector ID menggunakan tanda pagar (#) sebagai penandanya, sedangkan Selector Class menggunakan tanda titik (.).
• Penamaan pada selector ID dan Class dapat dibuat secara bebas, tetapi sebaiknya disesuaikan dengan nama kelompok yang terkait untuk mempermudah pengeditan.
• Perbedaan antara ID dan Class pada CSS adalah pada tingkat penggunaannya. ID sebaiknya digunakan sebagai identitas yang unik seperti Logo, Header, Footer, Sidebar.
• Sedangkan Class digunakan untuk menandai atribut yang lebih spesifik seperti ketebalan border (garis pinggir), kode warna, paragraph, jenis font, ukuran font, dll.
• Class dapat digunakan untuk mengatur tampilan atau atribut dari suatu kelompok data HTML, baik yang memiliki ID tertentu atau tidak.
• ID digunakan untuk memberikan identifikasi atau atribut pada kelompok data atau elemen HTML yang lebih besar.

Implementasi CSS

Ada 2 cara yang bisa diterapkan untuk menggunakan CSS pada tampilan web. Cara pertama yaitu dengan membuat CSS langsung di dalam satu file HTML. Cara ini disebut dengan internal/inline style sheet.

Cara yang kedua yaitu dengan cara membuat file CSS tersendiri,lalu file tersebut dipanggil melalui HTML yang dibuat. Cara ini disebut dengan external style sheet.

Internal Style CSS

Metode Internal Style maksudnya ialah style CSS digabung atau ditulis bersamaan dengan tag-tag HTML. Agar dapat lebih dipahami, lihat contoh kode HTML berikut :

File index.html

<html>
  <head>
    <title>Contoh Internal Style</title>
    <style type="text/css">
      body {
        font-family: Arial, Helvetica, sans-serif;
      }
      .kelas {
        font-size: 50px;
        color: #FF0000;
        background-color: #000;
      }
      #identitas {
        font-size: 30px;
        color: #000;
        background-color: #FF0000;
      }
    </style>
  </head>
  <body>
    <div class="kelas">Contoh Penulisan Class</div> 
    <br \>
    <div id="identitas">Contoh Penulisan ID</div>
  </body>
</html>

Dilihat dari kode di atas, syntax CSS ditulis langsung di dalam HTML yang dibuat, yaitu pada bagian <head> dengan tag <style>. Selector body langsung digunakan oleh HTML tanpa perlu dipanggil kembali, sedangkan ID dan Class pada contoh di atas dipanggil pada tag <div>.

External Style CSS

Merupakan metode penulisan CSS dimana Syntax CSS dibuat file tersendiri yang terpisah dengan file HTML. File CSS ini nantinya dapat digunakan oleh semua file HTML yang ada. Untuk memanggil file CSS yang telah dibuat, tambahkan baris berikut pada bagian <head> HTML :

<link rel="stylesheet" type="text/css" href="lokasi_file_css.css" />

Untuk lebih memahami penggunaannya, perhatikan contoh berikut :

- File gaya.css

body {
      font-family: Arial, Helvetica, sans-serif;
}
.kelas {
      font-size: 50px;
      color: #FF0000;
      background-color: #000;
}
#identitas {
      font-size: 30px;
      color: #000;
      background-color: #FF0000;
}

- File index.html

<html>
  <head>
    <title>Contoh External Style</title>
    <link rel="stylesheet" type="text/css" href="gaya.css" />
  </head>
  <body>
    <div class="kelas">Contoh Penulisan Class</div> 
    <br \>
    <div id="identitas">Contoh Penulisan ID</div>
  </body>
</html>

CSS Framework

Framework secara sederhana dapat diartikan kumpulan dari fungsi-fungsi/prosedur-prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih mempermudah dan mempercepat pekerjaan seorang programmer, tanpa harus membuat fungsi atau class dari awal.

CSS Framework adalah paket kode CSS/XHTML sebagai acuan dasar membuat web, sehingga kita tidak perlu lagi menulis kode web (CSS/XHTML) dari nol.

Beberapa contoh CSS Framework yang sering digunakan diantaranya :

• Bootstrap
• YAML 4
• Less Framework 4
• 960 Grid System

Keuntungan Menggunakan CSS Framework

Penggunaan CSS Framework pada web memiliki beberapa keuntungan, diantaranya :

Lebih Cepat

Membuat sebuah website membutuhkan waktu yang tidak sebentar. Tapi dengan menggunakan framework kita tidak harus memulai semuanya dari awal untuk setiap projek

Tableless

Sebuah teknik dimana struktur website tidak menggunakan table pada layoutnya, melainkan dengan cara memisahkan data antara HTML dan CSS. Hal ini dilakukan agar lebih mudah dilakukan maintenance dan diakses oleh berbagai media aplikasi, berkurangnya kebutuhan bandwidth, dan yang lebih utama yaitu lebih SEO friendly.

Cross-browser Compatibility

Cross-browser compatibility ini memiliki pengertian bahwa website dapat diakses oleh berbagai browser.

Kekurangan Menggunakan CSS Framework

Selain kelebihan yang telah disebutkan di atas, terdapat juga kekurangan yang perlu diperhatikan jika menggunakan CSS Framework, diantaranya :

• Membutuhkan waktu untuk mempelajari framework, karena CSS yang tersedia tidak dibuat sendiri.
• Mengabaikan keunikan desain layout.
• Kode menjadi mubazir karena tidak semua kode yang ada pada framework kita gunakan pada tampilan web yang dibuat.
• Sulit untuk melakukan troubleshoot jika terdapat bug pada framework.
• HTTP request yang berlebihan karena biasanya framework CSS memiliki data yang terpisah-pisah.

Sekian pengenalan mengenai CSS. InsyaAllah pada lain kesempatan akan dibuat tutorial khusus mengenai CSS dan berlanjut ke bahasa pemrograman lainnya. Terima kasih telah membaca. Semoga bermanfaat.

Dasar-dasar HTML Bagian 3 : Table, Div, dan Span

Terima kasih bagi semua yg sudah mau membaca tutorial-tutorial atau artikel yg saya tulis. Meskipun sebenernya sudah banyak tutorial ilmu IT di situs/blog lain, tapi di sini saya cuma mau membantu temen-temen agar lebih memahami ilmu di bidang IT dan sekaligus mengingatkan saya sendiri agar tidak lupa terhadap apa yg sudah saya pelajari.
Oke, kali ini Insyaallah saya akan memaparkan seri terakhir dari tutorial HTML, yaitu Dasar-dasar HTML Bagian 3 : Table, Div, dan Span. Just read, try, and learn :)

Table

Table pada HTML sangat berguna. Table digunakan untuk menyimpan data dalam bentuk tabel sehingga data mudah dibaca. Table dalam HTML memiliki opening tag <table> dengan closing tag </table>. Ketika kita ingin menampilkan konten dengan rapi dalam suatu tabel, sudah pasti kita memerlukan baris (row) dan kolom (column). Sebelum membuat tabel secara utuh, kita harus mempelajari tentang table row dan cara membuat column terlebih dahulu.

Table Row

Table Row memiliki tag <tr></tr>. Setiap kali kita membuat tag tersebut, maka sebuah baris baru dalam tabel akan dibuat. Table Row pada HTML merupakan tag yang dibuat terlebih dahulu setelah membuat tag <table>. Dengan kata lain, tag <tr></tr> berada di dalam tag <table></table>. Sehingga formatnya akan seperti berikut :

<table>

  <tr></tr>

  <tr></tr>

</table>

Table Data

Table Data berisi konten yang akan ditampilkan pada tabel. Table data memiliki tag <td></td>. Pembuatan kolom pada tabel HTML ditentukan oleh banyaknya table data (atau bisa dikatakan cell) pada setiap table row. Dengan kata lain, setiap membuat table data, tag <td></td> ditambahkan ke dalam tag <tr></tr>. Selain itu, setiap table row harus memiliki jumlah table data yang sama untuk membuat kolom yang sempurna. Dengan begitu, tabel yang dibuat memiliki format sebagai berikut : (contoh tabel 2 baris dengan 2 kolom)

<table>

  <tr>

    <td>Baris 1 Kolom 1</td>

    <td>Baris 1 Kolom 2</td>

  </tr>

  <tr>

    <td>Baris 2 Kolom 1</td>

    <td>Baris 2 Kolom 2</td>

  </tr>

</table>

Table Head & Table Body

Setelah mempelajari tentang pembuatan table sederhana dengan membuat baris dan kolom, selanjutnya kita akan mempelajari lebih lanjut mengenai struktur tabel pada HTML agar tabel yang dibuat lebih rapi dan terstruktur.

Seperti struktur HTML, tabel di dalam HTML juga memiliki head dan body. Table Head merupakan cara penulisan judul pada tabel. Bedanya, jika <title> dalam <head> HTML tidak ditampilkan pada halaman HTML, table head ditampilkan pada bagian atas tabel dengan font weight yang berbeda dengan data pada cell lain (mirip perbedaan antara heading dengan paragraf biasa). 

Untuk membuat table head, digunakan tag <thead></thead> setelah tag <table>. Setelah itu, untuk membuat baris pada table head, tambahkan <tr></tr> di dalam <thead></thead>. Terakhir, untuk menampilkan data dalam table head, digunakan tag <th></th> sebagai pengganti <td></td>. Dengan begitu, format table head akan menjadi seperti berikut :

<table>

  <thead>

    <tr>

      <th>Judul Tabel Kolom 1</th>

      <th>Judul Tabel Kolom 2</th>

    </tr>

  </thead>

</table>

Table Body merupakan bagian body pada tabel yang berisi data yang akan ditampilkan. Untuk membuat table body, digunakan tag <tbody></tbody> setelah closing tag </thead>. Selebihnya, ditambahkan tag <tr> dan <td> seperti contoh sebelumnya. Dengan begitu, table memiliki struktur yang sempurna seperti pada contoh berikut :

<table>

  <thead>

    <tr>

      <th>Judul Tabel Kolom 1</th>

      <th>Judul Tabel Kolom 2</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Data Baris 1 Kolom 1</td>

      <td>Data Baris 1 Kolom 2</td>

    </tr>

    <tr>

      <td>Data Baris 2 Kolom 1</td>

      <td>Data Baris 2 Kolom 2</td>

    </tr>

  </tbody>

</table>

Colspan

Bagaimana jika kita ingin menyatukan beberapa cell pada tabel seperti fungsi merge pada Excel? Kita dapat menggunakan colspan. Colspan merupakan attribute pada tabel, yang digunakan untuk menggabungkan dua cell atau lebih menjadi satu. Attribute colspan dapat digunakan pada tag <td> dan <th>. Berikut contoh penggunaan colspan, sehingga pada baris 1 hanya terdapat 1 cell, sedangkan pada baris 2 terdapat 2 cell :

<table>

  <tr>

    <td colspan="2">Baris 1 dengan colspan</td>

  </tr>

  <tr>

    <td>Baris 2 Kolom 1</td>

    <td>Baris 2 Kolom 2</td>

  </tr>

</table>

Style pada Table

Kita telah mempelajari struktur tabel secara keseluruhan. Akan tetapi tabel yang dihasilkan masih terlihat monoton. Untuk itu, kita akan coba membuat tabel lebih terlihat cantik menggunakan styling seperti pada tutorial sebelumnya. Di sini, saya akan kasih contoh kode sebuah halaman HTML yang berisi tabel dengan penambahan style yang mengubah tampilan table border, padding, dan font di dalam tabel. Silakan coba kode berikut, dan coba untuk lebih bereksperimen dengan mengubah value, teks, atau jumlah baris/kolom tabel, atau bahkan menambah style sendiri :

<html>
  <head>
    <title>Contoh Table</title>
  </head>
  <body>
    <table style="border-collapse:collapse;">
      <thead>
        <tr>
          <th colspan="2" style="color: red">Famous Monsters by Birth Year</th>
        </tr>
        <tr style="border-bottom:1px solid black;">
          <th style="padding:5px;"><em>Famous Monster</em></th>
          <th style="padding:5px;border-left:1px solid black;"><em>Birth Year</em></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="padding:5px;">King Kong</td>
          <td style="padding:5px;border-left:1px solid black;">1933</td>
        </tr>
        <tr>
          <td style="padding:5px;">Dracula</td>
          <td style="padding:5px;border-left:1px solid black;">1897</td>
        </tr>
        <tr>
          <td style="padding:5px;">Bride of Frankenstein</td>
          <td style="padding:5px;border-left:1px solid black;">1944</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Div

Salah satu tag yang akan banyak digunakan selanjutnya yaitu Div, singkatan dari Division (pembagian). Div pada HTML berfungsi untuk membagi halaman HTML menjadi container atau potongan-potongan berbeda. Div sangat fleksibel karena dapat digabungkan dengan style, dapat diisi dengan konten seperti teks dan gambar, juga dapat ditambahkan link pada div. Nantinya, div akan banyak digunakan saat mempelajari CSS. Karena dengan div, pembentukan tampilan sebuah halaman HTML akan menjadi lebih mudah. Untuk membuat div, digunakan tag <div></div>. Untuk dapat memahami lebih lanjut mengenai div, dapat dicoba kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Div</title>
  </head>
  <body>
    <div style="width:50px; height:50px; background-color:red"></div>
    <div style="width:50px; height:50px; background-color:blue"></div>
    <div style="width:50px; height:50px; background-color:green"></div>
    <a href="http://www.google.com"><div style="width:50px; height:50px; background-color:yellow"></div></a>
</body>
</html>

Span

Jika div membagi halaman HTML menjadi beberapa potongan berbeda dengan style berbeda, Span dapat mengontrol style pada bagian yang lebih kecil lagi seperti teks. Span menggunakan tag <span></span>. Sebagai contoh, jika kita ingin mengubah kata komputer menjadi warna merah pada kalimat Saya suka belajar komputer, maka tinggal ditambahkan span diantara kata komputer. Sehingga menjadi seperti berikut : Saya suka belajar <span style="color: red">komputer</span>

Coba kode berikut untuk lebih memahami span :

<!DOCTYPE html>
<html>
  <head>
    <title>Result</title>
  </head>
  <body>
    <p>My favorite font is <span style="font-family: Impact">Impact</span>!</p>
  </body>
</html>

Sekian tutorial Dasar-dasar HTML dari saya, terimakasih sudah mau membaca tutorial ini. Semoga tutorial ini dapat bermanfaat buat temen-temen semua. 

Tutorial Sebelumnya : Dasar-dasar HTML Bagian 2

Dasar-dasar HTML Bagian 2 : List, Comment, dan Styling

List pada HTML

List pada HTML merupakan cara penulisan daftar suatu komponen (text, gambar, dll) dalam HTML seperti penulisan daftar menu, daftar nama, dll. Sepeti contoh :
1. Teks urutan pertama
2. Teks urutan kedua
3. Teks Urutan ketiga
List dibagi menjadi 2 macam, yaitu Ordered List (OL) dan Unordered List (UL).

Ordered List

Secara sederhana, ordered list merupakan daftar berdasarkan nomor urut. Ordered List memiliki tag HTML <ol> dengan tag penutup </ol>. Untuk menambahkan setiap satu daftar item pada setiap list tag, menggunakan tag li (List Item), yaitu <li>Item 1</li>. Dengan begitu, cara penulisan Ordered List dapat dilihat sebagai berikut :

<ol>

  <li>Item 1</li>

  <li>Item 2</li>

</ol>

Berikut contoh penggunaan Ordered List :

<!DOCTYPE html>
<html>
  <head>
    <title>Ordered List</title>
  </head>
  <body>
    <h1>List of my favorite things</h1>
    <ol>
      <li>Raindrops on roses</li>
      <li>Whiskers on kittens</li>
      <li>Bright copper kettles</li>
      <li>Warm woolen mittens</li>
    </ol>
    <h2>List of things</h2>
    <ol>
      <li>computer</li>
      <li>smartphone</li>
      <li>and a nerd</li>
    </ol>
</body>
</html>

Unordered List

Bagaimana jika kita tidak ingin memperdulikan urutan angka pada daftar? Kita dapat menggunakan Unordered List (UL). Unordered List menampilkan daftar pada HTML dengan menampilkan tanda bulat (bullet point). Penulisan pada Unordered List hampir mirip dengan Ordered List. Bedanya, jika Ordered List menggunakan tag <ol>, Unordered List menggunakan tag <ul> dengan tag penutup </ul>.

Perhatikan dan coba code berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Unordered List</title>
  </head>
  <body>
    <h1>Some random thoughts</h1>
    <p>This is my random thoughts</p>
    <ul>
      <li>work hard</li>
      <li>get rich</li>
      <li>getting married</li>
      <li>going to heaven</li>
    </ul>
  </body>
</html>

Penggabungan Ordered List dan Unordered List

Ordered List dan Unordered List dapat digabungkan dengan 2 cara, yaitu Ordered list di dalam Unordered List, dan sebaliknya. Berikut contoh penggunaan penggabungan Ordered List dan Unordered List :

<!DOCTYPE html>
<html>
  <head>
    <title>Penggabungan list</title>
  </head>
  <body>
    <ol>
      <li>Hobi
        <ul>
          <li>Main Komputer</li>
          <li>Main Game di Komputer</li>
        </ul>
      </li>
      <li>Cita-cita
        <ul>
          <li>Naik Haji</li>
          <li>Masuk Surga</li>
        </ul>
      </li>
    </ol>
    <ul>
      <li>Klub Sepakbola Favorit
        <ol>
          <li>Livorno</li>
          <li>Stoke City</li>
          <li>Real SOciedad</li>
        </ol>
      </li>
      <li>Film Favorit
        <ol>
          <li>Lord of the ring</li>
          <li>Blackhat</li>
          <li>Bloody Monday</li>
        </ol>
      </li>
    </ul>
  </body>
</html>

Comment

Comment pada HTML berfungsi untuk membuat catatan/note pada halaman HTML. Selain itu, comment juga kadang digunakan untuk menutupi (disable) suatu kode. Comment tidak akan ditampilkan pada halaman HTML. Penulisan comment diawali dengan tanda <!-- dan diakhiri dengan tanda --> Perhatikan contoh berikut :

<!-- Contoh penggunaan Comment -->
<!-- <p>Kode ini tidak akan muncul</p>

<p>Ini juga tidak akan muncul</p> -->
<p>Kode ini bakal muncul</p>
<!-- comment -->

Styling

Styling merupakan cara untuk memperindah tampilan pada HTML. Pada umumnya, styling pada HTML dikerjakan oleh CSS yang terpisah. Akan tetapi, HTML juga memiliki bahan-bahan dasar untuk sedikit mempercantik tampilannya sendiri tampa menggunakan CSS yang terpisah. Untuk melakukan styling, HTML menggunakan berbagai attribute di dalam tags-nya. Attribute merupakan sebuah karakteristik atau deskripsi untuk konten pada elemen HTML. Hal ini sedikitnya telah kita pelajari pada Tutorial Dasar-dasar HTML Bagian 1 seperti attribute src di dalam tag <img>, atau href di dalam tag <a>.

Pada bahasan Styling ini, kita akan mencoba mengubah tampilan font, alignment, dan background color.

Font Size

Font Size berfungsi untuk mengubah ukuran teks menjadi besar atau kecil, sesuai dengan ukuran pixel. Untuk mengubah font size, kita dapat menggunakan attribute style. Isi attribute style dengan value font-face, diikuti dengan tanda titik dua (:), lalu isi tambahkan ukurannya, dan diakhiri dengan px (kependekan dari pixel). Sehingga contoh formatnya seperti berikut :

<p style="font-face: 12px">

Agar dapat dipahami lebih lanjut, bisa dicoba contoh code berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Penggunaan Font Size</title>
  </head>
  <body>
    <p style="font-size:10px"> Some text for you to make tiny! </p>
    <p style="font-size:20px"> Some text for you to make normal size!</p>
    <p style="font-size:40px"> Some text for you to make super big!</p>
</body>
</html>

Font Color

Penggunaan attribute style sangat berguna, karena tidak hanya digunakan untuk tag <p> saja, akan tetapi dapat digunakan oleh berbagai macam tag. Kali ini, kita akan gunakan attribute style pada tag lain.

Untuk mengubah Font Color (warna font), cukup tambahkan value color:blue pada attribute style (atau warna lain yang dapat dilihan di sini). Contoh :

<h2 style="color: red">

Bagaimana jika kita ingin mengubah ukuran font dan warna font sekaligus? Simple, cukup gabungkan kedua value di dalam attribute style dengan dipisahkan oleh semicolon (;). Contoh :

<h2 style="color: red; font-size: 20px">

Agar kita dapat memahami lebih lanjut, pada contoh di bawah saya juga akan mencoba menggabungkan font-size dengan color. Perhatikan dan coba kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Mengubah Warna Font</title>
  </head>
  <body>
    <h1 style="color: green; font-size: 16px">Heading</h1>
    <p style="color: violet">A giant bear and a little duck were friends.</p>
    <p style="color: red; font-size: 10px">But the bear got hungry and ate the duck.</p>
  </body>
</html>

Font Family

Setelah mempelajari font-size dan color, selanjutnya kita akan coba mengubah jenis font. Untuk mengubah jenis font, kita menggunakan value font-family. Contoh :

<h1 style="font-family: Arial">Ini Heading dengan Font Arial</h1>

Untuk daftar font yang dapat digunakan, dapat dilihat di sini.

Selain itu, kita juga dapat menggunakannya pada tag lain. Coba kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Loving the font changes</title>
  </head>
  <body>
    <h1 style="font-family: Arial">Big title</h1>
    <ol>
      <li style="font-size: 16px; font-family: Arial">This item is big Arial.</li>
      <li style="font-size: 12px; font-family: Verdana">This item is medium Verdana.</li>
      <li style="font-size: 10px; font-family: Impact">This item is small Impact.</li>
    </ol>
  </body>
</html>

Alignment

Selain mengubah tampilan teks, kita juga dapat mengubah penjajaran (alignment) teks menjadi rata kiri, kanan, atau tengah. Untuk mengubah alignment, tambahkan value teks-align pada attribute style. Perhatikan dan coba kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Alignment</title>
  </head>
  <body>
    <h3 style="text-align:center">Favorite Soccer Teams</h3>
    <ol>
      <li style="text-align:left">Lazio</li>
      <li style="text-align:center">QPR</li>
      <li style="text-align:right">Real Betis</li>
    </ol>
  </body>
</html>

Backgroud Color

Di samping styling pada teks, HTML juga dapat mengubah warna latar (Background Color) pada halamannya. Untuk mengubah Background Color, attribute style ditambahkan dengan value background-color, seperti penggunaan color untuk mengubah font color. Perhatikan dan coba kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Background Color</title>
  </head>
  <body style="background-color: brown">
    <h3>Favorite Soccer Teams</h3>
    <ol style="background-color: yellow">
      <li>Empoli</li>
      <li>Vitesse</li>
      <li>West Brom</li>
    </ol>
  </body>
</html>

Strong & Emphasize

Strong merupakan cara untuk membuat teks menjadi bold. Strong menggunakan tags <strong></strong>. Sedangkan Emphasize merupakan cara untuk membuat teks menjadi italic. Emphasize menggunakan tags <em></em>. Coba contoh kode berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Strong & Emphasize</title>
  </head>
  <body>
    <p>Do you <em>hear</em> the people <strong>sing</strong>?</p>
    <p>No <em>I don't</em>. I'm <strong><em>too</em></strong> busy eating <strong>cake</strong>.</p>
  </body>
</html>

Bersambung......

Tutorial Sebelumnya : Dasar-dasar HTML Bagian 1

Dasar-dasar HTML Bagian 1

Selamat pagi/siang/sore/malam teman-teman. Kali ini saya coba ketik tutorial dasar HTML buat temen-temen yang baru mau belajar tentang web programming. Semoga bermanfaat.

Definisi HTML

Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. -Dikutip dari Wikipedia

Mengapa belajar HTML?

Setiap halaman web yang temen-temen lihat menggunakan sebuah bahasa pemrograman bernama HTML. HTML dapat dianalogikan sebagai sebuah kerangka yang membentuk setiap stuktur halaman web. Pada tutorial ini, kita akan gunakan HTML untuk menambahkan paragrap, heading, gambar dan link/tautan ke dalam sebuah halaman web. Lihat contoh berikut :

<!DOCTYPE html>
<html>
<p>Hello World</p>
</html>
Perhatikan kode dengan tanda kurung <>, itulah HTML. Seperti bahasa pemrograman lain, HTML memiliki penulisan khusus.

Editor, Ekstensi, dan Cara Buka File HTML

HTML dapat dibuat hanya menggunakan Text Editor biasa seperti notepad, atau juga dapat digunakan software text editor lain seperti Notepad++ (free), sublime, atau text & graphical editor seperti Adobe Dreamweaver.

Jika ingin mencoba menggunakan Notepad++, bisa download melalui link berikut :
Download Notepad++ 6.7.9.2

Secara default, sebuah file HTML memiliki ekstensi file .html (atau .htm). Akan tetapi, dalam integrasi dengan bahasa pemrograman yang lain (contoh : PHP), maka file ekstensi yang digunakan juga harus mengikuti bahasa pemrograman tersebut (contoh .php). Maka dari itu, code HTML yang sudah dibuat pada Editor, harus di-save dengan ekstensi yang sesuai.
File .html yang sudah di-save dapat langsung dibuka (double click) untuk melihat hasilnya melalui browser.

HTML dan CSS

HTML merupakan singkatan dari HyperText Markup Language. Hypertext yang berarti "text dengan tautan (link) di dalamnya." Setiap saat kita klik pada sebuah kata yang membawa kita ke dalam sebuah halaman web, berarti kita telah meng-klik sebuah hypertext.
Markup language merupakan sebuah bahasa pemrograman yang digunakan untuk mengubah text menjadi text itu sendiri atau menjadi suatu hal yang lain pada halaman web. HTML dapat mengubah text menjadi gambar, link, tabel, daftar berurut, dan lain-lain.
Apa yang membuat sebuah halaman web menjadi terlihat bagus? Itu merupakan efek penggunaan CSS—Cascading Style Sheets. CSS dianalogikan sebagai kulit dan makeup yang membungkus kerangka yang dibuat HTML. Kali ini, kita akan belajar mengenai HTML terlebih dahulu, dan nanti Insyaallah saya akan jabarkan juga tutorial mengenai CSS.

Hal pertama yang harus dilakukan adalah membuat kerangka pada halaman.
a. Selalu tambahkan <!DOCTYPE html> pada baris pertama. Hal ini bertujuan untuk memberitahu browser bahasa apa yang digunakan (dalam hal ini HTML).
b. Selalu tambahkan <html> pada baris berikutnya. Ini adalah permulaan kode HTML.
c. Selalu tambahkan </html> pada baris terakhir. Ini adalah penutup kode HTML.

Terminologi Dasar

Semua yang berada di dalam tanda <> disebut dengan tags. Hampir setiap tags memiliki pembuka dan penutup.
Contoh tag pembuka: <html>
Contoh tag penutup: </html>

Tags dapat dianalogikan sebagai tanda kurung. Ketika ada kurung buka, harus ada kurung tutup. Selain itu, tags juga harus ditutup dengan urutan yang benar. Tag pembuka yang terakhir yang harus ditutup terlebih dahulu, seperti contoh di bawah.

<tag pertama><tag kedua>Teks Biasa</tag kedua></tag pertama>

Sebagai latihan, coba ketik kode berikut, save dengan format .html, kemudian lihat hasilnya :

<!DOCTYPE html>
<html>
Hello World
</html>

Membuat Head

Ada 2 bagian pada file HTML: head dan body. Kita mulai dengan head.
Head dapat menampung informasi mengenai file HTML yang dibuat, seperti judul halaman web (title). Title adalah tulisan yang kita lihat pada baris judul browser atau tab halaman. Sebagai contoh, judul halaman web ini yaitu "Dasar-dasar HTML Bagian 1 | RNetworks | Berbagi ilmu IT pada Blog".
Sebagai latihan, coba kode di bawah ini untuk membuat head pada HTML.

<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
</html>

HTML Body

Body merupakan tempat menyimpan konten HTML seperti text, gambar, dan link. Konten pada body merupakan apa yang dapat dilihat langsung pada halaman web.
Body di simpan di dalam tag <html>, setelah tag <head> . Sebagai contoh, perhatikan dan coba kode di bawah ini :

<html> 

<head> 

<title>Web Saya</title> 

</head> 

<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
</body>
</html>

Jika kita save lalu buka file HTML dengan kode di atas, maka akan menghasilkan tulisan :
Paragraf 1
Paragraf 2

Headings & Paragraf pada HTML

Heading pada HTML merupakan sub judul dari konten sebuah halaman web. Heading memiliki berbagai jenis ukuran text dengan font weight (ketebalan huruf) yang berbeda dengan paragraf biasa, h1 dengan penulisan <h1>Teks Heading</h1> untuk ukuran paling besar, dan h6 dengan penulisan <h6>Teks Heading</h6> untuk ukuran paling kecil. Hal ini dapat memudahkan cara penulisan paragraf yang bercabang.

Paragraf pada HTML seperti layaknya menulis paragraf pada Ms Word atau text editor lainnya. Paragraf memiliki cara penulisan <p>Teks Paragraf</p>. Setiap tag penutup paragraf, berarti sebuah paragraf dibuat, dan akan membuat paragraf baru pada baris selanjutnya untuk teks berikutnya. Untuk penulisan lebih lanjut, dapat disesuaikan alignment, jenis font, warna pada paragraf.

Untuk melihat perbandingan antara Heading dan Paragraf, dapat dicoba code berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>
      Headings & Paragraphs
    </title>
  </head>
  <body>
    <h1>Ini h1</h1>
    <p>Ini paragraf di dalam h1</p>

    <p>Ini paragraf lain di dalam h1</p>
    <h2>Ini h2</h2>
    <p>Ini paragraf di dalam h2</p>
    <h3>Ini h3</h3>
    <p>Ini paragraf di dalam h3</p>
    <h4>Ini h4</h4>
    <p>Ini paragraf di dalam h4</p>
    <h5>Ini h5</h5>
    <p>Ini paragraf di dalam h5</p>
    <h6>Ini h6</h6>
    <p>Ini paragraf di dalam h6</p>
  </body>
</html>

Link pada HTML

Bagaimana cara agar membuat seseorang dapat berpindah dari satu halaman web ke halaman lain? Kita dapat menggunakan Hyperlink, atau disingkat dengan link. Dengan Link, kita dapat membuat sebuah elemen pada konten HTML (Text, gambar, dll) dapat diklik dan memindahkan user ke halaman lain, baik halaman lain yang berada dalam satu situs web, maupun ke halaman situs web lain. Caranya :

Pertama, ada sebuah tag pembuka <a> dan buat sebuah attribute dengan nama href pada tag tersebut yang mengarah pada sebuah URL sebuah halaman web, contoh http://reznetworks.blogspot.com.

Setelah itu, tambahkan elemen (contoh teks) sebagai deskripsi/konten untuk di-klik.

Terakhir, tambahkan closing tag </a> setelah konten tersebut.

Coba kode berikut untuk untuk memahami lebih lanjut :

<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Link</title>
  </head>
  <body>
    <a href="http://reznetworks.blogspot.com">RNetworks</a>
  </body>
</html>

Menambahkan Images pada HTML

Image atau gambar pada HTML dapat dimasukkan/dipanggil menggunakan tag <img>. Tag ini sedikit berbeda dengan tag yang lain. Jika tag lain memasukkan konten diantara opening & closing tag, pada tag img kita memberitahukan letak gambar menggunakan atribut src. Tag ini berbeda juga karena tidak menggunakan closing tag, tetapi tag img memiliki tanda / di dalam tagnya sebagai penutup. Sehingga, formatnya akan seperti : <img src="url" />. URL pada img dapat berupa link gambar dari situs lain, atau gambar pada suatu direktori/folder di komputer kita.

Berikut contoh code penggunaan img pada HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Image</title>
  </head>
  <body>
    <img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
    <img src="D:\folder\gambar.jpg" />
  </body>
</html>

Menambahkan Link pada Image

Sebuah gambar/image juga seringkali dibuat menjadi sebuah link dengan tujuan untuk lebih menarik minat pengunjung halaman web mengklik pada link tersebut. Untuk menambahkan link pada image dalam HTML, masukkan tag <img> diantara tag <a></a>. Perhatikan contoh berikut :

<!DOCTYPE html>
<html>
  <head>
    <title>Link & Image</title>
  </head>
  <body>
    <a href="http://www.wikipedia.org"><img src="https://upload.wikimedia.org/wikipedia/en/3/34/ISync_icon.png" /></a>
</body>
</html>



Bersambung ke Dasar-dasar HTML Bagian 2