Mempelajari tag-tag dasar HTML dan CSS

Apa itu HTML ?

HTML adalah singkatan dari Hypertext Markup Language. HTML merupakan bahasa pemrograman yang harus dikuasai oleh seorang web developer.

Apa itu CSS ?

CSS adalah singkatan dari Cascading Style Sheet. Apa fungsi CSS ? Fungsi css adalah untuk merubah style yang ada di dalam HTML. Sehingga tampilan web anda menjadi lebih menarik dan enak untuk dilihat.

Apa kaitan antara HTML, CSS dan PHP dalam halaman web ?

Kaitannya adalah skript PHP dapat dituliskan atau disisipkan ke dalam tag HTML. Fungsi PHP adalah sebagai bahasa pemrograman server side yang dapat membuat halaman web menjadi lebih informatif dan dinamis.

Bisa memproses dan menampilkan data yang ada di dalam database anda dengan cara disisipkan ke dalam tag-tag html. Nah CSS disini diperlukan untuk merubah tampilan halaman web yang dibuat dengan HTML dan PHP tadi menjadi lebih menarik dan enak untuk dilihat.

Tag-tag dasar HTML

Tag pada HTML dapat dikelompokkan menjadi 5 bagian, yaitu Document Type Definition (DTD/Doctype), html, head, title dan body.

Cara penulisan struktur tag-tag dasar html :

[code language="html"]
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
[/code]

Struktur tag di atas harus ada di dalam sebuah file html.

Contoh penggunaan HTML tanpa CSS

Anda bisa menuliskan tag html ini menggunakan notepad atau editor lainnya.

[code language="html"]
<!DOCTYPE html>
<html>
<head>
<title>Ini contoh title halaman web saya</title>
</head>
<body>
<h1>Ini contoh judul paragraph</h1>
Saya sedang belajar tag-tag html sekarang.
</body>
</html>
[/code]
Perhatikan hasilnya :

Contoh penggunaan HTML dengan CSS

Berikut contoh pengembangan html diatas dengan menggunakan css.

[code language="html"]
<!DOCTYPE html>
<html>
<head>
<title>Ini contoh title halaman web saya</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Ini contoh judul paragraph</h1>
Saya sedang belajar tag-tag html sekarang.
</body>
</html>
[/code]
Perhatikan hasilnya :

Contoh penulisan CSS

Script css bisa dibuat dengan menggunakan file terpisah atau disisipkan ke dalam tag <head> seperti contoh diatas. Penulisannya selalu diawali dengan tag <style> dan diakhiri dengan tag </style>.

[code language="css"]
<style>
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}
</style>

[/code]

Simpan file tersebut dengan nama index.html ke dalam folder web server anda. Jika anda menggunakan wamp, buatlah satu folder di dalam directory C:\wamp\www\dasar-html. Kemudian simpan file tersebut disitu.

Jika anda menggunakan xampp misalnya, anda dapat membuat sebuah folder dengan nama dasar-html di dalam directory C:\xampp\htdocs, kemudian simpan file tersebut disitu. Silahkan anda sesuaikan saja dengan lokasi tempat web server anda berada.

Buka web browser kesayangan anda dan ketikkan alamat url http://localhost/dasar-html/ seperti berikut ini.

Gimana...mudah bukan ? Jika anda tertarik untuk belajar mendalami cara menggunakan html, anda bisa berkunjung ke sekolah web gratis di w3schools. Banyak sekali ilmu yang bisa anda dapatkan disana. Anda bisa menggunakan html example dan mencobanya langsung dari situs mereka. Keren kan...

Selamat mencoba :)

https://youtu.be/Pc7gaY6Klv4

https://www.youtube.com/watch?v=ArnGGV3PhcQ

https://www.youtube.com/watch?v=HaaVdGQgy48

Tips Jitu Cara Mengatasi Error Pada Saat Compile Aplikasi Menggunakan Visual Basic 6

Sebenarnya ada banyak sekali nih project yang harus saya kerjakan dikantor. Namun terkadang apa yang kita rencanakan sering kali berbeda dengan kenyataan. Maksud hati ingin focus dulu ke satu project, tapi karena adanya satu dan lain hal, akhirnya terpaksa deh harus melakukan modifikasi dan membuka project lama yang sebenarnya saya sudah malas untuk berhubungan lagi dengannya :) Project ini sudah dibangun dari awal tahun 2000-an, jauh sebelum saya join. Ya intinya saya dapat warisannya lah seperti itu. Di bangun masih dengan menggunakan vb5-vb6 waktu itu. Sekarang sudah tahun 2016. Jadi sudah lama ya sob. Sudah ketinggalan jaman lah kurang lebih. Meskipun sudah tua, tapi menurut saya visual basic tetap menjadi bahasa pemrograman yang masih powerful. Masalah Kompatibilitas Nah masalah terbesar dalam menggunakan program-program lawas seperti itu biasanya ada pada kompatibilitas component-componentnya. Karena hardware dan os yang kita gunakan biasanya akan berubah seiring waktu. Jika soba...

Kapan Kita Bisa Gajian dari youtube atau google adsense ?

Kapan kita bisa gajian dari youtube atau google adsense ? Ya pertanyaan ini memang seringkali muncul dari berbagai youtuber baru termasuk saya pada waktu itu dan orang-orang awam yang memang penasaran dengan uang yang dapat dihasilkan dari youtube. Sebagai youtuber yang memang sudah pernah merasakan gajian dari youtube, maka saya akan mencoba untuk berbagi sedikit pengalaman saya. Siapa tahu bermanfaat buat teman-teman yang sedang penasaran karena tak sabar menantikan datangnya pembayaran adsense untuk pertama kali. Sama halnya seperti menunggu gaji pertama saat kita bekerja. Pembayaran google adsense akan dapat dilakukan setelah saldo kita mencapai ambang batas minimum pembayaran yaitu 100 dollar atau kalau dirupiahkan sekitar Rp 1.300.000. Kurang dari itu maka proses pembayaran tidak dapat dilakukan meskipun sudah masuk tanggal pembayaran yang biasanya dilakukan oleh google. Untuk tanggal pembayarannya sendiri biasanya akan dilakukan atau diproses di tanggal 21-25 setiap bulannya...

Penjumlahan Inputbox Secara Otomatis Di HTML, Php, Dan JQuery

Hai sobat yadishare apa kabar? Sudah hari sabtu lagi nih. Iseng-iseng ah pengen nulis mengenai html dan jquery. Ketika kita membangun sebuah aplikasi menggunakan php, seringkali kita harus membuat sebuah penjumlahan antar textbox secara otomatis agar memudahkan user. Misalnya kita memiliki 3 buah inputbox yang kita buat dengan menggunakan HTML yang terdiri dari sub total, ppn, dan grand total. Kemudian setiap kali kita menginputkan angka ke dalam textbox sub total dan textbox ppn tersebut, kita ingin textbox grand total jumlahnya terhitung secara otomatis agar dapat memudahkan user. Lalu bagaimana caranya? Nah untuk dapat melakukannya, kita pasti butuh cara yang mudah dan cepat bukan? Ada banyak cara yang dapat kita lakukan untuk mewujudkan hal tersebut. Salah satunya adalah dengan menggunakan bantuan JQuery. Pertama kalian bisa download file jquery.js disini . Masukkan ke dalam folder assets/js. Kalian juga dapat menambahkan script berikut ini tanpa harus mendownload f...

Yadishare

Search This Blog