Sunday, 14 September 2014

[Tugas 8]: Cara Membuat Kop/Header dalam Web HTML

Selamat sore guys!!! Ketemu lagi dengan gue Iqi, dan gue sekarang akan membahas cara membuat Kop/Header dalam HTML

Header dalam surat adalah kepala/bagian atas surat yang biasanya menerangkan lembaga yang mencetak/menulis surat tersebut, nah kali ini kita akan membuatnya dengan cara sederhana

Berikut adalah contoh script yang menggunakan header :

<html>
<head>
<title>membuat garis</title>
<body>
<left><font size="3" face="tahoma">Nama : Rayhan Shidqi<br>
Kelas : X TKJ A <br>
Tugas : tugas8.html</font></left>
<hr><width="100" height="75"></hr>
<h1><center><font size="5" face="arial">SMK NEGERI 1 KOTA BEKASI</font></center></h1>
<center><b><font size="4" face="Courier New">TEKNIK KOMPUTER DAN JARINGAN</font></b></center><br>
<center><b>Jl. Bintara 8 no. 2 Bekasi Barat - 17134<b></center><br>
<hr><width="100" height="75"></hr>
</body>
</html>


seperti biasa ya guys: copy script di atas ke notepad/text editor kalian, setelah itu save dengan “NAMAFILE.html” (tanpa menggunakan tandai kutip), jangan lupa tambahkan “.html” setelah menentukan nama file yang kalian inginkan ya guys!
lalu pilih ‘save as type’ menjadi ‘all files’
dan berikut hasil jadi dari script di atas :


(klik gambar untuk memperbesar)
 
 
okay guys, sekian dari gue, selamat mencoba dan goodluck!!!

[Tugas 7]: Cara Membuat Artikel Sederhana pada Web HTML

Okay guys, selamat lo udah mempelajari 6 tag dasar yang digunakan dalam HTML, dan sekarang saatnya menggabungkan keseluruhan tag yang telah lo pelajari dalam wadah yaitu sebuah artikel. Tentunya dalam pembuatan artikel kita berusaha menampilkannya dalam bentuk sekreatif mungkin supaya menarik minat pembaca

Ada beberapa tag baru yang gue ingin kenal kan pada post kali ini, yang pertama adalah <body background="x"> ,

Nah fungsi tag ini adalah memberikan gambar/picture yang kalian inginkan di web HTML kalian, dan huruf 'x' itu mewakili URL gambar yang telah kalian upload

Selanjutnya adalah <img src="x">
yang berfungsi menampilkan gambar dalam artikel web HTML kalian, dan huruf 'x' mewakilkan URL gambar yang telah diupload

Kedua tag di atas tidak memerlukan tak penutup, dan yang terakhir ini tetap memerlukannya

Yaitu tag <p>
Tag ini menandakan akan paragraf baru. Jadi setiap kali kalian ingin menambahkan paragraf baru, cukup tambahkan tag <p> pada awal kalimat paragraf, dan </p> pada akhirannya

Oke, langsung saja guys, ini contoh script artikel web HTML sederhana :

<html>
<head><title>MEHDI BENATIA</title></head>
<body><body background="http://www.pic2014.com/wp-content/uploads/Bayern-Munich-logo-2014.jpg">

<p><center><b><font size="7"><font color="red">M<font color="green">U<font color="brown">N<font color="gold">I<font color="pink">C<font color="blue">H <font color="grey">B<font color="orange">O<font color="aqua">U<font color="purple">G<font color="yellow">H<font color="silver">T <font color="green">O<font color="pink">U<font color="purple">T <font color="aqua">B<font color="silver">E<font color="green">N<font color="red">A<font color="grey">T<font color="orange">I<font color="brown">A</font></center></p>

<p><center><img src="http://duniasoccer.com/var/gramedia/storage/images/duniasoccer/internasional/liga-dunia/news/bayern-resmi-beli-mehdi-benatia/19880056-3-ind-ID/Bayern-Resmi-Beli-Mehdi-Benatia_soccer_750.jpg"/></center></p>

<p><font size="5"><font color="pink"><font face="calibri">Spekulasi transfer bek AS Roma, Mehdi Benatia, tuntas sudah. Bayern Munchen resmi membeli Benatia  dari Roma. Namun Pep Guardiola dan Karl-Hein Rumminigge belum mau berkomentar tentang transfer Benatia ini. Kabar terakhir tawaran Bayern bisa mencapai 30 juta euro, ini artinya tawaran yang diajukan oleh Bayern lebih besar 5 juta euro dari harga yang dibuka AS</font></p>

<p><font color="gold"><font face="georgia">Kesepakatan terjalin pada Selasa (26/8). Bayern mengikat Benatia  dengan kontrak berdurasi lima tahun.Surat kabar Corriere della Sera melaporkan bahwa perundingan akan berlangsung cukup cepat. Benatia juga dikabarkan sudah mengucapkan selamat tinggal kepada rekan-rekannya di AS Roma akhir pekan ini.</p>

<p><font color="pink"><font face="blackletter">Pada Selasa sore (26/8) pemegang rekor juara di Jerman mencapai kesepakatan dengan AS Roma untuk bek internasional Maroko Mehdi Benatia. Tentang biaya transfer yang disepakati kedua klub sepakat untuk diam,' bunyi pernyataan kubu Bayern.</p>

<p><font color="grey"><font face="times new roman">Benatia akan datang ke Munich dalam beberapa hari mendatang untuk menghadiri pemeriksaan kesehatan serta menandatangani kontrak lima tahun.</p>

<p><font color="blue"><font face="agency fb">Kehadiran Benatia sekaligus diproyeksikan sebagai pengganti Javi Martinez yang cedera. Ditambah lagi, Bayern membutuhkan bek tambahan karena pelatih Josep Guardiola semakin sering menggunakan skema tiga bek.</p>

<p><font color="red"><font face="courier new">Kepastian transfer Benatia ke Bayern  sekaligus membuat beberapa klub peminat lain seperti Manchester United, Chelsea, dan Arsenal harus gigit jari. (irawan)</p></b>

</body>
</html>

seperti biasa ya guys: copy script di atas ke notepad/text editor kalian, setelah itu save dengan “NAMAFILE.html” (tanpa menggunakan tandai kutip), jangan lupa tambahkan “.html” setelah menentukan nama file yang kalian inginkan ya guys!
lalu pilih ‘save as type’ menjadi ‘all files’
dan berikut hasil jadi dari script di atas :


(klik gambar untuk memperbesar)







Oke guys, sekalian dari gue materinya, semoga lo udah bisa membuat artikel sendiri dalam bentuk web HTML, selamat mencoba, dan goodluck guys!!!

[Tugas 6]: Aplikasi Penggunaan Tag Font Size & Color

Hello, guys! Bertemu lagi bersama gue, Iqi... Dan sekarang, setelah lo belajar cara menentukan font size/type/color , kita akan satukan semuanya dalam sebuah tag yang baru. 

Bukan tag yang lebih baru juga sih sebenarnya, tag ini menyatukan beberapa perintah tentang settingan font yang kita inginkan seperti font size, font color, dan type font... 

Oke guys, langsung aja, berikut contoh script yang mengaplikasikan penggabungan beberapa tag tersebut. Dan jangan lupa ya guys, seperti biasa, tag ini juga menggunakan tag penutupnya yaitu </font>

<html>
<head><title>Mengatur Font Size & Color</title></head>
<body>
<font size="1" color="red">Font size dengan ukuran 1 berwarna merah<br>
<font size="2" color="green">Font size dengan ukuran 2 berwarna hijau<br>
<font size="3" color="blue">Font size dengan ukuran 3 berwarna biru<br>
<font size="4" color="yellow">Font size dengan ukuran 4 berwarna kuning<br>
<font size="5" color="brown">Font size dengan ukuran 5 berwarna coklat<br>
<font size="6" color="orange">Font size dengan ukuran 6 berwarna oranye<br>
<font size="7" color="pink">Font size dengan ukuran 7 berwarna pink</font>
</body>
</html>


seperti biasa ya guys: copy script di atas ke notepad/text editor kalian, setelah itu save dengan “NAMAFILE.html” (tanpa menggunakan tandai kutip), jangan lupa tambahkan “.html” setelah menentukan nama file yang kalian inginkan ya guys!

lalu pilih ‘save as type’ menjadi ‘all files’

dan berikut hasil jadi dari script di atas :


(klik gambar untuk memperbesar)


Okay guys, sekian dulu dari gue, selamat mencoba dan good luck!!!

Saturday, 13 September 2014

[Tugas 5]: Cara Sederhana Mengatur Jenis Font pada Web HTML

Hello, guys! Kembali lagi bersama gue Iqi, semoga sehat semua yang sedang membaca post ini :)

Ga jauh dengan 2 posting terdahulu, kali ini gue akan share cara mengatur type font/jenis tulisan yang kalian ingin gunakan ketika membuat web HTML,hal yang perlu diperhatikan adalah tidak semua font dapat digunakan, jadi tergantung font apa aja yg udah diinstall di desktop/laptop lo semua

Dan kode utama yang akan digunakan pada pengaturan font adalah <font face="X"> (dan X adalah nama/jenis font yang akan lo gunakan), yap si font face ini memiliki tag penutup yakni </font>

Dalam contoh script HTML di bawah, gue akan gunakan beberapa font bawaan dari Windows, jadi memiliki kemungkinan font di bawah ini tidak berfungsi di OS lainnya. Oke, langsung saja :

<html>
<head><title>Mengatur Jenis Font</title></head>
<body>
<font face="Times New Roman">Font dengan type font Times New Roman<br>
<font face="Courier New">Font dengan type Courier New<br>
<font face="Arial">Font dengan type Arial<br>
<font face="Verdana">Font dengan type Verdana<br>
<font face="Century Gothic">Font dengan type Century Gothic</font>
</body>
</html>


seperti biasa ya guys: copy script di atas ke notepad/text editor kalian, setelah itu save dengan “NAMAFILE.html” (tanpa menggunakan tandai kutip), jangan lupa tambahkan “.html” setelah menentukan nama file yang kalian inginkan ya guys!

lalu pilih ‘save as type’ menjadi ‘all files’


dan berikut hasil jadi script di atas :


(klik gambar untuk memperbesar)


Oke guys, sekian dulu postingannya, selamat mencoba dan goodluck !!!

[Tugas 4]: Cara Sederhana Mengatur Ukuran Tulisan pada Web HTML

Hello, guys! Seperti biasa, perkenalkan nama gue Iqi, dan dalam postingan ini gue akan membahas hal yang mirip dengan postingan kemarin, tapi kali ini gue akan share cara mengatur font size/ukuran tulisan dalam web HTML 

Ini adalah cara sederhananya, dan tag utama yang digunakan adalah <font size="X"> (X adalah angka 1-7 yang merupakan skala font size). Seperti tag umum lainnya, tag ini juga diharuskan menggunakan tag penutup nya yaitu </font>

Oke, kita langsung saja ke contoh script yang menggunakan pengaturan font size :

<html>
<head><title>Mengatur Font Size</title></head>
<body>
<font size="1">Tulisan dengan font size ukuran 1<br>
<font size="2">Tulisan dengan font size ukuran 2<br>
<font size="3">Tulisan dengan font size ukuran 3<br>
<font size="4">Tulisan dengan font size ukuran 4<br>
<font size="5">Tulisan dengan font size ukuran 5<br>
<font size="6">Tulisan dengan font size ukuran 6<br>
<font size="7">Tulisan dengan font size ukuran 7</font>
</body>
</html>


seperti biasa ya guys: copy script di atas ke notepad/text editor kalian, setelah itu save dengan “NAMAFILE.html” (tanpa menggunakan tandai kutip), jangan lupa tambahkan “.html” setelah menentukan nama file yang kalian inginkan ya guys!

lalu pilih ‘save as type’ menjadi ‘all files’


dan berikut hasil jadi dari script di atas :


(klik gambar untuk memperbesar)


Oke guys, sampe sini dulu tutorial mengatur font sizenya, selamat mencoba dan good luck!

[Tugas 3]: Cara Sederhana Mengatur Warna Font pada Web HTML

Goodmorning, guys!!! Kembali lagi bersama gue Iqi... Dan pada post kali ini, gue akan share cara sederhana mengatur warna font/tulisan pada web HTML lo

Tentu hal ini memudahkan bagi lo semua yang ingin berkreasi dengan warna tulisan pada web HTML lo semua. 

Dan tag yang digunakan kali ini adalah <font color="X"> (dan X adalah warna yang lo ingin gunakan di tulisan lo) , seperti tag umum lainnya, tag ini memiliki penutup yaitu </font>

Nah, langsung aja guys, berikut contoh scriptnya :

<html>
<head><title>Mengubah Warna Font</title></head>
<body>
<font color="green">tulisan dengan font color hijau<br>
<font color="yellow">tulisan dengan font color kuning<br>
<font color="red">tulisan dengan font color merah<br>
<font color="blue">tulisan dengan font color biru<br>
<font color="gold">tulisan dengan font color emas<br>
<font color="brown">tulisan dengan font color coklat<br>
<font color="black">tulisan dengan font color hitam</font>
</body>
</html>


seperti biasa ya guys: copy script di atas ke notepad/text editor kalian, setelah itu save dengan “NAMAFILE.html” (tanpa menggunakan tandai kutip), jangan lupa tambahkan “.html” setelah menentukan nama file yang kalian inginkan ya guys!

lalu pilih ‘save as type’ menjadi ‘all files’

dan berikut hasil jadi dari script di atas :




(klik gambar untuk memperbesar)







Oke guys, berikut hanya contoh sederhana dari gue, jadi jangan lupa untuk selalu berkreasi sekreatif mungkin. Sekian dari gue, selamat mencoba dan good luck guys!

[Tugas 2]: Aplikasi Penggunakan Tag br pada HTML

Hello, guys!!! Ketemu lagi bersama gue, Iqi... melanjutkan post gue tentang HTML, kali ini gue akan share salah satu tag dasar yang sering digunakan dalam membuat HTML webpage

Pada dasarnya tag <br> ini digunakan sebagai pengganti tombol "enter", atau berfungsi untuk membuat baris baru.

Aplikasi sederhana adalah ketika lo membuat biodata/CV dalam bentuk HTML, tag <br> ini akan sangat bermanfaat. Sama satu lagi guys, tidak seperti umumnya tag... Tag <br> ini tidak memerlukan penutupnya (yaitu </br> ) , cukup menggunakan satu tag saja lo semua dapat membuat baris baru

Oke, kalau masih belum paham, langsung aja liat contohnya script biodata di bawah ini

<html>
<head><title>BIODATA RAYHAN SHIDQI</title></head>
<body>
Nama : Rayhan Shidqi<br>
Nama Panggilan : Iqi<br>
Tempat, Tanggal Lahir : Bekasi, 11 Mei 1999<br>
Jenis Kelamin : Laki-Laki<br>
Pekerjaan : Pelajar SMK<br>
Asal Sekolah : SMKN 1 Bekasi<br>
Alamat Rumah : Jatirahayu, Pondok Melati, Bekasi<br>
</body>
</html>


seperti biasa ya guys: copy script di atas ke notepad/text editor kalian, setelah itu save dengan “NAMAFILE.html” (tanpa menggunakan tandai kutip), jangan lupa tambahkan “.html” setelah menentukan nama file yang kalian inginkan ya guys!

lalu pilih ‘save as type’ menjadi ‘all files’


dan berikut hasil jadi dari script di atas :




(klik gambar untuk memperbesar)


oke guys, sekian dulu untuk post ini, selamat mencoba dan goodluck!!! :)

[Tugas 1]: Tutorial Membuat Web HTML Sederhana

Hello, guys! Pada post gue kali ini, gue akan sedikit berbagi ilmu tentang proses pembuatan web html secara dasar, menggunakan script html. Sebelum kita mengkaji lebih dalam, ada baiknya kita memahami apa itu “HTML”
HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman  standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah browser. HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.

Nah, setelah udah paham apa pengertian HTML, ada beberapa hal yang harus kalian perhatikan dalam pembuatan HTML, salah satu yang terpenting adalah penggunaan tag

dan pengertian dari tag itu sendiri adalah sebuah teks bisa memuat instruksi yang ditandai dengan kode, dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda “/”).

Oke, berikut adalah contoh script HTML sederhana :


<html>
<head><title>BELAJAR HTML</title></head>
<body>Hello!!! Welcome to my first web coding assignment :)</body>
</html>


copy script di atas ke notepad/text editor kalian, setelah itu save dengan “NAMAFILE.html” (tanpa menggunakan tandai kutip), jangan lupa tambahkan “.html” setelah menentukan nama file yang kalian inginkan ya guys!

lalu pilih ‘save as type’ menjadi ‘all files’

 


berikut hasil jadi script html di atas :


 (klik gambar untuk memperbesar)



oke selamat mencoba guys, have fun and good luck!