Dimensi TutupBotol: HTML

Showing posts with label HTML. Show all posts

Thursday, June 2, 2016

Equation and Fraction Using Pure HTML

The first equation that we will gonna make :

y = A sin ω

(

t -

)

= A sin

(

ωt -

)

Here is it's HTML Code :

<table>
      <tbody>        
          <td>y = A sin &omega;</td>
          <td style="font-size:200%">(</td>
          <td>t -</td>
          <td>
             <table>
             <tr><td style="border-bottom:solid 1px black">x</td></tr>
             <tr><td>v</td></tr>
             </table>
          </td>
          <td style="font-size:200%">)</td>
   <td> = A sin </td>
   <td style="font-size:200%">(</td>
   <td>&omega;t -</td>
   <td>
     <table>
             <tr><td style="border-bottom:solid 1px black">&omega;</td></tr>
             <tr><td>v</td></tr>
            </table>
   </td>
   <td> x </td>
   <td style="font-size:200%">)</td>
      </tbody>
</table>

Next....... Persamaan Cepat Rambat Gelombang :

Dalam dawai ⇒ v =

√

ρA

Here is the HTML code :

<table cellpadding="0" cellspacing="0" >
 <tbody>
   <td> Dalam dawai &rArr; &nbsp;v =  </td>
   <td style="font-size:250%">&radic;</td>
   <td> 
 <table style="border-top-color: black; border-top-style: solid; border-top-width: 1px;">
             <tr><td style="border-bottom:solid 1px black">F</td></tr>
             <tr><td>&mu;</td></tr>
         </table>
    </td>  
    <td>&nbsp;&nbsp; = </td>
    <td style="font-size:250%">&radic;</td>
    <td> 
 <table style="border-top-color: black; border-top-style: solid; border-top-width: 1px;">
             <tr><td style="border-bottom:solid 1px black">F<i>l</i></td></tr>
             <tr><td>&mu;</td></tr>
        </table>
     </td>
     <td>&nbsp;&nbsp; = </td>
     <td style="font-size:250%">&radic;</td>
     <td> 
 <table style="border-top-color: black; border-top-style: solid; border-top-width: 1px;">
             <tr><td align="center" style="border-bottom:solid 1px black">F</td></tr>
             <tr><td>&rho;A</td></tr>
         </table>
      </td>
    </tbody>
</table>

Neext....

This is just a test:

x² + 3x + 5

HTML Code :

<table>
<tr>
  <td><div style="float:left;">This is just a test: &nbsp;</div>
  </td>
  <td>
     <div style="float:left">
     <div style="border-bottom:1px solid;font-size:small;text-align:center;">x<sup>2</sup> + 3x + 5</div>
 <div style="font-size:small;text-align:center;">2x</div>
        </div>
    </td>
   </tr>
</table>

The last.....

r = √

x² + y²

HTML Code :

<table align="left" cellpadding="0" cellspacing="0" style="margin-bottom: 0.5em; margin-top: 0.5em; text-align: center;">
<tbody>
     <tr>
 <td align="right" nowrap="nowrap"><i>r</i>&nbsp;=&nbsp;<span style="font-size: 24px;">&radic;</span>
 </td>
 <td nowrap="nowrap" style="border-top-color: black; border-top-style: solid; border-top-width: 1px;">&nbsp;<i>x</i><sup>2</sup>&nbsp;+&nbsp;<i>y</i><sup>2</sup>
 </td>
 </tr>
</tbody>
</table>

Saturday, April 30, 2016

HTS Mission 4

Okiee... disini kita akan ngereoute kiriman email, sehingga passwordnya bisa ketangkep :D

Naah...sekarang klik kanan di pagenya terus pilih "Inspect" :

Terus pilih yang ditunjukin panah biru dibawah, terus klik yang tombol dalam kotak biru juga kyk gini :

Tar jadi kyk gini :

Naah... kita liad disebelah kanan ada email... jadi pas "Send password to Sam" itu diklik, dia akan otomatis ngirim passwordnya email Sam,,, so biar passwordnya dikirim ke kita, ganti ajjah passwordnya sesuai email kita... Jadi double klik yang email sam itu :

abis double clik masukin email kita, terus tekan enter....

Naaah... abis itu tekan button "Send password to sam" lagi...

Daaaan..... tadaaaa...

Terus tar liad diemail...

tuuuh... dah kliatan passwordnya.... tinggal dimasukin lagi dibagian kotak password terus tekan submit... :)

Siiip... yang level 4 passed... :D

Friday, April 29, 2016

HTS Mission 3

Sooo... di mission 3 ini kita tetep masukin password... :v

mmm... sama kyk sebelumnya, kita view page sourcenya terus cari yang keyword password, tar dapatnya yg ini :

Naaah...perhatiin yang kotak merah... dari situ kita bisa tau klu source webpagenya itu ada di ...../basic/3/index.php,,, naah... terus liad yang kotak ijo {yg ditunjuk panah}, itu adalah lokasi file password yang kita pengen cari... :v... sooo.. tambain alamat url {yang kotak merah paling atas} dibelakangnya dengan ...basic/3/password.php. Hasilnya kyk gini :

Naaah... itu dia passwordnya :v

Sooo tinggal dikopi terus dimasukin lagi ke halaman utamaa...daaan....

Yeeeei... yang ketiga udaah... :D

HTS Mission 1

Okie disini kita akan masukin password di box ini :

Meeeh... itu dibilangin idiot test... sooo... emg sangat mudah wkwkkw... :v
Tinggal view source code webnya terus dapat yg ini :

Tinggal masukin..... terus hantam submit... daaan....

Hhohoho... Congratz... :v :v :v

Next Mission

Friday, October 30, 2015

Konfigurasi TRACE di ASP.NET Web Services

Sebagaimana diketahui bahwa TRACE di aplikasi-aplikasi ASP.NET Web harus dikonfigurasi manual biar hasil TRACEnya bisa muncul di field output. Caranya tinggal buka Web.Config

Terus masukin konfigurasi berikut:

Contoh penggunaannya :

Dan hasilnya.............

Wednesday, October 7, 2015

Animasi sederhana part 2 - CSS

Disini dilanjutin maenan animasi untuk CSS yang sebelumnya ada di sini. Nah... disini kita akan melihat bagian2 lain dari animasi di CSS ini.... okie... tampilan kode yang pertama seperti di bawah:

Kodenya ampir sama kyk yang dipostingan sebelumnya, disini yang beda plng yang line 10, 11, dan 18. Nah klu yang line 10 itu jelas itu nentuin arah nilainya bisa "normal", sm "alternate", terus yang 11 itu tipe-tipe style gerakan animasinya, tar kita coba satu-satu digimana efek2nya klu pake tipe yang laen, terus yang line 18, itu ukuran awalnya, dan diline 26 itu ukuran akhir. Nah biar jelas hasilnya seperti ini ehehehe... :D

Terus... Hisoka nambain yang ini "margin:300 auto;" so:

Hasilnya :

yaah.... seperti namanya margin itu ngubah2 posisi marginnya ehehehe... :D silahkan dioprek2 sendiri nilai2nya.... :D terus ditambain "border-radius: 100%;" seperti terlihat di bawah :

Di kode itu 0% border-radiusnya 100% brti dibagian awal jadi bulat terus diakhir2 jadi kotak, soalnya dibagian akhir (yang di 100%) belum ditambain border-radius makanya tampilannya adalah kotak seperti terlihat di bawah :

Jadi klu misalkan kita tambain border-radius: 100% dibagian akhir tar ujung2nya semuanya bulat...

Berikutnya kita ganti directionnya menjadi "normal" :

Daaan...perubahannya....

Wwkwkwkw.... bagusan yang "alternate" yaah... jadi silahkan balikin lagi ke alternate... terus yang diganti berikutnya adalah timing-functionnya, sebelumnya timing-function itu ada beberapa tipe yang bisa dipake misalnya ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1,x2,x3,x4) {cubic-bezier(0.5, 0.2, 0.3, 1.0);}... eeemmm... nyobain yang mana yaaah...! coba yang linear dl.... jadi silahkan diganti ke "linear"

Efeknya

Terus kita coba yang ease-in-out :

Eeeeh.... kekna g' trll jauh bedanya ahahaha.... berikutnya yang cubic-bezier(0.5, 0.7, 0.8, 1.0); daaan ini yang terakhir... jadi dikasih liad kode lengkapnya ajjah seperti di bawah :

Efeknya adalaaaaah....

Yaaapzzz... cukup demikian yang part 2... moga bisa ngeliad efek2 tiap fitur klu diubah... :-)

Tuesday, October 6, 2015

Animasi Sederhana menggunakan CSS (kotak)

Okiee... Ummm... animasi yang dibuat disini hanya di test di google chrome, jadi untuk browser lain g' tau jalan atw tidak eheheh... :D
Okiee... potongan source codenya yang belum jadi seperti terlihat di bawah :

Hasilnya :

Mari kita tinjau kode yang belom selese di atas,,,bari 6 & 7 itu masing-masing nentuin lebar dan panjang div elementnya, terus line 8 itu jelas nentuin warna backgroundya, terus line 10 itu nama animasinya yang diload dari baris 15-17, trs line 11 itu durasi animasinya dan baris 12 itu iterasinya infinite.
Naaah... yang line 15 ini yang jadi inti animasi kita, 0% itu mksndya pada kondisi animasinya berjalan 0% atau pertama kali elementnya berada di kiri atas dengan warna biru, trs pas udh 12% bergerak ke kanan sambil berubah warna menjadi merah... :D :D :D
Okieee... Mari kita tambahkan progress berikutnya misalkan di kondisi 25% elementnya bergereak ke kanan terus sambil berubah warna menjadi kuning... kodenya :

Hasilnya :

Okiee...sampe sini moga2 dapat sensenya dibagian animasi, jadi terlihat perubahannya dibagian @keyframes ajjah... :D
Naah... trs @keyframesnya dibuat menjadi 100%, dan gerakannya dibuat menjadi kotak. Jadi dari kiri menuju ke kanan, terus ke bawah, terus mengarah ke kiri, ke atas dan kembali ke tempat semula eheheh... Contohnya seperti terlihat di bawah :

Eeehm... disini animation-duration menjadi 9 seconds,,trs tambahan kode dari 25% menjadi 100%... daaan... hasilnya adalaaaaah......

Monday, October 5, 2015

Layering in CSS

Kode simpelnya kyk gini :

Hasilnya :

Ummm... jadi yang nentuin layer-layernya tuh z-indexnya,,, terus klu layer 1 itu paling bawah...alias bakalan tertutupi oleh layer yang paling tinggi nomornya...trs yang prl diperhatiin juga adalah position:relativenya daan top: xxxnya....yaaap... silahkan dicoba2 sendiri untuk variabel2 yang lain trs liad hasil perubahannya... eheheh... :D :D :D

Tipe-Tipe Kursor-CSS

Source code :

Hasil :

*Yaaaaah...penampakan mousenya g' bisa dicapture lewat printscreen hohoho... :D

CSS-Image.... :D

Source codenya kayak gini :

Hahaha... source codenya dikit banget... okieee... yang line 7 itu nentuin besar garis ditepi imagenya,
trs line 8 warna garisnya blue,
line 9 ngebuat imagenya ngisi semua ruangan di browser
line 10 ngebuat imagenya jadi transparant..
line 11 lokasi imagenya ada difolder img sprti terlihat di bawah:

Daaaan.... hasilnya adalaaaaah.....

Friday, August 21, 2015

Belajar Dasar HTML - Pengantar

Okieee... Langsung ajjah.... Di sini kita akan belajar HTML dari dasar lagi hehehe.. sekalian ngereview pelajaran sekitar 7 atw 8 tahun yang lalu eeeew... Ummm... Stuktur dasar HTML seperti terlihat di bawah, silahkan diketik dalam notepad,

setelah itu disave dengan format .html seperti terlihat di bawah :

Stelah itu double klik filenya, atau buka dengan chrome atau firefox

Yaaapzzz... Moga satu contoh itu bisa ngasih sedikit sense tentang HTML :D. Secara umum HTML memiliki beberapa bagian dasar sebagai berikut :
1.Tag
Tag adalah teks khusus (markup) berupa dua karakter kurung siku "<" dan ">", contohnya <body> berarti adalah tag body. Umumnya tag ini ditulis secara perpasangan, yaitu tag pembuka dan tag penutup. Contoh tag pembuka <body> dan tag penutupunya </body>, jadi ditag penutup itu ada slashnya "/

2. Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Contohnya elemet adalah
<title>
isi
</title>
Dan perlu digarisbawahi, klu element-element HTML itu tidak boleh ditulis saling tumpang tindih kyak misalkan

Yang bener kyk gini :

3. Attribute
Attribute itu nunjukin properti dari suatu element HTML. Contohnya kyk <body bgcolor="black" text="red">. Nah...bgcolor itu nama atributenya dan "black" itu nilai atributenya.
Daaan... Umm... bgcolor itu maksudnya background color, jadi warna backgroundnya layar jadi item, terus text itu warna textnya, terus ada juga attribute kyk link, alink, vlink, dsb.... :-). Contohnya misalkan kita buat kode HTML kyk di bawah :

Hasilnya :

Heeeem... beberapa kombinasi warna yang bisa digunakan yaitu aqua,black,blue,fuchsia,gray,green,lime,marron,navy,olive,purple,red,silver,teal,white,yellow.
Terus kita juga dapat nambain background yang bergambar. Pertama-tama siapkan gambarnya, terus simpen gambar tersebut didirectory yang sama dengan file htmlnya, terus masukin kodenya

Daaan hasilnya :

Dari kode diatas, terlihat bahwa background prioritasnya lebih tinggi daripada bgcolor soalnya klu mereka ditaro dua-duanya dalam kode html, justru yang dipake adalah yang background bukan yang bgcolor hehehe... :-)
Cukup sekian dulu untuk hari ini... :-)

Semoga bermanfaat...