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/