MATERI HTML
HTML (Hyper Text Markup Language) adalah merupakan dasar atau pondasi bahasa pemrograman sebuah halaman web, HTML muncul sebagai standar baru dari pengembangan dan pengembangannya internet, pada saat pertama kali muncul internet masih dalam keadaan berbasis teks sedangkan tampilan halaman web hanya berisikan teks yang monoton tanpa format dokumen secara visual, hanya memuat dokumen teks yang dikemas dalam format bungkus seperti tipe file .txt atau sering disebut notepad, tanpa paragraf, satu warna, satu ukuran huruf tanpa gambar dan juga tidak memiliki format visual dokumen seperti yang ditampilkan Ms. Word, hal ini akan sangat membosankan dalam membaca. Dan selain itu pertama kali muncul pengguna internet masih menggunakan terminal, hal itu jelas tidak ramah.
2. Sejarah HTML
Hyper Text Markup Language (HTML) pertama kali dibuat dan dikembangkan oleh Tim Berners-Lee pada awal tahun 1990-an pada saat itu masih bekerja di CERN. HTML dibuat dengan tujuan sebagai cara sederhana namun efektif untuk mengkodekan dokumen elektronik. HTML pertama kali dipopulerkan dengan menggunakan browser Mosaic.
Tahun 1980, IBM menyetujui pembuatan suatu dokumen yang akan disetujui setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang memuat teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Bahasa Markup, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.
Tahun 1986, ISO menyatakan bahwa IBM memiliki konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan beberapa publikasi (ISO 8879) yang dinyatakan markup bahasa sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi disebut nama lain, yaitu SGML (Standard Generalized Markup Language). ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk mengelola informasi teks dan sistem-sistem perkantoran. Selain melampaui perkiraan ISO, SGML dan sebagian besar dari SGML, yaitu HTML juga berguna untuk memanfaatkan internet. Khususnya bagi mereka yang menggunakan World Wide Web.
Mulai pada tahun 1989, sebuah nama HTML muncul dari karya Caillau Tim yang bekerja sama dnegan Spanduk Lee Robert yang sedang mengerjakan itu masih bekerja di CERN mulai mengembangkan bahasa pemrograman ini, dan dipopulerkan pertama kali dengan browser Mosaic. Dan mulailah dari tahun 1990 HTML sangat berkembang dengan cepat hingga mencapai versi HTML 5.0 yang digarap pada 4 Maret 2010 kemarin oleh W3C.
Sejarah dari standar HTML:
- HTML 2.0 (RFC 1866) dipahami sebagai standar 22 September 1995
- HTML 3.2 14 Januari 1996
- HTML 4.0 18 Desember 1997
- HTML 4.01 (perbaikan kecil) 24 Desember 1999
- ISO / IEC 15445: 2000 (“ISO HTML ”, berdasar pada HTML 4.01 Strict) 15 Mei 2000
- HTML 5 masih dalam draft pengerjaan Januari 2008
3. Versi HTML
HTML sekarang sudah mencapai versi 5.0. Sebelum digunakan, HTML harus disetujui oleh suatu badan yang bernama World Wide Web Concortium (W3C). Setiap peningkatan / peningkatan versi, tag tambahan tambahan dari fasilitas yang tidak didukung oleh versi sebelumnya. Tentunya versi yang telah dikeluarkan ini harus menjadi standar untuk peramban. Browser Bilamana ini tidak mendukung versi tertentu, maka browser ini tidak dapat menampilkan format HTML yang kita buat. Oleh karena itu, untuk melihat halaman web yang di format dengan HTML versi baru, harus memiliki browser yang sudah mendukung versi HTML tersebut.
Versi-versi HTML
HTML 1.0
Ini adalah awal mula dari HTML (pendahulunya). Pada versi ini masih terlihat beberapa kelemahan dan masih sangat sederhana. Versi 1.0 ini hanya terbatas pada judul, paragraf, hypertext, list, dan setak tebal atau miring pada teks.
HTML 2.0
Versi 2.0 pada 14 Januari 1996, pada versi ini ada beberapa tambahan yang mendukung bentuk komentar, hal ini menyebabkan perbedaan interaktif dan mulai dari versi ini yang menjadikan pelopor dalam pengembangan homepage interaktif.
HTML 3.0
Dirilis pada 18 Desember 1997 yang sering disebut sebagai HTML + yang memiliki kemampuan dalam beberapa fasilitas yang mendukung tabel dalam paragraf, akan tetapi versi ini tidak bertahan lama.
HTML 3.2
Dan pada bulan Mei 1996 dikeluarkan versi baru sebagai penambahan dan penyempurnaan versi 3.0 ini yaitu HTML veri 3.2, versi keluarnya karena ada beberapa masalah yang timbul pada pengembang peramban yang telah melakukan pembaharuan dengan cara yang lain apa yang diharapkan, kemudian dibakukan versi 3.2 untuk mengakomodasi praktik yang banyak digunakan oleh pengembang browser dan diterima secara umum, dapat disetujui versi 3.2 ini merupakan versi 3.0 yang dikembangkan oleh beberapa pengembang browser seperti Netscape dan Microsoft.
HTML 4.0
Yang terakhir terjadi pada tahun 1999 yang dikeluarkan tanggal 24 Desember yaitu HTML versi 4.0, seperti yang kita kenal HTML pada saat ini diperoleh tautan, meta, imagemaps. Gambar dan lain-lain sebagai penyempurnaan versi 3.2. Di samping itu versi ini ditambahkan tag-tag baru seperti ABBR, ACRONYM, BUTTON, PARAM, BUTTON, TBODY, THEAD dan lain sebagainya.
HTML 5.0
Pada tanggal 4 Maret 2010, terdapat sebuah informasi bahwasannya HTML versi 5.0 masih dikembangkan oleh W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task Force) adalah sebuah organisasi yang menyediakan HTML sejak versi 2.0.
4. Struktur Dasar Dokumen HTML
Struktur dasar dokumen HTML adalah sebagai berikut:
<html>
<head>
<title> Di sini Judul Dokumen HTML </title>
</head>
<body>
Di sini mengakses informasi Web
</body>
</html>
Dari struktur dasar HTML di atas dapat dibuat sebagai berikut:
a. Menandai
Adalah teks khusus ( markup ) terdiri dari dua karakter " < " dan " > ", sebagai contoh <body> adalah tag dengan nama tubuh. Tag umum yang diterbitkan secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter " / " setelah karakter " < "), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.
b. Elemen
Elemen terdiri atas tiga bagian, yaitu pembuka tag, isi, dan penandaan tag. Sebagai contoh untuk menampilkan judul dokumen HTML pada browser web digunakan elemen judul, dimana:
ini adalah tag penutup judul dokumen HTML
Tag-tag yang diterbitkan secara berpasangan pada suatu elemen HTML, tidak dapat saling bertumpang tindih dengan pasangan tag-tag lainnya.
Contoh menerima tag-tag yang benar
<p>
<b>
................
</b>
</p>
Contoh tag-tag yang salah
<p>
<b>
................
</p>
</b>
c. Atribut
Atribut yang ditentukan dari suatu elemen HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:
<TAG>
nama-attr = "nilai-attr"
nama-attr = "nilai-attr"
.................
>
.................
</TAG>
Atribut nilai umum harus dalam petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah
d. Elemen HTML
Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.
Sintaks:
<html>
..........
</html>
e. Elemen HEAD
Merupakan kepala dari dokumen HTML. Tag dan tag terletak di antara tag dan tag.
Sintaks:
<head>
...........
</head>
f. JUDUL Elemen
Merupakan judul dari dokumen HTML Yang dimaksud pada judul jendela browser. Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>.
Sintaks:
<title>
.........
</title>
g. Elemen BODY
Elemen ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>. Elemen BODY memiliki atribut-atribut yang menspesifikasikan warna khusus dan latarbelakang dokumen yang akan dikenakan pada browser.
Sintaks:
<body text = "v" bgcolor = "w" background = "uri" tautan = "x" alink = "y" vlink = "z">
..............
</body>
Atribut teks memberikan warna pada teks, bgcolor memberikan warna pada latar belakang dokumen HTML, latar belakang memberikan latarbelakang dokumen HTML dalam bentuk gambar, tautan memberikan nilai warna untuk tautan, alink memberikan warna untuk tautan yang sedang aktif, vlink memberikan warna untuk tautan yang telah dikunjungi. Jika atribut bgcolor dan latar belakang dispesifikasikan maka atribut latar belakang yang akan digunakan, akan tetapi jika nilai atribut latar belakang (gambar) tidak ditemukan pada dokumen HTML maka atribut bgcolor yang akan digunakan.
5. Kelebihan dan Kekurangan HTML
Kelebihannya:
1 mewakili bahasa pengkodean yang lintas platform (lintas platform), maksudnya HTML dapat digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai jenis sistem operasi yang berbeda. Jadi berdifat fleksibel karena ditulis cukup dengan menggunakan editor karakter ASCII.
2 Dapat disisipi gambar baik gambar statik atau dinamis (animasi) termasuk menggunakan gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk mengubah pada suatu halaman web, di mana setiap titik-titik yang telah didefinisikan berbentuk persegi panjang (kotak), poligon (kurva tak beraturan) atau lingkaran yang digunakan untuk 'lompat' ke halaman lain, atau tautan ke halaman di luar web yang dibutuhkan .
3 Dapat disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki plug-in khusus untuk menggunakan file-file animasi ini).
4 Dapat disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript, Vbscript, Active Server Pages, Perl, Tcl, PHP, dan sebagainya.
5 Bukan merupakan bahasa pemrograman sehingga tidak memerlukan kompiler. Cara menjalankannya cukup dengan menggunakan browser.
Kekurangannya:
1 Menghasilkan halaman yang statistik, untuk memperoleh halaman yang dinamis harus menggunakan bahasa pemrograman tertentu seperti Javascript atau Vbscript dan animasi seperti Flash atau Shockwave.
2 Memiliki tag-tag yang sangat banyak dilakukan untuk yang masih awam.
3 Tidak dapat menghasilkan halaman yang interaktif. Klien bisa maksud dengan klien. Untuk keperluan itu HTML harus disisipi bahasa pemrograman yang dapat membantu hal tersebut, contohnya Perl dan Tcl.
LANGKAH LANGKAH BELAJAR HTML
Berikut adalah Langkah Belajar HTML
Agar proses belajar HTML berjalan lancar, ada beberapa langkah yang harus Anda lakukan, diperkirakan:
1. Persiapan Alat Belajar HTML
Pada Langkah ini Anda akan mengetahui hal apa saja yang harus disiapkan.
Apa yang Anda Butuhkan?
HTML yang diperlukan untuk browser, seperti yang Anda gunakan untuk membuka artikel ini.
Anda dapat menggunakan berbagai jenis browser yang biasa digunakan, seperti Mozilla, Chrome, dll.
Untuk aplikasi lain Anda hanya perlu editor sederhana yang ada di Windows, yaitu Notepad. Aplikasi ini dapat Anda buka melalui Start Menu. TAPI, untuk review memudahkan Andari Mengelola kode HTML, kami menyarankan Andari using Notepad ++, Yang bisa di download through tautan berikut .
editor html
Untuk sistem operasi selain Windows, Anda dapat menggunakan editor teks seperti Pico untuk Linux atau TextEdit untuk Mac.
HTML hanya untuk browser dan editor teks saja.
Apakah Perlu Koneksi Internet?
Untuk menjalankan HTML, tidak perlu koneksi internet, kecuali untuk artikel yang sedang Anda baca ini.
2. Pahami Browser Web
Browser web adalah aplikasi yang dapat digunakan untuk mengakses dan menampilkan halaman situs web.
Untuk halaman situs web Biasanya dibuat dengan HTML, XML dan lainnya.
Browser akan menerjemahkan sebuah halaman situs web yang dikirimkan melalui HTTP (Hypertext Transfer Protocol) ke dalam tampilan yang diterjemahkan manusia.
Meskipun setiap browser web memiliki fitur dan tampilan yang berbeda, tetapi untuk fungsi umum sama.
Baca juga: Belajar JavaScript Untuk Pemula
3. Memahami Sejarah HTML
HTML dibuat pada tahun 1990 oleh seorang ilmuan yang bernama Tim Berners-Lee. Tujuan awal dibuatnya HTML ini untuk memudahkan para ilmuan kompilasi akan mengakses dokumen mereka satu sama lain.
Ternyata hasil lebih dari yang dibayangkannya, HTML menjadi pondasi untuk situs web yang dikenal saat ini.
HTML adalah bahasa markup standar singkatan dari Hyper Text Markup Language . Dengan HTML Anda bisa memungkinakan untuk menampilkan informasi di internet.
Browser akan menampilkan kode HTML dengan tampilan seperti yang Anda baca saat ini, untuk melihat kode HTML diterima klik kanan kemudian pilih Lihat sumber halaman (ctrl + u).
belajar html dasar
Melalui tutorial ini akan membuat struktur HTML yang tidak jauh berbeda dengan kode tersebut. HTML adalah bagian penting untuk membuat situs web dan mudah dipelajari.
Baca juga: Belajar PHP untuk Membuat Web, Gratis di Situs Ini
4. Mempelajari Elemen, Tag, dan Atribut
Elemen pada HTML membuat struktur dan menyetujui browser untuk halaman web yang akan diambil. Sebagian untuk elemen terdiri dari pembuka tag , konten , dan tag penutup .
contoh elemen
Tag sendiri digunakan untuk memilih elemen pada awal dan akhir, dengan format yang sama diawali dengan tanda < dan ditutup dengan > .
Jika dibedakan, untuk tag terdapat dua jenis, yaitu pembuka tag <html> dan tag penutup </html> . Dua jenis tag ini hanya dibedakan dengan tanda garis miring.
Contoh
Sebagai contoh untuk elemen em (penekanan) terdiri dari semua kode mulai dari tag pembuka <em> dan tag penutup </em> .
Berikut untuk contoh codenya:
<em> Contoh elemen. </em>
Untuk hasil akan terlhat seperti tulisan di bawah:
Contoh elemen.
Untuk membuat heading atau subjudul, digunakan elemen h1 , h2 , h3 , h4 , h5 , atau h6 . Dimana kepanjangan h adalah heading . Untuk ukuran pagar gede diawali DENGAN h1 Sampai h6 Adalah ukuran terkecil.
Berikut ini adalah codenya:
<h1> Ini adalah h1 </h1>
<h2> Ini adalah h2 </h2>
<h3> Ini adalah h3 </h3>
<h4> Ini adalah h4 </h4>
<h5> Ini adalah h5 </h5>
<h6> Ini adalah h6 </h6>
Untuk tampilan di browser akan terlihat seperti gambar di bawah:
contoh heading
Seperti yang terlihat dari kode di atas, pada elemen yang ada pada tag pembuka dan tag penutup. Ini tidak berlaku untuk beberapa elemen seperti kode untuk membuat masukkan atau baris baru, yaitu <br> .
Menggunakan huruf besar atau huruf kecil?
Mungkin Anda memiliki pertanyaan tentang menyetujui tag , apakah harus menggunakan huruf besar atau huruf kecil. Meskipun browser tidak memahami hal tersebut, untuk pembuatan tag pada saat menggunakan huruf kecil.
Itulah sedikit pengenalan tentang elemen dan tag.
Atribut
Setelah Anda mengerti elemen dan tag, atribut Anda perlu mengerti apa itu. Seperti diketahui jika elemen terdiri dari sturktur pada HTML yang berfungsi untuk memperbaiki browser tentang apa yang akan dipindahkan.
atribut
Atribut keputusan atribut:
Nama atribut diikuti oleh tanda sama dengan.
Nilai dikaitkan diapit oleh dua tanda petik pembuka dan penutup.
Jika lebih dari satu atribut, beri jarak dengan spasi.
Berikut adalah contoh elemen yang ditambahkan atribut:
<p> Berikut adalah <a href="https://www.niagahoster.co.id/" title="Halaman hosting terbaik" target="_blank"> hosting terbaik </a>. </p>
Berikut adalah tampilan pada browser:
Berikut ini adalah hosting terbaik .
Penjelasan:
Dari contoh di atas untuk elemen <a> berguna untuk memberikan batasan pada hyperlink dengan beberapa atribut di dalamnya:
href - Ini adalah atribut untuk menentukan alamat situs web, di mana kompilasi kait diklik akan diarahkan ke halaman yang sesuai dengan tautan yang dipenuhi, pada contoh ini adalah halaman href = "https://www.niagahoster.co.id/" .
title - Atribut ini berguna untuk menambahkan informasi pada tautan kompilasi kursor mouse terhubung pada tautan. Pada contoh ini untuk judul yang digunakan adalah judul = "Halaman hosting terbaik" .
target - Untuk atribut ini berguna untuk browser jika tautan diklik akan dibuka pada tab baru. Pada contoh ini adalah target = "_ blank" . Jika atribut ini dihilangkan, untuk tautan tidak akan dibuka di tab baru.
Untuk mempercepat Anda dalam mempelajari HTML dasar ini, silakan baca langkah selanjutnya.
5. Struktur HTML
Setelah Anda memehami elemet HTML, selanjutnya adalah pemeriksaannya menjadi satu di dalam dokumen HTML.
Coba jawab kode berikut ini:
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Halaman pertamaku </title>
</head>
<body>
<p> Ini adalah halaman pertamaku </p>
</body>
</html>
Penjelasan:
<! DOCTYPE html> - Merupakan deklarasi pernyataan dari tipe dokumen
<html> </html> - Dikenal dengan elemen utama karena semua elemen berada di dasarnya.
<head> </head> - Elemen ini berfungsi untuk memasukkan konten yang tidak ingin didukung. Konten tersebut dapat terdiri dari kata kunci, deskripsi, CSS, dll.
<meta charset =”utf-8"> - Berfungsi untuk review memberitahu peramban Mengenai pengkodean Karakter Yang Sesuai DENGAN KETENTUAN UTF-8, Mengenai UTF-8 silakan baca artikel berikut .
<title> </title> - Merupakan judul dari halaman situs web yang muncul pada bagian browser tab.
<body> </body> - Berisi konten yang dicari di browser, kompilasi pengunjung memperoleh halaman tersebut, contohnya seperti artikel yang sedang Anda baca saat ini.
6. Buat Halaman Situs Web Pertama Anda
Dengan HTML Anda dapat membuat situs web sendiri dengan rumit, berbeda kompilasi Anda membuat situs web dengan WordPress . Meskipun situs web WordPress jauh lebih bagus, tetapi Anda belum tentu memahami strukturnya seperti apa.
Pada bagian pertama, Anda harus mengetahui hal yang diperlukan untuk membuat situs web dengan HTML, yaitu browser dan editor teks seperti Notepad.
Editor teks terbaik yang kami harap adalah Notepad ++, karena Anda akan lebih mudah membaca kode, silakan unduh melalui tautan ini , kemudian lakukan instalasi.
Setelah Anda selesai melakukan instalasi Notepad ++, silakan ikuti langkah di bawah ini:
1. Buka Notepad ++, kemudian buat halaman baru.
2. Salin kode di atas ke dalam halaman baru.
3. Kemudian simpan dengan Save as type pilih html.
membuat halaman html
Untuk melihat hasilnya, silakan buka file index.html yang telah Anda buat melalui browser. Berikut ini terlihat:
indeks tampilan halaman
7. Lengkapi Halaman Website Anda
Setelah Anda selesai membuat halaman situs web sederhana dan membahas strukturnya, selanjutnya ditambahkan beberapa elemen yang dibutuhkan pada halaman situs web pada umumnya.
Untuk sebuah halaman situs web biasanya terdari dari judul , subjudul , daftar , tautan , gambar , tabel , komentar untuk kode , dan form .
Untuk lebih detailnya, silakan ikuti langkah di bawah ini:
1. Silakan edit kode yang Anda buat sebelumnya, pertama buat judul, silakan tambahkan kode di bawah ini ke dalam tag <body> .
<h1> Hosting Indonesia </h1>
2. Setelah menambahkan judul, Anda dapat menambahkan paragraf pertama dibagian bawah tag h1 .
<p> Kami menyediakan berbagai paket hosting dengan fitur lengkap </p>
3. Selanjutnya adalah menambahkan subjudul , untuk penurut Anda dapat menggunakan h2, h3 dst , letakkan kode di bawah ini setelah tag p .
<h2> Pilihan Paket Hosting Indonesia: </h2>
4. Untuk menambahkan daftar, silakan masukkan kode berikut:
<ul>
<li> Paket Bayi </li>
<li> Paket Pelajar </li>
<li> Paket Pribadi </li>
<li> Paket Bisnis </li>
</ul>
5. Seperti yang telah kami bahas sebelumnya, untuk menambahkan tautan Anda perlu menggunakan atribut href yang ada di elemen <a>, untuk lebih jelasnya silakan menambahkan kode berikut pada daftar setiap paket hosting di nomor 4, sehingga codenya akan terlihat seperti berikut. Jangan lupa untuk mengecek hasil dengan merefresh halaman index.html :
<li> <a href="https://www.niagahoster.co.id" target="_blank"> Paket Bayi </a> </li>
<li> <a href="https://www.niagahoster.co.id" target="_blank"> Paket Pelajar </a> </li>
<li> <a href="https://www.niagahoster.co.id" target="_blank"> Paket Personal </a> </li>
<li> <a href="https://www.niagahoster.co.id" target="_blank"> Paket Bisnis </a> </li>
Berikut penampilan:
masukkan tautan html
6. Untuk membuat tampilan sedikit menarik, Anda silakan menambahkan gambar pada halaman tersebut. Pada contoh ini gambar akan ditempatkan di bagian bawah judul, yaitu elemen h1 . Silakan taruh gambar menjadi satu folder dengan file index.html . Kemudian beri nama, misalnya hosting-indonesia . Kemudian tambahkan kode berikut:
<img alt = "Hosting Indonesia" src = "hosting-indonesia.png" height = "200" />
Keterangan:
Untuk gambar hanya menggunakan satu tag, jadi untuk elementnya hanya <img />.
alt adalah nama untuk gambar yang dapat diakses oleh mesin pencari seperti Google.
src nama file dari gambar yang disetujui, jika file tidak ada di folder yang sama, atau sesuai dengan alamat situs web tertentu, Anda perlu menulisnya dengan lengkap, misalnya: https://namadomain.com/nama-file.png.
Ukuran Untuk, Supaya bentuknya proporsional, silakan gunakan shalat Satu Diantara tinggi ATAU lebar , PADA contoh Penyanyi Kami using tinggi .
Berikut penampilan:
gambar dengan html
7. Selanjutnya adalah cara membuat tabel di HTML, silakan tambahkan kode di bawah ini setelah kode untuk daftar yaitu di bawah tag </ul> .
<table border = "1">
<tr>
<td> Bayi </td>
<td> Pelajar </td>
<td> Pribadi </td>
<td> Bisnis </td>
</tr>
<tr>
<td> Rp19.800 / bln </td>
<td> Rp44.800 / bln </td>
<td> Rp67.800 / bln </td>
<td> Rp 91.800 / bln </td>
</tr>
<tr>
<td> Ruang Disk 500 MB </td>
<td> Ruang Disk Tidak Terbatas </td>
<td> Ruang Disk Tidak Terbatas </td>
<td> Ruang Disk Tidak Terbatas </td>
</tr>
<tr>
<td> 1 Domain </td>
<td> 10 Addon Domains </td>
<td> Domain Addon Tidak Terbatas </td>
<td> Domain Addon Tidak Terbatas </td>
</tr>
</table>
Untuk tampilan tabel akan terlihat seperti gambar di bawah:
tabel html
7. Supaya mudah dalam memahami kode fungsi yang dibuat, Anda dapat menambahkan keterangan atau komentar pada bagian atas kode yang ingin diberi keterangan. Pada contoh ini adalah komentar untuk memberi keterangan pada kode tabel.
<! - Untuk tabel harga ->
Berikut adalah kode yang akan terlihat pada editor Notepad ++:
kode komentar html
8. Selanjutnya ditambahkan formulir pada halaman HTML. Silakan tambahkan kode diikuti pada bagian bawah tag </table> .
<div>
<h2> Hubungi Kami </h2>
<form action = "index.html" method = "get">
<div>
<input type = "text" name = "nama" placeholder = "Nama Anda" diperlukan = "" />
</div> <br>
<div>
<input type = "text" name = "email" placeholder = "Masukkan Email Anda" diperlukan = "">
</div> <br>
<div>
<input type = "text" name = "subject" placeholder = "Subjek" required = "">
</div> <br>
<div>
<textarea type = "text" name = "pesan" rows = "10" cols = "30" placeholder = "Pertanyaan"> </textarea>
</div> <br>
<div>
<input type = "submit" value = "Kirim Sekarang">
</div>
</form>
</div>
Untuk form yang dibuat pada contoh ini mengerjakan untuk form kontak yang terdiri dari form nama, email, subjek, isi pertanyaan, dan tombol kirim.
Untuk ditampilkan akan terlihat seperti gambar di bawah ini:
bentuk kontak html
Pada langkah ini Anda sudah berhasil menyelesaikan tutorial belajar HTML, untuk memperbaiki diperlukan naskah tambahan CSS yang akan kami bahas pada tutorial selanjutnya. 🙂
Untuk kode keseluruhan pada artikel ini akan terlihat seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Halaman pertamaku</title>
</head>
<body>
<h1>Hosting Indonesia</h1>
<img alt="Hosting Indonesia" src="hosting-indonesia.png" height="200" />
<p>Kami menyediakan berbagai paket hosting dengan fitur lengkap</p>
<h2>Pilihan Paket Hosting Indonesia:</h2>
<ul>
<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Bayi</a></li>
<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Pelajar</a></li>
<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Personal</a></li>
<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Bisnis</a></li>
</ul>
<!-- Untuk tabel harga -->
<table border="1">
<tr>
<td>Bayi</td>
<td>Pelajar</td>
<td>Personal</td>
<td>Bisnis</td>
</tr>
<tr>
<td>Rp 19.800/ bln</td>
<td>Rp 44.800/ bln</td>
<td>Rp 67.800/ bln</td>
<td>Rp 91.800/ bln</td>
</tr>
<tr>
<td>500 MB Disk Space</td>
<td>Unlimited Disk Space</td>
<td>Unlimited Disk Space</td>
<td>Unlimited Disk Space</td>
</tr>
<tr>
<td>1 Domain</td>
<td>10 Addon Domains</td>
<td>Unlimited Addon Domains</td>
<td>Unlimited Addon Domains</td>
</tr>
</table>
<br>
<div>
<h2>Hubungi Kami</h2>
<form action=" index.html" method="get">
<div>
<input type="text" name="nama" placeholder="Nama Anda" required="" />
</div><br>
<div>
<input type="text" name="email" placeholder="Masukkan Email Anda" required="" >
</div><br>
<div>
<input type="text" name="subject" placeholder="Subjek" required="">
</div><br>
<div>
<textarea type="text" name="pesan" rows="10" cols="30" placeholder="Pertanyaan"></textarea>
</div><br>
<div>
<input type="submit" value="Kirim Sekarang" >
</div>
</form>
</div>
</body>
</html>
Sementara untuk tampilan akan terlihat
HTML (Hyper Text Markup Language) adalah merupakan dasar atau pondasi bahasa pemrograman sebuah halaman web, HTML muncul sebagai standar baru dari pengembangan dan pengembangannya internet, pada saat pertama kali muncul internet masih dalam keadaan berbasis teks sedangkan tampilan halaman web hanya berisikan teks yang monoton tanpa format dokumen secara visual, hanya memuat dokumen teks yang dikemas dalam format bungkus seperti tipe file .txt atau sering disebut notepad, tanpa paragraf, satu warna, satu ukuran huruf tanpa gambar dan juga tidak memiliki format visual dokumen seperti yang ditampilkan Ms. Word, hal ini akan sangat membosankan dalam membaca. Dan selain itu pertama kali muncul pengguna internet masih menggunakan terminal, hal itu jelas tidak ramah.
2. Sejarah HTML
Hyper Text Markup Language (HTML) pertama kali dibuat dan dikembangkan oleh Tim Berners-Lee pada awal tahun 1990-an pada saat itu masih bekerja di CERN. HTML dibuat dengan tujuan sebagai cara sederhana namun efektif untuk mengkodekan dokumen elektronik. HTML pertama kali dipopulerkan dengan menggunakan browser Mosaic.
Tahun 1980, IBM menyetujui pembuatan suatu dokumen yang akan disetujui setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang memuat teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Bahasa Markup, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.
Tahun 1986, ISO menyatakan bahwa IBM memiliki konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan beberapa publikasi (ISO 8879) yang dinyatakan markup bahasa sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi disebut nama lain, yaitu SGML (Standard Generalized Markup Language). ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk mengelola informasi teks dan sistem-sistem perkantoran. Selain melampaui perkiraan ISO, SGML dan sebagian besar dari SGML, yaitu HTML juga berguna untuk memanfaatkan internet. Khususnya bagi mereka yang menggunakan World Wide Web.
Mulai pada tahun 1989, sebuah nama HTML muncul dari karya Caillau Tim yang bekerja sama dnegan Spanduk Lee Robert yang sedang mengerjakan itu masih bekerja di CERN mulai mengembangkan bahasa pemrograman ini, dan dipopulerkan pertama kali dengan browser Mosaic. Dan mulailah dari tahun 1990 HTML sangat berkembang dengan cepat hingga mencapai versi HTML 5.0 yang digarap pada 4 Maret 2010 kemarin oleh W3C.
Sejarah dari standar HTML:
- HTML 2.0 (RFC 1866) dipahami sebagai standar 22 September 1995
- HTML 3.2 14 Januari 1996
- HTML 4.0 18 Desember 1997
- HTML 4.01 (perbaikan kecil) 24 Desember 1999
- ISO / IEC 15445: 2000 (“ISO HTML ”, berdasar pada HTML 4.01 Strict) 15 Mei 2000
- HTML 5 masih dalam draft pengerjaan Januari 2008
3. Versi HTML
HTML sekarang sudah mencapai versi 5.0. Sebelum digunakan, HTML harus disetujui oleh suatu badan yang bernama World Wide Web Concortium (W3C). Setiap peningkatan / peningkatan versi, tag tambahan tambahan dari fasilitas yang tidak didukung oleh versi sebelumnya. Tentunya versi yang telah dikeluarkan ini harus menjadi standar untuk peramban. Browser Bilamana ini tidak mendukung versi tertentu, maka browser ini tidak dapat menampilkan format HTML yang kita buat. Oleh karena itu, untuk melihat halaman web yang di format dengan HTML versi baru, harus memiliki browser yang sudah mendukung versi HTML tersebut.
Versi-versi HTML
HTML 1.0
Ini adalah awal mula dari HTML (pendahulunya). Pada versi ini masih terlihat beberapa kelemahan dan masih sangat sederhana. Versi 1.0 ini hanya terbatas pada judul, paragraf, hypertext, list, dan setak tebal atau miring pada teks.
HTML 2.0
Versi 2.0 pada 14 Januari 1996, pada versi ini ada beberapa tambahan yang mendukung bentuk komentar, hal ini menyebabkan perbedaan interaktif dan mulai dari versi ini yang menjadikan pelopor dalam pengembangan homepage interaktif.
HTML 3.0
Dirilis pada 18 Desember 1997 yang sering disebut sebagai HTML + yang memiliki kemampuan dalam beberapa fasilitas yang mendukung tabel dalam paragraf, akan tetapi versi ini tidak bertahan lama.
HTML 3.2
Dan pada bulan Mei 1996 dikeluarkan versi baru sebagai penambahan dan penyempurnaan versi 3.0 ini yaitu HTML veri 3.2, versi keluarnya karena ada beberapa masalah yang timbul pada pengembang peramban yang telah melakukan pembaharuan dengan cara yang lain apa yang diharapkan, kemudian dibakukan versi 3.2 untuk mengakomodasi praktik yang banyak digunakan oleh pengembang browser dan diterima secara umum, dapat disetujui versi 3.2 ini merupakan versi 3.0 yang dikembangkan oleh beberapa pengembang browser seperti Netscape dan Microsoft.
HTML 4.0
Yang terakhir terjadi pada tahun 1999 yang dikeluarkan tanggal 24 Desember yaitu HTML versi 4.0, seperti yang kita kenal HTML pada saat ini diperoleh tautan, meta, imagemaps. Gambar dan lain-lain sebagai penyempurnaan versi 3.2. Di samping itu versi ini ditambahkan tag-tag baru seperti ABBR, ACRONYM, BUTTON, PARAM, BUTTON, TBODY, THEAD dan lain sebagainya.
HTML 5.0
Pada tanggal 4 Maret 2010, terdapat sebuah informasi bahwasannya HTML versi 5.0 masih dikembangkan oleh W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task Force) adalah sebuah organisasi yang menyediakan HTML sejak versi 2.0.
4. Struktur Dasar Dokumen HTML
Struktur dasar dokumen HTML adalah sebagai berikut:
<html>
<head>
<title> Di sini Judul Dokumen HTML </title>
</head>
<body>
Di sini mengakses informasi Web
</body>
</html>
Dari struktur dasar HTML di atas dapat dibuat sebagai berikut:
a. Menandai
Adalah teks khusus ( markup ) terdiri dari dua karakter " < " dan " > ", sebagai contoh <body> adalah tag dengan nama tubuh. Tag umum yang diterbitkan secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter " / " setelah karakter " < "), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.
b. Elemen
Elemen terdiri atas tiga bagian, yaitu pembuka tag, isi, dan penandaan tag. Sebagai contoh untuk menampilkan judul dokumen HTML pada browser web digunakan elemen judul, dimana:
ini adalah tag penutup judul dokumen HTML
Tag-tag yang diterbitkan secara berpasangan pada suatu elemen HTML, tidak dapat saling bertumpang tindih dengan pasangan tag-tag lainnya.
Contoh menerima tag-tag yang benar
<p>
<b>
................
</b>
</p>
Contoh tag-tag yang salah
<p>
<b>
................
</p>
</b>
c. Atribut
Atribut yang ditentukan dari suatu elemen HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:
<TAG>
nama-attr = "nilai-attr"
nama-attr = "nilai-attr"
.................
>
.................
</TAG>
Atribut nilai umum harus dalam petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah
d. Elemen HTML
Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.
Sintaks:
<html>
..........
</html>
e. Elemen HEAD
Merupakan kepala dari dokumen HTML. Tag dan tag terletak di antara tag dan tag.
Sintaks:
<head>
...........
</head>
f. JUDUL Elemen
Merupakan judul dari dokumen HTML Yang dimaksud pada judul jendela browser. Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>.
Sintaks:
<title>
.........
</title>
g. Elemen BODY
Elemen ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>. Elemen BODY memiliki atribut-atribut yang menspesifikasikan warna khusus dan latarbelakang dokumen yang akan dikenakan pada browser.
Sintaks:
<body text = "v" bgcolor = "w" background = "uri" tautan = "x" alink = "y" vlink = "z">
..............
</body>
Atribut teks memberikan warna pada teks, bgcolor memberikan warna pada latar belakang dokumen HTML, latar belakang memberikan latarbelakang dokumen HTML dalam bentuk gambar, tautan memberikan nilai warna untuk tautan, alink memberikan warna untuk tautan yang sedang aktif, vlink memberikan warna untuk tautan yang telah dikunjungi. Jika atribut bgcolor dan latar belakang dispesifikasikan maka atribut latar belakang yang akan digunakan, akan tetapi jika nilai atribut latar belakang (gambar) tidak ditemukan pada dokumen HTML maka atribut bgcolor yang akan digunakan.
5. Kelebihan dan Kekurangan HTML
Kelebihannya:
1 mewakili bahasa pengkodean yang lintas platform (lintas platform), maksudnya HTML dapat digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai jenis sistem operasi yang berbeda. Jadi berdifat fleksibel karena ditulis cukup dengan menggunakan editor karakter ASCII.
2 Dapat disisipi gambar baik gambar statik atau dinamis (animasi) termasuk menggunakan gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk mengubah pada suatu halaman web, di mana setiap titik-titik yang telah didefinisikan berbentuk persegi panjang (kotak), poligon (kurva tak beraturan) atau lingkaran yang digunakan untuk 'lompat' ke halaman lain, atau tautan ke halaman di luar web yang dibutuhkan .
3 Dapat disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki plug-in khusus untuk menggunakan file-file animasi ini).
4 Dapat disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript, Vbscript, Active Server Pages, Perl, Tcl, PHP, dan sebagainya.
5 Bukan merupakan bahasa pemrograman sehingga tidak memerlukan kompiler. Cara menjalankannya cukup dengan menggunakan browser.
Kekurangannya:
1 Menghasilkan halaman yang statistik, untuk memperoleh halaman yang dinamis harus menggunakan bahasa pemrograman tertentu seperti Javascript atau Vbscript dan animasi seperti Flash atau Shockwave.
2 Memiliki tag-tag yang sangat banyak dilakukan untuk yang masih awam.
3 Tidak dapat menghasilkan halaman yang interaktif. Klien bisa maksud dengan klien. Untuk keperluan itu HTML harus disisipi bahasa pemrograman yang dapat membantu hal tersebut, contohnya Perl dan Tcl.
LANGKAH LANGKAH BELAJAR HTML
Berikut adalah Langkah Belajar HTML
Agar proses belajar HTML berjalan lancar, ada beberapa langkah yang harus Anda lakukan, diperkirakan:
1. Persiapan Alat Belajar HTML
Pada Langkah ini Anda akan mengetahui hal apa saja yang harus disiapkan.
Apa yang Anda Butuhkan?
HTML yang diperlukan untuk browser, seperti yang Anda gunakan untuk membuka artikel ini.
Anda dapat menggunakan berbagai jenis browser yang biasa digunakan, seperti Mozilla, Chrome, dll.
Untuk aplikasi lain Anda hanya perlu editor sederhana yang ada di Windows, yaitu Notepad. Aplikasi ini dapat Anda buka melalui Start Menu. TAPI, untuk review memudahkan Andari Mengelola kode HTML, kami menyarankan Andari using Notepad ++, Yang bisa di download through tautan berikut .
editor html
Untuk sistem operasi selain Windows, Anda dapat menggunakan editor teks seperti Pico untuk Linux atau TextEdit untuk Mac.
HTML hanya untuk browser dan editor teks saja.
Apakah Perlu Koneksi Internet?
Untuk menjalankan HTML, tidak perlu koneksi internet, kecuali untuk artikel yang sedang Anda baca ini.
2. Pahami Browser Web
Browser web adalah aplikasi yang dapat digunakan untuk mengakses dan menampilkan halaman situs web.
Untuk halaman situs web Biasanya dibuat dengan HTML, XML dan lainnya.
Browser akan menerjemahkan sebuah halaman situs web yang dikirimkan melalui HTTP (Hypertext Transfer Protocol) ke dalam tampilan yang diterjemahkan manusia.
Meskipun setiap browser web memiliki fitur dan tampilan yang berbeda, tetapi untuk fungsi umum sama.
Baca juga: Belajar JavaScript Untuk Pemula
3. Memahami Sejarah HTML
HTML dibuat pada tahun 1990 oleh seorang ilmuan yang bernama Tim Berners-Lee. Tujuan awal dibuatnya HTML ini untuk memudahkan para ilmuan kompilasi akan mengakses dokumen mereka satu sama lain.
Ternyata hasil lebih dari yang dibayangkannya, HTML menjadi pondasi untuk situs web yang dikenal saat ini.
HTML adalah bahasa markup standar singkatan dari Hyper Text Markup Language . Dengan HTML Anda bisa memungkinakan untuk menampilkan informasi di internet.
Browser akan menampilkan kode HTML dengan tampilan seperti yang Anda baca saat ini, untuk melihat kode HTML diterima klik kanan kemudian pilih Lihat sumber halaman (ctrl + u).
belajar html dasar
Melalui tutorial ini akan membuat struktur HTML yang tidak jauh berbeda dengan kode tersebut. HTML adalah bagian penting untuk membuat situs web dan mudah dipelajari.
Baca juga: Belajar PHP untuk Membuat Web, Gratis di Situs Ini
4. Mempelajari Elemen, Tag, dan Atribut
Elemen pada HTML membuat struktur dan menyetujui browser untuk halaman web yang akan diambil. Sebagian untuk elemen terdiri dari pembuka tag , konten , dan tag penutup .
contoh elemen
Tag sendiri digunakan untuk memilih elemen pada awal dan akhir, dengan format yang sama diawali dengan tanda < dan ditutup dengan > .
Jika dibedakan, untuk tag terdapat dua jenis, yaitu pembuka tag <html> dan tag penutup </html> . Dua jenis tag ini hanya dibedakan dengan tanda garis miring.
Contoh
Sebagai contoh untuk elemen em (penekanan) terdiri dari semua kode mulai dari tag pembuka <em> dan tag penutup </em> .
Berikut untuk contoh codenya:
<em> Contoh elemen. </em>
Untuk hasil akan terlhat seperti tulisan di bawah:
Contoh elemen.
Untuk membuat heading atau subjudul, digunakan elemen h1 , h2 , h3 , h4 , h5 , atau h6 . Dimana kepanjangan h adalah heading . Untuk ukuran pagar gede diawali DENGAN h1 Sampai h6 Adalah ukuran terkecil.
Berikut ini adalah codenya:
<h1> Ini adalah h1 </h1>
<h2> Ini adalah h2 </h2>
<h3> Ini adalah h3 </h3>
<h4> Ini adalah h4 </h4>
<h5> Ini adalah h5 </h5>
<h6> Ini adalah h6 </h6>
Untuk tampilan di browser akan terlihat seperti gambar di bawah:
contoh heading
Seperti yang terlihat dari kode di atas, pada elemen yang ada pada tag pembuka dan tag penutup. Ini tidak berlaku untuk beberapa elemen seperti kode untuk membuat masukkan atau baris baru, yaitu <br> .
Menggunakan huruf besar atau huruf kecil?
Mungkin Anda memiliki pertanyaan tentang menyetujui tag , apakah harus menggunakan huruf besar atau huruf kecil. Meskipun browser tidak memahami hal tersebut, untuk pembuatan tag pada saat menggunakan huruf kecil.
Itulah sedikit pengenalan tentang elemen dan tag.
Atribut
Setelah Anda mengerti elemen dan tag, atribut Anda perlu mengerti apa itu. Seperti diketahui jika elemen terdiri dari sturktur pada HTML yang berfungsi untuk memperbaiki browser tentang apa yang akan dipindahkan.
atribut
Atribut keputusan atribut:
Nama atribut diikuti oleh tanda sama dengan.
Nilai dikaitkan diapit oleh dua tanda petik pembuka dan penutup.
Jika lebih dari satu atribut, beri jarak dengan spasi.
Berikut adalah contoh elemen yang ditambahkan atribut:
<p> Berikut adalah <a href="https://www.niagahoster.co.id/" title="Halaman hosting terbaik" target="_blank"> hosting terbaik </a>. </p>
Berikut adalah tampilan pada browser:
Berikut ini adalah hosting terbaik .
Penjelasan:
Dari contoh di atas untuk elemen <a> berguna untuk memberikan batasan pada hyperlink dengan beberapa atribut di dalamnya:
href - Ini adalah atribut untuk menentukan alamat situs web, di mana kompilasi kait diklik akan diarahkan ke halaman yang sesuai dengan tautan yang dipenuhi, pada contoh ini adalah halaman href = "https://www.niagahoster.co.id/" .
title - Atribut ini berguna untuk menambahkan informasi pada tautan kompilasi kursor mouse terhubung pada tautan. Pada contoh ini untuk judul yang digunakan adalah judul = "Halaman hosting terbaik" .
target - Untuk atribut ini berguna untuk browser jika tautan diklik akan dibuka pada tab baru. Pada contoh ini adalah target = "_ blank" . Jika atribut ini dihilangkan, untuk tautan tidak akan dibuka di tab baru.
Untuk mempercepat Anda dalam mempelajari HTML dasar ini, silakan baca langkah selanjutnya.
5. Struktur HTML
Setelah Anda memehami elemet HTML, selanjutnya adalah pemeriksaannya menjadi satu di dalam dokumen HTML.
Coba jawab kode berikut ini:
<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Halaman pertamaku </title>
</head>
<body>
<p> Ini adalah halaman pertamaku </p>
</body>
</html>
Penjelasan:
<! DOCTYPE html> - Merupakan deklarasi pernyataan dari tipe dokumen
<html> </html> - Dikenal dengan elemen utama karena semua elemen berada di dasarnya.
<head> </head> - Elemen ini berfungsi untuk memasukkan konten yang tidak ingin didukung. Konten tersebut dapat terdiri dari kata kunci, deskripsi, CSS, dll.
<meta charset =”utf-8"> - Berfungsi untuk review memberitahu peramban Mengenai pengkodean Karakter Yang Sesuai DENGAN KETENTUAN UTF-8, Mengenai UTF-8 silakan baca artikel berikut .
<title> </title> - Merupakan judul dari halaman situs web yang muncul pada bagian browser tab.
<body> </body> - Berisi konten yang dicari di browser, kompilasi pengunjung memperoleh halaman tersebut, contohnya seperti artikel yang sedang Anda baca saat ini.
6. Buat Halaman Situs Web Pertama Anda
Dengan HTML Anda dapat membuat situs web sendiri dengan rumit, berbeda kompilasi Anda membuat situs web dengan WordPress . Meskipun situs web WordPress jauh lebih bagus, tetapi Anda belum tentu memahami strukturnya seperti apa.
Pada bagian pertama, Anda harus mengetahui hal yang diperlukan untuk membuat situs web dengan HTML, yaitu browser dan editor teks seperti Notepad.
Editor teks terbaik yang kami harap adalah Notepad ++, karena Anda akan lebih mudah membaca kode, silakan unduh melalui tautan ini , kemudian lakukan instalasi.
Setelah Anda selesai melakukan instalasi Notepad ++, silakan ikuti langkah di bawah ini:
1. Buka Notepad ++, kemudian buat halaman baru.
2. Salin kode di atas ke dalam halaman baru.
3. Kemudian simpan dengan Save as type pilih html.
membuat halaman html
Untuk melihat hasilnya, silakan buka file index.html yang telah Anda buat melalui browser. Berikut ini terlihat:
indeks tampilan halaman
7. Lengkapi Halaman Website Anda
Setelah Anda selesai membuat halaman situs web sederhana dan membahas strukturnya, selanjutnya ditambahkan beberapa elemen yang dibutuhkan pada halaman situs web pada umumnya.
Untuk sebuah halaman situs web biasanya terdari dari judul , subjudul , daftar , tautan , gambar , tabel , komentar untuk kode , dan form .
Untuk lebih detailnya, silakan ikuti langkah di bawah ini:
1. Silakan edit kode yang Anda buat sebelumnya, pertama buat judul, silakan tambahkan kode di bawah ini ke dalam tag <body> .
<h1> Hosting Indonesia </h1>
2. Setelah menambahkan judul, Anda dapat menambahkan paragraf pertama dibagian bawah tag h1 .
<p> Kami menyediakan berbagai paket hosting dengan fitur lengkap </p>
3. Selanjutnya adalah menambahkan subjudul , untuk penurut Anda dapat menggunakan h2, h3 dst , letakkan kode di bawah ini setelah tag p .
<h2> Pilihan Paket Hosting Indonesia: </h2>
4. Untuk menambahkan daftar, silakan masukkan kode berikut:
<ul>
<li> Paket Bayi </li>
<li> Paket Pelajar </li>
<li> Paket Pribadi </li>
<li> Paket Bisnis </li>
</ul>
5. Seperti yang telah kami bahas sebelumnya, untuk menambahkan tautan Anda perlu menggunakan atribut href yang ada di elemen <a>, untuk lebih jelasnya silakan menambahkan kode berikut pada daftar setiap paket hosting di nomor 4, sehingga codenya akan terlihat seperti berikut. Jangan lupa untuk mengecek hasil dengan merefresh halaman index.html :
<li> <a href="https://www.niagahoster.co.id" target="_blank"> Paket Bayi </a> </li>
<li> <a href="https://www.niagahoster.co.id" target="_blank"> Paket Pelajar </a> </li>
<li> <a href="https://www.niagahoster.co.id" target="_blank"> Paket Personal </a> </li>
<li> <a href="https://www.niagahoster.co.id" target="_blank"> Paket Bisnis </a> </li>
Berikut penampilan:
masukkan tautan html
6. Untuk membuat tampilan sedikit menarik, Anda silakan menambahkan gambar pada halaman tersebut. Pada contoh ini gambar akan ditempatkan di bagian bawah judul, yaitu elemen h1 . Silakan taruh gambar menjadi satu folder dengan file index.html . Kemudian beri nama, misalnya hosting-indonesia . Kemudian tambahkan kode berikut:
<img alt = "Hosting Indonesia" src = "hosting-indonesia.png" height = "200" />
Keterangan:
Untuk gambar hanya menggunakan satu tag, jadi untuk elementnya hanya <img />.
alt adalah nama untuk gambar yang dapat diakses oleh mesin pencari seperti Google.
src nama file dari gambar yang disetujui, jika file tidak ada di folder yang sama, atau sesuai dengan alamat situs web tertentu, Anda perlu menulisnya dengan lengkap, misalnya: https://namadomain.com/nama-file.png.
Ukuran Untuk, Supaya bentuknya proporsional, silakan gunakan shalat Satu Diantara tinggi ATAU lebar , PADA contoh Penyanyi Kami using tinggi .
Berikut penampilan:
gambar dengan html
7. Selanjutnya adalah cara membuat tabel di HTML, silakan tambahkan kode di bawah ini setelah kode untuk daftar yaitu di bawah tag </ul> .
<table border = "1">
<tr>
<td> Bayi </td>
<td> Pelajar </td>
<td> Pribadi </td>
<td> Bisnis </td>
</tr>
<tr>
<td> Rp19.800 / bln </td>
<td> Rp44.800 / bln </td>
<td> Rp67.800 / bln </td>
<td> Rp 91.800 / bln </td>
</tr>
<tr>
<td> Ruang Disk 500 MB </td>
<td> Ruang Disk Tidak Terbatas </td>
<td> Ruang Disk Tidak Terbatas </td>
<td> Ruang Disk Tidak Terbatas </td>
</tr>
<tr>
<td> 1 Domain </td>
<td> 10 Addon Domains </td>
<td> Domain Addon Tidak Terbatas </td>
<td> Domain Addon Tidak Terbatas </td>
</tr>
</table>
Untuk tampilan tabel akan terlihat seperti gambar di bawah:
tabel html
7. Supaya mudah dalam memahami kode fungsi yang dibuat, Anda dapat menambahkan keterangan atau komentar pada bagian atas kode yang ingin diberi keterangan. Pada contoh ini adalah komentar untuk memberi keterangan pada kode tabel.
<! - Untuk tabel harga ->
Berikut adalah kode yang akan terlihat pada editor Notepad ++:
kode komentar html
8. Selanjutnya ditambahkan formulir pada halaman HTML. Silakan tambahkan kode diikuti pada bagian bawah tag </table> .
<div>
<h2> Hubungi Kami </h2>
<form action = "index.html" method = "get">
<div>
<input type = "text" name = "nama" placeholder = "Nama Anda" diperlukan = "" />
</div> <br>
<div>
<input type = "text" name = "email" placeholder = "Masukkan Email Anda" diperlukan = "">
</div> <br>
<div>
<input type = "text" name = "subject" placeholder = "Subjek" required = "">
</div> <br>
<div>
<textarea type = "text" name = "pesan" rows = "10" cols = "30" placeholder = "Pertanyaan"> </textarea>
</div> <br>
<div>
<input type = "submit" value = "Kirim Sekarang">
</div>
</form>
</div>
Untuk form yang dibuat pada contoh ini mengerjakan untuk form kontak yang terdiri dari form nama, email, subjek, isi pertanyaan, dan tombol kirim.
Untuk ditampilkan akan terlihat seperti gambar di bawah ini:
bentuk kontak html
Pada langkah ini Anda sudah berhasil menyelesaikan tutorial belajar HTML, untuk memperbaiki diperlukan naskah tambahan CSS yang akan kami bahas pada tutorial selanjutnya. 🙂
Untuk kode keseluruhan pada artikel ini akan terlihat seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Halaman pertamaku</title>
</head>
<body>
<h1>Hosting Indonesia</h1>
<img alt="Hosting Indonesia" src="hosting-indonesia.png" height="200" />
<p>Kami menyediakan berbagai paket hosting dengan fitur lengkap</p>
<h2>Pilihan Paket Hosting Indonesia:</h2>
<ul>
<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Bayi</a></li>
<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Pelajar</a></li>
<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Personal</a></li>
<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Bisnis</a></li>
</ul>
<!-- Untuk tabel harga -->
<table border="1">
<tr>
<td>Bayi</td>
<td>Pelajar</td>
<td>Personal</td>
<td>Bisnis</td>
</tr>
<tr>
<td>Rp 19.800/ bln</td>
<td>Rp 44.800/ bln</td>
<td>Rp 67.800/ bln</td>
<td>Rp 91.800/ bln</td>
</tr>
<tr>
<td>500 MB Disk Space</td>
<td>Unlimited Disk Space</td>
<td>Unlimited Disk Space</td>
<td>Unlimited Disk Space</td>
</tr>
<tr>
<td>1 Domain</td>
<td>10 Addon Domains</td>
<td>Unlimited Addon Domains</td>
<td>Unlimited Addon Domains</td>
</tr>
</table>
<br>
<div>
<h2>Hubungi Kami</h2>
<form action=" index.html" method="get">
<div>
<input type="text" name="nama" placeholder="Nama Anda" required="" />
</div><br>
<div>
<input type="text" name="email" placeholder="Masukkan Email Anda" required="" >
</div><br>
<div>
<input type="text" name="subject" placeholder="Subjek" required="">
</div><br>
<div>
<textarea type="text" name="pesan" rows="10" cols="30" placeholder="Pertanyaan"></textarea>
</div><br>
<div>
<input type="submit" value="Kirim Sekarang" >
</div>
</form>
</div>
</body>
</html>
Sementara untuk tampilan akan terlihat
Komentar
Posting Komentar