BOCAH WEB: CSS

Download Free Android Apps

Ads 728x90

Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Tiga Elemen Yang Wajib Disertakan Dalam Membuat Template BLog
October 19, 2017
Tiga Elemen Dalam Truktur Template Blog
Setelah kita menyelesaikan pembuatan Tag Html dan desian Css ada beberapa hal yang wajib dipahamai setelah tahap ini, yaitu tiga elemen penting yang masing-maisng memiliki fungsi khusus didalam tag html , jika ketiga tag ini diabaikan bisa dipastikan template yang telah didesain tidak akan dapat diterapkan kedalam blog secara online



Ada tiga elemen penting yang wajib dipasang dalam desain template yaitu:
  1. b:skin
  2. b:section
  3. b:widget
Selain ketiga elemen tersebut masih ada dua elemen lagi yang memiliki peran penting dalam mengatur struktur template blog agar lebih maximal yaitu:
  1. widget Navbar
  2. widget Blog
Artikel ini hanya sekedar tambahan sebelum kita memulai proses pembuatan koding Html dan Css agar bisa diterapkan lebih maximal kedalam blog secara online ada variable Html lain yang wajib kita kuasai dan pahami sebagai pelengkap tutorial desian template sendiri


Kurang lebih ini.

Tag Html head dan body

Maka contoh format penulisan HTML yang diatas tadi, harus kita ubah menjadi:

Dengan bentuk seperti ini, nantinya template akan memanggil database yang ada pada hosting blog untuk menampilkan Judul dan Artikel pada blog kita. 
Cara Membuat Template Blog Sendiri Mulai Dari Nol Sampai Bisa Diterapkan diBlog
October 18, 2017
Cara membuat template Blog sendiri. Tutorial cara membuat template blog sendiri mulai dari nol sampai bisa dipasang diblog secara detail atau by step per step sangat jarang bisa ditemukan disebuah laman pencarian google, hal ini membuat banyak temen-temen yang ingin belajar membuat template blog sendiri kesulitan untuk praktek secara langsung mengapa saya bilang seperti itu karena saya pernah mengalami hal tersebut, jika pun ada hanya tutorial membuat template desain luarnya saja ketika ingin diterapkan didalam blog secara langsung akan terjadi error diberbagai script tag Html hingga Css nya.



Permasalahan semacam ini sebenarnya secara garis besar hanya dialami oleh pemula yang memang cenderung belum sepenuhnya menguasai tag Html dan Css secara penuh ditambah masih minimnya  wawsan tentang pola atau struktur didalam membangun sebuah template website

Hingga artikel ini mulai ditulis didalam javaone45 belum ada satupun website yang pernah saya temukan memberikan tutorial lengkap secara detail bagaimana cara membuat template mulai dari nol hingga benar-benar dapat diterapkan didalam blog. Oleh karena itu pada kesempatan kali ini mari kita coba mengulas bagaimana cara membuat sendiri template blog atau template website dengan desain yang kita inginkan berdasarkan pengalaman yang pernah saya alamai dimulai dari nol hingga bisa diterpakan didalam blog.

Pra-persiapan membuat template dari nol

  • Pertama kita harus memahami apa itu XML
  • Kedua kita harus memahami apa itu HTML ?
  • Ketiga kita harus memahami apa itu CSS ?
Antara Html dan Css keduanya memiliki hubungan yang sangat erat didalam membangun sebuah template dengan kriteria yang kita inginkan.

XML

XML / Blog dengan platform Blogger dibangun menggunakan XML(Extensible Markup Language) yaitu bahasa markup (manipulasi) untuk keperluan umum yang disarankan oleh W3C (World Wide Web Consortium) untuk membuat dokumen markup untuk keperluan pertukaran data antar sistem yang beraneka ragam. Jadi dokumen yang dibuat menggunakan XML dapat dijalankan pada multi-platform OS seperti Windows, Linux, Macintosh, Android, dan lain-lain.

Berikut adalah 2 baris script paling atas pada template blogger yang menunjukkan bahwa template tersebut dibangun menggunakan XML.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>

1.
2.

XML sendiri berfungsi mendefinisikan syntax penulisan kode-kode bahasa pemrograman menjadi tidak standar, yang dapat kita tentukan sendiri. Contohnya :

<penulis>Nama Penulis Blog</penulis>

1.

Fungsi "penulis" disini merupakan fungsi yang kita definisikan sendiri secara bebas namun tetap dengan aturan berlaku, yang mana jika dipanggil akan menampilkan nilai berupa Nama Penulis Blog.

XML hanya sebatas melakukan pendefinisian fungsi saja, untuk menampilkan fungsi tersebut harus dilakukan pemanggilan menggunakan bahasa pemrograman lain.Pemanggilan fungsi XML dalam template blogger dilakukan menggunakan HTML. Selain itu fungsi XML juga dapat diatur tampilannya menggunakan CSS. Baca selengkapnya tentang struktur Tag Html dan Css

Html (Hypertext Markup Language)

Secara umum HTML berfungsi untuk menampilkan fungsi-fungsi yang telah didefinisikan sebelumnya oleh XML. Struktur HTML sendiri terdiri dari 2 bagian yaitu bagian head (kepala) dan body (tubuh).
<HTML>
<head>
// untuk meta, javascript, CSS
</head>
<body>
// untuk memanggil fungsi yang telah didefinisikan pada bagian head
</body>
</HTML>

1.
2.
3.
4.
5.
6.
7.
8.


Bagian head ini berisi pendeklarasian fungsi seperti meta, javascript, dan CSS. Fungsi-fungsi ini hanya disimpan saja dalam memori head, belum ditampilkan. Untuk menampilkan fungsi-fungsi di dalam memori head, dilakukan pemanggilan terhadap fungsi-fungsi tersebut pada bagian body.

Contoh HTML di bawah ini menyimpan CSS wrapper pada bagian head dan dipanggil pada bagian body untuk ditampilkan wrapper.

<HTML>
<head>
#wrapper {background: #fff; width: 90%; padding: 20px;margin:20px}
</head>
<body>
<div id='wrapper'>
isi konten
</div>
</body>
</HTML>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Perlu diketahui didalam tag Html terdapat banyak fungsi yang perlu dideklarasikan secara aturan baku dan secara bebas, lebih lengkap tentang tag Html bisa dibaca diartikel... Html adalah 

Css (Cascading Style Sheet)

Pada dasarnya sebuah template blogger tersusun dari kumpulan fungsi-fungsi XML. CSS (Cascading Style Sheets) berfungsi untuk mengatur desain atau tampilan fungsi-fungsi tersebut yang telah dipanggil, Di dalam CSS tampilan (style) template blog didefinisikan dalam bentuk nilai yang diapit dalam kurung kurawa "{...}" atau bracket. untuk deklarasi tentang Css bisa dipelajari selengkapnya pada artikel ...... Stuktur Css yang terdiri dari Selector { Poperty : Value ; }

•CSS_id {style-CSS-satu:nilaipertama;style-CSS-dua:nilaikedua;}

1.


Berikut ini adalah 3 cara penulisan CSS :

  1. table { // tanpa awalan apapun
    width:100%;
    margin:10px;
    }

    1.
    2.
    3.
    4.

    Yang pertama penulisan tanpa awalan tag apapun sebelum CSS table. Penulisan seperti ini akan mengatur tampilan semua tabel yang dibuat menggunakan pendeklarasian fungsi <table>.
  2. #keren{ // dengan hashtag
    width:100%;
    margin:10px;
    color:red;
    }

    1.
    2.
    3.
    4.
    5.

    Yang kedua adalah penulisan CSS diawali dengan tagar (tanda pagar) "#" atau hashtag. CSS seperti ini dapat dipanggil dengan menyisipkan tag id pada fungsi. Contoh pemanggilannya :

    <table id="keren"></table>

    1.

    Tagar biasanya digunakan untuk menandai bagian-bagian utama template blog.
  3. .keren{ // dengan dot
    width:100%;
    margin:10px;
    color:red;
    }

    1.
    2.
    3.
    4.
    5.

    Yang terakhir penulisan CSS yang diawali tanda titik "." atau dot, dapat dipanggil dengan menyisipkan tag class pada fungsi. Contoh pemanggilannya :

    <table class="keren"></table>

    1.

    Tanda titik ini biasanya digunakan untuk menandai elemen-elemen di dalam bagian-bagian utama template blog.
Selanjutnya setelah kita memahami Pra-persiapan diatas maka kita akan memulai melakukan tahap utamanya yaitu membuat template blog dari nol , karena artikel terlalu panjang silahkan baca diartikel berikutnya ..... Tahap pertama setelah Pra-persiapan membuat template sendiri dari nol
Struktur Utama Css
October 16, 2017
Css dapat diterapkan atau diimplementasikan kedalam Html dengan sangat flexible mudah dan memiliki kualitas hasil design yang sangat menawan. ada beberapa aturan penting yang harus dikuasai dan dipelajari sebelum menerapkan Css kedalam Tag Html agar menghindari risiko tampilan web menjadi berantakan

Pertama kita akan mempelajari struktur dasar dari Css yaitu:
  1. Selector
  2. Property
  3. Value
Berikut struktur ketiganya didalam Css:


Jika ingin mengubah tampilan Tag Html "h1" yang lebih menarik maka kita dapat menambah {Property ;value:} yang beragam sesuai yang kita inginkan, contohnya lihat pada gambar dibawah:

Css selector h1 dengan tampilan huruf "Courier New" posisi teks "rata tengah" ukuran huruf "30px" dan warna huruf "biru"
Penjelasan lebih detail tentang
  1. Selector
  2. Property
  3. Value

Selector

Adalah type selctor atau pemilihan tag html, Id atau class untuk design html dalam bentuk display yang diinginkan
Keguanaan Selector
  • Digunakan untuk memilih dan memanipulasi element spesifik pada Tag Html
  • Elemen Html dipilh berdasarkan tag, id, class bahkan pola atau pattren
  • Semakin komplek struktur Html, selector juga bisa semakin kompleks atau spesifik.

Poperty dan Value

Adalah nilai yang digunakan dalam mendesign suatu tag html berdasarkan selector

Kegunaan Poperty dan Value
  • Deklarasi desian "tampilan" dari Selector 
  • Memberi nilai selector sesuai yang diingkan dalam tampilan web tanpa mengubah Tag Html
  • Mengubah ukuran , warna , huruf , dan posisi suatu tag Html
Selanjutnya kita akan ulas dan pelajari beberapa cara menempatkan CSS didalam Tag Html
  • Dua Cara Menempatkan Css dalam satu Folder HTML ( embed dan inline )
  • Cara Menemapatkan Css didalam Folder yang berbeda ( external )


Css | Cascading Style Sheet
October 16, 2017
Pegertian Css
Css adalah : Mekanisme sederhana yang mengatur gaya atau style seperti warna, ukuran, posisi dan lain sebagainya pada halaman website.
Css lengkap dengan pengertian contoh kegunaan dalam membangun display website

Teori Css "Cascading Style Sheet"

  • Aturan yang digunakan untuk menampilkan elemen atau tag HTML
  • Dibuat terpisah dengan HTML
  • Bertujuan untuk memisahkan konten dan style
  • 1 CSS dapat digunakan untuk banyak halaman HTML
  • 1 Halaman HTML dapat terlihat berbeda dengan mengunakan CSS yang berbeda
Contoh Css sederhana pada tag HTML


Script Css pada tulisan Tag Html h1 'Hello Wordl'
Catatan penting tentang Css:

  1. 1 CSS dapat digunakan untuk banyak halaman HTML
  2. 1 Halaman HTML dapat terlihat berbeda dengan mengunakan CSS yang berbeda
Dua pengertian diatas inilah yang membuat Css dikatakan sebagai Cascading Style Sheet karena dengan menggunakan satu Css bisa mengubah ratusan halaman dan sebaliknya satu halaman bisa memiliki tampilan berbeda hanya menggunakan Css yang berbeda.

Tampilan tiga halaman dengan satu Css

Keterangan:
Body { font-family:arial;} dapat diartikan sebagai : Seluruh konten yang ada didalam Body akan diubah menjadi font arial, lihat pada gambar diatas.


Artikel selanjutnya kita akan membahas tentang
  • Anatomi Css atau Struktur Css


Ads 728x90