Search

Sekilas Tentang HTML

Diposting oleh Hadi Permana on Sabtu, 25 Januari 2014

Sekilas Tentang HTML
HTML adalah singkatan dari hypertext markup language. Fungsi HTML di dalam sebuah dokumen web adalah untk mengatur struktur tampilan dokumen tersebut dan juga untuk menampilkan link atau smabungan ke halaman web lain yang ada di internet. Bisanya sebuah dokumen html disimpan dalam extesi .html. HTML disebut dengan markup language karena HTML befungsi untuk memprindah file tulisan (text) biasa untuk dapat dilihat pada sebuah web browser.
Untuk membuat HTMl, anda cukup menggunakan notepad, walaupun sebenarnya banyak sekali seoftware-software yang memudahkan kita dalam membuat dokumen HTML ini.

Sintak Dasar HTML
Berikut ini adalah struktur HTML.
Tulislah contoh berikut menggunakan notepad kemudian simpanlah dalam format .html.
<html>
<head>
<title>Ini HTML</title>
</head>
<body>
Ini adalah dokumen HTML pertamaku
</body
</html>

Skrip di atas adlah file HTML yang paling sederhana. Setiap tag HTML selalu memiliki tag pembuka dan tag penutup. Pada contoh diatas, misalnya tag <head> maka penutupnya </head>. Coba perhatikan, ada tanda ”/” pada setiap tag penutup.

Manipulasi Text
Gunakan notepad untuk menuliskan sntaks berikut ini dan simpan dengan ektensi .html.
<html>
<head>
<title>Manipulasi text</title>
</head>
<body>
<b>huruf tebal atau bold</b? <br>
<i>huruf miring atau italic</i> <br>
<u>garis bawah atau underline</u> <br>
<font color=”green”>ini warna hijau</font> <br>
<font color=”blue”>ini warna biru</font> <br>
<font color=”brown”>ini warna coklat</font> <br>
</body>
</html>
Untuk kode warna biasanya menggunakan beberapa kode tertentu dengan huruf atau angka atau gabungan keduanya.berikut ini standar koe warna dan jenis warna yang dihasilkan.

Warna
Hex 6
RGB
Gray
#808080
128,128,128
White
#FFFFFF
255,255,255
Maroon
#FF0000
128,0,0
Red
#FF0000
255,0,0
Purple
#800080
0,128,0
Fuchsia
#FF00FF
255,0,255
Green
#008800
0,128,0
Lime
#00FF00
0,255,0
Olive
#808000
128,128,0
Yellow
#FFFF00
255,255,0
Navy
#000080
0,0,128
Blue
#0000FF
0,0,255
Teal
#008080
0,128,255
Aqua
#00FFFF
0,255,255
Black
#000000
0,0,0
Silver
#C0C0C0
192,192,192

Ada beberapaaturan lain yang sigunakan untuk teks. Berikut contoh beberapa aturan tersebut.
<html>
<head
<title>Manipulasi Text</title>
<body
<b>huruf tebal atau bold</b? <br>
<i>huruf miring atau italic</i> <br>
<u>garis bawah atau underline</u> <br>
<font size=”1”>ini huruf dengan ukuran 1</font> <br>
<font size=”3”>ini huruf dengan ukuran 3</font> <br>
<font size=”5”>ini huruf dengan ukuran 5</font> <br>
</body>
</html>

Pengaturan Paragraf
Untuk mengatur sebuah paragraf, gunakan sintax berikut
Html>
<head>
<title>mengatur sebuah paragraf</title>
</head>
<body
<p align=”left”>tulisan ini posisinya rata kiri</p>
<p align=”right”>tulisan ini posisinya rata kanan</p>
<p align=”justify”>tulisan ini posisinya rata kiri dan kanan</p>
</body>
</html>

Hyperlink
Hyperlink atau lik adalah sambungan yang akan menghubungkan suatu web dengan web lainnya di Internet. Sebagai contoh, kita akan membuat link yang akan menuju ke halaman utama Google maka perhatikan contoh dibawah ini.
<html>
<head>
<title>membuat hyperlink</title>
</head>
<body>
Kliklah tulisan ini untuk pergi ke google <a href=http://google.co.id/>Halaman utama Google</a>. Terima kasih.
</body>
</html>

Images
Untuk memunculkan gambar pada halaman web, kita hanya tinggal menambahkan sintaks HTML berikut.
<img src=”target_atau_url_gambar”>
Contoh:
<html>
<head>
<title>gambar</title>
</head>
<body>
<img src=”angel_evil.jpg”>
</body>
</html>

Pada contoh diatas, pastikan bahwa gambar berada pada folder yang sama dengan file HTML yang telah dibuat. Jika anda menyimpan gambar itu pada sebuah folder, misalnya nama folde itu adalah “images”, maka kode di atas akan menjadi:
<html>
<head>
<title>gambar</title>
</head>
<body>
<img src=”angel_evil.jpg”>
</body>

</html>
More aboutSekilas Tentang HTML

Sekilas Tentang CSS

Diposting oleh Hadi Permana

Sekilas Tentang CSS
Dalam buku CSS2 Stylist: menata Gaya Halaman Web dengan CSS2, ada satu pengertian dan penjelasan yang menarik tentang CSS. Dalam buku tersebut dijelaskan bahwa:
CSS (Cascading Style Sheet) adalah suatu bahasa yang di khususkan untuk mengatur gaya atau layout sebuah halaman web. CSS digunakan oleh pembuat halaman web dan juga pengakses halaman web, unutk mendefinisikan warna, huruf layout,dan aspek-aspek presentasi dokumen lainnya. CSS memang didesain untuk memisahkan antara isi dokumen (yang ditulis menggunakan HTM atau bahasa lain yang sejenis) dengan bentuk presentasi dokumen (ditulis dalam CSS). Pemisahan ini memberikan keuntungan akan adanya peningkatan dalam aksesibilitas isi, menyediakan flesksibilitas lebih, dan pengendalian terhadap spesifikasi karakteristik bentuk presentasi, serta mereduksi kompleksitas dan perulangan-perulangan pada struktur isi.
Selain HTML, suatu bentuk markup lainnya, yaitu XML, juga dapat memanfaatkan CSS ini untuk mengatur gaya tampilan yang diinginkan. Dalam implementasinya, CSS didefinisikan melalui kode-kode style sheet yang dapat disertakan pada file HTM itu sendiri, atau terpisah dari file HTML. Jika terpisah maka file style sheet tersebut harus diberi ekstensi .css untuk menandai bahwa file tersebut adalah file CSS. Setelah itu, file CSS dapat di referensi oleh file HTML.
Berikut ini saya akan mengenalkan CSS penting yang harus dipahami untuk membuat sebuah template.
Variable Definitions
Bagian ini adalah bagian-bagian yang akan mengatur blog anda, antara lain warna blog, jenis dan ukuran font yang akan digunakan, serta posisi sidebar dan halaman posting (apakah di kanan atau di kiri). Untuk pengaturan warna dan jenis font serta ukurannya, biasanya kita akan mengedit pada bagian Layout > font and Color. Disini saya hanya menjelaskan cara kerjanya.
Berikut adalah contoh penggunaanya.
<Variable name=”bgcolor” description=”Page Background Color” type=”color” default=”#fff” value=”#ffffff”>
Pada contoh diatas, artinya bahwa warna background blog kita adalah #ffffff (warna putih) dan secara default akan berwarna #fff (putih) pula.
Contoh lain:
<Variable name=”titlecolor” description=”Post Title Color” type=”color” default=”#c60” value=”#cc6600”>
Maksud variable diatas adalah warna judul pada posting blog kita adalah#cc6600 (oranye)
Contoh lain:
<Variable name=”pagetitlefont” description=”Blog Title Font” tye=”font” default=”normal normal 200% Georgia, serif” value=”normal normal 200% Georgia, serif”>
Variable diatas akan mengatur jenis font pada judul kita.
Satu lagi contoh:
<Variable name=”startSide” description=”Side where text starts in blog language” type=”automatic” default=”left” value=”left”>
Variable diatas akan mengatur posisi blog kita di sebelah kiri.
Variable-variabel diatas akan diletakkan pada CSS blog. Bentuk pendefinisiannya adalah dengan cara menambahkan karakter “$” pada bagian depannya.
Berikut contoh pendefinisian variable-variabel tersebut.
#outer-wrapper {
                Width: 620px;
                Margin : 0 0 10px 384px;
                Padding : 0;
                Text-align: $startSide;
                Font : $bodyfont;
                Background : url (http://lh5.ggpht.com/_tSekPjjuxt8/SdQckJFUReT/AAAAAAAAABU/nCuCrmQb0FQ/kontu_03.gif) repeat-x;
}
Berikut ini adalah penjelasan kode diatas.
Text-align:$startSide; maksudnya bahwa teks diarahkan rata sebelah kiri
Font: $bodyfont; maksudnya teks akan berjenis sesuai dengan  yang ada pada variable.

Widht
Widht adalah istilah untuk mengatur lebar bagian-bagian pada blog.
Contoh:
#sidebar-wrapper {
                widht :220px;
                float: $sendside;
                word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
                overflow: hidden; ?* fix for long non-text content breaking IE sidebar float */ }

maksud kode diatas “lebar sidebar blog kita adalah 220px”.
Height
Heigh adalah istilah untuk mengatur tinggi pada bagian-bagian blog.
Margin
Margin adalah kode untuk mengatur batas jarak, misalnya jarak antara header blog dengan batas atas, bawah,kiri,kanan browser, atau jarak, misalnya antara sidebar dengan halaman posting. Biasanya margin diikuti dengan keterangan sebagai berikut.
Margin-top                         : mengatur jarak batas bagian atas
Margin-bottom                                : mengatur jarak batas bagian bawah
Margin-$startSide           : mengatur jarak batas bagian kiri
Margin-$endSide            : mengatur jarak batas bagian kanan

Sata beri contoh:
Margin-top: 0;
Margin-bottom: 0;
Margin-$startSide: 10px;
Margin-$endSide: 384px;
Eterangan-keterangan di atas bisa disingkat menjadi:
Margin: 0 0 10px 384px;
Urutan ukuran margin di atas disingkat searah jarum jam.
Padding
Dari pengalaman saya membuat template blog, fungsi padding dan keterangannya hampir sama dengan fungsi margin, walaupun sebenarnya keduanya berbeda.


More aboutSekilas Tentang CSS

Sekilas Tentang UJIKOM

Diposting oleh Hadi Permana on Jumat, 17 Januari 2014

Apa itu UJIKOM ? UJIKOM adalah Kegiatan akhir yang diadakan tiap tahun di SMK setiap tahunnya, dan di SMKN 2 Garut ini khususnya jurusan Multimedia ada 4 pilihan yang bisa kita pilih diantaranya :

1. CD Interaktif
     CD interaktif adalah program interaktif yang dibuat untuk menyampaikan informasi penting dimana user dapat menavigasikan program tersebut.

kenapa disebut CD karena media penyimpanannya mayoritas adalah sebuah kepingan CD. cd interaktif harus bersifat Plug and Play dan jalan secara autorun.

2. Iklan Layanan Masyarakat
Iklan layanan masyarakat adalah iklan yang menyajikan pesan-pesan sosial yang bertujuan untuk membangkitkan kepedulian masyarakat terhadap sejumlah masalah yang harus mereka hadapi, yakni kondisi yang bisa mengancam keselarasan dan kehidupan umum.

Iklan layanan masyarakat (ILM) dapat dikampanyekan oleh organisasi profit atau non profit dengan tujuan sosial ekonomis yaitu meningkatkan kesejahteraan masyarakat.

3. Company Profile
Company profile (Profil perusahaan) adalah laporan yang memberikan gambaran tentang sejarah, status saat ini, dan tujuan masa depan sebuah bisnis. Sebuah profil perusahaan bisnis dapat sesingkat satu halaman, atau mengandung data yang cukup untuk mengisi beberapa halaman. Walaupun ada sejumlah format yang berbeda yang digunakan menyusun sebuah profil, ada beberapa jenis informasi  penting yang wajib disertakan.

4. Web Design
Web Desain adalah istilah yang sering digunakan untuk menggambarkan bagaimana tampilan isi suatu website atau situs. Tampilan dari website biasanya berupa hypertext (HTML) atau hypermedia yang dikirimkan ke user melalui World Wide Web. Untuk menampilkan suatu desain web atau isi dari suatu website, dibutuhkan sebuah browser web atau software (perangkat lunak) berbasis web. Tujuan dari web desain adalah untuk membuat website yang meliputi sekumpulan konten online termasuk dokumen dan aplikasi yang berada pada web server. Bisa juga, sebuah website berupa sekumpulan teks, gambar, suara dan konten lainnya, serta dapat bersifat interaktif maupun statis.





More aboutSekilas Tentang UJIKOM
Diberdayakan oleh Blogger.