Agung Brillian

Posts

Showing posts from March 11, 2017

Membuat CV Dengan HTML

March 11, 2017

Biasanya beberapa orang membuat CV menggunakan aplikasi pengolah kata (word processor), ada juga yang membuat CV menggunakan aplikasi pengolah gambar supaya CV menjadi lebih menarik. Kali ini saya mau berbagi cara membuat CV sederhana menggunakan HTML (Hyper Text Markup Language). Berikut langkah-langkahnya, copy skript dibawah ini: <html> <head> <title>Curriculum Vitae</title>  </head> <body bgcolor="#9E9E9E" width="800px">  <div align="center">  <center> <h1> Curiculum Vitae</h1>  </center> <hr /> <h2> Personal...

Apa Itu CSS & Konsep Dasar CSS

March 11, 2017

CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML. Dulu, sebelum CSS menjadi standar untuk mendesain halaman web seperti sekarang, halaman web di desain menggunakan . jadi dibuat dulu desainnya, dalam format .psd atau jpeg, lalu di slice atau di potong potong menjadi bagian – bagian terpisah. setelah itu dibuat table dengan ukuran yang sesuai, lalu desain tadi di “tempel” pada table sebagai image yang melekat pada tabel, atau sebagai background. Kelemahan dari cara seperti ini adalah, halaman web menjadi berat karena kolom – kolom penyusun table dan diberi tambahan atribut image source. Side effect dari hal ini adalah halaman web menjadi padat dan tidak SEO friendly. Dengan CSS, car...

Membuat Formulir Pada HTML

March 11, 2017

Anda tentunya sudah tidak asing dengan istilah “form”. Form adalah sebuah daftar isi yang merupakan salah satu penampilan interaktif yang paling popular pada World Wide Web (WWW). Form atau daftar isian ini digunakan untuk meminta informasi dari user yang kemudian akan diolah. Secara umum, pengolahan form dilakukan pada dengan menggunakan script yang bersifat server – side. Untuk beberapa keperluan tertentu, Anda tentunya membutuhkan penggunaan form di website yang Anda miliki misalnya form untuk survei, form biodata, form pendaftaran, form login, dan yang lainnya. Form memungkinkan pengguna berinteraksi dengan teks, grafik, atau yang lainnya yang ditampilkan pada browser. Tag Form Tag <form> adalah tag yang digunakan untuk mendefinisikan sebuah form. Jadi, sebuah form dibentuk oleh pasangan tag <form> ….. </form>. Pada tag <form> terdapat dua atribut yaitu atribut method dan action yang mempunyai fungsi sebagai berikut: Method : Digunakan unt...

Membuat Frame Pada HTML

March 11, 2017

Disini saya akan membuat frame, untuk membuat ini saya hanya menggunakan notepad. saya akan mengerjakan program dengan tiga file .html. Yaitu (frame.html), (framekan.html), (framekir.html). Untuk yang pertama inilah skript untuk frame.html : <html> <head> <title>Contoh penggunaan Frame</title> </head> <frameset cols="30%, *"> <frame src="framekir.html"> <frame src="framekan.html"> </frameset> </html> Save dengan nama frame.html Untuk yang kedua inilah skript untuk framekan.html : <html> <head> <title>frame kanan</title> </head> <body bgcolor="white"> <h1>Frame di Sebelah Kanan</h1> <form action=# method=get> nama : <input type=text name=nama><p> alamat : <input type=text name=alamat><p> telepon : <input type=text name=telepon><p> E-mail :<input type=text name=email...

Membuat Link Dengan HTML

March 11, 2017

Pengertian Link Pengertian Link atau dalam bahasa Indonesia disebut dengan tautan adalah tulisan atau gambar yang apabila di klik akan menuju halaman tertentu sesuai dengan yang di tentukan oleh pembuat link. Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah ke halaman lainnya. HTML menggunakan tag <a> untuk keperluan ini. Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar). Setiap tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference). Cara Membuat Link Di HTML Marilah sekarang kita mulai praktikkan cara membuat link di HTML, untuk lebih jelasnya simak skrip di bawah ini, seperti biasa silahkan sobat copy dan paste-kan skrip di bawah ini ke teks editor kesayangan sobat, simpan dengan nama lat_link.html. <html> <title>Kuy Belajar bikin Link</title> </head> <body> <h...

Menggunakal Tabel Pada HTML

March 11, 2017

Untuk menampilkan data dengan tipe tabel dalam HTML, kita bisa menggunakan tag <table>. <table>.....</table> Untuk membuat baris tabel, kita gunakan tag <tr> – singkatan dari table row (ditulis di dalam tag table) <table> <tr></tr> </table> Sedangkan untuk menentukan banyaknya kolom, tergantung dari banyaknya tag <td> (table data) yang digunakan di dalam tag <tr>. 1. <table> 2. <tr> 3. <td>No</td> 4. <td>Nama</td> 5. <td>Alamat</td> 6. </tr> 7. </table> Atribut pada tabel: <Table> : menyaakan tag untuk tabel <width> : untuk menyatakan seberapa besar/ lebar yang akan kita buat <border> : ketebalan garis pembatas tabel <tr> : menyatakan sebagai tag kolom <td> : menyatakan sebagai tag cell <cellspacing> : Atribut cellspacing menya...

Menambahkan Gambar Di HTML

March 11, 2017

Cara menyisipkan gambar atau images, berikut langkah-langkahnya: 1. Siapakan gambar/photo yang akan anda sisipkan pada halaman HTML, 2. Boleh anda edit/desain menggunakan aplikasi photoshop (bagi yang sudah paham), 3. Ukuran bebas, pada contoh ini aura menggunakan ukuran 300x350px, 4. Cat : Pastikan gambar berada pada folder yang sama dengan file utama anda (gambar.html) 5. Buka Aplikasi Notepad, Ketik kode html berikut ini <!DOCTYPE html> <html> <head> <title>Menyisipkan Gambar</title> </head> <body> <h2>Contoh Gambar</h2> <p>Ini adalah contoh gambar yang ditampilkan di website</p> <img src="photo.jpg" alt="photo"> </body> </html> Jika dibuka lewat browser, hasilnya akan seperti ini: Keterangan: Menambahkan tag alt pada html gambar dapat membuat konten halaman yang efektif agar supaya menarik pengunjung dan mesin pencari, Yang perlu anda lakukan adalah...

Menampilkan Daftar Item Di HTML

March 11, 2017

Salah satu cara untuk menampilkan informasi teks agar mudah dilihat dan dibaca adalah dengan membuat daftar / list. Pembuatan daftar / list terdiri dari tiga macam bentuk, yaitu : 1. Ordered list 2. Unordered list 3. Definition list Ordered List (Number list) Daftar yang item memiliki nomor berurutan. Di awali tag <OL> dan diakhiri tag </OL>. Diantara kedua tag terdapat tag <LI> yang menyatakan item dalam daftar, otomatis membentuk baris baru tanpa diberi perintah ganti baris <BR>. Untuk memberi nomor secara acak dan tidak urut, pada <LI> ditambahkan atribut VALUE. Misal : <LI VALUE=”10”> Selain itu, dapat membuat variasi penomoran selain menggunakan nomor. seperti bilangan romawi, abjad dsb, dengan memasukkan atribut (pada tabel dibawah) ke dalam tag <OL>. Contoh Perintah (tag) HTML (sebelah kiri kodenya & sebelah kanan hasilnya): Unordered List Daftar yang itemnya ditampilkan dengan tan...

Pengaturan Teks Di HTML

March 11, 2017

Dalam menentukan ukuran dan tampilan teks di dalam HTML saat ini, sudah banyak menggunakan CSS. Akan tetapi bukan berarti elemen pengaturan teks standar pada HTML tidak dipakai lagi. Elemen-elemen ini justru sangat diperlukan untuk dipadukan dengan CSS. Pada topik kali ini, dikarenakan berbagai alasan, tidak diberikan contoh ataupun output dari kode yang dijelaskan. Anda harus mencoba membuat sendiri dokumen HTML yang menggunakan tag-tag berikut, atau dengan cara klik kanan dan "view page source" atau "inspect element" pada berbagai halaman web untuk mempelajari topik ini. Elemen visual pada HTML memiliki dua jenis perilaku: block dan inline. Elemen yang bersifat block otomatis ditempatkan di baris baru. Elemen sebelum dan sesudah elemen block biasanya berada di baris yang berbeda. Contoh elemen block: h1 - h6 div p form pre Sedangkan elemen inline, berada pada baris yang sama dengan elemen-elemen sebelum dan sesudahnya. Contoh elemen inline: ...