Cara Mudah Belajar Aplikasi Multimedia

Camtasia Studio


Dunia komputer sangatlah luas dan yang pasti ter update setiap detiknya, banyak aplikasi baru bermunculan dan pasti ada yang menarik perhatian kita, namun kita tidak dapat mengoperasikannya sebagaimana mestinya, yang akan kita lakukan pasti bertanya atau
mencari tutorialnya. Nah sekarang kita akan membahas tentang “bagaimana membuat Tutorial itu sendiri”, banyak orang beranggapan itu sulit dan segan untuk mencoba, padahal sangat simple dalam teori dan praktek.
Camtasia Studio adalah perangkat lunak perekam video atau layar komputer yang diterbitkan oleh TechSmith. Sebelum mulai merekam, pengguna diminta mengatur area dari layar atau jendela yang akan ditangkap atau seluruh layar dapat direkam sebagai gantinya. Camtasia Studio dapat juga digunakan untuk merekam audio dari mikrofon atau speaker Anda dan merekam video dari webcam Anda di layar.
Dengan Camtasia Studio Anda dapat dengan mudah membuat video tutorial dengan merekam beberapa langkah-langkah yang kita lakukan pada desktop sehingga pemirsa dapat dengan mudah mempraktekkan.
Mula-mula Anda melakukan semua langkah demonstrasi dalam urutan dan mampu melompat dari satu aplikasi ke yang lain tanpa mengganggu proses perekaman. Anda dapat menghentikan perekaman dengan kombinasi hotkey pada setiap saat, di titik mana perangkat lunak membuat masukan yang telah ditangkap, dan menerapkan pengaturan yang ditetapkan pengguna, seperti kapan dan bagaimana menampilkan kursor. Camtasia versi yang lebih baru menawarkan pilihan untuk menggambar sebuah lingkaran sekitar setiap kali kursor mouse diklik, untuk lebih menggambarkan tindakan Anda di layar dekstop.
Jendela utama dapat Anda tambahkan dengan beberapa keterangan dan memberi banyak efek, menambahkan suara atau musik, klip tempat judul, memperbesar dan memperkecil dan banyak efek-efek lainnya.
techsmith-camtasia-studio
Contoh nya


Cara menggunakan Camtasia Studio :
1.Klik aplikasi Camtasia Studio 7, maka akan tampil 4 menu:
Record the screen berfungsi sebagai merekam aktifitas dalam komputer yang sedang kita operasikan.
Record voice narration berfungsi sebagai merekam suara.
Record power point berfungsi sebagai merekam aktifitas komputer, menggunakan aplikasi microsfot power point.
Import media berfungsi sebagai menginpor media/menggambil media video dan kemudian pengambilan media tersebut akan diedit sesuai kebutuhan user.
2.Klik “record the screen”.
3.Drag area yang akan kita rekam, kemudian tekan tombol berwarna merah dengan nama “rec”, maka aktifitas merekampun berlansung sesuai keinginan user,
4.Untuk berhenti merekam aktifitas, tekan “f10″ untuk selesai rekam.
5.Kemudian klik save and edit dan beri nama “belajar1.camrec”.
6.Pada menu “Editing Dimensions”, atur dimensi yang anda suka lalu OK.
7.Klik menu “produce and share“, pada bagian show me to my video anda pilih “costum production settings“, klik next.
pilih format video berbentuk WMV, atau format video lainnya, kemudian klik next.
8.Atur selera anda lebar dan tinggi pada video size,
9.Pada video option dan Maker Option, anda lewati saja.
10.Pada product video, isikan pada production name ” belajar”,kemudian klik finish.
11.Tunggulah hasil convert nya sampai 100%,maka pembuatan tutorial akan selesai.

Download (disini)

SIGIL 0.7.4


MEMBUAT BUKU DIGITAL MENGGUNAKAN SIGIL

Buku digital, atau disebut juga e-book merupakan sebuah publikasi yang terdiri dari teks, gambar, maupun suara dan dipublikasikan dalam bentuk digital yang dapat dibaca di komputer maupun perangkat elektronik lainnya. Sebuah buku digital biasanya merupakan versi elektronik dari buku cetak, namun tidak jarang pula sebuah buku hanya diterbitkan dalam bentuk digital tanpa versi cetak.



Format buku digital beragam, mulai dari format yang didukung oleh perusahaan besar (PDF oleh adobe, swf oleh flash, doc oleh Word) dan berbagai format lainnya yang didukung oleh perangkat maupun pembaca buku digital tertentu. Pada tahun 1990 dikembangkan pula format open e-book yang memungkinkan publisher dan pengembang software untuk menggunakan satu format yang dapat dibaca di perangkat manapun dan menggunakan berbagai software pembaca buku digital.

Contoh Pembuatan Ebook Dengan Sigil
atau klik Disini

Pengertian Sigil

 Sigil adalah editor open-source untuk EPUB e-buku yang dikembangkan oleh Strahinja Marković pada tahun 2009 dan dikelola oleh John Schember sejak tahun 2011. Sebagai aplikasi cross-platform, itu didistribusikan untuk Microsoft Windows, Mac OS X dan platform Linux di bawah lisensi GNU GPL. Sigil mendukung WYSIWYG dan mengedit kode berbasis file EPUB, serta impor HTML dan file teks biasa.



Fitur Sigil meliputi :
     -Penuh UTF-16 dan EPUB 2 spesifikasi dukungan
     -Beberapa views: buku, kode dan pratinjau tampilan
     -Editing WYSIWYG dalam tampilan buku
     -Daftar isi Generator dengan dukungan judul multi-level
     -Editor Metadata dengan dukungan penuh untuk semua entri metadata
     -Eja memeriksa dengan default dan pengguna kamus dikonfigurasi
     -Ekspresi reguler penuh (PCRE) dukungan untuk mencari dan mengganti
     -Mendukung impor EPUB dan HTML file, gambar, dan style sheet,
     -Integrasi FlightCrew EPUB untuk EPUB kepatuhan validator
     -API Terpadu untuk HTML eksternal dan grafis editor



Download (disini)

Visual Basic .NET


Microsoft Visual Basic .NET adalah sebuah alat untuk mengembangkan dan membangun aplikasi yang bergerak di atas sistem .NET Framework, dengan menggunakan bahasa BASIC. Dengan menggunakan alat ini, para programmer dapat membangun aplikasi Windows Forms, Aplikasi web berbasis ASP.NET, dan juga aplikasi command-line. Alat ini dapat diperoleh secara terpisah dari beberapa produk lainnya (seperti Microsoft Visual C++, Visual C#, atau Visual J#), atau juga dapat diperoleh secara terpadu dalam Microsoft Visual Studio .NET. Bahasa Visual Basic .NET sendiri menganut paradigma bahasa pemrograman berorientasi objek yang dapat dilihat sebagai evolusi dari Microsoft Visual Basic versi sebelumnya yang diimplementasikan di atas .NET Framework. Peluncurannya mengundang kontroversi, mengingat banyak sekali perubahan yang dilakukan oleh Microsoft, dan versi baru ini tidak kompatibel dengan versi terdahulu.

Daftar isi  [sembunyikan]
1 Versi
1.1 Visual Basic .NET 2002 (VB 7.0)
1.2 Visual Basic .NET 2003 (VB 7.1)
1.3 Visual Basic 2005 (VB 8.0)
1.4 Visual Basic 9.0 (Visual Basic 2008)
2 Hubungan dengan Visual Basic klasik
3 Contoh Pemrograman
4 Lihat pula
5 Rujukan
Versi[sunting | sunting sumber]
Terdapat tiga buah versi Visual Basic yang dirilis hingga bulan Agustus 2007, yakni:

Visual Basic .NET 2002 (VB 7.0)[sunting | sunting sumber]
Versi pertama dari Visual Basic .NET adalah Visual Basic .NET 2002 yang dirilis pertama kali pada bulan Februari 2002. Visual Basic .NET 2002 merupakan sebuah bahasa pemrograman visual yang berbasis bahasa BASIC (sama seperti halnya Visual Basic 6.0, tetapi lebih disempurnakan dan lebih berorientasi objek), dan didesain untuk berjalan di atas Microsoft .NET Framework versi 1.0.

Versi 7.0 ini dirilis bersamaan dengan Visual C# dan ASP.NET. Bahasa C#, yang dianggap sebagai jawaban terhadap Java, mendapatkan perhatian yang lebih banyak dibandingkan dengan VB.NET yang kurang begitu banyak diulas. Hasilnya, sedikit orang di luar komunitas Visual Basic yang memperhatikan VB.NET. Versi pertama ini kurang mendapat sambutan yang bagus dari para programmer, dan pada saat itu, program berbasis Visual Basic 6.0 sedang marak-maraknya dibuat. Para programmer yang mencoba Visual Basic .NET untuk pertama kali akan merasakan bahwa Visual Basic .NET sangatlah berbeda dibandingkan dengan Visual Basic sebelumnya. Contoh yang paling mudah adalah runtime engine yang lebih besar 10 kali lipat dibandingkan Visual Basic 6.0, dan juga meningkatkan beban di memori.

Visual Basic .NET 2003 (VB 7.1)
Selanjutnya, pada bulan Maret 2003, Microsoft pun merilis lagi versi yang lebih baru dari Visual Basic .NET, Visual Basic .NET 2003. Versi ini berisi beberapa perbaikan dibandingkan dengan versi sebelumnya, dan aplikasi yang dibuatnya dapat berjalan di atas .NET Framework versi 1.1. Fitur yang ditambahkan adalah dukungan terhadap .NET Compact Framework dan mesin wizard upgrade VB6 ke VB.NET yang telah ditingkatkan. Peningkatan yang lainnya adalah peningkatan pada performa dan keandalan dari Integrated Development Environment (IDE) Visual Basic itu sendiri, dan juga runtime engine.

Visual Basic .NET 2003 tersedia dalam beberapa jenis cita rasa: Professional, Enterprise Architect dan Academic Edition. Khusus untuk Visual Basic .NET 2003 Academic Edition, versi tersebut didistribusikan secara gratis untuk beberapa sekolah di dalam setiap negara; versi Professional dan Enterprise Architect merupakan produk komersial.

Visual Basic 2005 (VB 8.0)[sunting | sunting sumber]
Setelah itu, Microsoft pun berkonsentrasi dalam mengembangkan Microsoft .NET Framework 2.0, dan tentunya alat bantu untuk membangun program di atasnya. Hingga pada tahun 2005, mereka pun merilis versi terbaru dari Visual Basic .NET, yang kali ini disebut dengan Visual Basic 2005 (dengan membuang kata ".NET"), bersama-sama dengan beberapa aplikasi pengembangan lainnya.

Untuk rilis 2005 ini, Microsoft menambahkan beberapa fitur baru, di antaranya adalah:

Edit and Continue
Fitur ini sebelumnya terdapat di dalam Visual Basic, akan tetapi dihapus di dalam Visual Basic .NET. Dengan keberadaan fitur ini, para programmer dapat memodifikasi kode pada saat program dieksekusi dan melanjutkan proses eksekusi dengan kode yang telah dimodifikasi tersebut.
Evaluasi ekspresi pada saat waktu desain
Munculnya Pseudo-Namespace "My", yang menyediakan:
Akses yang mudah terhadap beberapa area tertentu dari dalam .NET Framework yang tanpanya membutuhkan kode yang sangat signifikan.
Kelas-kelas yang dibuat secara dinamis (khususnya My.Forms).
Peningkatan yang dilakukan terhadap konverter kode sumber dari Visual Basic ke Visual Basic .NET.
Penggunaan kata kunci (keyword) Using, yang menyederhanakan penggunaan objek-objek yang membutuhkan pola Dispose untuk membebaskan sumber daya yang sudah tidak terpakai.
Just My Code, yang menyembunyikan kode reusable yang ditulis oleh alat bantu Integrated Development Environment (IDE) Visual Studio .NET.
Pengikatan sumber data (Data Source binding), yang mampu mempermudah pengembangan aplikasi basis data berbasis klien/server.
Fungsi-fungsi yang tersebut di atas (khususnya My) ditujukan untuk memfokuskan Visual Basic .NET sebagai sebuah platform pengembangan aplikasi secara cepat dan "menjauhkannya" dari bahasa C#.

Bahasa Visual Basic 2005 memperkenalkan fitur-fitur baru, yakni:

Bawaan .NET Framework 2.0:
Generics
Partial class, sebuah metode yang dapat digunakan untuk mendefinisikan beberapa bagian dari sebuah kelas di dalam sebuah berkas, lalu menambahkan definisinya di lain waktu; sangat berguna khususnya ketika mengintegrasikan kode pengguna dengan kode yang dibuat secara otomatis.
Nullable Type
Komentar XML yang dapat diproses dengan menggunakan beberapa alat bantu seperti NDoc untuk membuat dokumentasi secara otomatis.
Operator overloading
Dukungan terhadap tipe data bilangan bulat tak bertanda (unsigned integer) yang umumnya digunakan di dalam bahasa lainnya.
Visual Basic 9.0 (Visual Basic 2008)
Versi ini merupakan versi terbaru yang dirilis oleh Microsoft pada tanggal 19 November 2007, bersamaan dengan dirilisnya Microsoft Visual C# 2008, Microsoft Visual C++ 2008, dan Microsoft .NET Framework 3.5.

Dalam versi ini, Microsoft menambahkan banyak fitur baru, termasuk di antaranya adalah:

Operator If sekarang merupakan operator ternary (membutuhkan tiga operand), dengan sintaksis If (boolean, nilai, nilai). Ini dimaksudkan untuk mengganti fungsi IIF.
Dukungan anonymous types
Dukungan terhadap Language Integrated Query (LINQ)
Dukungan terhadap ekspresi Lambda
Dukungan terhadap literal XML
Dukungan terhadap inferensi tipe data.
dukungan terhadap 'LINQ'
Hubungan dengan Visual Basic klasik
Apakah Visual Basic .NET dianggap sebagai sebuah versi Visual Basic atau benar-benar bahasa yang berbeda merupakan sebuah topik perdebatan yang hangat. Hal ini dikarenakan sintaksis bahasa Visual Basic .NET tidak mengalami perubahan yang sangat drastis, dan hanya menambahkan beberapa dukungan fitur baru seperti penanganan eksepsi secara terstruktur dan ekspresi yang bisa di-short-circuit-kan. Dua perubahan tipe data pun terjadi saat berpindah ke Visual Basic .NET. Dibandingkan dengan Visual Basic 6.0, tipe data Integer yang dimiliki oleh Visual Basic .NET memiliki panjang dua kali lebih panjang, dari 16 bit menjadi 32 bit. Selain itu, tipe data Long juga sama-sama berubah menjadi dua kali lipat lebih panjang, dari 32 bit menjadi 64 bit. Bilangan bulat 16-bit dalam Visual Basic .NET dinamakan dengan Short. Lagi pula, desainer GUI Windows Forms yang terdapat di dalam Visual Studio .NET atau Visual Basic .NET memiliki gaya yang sangat mirip dengan editor form Visual Basic klasik.

Jika sintaksis tidak banyak yang berubah, lain halnya dengan semantik, yang berubah secara signifikan. Visual Basic .NET merupakan sebuah bahasa pemrograman yang mendukung fitur "Bahasa Pemrograman Berorientasi Objek" secara penuh, karena memang didukung oleh arsitektur Microsoft .NET Framework, yang mengandung kombinasi dari Common Language Runtime dan Base Class Library. Visual Basic klasik, hanya merupakan sebuah bahasa pemrogaman berbasis objek, yang berjalan di atas arsitektur Component Object Model (COM).

Perubahan ini telah mengubah banyak asumsi tentang hal yang benar yang harus dilakukan dengan mempertimbangkan performa dan kemudahan untuk dipelihara. Beberapa fungsi dan pustaka perangkat lunak, yang ada di dalam Visual Basic klasik, kini tidak terdapat di dalam Visual Basic .NET; mungkin masih banyak yang masih terdapat di dalam Visual Basic .NET, tapi tidak seefisien apa yang ditawarkan oleh .NET Framework. Bahkan jika program Visual Basic klasik bisa dikompilasi dengan benar, sebagian besar program Visual Basic klasik harus melalui beberapa proses refactoring untuk mengadopsi fitur bahasa baru secara keseluruhan. Dokumentasi untuk ini pun tersedia di situs Microsoft
Contoh dasar


Contoh Pemrograman
Contoh program sederhana dalam bahasa Visual Basic .NET yang dipakai untuk menghitung jumlah pembayaran dari m_item buah barang dengan harga m_price per item ditambah 5% pajak penjualan:

  Dim m_item, m_price, tax, total As double
  m_item = double.Parse(textBox1.Text)
  m_price = double.Parse(textBox2.Text)
  tax = 0.05
  total = m_item * m_price * (1 + tax)
  label5.Text = total.ToString()
  MessageBox.Show("Well Done.")
Berikut ini adalah contoh lain dari program Visual Basic yang menggunakan objek CheckBox dan ComboBox untuk menghitung jumlah kredit mata kuliah yang diambil oleh seorang mahasiswa (masing-masing mata kuliah = 3 kredit):

Dim total As Integer
total = 0 ' awal dari jumlah kredit total
If (CheckBox1.Checked = True) Then 'boleh memilih semua checkbox
            total += 3
        End If
        If (CheckBox2.Checked = True) Then
            total = total + 3
        End If
        If (CheckBox3.Checked = True) Then
            total = total + 3
        End If
If (ComboBox1.SelectedIndex = 0) Then 'hanya bisa memilih satu
            total = total + 3
        ElseIf (ComboBox1.SelectedIndex = 1) Then
            total = total + 3
        ElseIf (ComboBox1.SelectedIndex = 2) Then
            total = total + 3
        End If
Label3.Text = CStr(total) ' hasil kredit total yang diambil


Downliad VB.NET (disini)

Pengertian HTML

Dari penjelasan yang ada di wikipedia : HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.

Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ).
Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Berikut tujuan dibuatnya HTML5 :

• Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
• Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
• Penanagan kesalahan yang lebih baik
• Lebih markup untuk menggantikan scripting
• HTML5 merupakan perangkat mandiri
• Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :

• Unsur kanvas untuk menggambar
• Video dan elemen audio untuk media pemutaran
• Dukungan yang lebih baik untuk penyimpanan secara offline
• Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
• Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.

Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.
cara membuat html design

Pemberian Catatan/Komentar pada Dokumen HTMLCatatan adalah bagian dari kode HTML  yang  diabaikan oleh browser. Kegunaan
catatan/komentar dalam kode HTML adalah sebagai keterangan yang berguna untuk
pembaca kode. Misalnya, catatan digunakan untuk memberikan catatan apa saja dan
bahkan bisa mencakup beberapa baris.
Komentar.html
<!--Program ini dibuat pada tanggal 20 Oktober 2013 --> 
<html> 
<head> 
<title>Hai</title> 
<Body> 
<!-- Catatan bisa diletakan dimana saja -->  
Saya Sedang Belajar HTML  
</body> 
</html> 

Penggunaan Tag Break Row (pindah baris)
Tag ini digunakan untuk menurunkan teks sebanyak yang kita inginkan, dengan kata
lain satu tag <BR> sama dengan anda menekan tombol Enter satu kali. Untuk lebih jelas
sekarang perhatikan contoh berikut ini :
Breakrow.html
<html> 
<head> 
<title>belajar tag br</title> 
</head> 
<body> 
Mudah-mudahan anda cepat bisa belajar HTML <br> 
Amin …! 
</body> 
</html>
Penggunaan Tag Paragraf
Tag <P> berguna untuk membuat paragraf. Jarak paragraf/tek pertama dengan
paragraf/tek kedua sama dengan anda menggunakan tag <br> dua kali. Untuk lebih
jelasnya perhatikan contoh di bawah ini.
Paragraf1.html
<html> 
<head> 
<title>belajar tag paragraf</title> 
</head> 
<body> 
Senja Telah Tiba<p> 
Mentari kian temaram<br> 
Samar disela-sela daun cemara<br> 
Angin mulai berhembus dari samudera<br> 
Pertanda malam telah tiba 
</body> 
</html> 
Atribut Align juga bisa diterapkan pada tag paragraf. Yang berguna untuk mengatur
peletakan  teks di dalam masing-masing baris. Sebagai contoh : tambahkan pada kode
HTML di atas dengan kode seperti yang terlihat pada contoh program HTML berikut  :
Paragraf2.html 
<html> 
<head> 
<title>belajar tag paragraf</title> 
</head> 
<body> 
Senja Telah Tiba 
<p align = “center”> 
Mentari kian temaram<br> 
Samar disela-sela daun cemara<br> 
Angin mulai berhembus ke samudera<br> 
Pertanda malam telah tiba<br> 
</p> 
Bandar Lampung, 2004 
</body> 
</html> 
Penggunaan Tag CenterUntuk meratakan teks ketengah, kita juga bisa menggunakan tag <Center>. Dan untuk
mengakhiri penengahan teks (yakni agar teks berikutnya tidak terletak ditengah), kita
perlu menambahkan tanda penutup berupa tanda slash (/), cara penulisannya adalah :
</center>. Untuk jelasnya perhatikan latihan di bawah ini :
center.html
<html> 
<head> 
<title>belajar tag center </title> 
</head> 
<body> 
<center> 
Addres : 
<hr> 
Green Kost Production<br> 
<hr size = 5 width = 25% align = left  noshade> 
Jl. Jambu 1 No. 12<br> 
Gedung Meneng<br> 
Bandar Lampung 35145  
</center> 
</body> 
</html> 
Penggunaan Tag Heading
Tag ini digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam
badan dokumen. Ukuran yang ada pada tag heading ada 6 buah ukuran yang paling
besar ditunjukan dengan penomoran yang paling kecil yaitu angka 1 dan yang paling
kecil ditandai dengan nomor terbesar yaitu 6. anda juga bisa menggunakan angka lebih
dari enam misal 7 atau 8, tetapi hasilnya adalah tetap seukuran angka 6 karena
standarnya adalah ukuran 6 yang terkecil. Bentuk tag-tag heading dimulai dari yang
terbesar sampai terkecil dapat dilihat pada tatacara penulisan berikut ini  :
<H1> … </H1> (Heading 1)
<H2> … </H2> (Heading 2)
<H3> … </H3> (Heading 3)
<H4> … </H4> (Heading 4)
<H5> … </H5> (Heading 5)
<H6> … </H6> (Heading 6)

Untuk memperjelas kegunaan tag heading ini perhatikan pada contoh di bawah ini :
heading.html
<html> 
<head> 
<title>belajar tag heading</title> 
</head> 
<body> 
<h1>ukuran heading 1</h1> 
<h2>ukuran heading 2</h2> 
<h3>ukuran heading 3</h3> 
<h4>ukuran heading 4</h4> 
<h5>ukuran heading 5</h5> 
<h6>ukuran heading 6</h6> 
</body> 
</html> 

seperti halnya pada tag <P>, tag heading juga memiliki atribut. Salah satu atribut yang
bisa digunakan adalah atribut align yang bisa bernilai : center, left, right, justify.
Cara menuliskan pada dokumen HTML adalah <h1 align=”center”>.

Menampilkan Garis Horisontal (Horizontal Row)Agar tampilan dokumen HTML yang kita buat menjadi lebih menarik, seorang pembuat
dokumen web sering menambahkan garis horisontal biasanya diletakkan di bawah
sebuah teks maupun objek lainnya. Cara membuat garis ini sangat mudah sekali,
caranya yakni dengan menyertakan tag horizontal Row <HR>. Pada tag <hr> juga bisa
ditambahkan atribut-atribut seperti berikut ini  :
Size : Untuk mengubah ketebalan garis 
Width : Untuk merubah lebar garis 
Align : Untuk mengatur tata letak teks dalam baris
Noshade : Untuk merubah garis yang dibuat tidak disertai bayangan
Berikut adalah contoh kode HTML yang menggunakan tag ini :
Garis.html
<html> 
<head> 
<title>belajar membuat garis </title> 
</head> 
<body> 
Addres : 
<hr> 
Green Kost Production<br> 
<hr size = 5 width = 25% align = left  noshade> 
Jl. Jambu 1 No. 12<br> 
Gedung Meneng<br> 
Bandar Lampung 35145  
</body> 
</html>

Penggunaan Tag Divisi
Tag ini digunakan untuk mengelompokkan sejumlah baris teks yang memiliki tipe
sama.  Fungsinya bisa juga disamakan  dengan tag <P>. perhatikan pada contoh berikut
ini :

Divisi.html
<html> 
<head> 
<title>belajar tag div </title> 
</head> 
<body> 
<div align=”right”> 
Addres : 
<hr> 
Green Kost Production<br> 
<hr size = 5 width = 25% noshade> 
Jl. Jambu 1 No. 12<br> 
Gedung Meneng<br> 
Bandar Lampung 35145  
</div> 
</body> 

</html>

Cascading Style Sheets


Sama halnya styles dalam 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). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Daftar isi
1 Sejarah CSS
2 Versi
3 Penulisan
3.1 Inline Style Sheet
3.2 Embedded Style Sheet
4 Sifat CSS
5 Fakta Menggunakan CSS
6 Contoh Berkas CSS
7 Referensi
8 Pranala luar
Sejarah CSS[sunting | sunting sumber]
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style.CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.

Versi
Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua.

CSS3 juga 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, CSS Math, dan CSS Object Model.

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 Sheet
CSS 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
<html>
<head>
<title>Contoh Bentuk Inline </title>
</head>
<body bgcolor="#FFFFFF">
<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 </p>
</body>
</html>
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 Penerapan


Contoh penggunaan CSS dengan metode Embedded Style Sheet

<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<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>
</html>
Sifat CSS
Ada dua sifat CSS yaitu internal dan eksternal.Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.

Sifat yang kedua adalah eksternal di mana skrip 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 skrip tersebut.

Fakta Menggunakan CSS[sunting | sunting sumber]
Fakta Menggunakan CSS diantaranya

Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama.
Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.
Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan.
Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya.
Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browser
CSS adalah layouting "Masa Depan" dengan penggabungan bersama XHTML.
Contoh Berkas CSS

<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>

<body>

<h1>CSS example!</h1>
<p>This is a paragraph.</p>

</body>
</html>