Cara membuat HTML dasar
advertisement
Cara membuat HTML dasar
Oleh : Ronaldo Fantoni 11 IPA /12
1. Struktur dasar HTML
HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan
halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag
kontainer. Yaitu diawali dengan dan diakhiri dengan (terdapat tanda “/”).
Untuk belajar membuat HTML, anda membutuhkan 2 buah program aplikasi yaitu HTML editor dan web
browser. Untuk HTML Editor, anda dapat menggunakan yang paling mudah dan mungkin sudah ada di
komputer anda yaitu Notepad. Sedangkan untuk browser, silahkan nanti gunakan Internet Explorer atau
Mozilla Firefox yang mungkin juga sudah ada di komputer anda.
Jadi saat ini kita bisa langsung mempraktekkan bagaimana cara membuat HTML dari yang paling dasar.
Notepad nantinya akan kita gunakan mengetikkan kode-kode atau tag HTML. Sedangkan web browser atau
biasa disebut “browser” saja, akan kita gunakan untuk melihat hasil halaman HTML yang sudah kita buat.
Langsung saja kepada praktek cara membuat HTML dasar, silahkan ikuti langkah-langkah berikut ini.
2. Cara membuat:
a. Buka aplikasi Notepad di komputer anda lalu ketikkan kode HTML berikut ini :
<HTML>
<HEAD>
<TITLE>Belajar menulis dengan HTML</TITLE>
</HEAD>
<BODY>
<H1>Selamat Datang</H1>
<HR>
<P>Ini adalah halaman web pertama saya. Hore... Saya bisa!!</P>
<HR>
</BODY>
</HTML>
Catatan : Nomor yang muncul di setiap baris tidak perlu anda ketik,
itu hanya tampilan untuk menunjukkan nomor baris kode yang ada.
Jadi ketikkan seperti gambar berikut ini :
b. Selanjutnya silahkan klik menu File-Save As untuk
menyimpan file yang anda buat. Simpan dokumen/file diatas
dengan nama “latihan.html”. Pastikan anda mengetikkan
“latihan.html” (tanpa tanda petik) ketika menyimpan, karena
jika tidak maka file yang tersimpan otomatis menjadi file dengan ektension “txt”.
c. Kemudian tutup aplikasi Notepad anda. Lalu
buka windows explorer dan cari dimana file tadi anda
simpan. Jika sudah ditemukan, silahkan buka file HTML
tersebut dengan cara memilih dan klik double.
Jika sudah benar, maka seharusnya file tersebut otomatis
akan dibuka dengan menggunakan aplikasi browser yang
ada di komputer anda seperti Internet Explorer atau Mozilla
Firefox. Dan jika menggunakan Firefox tampilan akan
menjadi seperti berikut.
d. Sampai disini anda diharapkan sudah mampu dan
mengerti tentang bagaimana cara membuat HTML.
Artinya anda tahu dimana mengetikkan kode HTML lalu
menyimpannya dan bagaimana cara melihat tampilan
HTML yang anda buat melalui browser. Selanjutnya anda
tinggal mengikuti tutorial HTML dan begitu melihat
contoh kode HTML yang diberikan maka anda tahu
bagaimana mencobanya.
Pada tahap belajar HTML yang lebih jauh, anda dapat
menggunakan software editor HTML seperti Dreamweaver.
Dengan menggunakan editor yang memang khusus untuk
HTML, anda akan banyak dipermudah karena tersedia berbagai
bantuan untuk membuat HTML yang lebih kompleks.
http://cahkos.com/2013/10-menit-membuat-teamplet-web-menggunakan-html-dan-css/
Cara Membuat CSS (Cascading Style Sheet)
Oleh: Ronaldo Fantoni 11 IPA / 12
CSS ( Cascading Style Sheets ) adalah kumpulan kode-kode yang berurutan dan saling berhubungan
untuk mengatur format / tampilan suatu halaman HTML dan merupakan salah satu bahasa pemrograman web
untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border,
warna border, warna hyperlink, warnamouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan,
atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan
dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang
berbeda.
dua sifat CSS:
-
-
Internal: Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website
yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka
skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.
Eksternal: skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam
tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di
skrip tersebut.
Fakta Menggunakan CSS diantaranya :
-
Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser
lama.
Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk
menempatkan objek dalam posisi yang sama.
Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas
dan kecepatan pengunduhan.
Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan
sesudahnya.
Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browser
CSS adalah layouting “Masa Depan” dengan penggabungan bersama XHTML.
Keuntungan menggunakan CSS yaitu:
-
-
Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan sebuah style-sheet global
yang berisi aturan-aturan CSS tersebut untuk diterapakan pada seluruh dokumen-dokumen HTML pada
halaman situs kita.
User yang berbeda dapat mempunyai style-sheet yang berbeda pula.
Ukuran dan kompleksitas document code dapat diperkecil.
Pada toturial kali ini saya akan berbagi tentang cara membuat css sederhana. Yang anda perlukan dalam
membuat css ini diantaranya adalah :
1. Notepad
2. Browser seperti firefox atau chrome
Langkah-langkah:
1. Jalankan notepad
2. Ketikkan text kode html berikut :
<html>
<head>
<title>Membuat css sederhana</title>
<style type="text/css">
body {
background-color:#33CC00;
color:#0000CC;
}
h1 {
color:#000066;
}
p{
border:1px solid #ccc;
background-color:#FF0000;
padding:5px;
}
</style>
</head>
<body>
<h1>Selamat datang di Website saya</h1>
<p>Saya sedang belajar membuat css sederhana</p>
<p>Ternyata membuat membuat css sederhana itu sangat mudah</p>
</body>
</html>
Kemudian kita simpan. Untuk menyimpan harus dengan jenis html, sehingga kita gunakan fasilitas menu
save as yang ada di notepad.
- Klik menu save as
- Pilih folder tempat menyimpan, misal di desktop
- kemudian ketikkan nama file secara lengkap : latihan1.html
- Kemudian pilih Save as type : all files
- Lalu tekan Save
3. Sekarang buka desktop dan cari file yang sudah kita buat tadi, lalu klik 2x
Jika anda lihat contoh script diatas, yang dinamakan css adalah pada group <style type="text/css">.....</style>.
Fungsinya adalah mengatur tampilan output yang ada pada bagian <body>...</body>.
- See more at: http://www.zainalhakim.web.id/membuat-css-sederhana.html#sthash.Fu2nAkBa.dpuf
http://romanistielf.wordpress.com/2011/10/07/apa-itu-css/
