Pengertian Dan Fungsi HTML pada Blog/Website
OK kita langsung saja ke inti penjelasan. HTML adalah singkatan dari Hypertext Markup Language yang merupakan sebuah format bahasa dari world wide web untuk menulis & menampilkan dokumen. Sehingga dokumen tersebut dapat dengan mudah tersebar ke PC melalui media jaringan komputer atau internet yang sekarang ini sedang kita nikmati. Untuk dapat membuka dokumen yang ditulis dengan HTML maka kita perlu sebuah tool yaitu browser seperti Opera, Mozilla, Netscape, Internet Explorer atau yang lainnya....
Sebuah dokumen HTML setidaknya mempunyai susunan sebagai berikut:
<html>
<head>
<title>Judul dokumen</title>
</head>
<body>
Tempat dokumen ditulis atau dideklarasikan
</body>
</html>
Sampai disini mungkin ada yang bertanya, sebelum kita lanjut ke studi kasus yang lebih rumit tapi sederhana???? xixixi Saya yakin pasti tidak ada pertanyaan lawong mudah kok untuk mengerti apakah HTML itu!
Maaf bung, ni ada sedikit pertanyaan. Bagaimana cara membuat file HTML? Jawabannya :
Akhir kata Saya ucapkan terimakasih, jika masih malu bertanya ya malu saja tapi jangan takut untuk menulis komentar terhadap tulisan pendek ini.
Maaf bung, ni ada sedikit pertanyaan. Bagaimana cara membuat file HTML? Jawabannya :
- Minimal Anda mempunyai text editor seperti notepad jika tidak punya kunjungi saja alamat ini untuk mendownload dan menginstallnya di komputer kita. Jika Anda mempunyai software dreamweaver itu lebih baik karena dapat memberikan peringatan kepada Anda jika salah ketik kode program.
- Buka notepad --> tuliskan kode html --> file --> save as --> "NamaFile.html" --> save cara ini khusus bagi Anda yang hanya mempunyai file notepad sedangkan yang mempunyai dreamweaver bisa langsung buka file --> new --> HTML dan untuk menyimpannya tinggal file --> save as -- NamaFile
- Untuk cara menyimpan file HTML di notepad dan dreamweaver terdapat sedikit perbedaan yaitu nama file dan extensinya. penulisan di notepad Anda harus sertakan nama file plus extensinya dan diapit oleh tanda petik (jangan sampai kelewatan), tetapi kalo di dreamweaver anda tidak perlu lakukan.
Akhir kata Saya ucapkan terimakasih, jika masih malu bertanya ya malu saja tapi jangan takut untuk menulis komentar terhadap tulisan pendek ini.
Pengertian Dan Fungsi CSS pada Blog HTML
Halo prend.... sekarang nieh Saya akan menyampaikan pengertian dan fungsi CSS (Cascading Style Sheet) di dalam website. Tapi ini versi saya looooh.... jadi bisa tepat sasaran atau malah menjauhi sasaran. Walah malah kayak seperti mau latihan nembak aja ngomongnya... jadi mau jelasin gak sieh... Ok kayaknya sudah ada yang gak sabaran.
"Sebelum kita lanjut ada baiknya kita pahami terlebih dahulu mengenai HTML"
CSS mempunyai pengertian sebagai alat/fasilitas yang dapat mewariskan atrribut pada sebuah tag html dan berfungsi untuk mempercantik sebuah tampilan dokumen. Apakah langsung dituliskan kedalam dokumen HTML atau secara terpisah. Dengan adanya CSS maka kita dapat dengan mudah merubah tampilan atau attribut sebuah tag HTML. Seperti merubah warna background & teks, paragraph, ukuran huruf, templates website dan sebagainya.
Wah kayaknya masih banyak yang bingung!!!!! Ok kita langsung saja ke contoh penggunaan CSS pada dokumen HTML:
Pertama, penulisan CSS secara Inline style sheet atau langsung kedalam tag HTML.
Pertama, penulisan CSS secara Inline style sheet atau langsung kedalam tag HTML.
<html>
<head>
<title>Inline Style Sheet</title>
</head>
<body bgcolor="FFFFFF">
<p id="ex_1">Contoh paragraph tanpa menggunakan CSS</p>
<p id="ex_2" style="font-size:14pt;">Contoh paragraph menggunakan CSS, besar huruf 14 pt</p>
<p id="ex_3" style="font-size:18pt; color:blue;">Contoh paragraph menggunakan CSS, besar huruf 18 pt dan berwarna biru</p>
</body>
</html>
kata yang berwarna merah adalah attribute style yang berfungsi merubah ukuran dan warna tulisan. Untuk mencobanya Anda bisa lakukan copy & paste kode program di atas atau dibawah ini. caranya: buka notepad -->paste kode program --> simpan --> "index.html" (jangan lupa untuk menambahkan tanda petik pada nama file) --> selesai --> langsung uji coba.
Dapat dijadikan catatan, ketika kita merubah attribut style sebuah tag HTML maka tidak akan merubah attribut tag HTML yang lain dikarenakan penulisan style sheet ini bersifat independent atau berdiri sendiri.
Dapat dijadikan catatan, ketika kita merubah attribut style sebuah tag HTML maka tidak akan merubah attribut tag HTML yang lain dikarenakan penulisan style sheet ini bersifat independent atau berdiri sendiri.
Kedua, penulisan CSS secara embedded style sheet
CSS didefinisikan diantara tag pembuka <style>...</style> diletakkan di atas tag <body> OK jika masih bingung langsung saja kita menuju contoh penulisannya. Pasti dijamin ngerti.....
<html>
<head>
<title>Embedded Style Sheet</title>
</head>
<style>
body{background:#0000FF; color:#FFFF00; margin-left:0.5in}
H1{font-size:16pt; color:yellow}
P{font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<H1 id="ex_1">Header Berwarna Kuning</H1>
<P id="ex_2">Paragraph 1 mempunyai format ukuran font 12pt, tipe font Arial dan berindentasi 0.5 in. Semua dokumen mempunyai margin kiri sebesar 0.5 inch dan berwarna #0000FF , didefinisikan pada attribut tag <body>...</body> </P>
</body>
</html>
Kata yang diberi warna merah adalah pendefinisan CSS secara embedded style sheet, jika kita melakukan perubahan attribut tag HTML maka tag HTML yang ada di dokumen akan berubah semua. misalnya: kita rubah attribut color:yellow pada tag H1 dengan color:black maka semua tag H1 di dalam dokumen akan mengalami perubahan.
Seperti yang sebelumnya, Anda pun dapat melakukan CoPas (copy --> paste) kode HTML beriktu untuk dicoba sendiri.
Ketiga, penulisan CSS secara linked style sheet
Cara ketiga ini sebenarnya hampir mirip dengan cara kedua embedded style sheet hanya saja CSS tidak ditulis dalam satu dokumen tetapi ditulis secara terpisah dengan dokumen HTML dan mempunyai extensi file .css. mungkin sebagian mungkin ada yang bertanya kenapa CSS harus ditulis secara terpisah dengan HTML? ini adalah jawaban yang paling sederhana yaitu agar proses editing terhadap style dokumen dapat dilakukan secara mudah dan terpusat.
Untuk memanggil file css yang letaknya terpisah dengan file HTML dapat kita gunakan format linked berikut ini. letakkan format kode <link rel=stylesheet href="letak file css" type="text/css"> diantara tag <head>...</head>.
OK kita langsung saja menuju contoh biar cepet mengerti, buat dua buah file yaitu index.html dan style.css. Letakkan dua buah file tersebut di Dekstop komputer atau drive lain. kemudian panggil file index.html dan lihat hasilnya, apakah sama dengan cara yang kedua????
Oh iya hampir lupa isi file index.html dan style.css dapat Anda dapat dengan cara CoPas kode dibawah ini:
index.html
<html>
<head>
<title>Embedded Style Sheet</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>
<body>
<H1 id="ex_1">Header berwarna Kuning</H1>
<P id="ex_2">Paragraph 1 mempunyai format ukuran font 12pt, tipe font Arial dan berindentasi 0.5 in. Semua dokumen mempunyai margin kiri sebesar 0.5 inch dan berwarna #0000FF , didefinisikan pada attribut tag <body>...</body>. </P>
</body>
</html>
style.css
<style>
body{background:#0000FF; color:#FFFF00; margin-left:0.5in}
H1{font-size:16pt; color:yellow}
P{font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
Eh maaf untuk cara yang ketiga ini tidak Saya kasih contoh kode HTML yang ditulis di dalam textarea..... jadi semua prend dapat copas kode HTML diatas saja. Akhir kata jika Ada salah Saya minta maaf dan Jika masih banyak pertanyaan jangan sungkan atau malu untuk bertanya.
Subscribe to:
Posts (Atom)
0 komentar