INSPIRING QUOTE

Tampilkan postingan dengan label CSS dan HTML. Tampilkan semua postingan

Review Singkat Tentang HTML dan CSS

Saatnya berimprovisasi pada website. Anda tentu ingin mengembangkan kreatifitas sendiri, waktunya mencoba. Sebelum mengubah halaman Edit HTML (sekecil apapun) harus diingat untuk Download Template lebih dulu. Agar jika terjadi kesalahan saat ubah HTML sehingga halaman kacau, maka file XML hasil download dipakai untuk mengembalikan template asli. Anda harus memberi CENTANG kotak kecil samping EXPAND TEMPLATE WIDGET untuk mengeksekusi semua perubahan yang dilakukan.

READ MORE ... Monggo di-Klik

Mengenal dasar penulisan CSS untuk tampilan blog

Awalnya Semua penulisan source code termasuk pengaturan presentasi ditulis dalam tag HTML. Kemudian dirintis penulisan kode pengaturan presentasi dokumen secara tersendiri.

Nama Cascading Syle Sheets didapat dari fakta bahwa setiap deklarasi style yang berbeda-beda dapat diletakkan secara berurutan, membentuk hubungan parent-child pada tiap deklarasi style. CSS merupakan bahasa pemrograman untuk mengkontrol beberapa komponen web sehingga lebih terstruktur dan seragam.

READ MORE ... Monggo di-Klik

(2) Mengenal HTML Sebagai Bahasa Penulisan kode Konten Blog

HTML5 adalah yang terbaru rencananya akan direkomendasikan akhir tahun ini, sebagai hasil revisi yang dilakukan oleh konsorsium W3C dengan perubahan besar daripada standar HTML. Sebagaimana pendahulunya yaitu: HTML 4.01 dan XTHML 1.1, HTML5 adalah sebuah standar untuk men-struktur-kan dan menampilkan isi pada World Wide Web (www). Standar ini memperkenalkan fitur baru seperti memutar video serta drag and drop, Sebelumnya fitur ini bergantung pada plugins pihak ketiga di penjelajah web seperti Adobe Flash dan Microsoft Silverlight.

READ MORE ... Monggo di-Klik

How To Make Tab View on Blog By CSS Tab Designer 2.01

Blogger pasti menginginkan sebanyak mungkin kunjungan dan sesering mungkin orang membuka blognya. Agar tercapai tujuan tersebut ia harus membuat konten bermanfaat dan informasi yang selalu diupdate dan satu lagi perlu pula menjadikannya ‘Beautiful Web.’
Ia dapat mengeksplorasi aspek tampilan, mulai dari merencanakan widget apa saja yang akan dipasang, layout, font, gambar atau atribut tekstual, warna, memanfaatkan SEO (Search Engine Optimalization) Embedded Links dan Sindikasi konten with RSS (Really Simple Syndication). Semua ditujukan untuk menaikkan trafik dan frekuensi kunjungan.
Bagi Blogger pemula, yang terpenting usaha maksimal membuat konten dan tampilan yang semakin baik. Sebab sekali punya blog bisa seumur hidup, jadi ada banyak waktu dan setiap saat juga dapat diedit. Semua tergantung seberapa cepat dan seberapa banyak dapat mempelajari hal baru. Banyak tips, triks dan software yang gratis ditawarkan internet.
Membuat Daftar Kategori Entry Dengan www.blogger.com
Untuk memudahkan visitor mengetahui isi konten blog saat membuka halaman web mutlak di perlukan daftar artikel dan juga kategori atau klasifikasi artikel. Kedua widget ini menjadikan pengunjung leluasa mencari dan memilih konten yang diinginkan.
Sungguh sayang untuk membuat daftar artikel www.blogger.com tak ada fasilitas itu. Tapi Anda bisa membuat Daftar Kategori (label) dengan buka Dashboard | Layout/Rancangan |Add Gadget. Pada menu pop-up pilih LABEL dan isi kolom judul misalnya “DAFTAR KATAGORI” Lalu pilih konfigurasi Label. Klik SIMPAN dan tunggu sampai kotak menghilang.
Maka terlihat widget DAFTAR KATEGORI, pindahkan dengan cara klik kanan jangan dilepas dan letakkan kursor pada widget DAFTAR KATEGORI, gerakkan ke posisi yang diinginkan. Klik SIMPAN dan silahkan klik LIHAT BLOG. Semua ragam kategori anda dimunculkan beserta jumlah entry pada setiap kategorinya atau tergantung pilihan konfigurasi Label.
Membuat Menu Tab Dengan CSS Tab Designer 2.01
Makin banyak entry yang diposting maka DAFTAR ARTIKEL saja tidak cukup untuk memberi kemudahan visitor. Banyaknya ragam entry perlu dibuat daftar klasifikasi. Para Pengunjung dengan cepat dapat mengetahui isi blog secara garis besar hanya dengan melihat DAFTAR ARTIKEL dan KLASIFIKASI ENTRY.
Tab View yang berfungsi sebagai Klasifikasi Entry dapat ditemukan berupa kolom mendatar di bagian atas webpage atau dibawah nama Blog atau di taruh secara vertikal di SIDEBAR (seperti webpage blog ini). Tab view terbagi dalam kolom berisi semua nama Label.

Tab View sebenarnya sama dengan WIDGET LABEL dari www.blogger.com. Perbedaannya Tab View menawarkan variasi visual dan pilihan warna yang sangat banyak. Dengan software CSS Tab Designer pemilik Blog dapat merancang sendiri DAFTAR KATEGORI dan tidak harus di sidebar,
Sebelum membuat Menu Tab ini, pastikan lebih dahulu setiap entry sudah diberi nama Label. Caranya buka POSTING klik EDIT ENTRY. Maka muncul keseluruhan Entry Anda dan jika ada yang belum ada kategori (tercantum persis di belakang judul) maka bukalah cara centang kotak edit dan klik judulnya, maka muncullah kotak edit. Pada kotak LABEL di bagian bawah masukkan kategori entry tersebut Lalu klik SIMPAN. Terus ulangi lagi untuk entry lain yang belum dilabeli.

Aplikasi “CSS TAB Designer 2.01” selain untuk membuat Tab View juga telah digunakan oleh website-website profesional seperti kompas dan detik,com CSS TAB DESIGNER juga bisa di gunakan untuk membuat menu navigasi horisontal dan vertikal. Dan untuk itu kita butuhkan softwarenya. OK untuk download silahkan klik ini : CSS TAB DESIGNER 2.01
CSS Tab Designer 2.0.1 bersifat unik dan penggunaannya mudah. Software ini membantu Anda merancang desain Tab View menggunakan atau memilih desain dari daftar desain berbasis CSS (design css-based) dan dilengkapi dengan tab visual tanpa Anda harus tahu lebih dulu tentang pengetahuan pemrograman.
Software ini didukung tool WYSIWYG (“What You See IS What You Get!”). Sehingga Anda dapat segera membuat daftar label cantik dengan memanfaatkan pilihan visual dari berbagai style dan warna (didukung lebih dari 60 desain berbeda). Kelebihan lainnya menghasilkan kode (desain) yang secara ketat sesuai dengan xhtml.
Mulailah dengan membuka CSS Tab Designer 2.0.1 melalui START dan All Program. Jika baru pertama buka akan ditawari “Apakah dengan sampel deain? OK. Jika sudah pernah buka klik “With Fill Samples” pada TASK di kiri bawah. Kemudian lakukan eksplorasi pada kolom TAB Style untuk memilih desain dan apakah Label atau kategori tersusun horizontal atau vertical.

Jika Anda lihat di sidebar sebelah kiri homepage blog ini, tampaklah bahwa saya telah memilih style “GREEN AND BLUE” dengan hasil tampilan kombinasi dominasi BIRU dan kuning dan Label tersusun secara vertikal, seperti di bawah ini (warna biru) :

Halaman Kerja CSS Tab Designer 2.0.1

Buka Blog Anda, pada Label pertama pada widget DAFTAR KATEGORI klik 2x untuk mengetahui alamat URL pada label pertama, kemudian diulangi lagi untuk label ke-2, ke-3 hingga label terakhir (ke-8).
Langkah selanjutnya, lihat kolom ITEMS dan mulai dari item paling atas item pertama di-klik 2x maka muncul EDIT TAB, isikan TAB Text : “Nama Label atau Kategori” dan isikan URL TAB dengan alamat URL yang sesuai dengan nama Label. Begitu seterusnya diulang mulai dari item ke-1, nama label ke-1 dan alamat URL label ke-1 hingga kategori terakhir. Jika item kurang dari yang dibutuhkan klik tanda + pada kolom ITEMS.
Selanjutnya Anda bisa lihat kode dengan klik CODE. Untuk menyimpan lakukan BLOCK seluruh isi kode lalu klik kanan laku klik kiri atau langsung tekan kombinasi CTRL dan C. Dan klik ‘SAVE’ atau kombinasi CTRL dan S.
Buka Dashboard | Layout/Rancangan |Add Gadget. Pada menu pop-up pilih HTML and JavaScript. Pada page widget isikan judul atau kosongi, misalnya “Kategori Artikel”. Pada ruang kosong klik kiri dan PASTE. Lalu klik SAVE WIDGET. Terakhir kursor di atas widget “Kategori Artikel” tekan tombol kanan jangan dilepas dan gerakkan kursor ke posisi yang sesuai dengan layout dikehendaki.
Sebagai penutup klik SAVE pada baris di bagian atas dan klik LIHAT BLOG.

< Selesai >

READ MORE ... Monggo di-Klik

(1) Mengenal HTML Sebagai Bahasa Penulisan kode Konten Blog

Hyper Text Markup Laguage atau HTML pada dasarnya sama persis seperti teks biasa tetapi memungkinkan dibaca oleh semua Browser (seperti Mozilla FireFox, Internet Explorer, Google, Opera) sehingga isi (kontennya) berupa kode dapat dibaca dan dieksekusi oleh semua Browser. Meskipun demikian HTML sifatnya yang hanya memberikan tanda (marking up) pada suatu dokumen teks,
Sebelum melangkah jauh untuk mengembangkan kreativitas memodifikasi isi blog sudah seharusnya kita memahami logika dari semua kode pada EDIT TEMPLATE HTML. Berikut ini dasar-dasar pemahaman HTML.
Hyper Text Markup Language (HTML) adalah salah satu bahasa pemrograman web markup untuk menjelaskan halaman web atau BLOG. Penulisan Blog dengan HTML paling dominan dipakai daripada XML, DHTML, XHTML atau bahasa lainnya.

HTML ditulis dalam bentuk elemen2 HTML terdiri dari "tag" yang dikelilingi symbol kurung sudut (seperti <html>). Diantara symbol < dan > berisi konten halaman web. Elemen HTML biasanya diawali tag Pembuka dan tag Penutup secara berpasangan seperti dan . Elemen2 HTML ini membentuk struktur blog dari semua situs web.
Tujuan web browser (seperti Google Chrome, Internet Explorer, Mozilla FireFox dan Opera) adalah membaca kode HTML dan menampilkan mereka sebagai halaman web. Browser tidak menampilkan kode tag HTML, tapi menggunakan tag untuk menafsirkan isi halaman. HTML memungkinkan munculnya gambar, Video, suara, teks dan objek lainnya pada halaman BLOG dan dapat juga digunakan untuk membuat bentuk-bentuk interaktif.
HTML menyediakan sarana penulisan dokumen terstruktur yang menunjukkan struktur teks seperti judul, paragraf, daftar, link, kutipan dan item lainnya. HTML juga dapat melekatkan bahasa Script seperti JavaScript yang mempengaruhi perilaku halaman Web HTML.
HTML juga dapat menyertakan Cascading Style Sheets (CSS) untuk menentukan tampilan dan tata letak (layout), warna, font teks dan bahan lainnya. World Wide Web Concortium (W3C) sebagai pengelola Standar HTML dan CSS sangat menyarankan penggunaan CSS untuk penulisan kode-kode yang akan menentukan bagaimana tampilan konten pada halaman Blog.
Secara singkat integrasi antara Bahasa Program penulisan dokumen web HTML dan Bahasa penulisan presentasi dokumen web dan Bahasa Script (JavaScript) menghasilkan website Anda. Seperti ilustrasi dibawah ini.

Wallaahu a’lam bi shawwab

READ MORE ... Monggo di-Klik

Review Singkat Tentang HTML dan CSS

Tahapan Pemula sedikit demi sedikit dapat kita tinggalkan. Sebagai Beginner hanya patuh mengikuti secara cermat petunjuk apa saja untuk mengisi konten dan memasang Accecories halaman Blog. Kita tentu ingin juga mengembangkan kreatifitas sendiri. Suatu waktu harus mencoba.
Satu peringatan yang harus diperhatikan jika nantinya mencoba mengubah di ruang EDIT HTML (sekecil apapun) yaitu lebih dahulu anda harus memBack-Up semua isi kodenya dengan menerima tawaran untuk men-Download Template. Tawaran ada pada baris diatasnya. Agar jika terjadi implikasi buruk akibat salah modifikasi kode HTML, halaman blog menjadi kacau balau, maka file XML hasil download bisa dipakai untuk mengembalikan templatemu.
Sesudah mendownload, anda juga harus memberi CENTANG di kotak kecil samping EXPAND TEMPLATE WIDGET untuk mengefektifkan atau mengeksekusi semua perubahan yang dilakukan.
Mengenal HTTP
Hyper Text Markup Laguage atau HTML pada dasarnya sama persis seperti teks biasa tetapi memungkinkan dibaca oleh semua Browser (seperti Mozilla FireFox, Internet Explorer, Google, Opera) sehingga isi (kontennya) berupa kode dapat dibaca dan dieksekusi oleh semua Browser. HTML hanyalah salah satu dari beberapa bahasa penulisan dokumen. Selain HTML juga ada bahasa XML, XTML dan lainnya.
Hampir semua penulisan Tag didahului dengan tag awal dan tag akhir Dan setiap file HTML memiliki struktur dasar seperti contoh dokumen HTML sederhana inj :
<!DOCTYPEhtml> <html> <head> <title>'''Selamat Datang di Blog Saya'''</title> </head> <body> Nama saya Yusuf The Doublehorn! </body> </html>
HEAD
Bagian header document HTML di apit oleh tag <HEAD></HEAD>. Bagian ini memuat tag TITLE yang menampilkan judul halaman web pada title browser. Bookmark juga menggunakan tag title untuk memberi mark suatu website. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan searching maka title di gunakan sebagai keywordnya. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainnya pada tag META. Contoh:

<meta name="Yusuf" content="Bisnis takaful online">

Elemen Body

Bagian BODY, yang dinyatakan dengan tag <BODY>…</BODY>, merupakan tubuh atau isi dari dokumen HTML dimana anda meletakkan informasi yang akan ditampilkan pada browser.

Tag

HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag tersebut. Tag dinyatakan dengan tanda < dan > biasanya merupakan pasangan yang disebut dengan : 1. Tag awal, dinyatakan dalam bentuk <nama tag> 2. Tag akhir, dinyatakan dalam bentuk </nama tag>. Contoh Formatnya :

<nama tag> teks yang ditampilkan </nama tag>

Atribute

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya :
digunakan untuk membuat rata kiri dan kanan suatu paragraf. Tag yang digunakan adalah :

dan atribut yang menyertainya adalah ALIGN dengan nilai JUSTIFY. Nilai atribut ALIGN hanya bisa berupa center, left, right atau justify.

Mengenal CSS (Cascading Style Sheet)

Isi blog atau website terdiri 2 (dua) bagian, pertama berupa konten dokumen yang dapat berwujud teks, gambar, video, film, foto, audio dan sebagainya. Dan yang kedua berupa format desain untuk presentasi dokumen blog.
Pada awalnya tampilan dokumen diatur dengan membuat tag HTML namun kemudian tag tampilan ini ini dikembangkan lebih lanjut menjadi bahasa penulisan kode untuk presentasi dokumen yang berdiri sendiri.
Dalam prakteknya kedua penulisan dengan HTML atau dengan CSS ini kadang terpisah dan dapat pula keduanya terintegrasi. Dalam satu file kode blog atau website dapat digunakan bahasa HTML dan CSS secara bersamaan. Namun jika terpisah penulisannya maka akan ada file HTML dan file CSS sendiri-sendiri.
Jika penulisan HTML terpisah pada dasarnya itu dapat menguraikan kerumitan (kompleksitas) penulisan kode dan dapat lebih fleksibel dalam menuangkan ide-idenya bagi pembuat rekayasa website dan juga lebih memudahkan bagi yang mempunyai akses ke kode2 tersebut. Kelebihan lainnya jika terpisah adalah file CSS dapat direferensikan oleh file HTML.
Pengertian CSS adalah suatu bahasa penulisan kode yang dikhususkan untuk mengatur gaya (style) sebuah halaman Web atau blog. Sama seperti HTML penulisan file CSS sama seperti teks biasa. Penulisan kode file CSS digunakan untuk mendefinisikan LAYOUT (rancangan desain blog), pilihan jenis huruf, warna dan aspek2 presentasi lainnya.
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
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.^[1] CSS adalah bahasa style sheetC yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.^[2]
Para pemakai HTML dan CSS adalah para perancang (designer) website dan para pengakses kode dalam website. CSS memang diciptakan untuk memecahkan kerumitan penulisan kode blog. Dengan cara memisahkan dan membaginya menjadi penulisan isi dokumen (yang penulisannya menggunakan HTML) dan penulisan bentuk presentasi dokumen.