KLIK SALAH SATU IKLAN UNTUK MENUTUP
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Friday, October 26, 2018

Menghubungkan HTML dengan CSS | Apa itu Class dan Id

By Host October 26, 2018  No comments

Menghubungkan HTML dengan CSS - Apa itu Class dan Id
Belajar Optimalkan


Menghubungkan HTML dengan CSS

Tag <link> lah yang bisa digunakan untuk menghubungkan html dengan css, letakkan pada bagian element head pada struktur HTML.

Contoh applikasinya :




File html bisa diberi nama dengan : index.html

File css dengan nama style.css

Ini index.html :
<head>
<title>Menghubungkan HTML dengan CSS | www.bloggerdokter.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head> 
<body>
<h1>Belajar HTML menghubungkan html dengan css</h1>
</body>
Artinya :

  • atribut rel=”stylesheet” dan type=”text/css”

menjelaskan bahwa file yang dipanggil atau dihubungkan adalah file stylesheet atau css.

  • atribut href di gunakan untuk meletakkan lokasi dan nama file css yang ingin dihubungkan.

pada contoh ini file html dihubungkan dengan file css yang bernama style.css

Jika di jalankan pada browser maka tidak akan muncul apa-apa karena pada file html masih kosong
belum berisi element apapun selain struktur dasar html.

Tag h1 dalam tag body adalah CONTOH untuk meninjau apakah file css sudah berhasil terhubung dengan file html. 

Ini file CSS nya : style.css

h1{ color: orange; font-family: sans-serif; text-align: center; }

yang artinya kata kata dalam tag h1 akan tampil dengan warna orange,dst sesuai style.css

Hasilnya bisa buktikan sendiri ya..

Class dan Id pada HTML merupakan dasar yang harus di pahami sebelum mempelajari CSS.

Class dan id bisa di bilang sebagai penanda pada html,
maksud penanda di sini adalah element-element html dapat di beri tanda dengan class atau id. 

Untuk apa di beri tanda ? 
agar dapat di manipulasi menggunakan css atau javascript. 

Praktisnya begini :
jika ada empat kertas, semua kertas berwarna orange, kemudian kita ingin mengubah warna kertas yang keempat menjadi biru, nah di sinilah letak kegunaan class dan id, 
yakni, untuk memberikan tanda atau nama pada kertas  agar bisa di ubah dan kertas yang lain tidak akan berubah.

Perbedaan dari class dan id 
class di panggil pada css atau javascript dengan menggunakan tanda titik “.”
id di panggil pada css atau javascript dengan tanda pagar “#”, 

kelebihan  class : dapat di berikan pada banyak element html dan dapat di panggil sekaligus, sedangkan id hanya dapat bekerja pada satu penandaan saja, maksudnya satu nama id hanya bisa di berikan pada satu element saja. 

Aplikasinya seperti ini :
index.html

<head>
<title>Mengenal Class dan Id pada HTML | www.bloggerdokter.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Mengenal Class dan Id pada HTML<br/>www.bloggerdokter.com</h1>
<!-- contoh penggunaan class -->
<div class="kertas">kertas 1</div>
<div class="kertas">kertas 2</div>
<div class="kertas">kertas 3</div>
<!-- contoh penggunaan id -->
<div id="kertas">Kertas 4</div>
</body>

style.css

h1{ color: orange; font-family: sans-serif; text-align: center; }
 .kertas{ padding: 50px; width: 100px; color: #fff; margin: 10px; background: orange; }
#kertas{ width: 400px; color: #fff; background: blue; padding: 50px; }

Arti dari contoh applikasi diatas adalah :
kertas 1,  2 dan  3 diberi tanda dengan class yang kita beri nama “kertas”,
kertas 4 diberi tanda dengan id yang diberi nama kertas juga.

maka perbedaannya di sini akan tampak, bahwa

  • class bisa di panggil sekaligus, ini di buktikan dengan kertas 1,2 dan 3 di beri tanda class yang sama yaitu class kertas,  di panggil dengan tanda titik “.” 
  • kertas 4 diberi tanda dengan id kertas, di panggil dengan tanda pagar “#”.


Read More

Thursday, October 25, 2018

Belajar HTML : Gambar dan Iframe

By Host October 25, 2018  No comments

Belajar HTML Gambar dan Iframe
Belajar Optimalkan


Gambar

Untuk menampilkan gambar dengan HTML
harus menggunakan tag img kemudian masukkan atribut “src=” pada tag .

Atribut src berguna untuk menghubungkan dengan file gambar,




jadi atribut src ini di gunakan untuk pemanggilan lokasi dan nama file gambar.
Jika file gambar terletak satu folder dengan file html yang bertugas untuk menampilkan gambar ini maka kita bisa langsung memasukkan nama file gambar yang ingin di tampilkan tersebut pada atribut src ini, tapi jika file gambar berada pada folder yang berbeda dengan file html yang menampilkan gambar maka anda bisa menambahkan nama folder nya seperti misalnya “nama_folder/filegambar”.
Jika file gambar berada di luar folder file html yang menampilkan gambar maka anda bisa menambahkan perintah “../”.

Ukuran gambar yang tampil dengan menambahkan atribut height=”....”


untuk mengatur tinggi gambar, dan menambahkan aribut width=”....” untuk menentukan lebar gambar yang tampil.
Tetapi cara ini sangat tidak di rekomendasikan karena anda harus memberikan atribut height dan width pada semua gambar yang anda tampilkan.
Jadi cara untuk mengatur ukuran gambar yang benar anda bisa menambahkan class atau id pada tag dan kemudian mengatur tinggi dan lebarnya menggunakan CSS.
Seperti contoh di bawah ini :

<head>
<title>Menampilkan gambar pada HTML | www.bloggerdokter.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Menampilkan gambar pada HTML | www.bloggerdokter.com</h1>
<img class="gambar" src="boggerdokter.png">
</body>

style.css :

.gambar{
height: 300px;
width: 500px;
}

Iframe 

Merupakan sebuah tag html yang berfungsi untuk menampilkan halaman website tanpa harus membuka website tersebut.
Menggunakan tag <iframe> untuk menampilkan.
Caranya : tambahkan atribut src=”...” pada tag pembuka <iframe> untuk meletakkan link url dari website yang ingin anda tampilkan.

<html>
<head>
<title>Simak Nasehat Dokter di bloggerdokter.com</title>
</head>
<body>
<h1>
Simak Nasehat Dokter di bloggerdokter.com</h1>
<iframe height="1000px" src="https://www.bloggerdokter.com" width="1000px"></iframe>
</body></html>


Simak Nasehat Dokter di bloggerdokter.com


Read More

HTML , Halaman statis , Tag, Elemen dan Atribut nya

By Host October 25, 2018  No comments

HTML untuk SEO Blog

Belajar Optimalkan



Menjadi seorang blogger yang tulisannya ditayangkan atau di upload di internet mau tidak mau harus belajar juga cara penulisan yang dapat terbaca di situs yang dinaungi.

Apa cara penulisan nya?
iya, itulah yang namanya 

HTML (Hyper Text Markup Language), 

yang dalam bahasa indonesia nya adalah Bahasa Markah Hiper Teks (BMHT)



.
Merupakan bahasa Mark Up yang digunakan untuk membuat sebuah halaman website.
Dalam dunia pemograman berbasis website atau Web Programming, html menjadi pondasi dasar pada halaman website.

Sebuah website yang dinamis tidak cukup hanya menggunakan HTML, namun juga memerlukan
  • CSS, 
  • JavaScript dan 
  • PHP 
Jika halaman website dibuat hanya menggunakan HTML saja maka halaman website tersebut di sebut halaman statis karena tidak memiliki aksi atau fungsi-fungsi yang dapat mengelola website. Kalau hanya bisa halaman statis saja maka tentu saja pembuat website akan sangat di sibukkan dengan harus mengubah file HTML setiap kali ingin mengupdate artikel.

File HTML dapat dibuat dengan teks editor 

seperti notepad yang biasa disediakan oleh windows.
Lebih bagus lagi menggunakan teks editor yang memiliki fitur syntax highlighter seperti Notepad++, Sublime Text, Gedit, Kate, TextEdit yang disediakan oleh sistem operasi Mac , Nano yang disediakan oleh sistem operasi linux dan lain-lain.
File HTML disimpan dengan ekstensi html atau htm, dan dapat di eksekusi atau dijalankan menggunakan web browser baik itu Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain.

Sampai saat ini HTML sudah sampai pada versi 5. 
HTML5 sudah memiliki banyak sekali fitur tambahan salah satunya dengan HTML5 memungkinkan untuk membuat streaming video tanpa bantuan flash.

Element pada HTML 

merupakan isi atau objek yang berada diantara tag, maksudnya adalah isi yang ada diantara tag pembuka dan tag penutup. Di dalam element ini bisa berupa text ataupun tag lain nya.

HTML di disusun dengan tag-tag (penanda).

Tag <!– ….–>  untuk memberi sebuah komentar atau keterangan

Tag <!DOCTYPE html> untuk Mendefinisikan tipe dokument

Tag <a> 

untuk menunjukkan adanya sebuah anchor (digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain), ini selalu diikuti oleh atribut href, dimana di dalam href (hypertext reference) ini lah yang akan diisikan alamat yang dituju.
Applikasinya : <a href="...">text anchor</a>
dalam penulisan alamat Membuat Hyperlink Pada HTML memiliki dua jenis yaitu
1. alamat absolute yaitu penulisan alamat file yang disertai dengan alamat website.
2. alamat alternatif yang merupakan penulisan alamat file yang akan di panggil berada dalam aplikasi yang sama, jadi sebelum memanggil file yang diperlukan tidak menggunakan nama dari websitenya.

Tag <b> untuk membuat teks menjadi tebal

Tag <h1> berfungsi untuk membuat judul artikel. H1 adalah ukuran judul terbesar di HTML.

Tag <p> 

berfungsi untuk membuat paragraf.
  • Teks yang berada di dalam tag H1 akan ditampilkan lebih besar, karena teks itu adalah sebuah judul artikel. Sementara itu, teks yang berada di tag <p> akan ditampilkan dengan ukuran normal.
  • paragraf disini merupakan suatu tag untuk membuat suatu elemen dalam penulisan HTML. dalam paragraf itu sendiri terdapat 3 element/tag lain yang bisa dikombinasikan langsung dengan tag paragraf.
element tag yang dimaksud diatas adalah :
  1. paragraf rata kiri menggunakan align left 
  2. paragraf rata kanan menggunakan align right 
  3. paragraf rata tengah menggunakan align center 
  4. paragraf rata kiri kanan menggunaan align justify
Contoh penulisan : <p align="left">....isi text yang akan ditampilkan di blog....</p>

Tag </br> atau break 

dipasang hanya sebagai tag penutup saja akan hampir sama fungsinya dengan tag pembuka dan penutup <p></p>, ini dipakai lebih praktis jika tidak ada elemen atau atribut lain yang diperlukan. Dan perlu diingat fungsi sebenarnya adalah memisahkan teks satu dengan teks lainnya, dengan jarak yang lebih pendek daripada membuat paragraf baru.

Tag <h2>untuk membuat heading dua
<h3> membuat heading tiga dan seterusnya

Tag <head> merupakan kepala dokumen
Tag <title> harus diletakkan di dalam tag <head>.

Tag <body> dan </body>

tag ini merupakan tubuh dokumen. Setiap informasi yang ditulis di dalam penada ini, akan tampil di halaman web.

Tag <div> untuk mendefinisikan halaman
Tag <link> untuk mendefinisikan hubungan antar dokumen
Tag <script> untuk mendefinisikan client-side script

Tag <table> 

mendefinisikan tabel, 
  •  <th> table head atau bagian kepala pada tabel, untuk mendefinisikan sel header di dalam  sebuah tabel
  •  <td> table data merupakan tag yang digunakan untuk membuat kolom dalam baris dan untuk menampilkan data dalam tabel
  • <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam tabel HTML
Aplikasi nya : 
<table border=1> (border disini mengidentifikasikan garis tepi )
<tr>
<th>..</th>
</tr>
<tr> 
<td>....isi data dalam kolom...</td>
</tr>
</table>

Tag <ul> untuk mendefinisikan daftar dalam format bullet
Tag <li> untuk mendefinisikan list dalam bentuk bullet.
Tag <ol> untuk menampilkan daftar list dalam bentuk huruf atau angka.
Dengan menggabungkan CSS, JavaScript tag list ini bisa di gunakan untuk membuat menu navigasi pada halaman web, selain itu dapat digunakan untuk me-list bersarang (list yang berdasarkan dalam list yang lain). 

Tag <code> 

pada HTML termasuk kelompok inline level element, dan mengikuti alur text yang ada. penulisan format code ini misalkan dalam penulisan syntak yang akan ditampikan kedalam halaman web, maka untuk menampilkannya bisa menggunakan <code>  pada bagian <body> HTML.
Isi dari tag code tidak akan di eksekusi oleh browser, tetapi akan di tampilkan dalam bentuk text yang berformat syntax atau kode program. Perbedaan nya akan tampak pada bentuk font yang akan ditampilkan.

Tag <form> 

merupakan tempat penginputan data sebelum diproses oleh sistem, contohnya :
  • form login, 
  • form comment, 
  • form data user, dan lain sebagainya. 
untuk proses penginputan data dari form harus lengap dengan materi PHP, MYSQL, dan JavaScript. Di dalam tag <form> bisa ada :
  • tag <input> yang merupakan tag yang akan digunakan dalam form pengisian. Tag input ini memiliki banyak sekali bentuk yang bisa digunakan misalkan isian teks, password, checkbox, radiobutton, sampai dengan tombol submit berada dalam tag input. Beberapa atribut yang biasa ada dalam tag input adalah :
  1. <input type=’text’> adalah textbox yang bisa menerima inputan text misalkan username atau berupa inputan text yang pendek
  2.  type=’password’ : textbox yang menerima inputan text, akan tetapi text yang diinput akan di tampilkan sebagai tanda bintang atau titik, textbox ini biasanya digunakan untuk inputan password.
  3.  type=’submit’ : inputan ini berupa tombol (button) untuk memproses data inputan dari form
  4.  type=’checkbox’ : inputan berupa checkbox yang dapat di ceklis oleh user. 
  5. type=’radio’ : inputan yang berupa radio grup, dimana user dapat memilih salah satu dari pilihan yang disediakan.
  • tag<textarea> merupakan tag yang sama fungsinya dengan inputan text, hanya saja pada textarea ini dapat diisikan dengan lebih banyak teks didalamnya. untuk mengatur panjang dan banyak baris pada textarea ini dapat menggunakan CSS
  • tag<option>  
  • tag<select> merupakan tag yang digunakan untuk user memilih data yang sudah disediakan. Dalam penggunakan <select> selalu diikuti oleh tag<option> yang digunakan untuk membuat pilihan.

tag <form>

 ini dibutuhkan beberapa atribut untuk memproses data yang akan dikirim, dan biasanya itu adalah alamat dari sebuah halaman untuk memproses data inputan, atribut yang kedua berupa method, method ini menjelaskan bagaimana data yang akan dikirim oleh web browser.
nilai dari method biasanya get atau post.

Atribut HTML 

merupakan informasi tambahan yang digunakan di dalam tag pembuka.
Informasi tambahan ini bisa berupa instruksi untuk memberikan efek warna, ketebalan, dll.
Biasanya memiliki 2 bagian yaitu :
  1. nama , Atribut name merupakan atribut yang nilainya akan digunakan pada saat memproses data oleh web server. 
  2. nilai, atribut ini merupakan nilai awal yang akan ditampilkan pada saat menjalankan di browser
dapat ditulis name=”value”.
Penulisan nilai/value diapit oleh dua tanda kutip (bisa digunakan kutip satu atau kutip dua)
Penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag berikan atribut dan element dari tag itu sendiri.
Untuk mempercantik form yang anda buat harus menggunakan CSS

Contoh penggunaan atribut value :

<form>
 Nama Depan :<input type="text" value="nama"><br/>
Nama Belakang : <input type="text">
</form> Dan hasilnya seperti ini :

 Nama Depan :
Nama Belakang :




  • atribut readonly : jika menggunakan atribut ini maka nilai value tidak bisa di ubah





    • Contoh :
    <form> 
    Nama Depan :<input type="text" value="nama" readonly><br/> 
    Nama Belakang : <input type="text"> 
    </form> 

    Hasilnya :
    Nama Depan :
    Nama Belakang :



  • atribut disabled : atribut ini digunakan untuk menonaktifkan inputan. maksudnya elemen disabled bisa digunakan akan tetapi tidak bisa di gantu atau di edit.








  • atribut size : atribut ini mengatur lebar kotak inputan






    • Format contoh :
    <form>
    Nama Depan :<input type="text" value="nama" size="50"><br/>
    Nama Belakang : <input type="text">
    </form>

    Hasilnya :
    Nama Depan :
    Nama Belakang :



  • atribut maxlength : atribut ini digunakan untuk menentukan jumlah inputan teks yang di batasi






    • Contoh format :

    <form>
    Nama Depan :<input type="text" value="nama" maxlength="10"><br/>
    Nama Belakang : <input type="text">
    </form>

    Hasilnya :
    Nama Depan :
    Nama Belakang :



  • atribut list : 





    • atribut ini untuk menampilkan list pada form inputan

    Contoh format :
    <form> 
    <input list="city" name="indonesia" /> 
    <datalist id="city"> 
    <option value="surabaya"> </option><option value="malang"> </option><option value="jakarta"> </option></datalist> </form>

    Hasilnya : (klik kanan pojok ya, akan ada pilihan kota yang telah ditentukan)






  • atribut min dan max :  menentukan nilai minimum dan maksimum untuk elemen <input>. Atribut min dan maks digunakan untuk jenis inputan seperti : nomor, kisaran, tanggal,datetime, datetime-lokal, bulan, waktu, dan minggu





    • Contoh Format :
    <form>
    <input type="date" name="day" max="1979-12-31">
     <input type="date" name="day" min="2000-01-02">
    </form>

    Hasilnya : (klik pojok kanan)



  • laceholder Attribute. atribut ini digunakan untuk sebagai pengganti dari label field.




    • Contoh Format :
    <form>
    <input type="text" name="nama" placeholder="masukkan nama">
     </form>

    Hasilnya :



    Simbol di HTML kodenya selalu diawali dengan : &
    untuk simbol HTML berupa number ditambah dengan tanda pagar (#&)
    Read More