Belajar Desain Web atau Blog Dimulai Dengan Dasar HTML - ShareItCare Blog

Seperti yang saya janjikan kemarin, saya akan memberikan tutorial lanjutan mengenai HTML dalam membangun sebuah web ataupun blog. Sebelum itu, jika kalian belum tau postingan blog saya sebelumnya untuk Konsep Dasar Web Programming bisa dicek terlebih dahulu ya :)

Untuk awal design blog akan saya berikan beberapa contoh script code HTML untuk desain web atau blog agar terlihat lebih menarik tapi tetap bersifat SEO (Search Engine Optimization). Setelah itu bisa kalian pelajari dan coba sendiri memakai notepad++ atau sejenisnya yang saya share di post sebelumnya ^-^

Oh iya, saya juga sudah pernah membuat SlideShow Sederhana Menggunakan JavaScript.. Lets check ya guys :v

Oke.. ini adalah script dasar HTML dari Struktur HTML yang saya berikan di post sebelumnya.

Untuk sebuah halaman website atau blog biasanya terdiri dari judul, subjudul, list, link, gambar, tabel, komentar untuk code, dan form. Disini saya akan bahas satu per satu ya :)

Judul, Paragraf, SubJudul, List, Link, dan Gambar

Tabel dan Komentar

Form

Saya rasa untuk membuat Judul, Paragraf, SubJudul dan List sudah bisa semua ya.. seperti gambar pertama diatas :)

Untuk menambahkan link, kalian perlu menggunakan attribute href yang ada di dalam element <a> seperti pada gambar pertama.

Untuk menambahkan gambar, kalian harus menaruh gambar pada satu folder dengan index.html (Tempat kalian simpan kode htmlnya) lalu ketikkan code ini..

<img alt="Title Untuk Gambar" src="Nama Gambar Kalian dot Format" height="200" />

Code ini berfungsi untuk gambar dari komputer kalian atau offline, tetapi jika gambar kalian dari link internet maka copy kan link tersebut ke code src-nya. Kalian juga bisa memberikan ukuran gambarnya seperti height atau width pada gambar pertama diatas.

Untuk membuat tabel dan komentar juga sudah sangat jelas codenya ya, seperti pada gambar kedua diatas :) Bagi yang tidak tahu komentar itu apa? Komentar adalah bagian script yang tidak di compiler atau dijalankan oleh program.

Untuk membuat form didalamnya ada code type=text dan submit & textarea dan lain sebagainnya seperti pada gambar ketiga diatas. Kalian bisa mempelajari semuanya sendiri dengan script yang akan saya kasih juga, semua ini adalah dasar ya..  

Berikut adalah hasil dari script yang ada diatas setelah dijalankan..

Ini adalah link download untuk script full nya yang ada diatas, code yang saya share ini masih bisa untuk dikembangkan lagi.. silakan coba-coba sendiri untuk lebih memahami, next saya akan buat code CSS agar tampilan HTML lebih bagus ^-^

Download

Tutorial Dasar HTML

Size : 2.35 KB

Note: Jika ada kesalahan penulisan code atau mungkin ada link broken, bisa memberitahu saya dikolom komentar ya.. Jangan lupa tinggalkan komen dan share artikel ini ke temen-temen kalian, semoga bermanfaat ^-^