Tutorial Belajar HTML Dasar Untuk Pemula : cara menentukan lebar dan tinggi dari gambar pada HTML.

Tutorial Belajar HTML Dasar Untuk Pemula : cara menentukan lebar dan tinggi dari gambar pada HTML.

Hallo sobat semua, apa kabarnya semoga baik-baik saja ya ? oke, pada kesempatan kali ini tutortutorialwebdesign.blogspot.com akan membagikan Tutorial Belajar HTML Dasar Untuk Pemula : cara menentukan lebar dan tinggi dari gambar pada HTML. Memang kedengaranya sangat sepele akan tetapi ini sangat bermanfaat ketika kita menginginkan lebar yang sesuai atau proporsional sebuah gambar pada website kita biar kelihatan rapi juga, kalo menurut saya.

Baik, langsung saja kita simak bersama-sama tutorial berikut ini :

Dalam menentukan tinggi dan lebar suatu gambar, kita akan mengunakan atribut width dan height. Silakan disimak kode HTML dibawah ini :

<img src=”logo.png”alt=”Ini adalah teks alternative” width=362 height=123 />

Anda  tidak  perlu  memberi  tanda  kutip  pada nilai  lebar  dan  panjang.  Nilai  ini  bisa  anda dapatkan  dengan  mengklik  kanan  gambar tersebut dan pilih menu properties. Pada  tab details  akan  anda  temui  ukuran  gambar tersebut. Dan jangan lupa  untuk selalu menambahkan atribut alt, yang berfungsi untuk mengantisipaasi jika gambar gagal dimuat.

Dan jika anda menyimpan gambar  berada di tempat yang berbeda dengan lokasi file html anda maka yang perlu anda lakukan adalah menuliskan sebagai berikut :

<img src=”images/logo.png” alt=”Ini adalah teks alternative” />

Anda hanya perlu menuliskan atau menambahkan tanda slash (/), sesuai lokasi file dimana :

Jika dalam folder tersebut terdapat folder lagi, dan gambar yang ingin anda muat ada di

dalamnya maka penulisannya menjadi seperti berikut :

<img src=”images/folder1/folder2/logo.png” alt=”Ini adalah teks alternatif” />

Selain penggunaan  lokasi gambar seperti di atas, anda  juga bisa menampilkan gambar

yang  sudah  terdapat  di  internet,  penulisan  seperti  ini  disebut  dengan  hotlinking

misalnya:

<img src=”http://tutortutorialwebdesign.blogspot.com/images/gambar.jpg” alt=”logo” />

Pengunaan hotlinking  sangat  tidak dianjurkan  karena  gambar  yang dimuat bukanlah milik kita dan tentunya juga akan merugikan si pemilik gambar, akan tetapi masih diperbolehkan kalo gambar tersebut memang merupakan gambar anda sendiri.

Oke, sampai disini dulu tutorial singkat kita sampai ketemu lagi pada tutorial berikutnya yaitu Tutorial Belajar HTML Dasar Untuk Pemula : cara membuat link pada HTML.

Tutorial Belajar HTML Dasar Untuk Pemula : cara memasukan gambar pada file HTML

Tutorial Belajar HTML Dasar Untuk Pemula : cara memasukan gambar pada file HTML

Hallo apa kabar sobat semuanya, pada kesempatan kali ini kami akan mencoba membagikan tutorial belajar HTML dasar untuk pemula : cara memasukan gambar pada file HTML. Mungkin sebagian dari sobat semua yang masih awam dan pemula akan sedikit kesulitan atau barangkali sedang mencari cara memasukan gambar pada file HTML, tetapi dalam pemrograman HTML kita tidak bisa begitu saja memasukan gambar layakanya dalam ms.word akan tetapi yang perlu kita tahu adalah tag atau kode cara memangil gambar agar bisa dimuat di dalam kode HTML kita.

Oke langsung saja, mari sobat simak penjelasan dibawah ini :

Mengenal Atribut HTML

Setiap atribut HTML memiliki satu atau lebih atribut HTML, atribut ini berfungsi untuk menyimpan informasi yang berkaitan dengan file HTML tersebut.

Dan untuk memangil gambar atau memunculkan gambar, kita akan mengunakan tag <img> dan mengunakan atribut <src> yang akan kita gunakan untuk meletakan alamat file kita.

Selanjutnya untuk memasukkan nilai pada atribut, kita gunakan operator sama dengan (=) diikuti dengan lokasi gambar yang diapit oleh tanda kutip. Perhatikan contoh berikut ini :

<img src="gambar.jpg">

tag  img  termasuk  ke dalam  tag  spesial dan  tidak memiliki  tag penutup  (Disebut  juga sebagai  Self  Closed  Tag),  seperti  tag-tag  lainnya.  Ini  dikarenakan  tag  ini  tidak memiliki konten seperti :

<title>Ini adalah Konten tag title</title>

Sebagai pengganti, kita tambahkan tanda slash (/) sebelum kurung tutup :

<img src="gambar.jpg" />

Sekarang saatnya anda mencoba memuat gambar pada file HTML.

1.  Buatlah file HTML baru dengan nama latihan2.html

2.  Carilah sebuah gambar dan simpan satu folder dengan file HTML anda.

Ingat, simpan semua file dalam satu folder karena jika berbeda folder maka gambar akan gagal di muat.

Kemudian ketikkanlah kode HTML berikut  pada file html latihan 2, edit pada notepad bawaan windows atau aplikasi sejenis yang sobat punya:

<!DOCTYPE HTML>

<HTML>

  <head>

    <title>Judul File HTML</title>

  </head>

  <body>  

    <p>ini adalah contoh pemuatan gambar pada file HTML<p> 

    <img src=”logo.png”/>

  </body>

</HTML>

Kemudian save=>dalam format latihan.html=>dan bukalah di browser sobat. Maka hasilnya sebagai berikut :

Di dalam tag img selain terdapat atribut src yang digunkan untuk menyimpan lokasi gambar, juga terdapat atribut alt yang akan digunakan jika browser ataupun server gagal memuat file kita. Lihat contoh berikut ini :

<img src=”logo.png” alt=”Ini adalah teks alternative” />

Dan atribut  lainnya adalah atribut  width dan  height, yang berfungsi untuk menentukan lebar  dan  tinggi  dari  gambar  tersebut. Yang akan kita bahas pada tutorial berikutnya yang berjudul Tutorial Belajar HTML Dasar Untuk Pemula : cara menentukan lebar dan tinggi dari gambar pada HTML.

Tutorial Belajar HTML Dasar Untuk Pemula : cara memasukan gambar pada file HTML

Hallo apa kabar sobat semuanya, pada kesempatan kali ini kami akan mencoba membagikan tutorial belajar HTML dasar untuk pemula : cara memasukan gambar pada file HTML. Mungkin sebagian dari sobat semua yang masih awam dan pemula akan sedikit kesulitan atau barangkali sedang mencari cara memasukan gambar pada file HTML, tetapi dalam pemrograman HTML kita tidak bisa begitu saja memasukan gambar layakanya dalam ms.word akan tetapi yang perlu kita tahu adalah tag atau kode cara memangil gambar agar bisa dimuat di dalam kode HTML kita.

Oke langsung saja, mari sobat simak penjelasan dibawah ini :

Mengenal Atribut HTML

Setiap atribut HTML memiliki satu atau lebih atribut HTML, atribut ini berfungsi untuk menyimpan informasi yang berkaitan dengan file HTML tersebut.

Dan untuk memangil gambar atau memunculkan gambar, kita akan mengunakan tag <img> dan mengunakan atribut <src> yang akan kita gunakan untuk meletakan alamat file kita.

Selanjutnya untuk memasukkan nilai pada atribut, kita gunakan operator sama dengan (=) diikuti dengan lokasi gambar yang diapit oleh tanda kutip. Perhatikan contoh berikut ini :

<img src=‚gambar.jpg‛>

tag  img  termasuk  ke dalam  tag  spesial dan  tidak memiliki  tag penutup  (Disebut  juga sebagai  Self  Closed  Tag),  seperti  tag-tag  lainnya.  Ini  dikarenakan  tag  ini  tidak memiliki konten seperti :

<title>Ini adalah Konten tag title</title>

Sebagai pengganti, kita tambahkan tanda slash (/) sebelum kurung tutup :

<img src=‚gambar.jpg‛ />

Sekarang saatnya anda mencoba memuat gambar pada file HTML.

1.  Buatlah file HTML baru dengan nama latihan2.html

2.  Carilah sebuah gambar dan simpan satu folder dengan file HTML anda.

Ingat, simpan semua file dalam satu folder karena jika berbeda folder maka gambar akan gagal di muat.

Kemudian ketikkanlah kode HTML berikut  pada file html latihan 2, edit pada notepad bawaan windows atau aplikasi sejenis yang sobat punya:

<!DOCTYPE HTML>

<HTML>

  <head>

    <title>Judul File HTML</title>

  </head>

  <body>  

    <p>ini adalah contoh pemuatan gambar pada file   

  HTML<p>

    <img src=”logo.png”/>

  </body>

</HTML>

Kemudian save=>dalam format latihan.html=>dan bukalah di browser sobat. Maka hasilnya sebagai berikut :

Di dalam tag img selain terdapat atribut src yang digunkan untuk menyimpan lokasi gambar, juga terdapat atribut alt yang akan digunakan jika browser ataupun server gagal memuat file kita. Lihat contoh berikut ini :

<img src=”logo.png” alt=”Ini adalah teks alternative” />

Dan atribut  lainnya adalah atribut  width dan  height, yang berfungsi untuk menentukan lebar  dan  tinggi  dari  gambar  tersebut. Yang akan kita bahas pada tutorial berikutnya yang berjudul Tutorial Belajar HTML Dasar Untuk Pemula : cara menentukan lebar dan tinggi dari gambar pada HTML.

Tutorial Belajar HTML Dasar Untuk Pemula : mengenal lebih dalam Struktur file HTML

Tutorial Belajar HTML Dasar Untuk Pemula : mengenal lebih dalam Struktur file HTML

Hallo semuanya, bertemu kembali dengan kami. Kali ini dalam website tutortutorialwebdesign.blogspot.com akan membagikan sedikit pengetahuan tentang tutorial belajar HtmL dasar untuk pemula : mengenal lebih dalam struktur file HTML. Semoga ini menjadi reverensi atau menjadi tambahan pengetahuan bagi sobat semua yang sedang atau baru belajar tentang HTML.

Oke, silakan di simak penjelasan dibawah ini :

1.    

     Struktur file HTML

   Suatu okumen HTML juga memiliki aturan dalam penulisanya, untuk lebih jelasnya kalian bisa lihat contoh berikut ini :

<!DOCTYPE HTML>

<HTML>

  <head>

    <title>Judul File HTML</title>

  </head>

  <body>  

    Website <strong><em>pertama</em></strong> saya

  </body>

 </HTML>

Kalo teman-teman perhatikan, file tersebut terdiri dari beberapa struktur dasar di antaranya :

<!DOCTYPE HTML> ( Sebagai penentu jenis file kita yaitu HTML )

<HTML> sebagai penentu jenis file yang akan di esekusi oleh web server atau browser nantinya.

<head> (sesuai dengan namanya, yang merupakan kepala dari file tersebut (bagian awal )

<body> dimana kita akan meenuliskan isi dari file tersebut nantinya dan terakhir terdapat penutup </HTML> dan jangan lupa penutup </body>.

Mudah dimengerti bukan? Lalu apakah penulisan tag-tag HTML harus seperti contoh di

atas?  Seperti  penambahan  tab/indentasi  pada  setiap  tag?.  Sebenarnya  Anda  bisa  saja

menuliskan kode HTML seperti ini :

<!DOCTYPE  HTML><HTML><head><title>Judul  File  HTML</title></head><body>Website

<i>pertama</i> saya</body></HTML>

Dan akan menghasilkan tampilan yang sama pada browser kita, dan tidak menjadi masalah sebenarnya jika isinya tag yang sederhana seperti di atas tapi bagaiamana jika tag yang akan kita tulis sebanyak ratusan tag atau bahakan ribuan tag pasti akan sanggat membingungkan dan akan membuat programmer kesulitan dalam membacanya bukan ?

Sampai disini tutorial kali ini, tutorial berikutnya kita akan membua bagaimana caranya memangil gambar. Pada Tutorial Belajar HTML Dasar Untuk Pemula : cara memasukan gambar pada file HTML

Tutorial Belajar HTML Dasar Untuk Pemula : membuat website dalam waktu kurang 5 menit

Tutorial Belajar HTML Dasar Untuk Pemula : membuat website dalam waktu kurang 5 menit

1.     Membuat Website dalam 5 Menit

Baiklah sobat, kali ini kami akan membagikan contoh sederhana bagaimana membuat website hanya dalam kurang dari 5 menit, oke langsung saja simak baik-baik tutorial berikut ini :

Sudah siap membuat website? Kita mulai membuat website kurang dari 5 menit!

1.  Bukalah Notepad (All Programs > Accessories > Notepad)

2.  Ketikkan teks berikut :

Website pertama saya

3.  Pilih menu File > Save As

4.  Beri nama ‚latihan1.html‛ (tanpa tanda kutip)

5.  Pada bagian Save as type, pilih All Files (*.*) Lalu klik tombol save.

6. Sekarang klik dua kali file HTML yang telah anda buat, (atau Klik dan Drag ke Web

Browser anda, disini saya menggunakan Google Chrome)

Oke, tutorial di atas hanyalah tutorial sederhana bagaimana membuat website yang sangat sederhana. Bagaimana ? mudah bukan ?

Sekarang, kita akan mulai belajar mengenal lebih dalam apa itu HTML yang merupakan dasar dari wensite kebanyakan yang ada di dunia.

2.     Pengenalan Tag HTML

Seperti  yang  kami  sebutkan  sebelumnya, bahwa HTML adalah bahasa Markup, artinya

bahasa  HTML  hanya  digunakan  untuk  me-markup  suatu  dokumen.  Sebagai

penyederhanaan kita analogikan dengan pembuatan dokumen di Microsoft Word atau

aplikasi Word Processing lainnya.

Ketika membuat sebuah dokumen word, biasanya kita melakukan formatting pada teks.

seperti menebalkan  teks, memiringkan, memberi  garis  bawah,  Membuat  Penjudulan

(Heading), membuat list (Daftar) dan lain sebagainya. Pada HTML, formatting ini bisa kita

sebut dengan Proses Markup dan akan dilakukan dengan menggunakan tag HTML.

Misalnya, untuk mem-format suatu teks menjadimiring kita tambahkan tag <em>atau<i>.

Edit file sebelumnya, menjadi seperti berikut :

Website <em>pertama</em> saya

Dan  ketika  dibuka  kembali  pada  browser,  anda  dapat melihat  kata  pertama menjadi

miring.

<em> .. </em> disebut dengan Tag HTML, yang digunakan untuk memformat atau meng mark-up HTML.

Dan pada tag tersebut yang berfungsi untuk  memiringkan text, dan tag penutup ditandai dengan tanda slash (/).

Dan berikut adalah struktur dari HTML sederhana :

<namatag atribut=‚nilai Atribut‛>

  Isi atau Konten

</namatag>

Setiap tag HTML bisa menjadi “isi” dari tag HTML lainnya, untuk membuat suatu hierarki

dari dokumen HTML.

Dalam  setiap  tag  HTML  bisa  disisipkan  berbagai  atribut  yang  berfungsi  untuk

menampung  informasi-informasi tertentu, misalnya atribut  id dan class yang berfungsi

untuk memberi nama suatu tag sebagai referensi CSS atau javascript nantinya.

Sekarang  bagaimana  jika  teks  yang  dimiringkan  tersebut  ingin  kita  tebalkan?  Untuk

menebalkan teks anda dapat menggunakan tag <strong>atau<b>, menjadi seperti berikut:

Website <strong><em>pertama</em></strong> saya

Dan coba simpan dan buka di file HTML tersebut seperti cara sebelumnya. Dan coba lihat perubahanya ?

Baik, demikian tutorial singkat hari ini berikutnya kita akan belajar Tutorial Belajar HTML Dasar Untuk Pemula : mengenal lebih dalam Struktur file HTML

Tutorial Belajar HTML Dasar Untuk Pemula : definisi dan pengenalan HTML

Tutorial Belajar HTML Dasar Untuk Pemula : definisi dan pengenalan HTML

Pengenalan HTML

1.     1. Apa itu HTML?

Semua  halaman  web  yang  sering  anda  buka,  seperti  facebook.com,  twitter.com,

google.com  dan  lain  sebagainya  ditampilkan  dengan  menggunakan  HTML.  Jadi  bisa

dikatakan  HTML  adalah  bahasa  dasar  untuk  menampilkan  halaman  web  pada  web

browser.

Buka Web browser anda lalu bukalah sebuah situs, http://www.google.com misalnya.

a.  Lalu  klik  kanan  di  sembarang  area,  dan  pilih  “Inspect  element”  (menu  paling

akhir).

b. Perhatikan kode hasil inspect element, yang terlihat adalah sebagai berikut :

Baris  pertama  pasti  diawali  dengan  <!DOCTYPE  HTML>,  ini  menandakan  bahwa

dokumen yang sedang anda buka saat ini adalah HTML. Begitu juga dengan baris

kedua  :  <HTML>,  kode  tersebut  menandakan  bahkan  kode-kode  yang  ditulis  di

dalamnya adalah kode HTML.

Jika anda ingin tahu kepanjangan HTML, HTML adalah kependekan dari Hypertext

Markup  Language.  Artinya  adalah  bahasa markup  (penanda)  berbasis  text  atau

bisa  juga  disebut sebagai  formatting  language  (bahasa  untuk  memformat),  Jadi

sudah  jelas  bahwa  HTML  bukanlah  bahasa  pemrograman, melainkan  bahasa

markup/formatting.

Ya…sampai disini dulu postingan kali ini, untuk postingan selanjutnya kita akan belajar bersama bagaimana membuat website dalam waktu 5 menit

BYE...!!