ProgramPC: 2017

Archive for 2017

Cara Merubah Background Pada HTML

Assalamualaikum Wr. Wb.

Pada postingan kali ini saya akan menjelaskan tentang Cara Merubah Background Pada HTML.

Dalam membuat website agar tampilan lebih menarik kita pasti akan merubah warna background.

Untuk merubah warna background kita bisa menggunakan attribut <body bgcolor="warna yang diinginkan">, contoh jika ingin merubah warna background menjadi warna biru maka menggunakan attribut <body bgcolor="blue">, Contoh seperti berikut.

Pertama buka text editor anda (disini saya menggunakan notepad++), lalu buat file baru seperti dibawah ini.

<html>
<head>
 <title>Cara Merubah Background  Pada HTML</title>
</head>
<body bgcolor="blue">
 Background biru
</body>
</html>

Save file tersebut dengan nama bgcolor.html, lalu buka menggunakan Mozila Firefox atau browser yang anda miliki, maka hasilnya akan seperti ini

Agar warna yang dihasilkan lebih bervariasi anda bisa memakai kode warna seperti contoh berikut. Buka kembali tex editor anda lalu buat file seperti dibawah ini.

<html>
<head>
 <title>Cara Merubah Background  Pada HTML</title>
</head>
<body bgcolor="#87CEFA">
 Background biru
</body>
</html>

Save file tersebut dengan nama bgcolor1.html, lalu buka menggunakan Mozila Firefox atau browser yang anda miliki, maka hasilnya akan seperti ini

Selain merubah warna background kita juga bisa merubah background dengan gambar dengan menggunakan attribut <body background="lokasi file gambar">. agar lebih jelasnya lihat contoh berikut. Buka kembali text editor anda lalu buat file seperti dibawah ini.

<html>
<head>
 <title>Cara Merubah Background  Pada HTML</title>
</head>
<body background="background.png">
 Background gambar
</body>
</html>

Save file tersebut dengan nama bgcolor2.html, lalu buka menggunakan Mozila Firefox atau browser yang anda miliki, maka hasilnya akan seperti ini.

Cukup sekian penjelasan dari saya, kurang lebihnya mohon maaf apabila ada kesalahan penulisan.

Wassamualaikum Wr. Wb.

Cara Mewarnai Font Pada HTML

Unknown

Assalamualaikum Wr. Wb.

Pada postingan kali ini saya akan menjelaskan tentang Cara Mewarnai Font Pada HTML.

Dalam membuat sebuah website pastilah kita akan merubah warna font agar lebih menarik dilihat.

Untuk mewarnai font dalam HTML kita bisa mnggunakan attribut <font color="warna yang dinginkan">, contoh jika anda ingin mewarnai font dengan warna merah maka tulis <font color="red">Font ini berwarna merah</font>

Maka hasilnya akan seperti berikut.

<html>
<head>
 <title>Cara Mengubah Warna Font Pada HTML</title>
</head>
<body>
 <font color="red">Font ini berwarna merah</font>
</body>
</html>

Selain menulis warna yang diinginkan anda bisa menulis kode warna yang anda inginkan agar warna lebih akurat.

Contoh sebagai berikut.

<html>
<head>
 <title>Cara Mengubah Warna Font Pada HTML</title>
</head>
<body>
 <font color="#FF0000">Font ini berwarna merah</font><br/>
 <font color="#8B0000">Font ini berwarna merah tua</font><br/>
 <font color="#FFC0CB">Font ini berwarna merah muda</font>
</body>
</html>

Dengan menggunakan kode warna maka warna font yang diinginkan lebih akurat.

Cukup sekian penjelasan dari saya, kurang lebihnya mohon maaf apabila ada kesalahan penulisan.

Wassamualaikum Wr. Wb.

Cara Menggabungkan Baris dan Kolom Tabel Pada HTML

Unknown Selasa, Juli 11, 2017 0 Design Web HTML

Unknown

Assalamualaikum Wr. Wb.

Selamat datang di ProgramPc pada postingan kali ini saya akan menjelaskan Cara Menggabungkan Baris dan Kolom Tabel Pada HTML.

Terkadang dalam pembuatan sebuah tabel kita membutuhkan tabel dengan jumlah kolom yang berbeda antara baris petama dengan baris lainnya. Untuk keperluan tersebut dalam HTML kita bisa menggunakan attribut rowspan dan colspan.

Attribut rowspan dan colspan berfungsi untuk menggabungkan sel satu dengan sel yang lainnya. Agar lebih mudah memahami langsung saja anda buat contoh file HTMLnya.

Pertama buka aplikasi text editor yang anda miliki (disini saya menggunakan notepad++), lalu buat file baru seperti dibawah ini.

<html>
<head>
<title>Cara Menggabungkan Baris dan Kolom Tabel Pada HTML</title>
</head>
<body>
<table border="1">
    <tr>
        <td rowspan="2">Baris 1 & 2, Kolom 1</td>
        <td colspan="2">Baris 1, Kolom 2 & 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
    </tr>
    <tr>
        <td> Baris 3, Kolom 1</td>
        <td> Baris 3, Kolom 2</td>
        <td> Baris 3, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 4, Kolom 1</td>
        <td> Baris 4, Kolom 2</td>
        <td> Baris 4, Kolom 3</td>
    </tr>
</table>
</body>
</html>

Save file tersebut dengan nama tabel1.html, lalu buka dengan menggunkan Mozilla Firefox atau browser yang anda miliki, maka hasilnya akan seperti dibawah ini.

Dari hasil diatas anda bisa menyimpulkan kegunaan masing-masing attribut. Cukup sekian penjelasan dari saya, kurang lebihnya mohon maaf apabila ada kesalahan penulisan.

Wassamualaikum Wr. Wb.

Cara Membuat Tabel Pada HTML

Unknown Selasa, Juli 11, 2017 0 Design Web HTML

Unknown

Assalamualaikum Wr. Wb.

Selamat datang di ProgramPc pada postingan kali ini saya akan menjelaskan Cara Membuat Tabel Pada HTML.

Tabel berfungsi untuk menampilkan menampilkan suatu informasi dalam baris dan kolom.

Untuk membuat tabel pada HTML maka anda harus menggunakan tag <table>, tag <td> untuk membuat kolom, dan tag <tr> untuk membuat baris.

Untuk lebih jelasnya tag <table> adalah tag pembuka dalam pembuatan table, tanpa tag <table> maka tag <td> dan tag <tr> tidak bisa difungsikan dengan baik.

Coba buka dan buat file baru di aplikasi text editor anda (disini saya menggunakan notepad++), lalu buat file seperti ini.

<html>
    <head>
 <title>Belajar membuat tabel</title>
    </head>
<body>
 <table border="1">
 <tr>
  <td>Baris 1, Kolom 1</td>
  <td>Baris 1, Kolom 2</td>
  <td>Baris 1, Kolom 3</td>
 </tr>
 <tr>
  <td>Baris 2, Kolom 1</td>
  <td>Baris 2, Kolom 2</td>
  <td>Baris 2, Kolom 3</td>
 </tr>
 <tr>
  <td>Baris 3, Kolom 1</td>
  <td>Baris 3, Kolom 2</td>
  <td>Baris 3, Kolom 3</td>
 </tr>
 </table>
</body>
</html>

Save file tersebut dengan nama tabel.html, lalu buka dengan menggunakan Mozilla Firefox atau browser yang anda miliki, maka hasil akan terlihat seperti berikut.

Dari contoh diatas anda bisa simpulkan fungsi dari masing-masing tag. Namun diatas saya menambahkan atribut border="1", fungsi atribut tersebut adalah menambahkan garis tepi pada tabel yang kita buat (border="0" jika tidak ingin menggunakan garis tepi).

Cukup sekian penjelasan dari saya, kurang lebihnya mohon maaf apabila ada kesalahan penulisan.

Wassamualaikum Wr. Wb.

Cara Penulisan Format Teks Pada HTML

Unknown Minggu, Juli 09, 2017 5 Design Web HTML

Unknown

Assalamualaikum Wr. Wb.

Selamat datang di ProgramPc pada postingan kali ini saya akan menjelaskan Cara Penulisan Format Teks Pada HTML.

Dalam website format teks sering digunakan, contohnya dalam penulisan judul dalam artikel.

Format teks yang sering digunakan, antara lain :

Format teks bold/tebal menggunakan tag <b>
Format teks italic/miring menggunakan tag <i>
Format teks underline/garis bawah menggunakan tag <u>

Agar lebih jelasnya lihat tabel di bawah ini.

Tag	Fungsi
<b>	format text bold/tebal
<i>	format text italic/miring
<u>	format text underline/garis bawah
<small>	format text kecil
<strong>	format text yang hampir sama dengan format bold
<sub>	format subscripted teks
<sup>	format superscripted teks
<ins>	format text garis bawah
<del>	format text dengan garis di tengah
<mark>	format text yang berwarna

Berikut ini adalah hasil dari penulisan teks diatas.

<html>
<head>
<title>Format text pada html</title>
</head>
<body>
<b>ini format format text tebal</b><br/>
<i>ini format text italic</i><br/>
<u>ini format text underline</u><br/>
<em>ini format text em</em><br/>
<small>ini format text small</small><br/>
<strong>ini format text strong</strong><br/>
<sub>ini format text sub</sub><br/>
<sup>ini format text sup</sup><br/>
<ins>ini format text ins</ins><br/>
<del>ini format text del</del><br/>
<mark>ini format text mark</mark>
</body>
</html>

Save file tersebut dengan nama teks.html, lalu buka file tersebut dengan Mozilla Firefox atau browser yang anda miliki maka hasilnya akan seperti ini.

Cukup sekian penjelasan dari saya, kurang lebihnya mohon maaf apabila ada kesalahan penulisan.

Wassalamualaikum Wr. Wb.

Cara Membuat Paragraf Pada HTML

Unknown Minggu, Juli 09, 2017 0 Design Web HTML

Unknown

Assalamualaikum Wr. Wb.

Selamat datang di ProgramPc pada postingan kali ini saya akan menjelaskan Cara Membuat Paragraf Pada HTML.

Untuk membuat paragraf anda bisa menggunakan tag <p> untuk memisahkan paragraf satu dengan paragraf lainnya. Contoh seperti berikut ini.

Pertama buka aplikasi text editor anda di sini saya menggunakan notepad++, lalu buat file baru seperti di bawah ini.

<html>
    <head>
 <title>Membuat Paragraf</title>
     </head>
<body>
  <p>Kalimat ini berada pada paragraf 1</p>
  <p>Kalimat ini berada pada paragraf 2<br/>
          Kalimat ini masih berada di paragraf 2</p>
  <p>Kalimat ini berada pada paragraf 3</p>
</body>
</html>

Save dengan nama paragraf.html, lalu buka file tersebut menggunakan Mozilla Firefox atau browser yang anda miliki, maka hasilnya akan seperti berikut.

Tag paragraf ini terdapat 3 atribut/tag yang bisa

dikombinasikan langsung dengan tag paragraf <p>. atribut tag tersebut yaitu :

Membuat paragraf rata kiri menggunakan <p align=”left”> .. isi paragraph </p>
Membuat paragraf rata kanan menggunakan <p align=”right”> .. isi paragraph </p>
Membuat paragraf rata tengah menggunakan <p align=”center”> .. isi paragraph </p>
Membuat paragraf rata kiri kanan menggunaan <p align=”justify”> .. isi paragraph </p>

Berikut contoh lengkapnya :

Pertama buka aplikasi text editor anda di sini saya menggunakan notepad++, lalu buat file baru seperti di bawah ini.

<html>
 <head>
  <title>Membuat paragraf</title>
 </head>
<body>

<p align="left">1. ini penulisan paragraf rata kiri dalam dokument HTML</p>

<p align="right">2. ini penulisan paragraf rata kanan dalam dokument HTML</p>

<p align="center">3. ini penulisan paragraf rata tengah dalam dokument HTML</p>

<p align="justify">4. ini penulisan paragraf rata kiri kanan dalam dokument HTML</p>

</body>
</html>

Save dengan nama paragraf1.html, lalu buka file tersebut menggunakan Mozilla Firefox atau browser yang anda miliki, maka hasilnya akan seperti berikut.

Cukup sekian penjelasan dari saya, kurang lebihnya mohon maaf apabila ada kesalahan penulisan.

Wassalamualaikum Wr. Wb.

Pengertian dan Fungsi CSS

Unknown Jumat, Juli 07, 2017 0 CSS Design Web

Unknown

Assalamualaikum Wr. Wb.

Selamat datang di ProgramPc pada postingan kali ini saya akan menjelaskan Pengertian dan Fungsi CSS.

Pengertian CSS
CSS adalah “kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup” , dimana bahasa markup ini salah satunya adalah HTML.

Jadi CSS adalah kode program yang digunakan untuk mendesain tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.

CSS biasanya selalu dikaitkan dengan HTML. HTML berfungsi untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS berfungsi untuk tampilan dari halaman web tersebut.

Fungsi CSS

CSS berfungsi merubah atau design halaman website agar lebih menarik dari pada menggunakan tag-tag HTML.

Contoh sebagai berikut:
Pertama buka text editor( disini saya menggunakan notepad++) anda lalu ketik seperti tulisan di bawah ini.

<html>
  <head>
    <title>ProgramPc</title>
    <style> p.style1{color:blue;} 
     p.style2{color:red;}</style>
  </head>
  <body>
    <p class="style1">Paragraf kesatu warna biru</p>
    <p class="style2">Paragraf kedua warna merah</p>
    <p>Paragraf ketiga normal warna hitam</p>
  </body>
</html>

Lalu simpan file itu dengan nama css.html, open with file tersebut menggunakan Mozilla Firefox atau browser internet yang anda punya maka hasilnya akan seperti ini.

Jika anda ingin merubah warna paragraf 1 dan paragraf 2, maka anda tinggal ubah tulisan red blue dan red dengan warna yang anda inginkan.

Cukup sekian postingan kali ini semoga bermanfaat, kurang lebihnya mohon maaf apabila ada kesalahan penulisan kata.

Wassalamualaikum Wr. Wb.

Struktur Dasar HTML

Unknown Jumat, Juli 07, 2017 0 Design Web HTML

Unknown

Assalamualaikum Wr. Wb.

Selamat datang di ProgramPc dalam postingan kali ini kita akan membahas Struktur Dasar HTML.
Struktur HTML yang akan kita bahas kali ini adalah struktur yang sangat sederhana. Sebuah halaman web biasanya memiliki ratusan bahkan ribuan baris, yang ditulis dengan berbagai tag HTML.

Setiap halaman HTML memiliki struktur paling dasar yang terdiri dari : Tag html, tag head, dan tag body. Seperti coba anda buka teks editor disini saya menggunakan Notepad++ buat file baru lalu isi seperti ini.

<html>
  <head>
    <title>ProgramPc</title>
  </head>
<body>
   <p>Selamat Datang Di ProgramPc</p>
</body>
</html>

Lalu save file tersebut dengan nama file.html buka file tersebut dengan cara open with via Mozilla Firefox atau browser yang anda punya.

Tag <html>
Tag ini berfungsi sebagai pembuka dari halaman web. Semua kode HTML harus berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>.

Tag <head>
Tag ini akan berisi berbagai definisi halaman, seperti kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser.

Tag <title>

Tag ini berfungsi menampilkan title dari sebuah halaman web. Title ini ditampilkan pada bagian paling atas web browser. Contohnya pada file.html, ‘ProgramPc’ akan ditampilkan pada tab browser.

Tag <body>
Tag ini berisi semua elemen yang tampil dalam halaman web, seperti paragraf, tabel, link, gambar, dll. Dalam merancang web akan banyak waktu yang kita dihabiskan di dalam tag <body> ini.

Perhatikan bahwa setiap tag akan diakhiri dengan penutup tag. Termasuk <html> yang merupakan tag paling awal dari sebuah halaman web.

Cukup sekian postingan kali ini semoga bermanfaat, kurang lebihnya mohon maaf apabila ada kesalahan penulisan kata.

Wassalamualaikum Wr. Wb.

Cara Membuat Heading HTML

Unknown Jumat, Juli 07, 2017 0 Design Web HTML

Unknown

Assalamualikum Wr. Wb.

Selamat datang di ProgramPc kali ini saya akan membahas tentang Cara Membuat Heading HTML.

Teks heading adalah sebuah kode HTML yang digunakan untuk mengubah tulisan, biasanya dipakai untuk membuat judul pada sebuah artikel maupun dokumen.

Teks Heading mempunyai beberapa tingkatan dari H1, H2, H3, H4, H5, sampai H6. Masing-masing memiliki fungsi sebagai berikut:

Tag Heading <h1> : tag ini digunakan pada nama blog/website (jika berada pada homepage) dan akan berubah menjadi <h2> pada halaman posting.
Tag Heading <h2> : tag ini digunakan pada judul artikel blog (jika berada pada homepage) dan akan berubah menjadi <h1> pada halaman posting.
Tag Heading <h3> : tag ini digunakan pada sub-judul atau penjelasan dari judul artikel atau posting, dan bisa juga digunakan pada judul widget.
Tag Heading <h4> : tag ini digunakan untuk judul artikel terkait, komentar atau bisa juga digunakan pada judul widget.
Tag Heading <h5> : tag ini digunakan sebagai nama komentator atau nama pemberi komentar.

Untuk membuatnya lebih jelas, silahkan tulis script di bawah ini dengan Notepad atau Notepad++ dan simpan kemudian jalankan di web browser.

<!DOCTYPE HTML>
<html>
 <head>
  <title>Cara Membuat Heading HTML</title>
 </head>
 <body>
  <h1>Teks Heading 1</h1>
  <h2>Teks Heading 2</h2>
  <h3>Teks Heading 3</h3>
  <h4>Teks Heading 4</h4>
  <h5>Teks Heading 5</h5>
  <h6>Teks Heading 6</h6>
 </body>
</html>

Hasilnya akan seperti ini.

Cukup sekian postingan kali ini semoga bermanfaat, kurang lebihnya mohon maaf apabila ada kesalahan penulisan kata.

Wassalamualaikum Wr. Wb.

Pengertian dan Fungsi HTML

Unknown Jumat, Juli 07, 2017 0 Design Web HTML

Unknown

Assalamualaikum Wr. Wb.

Selamat datang di ProgramPc pada postingan kali ini saya akan menjelaskan Pengertian dan Fungsi HTML.

Pengertian HTML

HTML adalah singkatan dari hypertext markup langunge. HTML adalah bahasa pemrograman yang digunakan untuk membuat sebuah halaman web. Saat ini HTML merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

HTML sebenarnya mirip dengan dokumen biasa, hanya saja dalam dokumen ini anda bisa memberikan instruksi melalui Tag. Dengan menggunakan Tag HTML memungkinkan user

untuk melakukan fungsi-fungsi berikut ini:

Menentukan ukuran dan alur teks

Mengintegrasikan gambar dengan teks (in-line)

Membuat links

Mengintegrasikan file audio dan video

Membuat form Interaktif.

Contoh jika anda ingin tulisan yang ditampilkan menjadi tebal maka anda cukup menuliskan

<b>Huruf Tebal</b> maka akan menjadi seperti ini Huruf Tebal.

Tanda <b> berfungsi untuk mengaktifkan instruksi cetak tebal.

Tanda </b> berfungsi untuk menonaktifkan instruksi cetak tebal.

Fungsi HTML

Fungsi dari HTML adalah digunakan untuk membuat sebuah halaman website dan juga menampilkan berbagai informasi yang di inputkan ke dalam html tersebut seperti teks, gambar, video, dan lainnya sehingga bisa di tempilkan melalui web browser. Selain itu HTML juga bisa digunakan untuk membuat sebuah link yang nantinya menuju ke sebuah halaman website lainnya dengan kode tertentu.

Cukup sekian postingan kali ini semoga bermanfaat, kurang lebihnya mohon maaf apabila ada kesalahan penulisan kata.

Wassalamualaikum Wr. Wb.