Gitsu Family: Belajar Dasar - Dasar HTML Dengan Mudah Untuk Pemula

Selamat Sore Sahabat gitsu, pada kesempatan ini saya akan posting tentang belajar dasar-dasar HTML bagi pemula dan tentunya Simple dan mudah untuk dipahami. HTML singkatan dari Hyper Text Transfer Protocol. HTML diperlukan untuk mendisain web dan membuat aplikasi web. HTML juga merupakan format tampilan untuk sebuah website. HTML sangat mudah untuk dipelajari karena kita tidak memerlukan programming skill untuk menguasai HTML. Sebelum kita menuju materi ada baiknya kalau anda mengunduh dan menginstal program php designer dengan mengklik link download di bawah ini:

=========================

Download Program PHP designer

=========================

Jika diminta Password: dilysamealie

Setelah selesai di download mari kita langsung kemateri pembahasannya:

>>Menggunakan HTML<<

Sebuah halaman web yang valid selalu diapit oleh kode <html>…..</html>. File-file html selalu berkahiran dengan ekstensi *.html atau *.htm. tag-tag html selalu diawali dengan tanda <x> dan diakhiri dengan tanda </x> dimana x adalah tag seperti b, I , u , a dan sebagainya. Tapi ada juga tag tag yang tidak diakhiri dengan </x> seperti <br> dan <input>

Berikut ini saya akan sajikan tag-tag html yang sering digunakan:

Tag	Keterangan
<html></html>	Tag untuk mengapit halaman html
<head></head>	Tag yang berisi informasi umum mengenai halaman
<body></body>	Setingan atribut untuk seluruh halaman
<b></b>	Untuk menebalkan text
<i></i>	Untuk memiringkan huruf
<u></u>	Untuk meggaris bawahi text
<p></p>	Untuk membuat paragraf
<font></font>	Untuk memanipulasi huruf
<br>	Untuk pindah ke baris baru
<hr>	Untuk membuat garis horizontal
<a></a>	Untuk membuat links

Setelah anda memahaminya, anda buka program PHP designer. Setelah itu, anda ketkan kode-kode berikut:

<html>

<head>

<title>terserah mau nulis apa, yang penting ini bagian judul</title>

</head>

<body>

Hallo dunia,,,ini web pertamaku

</body>

</html>

Lalu klik run

>>Manipulasi font dan link<<

Untuk memanipulasi font di html kita menggunakan tag <font></font>. Tag font tidak sesederhana itu, tag ini memiliki atribut di dalamnya. Atribut inilah yang memiliki peranan penting dlam menentukan tampilan text. Berikut saya akan sajikan atribut-atributnya.

Atribut	Keterangan
Name	Untuk menentukan jenis huruf yang digunakan
size	Untuk menentukan ukuran huruf
color	Untuk menentukan warna huruf

Contohnya jika kita ingin membuat text denga font arial dan ukuran hurufnya 12 pt dan warna hurufnya merah. Kita dapat menuliskannya seperti berikut:

<font name=”arial” size=”3” color=”red”>tulis textnya disini</font>

Untuk size 3 sama dengan 12 pt, size 4 sama dengan 14 pt, size 5 sama dengan 18 pt, size 6 sama dengan 24 pt, size 7 sama dengan 36. Lalu bagaimana caranya jika anda ingin membuat text yang hurufnya tebal, miring atau bergaris bawah ? gampang caranya,,,,anda cukup apitkan text tersebut menggunakan tag-tag seperti <b><b/>, <i></i>, dan <u></u> atau lihat contoh berikut

<b><i><u>tulis textnya di sini</b></i></u>

Text tersebut memiliki efek tebal, miring , dan bergaris bawah. Mudah kan..? selain tag font di atas, ada juga tag seperti <h1></h1>,<h2></h2>, dan seterusnya yang digunakan untuk mencetak heading. <h1> akan mencetak heading dengan ukuran font terbesar. <h2> fontnya akan mengecil dan seterusnya.

>>Link<<

Pasti anda sering mengklik tulisan atau gambar pada suatu website atau blog yang menuju halaman web/blog lainnya. Yang anda klik itu adalah link. Link merupakan text atau gambar yang membuka halaman website atau blog lainnya. Untuk membuat link, kita dapat menggunakan tag <a></a>. tag f<a></a> juga memiliki atribut sama halnya dengan tag font. Berikut saya sajikan daftar atribut tag <a></a>

Tag	Keterangan
href	Halaman website atau blog yang dituju
target	Dibuka pada windows baru atau tidak
style	Penambahan css
class	Nama class yang dipanggil
name	Nama dari link

Contoh jika kita ingin membuka www.facebook.com pada halaman atau windows yang sama

<a href=”http://www.facebook.com”>facebook</a>

Link di atas akan membuka www.facebook.com dengan text facebook sebagai text yang klik

>>penerapan teori manipulasi font dan link<<

Jalankan php desaigner atau anda buka notepad pada computer anda. Lalu ketikan kode berikut dan pahamilah

<html>

<head>

<title>manipulasi font dan link</title>

</head>

<body>

<p> <font size=”5”><b>cara pergi ke halaman facebook dan google</b></font></p>

<p>silahkan klik link berikut jika anda mau pergi ke halaman facebook.com</p>

<a href=”http://www.facebook.com” >facebook</a><br>

<a href=”http://www.google.com”>google</a>

</body>

</html>

Lalu klik run, anda juga bias menyimpan kode tersebut dengan format extensinya .html jika anda menggunakan notepad maka save/simpanlah dengan format .html

>>CSS (cascading style sheet)<<

Css merupakan suatu teknologi untuk mempermudah pembuatan tampilan website. Kode dari CSS ini diapit oleh tag <style></style> dan tag <style></style> diletakkan di antara tag <head></head>. Setiap tag htlm seperti <b>, <i>, <u> dan sebagainya dapat dimanipulasi dengan CSS. Di dalam CSS tag html tersebut disebut selector dan atribut atribut didalamnya disebut declaration. Declaration ditandai dengan kurung kurawal {….}. berikut ini saya akan menuliskan kode yang akan membuat semua text pada body berjenis huruf Verdana dengan ukuran 11 pixel

Bofy{font-familie: verdanja; font size: 11 px}

>>Penerapan CSS<<

Bukalah program php designer atau notepad. Ketiklah kode berikut

<html>

<head>

<title>Belajar CSS-Casceding Style Sheet</title>

<style>

Body{font-familie : Verdana; Size: 11 px}

b {color : red}

i {color :green}

</style>

</head>