Hyperlink

---

 Digunakan untuk menghubungkan ke seumber lain seperti website, dokumen, gambar, dan file. Secara default, link ditampilkan :

• Unvisited link : bergaris bawah dan berwarna biru (default)
• Visited link : bergaris bawah dan berwana ungu (default)
• Active link : bergaris bawah dan berwarna merah (default)

Syntax penulisan hyperlink

<a href ="URL">link text</a>

Contoh:

Penulisan html	Hasil
<a href ="URL">link text</a>	Klik disini untuk membuka google

Jenis-jenis Link

• Link Relatif
  link yang tidak memerlukan nama protokol atau nama domain, dan biasa digunakan ketika merujuk pada file di dalam website atau direktori yang sama
  Contoh :
  <a href = "belajar.html">belajar</a>
• Link Absolut
  Dimulai dengan menggunakan protokol (http://), nama domain dan nama path. Biasa digunakan ketika merujuk pada file yang bersumber diluar dari website atau direktori
  Contoh :
  <a href = "https://www.enterkomputer.com/ssd.php">Cari ssd disini</a>

Bookmark Link

Berfungsi untuk menavigasi ke bagian halaman tertentu pada halaman web. Cara kerjanya, ketika link diklik, halaman akan scroll ke lokasi yang dituju. Bookmark link butuh penanda agar saat link diklik akan menampilkan tulisan yang sudah diberi penanda
contoh :

pada web ini saya akan beri tanda pada judul Unordered List, Untuk lebih lengkap liat pada gambar dibawah.

Kemudian saya masukan code referensi untuk menavigasikan ke tanda yang sudah dibuat seperti dibawah ini :

<a href = "#Top">Klik disini untuk kembali ke Atas</a>

Menghasilkan : Klik disini untuk kembali ke Atas

Link Email

Fungsi Link email adalah untuk mengirim pesan kepada suatu email yang dituju sesuai ketentuan pembuat website. Cara kerjanya adalah ketika pengunjung klik link email, secara otomatis muncul sebuah pesan baru pada aplikasi email dan menyisipkan alamat email pada bagian to.

Contoh : <a href="mailto:davidrussel7771@gmail.com">Klik disini untuk mengirim email pada author</a>

Hasil : Klik disini untuk mengirim email pada author

[Kembali Ke Daftar List]

List

List Daftar

---

Pengantar

Fungsi List adalah menyusun teks menjadi format dalam item. Sehingga penulisan menjadi lebih rapi dan teratur.
Secara garis besar List pada html terbagi menjadi 3, yaitu :

• Bulleted (Unordered List)
• Numered (Ordered)
• Definition

Bullleted (Undordered List)

Bulleted List digunakan untuk melakukan format informasi menggunakan gambar keil yang disebut sebagai bullets.
Unordered List biasanya digunakan untuk menampilkan item-item tanpa perlu urutan mana yang lebih dulu.
Unordered List dimulai dengan tag <ul>...</ul>

Tipe-tipe bullet:

Type	Hasil
Disc
Square
Circle

Syntax Penulisan

<ul> <li> element HTML </li> </ul>

Penjelasan

• Di dalam tag <ul>..</ul> hanya bisa berrisi tag <li>...</li> untuk mendefiniskan setiap item
• Didalam tag <li>...</li> berisi element atau konten item dari html yang akan dibuat. Berupa :
  • Gambar
  • Link
  • Tulisan
  • dsb.

• Untuk mengganti tipe bullet, dapat mengguanakan attribut:

  Style = "list-style-type : nama tipe/jenis bullet"

Contoh

Numered (Ordered) List

Digunakan untuk memformat informasi mengguanakan urutan angka atau huruf.
Dimulai dengan tag <ol>..</ol>
Tipe-tipe numered list :

• Huruf : A,B,C (upper-alpha)
• Huruf : a,b,c (lowe-alpha)
• Huruf Romawi : I,II,III (upper-roman)
• Huruf Romawi : i,ii,iii (lower-roman)

Syntax Penulisan

<ol>  <li> Element Html </li> <ol>

Untuk mengganti tipe numered list dapat menggunakan attribute :

Style="list-style-type : nama tipe/jenis numered list"

Contoh

Description List

Fungsi Description List untuk menandai berbagai jenis pasangan nilai, seperti istilah dan definisi, pertanyaan dan jawaban.

Elemen	Fungsi
<dl>...</dl>	Memulai dan mengakhiri daftar deskripsi
<dt>...</dt>	Mendefinisikan istilah, nama atau bagian grup dalam daftar deskripsi
<dd>...</dl>	Menjelaskan deskripsi dari <dt>

Contoh

Semantic Tag Html Baru

Tag	Keterangan
<details>...</details>	Mendefinisikan konten detil tambahan yang bias dilihat dan disembunyikan oleh pengguna
<mark>...</mark>	Mendefinisikan teks di Highlighted
<meter>...</meter>	Mendefinsikan jangkauan scalar dalam jangkauan ukuran yang bias dikenal.
<progess>...</progress>	Mendefinisikan kemajuan dari suatu proses
<summary...</summary>	Mendefinisikan judul untuk elemen <details>
<wbr>...</wbr>	Mendefinisikan word break opportunity yaitu pada posisi mana seharusnya enter terjadi pada kata yang panjang

[Melanjutkan ke Hyperlink]

Tugas di Kelas

Welcome to My Blog

---

Nama : _David ^Steven
NIM : ¹⁷0210₃₉₆
Nama : _Binsar ^Rodonni
NIM : ¹⁷0210₀₂₇
Nama : _Roffif ^Aldy
NIM : ¹⁷0210₄₃₄
Nama : _Rizky ^Priambudi
NIM : ¹⁷0210₃₆₁

Perhatikan penulisan Tag <p>

Terima Kasih

Belajar HTML & Tag Dasar

Belajar Html

---

 HTML adalah singkatan dari Hyper Text Mark Up Language. Merupakan sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCCI agar dapat menghasilkan tampilan wujud yang terintegrasi.Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

ref : https://id.wikipedia.org/wiki/HTML

Beberapa Contoh Tag - tag dasar html :
Note: Tag tidak mengandung case sensitive, jadi penulisan huruf besar dan kecil dianggap sama

Table

No.	Tag	Fungsi	Contoh	Hasil
1.	<b></b>	Bold	<b>ABC</b>	ABC
2.	<i></i>	Italic	<i>ABC</i>	ABC
3.	<u></u>	Underline	<u>ABC</u>	ABC
4.	<strike></strike>	Menampilkan garis strike yang berada ditengah tulisan	<strike>ABC </strike>	ABC
5.	<big></big>	Menampilkan huruf yang lebih besar	<big>ABC</big>	ABC
6.	<small></small>	Menampilkan huruf yang lebih kecil	<small>ABC </small>	ABC
7.	<sub></sub>	Menampilkan subscript.(biasa digunakan untuk membuat rumus kimia)	H<sub>2</sub>O	H2O
8.	<sup></sup>	Menampilkan superscript.(biasa digunakan untuk membuat pangkat)	A<sup>2-n</sup>	A2-n
9.	<br/>	Membuat baris baru	A<br/>B	A B
10.	<hr/>	Membuat garis horizontal	A<hr/>B	A B
11.	<h1></h1> Sampai <h6></h6>	Membuat Heading atau judul  layaknya ms.word	<h1>A</h1> <h2>B</h2> <h3>C</h3>	A B C
12.	<pre></pre>	Mempertahankan spasi dan tab(penulisan biasanya seperti tulisan coding)	<pre>A  B    C </pre>	A B C
13.	<cite></cite>	Menandakan suatu kutipan dimana hasil dari teks seperti Italic	<cite>ABC</cite>	ABC
14.	<code></code>	Menampilkan kode-kode program (teks ditampilkan dalam format monoskrip)	<code>ABC </code>	ABC
15.	<em></em>	Berupa penekanan dari teks dimana tulisan dicetak miring	<em>Note</em>	Note
16.	<kbd></kbd>	Menandai suatu teks harus dimasukkan oleh user melalui keyboard	<kbd>Abc</kbd>	Abc
17.	<samp></samp>	Menandai suatu teks yang dimaksudkan sebagai contoh	<samp>ini adalah contoh </samp>	ini adalah contoh
18.	<strong></strong>	Menandai bagian terpenting dari teks (biasanya dicetak tebal)	<strong>Important </strong>	Important
19.	<s></s>	Kebalikan dari strong, bahwa pernyataan itu sudah tidak berlaku	<s>Important</s>	Important
20.	<q></q>	Memformat kutipan (untuk Kalimat)	<q cite= "Design Web 2018"> Kalimat</q>	Kalimat
21.	<blockquote> </blockquote>	Untuk memformat tulisan seperti kutipan-kutipan kitab suci (untuk paragraph, dan penulisan biasanya di letak di tengah)	<blockquote><p>ini adalah ABC<br> ini adalah CDE</p></blockquote>	ini adalah ABC ini adalah CDE
22.	<p></p>	Mendefinisi bahwa tulisan tersebut terdapat pada paragraph ke - n	<p>ini adalah ABC<br> ini adalah CDE</p>	ini adalah ABC ini adalah CDE
23.	<address></address>	Mendefinisikan tulisan tersebut berupa alamat (dicetak miring)	<address>Jl.Teuku Umar No.87, Medan</address>	Jl.Teuku Umar No.87, Medan
24.	<abbr></abbr>	mendefinisikan singkatan Tulisan (muncul ketika kursor berada pada teks) biasa di barengi dengan title	<abbr title="Ini adalah Abbr">ABC</abbr>	ABC
25.	<acronym> </acronym>	mendefinisikan suatu akronim (dibarengin dengan title)	<acronym title="ini adalah acronim">Arahkan kursor mouse ke sini</acronym>	Arahkan kursor mouse ke sini
26.	<div></div>	untuk memisahkan bagian - bagian tertentu yang mencakup banyak dan biasa digunakan untuk pemformatan	<div style="color:Red"> ini adalah baris 1<br> ini adalah baris 2<br></div> <div style="color:blue"> ini adalah baris 3<br> ini adalah baris 4</div>	ini adalah baris 1 ini adalah baris 2 ini adalah baris 3 ini adalah baris 4
27.	<span></span>	Umumnya sama seperti <div></div>	<span style="color:Green"> ini adalah baris 1<br> ini adalah baris 2<br></span> <span style="color:Purple"> ini adalah baris 3<br> ini adalah baris 4</span>	ini adalah baris 1 ini adalah baris 2 ini adalah baris 3 ini adalah baris 4
28.	<ins></ins>	Tag untuk mebuat teks yang telah dimasukkan kedalam dokumen(del dan ins adalah tag yang berpasangan)	<ins>ABC</ins>	ABC
29.	<del></del>	Tag untuk membuat teks yang telah dihapus dari dokumen(del dan ins adalah tag yang berpasangan)	<del>ABC</del>	ABC
30.	<marquee></marquee>	Agar teks berjalan pada area tertentu	<marquee>Jumping Lizard</marquee>	Jumping Lizard

Terima Kasih Sudah Membaca!

---