ProgramPC

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 , contoh jika anda ingin mewarnai font dengan warna merah maka tulis Font ini berwarna merah

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
Format teks italic/miring menggunakan tag
Format teks underline/garis bawah menggunakan tag

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 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 . atribut tag tersebut yaitu :

Membuat paragraf rata kiri menggunakan .. isi paragraph
Membuat paragraf rata kanan menggunakan .. isi paragraph
Membuat paragraf rata tengah menggunakan .. isi paragraph
Membuat paragraf rata kiri kanan menggunaan .. isi paragraph

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.