Belajar Dasar HTML: 2016

Kamis, 13 Oktober 2016

Frame adalah teknik yang digunakan untuk membagi window menjadi beberapa bagian. Setiap bagian kita isi dengan sebuah halaman web yang sesuai. Keuntungan dari penggunaan frame adalah mudahnya pengaturan hubungan antar satu halaman dengan halaman lainnya.

Tag yang digunakan untuk penulisan frameset HTML adalah
<frameset>…</frameset>

Frame dapat digunakan untuk berbagai macam keperluan, antara lain:

1. Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isinya

2. Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isis dokumen

3. Membuat suatu dokumen tanya jawab, dll.

Cara Membuat Frame HTML

Untuk membuat halaman web yang menggunakan frame kita perlu membuat beberapa file html, yaitu:

Sebuah pendefinisi file. File tersebut kita butuhkan untuk menampilkan halaman web dengan bentuk frame
Beberapa file pengisi frame, yang jumlahnya tergantung dari berapa bagian yang akan kita buat pada frame tersebut

Atribut-atribut yang dapat menyertai tag ini adalah:

BORDER, untuk menentukan tebal garis pemisah antar frame
ROWS, untuk menentukan berapa baris bagian yang akan dibentuk
COLS, untuk menentukan berapa kolom yang akan dibentuk

Jika kita tidak akan membagi lagi frame yang ada, maka selanjutnya kita definisikan frame tersebut dengan tag <FRAME>. Atribut-atribut yang dapat menyertai tag ini adalah:

NAME, untuk memberi identitas/nama bagi frame tersebut. Fungsinya adalah ketika frame tersebut dijadikan target untuk menampilkan suatu halaman.
SRC, menunjukkan file yang mengisi frame tersebut.
SCROLLING, untuk menunjukkan apakah kita akan menggunakan scrolling bardi samping atau di bawah halaman, opsi inputnya adalah "YES, NO atau AUTO".

Contoh penulisan tag frameset untuk pembagian web page menjadi 3 baris (header, content, footer) dan 2 kolom (kanan dan kiri pada bagian content).

<frameset rows=”12%,*,12%”>
<frame name=”top” scrolling=”no” noresize src=”atas.html”>
<frameset cols=”20%,*”>
<frame name=”Left” scrolling=”no” noresize src=”kiri.html”>
<frame name=”Right” scrolling=”yes” src=”kanan.html”>
</frameset>
<frame name=”bottom” scrolling=”no” noresize src=”bawah.html”>
</frameset>

Keterangan :

Baris 1 : frameset rows digunakan untuk membuat baris terlebih dahulu, dimana disebutkan bahwa baris pertama tingginya 12% dari tinggi resolusi layar, baris kedua tingginya *, dan baris ketiga tingginya 12%.
Tanda (*) artinya tinggi baris kedua merupakan sisa setelah dikurangi tinggi baris pertama dan ketiga.

Baris 2 : frame name digunakan untuk memberi nama baris pertama yaitu top yang berfungsi sebagai header. Tidak menggunakan scrolling. Garis yang muncul sebagai pembagi tidak bisa di resize. Isi yang ditampilkan pada header diambil dari file atas.html. Oleh karena itu, siapkan terlebih dahulu file atas.html.

Baris 3 : frameset cols digunakan untuk membuat kolom pada baris kedua. Kolom yang dibutuhkan ada 2, yaitu kolom sebelah kiri lebarnya 20% dan kolom sebelah kanan lebarnya adalah sisanya.

Baris 4 dan 5 : Beri nama frame untuk kolom sebelah kiri dan kanan.Namun, untuk kolom sebelah kanan terdapat tambahan scrolling. Isi masing-masing kolom juga diambil dari file html yang berbeda.

Baris 6 : Tag </frameset> digunakan sebagai penutup frameset kolom.

Baris 7 : Membuat frame name untuk bagian footer/bottom (baris paling bawah).

Baris 8 : Tag </frameset> digunakan sebagai penutup frameset baris.

Hasil dari coding diatas:

Sekian Semoga bermanfaat, jika anda ingin belajar Contoh dari frimeset klik Disini

Minggu, 09 Oktober 2016

Tugas Membuat Website

hay.. ketemu lagi dengan saya nee, tugas emang gak ada libur nya sob. Ini tugas membuat desain web sederhana contoh capture:

Dalam pembuatan website sederhana ini saya menggunakan 6 notepad yang nanti nya setiap notepad memiliki fungsi yang berbeda beda.
hal pertama yang harus anda lakukan adalah buka Notepad copy coding dibawah ini :

A. Membuat desain awal website.

<html>
<head>
<title> bikin website</title>
</head>
<body>
<body background="w.jpg">
<center><table width="800" border="1" cellspacing="0" cellpadding="3">

<tr>
<td bgcolor="cyan" colspan="2">
<img src="web.jpg" width="800px" height="100px">
</td>
</tr>
<tr>
<th bgcolor="cyan" width="150" height="450">
<a href="web.html">Home</a>
<p><a href="profil.html">Profil</a>
<p><a href="galeri.html">Galeri</a>
<p><a href="artikel.html">Artikel</a>
</th>
<th bgcolor="whitesmoke">
<font face="Comic Sans MS" size="9" color="green">Selamat datang di website saya</th>
</tr>
<tr>
<td bgcolor="reef" colspan="2"><marquee><h4><font color="yellow">@Copyright By: MINO UTAMA</h4></td>
</tr>
</body>

</html>

Hasil:

B. Membuat menu Profil.

<html>
<head>
<title> bikin website</title>
</head>
<body>
<body background="w.jpg">
<center><table width="800" border="1" cellspacing="0" cellpadding="3">
<tr>
<td bgcolor="cyan" colspan="2">
<img src="web.jpg" width="800px" height="100px">
</td>
</tr>
<tr>
<th bgcolor="cyan" width="150" height="450">
<a href="web.html">Home</a>
<p><a href="profil.html">Profil</a>
<p><a href="galeri.html">Galeri</a>
<p><a href="artikel.html">Artikel</a>
</th>
<td bgcolor="whitesmoke">
<fieldset class="h"/>
<table style="width:600px;" height="340px">
<tr>
<td rowspan="5" width="10px">
<img src="poto2.jpg" width="180px" height="200px" style="border:5px outset green;">
</td>
</tr>
<p><center><h1>My Profil</center>
<tr>
<td><b>NAMA</b></td>
<td>: MINO UTAMA</td>
</tr>
<tr>
<td><b>NIM</b></td>
<td>: 141410134</td>
</tr>
<tr>
<td><b>ALAMAT</b></td>
<td>: PLAJU PALEMBANG</td>
</tr>
<tr>
<td><b>JENIS KELAMIN</b></td>
<td>: Laki - Laki</td>
</tr>
<p><tr>
<td><b>Kelebihan</b></td>
<td>: Bisa Disegala hal</td>
</tr>
<tr>
<td><b>Kekurangan</b></td>
<td>: Keterbatasan Dalam Hal Money</td>
</tr>
<tr>
<td><b>E_MAIL</b></td>
<td>: <a href="https://plus.google.com/116262173949318480208">minoutama97.ml@gmail.com</a></td>
</tr>
<tr>
<td><b>Websites</b></td>
<td>-<a href="https://minoutamaweb.blogspot.co.id/2016/09/belajar-html.html">minoutamaweb.blogspot.co.id</a></td>
</tr>
<tr>
<td> </td>
<td>-<a href="https://https://minoutamablog.wordpress.com/">minoutamablog.wordpress.com</a></td>
</tr>
</td>
</tr>
</table>
<tr>
<td bgcolor="reef" colspan="2"><marquee><h4><font color="red">@Copyright By: MINO UTAMA</h4></td>
</tr>
</body>

</html>

Hasil:

C. Membuat menu Galeri

<html>
<head>
<title> bikin website</title>
</head>
<body>
<body background="w.jpg">
<center><table width="800" border="1" cellspacing="0" cellpadding="3">
<tr>
<td bgcolor="cyan" colspan="2">
<img src="web.jpg" width="800px" height="100px">
</td>
</tr>
<tr>
<th bgcolor="cyan" width="150" height="450">
<a href="web.html">Home</a>
<p><a href="profil.html">Profil</a>
<p><a href="galeri.html">Galeri</a>
<p><a href="artikel.html">Artikel</a>
</th>
<td>
<center><img src="poto1.jpg" width="310" height="200">
<img src="poto2.jpg" width="310" height="200">
<p><img src="poto3.jpg" width="310" height="200">
<img src="poto4.jpg" width="310" height="200">
</td>
</tr>
<tr>
<td bgcolor="reef" colspan="2"><marquee><h4><font color="red">@Copyright By: MINO UTAMA</h4></td>
</tr>
</body>

</html>

Hasil:

D. Membuat Halaman Artikel

<html>
<head>
<title> bikin website</title>
</head>
<body>
<body background="w.jpg">
<center><table width="800" border="1" cellspacing="0" cellpadding="3">
<tr>
<td bgcolor="cyan" colspan="2">
<img src="web.jpg" width="800px" height="100px">
</td>
</tr>
<tr>
<th bgcolor="cyan" width="150" height="450">
<a href="web.html">Home</a>
<p><a href="profil.html">Profil</a>
<p><a href="galeri.html">Galeri</a>
<p><a href="artikel.html">Artikel</a>
</th>
<td bgcolor="whitesmoke">
<p><h2><a href="dasarhtml.html">Belajar dasar HTML menggunakan Notepad</a>
<p><h2><a href="desainwebsite.html">Cara membuat desain website yang menarik</a>
</td>
</tr>
<tr>
<td bgcolor="reef" colspan="2"><marquee><h4><font color="red">@Copyright By: MINO UTAMA</h4></td>
</tr>
</body>
</html>

Hasil:

Nah pada halaman artikel ini saya membuat 2 notepad yang fungsinya untuk melengkapi isi dari artikel.
a. Artikel pertama Belajar dasar HTML menggunakan Notepad

<html>
<head>
<title> bikin website</title>
</head>
<body>
<body background="w.jpg">
<center><table width="800" border="1" cellspacing="0" cellpadding="3">
<tr>
<td bgcolor="cyan" colspan="2">
<img src="web.jpg" width="800px" height="100px">
</td>
</tr>
<tr>
<th bgcolor="cyan" width="150" height="450">
<a href="web.html">Home</a>
<p><a href="profil.html">Profil</a>
<p><a href="galeri.html">Galeri</a>
<p><a href="artikel.html">Artikel</a>
</th>
<td bgcolor="whitesmoke">
<h3><b>Belajar dasar HTML menggunakan Notepad</b></h3>
<i><font face="Comic Sans MS" size="3">
<dd>HTML adalah bahasa dasar yang digunakan untuk membuat sebuah halaman web</dd> dan menampilkan berbagai informasi di dalam sebuah web browser. Sebelum mulai belajar web programming,
anda dituntut untuk menguasai HTML terlebih dahulu, Dan di bawah ini adalah panduan belajar
HTML yang saya susun mulai dari dasar hingga tingkatan yang lebih rumit. Mudah-mudahan bermanfaat bagi anda.
<ol>
<li><a href="http://minoutamablog.blogspot.co.id/2016/09/tag-html-dan-macam-macam-tag-html.html">Macam-macam Tag HTML</li>
<li><a href="https://minoutamaweb.blogspot.co.id/2016/09/belajar-html.html">Belajar Dasar HTML</li>
<li><a href="http://minoutamablog.blogspot.co.id/2016/09/belajar-list-pada-html_28.html">Belajar List HTML</li>
<li><a href="http://minoutamablog.blogspot.co.id/2016/09/belajar-membuat-tabel-html.html">Belajar Tabel HTML</li>
</ol>
</td>
</tr>
<tr>
<td bgcolor="reef" colspan="2"><marquee><h4><font color="red">@Copyright By: MINO UTAMA</h4></td>
</tr>
</body>
</html>

Hasil:

b. Artikel yang kedua Cara membuat desain website yang menarik

<html>
<head>
<title> bikin website</title>
</head>
<body>
<body background="w.jpg">
<center><table width="800" border="1" cellspacing="0" cellpadding="3">
<tr>
<td bgcolor="cyan" colspan="2">
<img src="web.jpg" width="800px" height="100px">
</td>
</tr>
<tr>
<th bgcolor="cyan" width="150" height="450">
<a href="web.html">Home</a>
<p><a href="profil.html">Profil</a>
<p><a href="galeri.html">Galeri</a>
<p><a href="artikel.html">Artikel</a>
</th>
<td bgcolor="whitesmoke">
<h3><b>Cara membuat desain website yang menarik</b></h3>
<i><font face="Comic Sans MS" size="2">
<dd>Sudah tidak masanya lagi memiliki website yang sama atau mirip dengan</dd>
website lain. Sejalan dengan cepatnya perubahan waktu, trend dalam internet
marketing juga cepat berubah. Untuk berkomunikasi efektif dalam pasar yang
berkembang, anda harus dapat menciptakan suatu ide yang unik yang dapat
diimplementasikan secara efektif. Ya, untuk keberlangsungan bisnis anda,
sangat penting untuk memiliki website yang menarik dan unik agar terlihat
lebih profesional.

<p><dd>Anda harus menawarkan sesuatu yang berbeda, sesuatu yang membuat</dd>
website anda menonjol sehingga orang lain ingin mengunjungi website anda
dan mendapatkan kesan saat berada di website anda, Berikuti ini beberapa
trend yang sedang marak di kalangan web designer dunia yang tentunya dapat
membuat website anda bisa menjadi lebih unik dan menarik.
<ul>
<li>Adaptive / Responsive Web Design</li>
<li>Typography</li>
<li>Fixed Menus & Content</li>
<li>Menghindari Desain Kompleks, Pilih Minimalis</li>
<li>Mulai Hindari Flash</li>
<li>Background Full Page dan Kualitas Gambar</li>
<li>Presentasi Video</li>
</ul>
</td>
</tr>
<tr>
<td bgcolor="reef" colspan="2"><marquee><h4><font color="red">@Copyright By: MINO UTAMA</h4></td>
</tr>
</body>
</html>

Hasil:

Nah cukup sekian ya dari saya,, maaf jika sudah membuat pusing anda,, heheeee
sampai jumpa.

Nb:
Buat temen-temen Bloger. "Jangan jadi seseorang Pengcopy sejati jadilah diri anda sendiri dan mulailah belajar menganalisis, itulah yang akan membuat karya anda lebih istimewa"
by:Mino Utama

Selasa, 04 Oktober 2016

Tugas Membuat Jadwal KRS

Gak perlu pake pembuka yah sob langsung aja ini contoh soal nya:

Tuh kan liat soal nya aja udah pasang muka masem apa lagi ngerjain nya ya ga', sabar ya sob, kali ini saya akan memecahkan masalah pada wajah anda sob jangan hawatir walau gak seperti yang dosen ingin kan namun kira kira seperti ini coding nya, walau salah-salah tapi banyak yang mirip kok tenang aja..!

Copy paste coding dibawah ini kemudian save/saveas dengan take (.html).

<html>
<head>
<title>belajar tabel</title>
</head>
<body>
<body bgcolor="green">
<form action="#" style="width: 700px" class="posisi";>
<fieldset class="h"/>
<table bgcolor="cyan" width="700" border="1" cellspacing="0" cellpadding="3">

<tr>
<th colspan="5"><font color="red">JADWAL KRS</th>
</tr>
<tr>
<b><th width="7" height="40" bgcolor="magenta"><font color="red">NO</th>
<b><th width="79" height="40" bgcolor="yellow"><font color="red">NAMA</th>
<b><th width="100" bgcolor="blue"><font color="red">NIM</th>
<b><th width="92" bgcolor="Silver"><font color="red">KELAS</th>
<b><th bgcolor="Orange"><font color="red">MATA KULIAH</th>
</tr>
<tr>
<td>1</td>
<td>Mino Utama</td>
<td>141410134</td>
<td rowspan="5">SI5H</td>
<td>Jaringan Komputer</td>
</tr>
<tr>
<td>2</td>
<td>Agil Saputra</td>
<td>141410165</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>3</td>
<td>Ahmad Mulyadi</td>
<td>141410123</td>
<td>Jaringan Komputer</td>
</tr>
<tr>
<td>4</td>
<td>Ahmad Muhlasin</td>
<td>141410139</td>
<td>Jaringan Komputer</td>
</tr>
<tr>
<td>5</td>
<td>Agom Pesa</td>
<td>141410137</td>
<td>Jaringan Komputer</td>
</tr>
<tr>
<td>6</td>
<td>Bambang ES</td>
<td>141410432</td>
<td rowspan="5">SI5I</td>
<td rowspan="2">Jaringan Komputer</td>
</tr>
<tr>
<td>7</td>
<td>Brilian Sidhatama</td>
<td>141410123</td>
</tr>
<tr>
<td>8</td>
<td>Bili Saputra</td>
<td>141410231</td>
<td>Statistika</td>
</tr>
<tr>
<td>9</td>
<td>Andre Saputra</td>
<td>141410132</td>
<td>Jaringan Komputer</td>
</tr>
<tr>
<td>10</td>
<td>Andrias Lopa</td>
<td>141410243</td>
<td>Jaringan Komputer</td>
</tr>
</table>
</body>

</html>

dan ini hasil nya sob, keren kan heheee.

Sekian sob terima kasih.... jangan lupa baca artikel yang lain nya juga Disini

Sabtu, 01 Oktober 2016

Tugas Membuat Tabel

Tugas yang akan dikumpul pada Monday, October 03, 2016.
Kali ini saya akan menyelesaikan tugas dari BuTiyas dengan karakteristik sebagaai berikut:

Membuat tabel 1baris 2kolom dan 2baris 1kolom.
Membuat atribut dengan CellSpacing dan CellPadding.

Langsung saja
1. Membuat tabel 1baris 2kolom dan 2baris 1kolom.

<html>

<head>

<title>Penggunaan Tag Tabel</title>

</head>

<body>

<h3>Membuat tabel 1baris 2kolom</h3>

<tr>

<td>Alamat</td>

</tr>

</tabel>

<h3>Membuat tabel 2baris 1kolom</h3>

<tr>

</tr>

<tr>

<td>Alamat</td>

</tr>

</tabel>

</body>

</html>

Hasil:

2. Membuat atribut dengan CellSpacing dan CellPadding.

a. Membuat atribut dengan Cellspacing

Atribut cellspacing digunakan untuk menentukan jarak antar sel pada sebuah tabel, mengatur jarak antara garis tepi dari bagian dalam dengan garis tepi yang dibagian luar.

<tr>

</tr>

<tr>

<td>Alamat</td>

<td>Tanggal</td>

</tr>

</tabel>

Hasil:

b. Membuat atribut dengan Cellpadding

Atribut Cellpadding digunakan untuk memberi jarak antar sel dengan tulisan.

<tr>

</tr>

<tr>

<td>Alamat</td>

<td>Tanggal</td>

</tr>

</tabel>

Hasil:

Semoga bermanfaat atas artikel yang saya bagikan untuk anda.

EeeeetttT...! Tunggu dulu, jika sobat ingin mengCopas jangan lupa baca doa... ok!

Rabu, 28 September 2016

Belajar Membuat Tabel HTML

Tabel HTML

Tabel merupakan cara menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom, tabel dibuat dengan menggunakan tag <tabel>. Ada 3 elemen dalam pembuatan tabel:

1. Tag <tr> table row, digunakan untuk membuat baris dari tabel.

2. Tag <td> table data, digunakan untuk menginput data ke tabel.

3. Tag <th> table heading, Mendefinisikan sel header di dalam sebuah tabel.

Contoh:

1. Cara membuat tabel 1

<tr>

</tr>

</tabel>

Hasil:

2. Membuat tabel 1baris 2kolom

<tr>

<td>Alamat</td>

</tr>

</tabel>

Hasil:

3. Membuat tabel 2baris 1kolom

<tr>

</tr>

<tr>

<td>Alamat</td>

</tr>

</tabel>

Hasil:

4. Membuat atribut dengan Cellspacing

Atribut cellspacing digunakan untuk menentukan jarak antar sel pada sebuah tabel.

<tr>

</tr>

<tr>

<td>Alamat</td>

<td>Tanggal</td>

</tr>

</tabel>

Hasil:

5. Membuat atribut dengan Cellpadding

Atribut Cellpadding digunakan untuk memberi jarak antar sel dengan tulisan.

<tr>

</tr>

<tr>

<td>Alamat</td>

<td>Tanggal</td>

</tr>

</tabel>

Hasil:

6. Menentukan lebar kolom dengan prosentase (width=25%)

Jika lebar koloom ditentukan 25%, maka tampilan tabel akan melebar memenuhi lebar halaman.

<h3>membuat tabel width=25%</h3>

<tr>

</tr>

<tr>

<td width=10%>Alamat</td>

<td width=25%>Tanggal</td>

</tr>

</tabel>

Hasil:

7. menentuan lebar dan tinggi kolom dengan satuan pixel

Untuk membuat tabel, lebar kolom (width) tinggi kolom (height) dapat dilakukan dengan satuan pixel.

</tr>

<td width=150>Alamat</td>

<td width=150>Tanggal</td>

</tr>

</tabel>

Hasil:

8. perataan tulisan dalam tabel

Menggunakan tag ALIGN(untuk perataan horizontal) VALIGN(untuk perataan vertical).

</tr>

</tr>

</tabel>

Hasil:

Semoga artikel ini bermanfaat untuk anda.

Belajar Dasar HTML

Laman

Kamis, 13 Oktober 2016

Tugas Membuat Frimeset HTML

Belajar Frimeset pada HTML

Minggu, 09 Oktober 2016

Tugas Membuat Website

Selasa, 04 Oktober 2016

Tugas Membuat Jadwal KRS

Sabtu, 01 Oktober 2016

Tugas Membuat Tabel

Rabu, 28 September 2016

Belajar Membuat Tabel HTML