Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

17 September 2019

Mendesain Form Formulir di HTML



Form adalah metode yang digunakan dalam Web Site yang mengizinkan seorang pengunjung untuk dapat berinteraksi dengan server ataupun dengan pengelola Web Site tersebut. Dengan adanya proses interaksi tersebut , maka pengguna akan mendapatkan beberapa kemudahan yang diberikan pada Website tersebut.

Berikut ini merupakan contoh desain sederhana Form Formulir sebuah media masukan yang digunakan untuk memasukan data seperti Nama, Alamat, Email, dan No Telephone , Copy saja Coding berikut ini lalu simpan dengan nama latihanform lalu jalankan.

<html>
<head>
<title>Belajar Form </title>
</head>
<body>
<form action=""name="">
<table width="280" border="0">
<tr>
<td width="86">nama
</td>
<td width="184">
<input name="nama" type="text" id="nama" size="25"
maxlength="20">
</td>
</tr>
<tr>
<td>alamat</td>
<td>
<input name="alamat" type="text"id="alamat" size="30"
maxlength="50">
</td>
</tr>
<tr>
<td> e_mail</td>
<td>
<input name="email" type="text" id="email" size="25"
maxlength="20">
</td>
</tr>
</table>
</form>
</body>

Hasilnya seperti berikut ini


15 September 2019

Membuat Tabel Dengan HTML dengan Mudah


Berikut ini merupakan contoh pembuatan tabel dengan menggunakan kolom = 3 dan baris = 2, untuk dapat membuat tabel tersebut anda harus menambahkan <TR> </TR> setelah <TR></TR> yang pertama, yang berarti anda menambahkan satu baris di dalam tabel anda. setelah itu anda juga harus mendefinisikan jumlah kolom yang disesuaikan pada baris diatasnya. sebagai contoh buatlah dokumen HTML di bawah ini.

<HTML>
<HEAD>
<TITLE> TABEL </TITLE>
</HEAD>
<BODY>
<TABLE border="1">
<TR>
<TD>Kolom 1</TD>
<TD>Kolom 2</TD>
<TD>Kolom 3</TD>
</TR>
<TR>
<TD>cel</TD>
<TD>cel</TD>
<TD>cel</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Kemudian Simpan dengan nama Latihantabel.html , lalu jalankan maka hasilnya sebagai berikut

Demikian cara membuat tabel di html gampang dan mudah bukan , selamat mencoba semoga bermanfaat.
 

13 September 2019

Cara Membuat Sub Daftar Pada HTML



Dengan menggunakan Tag <UL> dan <OL>, HTML juga mengijinkan anda untuk membuat sebuah sub Daftar. Maksud dari sub daftar adalah daftar di dalam daftar untuk lebih jelasnya lihat sintaks berikut ini

<HTML>
<HEAD>
<TITLE> Sub Daftar </TITLE>
</HEAD>
<BODY>
Jenis prosesor yang sering digunakan :
<OL>
<LI> INTEL </LI>
<UL>
<LI>PENTIUM</LI>
<LI>CELERON</LI>
</UL>
<LI>AMD</LI>
<UL>
<LI>Atlon XP</LI>
<LI>Duron</LI>
<LI>Baltron</LI>
</UL>
</OL>
</BODY>
</HTML>

Copy kan kode diatas di Notepad kemudian simpan dengan nama Daftar.html, lalu jalankan maka akan tampil  seperti berikut ini

Kurang lebih seperti itu semoga bermanfaat , selamat mencoba .terima kasih .

22 May 2019

Cara Membuat Masukan Berupa Upload data Dari Komputer Local (File Field)




Pengambilan Data dari komputer lokal biasanya di gunakan untuk web atau aplikasi Upload File.

hal ini bisa di jumpai pada saat berada pada aplikasi site manager yang mengizinkan untuk Upload data.

Untuk membuatnya menggunakan Sintak input yang bertipe File , pada saat mengeklik komponen

tersebut maka akan di bawa ke halaman penjelajahan pada komputer tempat menyimpan File
tersebut.

Berikut Script atau kodingnya

<html>

<head>

<tittle>Belajar Upload </title>

<head>

<body>

<form action="" enctype= "multipart/form-data" neme="">

<table width="280" border="0">

<tr>

<td width="86">


<tr>

<td></td>

<input name="data1" type="file" size="25"></td>

</tr>

<tr><td>

<input name="data2" type= "file" size="25">

</tr>

</table>

</body>

Simpan dengan Nama Upload.html kemudian jalankan maka akan seperti gambar di atas.

Gampang dan mudah bukan selamat mencoba




Baca Juga :



Pengenalan Word Wide Web (WWW)
Mengenal Script HTML Dasar
Dasar Membuat Warna text dan Background pada Halaman Web
Membuat Huruf Tebal Miring Dan Underline Pada Web HTML
Cara Membuat Text Model Kimia Dengan HTMl Untuk Web
Cara Membuat Tulisan Berjalan Marquee yang Sering Kita Lihat di Media
Membuat Formulir atau Kotak Pesan di Web dengan HTML
Cara Memberikan Jarak Spasi Pada Baris Text HTML Untuk Web

21 May 2019

Cara Memberikan Jarak Spasi Pada Baris Text HTML Untuk Web




Kita dapat menentukan jarak spasi pada text yang telah kita tuliskan di dalam web. Secara standar, apabila hendak melakukan pergantian baris, maka kita dapat menentukan spasi 1 dengan cara menuliskan Tag <br> dan dua spasi dengan  menuliskan < br> sebanyak dua kali. Di dalam HTML telah disediakan sebuah Tag yang berguna untuk itu. Untuk lebih jelasnya lihat contoh Scriptnya berikut ini

Baca Juga : 


<html>
<head>
<title> Percobaan Spasi </title>
</head>
<body>
<pre width="4"> Golet Ilmu </pre>
<pre width="4"> Berbagi Pengetahuan</pre>
<pre> Ilmu Yang Bermanfaat</pre>
</body>
</html>

kemudian Jalankan Scriptnya  dengan cara Save as Spasi.html di Folder D atau lainnya kemudian jalankan maka akan tampil gambar diatas, Muda bukan selamat mencoba.

17 May 2019

Membuat Formulir Atau Kotak Pesan Pada Web Dengan HTML



Dalam Website biasanya Form digunakan sebagai media yang digunakan untuk pengunjung dalam mengirimkan permintaan ataupun mengirimkan pesan seperti buku tamu Shout Box, Email, Pencarian, Pendaftaran online , ataupun untuk melakukan pemesanan barang secara online dalam E-Commerce.

Berikut ini Coding atau kode Scriptnya

<html>
<head>
<title>Belajar Form</title>
</head>
<body>
<form action =""neme="">
<table width="280" border="0">
<tr>
<td width="86"> nama 
</td>
<td width="184">
<input name="nama" type="text" id ="nama" size ="25"
maxlength="20">
</td>
</tr>
<tr>
<td>alamat</td>
<td>
<input name="Alamat" type="text" id="alamat" size="30"
maxlength="50">
</td>
<tr>
<td> e_mail</td>
<td>
<input name="email" type="text" id="email" size="25"
maxlength="20">
</td>
</tr>
</table>
</form>
</body>

Kemudian Simpan dengan nama Form.html setelah itu jalankan maka akan tampil seperti gambar di atas.

Baca Juga :

  1. Pengenalan Word Wide Web (WWW)
  2.  Mengenal Script HTML Dasar 
  3.  Dasar Membuat Warna text dan Background pada Halaman Web 
  4.  Membuat Huruf Tebal Miring Dan Underline Pada Web HTML
  5.  Cara Membuat Text Model Kimia Dengan HTMl Untuk Web  
  6.  Cara Membuat Tulisan Berjalan Marquee yang Sering Kita Lihat di Media  

16 May 2019

Cara Membuat Text Model Kimia Dengan HTML Untuk Web

Cara mudah membuat Unsur unsur Kimia dengan Tag HTML untuk Web sebagai berikut menggunakan Tag <SUB> sebagai Efek Kimia dan <SUP> untuk efek perpangkatan pada matematika.

Keterangan :
<SUB> = Membuat huruf menjorok kebawah/Subscibe
<SUP> = Membuat huruf menjorok ke atas/ Superscibe

<SUB> Caracter  caracter </SUB>/* Subscribe Text /*
<SUP> Caracter caracter </SUP>/* Superscripe Text*/

Contohnya kodingnya  sebagai berikut kemudian simpan dengan kimia.html

<html>
<head>
<title> format text kimia & matematika</title>
</head>
<body>

Manusia hidup membutuhkan air /h<sub> 2</sub>O <br>
4 (empat) adalah hail dari perpangkatan 2 <sup> 2 < /sup>

</body>
</html> 

Setelah disimpan haislnya seperti berikut ini

 Baca Juga 


  1.  Pengenalan Word Wide Web (WWW)
  2.  Mengenal Script HTML Dasar 
  3.  Dasar Membuat Warna text dan Background pada Halaman Web 
  4.  Membuat Huruf Tebal Miring Dan Underline Pada Web HTML 

12 May 2019

Membuat Huruf Tebal Miring dan Underline Pada Web HTML

Pernah lihat pada Web ada tulisan tebal, miring di coret atau underline ? kelihatannya sih simple kalau pakai Word tapi ketika sudah dalam halaman Web itu penulisan atau caranya berbeda . berikut penjelasannya dari pertanyaan di atas.

Huruf dengan propertis tebal tau Bold dapat di buat dengan menggunakan Tag awalan <B> dan di akhiri dengan Tag </B>. Sedangkan untuk dapat membuat huruf miring , menggunakan Tag <I> dan di akhiri dengan </I> . Huruf I berarti Italic, sedangkan untuk membuat huruf bergaris bawah Menggunakan Tag <U> dan diaakhiri dengan </U> dan </S> untuk membuat tulisan dengan tampilan tercoret di bagian badannya . 

Contohnya adalah sebagai berikut

Huruf Tebal

<B> Huruf Tebal</B>
<I> Huruf Miring </I>
<U> Huruf Bergaris Bawah </U>
<S> Huruf Coret </S>

Berikut kodingan HTMLnya

<html>
<head>
<title>format halaman Text </title>
</head>
<body>
<B> Huruf Tebal</B>
<I> Huruf Miring </I>
<U> Huruf Bergaris Bawah </U>
<S> Huruf Coret </S>
</body>
</html>

Copy ke notepad kemudian Save As dengan nama tebal.html , setelah itu Runing/jalan kan maka hasinya akan sebagai berikut ini

 Lihat Mudah bukan , silahkan di praktekan semoga bermanfaat Sampai jumpa di tutorial selanjutnya , tutorial selanjutnya akan membahas Membuat Text Model Kimia , penasaran ikuti terus Golet Ilmu .

Baca Juga :

  1.  Pengenalan Word Wide Web (WWW)
  2.  Mengenal Script HTML Dasar 
  3.  Dasar Membuat Warna text dan Background pada Halaman Web

08 May 2019

Dasar Membuat Warna text dan Background pada Halaman Web

Untuk membuat pendeklarasian warna latar belakang atau background halaman pada halaman web . pendeklarasian tersebut dapat dilakukan dengan atribut di dalam Tag <BODY> sehingga dapat mempengaruhi terhadap semua halaman web yang dibuat.

Beberapa contoh Atribut yang digunakan didalam Tag BODY sebagai berikut

Berikut ini contoh pendeklarasian warna hijau pada Bacground

1. Membuat Bacground warna hijau
<html>
<head>

<title> Contoh bacground akan tampil hijau</title>
</head>
<body bgcolor="green">

pewarnaan dengan warna hijau di halaman

</body>
</html>

setelah di tulis save dengan background hijau.html, kemudian di buka file tersebut maka akan tampil hasil berikut ini seluruh bacground berubah menjadi hijau



2. Membuat Bacground bergambar Monas Full

<html>
<head>
    <title>Bacground Monas </title>
    <style>
        body{
            background-image:url(gambarmonas.jpg);
            background-size:cover;
            background-attachment: fixed;
        }
        p{
            color:white;
        }
    </style>
</head>
<body>
    <p>Ini contoh web dengan background full screen gambar monas.</p>
</body>
</html>


Copy saja code di atas kemudian simpan dengan nama monas.html dan simpan 1 folder dengan gambar gambarmonas.jpg setelah itu jalankan monas.htmlnya maka akan tampil bacground monas full seperti berikut 


3.  Membuat Warna pada Text
Jika dalam halaman secara standar akan menampilkan latar belakang berwarna putih , dan tex berwarna hitam untuk dapat mengubah nya menjadi warna yang di inginkan berikut kodenya di bawah ini

  <html>
<head>

<title> Contoh text berwarna biru</title>
</head>

<body text="blue">

text berwarna biru coba lihat

</body>
</html>


langakahnya Copy kode di atas di notepad kemudian simpan dengan nama textbiru.html lalu jalankan maka akan tampil seperti berikut ini



 Demikian Tutorial yang sederhana semoga bermanfaat sampai jumpa di tutorial Selanjutnya 

Baca Juga :  
  1.  Pengenalan Word Wide Web (WWW)
  2.  Mengenal Script HTML Dasar

06 May 2019

Mengenal Script HTML Dasar

HTML ( Hyper Text Markup Language), merupakan sebuah bahasa Scripting yang berguna untuk menuliskan halaman web. Pada halaman web, HTML di jadikan sebagai Bahasa Script dasar yang berjalan bersama berbagai bahasa Scripting pemrograman lainnya.

Karena HTML hanyalah sebuah kode Scripting dan bukan merupakan program kompiler maka dapat menuliskan semu kode kode program menggunakan Editor yang and miliki misalnya Dreamwiver, Note Pad dan lain sebagainya.

Sintaks Dasar HTML 
HTML memiliki beberapa aturan dalam penulisannya yang kesemuanya harus di penuhi dalam menulisnya. sehingga seorang progrmer dapat konsisten dalam hal penulisan semua Tag-Tag HTML. 

HTML memiliki beberapa sintaks dasar yang hampir mirip dengan semua permrograman baik yang berbasis Web maupun Visual.

Sebagai Contoh pemrograman Web PHP kita mengenal tanda <?php merupakan awalan dan setelah itu isi kemudian baru berakhir di tutup dengan ?>.

     1. Tag HTML

Tag tersebut adalah <html>, dengan sintak penuliannya

<html> ....isi Web...</html>

     2. Tag Head

Tag Head berfungsi untuk mendefinisikan judul web adalah Tag Title yang dalam penulisannya sebagai berikut
<head>
<title>...judul web...</title>
</head>

Selain Title, Tag Head juga memiliki elemen yang berguna untuk memberikan informasi yang berhubungan dengan halaman web tersebut adalah META dengan penggunaan Seperti berikut:

<META Atribut = "Value">

 contoh, penggunaan Meta di dalam aplikasi Web yang berkaitan dengan programmernya.

<meta name="programmer" content="golet Ilmu">

Atau

<meta http-equiv="expires" content="wed, 14 mei 2019 16:30:gmt">

Dari Tag diatas kita peroleh keterangan bahwa program tersebut di buat oleh programer bernama Gole Ilmu, dan di buat pada bulan Mei 2019, Jam 04.30

    3. Script Yang Pertama
Semua Skript yang dimiliki PHP, maupun HTML dapat menggunakan Editor baik yang berupa WYSIWYG( What You See Is What You Get) Seperti Dreamweaver, Front Page maupun Editor yang mendukung hanya text saja.

Apabila menggunakan Text editor Notepad pada windows maka satu hal yang harus diingat adalah menentukan Type File pada saat menyimpan , anda harus memilih all File agar data tidak di anggap sebagai text yang berektensi txt. selain itu harus menentukan Extensi yang digunakan HTM, atau HTML.

Contohnya bisa lihat gambar berikut


Kemudian setelah membuat Tag di atas di simpan seperti gambar di bawah ini


lihat panah File name harus htm/html dan Save as Type pilih All Files

Tampilan dari Script di atas setelah di buatdan di buka di web maka  akan tampil sebagai berikut


Demikian Penjelasan dasar dari Mengenal Script HTML yang dapat Golet Ilmu bagikan Semoga bermanfaat.

Baca JUga :
  1.  Pengenalan Word Wide Web (WWW)
  2.  Dasar Membuat warna Text dan Bacground pada Halaman web

02 May 2019

Pengenalan Word Wide Web (WWW)

WWW atau Word Wide Web (Jaringan dunia luas) adalah sebuah bagian dari internet yang sangat terkenal dunia internet . dengan adanya WWW seorang pengguna dapat menampilkan sebuah halaman Virtual yang di sebut dengan website.

WWW di lihat dari kerjanya dapat di bagi menjadi komponen berikut :

1. Protocol : Sebuah media yang di standarkan untuk dapat mengakses komputer di dalam sebuah jaringan , Halaman yang dapat adalah halaman Web Site. WWW memiliki setandar protocol yang 
bernama HTTP ( Hypertext Transfer Protocol). Dengan protokol ini sebuah halaman yang ada di
dalam komputer jaringan dapat dibuka dan di akses.

2. Address : alamat yang berkaitan dengan penamaan sebuah komputer di dalam jaringan , alamat ini 
sebenarnya merupakan sebuah Nomor yang dimiliki sebuah komputer yang sering disebut dengan 
nomor IP, Dengan perkembangan Zaman akhirnya dibentuklah metode baru yang bernama Domain Name sehingga alamat IP tersebut di gantikan dengan sebuah URL (Uniform Resouce 
Locator) Yang berkaitan dengan nama suatu website misal , http;//www.goletilmu.xyz

3. HTML : HTML (Hypertext Markup Language) , sebuah bahasa Scripting yang dapat diakses pada 
setiap komputer pengakses (Client).

Dari Beberapa komponen diatas dapat di jelaskan dengan gambar berikut ini


dari gambar diatas dapat di bagi menjadi beberpa bentuk lagi yaitu :

http : protocol yang digunakan untuk mendapatkan informasi pada server www

ftp  : Protocol yang digunakan untuk mendapatkan informasi pada server ftp

file  : Protocol yang digunakan untuk mendapatkan informasi pada sistem lokal

mailto : Protocol yang digunakan untuk mendapatkan link ke pelayanan email server misalnya 
             http://mail.yahoo.com

news : Protocol yang digunakan untuk mendapatkan link ke pelayanan newsgroup

telnet : Protocol yang digunakan untuk mendapatkan link ke pelayanan telnet.

Baca Juga :
  1. Mengenal Script HTML Dasar
  2. Dasar Membuat Warna text  dan Background pada Halaman Web



06 March 2019

Cara Membuat Tulisan Berjalan (Marquee) yang Sering kita lihat di Media


Kadang kita sering lihat saat berkunjung ke sebuah website layar Tv atau media sosial lainnya ada sebuah tulisan yang berjalan seperti Selamat datang dan sebagainya dalam sebuah blog di kenal dengan nama Marquee karena menggunakan kode HTML Marquee

Lantas bagaimana cara membuatnya , berikut ini Golet Ilmu berbagi cara membuatnya
bahan dasarnya kode berikut

1.<marquee>SELAMAT DATANG </marquee>

 hasilnya "SELAMAT DATANG "

2. Tulisan Berjalan daru kiri ke kanan

 <marquee direction ="right">SELAMAT DATANG </marquee>

hasilnya " SELAMAT DATANG "

3. Tulisan Berjalan dari Atas kebawah

  <marquee direction ="down">SELAMAT DATANG </marquee>

hasilnya" SELAMAT DATANG "

4. Tulisan Berjalan dari bawah ke atas

   <marquee direction ="up">SELAMAT DATANG </marquee>

hasilnya"SELAMAT DATANG "

Nah lantas bagaimana kalau ingin membuatnya caranya sebagai berikut :

a. Memasang kode di Postingan ( seperti yang Golet Ilmu buat)
  • pada postingan klik HTML
  • Copy Code yang berwarna merah tersebut (untuk yang SELAMAT DATANG ) bisa di rubah terserah sobat
  • klik kode Compose untuk melanjutkan postingan kemudian pertinjau lalu publikasikan kalau sudah berjalan 
b. Memasang Kode di Widget
  • Buka tata letak
  • Klik tambahkan Gadget
  • Pilih Gadget HTML/Javascript
  • masukan kode marquee lalu simpan
c. Memasang Kode di dalam Template di blog
  • Lebih dulu Codenya di Parse karena kalau tidak di parse biasanya eror (Cari Parse saja di google  karena banyak website yang menyediakan parse HTML
  • Klik HTML
  • Masukan kode dimana saja sesuai selera
  • lalu simpan
Demikian tip dan trik bagaimana cara membuat Marquee di blogmungkin masih banyak lagi yang bisa di kembangkan lebih dari yang Golet Ilmu bagikan , satu kata saja semoga bermanfaat bagi pembaca dan terima kasih