Pengertian HTML dan Blog

1.      Berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :

·      Hypertext

Link  hypertext  adalah  kata  atau  frase  yang  dapat  menunjukkan  hubungan  suatu  naskah  dokumen dengan  naskah-naskah  lainnya.  Jika  kita  klik  pada  kata  atau  frase  untuk  mengikuti  link  ini  maka  web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

·      Markup

Pada  pengertiannya  di  sini  markup  menunjukkan  bahwa  pada  file  HTML  berisi  suatu  intruksi  tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web.

·      Language

Meski  HTML  sendiri  bukan  merupakan  bahasa  pemrograman,  HTML  merupakan  kumpulan  dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.

2. Kumpulan Tag HTML

·      (!-- --) Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser

·      (a href) Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut

·      (a name) Membuat nama bagian yang didefinisikan pada link pada halaman yang sama

·      (applet) Sebagai awal dari Java applets

·      (area) Mendefinisikan daerah yang dapat diklik (link) pada image map

·      (b) Membuat teks tebal

·      (basefont) Membuat atribut teks default seperti jenis, ukuran dan warna font

·      (bgsound) Memberi (suara latar) background sound pada halaman web

·      (big) Memperbesar ukuran teks sebesar satu point dari defaultnya

·      (blink) Membuat teks berkedip

3.                  Blog  adalah  singkatan  dari  web  log  yang  artinya  jenis  situs  web  yang  menyerupai  tulisan-tulisan pada  halaman  web,  biasanya  disusun  diurutkan  secara  kronologis  (waktu  kejadian)  mulai  dari  postingan yang  terbaru  berada  di  bagian  atas  halaman  utama  (halaman  depan/homepage)  diikuti  postingan  paling lama dibawahnya. Dan kita bisa mengeditnya dengan sesuai keninginan kita, kita bisa mengganti template, kita bisa menambahkan Tampilannya dengan bermacam-macam aplikasi, seperti kalender, jumlah orang yang melihat blog kita, gambar bergerak, dll.

4.    Elemen-elemen dalam blog

Struktur dari kode CSS

 

Simbol # dan .  menunjukkan atribut dari elemen (semacam klasifikasi dari jenis elemen).  Jika belum paham dengan simbol ini, diabaikan aja dulu tidak usah perlu dipikirkan secara serius.  Tetapi jika ingin tahu lebih detail tentang simbol ini, pelajari di W3Schools

Global:

·         body {.....} : mengatur sifat umum dari template, jika elemen yang dibawahnya tidak didefinisikan, maka properti yang ada dibagian ini yang berlaku.

·         #outer-wrapper {.....} : Bagian awal dan terbesar dari template.  Didalam bagian ini berisi header-wrapper,content-wrapper, dan footer-wrapper. 

·         #content-wrapper {.....} : suatu bagian yang berisisidebars dan main.

·         a {.....} :  mengatur properti dari tulisan yang mempunyai link.

·         a:visited {.....} : mengatur properti dari tulisan yang mempunyai link setelah dikunjungi.

·         a:hover {.....} : mengatur properti dari tulisan yang mempunyai link disaat mouse ada diatas tulisan tersebut.

Karena semua kode harus ditulis didalam {.....} setelah judul elemen, maka untuk penjelasan berikutnya hanya ditulis judul elemennya saja.

Header:

·         #header-wrapper :  Bagian yang membungkus judul dan deskripsi blog/website (Blog Title dan Blog Description).

·         #header : Bagian yang ada didalam header-wrapper.

·         #header h1 : Perintah yang ada didalam bagian ini mengatur tampilan dan tata letak judul blog (Blog Title).

·         #header h1 a : Mengatur properti link di judul blog.  

·         #header .description : Mengatur properti dari deskripsi blog.

·         #header a img : Mengatur properti dari gambar yang ada didalam header.

Main:

·         #main-wrapper : bagian yang didalamnya terdiri atas Date Header, Blog Posts,Comments, Feed Link, dan setiap widget yang ditempatkan di atas atau bawah artikel (Blog Posts).

·         #main : bagian yang ada didalam main-wrapper.

·         #main .widget : mengatur properti dari semua widget yang ada didalam bagianmain.

·         h2.date-header - mengatur properti dari Date Header(yang ada diatas Post Title).

·         .post - mengatur properti pada bagian Blog Posts.

·         .post h3 - mengatur properti dari judul artikel (Post Title).

·         .post-body p - mengatur properti dari body atau isi artikel (post).

·         .post ul - mengatur properti dari unordered list (daftar yang tidak bernomor).

·         .post ol - mengatur properti dari ordered list (daftar bernomor).

·         .post li - cmengatur properti dari daftar individu didalamunordered list atau ordered list.

·         a img - mengatur properti secara umum dari sebuah gambar (memacu pada link; dan gambar pada link itu sendiri).

Sidebar:

·         sidebar-wrapper : bagian yang membungkus semua element dan isi yang ada didalam sidebar.

·         .sidebar : bagian yang ada didalam sidebar-wrapper.

·         #sidebar1 :  mengatur properti didalam sidebar1.

·         #sidebar2 : mengatur properti didalam sidebar2. Jika ingin properti yang ada didalamsidebar1 dan sidebar2 sama, maka properti cukup diatur di.sidebar dan tidak perlu ditulis didalam #sidebar1 dan#sidebar2 lagi di kode CSS.

·         .sidebar .widget : mengatur properti semua widget (yang ditambahkan melalui Added Page Element) di sidebar.

·         #sidebar1 .widget : hanya mengatu widget di sidebar1.

·         .sidebar .BlogArchive : mengatur properti Blog Archive. Ini secara teknis merupakan widget disidebar juga, akan tetapi mengatur properti di sidebar widget tidak mengubah widget untuk Blog Archive. Oleh sebab itu properti di .BlogArchivepengaturannya ditulis sendiri.

·         .sidebar h2 : mengatur properti judul (title/header) pada sidebar widget.

·         .sidebar #BlogArchive1 h2 : mengatur properti judul padaBlog Archive.

Miscellaneous:

Pada dasarnya, bagian  Profile (About Me) terletak didalam sidebar, tetapi dalam penjelasan ini diletakkan di  bagian Miscellaneous.

·         #Profile1 : mengatur properti dari About Me.

·         #Profile1 h2 : mengatur judul (title/header) pada About Me.

·         .profile-img a img : mengatur gambar didalam About Me.

·         .profile-textblock : mengatur deskripsi penulis pada About Me.

·         .profile-data : mengatur data penulis pada About Me.

·         .profile-datablock : mengatur keseluruhan data dalam About Me.

·         blockquote : mengatur teks dalam tanda kutip (quoted text) pada artikel.

·         code : mengatur tulisan dalam tags code di artikel.

Post-Footer:

·         .post-footer : mengatur semua properti didalam post-footer.

·         .post-footer-line : mengatur properti setiap baris baru dipost-footer.

·         .post-footer a : mengatur properti link text didalampost-footer.

·         .post-footer .post-comment-link a : mengatur link di "comment" dalam post-footer.

·         #blog-pager : mengatur properti link pada tulisan "newer posts", "home", dan "older posts".

·         #blog-pager-newer-link : mengatur properti pada link "newer posts".

·         #blog-pager-older-link : mengatur properti pada link "older posts" link.

·         .feed-links : mengatur properti pada link "Subscribe to: Posts (Atom)".

Comment:

·         #comments : mengatur semua properti pada bagiancomment.

·         #comments a : mengatur properti link didalam bagiancomment.

·         #comments h4 : mengatur header dibagian comment.

·         .deleted-comment :mengatur properti untukdeleted comment.

·         .comment-author : mengatur properti untuk comment author.

·         .comment-body p : mengatur properti comment body.

·         #comments ul : mengatur unordered list didalam bagiancomment.

·         #comments li : mengatur daftar individu didalamcomment.

Footer:

·         #footer-wrapper : bagian yang membungkus semua elemen dan isi didalam footer section.

·         #footer : bagian yang ada didalam  footer-wrapper.

·         #footer h2 : mengatur properti dari judul  (title/header) di footer.

·         #footer .widget : mengatur properti widget yang ada difooter.

·         .footer a : mengatur properti link di footer.