Sunday, 30 April 2017

Belajar HTML dan CSS part 2

Posted By: Muhamad - April 30, 2017

Pengenalan Tag HTML

Seperti yang sudah admin jelaskan sebelumya bahwa HTML bukanlah sebuah bahasa pemrograman melainkan sebuah bahasa pemformatan, sebagai peyerdehanaan kita analogikan dokumen word, biasanya kita melakukan formating teks pada dokumen word kita seperti miring, tebal dan lain lainnya. Pada HTML kita biasa menyebutnya dengan proses Markup dan di lakukan dengan tag HTML.

Misalnya untuk membuat teks miring kita bisa menggunakan tag <em> atau tag <i>, Contoh :

<i> Teks ini akan menjadi miring </i>

Dan ketika di buka di browser anda akan mendapatkan sebuah teks yang miring.
<i>.....</i>  di sebut tag HTML, yang kita gunakan untuk memarkup ( memformat suatu dokumen HTML. Perhatikan bahwa setiap tag memiliki tag penutupnya. Hanya teks yang berda di dalam teks yang berada di dalam teks tersebut yang akan menjadi miring. Tag penutup biadanya di awali dengan tanda / sebelum nama tagnya.
Setiap tag HTML juga dapat menjadi isi dari tag HTML lainnya, seperti contoh di bawah ini.

<strong><i>Teks ini akan menjadi  miring dan tebal</i></strong>

Dalam setiap tag HTML dapat di sisipkan beberapa atribut untuk menampung informasi informasi tertentu.

<namatag  atribut=”nilai atribut”>
     Isi  tag
</namatag >

Struktur Flie HTML


Suatu dokumen HTML juga mempunyai aturan dalam Penulisannya ada beberapa tag HTML yang harus ada dan sudah menjadi ketentuan. Struktur file HTML yang benar adalah seperti di bawah ini.

<!DOCTYPE HTML>
  <HTML>
    <head>
      <title> judul di sini </title>
    </head>
    <body>
      Isi dokumen HTML di sini.
    </body>
</HTML>

Jika agan agan pada bingung akan dmin jelaskan aksud dari kode kode di atas.

<!DOCTYPE HTML>
Tag ini wajib ada pada awal setiap dokumen HTML. Fungsi tag ini adalah untuk memberitahukan kepada web browser ahwa dokumen yang sedang di buka dalah dokumen HTML.

<HTML>.........</HTML>
Awal dari dokumen HTML berada di sini dan di sinilah tempat kita meletakan kode kode HTML yang akan di eksekusi oleh web browser.

<head>...........</head>
Tag ini berfungsi untuk menyimpan berbagai macam informasi tetang dokumen HTML yang kita tulis.

<title>............</title>
Ini adalah salah satu contoh informasi yang ada di dalam tag <head>...........</head> Title akan memberikan judul tab browser.

<body>..........</body>
Apa yang akan agan tampilkan pada web browser di tuliskan di sini.

Mudah di mengerti kan, HTML memang tidak sesulit yang kita pikirkan. Lalu apakah penulisan HTML harus seperti cotoh di atas ? jawabannya adalah tidak, agan juga dapat menuliskan HTML seperti di bawah ini gan.

<!DOCTYPE HTML><HTML><head><title> judul di sini </title> </head><body>Isi dokumen HTML di sini.</body></HTML>

Dan hasilnya pun akan sama saja, cuman jika di tuliskan seperti contoh yang pertama akan mempermudah kita dalam mengedit dokumen HTML yang sudah kita buat, dan biasanya jka agan menggunkan Dreamweaver agan akan mendapatkan suatu dokumen HTML yang tersusun rapih secara otomatis.

Memuat Gambar

Setelah kita memahamai tentang Struktur file HTML selanjutnya kita akan belajar bagaimana jara memuat / menapilkan gamabar pada web browser dan juga kita akan belajar  tentang atribut HTML.
Mengenal atribut HTML

Setiap tag HTML memeliki satu atau lebih atribut yang menyimpan informasi tetang tag tersebut.
Sebagai contoh kita akan menentukan lokasi gambar yang akan kita tampilkan maka kita perlu menggunakan atribut src

<img src>

Selanjutnya untuk memasukan nilai pada atribut kita gunakan operator sama dengan (=) di dikuti lokasi gambar dengan di apit tada kutip.

<img src= ”D:/takimgagah.jpg”>

Tag img merupakan tag sepesial karena tidak memiliki tag penutup ( di sebut juga sebagai Self Closed Tag ) seperti tag tag lainnya. Ini di karenakan tag ini tidak memiliki konten sperti.

<p>Isi dokumen HTML di sini.</p>

Maka sebagai penggantinya kita tambahkan / sebelum tanda kurung tutup

<img src= ”D:/takimgagah.jpg” />

Sekarang saatnya kita praktek. Buat file HTML baru dan beri nama Latihan 2, lalu copy kode di bawah ini :

<!DOCTYPE HTML>
  <HTML>
    <head>
      <title> judul di sini </title>
    </head>
    <body>
      <img src=”D:/takim.png”/   >
    </body>

</HTML>

Ganti D:/takim.png dengan lokasi  gambar di komputer agan atau link dari gamabar yang ingin agan tamplikan.

Save file dan open with web browser kesayangan agan.
Berikut admin tmpilkan berbagai macam atribut dari tag <img>  beserta fungsinya.

Attribut
Fungsi
Contoh
src
Menentukan lokasi gambar.
<img src=”takim.png”/>
width
Menentukan lebar gambar.
<img src=”takim.png” width=”200px”/>
height
Menentukan tinggi gambar.
<img src=”takim.png” height=”80px”/>
alt
Menampilkan teks jika gambar tidak berhasil di muat
<img src=”takim.png” alt=”gambar error”

Oke, mungkin itu sampai sini dulu pertemuan kita kali ini, semoga apa yang admin sampaikan bermanfaat, sampai jumpa di postingan admin selanjutnya dan Wassalamualaiku Wr Wb.

Terima kasih telah berkunjung ke blog saya yang sangat sederhana ini, jika anda ingin request game, artikel ataupun tutorial jangan sungkan untuk mengirim email ke

takim.gagah7@gmail.com

About Muhamad

Menulis adalah hobi saya, saya akan terus belajar menjadi lebih baik dan lebih bermanfaat dengan cara membegikan apa yang saya tahu melalui blog saya yang sangat sederhana ini.

0 comments:

Post a Comment

Copyright © 2016 TAKIM 99

Blogger Templates Designed by Templatezy