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
Comments
Post a Comment