Pengertian Html Dan Rujukan Penggunan Nya

Pada kala modern sekarang ini, siapa sih diantara teman-teman yang tidak mengenal apa itu website?, niscaya semua teman-teman semua tau apa itu website nah pertanyaan yang sangat fundamental dengan apa website itu dibuat?. semua website yang ada diinternet, dibuat dengan memakai bahasa markup HTML, supaya lebih gampang mari kita mengenal apa itu HTML.

HTML yaitu kependekan dari Hyper Text Markup Language, html yaitu bahasa markup internet (web) berupa aba-aba dan simbol yang dimasukkan kedalam sebuah file yang ditujukan untuk ditampilkan didalam sebuah website. Singkatnya, HTML yaitu bahasa markup yang dipakai untuk membuat website. Website yang dibuat dengan HTML ini, sanggup dilihat oleh semua orang yang terkoneksi dengan internet. Tentunya dengan memakai aplikasi penjelajah internet (browser) ibarat Internet Explorer, Mozilla Firefox dan Google Chrome. Seperti yang sudah saya jelaskan sebelumnya, HTML yaitu kependekan dari Hyper Text Markup Language. Tapi mengetahui singkatannya saja tidak akan cukup. Karena itu saya akan menyajikan arti dari kata kata tersebut. 

 HyperText yaitu metode dimana kita "berpindah" disekeliling web, dengan mengeklik sebuah teks yang berjulukan hyperlink.Hyperlink yaitu sebuah teks khusus di internet, dimana dikala teks tersebut diklik, akan membawa kita ke halaman web selanjutnya/halaman web lain yang telah ditentukan.

Markup yaitu hal yang dilakukan oleh tag HTML kepada teks yang ada didalamnya. HTML menandai teks yang berada didalamnya sebagai tipe teks tertentu. Misalnya saja kalau kita menandai sebuah teks dengan tag html , maka teks tersebut akan bermetamorfosis italic (huruf yang miring). Sedangkan kalau kita menandainya dengan , maka teks tersebut akan berubah menajadi bold (huruf tebal). 

 Language yang berarti bahasa. HTML yaitu sebuah bahasa, yang mempunyai kata kata berupa aba-aba dan syntax ibarat bahasa yang lain. Saat ini bahasa HTML masih terus dikembangkan Hal ini dikarenakan pengguna internet semakin hari semakin berkembang pesat. Oleh alasannya yaitu itu bahasa HTML harus ditingkatkan lagi supaya sanggup membuat halaman web yang lebih berkualitas. Untuk itulah dibuat sebuah organisasi yang bertanggungjawab berbagi bahasa HTML. Organisasi ini berjulukan W3C. 

Struktur Dasar penulisan HTML sebagai berikut :

<!DOCTYPE html>

<html lang="en">

            <head>

                        <title>Point Website</title>

            </head>

           

            <body>

                        <div id="wrapper">

                                    <div id="container">

                                    <header>Point Website</header>

                                    <nav>

                                                <ul>

                                                        <li><a href="index.html">Home</a></li>

                                                        <li><a href="#">Pemograman</a>

                                                                 <ul class="submenu">

                                                                               <li><a href="#">PHP</a></li>

                                                                               <li><a href="#">HTML</a></li>

                                                                   </ul>

                                                            </li>

                                                            <li><a href="video.html">Tutorial</a></li>

                                                            <li><a href="kontak.html">Kontak</a>

                                                            </li><li><a href="#">Sitemap</a></li>

                                                </ul>

                                    </nav>

                                    <div id="content"> Bagian untuk kontent</div>

                                    <div id="sidebar">bagian untuk Sidebar</div>

                                    <footer>

                                                <p>copyright &copy; 2016 by </p>

                                    </footer>

                        </div>

            </div>

        </body>

</html>

Sekian pengenalan singkat kita perihal HTML, untuk penggunaan HTML selanjutnya akan saya bahas pada tutorial selanjutnya.

Sumber http://pointwebsite.blogspot.com/

Pengertian Tag, Elemen, Dan Atribut Pada Html

Pengertian Tag dalam HTML

Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag. 

Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag epilog ini. Objek disini sanggup berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku: “<” dan “>”.

Berikut yaitu format dasar penulisan tag HTML:

<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>  Sebagai contoh, perhatikan kode HTML berikut :

<p> Ini yaitu sebuah paragraf </p>

<p> yaitu tag pembuka, dalam rujukan ini p yaitu tag yang berfungsi untuk paragraf.

</p> yaitu tag epilog paragraf. Perbedaannya dengan tag pembuka terletak dari tanda backslash(/)

Jika kita lupa menunjukkan epilog tag, umumnya browser akan “memaafkan” hal ini dan tetap menampilkan kesannya seakan-akan kita menuliskan tag penutup. Walaupun hal ini memudahkan kita, namun tidak disarankan.

Contohnya lainnya, bila kita ingin menciptakan suatu text dalam sebuah paragraf di tulis tebal atau miring, di dalamHTML sanggup ditulis sebagai berikut :

<p>Ini yaitu sebuah paragraf. <i>Hanya kumpulan beberapa kalimat</i>.Paragraf ini terdiri dari <b>3 kalimat</b></p>. 

Hasil dari kode HTML diatas, jiaka dijalankan pada browser menjadi :

“Ini yaitu sebuah paragraf. Tidak lain dari kumpulan beberapa kalimat. Paragraf ini terdiri dari 3 kalimat.” Tag <i> pada kode HTML diatas menunjukkan perintah kepada browser untuk menampilkan text secara garis miring (i, akronim dari italic), dan tag <b> untuk menebalkan goresan pena (b, akronim dari bold).

Dari rujukan dan klarifikasi di atas ada beberapa hal yang harus teman-teman mengerti diantara nya. Terdapat pengecualian beberapa tag yang tidak berpasangan, menyerupai <br> untuk break (pindah baris) atau <hr> untuk horizontal line (garis horizontal). Tag ini dikenal juga dengan sebutan self closing tag atau void tag, untuk penulisannya sanggup ditulis dengan <br>, maupun <br />. 

HTML tidak case-sensitif, dalam artian penulisan <p> dianggap sama dengan <P>. Pada awal kemunculan HTML, programmer web umumnya memakai aksara besar untuk seluruh tag semoga membedakan dengan text yang berupa isi dari web. Namun varian HTML, xHTML mewajibkan aksara kecil untuk semua tag.Dalam HTML5, hukum ini kembali tidak diharuskan. Akan tetapi kebiasaan web programmer ketika ini yaitu memakai aksara kecil untuk seluruh tag.

Pengertian Element dalam HTML

Element yaitu isi dari tag yang berada diantara tag pembuka dan tag epilog (termasuk tag itu sendiri). Sebagai rujukan perhatikan kode HTML berikut:

<p> Ini yaitu sebuah paragraf </p>

Pada rujukan diatas, 

“<p>Ini yaitu sebuah paragraf</p>” merupakan element p. Element tidak hanya berisi text, namun juga sanggup tag lain. Contoh:

<p> Ini yaitu sebuah <em>paragraf</em></p>

Dari rujukan diatas,<p> Ini yaitu sebuah <em>paragraf</em></p> merupakan elemen p.

Pengertian Atribut dalam HTML

Atribut yaitu informasi aksesori yang diberikan kepada tag. Informasi ini sanggup berupa kode untuk warna dari text, besar aksara dari text, dll. Setiap atribut mempunyai pasangan nama dan nilai (value), dan ditulis denganname=”value”. Value diapit tanda kutip, boleh memakai tanda kutip satu (‘) atau dua (“). 

Contoh kode HTML:

<ahref="http://pointwebsite.blogspot.co.id/">ini yaitu sebuah link</a>

Pada kode HTML diatas, href=”http://www.duniailkom.com” yaitu atribut. href merupakan nama dari atribut, dan http://www.duniailkom.com yaitu value atau nilai dari atribut tersebut. 

Tidak semua tag membutuhkan atribut, tapi anda akan sering melihat sebuah tag dengan atribut, terutama atributid dan class yang sering dipakai untuk manipulasi halaman web memakai CSS maupun JavaScript. 

HTML mempunyai banyak atribut yang beberapa diantaranya hanya cocok untuk tag tertentu saja. Sebagai contoh, atribut “href” diatas hanya dipakai untuk tag <a> saja (dan beberapa tag lain). Penjelasan perihal tujuan dan pengertian dari atribut menyerupai href ini akan kita bahas pada tutorial-tutorial selanjutnya.

Sumber http://pointwebsite.blogspot.com/

Struktur Dasar Html

Setiap halaman HTML setidaknya mempunyai struktur dasar yang terdiri dari : Tag DTD atau DOCTYPE, taghtml, tag head, dan tag body. Inilah yang merupakan struktur paling dasar dari HTML, walaupun HTML tidak hanya berisi struktur tersebut. Agar lebih gampang memahaminya, silahkan buka text teman-teman, lalu ketikkan arahan berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Title dari Websiteku</title>
</head>
<body>
<h1>Selamat Pagi Dunia, Hello World!</h1>
</body>
</html>

Save sebagai index.html dan jalankan file dengan cara double klik file tersebut, atau klik kanan –> Open With –>Google Chrome. Kita akan membahas tag-tag yang ditulis tersebut pada toturial kali ini.

Pengertian DTD atau DOCTYPE

Tag paling awal dari pola HTML diatas ialah DTD atau DOCTYPE. DTD ialah abreviasi dari Document Type Declaration. Yang berfungsi untuk memberi tahu kepada web browser bahwa dokumen yang akan diproses ialah HTML.

DTD mempunyai banyak versi tergantung kepada versi HTML yang kita gunakan. Pada pola diatas, kita memakai DTD versi HTML 5. Sebelum HTML 5, DTD terdiri dari text panjang yang hampir tidak mungkin dihafal. Contohnya, DTD untuk xHTML 1.0 adalah:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Jika kita tidak menuliskan DTD, browser akan tetap menampilkan dan memproses halaman web kita menyerupai tidak terjadi apa-apa. Namun browser bergotong-royong menjalankan halaman HTML tersebut pada mode khusus yang disebut quirk mode. Pada quirk mode ini, web browser menerjemahkan halaman web dan terutama CSS sedikit berbeda dari seharusnya. Hal ini alasannya ialah web browser menganggap kalau tidak ada DTD, maka halaman tersebut kemungkinan ialah halaman web usang, dan memakai aturan-aturan yang berbeda supaya sanggup ditampilkan.

Tag <html>

Setelah DTD, tag berikutnya ialah tag <html>. Ini ialah tag pembuka dari keseluruhan halaman web. Semua arahan HTML akan berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>

Tag <head>

Elemen pada tag <head> umumnya akan berisi aneka macam definisi halaman, menyerupai arahan CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser. Tag <title> dalam pola kita dipakai untuk menampilkan title dari sebuah halaman web, dan biasanya ditampilkan pada bab paling atas web browser. Contohnya pada tampilan halaman.html, ‘Title dari Websiteku’ akan ditampilkan pada tab browser.

Tag <body>

Tag <body> akan berisi semua elemen yang akan tampil dalam halaman web, menyerupai paragraf, tabel, link, gambar, dll. Tag body ini ditutup dengan </body>. Sebagian besar waktu kita dalam merancang web ialah di dalam tag <body> ini.

Perhatikan bahwa setiap tag akan diakhiri dengan epilog tag. Termasuk <html> yang merupakan tag paling awal dari sebuah halaman web.

Stuktur HTML yang kita bahas disini ialah struktur sangat sederhana. Sebuah halaman web sanggup mempunyai ratusan bahkan ribuan baris, dan memakai aneka macam tag HTML.

Sekian klarifikasi mengenai Struktur Dasar HTML untuk penggunaan HTML yang lain akan aku bahas pada tutorial selanjutnya.

Sumber http://pointwebsite.blogspot.com/

Cara Menciptakan Judul (Heading) Di Html

HTML menyediakan tag khusus untuk menciptakan judul atau di dalam HTML lebih di kenal dengan istilah:heading. Heading dirancang terpisah dari paragraf. Tag Heading biasanya dipakai untuk judul dari paragraf, atau bab dari text yang merupakan judul.

Tag heading di dalam HTML terdiri dari 6 tingkatan, yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Tag heading secara default akan ditampilkan oleh web browser dengan abjad tebal (bold). Tampilan dari tag header juga dibentuk bertingkat. Tag header <h1> mempunyai ukuran abjad paling besar, sedangkan <h6> terkecil.

Berikut yaitu pola penggunaan tag heading di dalam HTML:

<!DOCTYPEhtml>

<html>

<head>

  <title>penggunaan tag heading</title>

</head>

<body>

  <h1>ini yaitu judul dengan h1 </h1>

  <h2>ini yaitu judul dengan h2 </h2>

  <h3>ini yaitu judul dengan h3 </h3>

  <h4>ini yaitu judul dengan h4 </h4>

  <h5>ini yaitu judul dengan h5 </h5>

  <h6>ini yaitu judul dengan h6 </h6>

</body>

</html>

Kemuadin simpan dengan nama heading.html, dan jalankan pada browser maka akibatnya akan menyerupai berikut ini :

Biasanya dalam sebuah halaman akan ada hanya 1 tag <h1>, dan beberapa tag <h2> dan <h3> dengan beberapa tag <p>. Berikut yaitu pola struktur artikel HTML sederhana dengan memakai tag <p> dan beberapa tag heading:

<!DOCTYPE html>

<html>

<head>

<title>Point Website</title>

</head>

<body>

                                <h1>Judul Artikel</h1>

                                <p>pembahasan artikel</p>

                                <h2>Sub Judul Artikel 1</h2>

                                <p>pembahasan sub artikel 1</p>

                                <h2>Sub Judul Artikel 2</h2>

                                <p>pembahasan sub artikel 2.1</p>

                                <h2>Sub Sub Judul Artikel 2.1</h2>

                                <p>pembahasan sub sub artikel 2.1</p>

</body>

</html>

Maka bila dijalankan pada browser, makahasil nya akan menyerupai berikut :

Search Engine menyerupai Google akan menawarkan nilai lebih untuk heading. Biasanya semakin tinggi tingkat heading, semakin tinggi pula pengutamaan search engine. Tag <h1> dianggap lebih bernilai dari pada <h2>. Tag<h1> umumnya dipakai untuk judul sebuah konten / artikel, sehingga dianggap sanggup mewakili keseluruhan artikel.

Sekian tutorial aku perihal Cara Membuat Judul (heading) di HTML, supaya sanggup membantu teman-teman dalam mempelajari HTML. Untuk tutorial yang lain akan aku bahas pada tutorial selanjutnya.

Sumber http://pointwebsite.blogspot.com/

Cara Menciptakan Link Pada Html

Link yakni tujuan kata Hypertext dari kepanjangan HTML. Pada Tutorial kali ini aku akan membahas cara menciptakan link pada HTML. Tujuan kata Hypertext dari HTML yakni menciptakan sebuah text yang ketika di-klik akan pindah ke halaman lainnya. HTML memakai tag <a> untuk keperluan ini. Link ditulis dengan <a> yang merupakan abreviasi cari anchor (jangkar). Setiap tag <a> setidaknya mempunyai sebuah atribut href. Dimana href berisi alamat yang dituju (href yakni abreviasi dari hypertext reference). Ada dua model untuk menciptakan link diantara ada link Alamat Absolute dan link Alamat Relatif. Agar lebih gampang dimengerti aku sudah buatkan pola dibawah ini, silahkan buka text editor teman-teman dan buat instruksi ibarat dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <title>Penggunaan Tag Link </title>
</head>
<body>
  <h1>Belajar Tag Link</h1>
  <p>Saya lagi berguru HTML di <a href="http://pointwebsite.blogspot.co.id"></p>
</body>
</html>

Maka jikalau dijalankan pada web browser akan menghasilkan ibarat ini :

Pada pola diatas kita menuliskan alamat link secara lengkap dengan bab “http://www.”. Penulisan ibarat ini disebut juga dengan external link, yang berarti kita menciptakan link ke alamat lain di internet, atau lebih dikenal dengan sebutan alamat absolut.

Alamat sewenang-wenang yakni penulisan alamat file dengan menyertakan nama website, seperti: href=”http://pointwebsite.blogspot.co.id/”, atau href=”http://www.wikipedia.org”.

Alamat absolute ditulis dengan lengkap, ibarat http://www.contohweb.com, atau jikalau kita merujuk kepada halaman tertentu pada website tersebut teman-teman sanggup menciptakan nya menjadi http://www.contohweb.com/nama_halaman.html.

Namun jikalau kita ingin menciptakan link di dalam situs yang sama, maka tidak perlu menyebutkan alamat lengkap tersebut. Tetapi cukup mencantumkan alamat file yang dituju relatif kepada file ketika ini. Jenis alamat ini disebut alamat relatif.

Sebagai pola alamat relatif,apabila kita ingin menciptakan link kepada file kedua.html pada folder yang sama dengan file ketika ini, maka atribut hrefnya, berisi: href=”kedua.html”. Agar lebih memudahkan silahkan teman-teman buat satu folder dan didalam folder tersebut teman-teman buat dua file HTML yang satu nama file nya pertama.html dan yang kedua nama file nya kedua.html. Silahkan ketikkan code dibawah ini untuk file pertama.html.

<!DOCTYPE html>

<html>

<head>

<title>Penggunaan Tag Link </title>

</head>

<body>

<h1>Belajar Tag Link</h1>

<p>Ini halaman HTML pertama aku </p>

<p>Lanjutkan pada halaman HTML kedua saya<a href="kedua.html">Halaman kedua</a></p>

</body>

</html>

Kemudian ketikan lagi untuk file kedua.html dengan code di bawah ini :

<!DOCTYPE html>

<html>

<head>

<title>Penggunaan Tag Link </title>

</head>

<body>

<h1>Belajar Tag Link</h1>

<p>Ini halaman HTML kedua saya</p>

<p>kembali pada halaman HTML pertama saya<a href="pertama.html">Halaman pertama</a></p>

</body>

</html>

Silahkan teman-teman jalankan file pertama.html dan file kedua.html pada web browser lalu klick pada text yang bergaris bawah tersebut.

Perlu diperhatikan, Alamat relatif maksudnya yakni relatif kepada file daerah kita memanggil link ini. Seandainya nama file kita yakni belajar_link.html, dan dalam folder yang sama terdapat halaman belajar_list.html, kita sanggup memakai href=”belajar_list.html” untuk menciptakan link ke halaman belajar_list.html .

Jika file tersebut berada di dalam folder lagi_belajar, maka alamat relatif nya menjadi href=”lagi_belajar/belajar_list.html”. Namun bagaimana jikalau halaman tersebut berada 2 tingkat di luar folder ketika ini? Kita sanggup menggunakan href =”../../belajar_list.html”, untuk naik 2 folder diatasnya.

Atribut tag <a>: target

Atribut penting lainnya dari tag <a> yakni target. Atribut ini dipakai untuk memilih apakah link yang dituju terbuka di jendela browser ketika ini, atau terbuka di jendela baru. Secara default, setiap link yang kita tulis akan terbuka pada jendela yang sama (menimpa halaman web ketika ini). Tetapi apabila kita ingin halaman tersebut terbuka pada tab baru, gunakan atribut target=”_blank”.

Contoh penggunaan tag link <a> dengan atribut sasaran :

<!DOCTYPE html>

<html>

<head>

<title>Penggunaan Tag Link </title>

</head>

<body>

<h1>Belajar Tag Link</h1>

<p>Ini halaman HTML pertama aku </p>

<p>Lanjutkan pada halaman HTML kedua aku <a href="kedua.html" target="_blank">Halaman kedua</a></p>

</body>

</html>

Silahkan teman-teman jalankan dan coba klik link tersebut, maka halaman kedua akan terbuka di tab baru, dan tidak menimpa tab ketika ini.

Selain dipakai untuk menghubungkan halaman HTML, Tag <a> juga sanggup dipakai untuk dihubungkan ke bab lain dari halaman yang sama, atau disebut Internal Link. Cara pembuatan internal link yakni dengan menciptakan link berisi atribut id dari tag lain. Untuk lebih jelasnya, akan kita bahas pada tutorial selanjutnya.

Sumber http://pointwebsite.blogspot.com/

Cara Menciptakan List Dalam Html

Dalam sebuah website List paling sering dipakai untuk menciptakan sajian dan tag list juga sanggup dipakai untuk nested list atau list bersarang. Dalam HTML, tag list terdiri dari tiga jenis, ordered list (berurutan), unordered list (tidak berurutan) dan Description List. Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak. Ordered list memakai tag <ol>, dan unordered list memakai tag <ul>, sedangkan untuk list sendiri memakai tag <li>. Untuk menciptakan Description List, seluruh list harus berada di dalam pasangan tag <dl> dan </dl>.Untuk setiap deskripsi atau judul istilah, memakai tag <dt>. Sedangkan untuk klarifikasi istilah tersebut, kita memakai tag <dd>. Untuk memudahkan teman-teman aku sudah menciptakan contoh-contoh untuk setiap list di atas.

Berikut yaitu teladan arahan HTML untuk menciptakan ordered list memakai tag <ol> :

<!DOCTYPE html>

<html>

<head>

 <title>Point Website</title>

</head>

<body>

  <h1>Daftar Buku</h1>

  <ol>

                <li>Buku Biologi</li>

                <li>Buku Matematika</li>

                <li>Buku Bahasa Inggris</li>

                <li>Buku Sejarah</li>

                <li>Buku Bahasa Arab</li>

  </ol>

</body>

</html>

Jika dijalankan pada web browser maka alhasil akan ibarat berikut ini :

Untuk menciptakan unordered list, tinggal ganti tag <ol> menjadi <ul>. Berikut yaitu teladan arahan HTML untuk menciptakan unordered list memakai tag <ul> :

<!DOCTYPE html>

<html>

<head>

  <title>Point Website</title>

</head>

<body>

  <h1>Daftar Buku</h1>

  <ul>

                <li>Buku Biologi</li>

                <li>Buku Matematika</li>

                <li>Buku Bahasa Inggris</li>

                <li>Buku Sejarah</li>

                <li>Buku Bahasa Arab</li>

  </ul>

</body>

</html>

Jika dijalankan pada web browser maka alhasil akan ibarat berikut ini :

Penggunaan tag list pada HTML tidak hanya untuk menciptakan daftar saja. Dengan CSS, tag list sanggup dipakai untuk menciptakan sajian navigasi di dalam halaman web, ibarat sajian Home, Contact us, About, dll. Tag list juga sanggup dipakai untuk nested list, atau list bersarang, yang artinya sebuah list yang berada di dalam list lainnya.

Selanjutnya kita akan menciptakan Description List. Berikut yaitu teladan arahan HTML untuk menciptakan Description.

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

                <h1>Daftar list dalam HTML</h1>

                                <dl>

                                       <dt>Ordered List</dt>

                                        <dd>Ordered list akan ditampilkan dengan angka.</dd>

                                        <dt>Unordered List</dt>

                                        <dd>Unordered list akan ditampilkan dengan bulatan atau kotak</dd>

                                        <dt>Description List </dt>

                                        <dd>Gambar ini hasil dari Description List.</dd>

                                </dl>

</body>

</html>

Silahkan teman-teman jalankan pada web browser, maka alhasil akan ibarat berikut :

Dari hasil gambar diatas sanggup kita lihat bahwa isi dari klarifikasi pada tag <dd> akan ditampilkan dengan sedikit menjorok (indent) dari bab istilahnya.

Sekian tutorial aku perihal Cara Membuat List Dalam HTML, biar sanggup membantu teman-teman dalam mempelajari HTML. Untuk tutorial yang lain akan aku bahas pada tutorial selanjutnya.

Sumber http://pointwebsite.blogspot.com/

Cara Menambahkan Gambar Dalam Html

Sebuah halaman HTML niscaya mempunyai gambar, selain sebagai sarana untuk memperindah halaman HTML, gambar juga berkhasiat sebagai klarifikasi dari kat-kata, alasannya ialah tidak semuanya sanggup dijelaskan dengan kata-kata, makanya diharapkan gambar. 

Tidak heran pada setandard web ketika ini sangat jarang kita lihat lahaman HTML tanpa adanya gambar. Dengan memasang gambar pada halaman HTML maka halaman tersebut akan lebih manis dan lebih segar. Pada tutorial kali ini kita akan mempelajari cara menampilkan gambar kedalam halaman web dengan penggunaan tag <img>.

Fungsi atribut src dalam tag <img>

Atribut src ialah abreviasi dari source, merupakan atribut yang berisi perihal alamat dari sebuah gambar yang akan ditampilkan. Alamat ini sanggup relatif atau absolute. (perbedaan perihal alamat relatif dan alamat absolute telah kita bahas pada Cara Membuat Link Pada HTML). Untuk memudahkan kita dalam mempelajari image ini, sebaik kita pribadi memperaktekkannya. Untuk tutorial kali ini kita membutuhkan sebuah gambar, gambar sanggup berupa JPEG, PNG, maupun GIF.

Dibawah ini aku sudah sediakan pola Code HTML untuk menampilkan gambar. Pada pola diibawah ini file Gambar dengan file HTML-nya berada dalam satu folder. Teman-teman sanggup menulis code diibawah ini dan simpan dengan nama gambar.html

<!DOCTYPE html>

<html>

<head>

   <title>Penggunaan Tag Image</title>

</head>

<body>

   <h1> Menampilkan Gambar </h1>

   <img src="gambar.jpg" />

</body>

</html>

Maka kalau teman-teman jalankan pada web browser akan menghasilkan menyerupai gambar berikut  ini :

Hati-hati dengan penulisan alamat dari gambar, sering gambar gagal tampil alasannya ialah letak file HTML berbeda dengan file Gambar. Pada CODE diatas file HTML dan file GAMBAR nya berada dalam satu folder sehingga kita sanggup pribadi memanggil nama dari file gambar tersebut, kalau file gambar berbeda folder dengan file HTML-nya kita haru sebutkan nama folder nya. Contoh file gambar berada dalam folder images maka kita harus merubah code HTML nya menyerupai ini : <img src="images/gambar.jpg" />

Fungsi Atribut alt dalam tag <img>

Dalam tag image juga mempunyai atribut penting lainnya, yaitu alt. Atribut alt ialah abreviasi dari alternative description, dimana alt dipakai untuk keterangan dari gambar kalau gambar tersebut gagal ditampilkan oleh browser, atau kalau web broser telah disetting untuk tidak menampilkan gambar Atribut ini lah yang akan memperlihatkan keterangan perihal gambar tersebut. Berikut ialah Contoh penggunaan atribut alt pada tag <img>:

<!DOCTYPE html>

<html>

<head>

   <title>Penggunaan Tag Image</title>

</head>

<body>

   <h1>Menampilkan Gambar</h1>

   <img src=" gambar.jpg" alt=" Sebuah halaman HTML niscaya mempunyai gambar Cara Menambahkan Gambar dalam HTML "font-family: "times new roman" , "serif"; font-size: 14.0pt; line-height: 115%;">Gambar vektor aku " />

</body>

</html>

Hasil dari code diatas sama seperi gambar pertama alasannya ialah alt dipakai untuk keterangan dari gambar kalau gambar tersebut gagal ditampilkan oleh browser. Atribut alt juga berperan penting untuk mesin pencari menyerupai Google. Karena cara kerja google yang meng-index seluruh situs dengan memproses goresan pena yang ada, Google ‘tidak mengerti’ isi dari gambar tanpa pemberian deskripsi yang ditulis dalam atribut alt. Hal ini menambah pentingnya menambahkan atribut alt.

Mengatur ukuran gambar dengan Atribut width dan height dalam tag <img>

Selain atribut yang sudah dijelaskan diatas masih ada satu atribut lain yang juga sangat penting yaitu width dan height. Atribut width dan height ialah Atribut yang mengatur ukuran dari gambar yang kita tampilkan. Berikut pola penggunaan atribut width dan height pada tag <img>:

<!DOCTYPE html>

<html>

<head>

   <title>Penggunaan Tag Image</title>

</head>

<body>

   <h1> Menampilkan Gambar </h1>

   <img src="gambar.jpg" alt=" Sebuah halaman HTML niscaya mempunyai gambar Cara Menambahkan Gambar dalam HTML "font-family: "times new roman" , "serif"; font-size: 14.0pt; line-height: 115%;">Gambar vektor aku " height="200" width="100" />

</body>

</html>

Maka kalau teman-teman jalankan pada web browser akan menghasilkan menyerupai gambar berikut  ini :

Pada penggunaan tag image diatas, gambar terlihat tidak proporsional, hal ini alasannya ialah penggunaan atribut width dan height ‘memaksa‘ gambar untuk tampil dengan nilai yang kita tetapkan. Untuk mempertahankan proporsi gambar, namun tetap menciptakan gambar menjadi besar/kecil, cantumkan hanya salah satu atribut saja (width saja atau height saja, namun tidak keduanya). Misalkan kalau kita memutuskan atribut height =200px (tanpa mencantumkan width), maka web browser akan menampilkan gambar dengan tinggi 200px, dan menghitung secara otomatis lebar gambar semoga gambar tetap proporsional. Berikut ini pola yang memakai hanya salah satu atribut saja.

<!DOCTYPE html>

<html>

<head>

   <title>Penggunaan Tag Image</title>

</head>

<body>

   <h1> Menampilkan Gambar </h1>

   <img src="gambar.jpg" alt="Gambar Koala" height="200" />

</body>

</html>

Maka kalau teman-teman jalankan pada web browser akan menghasilkan menyerupai gambar berikut  ini :

Tutorial diatas hanya sebatas untuk menampilkan gambar, memperlihatkan keterangan dari gambar dan mengatur lebar atau tinggi dari gambar. Jika teman-teman mau untuk memperindah dan mengatur letak tampilan dari gambar tersebut, teman-teman sanggup memakai CSS. Terimakasi atas kunjungan nya, untuk tutorial lain nya akan aku bahas dilain waktu.

Sumber http://pointwebsite.blogspot.com/

Apa Sih 'Html' Itu?

html

HTML - Bagi seorang Blogger niscaya tidak abnormal dengan goresan pena yang ada pada gambar di atas. Ya, itulah HTML. Dan mungkin ada banyak orang yang masih bertanya-tanya apa sih HTML itu? Yap, Mas kali ini akan membahas wacana "Apa sih HTML itu?"

HTML atau kependekan dari Hyper Text Markup Language adalah sebuah bahasa markup yang dipakai untuk menciptakan sebuah halaman web, menampilkan banyak sekali gosip di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII biar sanggup menghasilkan tampilan wujud yang terintegerasi. HTML sendiri,sebenarnya hanya dokument biasa,hanya dokumen ini sanggup dilakukan untuk pemformatan text,peletakan object,maupun Hypertext yakni text yang berfungsi ganda sebagai penghubung (Link)antara halaman satu dengan yang lain.

• Bagaimana sih menciptakan HTML?

Untuk menciptakan sebuah dokumen HTML kita memerlukan sebuah software pendukung, antara lain:

- Notepad+

- Adobe Dreamweaver

- Sublime Text

- Dll

Bagaimana? Masih kurang jelas? Postingan Mas selanjutnya akan membahas semua wacana bahasa pemrograman web. 

Demikian gosip wacana "Apa sih 'HTML' itu?". Dan tunggu postingan-postingan selanjutnya.

Sumber http://massrizky.blogspot.com/

Html : Pengertian Tag, Element, Dan Attribut Dalam Html

html

Kali ini Mas akan membahas perihal pengertian Tag, Element dan Attribut dalam HTML dalam pemrograman web. buat sahabat sekalian yang belum paham apa itu JavaScript langsung aja kita bahas.

Pengertian Tag dalam HTML

html-tag

            Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag.

Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag epilog ini. Objek disini sanggup berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku: “<” dan “>”.

Berikut yaitu format dasar penulisan tag HTML:

<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>

Sebagai contoh, perhatikan kode HTML berikut :

<p> Ini yaitu sebuah paragraf </p>

§  <p> adalah tag pembuka, dalam rujukan ini p adalah tag untuk paragraf.

§  </p> adalah tag epilog paragraf. Perbedaannya dengan tag pembuka terletak dari tanda forward slash (/)

Jika lupa memperlihatkan epilog tag, umumnya browser akan “memaafkan” kesalahan ini dan tetap menampilkan kesannya seperti kita menuliskan tag penutup. Walaupun ini tampaknya memudahkan, tidak jarang malah bikin bingung.

Pengertian Element dala HTML

 

html-element

            Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup, termasuk tag itu sendiri dan atribut yang dimikinya (jika ada). Sebagai rujukan perhatikan kode HTML berikut:

<p> Ini yaitu sebuah paragraf </p>

Pada rujukan diatas, “<p>Ini yaitu sebuah paragraf</p>” merupakan element p.

Element tidak hanya berisi text, namun juga sanggup tag lain.

<p> Ini yaitu sebuah <em>paragraf</em> </p>

Dari rujukan diatas,<p> Ini yaitu sebuah <em>paragraf</em> </p> merupakan elemen p. Dalam pembahasan atau tutorial perihal HTML, tidak jarang istilah “tag” dan “element” saling dipertukarkan.

Pengertian Attribut dalam HTML

 

html-attribut

Atribut adalah informasi pemanis yang diberikan kepada tag. Informasi ini sanggup berupa kode untuk warna dari text, besar karakter dari text, dll. Setiap atribut mempunyai pasangan nama dan nilai(value), dan ditulis dengan name=”value”. Value diapit tanda kutip, boleh memakai tanda kutip satu (‘) atau dua (“).

Contoh kode HTML:

<a href="www.massrizky.cf">ini yaitu sebuah link</a>

Pada kode HTML diatas, href=”http://www.duniailkom.com” adalah atribut. href merupakan nama dari atribut, dan www.massrizky.cf adalah value atau nilai dari atribut tersebut.

Tidak semua tag membutuhkan atribut, tapi anda akan sering melihat sebuah tag dengan atribut, terutama atribut id dan class yang sering dipakai untuk manipulasi halaman web menggunakan CSS maupun JavaScript.

Pada artikel kali ini, kita telah mempelajari salah satu aspek terpenting di dalam HTML, yakni Pengertian Tag, Elemen, dan Atribut pada HTML. Dan tunggu artikel-artikel selanjutnya.

Sumber http://massrizky.blogspot.com/