TRENDING NOW

at 0
HTML atau HyperText Markup Language mampu menambahkan sebuah gambar agar tampilan web yang kita buat lebih menarik dan tentunya mampu menampilkan informasi mengenai apa yang akan kita berikan dengan lebih mendetail.
Menambahkan gambar secara offline
  1. Pastikan gambar sudah dalam folder yang sama dengan file HTML yang akan dimasukkan gambar
  2. Buat file HTML dan masukkan tag :
 <img src="image.jpg"/>
  • Tag <img sendiri menjelaskan bahwa tag tersebut untuk menampilkan sebuah gambar
  • src atau source sendiri memiliki artian dari sumber atau attribut dari tag <img
  • Sedangkan "image.jpg" adalah gambar yang akan kita gunakan , pastikan nama dan extensi gambar yang akan dimasukkan, sama dengan apa yang kita masukkan ke dalam text editor
  • Jika nama atau extensi salah , maka tag gambar yang kita tuliskan tidak menampilkan apapun.
Contoh lengkap tag gambar :
<!DOCTYPE html>
<html>
<head>
<title>Pembuatan Gambar</title>
</head>
<body>
<p>di bawah ini adalah gambar favorit saya</p>
<br/>
<img src="gambar.jpg"/></body>
</html>
Maka akan menghasilkan gambar
Dan pastikan gambar dan text yang Anda simpan dalam satu folder

Membuat gambar secara online
  • Memiliki perintah yang sama yakni <img
  • Buka browser dan cari gambar yang Anda sukai
  • Klik gambar tersebut lalu klik kanan dan pilih perintah Copy image url
  • Paste kan ke dalam tag setelah src :
<!DOCTYPE html>
<html>
<head>
<title>Pembuatan Gambar</title>
</head>
<body>
<p>di bawah ini adalah gambar favorit saya</p>
<br/>
<img src="src="'" >https://gambar.com/team_photo.jpg"/>"/></body>
</html>
Dan itulah cara menambahkan gambar secara online maupun offline dalam HTML , semoga membantu.
Continue reading

at 0
Pada dasarnya ketika membuat suatu website , hal yang paling dan sangat mendasar sekali adalah sebuah teks yang ada pada web tersebut. Tentunya pada artikel ini kita akan membahas tentang cara membuat suatu paragraf dan line break pada HTML.
  • Pertama kita buka text editor kita
  • Lalu buat sebuah struktur dokumen HTML
  • Lalu kita tambahkan tag <title> untuk judul
  • Lalu kita tambahkan tag <p> untuk paragraf (bisa bikin kalimat sendiri)
  • dan kita tambahkan tag <br/> untuk line break. seperti contoh HTML dibawah ini 
<!DOCTYPE html>
<html>
<head>
<title>Belajar paragraf dan line break  HTML</title>
</head>
<body>
<p>Saya senang belajar HTML.<br/> dan saya antusias dalam belajar HTML</p>
<p>HTML sangat menyenangkan.</p>
</body>
</html>
  • Simpan dan buka menggunakan Browser .
  • Lalu akan terlihat seperti gambar1 dibawah ini.
Gambar 1

Dari gambar1 diatas , kita bisa melihat meskipun 1 tag <p> tapi kita bisa membuat line break atau kalo di keyboard sih kita biasa menekan (enter).

Seharusnya jika tanpa line break, paragraf yang kita buat akan tetap lurus dan tanpa jarak (enter) meskipun dalam teks kita sudah menekan  (enter).
Seharusnya jika tanpa line break, paragraf yang kita buat akan tetap lurus dan tanpa jarak (enter) meskipun dalam teks kita sudah menekan (enter) .

Dan itulah sedikit tutorial dari saya , kurang dan lebihnya mohon maaf semoga membantu dan jika ada pertanyaan bisa langsung beri komentar :) 
Continue reading

at 0

HTML menggunakan element untuk mengetahui struktur dari apa yang diperintahkan oleh pengguna untuk menyimpan suatu informasi atau perintah ketika akan memasukkan suatu konten yang di awali dengan tag pembuka dan di akhiri dengan tag penutup. Struktur dari element sendiri adalah
<tag pembuka element>isi tag dari element</tag penutup element>
Contoh tag ada pada table 1 di bawah ini



Tag Element Artian
<html></html> Element untuk membuat sebuah dokumen HTML
<head></head> Element pembuka atau sebagai pengangkut dokumen baik embed maupun inline *seperti Javascript,Bootsrap,Css ll
<title></title> Sebagai judul dari HTML yang kita buat dan di tempatkan di bagian <head>
<body></body> element yang mengangkut isi dari HTML yang akan kita buat .
<h1></h1> Header atau heading dari paragraf yang akan kita buat
<i></i>
<b></b>
<u></u>		 Masing-masing dari elemetn tersebut berguna sebagai text style yang dimana memiliki artian untuk italic bold dan underline
<br> berfungsi sebagai line break dan tanpa tag penutup
Contoh sebuah dokumen HTML jika kita memasukkan element element yang sudah kita bahas di atas ..
Caranya
  1. Buka text editor , bisa menggunakan notepad,sublime,phpstorm,notepad++,bracket dsb
  2. Copas tulisan HTML dalam 'Text HTML' dibawah ini dan save as dengan extensi .html
  3. Buka file yang sudah di save tadi menggunakan browser .. ex : Chrome,mozzilla,IE,Safari dsb
Berikut adalah 'Text HTML' yang bisa Anda copas sebagai contoh :
<!DOCTYPE html>
<html>
<head>
<title>Ini contoh judul HTML</title>
</head>
<body>
<h1><u>Ini adalah contoh Heading dengan Underline</u></h1>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
<b> Ini tulisan Bold </b>
<br>
<i>Ini tulisan italic/i>
<br>
<u>ini tulisan Underline </u>
<b><i>contoh tulisan Bold dan italic </i></b>
<b><i><u>contoh tulisan bold,italic,dan underline</u></i></b>
<h1><i>Italic heading</i></h1>
<h3><u>Underlined heading</u></h3>
</body>
</html>

Dan akan menghasilkan output seperti gambar 1 di bawah ini

Gambar 1
Dan itulah sebuah contoh dari element pada HTML , kita jumpa pada artikel HTML lainnya dan semoga membantu . 

Continue reading

at 0

Sebelum kita membahas lebih jauh lagi mengenai HTML. pertama kita mengenal terlebih dahulu apa itu HTML dan seperti apakah isi dari HTML itu sendiri , maka dari itu pertama kita akan memulai dengan pengenalan-pengenalan sederhana mengenai HTML.

  • <p> dinamakan tag pembuka dan </p> dinamakan tag penutup contohnya <p> ini tulisan </p>  *di dalam tag tersebut ada 'isi' tag yang kita inputkan dan akan dibaca oleh browser
  •  dari tag pembuka dan penutup dinamakan element. Contoh element : <p> ini tulisan </p>  
  •  Terdapat Struktur tag pada HTML yaknik mulai dari <head> <body> <footer> yang masing masing memiliki tag penutup
Contoh Struktur tag HTML
<!DOCTYPE html>
<html>
<head>
<title>Judul</title>
</head>
<body>
 Hello World 
</body>
</html>
maka akan menghasilkan output seperti gambar 1 di bawah ini

Gambar 1


Berikut adalah sedikit pengenalan dari HTML itu sendiri , selebihnya kita akan bahas pada artikel lainnya.
Continue reading

at 0
HTML (Hypertext Markup Language) adalah sebuah file text yang dapat dibaca oleh browser seperti (Chrome,Firefox,Internet Explorer, Safari, Dan lainnya) lalu , bagaimana caranya membuat sebuah web ? dan bagaimana kita mengatur sebuah heading , paragraf , gambar, video , suara , form, hingga table ? hingga terbentuknya sebuah halaman web ? . Dengan menggunakan HTML dan CSS kita dapat membuat suatu tampilan website yang cantik.Lalu bagaimana kita dapat menuliskan suatu Hypertext ? cukup mudah , kita bisa menggunakan word processors seperti Microsoft Word, Notepad atau kita dapat menggunakan text editor yang memang di peruntukan untuk mengolah kalimat tersebut seperti Sublime,Atom,Bracket hingga Adobe Dreamweaver.
  • Setiap file HTML berisi satu page web . Jika ingin membuat ratusan page web maka membuat ratusan file HTML.
  • File HTML ber extensi .html contohnya : tentang.html, iniweb.html , websitesaya.html dsb.
  • Begitupun dengan CSS . Memiliki extensi yang sama dengan HTML seperti : IniCss.css , contoh.css dsb.

Kesimpulannya dengan menggunakan HTML kita bisa membuat suatu tampilan web dan dengan CSS kita dapat mempercantik web yang kita buat.
Continue reading
Subscribe to: Comments (Atom)

Recent Post