Jetorbit Web Hosting DomaiNesia

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

 

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

 

– CSS

 

– Java Script

 

– Meta Data

 

Meta data ini penting untuk mendeskripsikan website yang kita miliki

A.1. Membuat Meta Deskripsi

B. Bagian Body

Selanjutnya tag apa saja yang ada dalam <body>

– teks

(heading satu sampai dengan empat)

– pendukung teks

– Gambar

menyimpan gambar dengan tag img

– Hyperlink

menyimpan hyperlink dengan tag a atau angker

– list (bullet dan Numbering)

 

-tabel

 

– form

 

– Script

 

– Object (biasanya digunakan untuk menyimpan multimedia)

 

– Group (bisanya digunakan untuk menyimpan group yang penting)

 

– Komentar

 

Struktur pada sebuah tag yang diawali dengan

 

 

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

 

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”

 

 

4. Membuat List HTML

Membuat list berurutan

 

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

 

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.

 

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

contohnya sebagai berikut

 

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

 

 

Hyperlink

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

 

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

 

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

 

Jika folder di tempat lain maka anda bisa buatnya

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

contohnya

 

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.

 

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

 

 

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)

 

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

 

 

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

 

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

 

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

 

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

 

 

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

 

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

 

 

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

 

 

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

 

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:

 

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