Nothing.: Tugas 1 HTML Dasar

Welcome to Tutorial HTML Dasar Part 1
Part 1

Baiklah, jadi pada blog ini saya akan memberikan tutorial untuk tugas yang sudah saya buat, jadi seperti judulnya, HTML Dasar. saya akan memberikan contoh dan cara untuk membuat sebuah HTML dasar menggunakan element berikut:

br, p, img, usemap, hr, dan pre.

Baiklah, kita akan langsung saja mulai.

Soal?
Buatlah sebuah web menggunakan dengan rincian berikut:

Baiklah kita kupas 1 persatu.

1. Title: Tugas 1 - NIM

Nah ini yang paling utama, untuk membuat sebuah titel kita bisa menggunakan element title didalam head yang sudah dibuat.

Contohnya seperti ini.

Code

 <html>  
 <head>  
     <title>Tugas 1 09031381621083 </title>  
 </head>  
 <body>  
 </body>  
 </html>

Hasilnya sebagai berikut:

---

2. Memiliki judul dengan font lebih besar dari isi. Judul bebas, dibuat terdiri dari 2 baris (gunakan element br)

Setelah ini kita membuat judul, nah setelah titel tadi itu di head, kita beralih ke element body, dimana element body itu adalah badan dari html tersebut.

 <body>  
     <h1> Perjalananku <br> Yang Menyenangkan </h1>  
 </body>

Mengapa element h1? ya karena h1 itu adalah header yang besar dari pada yang lain, kamu bisa mencoba element h1 sampai 6, pastinya 6 adalah yang terkecil.

Hasil:

---

Membuat paragraf.

setelah membuat judul, kita akan membuat paragraf. tepatnya 2 paragraf. Oke kodenya seperti berikut.

 <body>  
     <p> Ini Paragraf </p>  
     <p> Ini Paragraf kedua </p>  
 </body>

Nah itu adalah contoh kode membuat 2 paragraf, dan hasilnya akan seperti berikut:

Hasil:

---

Membuat sebuah gambar menggunakan element IMG

Setelah kita membuat paragraf, kita bisa menambahkan gambar juga pada HTML kita menggunakan elemen img

Caranya seperti berikut

 <body>  
   <img src="http://static5.blog.cdn.ilkom.unsri.ac.id/wp-content/uploads/2014/10/logo-unsri-Copy.png" width="100px" heigth="100px"  
 </body>

Saya akan jelaskan satu persatu.

< img > = element yang memulai untuk menambahkan gambar yang kita inginkan

"src" = Lalu didalam img ada atribut "src" yang dimana, src itu adalah source untuk menambahkan gambar yang kita inginkan, jika kamu mengambil dari website, kamu bisa mengambil link gambar websitenya (jika gratis dan bisa digunakan dengan tanpa izin). Contoh saya itu menggunakan link website gambar logo unsri.

"width" = atribut yang digunakan untuk menentukan lebar dari gambar yang diinginkan. Biasanya bisa piksel, ataupun persen, tetapi saya gunakan piksel.

"height" = atribut untuk menentukan panjang dari gambar yang diinginkan. Sama saja piksel ataupun persen, yg skrg saya gunakan piksel.

Dan Hasilnya seperti berikut:

---

Buat 2 bagian di gambar yang jika di-klik akan membuka situs tertentu pada halaman baru (gunakan usemap)

Ya mungkin yang ini yang lumayan susah ya, karena kita akan menggunakan elemen usemap, yang dimana elemen ini bisa membuat gambar yang kita inginkan bisa di klik. tergantung dibagian mana gambar tersebut bisa diklik. jadi 1 gambar bisa ditentukan diposisi mana dia bisa diklik!, bisa lebih dari 1.

Contohnya, jika saya ingin membuat gambar yang bisa diklik, media sosial, di gambar tersebut ada 3 lingkaran, facebook, twitter, dan instagram. Itu gambarnya satu, tetapi, dibuat seperti 3 logo yang bisa diklik.

Ini gambarnya

Codenya seperti ini:

 <img src ="smi.png" width="150" height="70" alt="Social Media"  
 usemap="#SocialMedia">  
 <map name="SocialMedia">  
  <area shape="circle" coords="0,50,52" href="https://www.facebook.com/TheLightningBilly" alt="Facebook">  
  <area shape="circle" coords="50,50,50" href="https://www.instagram.com/billbrie" alt="Instagram">  
  <area shape="circle" coords="150,58,50" href="https://twitter.com/BillyBrili" alt="Twitter">  
 </map>

Bisa dilihat. Kita memakai elemen IMG juga. Saya akan bahas satu persatu tentang usemap ini.

1. Di img kita tambahkan atribut "usemap" yang dimana atribut tersebut menandakan bahwa gambar tersebut kita berikan kode agar dia bisa diklik. Kita menamai kode tersebut sesuai keinginan. Di momen ini saya menuliskan "#socialmedia"

2. Lalu setelah itu kita mulai memakai elemen map, yang didalamnya kita tambahkan nama yang sudah kita namai tadi di elemen img dengan atribut "usemap" ya "#Socialmedia"

3. lalu setelah elemen map, kita bisa menentukan area yang diinginkan dengan memakai elemen < area >. setelah itu ada atribut "shape" yang dimana dia menentukan area yg bisa diklik itu bentuknya seperti apa? apakah lingkaran, atau persegi? Disini saya menggunakan lingkaran, atau circle biar mudah.

4. lalu ada koordinat "coords" yang dimana atribut tersebut untuk menentukan posisi x,y,radius, dari gambar yg akan diklik.

5. "href" adalah link setelah kita mengklik gambar yang sudah diberi koordinatnya.

6. "alt" adalah alternatif jika kita menaruh kursor mouse di logo yg kita inginkan akan keluar "facebook","instagram" dan juga "twitter"

7. ya lalu ditutup

Dan hasilnya seperti ini

Hasil:

On Proccess.

Nothing.

Saturday, January 28, 2017

Tugas 1 HTML Dasar

2 comments: