ARIYADI ART: Agustus 2018

Home / Archived For Agustus 2018

Penggunaan HTML dengan Cascading Style Sheet (CSS) - Praktikum 9

Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan dari post sebelumnya yaitu mengenai Penggunaan CSS dalam tag - tag HTML yang sudah kita gunakan sebelumnya. Sebelum masuk ke codingannya, Apakah anda sudah tahu apa itu CSS? Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.

Manfaat CSS yaitu :

Kode HTML menjadi lebih sederhana dan lebih mudah diatur.

Ukuran file menjadi lebih kecil sehingga load file lebih cepat.

Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS saja.

Dapat berkolaborasi dengan JavaScript.

Dapat digunakan dalam hampir semua jenis web browser.

Dalam Pengcodingan CSS terdapat 3 tipe yaitu Inline(didalam file HTML,pada masing - masing tag), Embedded(didalam file HTML,pada tag style yang berada di tag head), dan External(diluar file HTML, yaitu dalam file .css)

Untuk Lebih jelasnya berikut Codingan beserta hasilnya :

Inline CSS

Nah yang termasuk CSS yaitu ada di tag p bagian style="color:Teal; font-family:Impact; font-size:24px; text-shadow:12px 2px 5px fuchsia;". color untuk warna font, font-family untuk beberapa jenis huruf yang bisa digunakan, font-size untuk ukuran font, text-shadow untuk membuat bayangan dari sebuah tulisan.

Embedded CSS 1

Nah, disini kenapa disebut Embedded CSS, yaitu karena bagian CSS ada pada tag <style></style> yang disimpan dalam bagian head. Untuk Embedded CSS, dan External CSS, kita disarankan membuat class/id untuk dipanggil pada saat Styling. Dengan cara memakai <div class="" id=""></div> Jika Class maka menggunakan .nama dan id maka menggunakan #nama seperti contoh diatas. Disini saya memakai padding untuk mengatur ukuran/jarak, dan border untuk garis tepi.

Embedded CSS 2

Nah, ini juga sama Embedded CSS, pada codingan ini kita juga bisa menulis selector dengan cara tag#namaid atau tag.namaclass contohnya : input#tombol.

External CSS 1
HTML

CSS

Nah, untuk yang external css ini anda harus membuat file html dan file css dalam 1 folder. Juga harus memanggil file css di htmlnya yaitu dengan cara : <link rel="stylesheet" href="styleexternal.css" type="text/css">. Disini saya memakai property width untuk mengatur lebar, height untuk mengatur panjang/tinggi, float untuk mengatur tulisan dimana tulisan bisa memanjang ke kiri.

External CSS 1
HTML

CSS

Nah, disini saya menggunakan property letter-spacing untuk mengatur spasi antara huruf dalam sebuah kata. Valuenya pun bisa cm ataupun px.

Embedded Heading CSS

Nah, disini untuk membuktikan bahwa value color bisa berbentuk hexsa, RGB, dan nama warnanya, seperti contoh diatas.

Text Decoration External CSS
HTML

Property yang digunakan word-spacing untuk mengatur spasi antar kata text-decoration untuk mengatur dekorasi teks : overline untuk garis diatas teks, underline untuk garis dibawah teks, line-throught untuk garis mencoret teks.

Embedded CSS - Text Align and Transform

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Aip Ariyadi - XI RPL 3 - Format Text</title>
 <style type="text/css">
  p{
   text-indent: 2cm;
   text-align: justify;
  }
  p.kanan {
   text-align: right; 
   color: chartreuse;
  }
  p#besar{
   text-transform: uppercase;
  }
  p#kecil{
   text-transform: lowercase;
  }
  p#kapital{
   text-transform: capitalize;
  }
 </style>
</head>
<body>
 <p>
Dengan text indent.
  Form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting(misalkan PHP, JSP) ataupun client-side scripting (Javascript).
 </p>
<p class="kanan">
Form adalah salah satu bentuk halaman web yang digunakan untuk menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman web, baik secara server side scripting(misalkan PHP, JSP) ataupun client-side
 </p>
<p id="besar">
pengubahan menjadi huruf Besar (Kapital)</p>
<p id="kecil">
PENGUBAHAN MENJADI HURUF KECIL</p>
<p id="kapital">
huruf kapital pada setiap suku kata</p>
</body>
</html>

Property yang digunakan : text-indent untuk membuat jorok ke dalam pada awal paragraf, text-align untuk mengatur tulisan agar rata kanan,kiri, atau sama rata, text-transform untuk mengatur/mengubah huruf agar besar/kecil.

Story Prambanan Temple - External CSS
HTML

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Roro Jongrang And Bandung Bondowoso</title>
 <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
 <h1>
Roro Jongrang And Bandung Bondowoso<br>Prambanan Temple</h1>
<p id="versi">
Sumber dari<br>BM BOZZMAG</p>
<div class="Gambar">
  <img src="vector.jpg" alt="Ini teh Gambar" width="170px">
 </div>
<div class="Inggris">
  <p id="text">
Long time ago, there was a kingdom named Prambanan. All the people of Prambanan lived peacefully. But then, Prambanan kingdom was attacked and occupied by the Pengging kingdom. Prambanan then was ruled by Bandung Bondowoso of Pengging kingdom. He was a mean king. He also had great supernatural power. His soldiers were not only humans, but also genies.</p>
<p id="text">
The king of Prambanan had a beautiful daughter named Loro Jonggrang. Bandung Bondowoso fell in love with her and wanted to marry her. “You’re very beautiful. Would you be my queen?” asked Bandung Bondowoso. Loro Jonggrang was shocked. She didn’t like Bandung Bondowoso because he was a mean person. She wanted to refuse, but she afraid that Bandung Bondowoso would be angry and endangered the people of Prambanan. Then, she came up with a plan. “If you want to marry me, you have to build a thousand temples for me in just one night,” said Loro Jonggrang. “What? That’s impossible!” said Bandung Bondowoso. But he did not give up. He consulted with his advisor. “Your Majesty can asked the genies to help built the temples,” said the advisor.</p>
<p id="text">
So, Bandung Bondowoso summoned his entire genies soldier and commanded them to help him built a thousand temples. The genies worked in unbelievable speed. Meanwhile, Loro Jonggrang heard from her servant that the building of a thousand temples was almost finished. She was so worried. But again, she came up with a great idea. She asked all of her servants to help her. “Please prepare a lot of straw and mortar. Please hurry up!” said Loro Jonggrang. “Burn the straw and make some noise pounding the mortar, quickly.” All those servants did what Loro Jonggrang ordered them; burning straw and pounding the mortar, making the genies think that the sun is going to rise.</p>
<p id="text">
“It’s already dawn. We have to go,” said the leader of the genies to Bandung Bondowoso. All the genies immediately stopped their work and ran for cover from the sun, which they afraid of. They didn’t know that the light was from the fire that burning the straw, not from the sun.</p>
<p id="text">
Bandung Bondowoso can’t stop the genies from leaving. He was angry. He knew Loro Jonggrang had just tricked him. “You cannot fool me, Loro Jonggrang. I already have 999 temples. I just need one more temple. Now, I will make you the one-thousandth temple.” He pointed his finger to Loro Jonggrang and said some mantras. Magically, Loro Jonggrang’s body turned into stone. Until now, the temple is still standing in Prambanan area, Central Java. And the temple is called Loro Jonggrang temple.</p>
</div>
</body>
</html>

CSS

Nah, diatas merupakan contoh penggunaan tag - tag HTML beserta beberapa property CSS. Property tambahannya yaitu margin-top, margin-bottom, margin-left, margin-right untuk mengatur jarak atas, bawah, kiri, kanan.

Oke segitu saja postingan dari saya untuk kali ini. Mohon maaf bila ada kesalahan, semoga bermanfaat untuk anda. Apabila ada komentar / masukan bisa diisi di kolom komentar. Sampai jumpa di postingan berikutnya dan jika menurut anda Postingan ini bermanfaat bisa diShare ke teman - teman anda.

😃Selamat Bercoding

Pada Agustus 30, 2018 Komentar

Menyajikan Komponen Entri Teks (Form) - Praktikum 8

Technology

Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan dari post sebelumnya yaitu mengenai Tag - tag di HTML. Kali ini mengenai tentang Bagaimana cara Menyajikan Entri Teks atau yang biasa dikenal yaitu form/formulir di sebuah Web menggunakan HTML. Untuk lebih jelasnya langsung saja ke tutorialnya.

Text Area
Text Area digunakkan untuk sebuah tulisan dengan area yang khusus dan text area ini ada beberapa tipe. Contoh Codingan dan Hasilnya :

Nah, untuk membuat text area kita gunakan <textarea></textarea> kita juga mengatur colspan dan rowspan nya untuk mengatur lebar dari text area tersebut. Contoh berikutnya :

Seperti yang saya sebutkan sebelumnya, untuk codingan diatas itu untuk membuktikan/membedakan beberapa textarea menggunakan colspan. Codingan berikutnya :

Nah diatas salah satu tipe dari text area yaitu read only(hanya bisa dibaca) artinya tulisan tidak dapat diubah namun dapat disalin dan bisa juga kita kasih nama dengan name="". Codingan berikutnya :

Nah diatas juga salah satu tipe dari text area yaitu disabled artinya tulisan tidak dapat diubah dan tidak dapat disalin jadi hanya bisa dilihat saja.Input Codingan berikutnya :

Nah diatas merupakan textarea untuk password, jadi saat kita mengisi di area tersebut maka masukan kita otomatis disembunyikan. Dan kita juga bisa mengatur batas huruf dari masukan user yaitu dengan cara menambahkan attribute maxlength="". Codingan berikutnya :

Nah diatas juga masih dengan textarea yaitu tag <input> dan tag ini juga da beberapa tipe ada hidden untuk menyembunyikan teaxtarea tersebut, submit digunakan untuk tombol dimana kita akan mengirimkan data yang sudah diisi sebelumnya dan ada attribute value="" yang fungsinya untuk mengatur tulisan pada tombol tersebut. Codingan berikutnya :

Nah kalo yang ini merupakan codingan sebelumnya. Dan tipe hiiden diganti dengan textarea yang juga menggunakan attribute value="". Codingan berikutnya :

Nah codingan diatas contoh penggunaan tipe input lainnya yaitu tipe file, fungsinya untuk mengupload file ke sebuah web dan ada attribute accept="" yang fungsinya yaitu untuk merincikan bahwa yang bisa di upload yaitu jenis file tertentu. Codingan berikutnya :

Nah, codingan diatas contoh penggunaan tipe input lainnya yaitu tipe radio, Biasanya digunakan untuk memilih satu pilihan pada beberapa pilihan lainnya. Codingan berikutnya :

Nah codingan diatas contoh penggunaan tipe input lainnya yaitu tipe checkbox, jika yang sebelumnya hanya bisa memilih satu pilihan. Untuk yang sekarang user bisa memilih beberapa pilihan dan yang sudah dipilih biasanya ditandai dengan tanda centang.Select and Datalist Codingan berikutnya :

Nah diatas merupakan contoh penggunaan dari select dan datalist, keduanya mempunyai fungsi yang sama yaitu untuk memilih tulisan yang sebelumnya sudah disediakan. Perbedaanya yaitu jika select awal tampilannya yaitu pilihan pertama. Sedangkan datalist tampilan pertamanya yaitu kosong. Didalam kedua tag tersebut terdapat tag lain untuk pilihannya yaitu tag <option>. Contoh tampilan formulir sederhana :

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Form</title>
</head>
<body bgcolor="#17d7cc">
  <form>
   <table>
<tr><th colspan="2"><p>
<center>
<b>PENDAFTARAN</b></center>
</p>
</th></tr>
<tr>
     <p>
<td>Nama Pengguna</td>
     <td> : <input type="text" name="name"></td></p>
</tr>
<tr>
     <p>
<td>Sandi</td>
      <td> : <input type="text" name="password"></td></p>
</tr>
<tr>
     <p>
<td>Jenis Kelamin</td>
     <td> : <input type="Radio" name="Pria">Pria
     <input type="Radio" name="Wanita">Wanita</td></p>
</tr>
<tr>
     <p>
<td>Tanggal Lahir</td>
      <td> : 
      <select name="TanggalLahir">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
      </select>
      <select name="BulanLahir">
       <option value="bulan1">Januari</option>
       <option value="bulan2">Februari</option>
       <option value="bulan3">Maret</option>
      </select>
      <select name="TahunLahir">
       <option value="2000">2000</option>
       <option value="2001">2001</option>
       <option value="2002">2002</option>
      </select>
      </td></p>
</tr>
<tr>
     <td></td>
     <td><input type="submit" value="Simpan">
         <input type="submit" value="Batal">
     </td>
    </tr>
</table>
</form>
</body>
</html>

Saya menggunakan tag table untuk mengatur agar lebih rapih tampilannya. Oh ya, ada beberapa source code diatas yang mungkin kurang lengkap terutama pada bagian textarea.

Oke segitu saja postingan dari saya untuk kali ini. Mohon maaf bila ada kesalahan, semoga bermanfaat untuk anda. Apabila ada komentar / masukan bisa diisi di kolom komentar. Sampai jumpa di postingan berikutnya dan jika menurut anda Postingan ini bermanfaat bisa diShare ke teman - teman anda.

😃Selamat Bercoding

Pada Agustus 21, 2018 Komentar

Menyajikan komponen Audio, Video & flash dengan HTML - Praktikum 7

Technology

Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan dari post sebelumnya yaitu mengenai Tag - tag di HTML. Kali ini mengenai tentang Bagaimana cara menampilkan/memutar lagu, video, dan flash(animasi) di sebuah Web menggunakan HTML. Untuk lebih jelasnya langsung saja ke tutorialnya.

Menampilkan/Memutar Audio

Selain menampilkan gambar di web, anda juga bisa menampilkan/memutar audio menggunakan sebuah tag di HTML. untuk lebih jelasnya, berikut Codingan dan Hasilnya :

Nah, tag yang digunakan untuk menampilkan sebuah audio yaitu tag <audio></audio> dan didalamnya ada tag<source>. Tag source berguna untuk memanggil sebuah file yang akan kita masukkan ke web. Namun tanpa tag source pun sebenarnya masih bisa menampilkan audio yaitu dengan cara menambahkan attribute src="" dalam tag audio. Anda juga bisa membuat audio tersebut auto play caranya yaitu :

Nah, untuk membuat audio auto play maka tag yang digunakan pun berbeda, yaitu dengan menggunakan tag <embed>. Disini juga anda bisa mengatur tinggi dan lebarnya.

2. Menyajikan Video

Anda juga dapat menampilkan video pada HTML yaitu dengan cara :

Nah, tag untuk menampilkan video yaitu <video></video> dan juga didalamnya ada tag source. Nah, sama seperti audio, tanpa tag source pun sebenarnya masih bisa menampilkan video yaitu dengan cara menambahkan attribute src="" dalam tag video. Oh iya anda juga bisa menggunakan attribute type="" yaitu untuk mendeskripsikan tipe file yang anda tampilkan. Anda juga dapat menampilkan video dengan thumbnail :

Maksud Video Thumbnail ini yaitu sebuah video dimana cover video tersebut dapat kita atur dengan sebuah gambar yang kita inginkan. caranya yaitu menambahkan attribute poster="".

3. Menampilkan file flash(.swf)

Anda juga dapat menampilkan file flash(biasanya game) pada HTML yaitu dengan cara :

Jadi, disini kita juga menggunakan tag embed untuk menampilkan file .swf
Disini juga saya mencoba mengkombinasikan seluruh tag di atas dan yang sudah dibahas di post sebelumnya. Berikut codingan dan hasilnya :

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - WebAudioVideo</title>
</head>
<body bgcolor="#17d7cc">
	<center>
	<font face="Dk Lemon Yellow Sun">
	<h1>
Content Creator Youtube</h1>
</font>
    </center>
<table width="100%" bgcolor="Purple">
<tr>
			<th colspan="2"><marquee behavior="" direction="">
			<font face="Monotype Corsiva" color="white" size="4">Selamat datang di Halaman Website kami</font>
			</marquee></th>
		</tr>
<tr>
			<td width="160" rowspan="3" valign="top" bgcolor="#993366">
			<img src="Media/KeryAstina.jpg" alt="foto" width="400px">
			</td >
			<td bgcolor="#993366" valign="top">
			<p>
<font face="Monotype Corsiva" color="white" size="4">
			Nama Populer         Kery Astina <br>
			Nama Lengkap         Kery Kartika Fajar <br>
			Tempat Lahir         Jakarta <br>
			Tanggal Lahir     9 Maret 1995 <br>
			Tempat Tinggal  Bandung <br>
			Profesi                        Youtuber, Selebgram <br>
			Salah Satu lagu Cover Saya : <audio controls>
			<source src="Audio/Kery Astina.mp3" type="audio/mpeg">
			Your browser does not support the audio element.
			</audio> <br> <br>
			This is My Video
			<video width="300" controls>
			<source src="Video/Parody Via Vallen - Sayang (Koplo  Bahasa Indonesia).mp4" type="video/mp4">
			Your browser does not support the video tag.
			</video>
			</font></p>
</td>
		</tr>
</table>
</body>
</html>

Nah, diatas merupakan hasilnya. Oh iya, disini saya menggunakan tag <marquee></marquee> untuk membuat tulisan berjalan. Untuk lebih memudahkan anda untuk membuat HTML dengan menampilkan sebuah file, alangkah baiknya anda membuat folder terlebih dahulu seperti :

Oke segitu saja postingan dari saya untuk kali ini. Mohon maaf bila ada kesalahan, semoga bermanfaat untuk anda. Apabila ada komentar / masukan bisa diisi di kolom komentar. Sampai jumpa di postingan berikutnya dan jika menurut anda Postingan ini bermanfaat bisa diShare ke teman - teman anda.

😃Selamat Bercoding

Pada Agustus 16, 2018 Komentar

Layout Web dengan Tabel HTMML - Praktikum 6

Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan dari post sebelumnya yaitu mengenai Tag - tag di HTML.
Nah, kali ini masih membahas seputar Tabel pada HTML, hanya saja sekarang kita akan membahas halaman web dengan Layout menggunakan tabel. Ada 4 jenis yang akan saya bahas yaitu :

Top Index

Top Index ini adalah sebuah layout/tampilan web(dengan menggunakan Tabel) yang memiliki daftar isi yang berada di atas content. Untuk lebih jelasnya berikut codingan dan hasilnya :

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Top Index</title>
</head>
<body bgcolor="#17d7cc">
 <form id="form1" name="form1" method="post" action="">
  <table width="800" height="542" border="1" align="center">
<tr>
    <td height="23" align="center" border color="#ffffff" bgcolor="#ffff00">
     <strong><font size="+5">Banner atau Iklan</font></strong>
    </td>
   </tr>
<tr>
    <td height="27" align="center" bgcolor="#ffcccc">
     <font color="#ff0000">Daftar isi atau navigasi</font>
    </td>
   </tr>
<tr>
    <td height="457" align="center" bgcolor="#ff66cc">
     <p>
Body atau contents(isi)</p>
<p>
<font color="#006600">Body atau contents(isi)</font></p>
<p>
<font color="#cc0000">Body atau contents(isi)</font></p>
<p>
<font color="#ffff00">Body atau contents(isi)</font></p>
<p>
<font color="#ff6633">Body atau contents(isi)</font></p>
</td>
   </tr>
<tr>
    <td height="23" align="center" bgcolor="#ccff99"><font>Info tambahan atau lain-lain</font></td>
   </tr>
</table>
</form>
</body>
</html>

Nah, diatas sama seperti post sebelumnya saya menggunakan beberapa atribut seperti width, height align, border, dll. Semua atribute itu pernah saya bahas di post sebelumnya. Mungkin, atribut barunya yaitu border color="" yaitu untuk mengatur warna dari border/garis pinggir pada tabel yang kita buat.

2. Bottom Index

Bottom Index ini adalah sebuah layout/tampilan web(dengan menggunakan Tabel) yang memiliki daftar isi yang berada di bawah content. Untuk lebih jelasnya berikut codingan dan hasilnya :

Sama seperti codingan yang pertama, codingan ini juga menggunakan atribut - atribut yang sudah digunakan sebelumnya. Bedanya codingan ini menggunakan tag <tr> sebanyak 3 buah, jika yang di codingan pertama menggunakan sebanyak 4 buah.

3. Left Index

Left Index ini adalah sebuah layout/tampilan web(dengan menggunakan Tabel) yang memiliki daftar isi yang berada di sebelah kanan & kiri content. Untuk lebih jelasnya berikut codingan dan hasilnya :

Sama seperti codingan yang sebelumnya, codingan ini juga menggunakan atribut - atribut yang sudah digunakan sebelumnya. Nah, jadi daftar isi diatas berada di sebelah kiri. Oh iya, pada font size disini saya mengisi +2, jadi anda bisa mengisi/menggantinya menjadi angka saja atau angka+(semisal +5, 5, 5+). Di Left Index ini menggunakan rowspan, dan valign juga.

4. Layout Split

Layout Split ini adalah sebuah layout/tampilan web(dengan menggunakan Tabel) yang memiliki daftar isi yang berada di sebelah kiri content. Untuk lebih jelasnya berikut codingan dan hasilnya :

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Left</title>
</head>
<body bgcolor="#17d7cc">
 <form id="form1" name="form1" method="post" action="">
  <table width="800" height="542" border="1" align="center">
<tr>
    <td width="15%" rowspan="2" align="center" bgcolor="#99cc99"><strong>Daftar Isi</strong></td>
    <td width="67%" height="23" align="center" bgcolor="#ffccff"><strong>Banner/Judul</strong></td>
    <td width="18%" rowspan="2" align="center" bgcolor="#99cc99"><strong>Daftar Isi</strong></td>
   </tr>
<tr>
    <td height="456" align="center" bgcolor="#cccccc">
     <p>
Body atau Content(isi)</p>
<p>
<font color="#006600">Body atau contents(isi)</font></p>
<p>
<font color="#cc0000">Body atau contents(isi)</font></p>
<p>
<font color="#ffff00">Body atau contents(isi)</font></p>
<p>
<font color="#990033">Body atau contents(isi)</font></p>
</td>
   </tr>
<tr>
    <td height="23" colspan="3" align="center">Lain - lain</td>
   </tr>
</table>
</form>
</body>
</html>

Sama seperti codingan yang sebelumnya, codingan ini juga menggunakan atribut - atribut yang sudah digunakan sebelumnya. Dan disini juga saya menggunakan colspan dan rowspan juga. Jadi intinya Layout Split ini menggunakan daftar isi yang mengapit content/body.

Agar lebih jelasnya disini saya kan membagikan/menampilkan layout weeb yang saya buat(hasil dari Left Index). Berikut codingan dan hasilnya :

<!DOCTYPE html>
<html>
<head>
 <title>Aip Ariyadi - XI RPL 3 - Table Index</title>
</head>
<body bgcolor="#cccccc">
 <form id="form1" name="form1" method="post" action="">
  <table width="800" height="542" align="center" cellspacing="1">
<tr> 
    <th width="160" rowspan="3" valign="top" bgcolor="#8f4364">
     <img src="Logo.jpg" alt="logo" width="180px">
     <p>
<a href="">Home</a></p>
<p>
<a href="">Profile</a></p>
<p>
<a href="">About Us</a></p>
<p>
<a href="">Blog</a></p>
<p>
<a href="">Contact Us</a></p>
</th>
    <th width="627" height="23" align="center" bgcolor="#329999">
     <strong><font color="#3399ff" size="+7" face="Altamonte Personal Use">Founder Google</font></strong>
    </th>
   </tr>
<tr>    
    <td height="176" align="center" valign="top" bgcolor="#b2d8d8">
     <font face="Nueva Std Cond">
     <p>
Pernakah kalian berpikir, Siapa yang membuat kita lebih mudah mencari informasi ? Ya, di zaman yang modern ini semua orang dapat mengakses informasi diseluruh dunia dengan mudah yaitu dengan berseluncur di internet. Saat kita browsing kita tentunya menggunakan <em>Search Engine</em>. Salah satu Search Engine yang sering kita gunakan yaitu <strong>Google</strong>. Siapa sih yang tidak tahu Google ? Tentunya semua orang dari kalangan anak kecil sampai kalangan orang Dewasa juga tau apa itu Google. Lantas siapa sih yang menemukan Google(Founder Google)? Uniknya penemu Google ada 2 orang, Siapa saja? Berikut akan saya ulas Siapakah Mereka.</p>
<p>
<h3>
Larry Page</h3>
<img src="LarryPage.jpg" alt="Error" width="400px" align="center">
      <br>
      <strong>Lawrence Edward "Larry" Page </strong>(lahir di Lansing, Michigan, 26 Maret 1973; umur 45 tahun) adalah salah satu pendiri dari mesin pencari internet Google bersama Sergey Brin. Larry Page dilahirkan di Lansing, Michigan, ayahnya Carl Page dan ibunya, Gloria, adalah seorang profesor Ph.D. di bidang Komputer Sains di Michigan State University. Page adalah seorang lulusan dari East Lansing High School. Page memperoleh gelar Bachelor of Science dalam teknik komputer dari Universitas Michigan dengan pujian dan seorang lulusan Master dari Universitas Stanford di inggris.
     </p>
<p>
Ketika menjadi seorang siswa di program Ph.D. ilmu komputer Universitas Stanford, Page bertemu Sergey Brin. Pada awalnya mereka merasa tidak cocok. Hal ini disebabkan karena perbedaan dari setiap topik yang mereka bicarakan. Namun, pada akhirnya mereka memiliki ketertarikan yang sama yaitu mengenai mesin pencari (search engine). Bersama mereka menjalankan mesin pencari Google, yang mulai beroperasi pada 1998. Google didasarkan pada teknologi PageRank yang telah dipatenkan, yang mendasarkan pada struktur link – link antar situs web untuk menentukan peringkat suatu situs tertentu. Page masih tetap on leave dari program Ph.D. Ketika di universitas, dia membuat mesin cetak inkjet dari potongan-potongan balok Lego. Page menjalankan Google sebagai presiden bersama dengan Brin sampai 2001, ketika mereka merekrut Eric Schmidt untuk menjadi ketua umum dan CEO Google. Page sekarang menjalankan Google sebagai tritunggal bersama dengan Brin dan Schmidt. Menurut Forbes, Page mempunyai perkiraan kekayaan bersih sebesar AS$12,8 miliar, membuatnya orang nomor 27 terkaya di dunia (satu tempat di belakang pendiri lain Google, Sergey Brin). Pada September 2005 dia dan pendiri Google lainnya, Sergey Brin, membeli sebuah pesawat penumpang yang sangat besar, sebuah Boeing 767, untuk penggunaan pribadi mereka.
     </p>
<p>
<h3>
Sergey Mikhailovich Brin</h3>
<img src="SergeyBrin.jpg" alt="error" width="400px" align="center">
      <br>
      <strong>Sergey Mikhailovich Brin (Bahasa Rusia: Сергей Михайлович Брин)</strong> (lahir di Moscow, Soviet Union, 21 Agustus 1973; umur 44 tahun) adalah seorang pengusaha Amerika . Lahir di Rusia, Brin mempelajari ilmu komputer dan matematika sebelum mendirikan Google dengan Larry Page. Brin adalah presiden teknologi pada Google dan mempunyai net worth perkiraan pada $18.7 miliar, yang membuatnya menjadi orang nomor 26 terkaya di dunia. Sergey Mikhailovich Brin lahir di Moskwa, Uni Soviet, dari sebuah keluarga Yahudi.Ayahnya yang bernama Mikhail Brin dan ibunya Evgenia Brin (née Krasnokutskaya) adalah ahli matematika lulusan Moscow State University. Pada tahun 1979, ketika Brin berumur 6 tahun, keluarganya pindah ke Amerika Serikat. Di sana, Brin didaftarkan di sekolah dasar Paint Branch Montossori, Adelphi, Maryland. Ayahnya, yang juga seorang profesor di departemen matematika University of Maryland berperan besar mengembangkan ketertarikan Brin pada matematika. Pada bulan September 1990, setelah lulus dari Eleanor Roosevelt High School, Brin diterima di University of Maryland, College Park. Di sana ia mengambil jurusan ilmu komputer dan matematika, dan berhasil mendapatkan gelar Bachelor of Science pada tahun 1993.Brin kemudian melanjutkan pendidikan ilmu komputernya di Stanford University melalui beasiswa dari National Science Foundation. Ia menerima gelar masternya pada bulan Agustus 1995.
      Brin juga memiliki gelar MBA dari IE Business School.
     </p>
<p>
Brin menunjukkan ketertarikannya pada Internet dan search engine (mesin pencari) tak lama setelah ia diterima di Stanford. Ia menulis banyak paper yang membahas tentang data-mining dan pattern extraction. Ia juga menulis software yang dapat mengubah TeX menjadi HTML untuk memudahkan tugas-tugasnya. Momen terpenting Brin di Stanford adalah ketika ia bertemu dengan Larry Page.Menurut rumor di Google, Page dan Brin "tidak saling menyukai ketika mereka pertama kali bertemu di pascasarjana ilmu komputer Stanford University pada 1995.Namun, mereka akhirnya menemukan bahwa mereka memiliki ketertarikan yang sama: mencari dan menemukan informasi yang relevan dari sekumpulan data yang besar. Bersama-sama, pasangan ini kemudian menulis sebuah karya berjudul "The Anatomy of a Large-Scale Hypertextual Web Search Engine" yang dianggap sebagai bibit bagi karier mereka.
     </p>
<p>
Pada bulan Mei 2007, Brin menikahi <em>Anne Wojcicki</em> di Kepulauan Bahama. Wojcicki adalah seorang analis bioteknologilulusan Yale University.Ia adalah pendiri 23andMe. Ibu Brin didiagnosis menderita Penyakit Parkinson. Pada tahun 2008, Brin mendonasikan banyak uangnya ke University of Maryland School of Medicine, tempat di mana ibunya dirawat.
     </p>
</font>
    </td>
   </tr>
<tr>
    <td height="30" align="center" bgcolor="#809791">
     <font face="DFPOP1-W9" size="+2">Aip Ariyadi - XI RPL 3</font>
    </td>
   </tr>
</table>
</form>
</body>
</html>

Sama seperti codingan yang sebelumnya, codingan ini juga menggunakan atribut - atribut yang sudah digunakan sebelumnya. Disini juga saya menggunaka tag <a> untuk menyisipkan link pada suatu text(ceritanya). Agar tampilannya lebih bangus jadi border saya hapus.

Oke segitu saja postingan dari saya untuk kali ini. Mohon maaf bila ada kesalahan, semoga bermanfaat untuk anda. Apabila ada komentar / masukan bisa diisi di kolom komentar. Sampai jumpa di postingan berikutnya dan jika menurut anda Postingan ini bermanfaat bisa diShare ke teman - teman anda.

😃Selamat Bercoding

Pada Agustus 13, 2018 Komentar

Penggunakan Tabel dan Spanning di HTML - Praktikum 5

Technology

Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan dari post sebelumnya yaitu mengenai Tag - tag di HTML.

Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam tabel, maka kita perlu menggunakan tag <table> </table>. Elemen tabel ada property <tr> (table row) dan didalamnya ada <th> (table heading) dan <td> (table data). Untuk lebih jelasnya Anda bisa lihat di tutorialnya berikut ini :
Pengenalan Tag Tabel

Nah diatas merupakan contoh penggunaan tag <table>, jadi tag <tr> itu baris ke pinggir. Jadi saat pengcodingan tabel kita harus fokus ke pinggir bukan ke bawah. Lalu gunanya border itu untuk garis pinggir/pemisah antar sel di tabel. cellspacing untuk spasi antar sel, cellpading untuk spasi didalam sel. Di dalam table juga kita bisa menggunkan bgcolor untuk mengatur warna tabel tersebut.
Tabel dengan colspan dan rowspan

Nah, diatas kita menggunakan atribute colspan (menggabungkan sel ke pinggir), rowspan (menggabungkan sel ke bawah), dan align (untuk meratakan tulisan di sel pada table). Jadi maksud dari colspan="3" itu adalah untuk menggabungkan 3 sel ke pinggir(jika di excel kita pakai merge & center).
Contoh Berikutnya :

Nah diatas merupakan contoh untuk mengatur ukuran/panjang sel yaitu dengan cara menggunakan width jadi untuk sel yang lebih panjang maka persentasenya pun harus lebih besar dari yang lainnya.
contohnya seperti diatas untuk membuat sel Usia dan bawahnya lebih panjang dibanding sel Nama.
Contoh Berikutnya :

Nah contoh diatas menggunakan atribute height(untuk tinggi tabel) dan cellpading. Jadi contoh diatas formatnya sama dengan contoh sebelumnya hanya beda penyajian saja.
Contoh Tabel Absensi :

Nah contoh diatas juga sama menggunakan atribute - atribute yang sudah dicontohkan sebelumnya. Oh, iya untuk kalian yang mencari tanda centang (✔) anda bisa mendapatkannya di character map --> font Arial Unique Ms --> lalu find dengan kata kunci check --> lalu kalian pilih dan copy.
Contoh Berikutnya :

Nah mungkin kalian penasaran apa fungsi dari scope="col"
Ketika sebuah tabel di ubah menjadi suara atau Braille, sangatlah berguna untuk dapat mengidentifikasi header apa yang mendeskripsikan tiap cell. Sebagai contoh, sebuah browser suara memungkinkan anda untuk bergerak keatas dan kebawah atau ke kiri dan kenan dari cell ke cell yang lain, yang cocok dengan header yang sesuai diucapkan sebelum tiap cell.
Untuk mendukung hal ini anda harus membubuhi keterangan pada header tersebut dan atau cell data. Cara termudah untuk hal ini adalah dengan menambahkan atribut scope pada cell header. Hal tersebut dapat digunakan dengan nilai nilai berikut:

row: Cell yang aktif memiliki informasi header untuk sisa dari baris tempat cell tersebut berada.
col: Cell yang aktif memiliki informasi header untuk sisa dari kolom tempat cell tersebut berada

Contoh Berikutnya :

Nah ini juga sama dengan contoh sebelumnya hanya saja beda penempatan/penyajian tabelnya. Oh iya disini kita juga menggunakan <sup></sup> untuk membuat pangkat.
Contoh Tabel Benua dengan dua tampilan yang berbeda :
Tampilan ke-1