Materi Tentang HTML Part 3

Oleh -
Hyperlink Pada HTML

Materi Tentang HTML Part 3


Dokumen HTML mempunyai kemampuan untuk memberikan link dari suatu teks dan / gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Borwser web akan menyorot teks atau gambar yang diindentifikasikan sebagai link dengan warna dan / atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link.
HTML menggunakan tag <a> yang disebut sebagai tag anchor untuk membuat suatu link kepada dokumen lain.

Contoh :

<a href="https://pilipmulyadi.blogspot.com"> pilipmulyadi.blogspot.com </a>

Hasil :


Materi Tentang HTML Part 3


Membuat link untuk window baru
Untuk membuat link supaya membuka window baru dapat di tambahkan atribut: target="_blank"

Contoh :

Buka halaman <a href="https://pilipmulyadi.blogspot.com" target="_blank">
pilipmulyadi.blogspot.com </a> di window baru

Hasil :


Materi Tentang HTML Part 3


Mailto
Berikut ini adalah contoh link untuk menghubungkan ke sebuah alamat email.

Contoh :

Kirim kritik dan saran anda ke <a href="mailto:mulyadipilip8@gmail.com"> Email Kami </a>

Hasil :


Materi Tentang HTML Part 3


Image Hyperlink
Hyperlink dengan gambar, jika gambar tersebut di klik akan mengarah ke alamat yang di tuju.

Contoh :

<a href="https://pilipmulyadi.blogspot.com"> <img src="downloadfile.png" width="100px" hight="100px"> </a>

Hasil :


Materi Tentang HTML Part 3

Peringatan : Untuk membuat sebuah link yang berupa gambar atau file html lainnya harus mempunyai folder khusus. Agar supaya gambar atau file yang kita jalankan berfungsi dengan baik.



List Pada HTML



List item digunakan untuk mengelompokan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).

Ordered List
Untuk membuat list terurut nomor, kita gunakan tag pembuka <ol> dan penutup </ol>, sedangkan untuk mendata setiap itemnya menggunakan tag <li> sebagai pembuka dan </li> sebagai penutup.

Contoh :

Daftar hari : <br>
<ol>
<li>    Senin        </li>
<li>    Selasa      </li>
<li>    Rabu       </li>
<li>    Kamis     </li>
<li>    Jumat     </li>
<li>    Sabtu     </li>
<li>    Minggu </li>
</ol>

Hasil :


Materi Tentang HTML Part 3

Ada beberapa tipe yang bisa kita gunakan.

<ol type="1">  - Default
<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

Contoh :

<ol type="i">
<li> Senin </li>
<li> Selasa </li>
</ol>
<ol type="A">
<li> Rabu </li>
<li> Kamis </li>
</ol>
<ol type="a">
<li> Jumat </li>
<li> Sabtu </li>
<li> minggu </li>
</ol>

Hasil :


Materi Tentang HTML Part 3


Unordered list
Untuk membuat list tidak terurut nomor, kita gunakan tag <ul>, sedangkan untuk mendata setiap itemnya menggunakan tag <li> sebagai pembuka dan </li> sebagai penutup.

Contoh :

Daftar hari : <br>
<ul>
<li> Senin  </li>
<li> Selasa </li>
<li> Rabu   </li>
<li> Kamis </li>
<li> Jumat </li>
<li> Sabtu </li>
<li> Minggu </li>
</ul>

Hasil :


Materi Tentang HTML Part 3

Ada 3 tipe yang bisa kita gunakan yaitu square, disc, circle.

Contoh :

Daftar hari : <br>
<ul type="square">
<li> Senin </li>
<li> Selasa </li>
</ul>
<ul type="disc">
<li> Rabu </li>
<li> Kamis </li>
</ul>
<ul type="circle">
<li> Jumat </li>
<li> Sabtu </li>
<li> Minggu </li>
</ul>

Hasil :


Materi Tentang HTML Part 3

Terimakasih Telah Mengunjungi Blog Ini Semoga Bermanfaat Untuk Kalian Semua. Untuk Part 4 Akan Di Upload Besok. Sekian Dari Saya Dan Terimakasih.
Lokasi: Cikarang, Bekasi, Jawa Barat, Indonesia
Hai perkenalkan nama saya Pilip Mulyadi. Saya adalah seorang siswa kelas 11 dan saya mengambil jurusan TKJ.

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Absen Dengan HTML Dan CSS

Oleh -
Image
Membuat Absen Dengan HTML & CSS Pasti kalian sudah tau bentuk absen pada umunya itu seperti apa. Kali ini saya akan memberikan tutorial bagaimana cara membuat Absen dengan HTML dan CSS. waktu di HTML Part 4 kalian sudah belajar bagaimana cara membuat tabel. Dan berikut adalah Codingnya : <!DOCTYPE html> <html> <head> <style> div.a {text-align: center;} body {background-color:gray;} td { font-weight: bold;        text-shadow: 1px 1px 3px;        color: red;        background-color: deepskyblue;} table {border: 7px solid red;} </style> </head> <body> <div class="a"> <table border="10"cellpadding="5"> <tr> <th colspan="3" style="color:red; background-color: yellow;"> Masukan Nama Jurusan </th> <th rowspan="2" bgcolor="orange"> Check </th> </tr> <tr> <th style="color:red; background-color:lime;"> Nama </...
Read more

Cara membuat kalkulator dengan HTML dan CSS

Oleh -
Image
Cara Membuat Kalkulator       Hai teman-teman perkenalkan nama saya Pilip Mulyadi, saya adalah seorang siswa kelas 11 dan saya mengambil jurusan TKJ atau yang disebut dengan (Teknik Komputer dan jaringan). Saya suka sekali dengan web desain dan pada kesempatan kali ini saya akan memberikan sebuah materi yang berisi tentang HTML dan CSS. Semoga dengan ilmu yang saya bagikan kepada kalian semua bermanfaat.      Ok teman - teman di kesempatan kali ini saya akan memberikan tutorial bagaimana cara membuat kalkulator. Kita sudah tahu bagaimana bentuk dari sebuah kalkulator. Kalkulator ini bisa berfungsi seperti kalkulator pada umumnya. Untuk membuat kalkulator di html, kalian harus menyediakan editor teks/Notepad dan simpan dengan format html. Daripada kalian penasaran coding htmlnya seperti apa, berikut dibawah inilah codingnya : <html> <head> <style> body { background-color: gray;} div.a {text-align: center;} div.b {text-align: left;} .ckr { w...
Read more

Materi Tentang JavaScript Lengkap

Oleh -
Image
1). Pengenalan JavaScript JavaScript  adalah bahasa pemrograman yang digunakan untuk membuat interaksi dan menambah fitur dinamis ke dalam halaman web. Untuk membuat website, memang tidak harus menggunakan JavaScript. Namun saat ini penggunaan JavaScript hampir selalu ada di setiap web modern. Bagi programer web, JavaScript merupakan salah satu bahasa pemrograman web yang wajib di kuasai. Pada awal pembuatan JavaScript di tunjukan untuk membuat interaksi antara User dengan website menjadi lebih cepat dan tanpa menunggu pemrosesan dari server. Misalnya sebuah form yang terdapat di website dengan JavaScript kita dapat langsung memvalidasi dan mengetahui setiap inputan masih kosong atau sudah di isi dengan benar atau belum secara cepat. Sedangkan ketika tidak menggunakan JavaScript (cara lama) maka isi form tersebut harus di kirim dan di proses di server website terlebih dahulu dengan cara mengklik tombol submit yang ada di di dalam form, dan ketika ada inputan form yang tidak valid a...
Read more