Tutorial HTML (untuk Pemula)

Apa itu HTML?

htmlHTML, akronim untuk HyperText Markup Language, adalah bahasa komputer untuk membuat situs web dan aplikasi web. Terdiri dari serangkaian kode yang biasanya ditulis dalam file teks dan kemudian disimpan sebagai html, kode yang ditulis dalam bahasa HTML diterjemahkan menjadi teks yang indah dan berformat baik atau kombinasi teks dan media bila dilihat melalui browser.

HTML pertama kali dikembangkan oleh fisikawan Inggris Tim Berners-Lee pada tahun 1990, dan telah mengalami begitu banyak evolusi sejak saat itu sehingga versi terbaru dapat mencapai jauh lebih banyak daripada yang diperkirakan saat bahasa pertama kali ditemukan.

Dalam tutorial ini, kita akan membahas dasar-dasar bahasa HTML dan semua yang perlu Anda ketahui untuk memulai dengan HTML sebagai pemula.

Versi HTML

Pertama, ikhtisar singkat semua versi HTML sejak HTML ditemukan.

  • HTML 1.0 : Ini adalah versi HTML barebones dan rilis bahasa yang pertama.
  • HTML 2.0 : Versi ini diperkenalkan pada tahun 1995 dan berangsur-angsur berevolusi untuk memungkinkan kemampuan tambahan termasuk: upload file berbasis form, tabel, peta gambar sisi klien dan internasionalisasi.
  • HTML 3.2 : Dalam upaya untuk memastikan pengembangan standar untuk World Wide Web, World Wide Web Consortium (W3C) didirikan oleh Tim Berners-Lee pada tahun 1994. Pada tahun 1997, mereka menerbitkan HTML 3.2.
  • HTML 4.0 : Kemudian pada tahun 1997, W3C merilis HTML 4.0 – versi yang mengadopsi banyak jenis dan atribut elemen khusus browser.
  • HTML 4.0 kemudian akan diterbitkan ulang dengan pengeditan kecil pada tahun 1998.
  • HTML 4.01 : Pada bulan Desember 1999, HTML 4.01 dirilis.
  • XHTML : Spesifikasi untuk ini diperkenalkan pada tahun 2000 dan direkomendasikan untuk digunakan sebagai standar bersama dengan HTML 4.01. Ini memasukkan XML untuk memastikan kode ditulis dengan benar dan untuk memastikan interoperabilitas antar bahasa pemrograman.
  • HTML5 : W3C menerbitkan HTML5 sebagai rekomendasi pada bulan Oktober 2014 dan kemudian akan merilis HTML 5.1 pada bulan November 2016.

Membuat Judul dalam HTML

membuat judul di html

Pos memainkan peran utama dalam kesuksesan sebuah situs web. Pertama, mereka mempermudah pembaca untuk memindai konten halaman Anda. Kedua, dan mungkin yang lebih penting, mereka mengkomunikasikan struktur halaman web Anda ke mesin telusur – dan akibatnya dampak konten Anda masuk dalam mesin pencari.

Yang mengatakan, penting untuk menghindari penggunaan tag judul agar teks Anda besar atau tebal. Ada tag lain yang bisa digunakan untuk itu (yang nanti akan kita dapatkan di bagian ini). Sebagai gantinya, heading tag harus digunakan semata-mata untuk struktur.

Ada enam tag judul dalam HTML: <h1> sampai <h6>, dengan tag <h1> yang menunjukkan judul yang paling penting dan tag <h6> yang menunjukkan judul yang paling tidak penting.

Untuk membuat judul, cukup tentukan judul yang Anda buat, buka judul dengan tag pos biasa dan tutup setelah selesai.

HTML Headings Contoh :

  • <h1> Ini adalah Judul HTML Pertama Anda </ h1> (yang terbesar)
  • <h2> Ini adalah Judul HTML Kedua Anda </ h2>
  • <h3> Ini adalah Judul HTML Ketiga </ h3> Anda
  • <h4> Ini adalah Judul HTML Keempat </ h4> Anda
  • <h5> Ini adalah Judul HTML Kelima </ h5> Anda
  • <h6> Ini adalah Judul HTML Keenam Anda </ h6>

Membuat paragraf

 

Langkah selanjutnya adalah mulai membuat paragraf. Paragraf dapat dibuat dengan tag <p>.

Contoh :

<p> Ini adalah paragraf pertama Anda. </ p>
 <p> Ini adalah paragraf kedua Anda, dan Anda akan menciptakan lebih banyak paragraf. </ p>

Konon, penting untuk disadari bahwa menulis dalam HTML sangat berbeda dengan penulisan teks murni; jadi jika Anda memecah teks di dalam HTML tanpa memulai paragraf baru, tidak akan menjadi masalah bila teks ditampilkan oleh browser. Sebagai gantinya, Anda ingin menggunakan jeda baris, yang ditunjukkan oleh tag <br>.

Contoh :

<p> Ini adalah paragraf baru. 
 Dan saya ingin menggunakan sejumlah baris baru. 
 Jadi saya memecahnya. </ P>

Ini tidak akan keluar sebagai berikut:

Ini adalah paragraf baru. Dan saya ingin menggunakan sejumlah baris baru. Jadi saya memecahnya.

Sebagai gantinya, akan keluar seperti ini:

Ini adalah paragraf baru. Dan saya ingin menggunakan sejumlah baris baru. Jadi saya memecahnya.

Jadi, bagaimana Anda memecahkan teks menjadi baris baru seperti pada contoh di bawah ini ?:

Ini adalah paragraf baru. Dan saya ingin menggunakan sejumlah baris baru. Jadi saya memecahnya.

Dengan menggunakan jeda baris.

Contoh :

<p> Ini adalah paragraf baru <br> <br> Dan saya ingin menggunakan sejumlah baris baru. <br> Jadi saya memecahnya. </ p>

Yang mengatakan, penting untuk dicatat bahwa baris istirahat (<br>) tag adalah tag kosong, jadi Anda tidak perlu menutupnya.

Memformat Teks dalam HTML

memformat teks dalam HTML

Langkah selanjutnya adalah memformat teks Anda dalam HTML. Di sinilah Anda dapat menunjukkan apakah Anda ingin teks Anda dicetak tebal, dicetak miring, digarisbawahi, digabungkan, digantikan, dsb. Ini adalah panduan dasar, jadi bagian ini tidak akan menjadi format semua-akhir semua; Sebagai gantinya, kami hanya akan menyertakan beberapa tag pemformatan dasar. Proses untuk menggunakan bentuk pemformatan lainnya sederhana; cari saja tag yang Anda inginkan dan lanjutkan:

Menggunakan huruf tebal : <b> Dia anak laki-laki </ b> keluar saat dia masih kecil

Menggunakan huruf miring : <i> Dia adalah anak laki-laki </ i> keluar saat dia masih kecil

Menggarisbawahi teks : <u> Dia adalah anak laki-laki </ u> keluar saat dia masih kecil . Namun, perlu dicatat bahwa tag <u> sudah tidak berlaku lagi pada HTML 4.01 dan didefinisikan ulang untuk mewakili teks yang berbeda dalam HTML5. Sebagai hasilnya, disarankan untuk menggunakan CSS untuk menunjukkan teks yang harus digarisbawahi. Karena ini adalah panduan dasar, kita tetap menyimpannya di sini.

Menggunakan subskala : <sub> Dia adalah anak laki-laki </ sub> keluar saat dia masih kecil

Menggunakan superscript : <sup> Dia adalah anak laki-laki </ sup> keluar saat dia masih kecil

Untuk tag lain yang dapat digunakan untuk memformat, Anda mungkin ingin melihat glosarium di akhir sumber ini di mana kami menyertakan banyak tag HTML yang relevan.

Daftar yang dipesan dan tidak berurutan

Cepat atau lambat Anda harus membuat daftar. Daftar bisa dipesan (yaitu nomor) atau tidak berurutan (yaitu tidak terhitung).

Berikut adalah contoh daftar yang dipesan:

  1. Barang 1
  2. Item 2
  3. Item 3

Inilah cara membuatnya:

<ol>
 <li> Item 1 </ li>
 <li> Item 2 </ li>
 <li> Item 3 </ li>
 </ ol>

Berikut adalah contoh daftar unordered:

  • Barang 1
  • Item 2
  • Item 3

Inilah cara membuatnya:

<ul>
 <li> Item 1 </ li>
 <li> Butir 2 </ li>
 <li> Butir 3 </ li>
 </ ul>

Jika belum jelas. Berikut ini rinciannya:

Tag <li> digunakan untuk menunjukkan setiap item pada daftar. Saat membuat daftar, Anda dapat menggunakan tag <ol> untuk menunjukkan daftar pesanan (“o” = ordered and “l” = list) atau tag <ul> untuk menunjukkan daftar unordered (“u” = unordered dan ” l “= daftar). Kamu mendapat intinya

Daftar bersarang

Kami juga dapat memiliki daftar bersarang, atau daftar dalam daftar.

Contoh:

  • Barang 1
    • Item 1 disarangkan
    • Item 2 disarangkan
  • Item 2
  • Item 3

Ini bisa dibuat dengan:

<
 item> Item 1
 <ul>
 <li> Item 1 nested </ li>
 <li> Item 2 bersarang </ li>
 <li> Item 3 bersarang </ li>
 </ ul>
 </ li>
 < li> Item 2 </ li>
 <li> Butir 3 </ li>
 </ ul>

Seperti yang Anda lihat, Anda cukup membuka tag daftar lain – memesan (<ol>) atau tidak beraturan (<ul>) – tergantung pada apa yang Anda inginkan sebelum menutup item yang ingin Anda sarang.

 

Tags:

Add a Comment

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

error: usahakan untuk tidak mengcopas !!