Youngliving
Jetorbit Web Hosting

Belajar HTML Dasar

Topik.MY.ID- membuat website apakah perlu belajar pemrograman, jawabannya tidak perlu. Namun, alangkah baiknya anda bisa sedikit mengerti apa itu html, sejarahnya, hingga membuat beberapa struktur kode html. Nah, berikut ringkasan saya belajar html yang bisa anda pelajari dalam satu artikel membuat HTML. Nah kami akan sedikit membahas tentang html ini dan belajar bagaimana membuat website dari html meskipun sederhananya saja

Apa Itu HTML?

Html merupakan singkatan dari Hypertext Markup Language yang merupakan bahasa markup bukan bahasa pemrograman yang mana bahan pemrograman memiliki function, variabel, struktur kontrol, pengkondisian, pengulangan dan lain sebagainya

Kenapa disebut dengan markupa language karena didalam html tersebut terdapat serangkaian mark up yang disebut dengan teks yang mana sebuah konten bisa ditampilkan,apakah markup tersebut akan dijadikan heading, paragrap ataupun bisa dijadikan link. Selain itu disebut markup karena memang html digunakan untuk memberitahu browserbagaimana sebuah kontan akan ditampilkan.

Sejarah HTML?

Html ini diciptakan oleh Tim Berners Lee, orang yang bersaja dalam browsing internet selain menemukan html ia juga menemukan http, web browser pertama, server sampai dengan webpage. Dan saat ini tim berners lee masuk dalam organiasis w3c d pada portal W3.org yang mana tugas dari w3c ini tugasnya ada;ah untuk mengembangkan protokol dan panduan yang akan memastikan pada perkembangan website dalam jangka panjang yang mana organisasi ini berlokasi di gabungan institusi di Amerika di MIT, ada di Jepang dan ada Beijing China.

Nah, w3C ini adalah organisasi standarisasi dalam perkembangan teknologi khususnya pada web design, aplikasi, arsitektur website, sematic web, xml teknologi dan lain sebagainya. Jika ada aturan html dan teks yang hilang maka aturan tersebut seperti yang dilakukannya untuk mengoperasikan sebuah web browser.

Apabila html ada standard baru dari organiasi w3c, maka web brower juga harus diperbaharui atau diupdate sehingga mesin pencari dapat melakukan tampilannya. Seperti perkembangan teknologi yang bisa anda lihat di evolutionoftheweb.com dalam berbagai bahasa.

DI web tersebut akan anda lihat bahwa pada tahun 91 http ditemukan, setelah itu 92 html satu ditemukan dan webbrowser pertama diciptakan yang bernama Mosaic yang mana mendukung teknologi html satu. Pada tahun 94 web browser netscape diciptakan, opera dan anda bisa lihat selengkapnya di portal tersebut.

Ada teknologi yang harus dipelajari dalam membuat website yaitu HTML, CSS dan Javascript. Mungkin html bisa menghiasi sebuah teks dan halaman, namun css memiliki style yang lebih bagus dibandingkan dengan html.

Jika diilustrasikan bahwa html itu adalah manakin atau polosan yang memiliki kepala, kaki dan tangan sedangkan untuk CSS diibaratkan sebuah baju, celana, dasi, ikat pinggan yang bisa diganti dan menjadikan anda tampil beda. Sedangkan posisi javascript selain membaut tampilan yang lebih menarik javascrip berada di tingkat kecerdasan yang mana si manekin bisa jalan, bicara dan lain sebagainya.

Membuat Website  Menggunakan html

1. Menampilkan Hello world Pada Layar

Silahkan sebelum anda menampilkan hello world di layar silahkan anda gunakan code editor baik itu sublimeteks maupun web browser yang akan anda gunakan

Pertama, silahkan anda buat folder di layar dengan nama “html” kemudian didalamnya anda buat folder kembali dengan nama “latihan satu” dan pada folder tersebut anda buka sublime text atau code editor dengan file name halaman1.html untuk ekstensinya dan biasanya jangan menggunakan spasi dan menjadi masalah baru jika menggunakan spasi

Kedua, selanjutnya tuliskan hello world pada code editornya, dan buka dengan chrome maka akan tampil teks dengan kata hello world dan menggap sebagai halaman html

ketiga, silahkan anda tulis browser untuk membaca halaman html dengan menulis seperti dibawah ini

Anda bisa menggunakan Code editor sublime text

<!DOCTYPE html>
<html>
<head>
<title> Latihan Program Wb 1</title>
</head>
<body>
<p> hello world</p>
</body>
</html>

 

2. Mengenal Tag HTML

A. Bagian Heading

Kita akan membahas tentang tag <html> bahwa dalam bagian head ada beberapa hal yang dapat kita simpan dalam bagian header yaitu

– Judul halaman

<title></title>

 

– CSS

<style></style>

 

– Java Script

<script></script>

 

– Meta Data

<meta> </meta>

 

Meta data ini penting untuk mendeskripsikan website yang kita miliki

A.1. Membuat Meta Deskripsi
<meta charset=utf-8>
<meta name=description content=" Kuliah Pemrograman web">
<meta name=keywords content=" HTML, CSS, Javascript">
<meta name=author content="Topik.My.ID">
<meta name=viewport content="width=device-width, initial-scale=1">

B. Bagian Body

Selanjutnya tag apa saja yang ada dalam <body>

– teks

<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>

(heading satu sampai dengan empat)

– pendukung teks

<br>, Baris Baru <hr>, (garis horisontal)
<em></em>,
<strong></strong>

– Gambar

<img src="" alt="">

menyimpan gambar dengan tag img

– Hyperlink

<a href=""></a>

menyimpan hyperlink dengan tag a atau angker

– list (bullet dan Numbering)

<ul></ul>, Unorderlist atau list tidak terurut,

<ol></ol>, Order List atau list berurutan <li></li>, list item

<dl></dl> (definisi list)
<dt></dt>, definisit tabel

<dd></dd> definisi data

 

-tabel

<table></table>, <thead></thead>, <tbody></tbody>

 

– form

<form action=""></form>, <input type="text">, <select></select>, <button></button>

 

– Script

<script></script>

 

– Object (biasanya digunakan untuk menyimpan multimedia)

<object data="" type=""></object>

 

– Group (bisanya digunakan untuk menyimpan group yang penting)

<div></div>
<span></span>

 

– Komentar

<!-- ini adalah komentar -->

 

Struktur pada sebuah tag yang diawali dengan

<namatag atribut="nilai"> dengan contoh sebagai berikut

<body>
bgcolor="lightblue"
</body>

 

 

body sebagai nama tag
bg color sebagai atribut
lightblue sebagai nama nilai

halaman website saya warna backgroundnya untuk bodynya akan berubah menjadi biru terang. Namun, hal ini tidak disarankan karena bagian pemberian warna ini adalah bagian dari CSS

Sebuah tag boleh memiliki lebih dari satu atribut, bisa memilik id dan class ataupun tidak memiliki atribut sama sekali. Tiap tag memiliki atribut yang sama atau global

aceesskey,
class
id
dir (direction) atau arah tulisan
lang (language)
style menyisipkan inline style css
tabindex untuk menentukan urutan, fokus kursor akan pindah kemana
title memberikan judul

 

Jika anda ingin melihat lengkapnya anda bisa langsung kunjungi atribut lengkapnya di w3school.com/tags

3. Membuat Paragraf HTML

Untuk membuat paragraf dalam sebuah html menggunakan tag= “p”

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html paragraf</title>
</head>
<body>
<p>ini adalah paragraf satu</p>
<br>
<p>ini adalah <br> paraggraf dua </p>
<hr>

</body>
</html>

 

p + tab = paragraf
br + tab = baris
hr + tab= untuk garis horisontal
b + tab = untuk cetak tebal
i + tab = Untuk cetak miring
u + tab + underlined
em + tab = penekanan singkatan dari emverzise cetak miring
strong + tab: cetak tebal

 

4. Membuat List HTML

Membuat list berurutan

<h1> To do List</h1>
<ol>
<li> Bangun Pagi</li>
<LI> SARAPAN</LI>
</ol>

 

Bisa juga dengan urutan menggunak type bisa 1, A,a,I,i

<ol> </ol> Sebelum memberikan tutup silahkan anda gunakan type
<ol type="A"></ol>

 

ul= unorderlist
yang mana dibawahnya ada list

urutan list item tidak berpengaruh dengan menggunakan kode ul
atau biasanya bulet, kotak dan lainnya tanpa ada urutan contohnya menggunakan lingkaran.

<ul type="circle">
<li>Nasi Goreng</li>
<li>Bakaran</li>
<li>Mie Goreng</li>
<li> Sayur</li>
</ul>

 

dl= definition list (daftar definisi) yang dibungkus dengan deskripsi term (ketentuan) (dt) dan Definition description (dd)

contohnya sebagai berikut

<h3> Pemrograman web1 </h3>

<dl>

<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt> CSS</dt>
<dd> Cascading Style Sheet</dd>

</dl>

 

5. Membuat Hyperlink HTML

Setelah membuat list kita akan membuat hyperlink atau dengan menggunakan huruf a atau yang disebut dengan anchor atau yang disebut dengan jangkar yang mana jangkar tersebut akan terhubung dengan yang lain

 

<a href=""> (....) </a>

 

Hyperlink

bisa anda tuliskan eksternal link atau link website lainnya dengan tanda kutip atas ” Link http” contohnya sebagai berikut:

<h1> Hyperlink </h1>
<p> Klik <a href=" http://www.google.com"> disini</a> untuk mengetahui informasinya lebih lanjut</p>

 

Internal Link

Bisa juga menuliskan internal link yang terhubung di folder yang sama contohnya untuk internal link ini karena masuk di folder yang sama dengan contoh sebagai berikut

<h2>Internal Link</h2>
<p> Silahkan anda masuk ke internal link <a href="internallink.html"> disini</a> untuk mengetahui informasinya lebih lanjut</p>

 

Relative Link

Bagaimana jika seandainya ada bagian yang ada diluar dari folder tersebut maka hal itu disebut dengan nama relative link dengan menambahkan titiktitik .. untuk masuk ke halaman awal setelah itu mencari folder mana yang sedang dibuat dengan contoh sebagai berikut

<h3> Relative Link</h3>

 

Jika folder di tempat lain maka anda bisa buatnya

<a href="../admin/relativelink.html">disini </a>

 

Page ancor

Untuk membuat link dalam sebuh halaman anda bisa membuat seperti daftar isi yang mana di dalamnya anda akan membuat id per bagiannya dalam sebuah judul dengan contoh sebagai berikut dengan cara pemangglan sebagai berikut yang mirip dengan css. Dan dalam Anchorny ditambah # pada hyperlinknya contohnya dibawah ini

<h1> Bagian halaman 3 page anchor hyperlink</h1>
<ul>
<li><a href="#bagian1">bagian1</a> </li>
<li><a href="#bagian2">bagian2</a></li>
<li><a href="#bagian3">bagian3</a></li>

</ul>

<h2 id="bagian1"> Bagian 1</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem facere soluta adipisci aperiam libero nesciunt eius aliquam autem veniam laborum, tenetur fuga beatae maiores rem voluptates sed commodi, quidem sunt?</p>


<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquam modi explicabo totam delectus vel nobis enim fugit, asperiores minima recusandae illum quaerat, a laborum. Error, qui commodi repellat ullam.</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum consectetur dolorum fugit qui dolor officiis. Asperiores sint, explicabo consequatur deleniti impedit accusamus ad, illum est? Necessitatibus repellat eius quos. Voluptatum!</p>

<br><br><br><br><br><br> <br><br><br><br>
<h3 id="bagian2"> Bagian 2</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus quos eligendi, nihil, officia eum porro debitis nisi hic ipsum inventore, quas, veritatis dolorem? Harum optio minus repellat? Nihil, distinctio, blanditiis.</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed at, laborum qui deserunt harum, quam, voluptatum iste quos, dolor eveniet ea cupiditate. Tempora velit, quibusdam dolorem incidunt veritatis, perferendis repellendus.</p>

<br><br><br><br><br><br><br><br><br><br>


<h4 id="bagian3"> Bagian 3</h4>
<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus vitae numquam, repellendus assumenda quia iste repellat in deleniti temporibus aliquam. Voluptatum architecto delectus, itaque eveniet. Necessitatibus nulla et earum aperiam.</p>

<br><br><br><br><br><br><br><br><br><br>

Kembali ke hyperlink ya <a href="hyperlink.html">disini</a>

 

Membuka Di New tab atau tab baru pada anchor

Untuk membuka link tab baru harus menambah sebuah attribut yang disebut dengan tag attribut= target dengan empat nilai atau value yaitu

_self
_blank
_parent
_top

 

Yang dibahas adalah self dan blank untuk nilainya. Untuk Nilai self untuk membuka di halaman yang sama sedangkan blank membuka pada halaman yang baru

silahkan buka di tab baru

<a href="internallink.html" target="_blank">disini</a>

 

6. Mengenal Image HTML

Bagaimana menyimpan sebuah gambar dalam dokument html? Kita akan menggunakan tag <img src=”” alt=””>, Mengcopykan sebuah gambar dengan membuat image dalam sebuah struktur html, file gambar yang bisa disimpan dalam dokument html trsebut ada dua

pertama pada internal resource atau gambar yang kita miliki sendiri pada sebuah folder, bisa juga disimpan dilain folder dan kita harus menuliskan resource sesuai di folder lain tersebut dengan menggunakan ke menu lainnya

contoh di folder yang sama: <img src="logo.png" alt="">
contoh di luar folder <img src="../img/logo.png" alt="">

 

Kedua, pada eksternal resource atau disebut dengan hotlink tidak disarankan gambar yang diambil dari website lain karena jika gambar yang diambil dari website lain, apabila user membuka pada website kita dan gambarnya yang tampil maka yang digunakan adalah bandwith miliki orang lain, sedangkan gambar memiliki hak cipta apakah gambar tersebut bebas pakai atau tidak dan hal itu bergantung dengan portal yang lain maka gambarnya tidak akan muncul jika menggunakan hotlink

Attribut image yang harus ada adalah

src berguna untuk mengambil dari mana gambar diambil
alt berguna untuk memberikan alternatif teks pada gambar contohnya <img src="logo.png" alt="bukupanduansoal"> akan muncul ketika file tersebut rusak atau tidak bisa dibuka
title digunakan untuk memberikan judul pada gambar <img src="logo.png"title="bukupanduansoal"> akan muncul ketika kita letakkan kursor pada gambar
width untuk mengatur lebar pada gambar
height untuk mengatur tinggi pada gambar

 

Untuk menuliskan width dan height ada dua nilai yang bisa digunakan pada image atribut yaitu dengan besaran px atau dengan besaran %. Jika kita menulis angka saja maka ukurannya maka berbentuk piksel, dan kita menambah persen ukurannya akan relatif dengan halamannya

<img src="logo.png" width="50%" height="50%">

 

dan sekarang bagaimana kita menggabungkan hyperlink dengan image?
contohnya ada dua hal hyperlink dan image seperti berikut

<a href="https://www.bukupanduansoal.com/">
<img src="logo.png" >
</a>

 

sebelum ancor penutup bisa anda tambahkan source pada gambar.

7. Membuat Tabel HTML

Tabel Html berguna untuk menampilkan data tabular sama seperti jika anda menampilkan tabel di microsof excel.
Sebelum belajar tabel maka kita harus mengetahui terlebih dahulu sebuah struktur pada tabel

bila ita membuat sebuah baris 1 kolom satu dan baris kedua adalah tabel pada baris dua kolom 2

untuk kotak yang horizontal kita sebut dengan baris
sedangkan kotak yang vertikal kita sebut dengan kolom

Jika perpotongan antar baris kita sebut dengan cell atau data
Dan judul pada setiap kolom disebut dengan header. Jika memliki dua buah sumbu maka ada ada dua header, yaitu header yang ada di garis horizontal atau baris dan header yang ada di garis vertikal atau kolom

Jika kita ingin membuat sebuah tabel kita harus menggunakan sebuah tag yang bernama <table></table>

Struktur tabel ini ada dua yaitu ada tabel yang simpel dan ada tabel yang kompleks. Untuk yang simpel harus ada table pembuka dan penutup yang didalamnya ada sebuah baris yang dipresentasikan dengan tr atau disebut dengan table row dan untuk di dalam tr sendiri untuk membuat kolom dengan represntasi tagnya td atau disebut dengan tabel data

<table>
<tr>
<td></td>
</tr>
</table>

 

contohnya

<table>
<tr>
<td> Baris 1, kolom 1</td>
<td> baris 1, kolom 2</td>
</tr>
<tr>
<td> Baris 1, kolom 1</td>
<td> baris 1, kolom 2</td>
</tr>

</table>

 

struktur tabel kedua adalah tabel yang komplek digunakan jika strukturnya sudah banyak dan sudah komplek dengan struktur seperti berikut

Gambar diatas untuk tabel dibagi menjadi dua untuk thead (tabel Header) dan ada tbody (tabel Body) hasilnya membuat header dalam dua sumbu.

<table>

<thead>
<tr>
<th></th>
<th>kolom1</th>
<th>kolom2</th>

</tr>
</thead>


<tbody>

<tr>
<th></th>
<td>kolom1</td>
<td>kolom2</td>
<td>kolom2</td>

</tr>

<tr>
<th></th>
<td>kolom</td>
<td>kolom</td>
<td>kolom</td>
</tr>

</tbody>

</table>

 

Untuk membuat sebuah tabel, maka yang harus kita pelajari adalah atribut apa saja yang harus ada dalam sebuah tabel tersebut, ada 5 atribut yang kita akan coba

border, digunakan untuk menambah garis disekitar sell
cellspacing menambah jarak antar cell
cellpadding memberi luas pada sebuah sell

 

<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td> Baris 1, kolom 1</td>
<td> baris 1, kolom 2</td>
</tr>
<tr>
<td> Baris 1, kolom 1</td>
<td> baris 1, kolom 2</td>
</tr>

</table>

 

colspan
rowspan

Kedua atribut ini digunakan untuk melakukan marging, atau menggabungkan dua buah sell pada tabel

colspan menggabungkan dua buah sell pada garis horizontal (kolom)
Rowsapn menggabungakn duab buah sell pada garis row (vertikal) (baris)

<table border="1" cellpadding="10" cellspacing="0">
<tr>

<td rowspan="3">rowspan2</td>
<td colspan="2"> colspan 1</td>
</tr>
<tr>

<td> 2,2</td>
<td> 2,3</td>
</tr>
<tr>

<td> 3,2</td>
<td> 3,3</td>
</tr>

</table>

 

8.Membuat Form HTML

Apa itu form? merupakan sebuah elemen pada html yang digunakan untuk mengelola data dari input yang dilakukan oleh user, saat itu user memilih, memasukan isian, sampai user menekan sebuah tombol

Hampir semua website memiliki sebuah form yang tentunya kegunaannya beda-beda. Seperti yang digunakan untuk login form ada form registrasi dan masih banyak lagi. Sebagai contoh ada dua form di facebook, ada form login email untuk login dan kedua adalah form registrasi dan datanya akan disimpan ke facebook dan lain sebagainya.

di sebuah facebook ada login untuk memasukkan nama email dan lainnya itu disebut dengan text field lalu ada yang disebut dengan dropdown, listbox dll, dan untuk pemilihan jenis kelamin dalam form disebut dengan radio button. Untuk cekbox kalau diklik nanti ada tanda ceklist

Cara membuatnya dengan tag form yang dibungkus dengan form. Jika kita lihat facebook, ada dua form yang dibuat yaitu form untuk login dan kedua form untuk registrasinya.

Dan setelah kita bungkus dengan form maka didalamnya akan disimpan elemn-elem yang ada dalam form, lalu apa aja elemen-elem yang digunakan dalam form, ada lima yaitu

input: dimana user bisa menginputkan sesuatu
textarea: mirip seperti textfield, namun lebih banyak digunakan untuk teks seperti yang digunakan untuk mengirim komentar, pesan, email dan lainnya
select: sedangkan select digunakan untuk membuat dropdown atau combobox
button: tombol yang digunakan untuk mengirimkan datanya
label: untuk menandai pada elemen input maka ada beberapa jenis atau type yang sesuai dengan yang anda masukkan

<input type=".....">

 

text untuk teksfiled
password
radio
checkbox
submit
reset
button

 

Untuk menulis username diluar input tidak disarankan, yang disarankan kalau menulis sebuah username dengan elemnt. Nah element yang digunakan untuk menuliskan username adalah label jadi anda bisa menggunakan label untuk menuliskan username

<label for=" username"> username</label> <input type="text" id="username">

 

for dan id jadi satu agar antara keduanya dapat tertaut atau terhubung antara satu dengan yang lainnya.

for untuk dimasukkan di label dan id untuk dimasukkan di inputnya. Bagaiaman jikalau kita membuat passwordnya harus ditulis dengan cara yang sama

<label for=" password"> password</label> <input type="password" id="password">

 

Maka nanti hasilnya pada teksnya id akan disembunyikan, hanya menyembunyikan sanja sehingga tidak aman karena memang belum ada enkripsinya

Dan untuk pemilihan jenis kelamin misalnya kita membuat sebuah label untuk radio, jenis ini bisa memilihkan antara dua pilihan contohnya sebagai berikut

<input id="pria" type="radio"> <label for=" pria">pria: </label>
<input id="wanita" type="radio"> <label for=" wanita">wanita: </label>

 

Pemilihan ini menyebabkan kesalahan karena bisa memilih dua-duanya sehingga ada yang harus ditambah dalam atributnya untuk menandakan sebuah grup agar bisa menjadi satu tidak keduanya dipilihkan dengan menambah name untuk pemilihannya

 

<input id="pria" type="radio" name="jeniskelamin"> <label for=" pria">pria: </label>
<input id="wanita" type="radio" name="jeniskelamin"> <label for=" wanita">wanita: </label>

 

Sedangkan untuk pemilihan lebih dari satu jangan menggunakan radio button, kita bisa menggunakan checkbox

<input type="checkbox" id="menyanyi"> <label for="menyanyi">menyanyi</label>
<input type="checkbox" id="olahraga"> <label for="olahraga">olahraga</label>
<input type="checkbox" id="menggambar"> <label for="menggambar">menggambar</label>
<input type="checkbox" id="membaca"> <label for="membaca">membaca</label>

 

Kita mau mencoba untuk data dapat terkirim kita bisa menggunakan type selanjutnya yaitu “submit” Sedangkan reset untuk menghapus sebuah data dengan menggunakan type “reset”. Contoh untuk type submit dengan ditambahkan nilai kirim

 

<input type="submit" value="kirim">

 

dan tidak disarankan menggunakan input, karena ada elemen button dengan type jenis submit, reset, dan button

 

<submit type="submit" value="kirim">

 

Selanjutnya yang akan kita buat dalam element form adalah text area untuk membuat kolom testimony, komentar dan lain sebagainya.

<textarea name="" id="" cols="30" rows="10"></textarea>

 

Untuk membuat menu dropdown pada form ada elemnt yang bernama “select” yang mana pilihan opsinya didalam ada element option atau disebut dengan Combo boxt sebagai contoh sebagai berikut ini:

 

<label for="pilih">Asal Mana</label><select name="pilih" id="pilih">
<option value="kota"> Bandung</option>
<option value="kota"> Jakarta</option>
<option value="kota"> Jogja</option>
<option value="kota"> Surabaya</option>
<option value="kota"> Medan</option>CSS

Demikianlah belajar HTML Dasar yang bisa kami bagikan semoga anda para pembaca blog ini bisa lebih paham lagi bagaimana mempelajari HTML, dan selanjutnya untuk membuat website akan lebih baik dan menarik kita menggunakan CSS, mari kita simak dan Belajar CSS Dasar

Tinggalkan Balasan ke Belajar CSS Dasar – Belajar Internet Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

DomaiNesia