Di kesempatan ini saya akan memposting tentang materi HTML ,
Pada pertemuan pertama mata kuliah
Pemrograman web bapak Barka Satya memberikan materi tentang cara mendesign web
menggunakan bahasa HTML. Aplikasi yang digunakan adalah dreamweaver. Setelah
membuka aplikasi Dreamweaver kita memilih option HTML. Lalu kita mulai belajar
mendesign web dengan bahasa-bahasa html. Awal dari membuat halaman web dengan
menggunakan <html>...</html> ,Untuk bagian atas disebut
<head> dan diakhiri </head> , untuk menulis judul menggunakan
<title> dan diakhiri </title>. Setelah mendesign bagian kepala atau atas web kita lalu membuat
bagian isi dengan menggukan <body> diakhiri </body> . berikut
tags-tags dalam html yang sudah di ajarkan oleh pak barka :
<h1> <h2>
<h3> <h4> = untuk
menentukan ukuran huruf
<p>...</p> = untuk membuat paragraf baru
<br> = untuk mengenter atau membuat baris
baru
|
Di pertemuan kedua Pak Barka Satya memberikan materi
tentang bagaimana memasukan gambar dan link pada web kita . kita masih
mengggunakan aplikasi yang sama yaitu dreamweaver.
Untuk memasukan link ke dalam web menggunakan:
<a href="http://www.amikom.ac.id">Kampus ku</a>
|
Untuk
memasukan gambar pada web yaitu menggunakan:
<img src=”latihan1.jpg” width=”300” height=”300”>
|
usahakan gambar yang dipilih adalah gambar yang mempunyai
resolusi yang bagus agar tidak pecah. Jika ingin menggerakkan gambar pada
tampilan web kita bisa menggunakan tags html yaitu
<marguee>...</marquee>
|
Jika kita ingin memasukkan gambar delang lebih rapi dan
teratur kita bisa menggunakan option “table” kita bisa menentukan berapa jumlah
kolom dan barisnya. Setelah itu kita bisa memasukan gambar disetiap kolomnya.
Dengan begitu foto yang kita tampilkan akan lebih rapi dan teratur. Ini adalah
contoh blog sederhana yang sudah diajarkan
<html>
<head>
<title>Toko Sepatu
Abadi</title>
</head>
<body>
<p> Toko ini
menjual berbagai jenis sepatu . Semua
sepatu bisa di pesan secar online</p>
<table
width="300" border="2">
<tr>
<td><img
src="rillingen hood1.jpg"width="200"
height="200"></td>
<td><img
src="rillingen hood2.jpg"width="200"
height="200"></td>
<td><img
src="rillingen hood3.jpg"width="200"
height="200"></td>
</tr>
<tr>
<td><img
src="adidas1.jpg"width="200"
height="200"></td>
<td><img
src="adidas2.jpg"></td>
<td><img
src="adidas3.jpg"></td>
</tr>
<tr>
<td><img
src="aka1.jpg"width="200"
height="200"></td>
<td><img
src="aka2.jpg"width="200"
height="200"></td>
<td><img
src="aka3.jpg"width="200"
height="200"></td>
</tr>
</table>
</body>
</html>dalam membuat scrip HTML ini kita juga dapat menambahkan tag untuk mempercantik scip blog yang sudah kita buat ,
Tag Atribut1 (Bold, Italic, Underline)
<b>Kalimatyang dicetaktebal</b>
<i>Kalimatyang
dicetakmiring</i>
<u>Kalimatyang
digarisbawahi</u>
Tag Atribut2 (Superscript,
Subscript)
<sup>bagian yang dicetak tinggi</sup>
<sub>bagian
yang dicetak rendah</sub>
Tag Ganti
Baris (Break line)
ini digunakan setiap akhir kalimat, lali ingin meneruskan kalimat kebawahnya <br>
Animasi dalam HTML
Teks
Berkedip
<blink>TEXT</blink>
TEXT
Menggerakan Teks dari kanan ke kiri
<marquee>TEXT</marquee>
Menggerkan Teks dari kiri ke
kanan
<marquee direction="right">TEXT</marquee>
The href Attribute
HTML link dilambangkan dengan <a>
Example
<a href="http://www.w3schools.com">Ini adalah linknnya</a>
Font size
<font size="n"> kalimat </font>
<font size="m"> kalimat </font>
"n"=1,2,3,4,5,6,7(ukuran huruf)
"m"=-1,-2,-3,-4,-5,-6,-7(ukuran huruf)
Font face
<font face="nama font"> kalimat </font>
nama font = Times new roman, Arial, dll
Font color
<font color="#RRGGBB"> kalimat </font>
HTML link dilambangkan dengan <a>
Example
<a href="http://www.w3schools.com">Ini adalah linknnya</a>
Font size
<font size="n"> kalimat </font>
<font size="m"> kalimat </font>
"n"=1,2,3,4,5,6,7(ukuran huruf)
"m"=-1,-2,-3,-4,-5,-6,-7(ukuran huruf)
Font face
<font face="nama font"> kalimat </font>
nama font = Times new roman, Arial, dll
Font color
<font color="#RRGGBB"> kalimat </font>
SUMBER : - http://pribadihaliem.blogspot.com/2014/03/pemrogaman-web.html
-http://bernadusrossizakaria.blogspot.com/2014/10/tugas-merangkum materi-pak-barka.html
Tidak ada komentar:
Posting Komentar