Coding html menggunakan apa?

Membuat Format code pada HTML

format code html digunakan untuk membuat sebuah text dari code komputer. format code pada HTML di tulis dengan menggunakan tag <code>. code ini diletakkan dalam <body> yang berada dalam dokumen HTML. web browser akan menampilkan elemen atau teks yang berada dalam <code> sama dengan tampilan kita menuliskan kode aplikasi kedalam text editor .

Isi dari tag code tidak akan di eksekusi oleh browser, tetapi akan di tampilkan dalam bentuk text yang berformat syntax atau kode program.

<code> pada HTML termasuk kelompok inline level element, dan mengikuti alur text yang ada. penulisan format code ini misalkan dalam penulisan syntak yang akan ditampikan kedalam halaman web, maka untuk menampilkannya bisa menggunakan <code> pada bagian <body> HTML.

Berikut adalah contoh cara penulisan dan penggunaan tag <code> di dalam HTML:

<!DOCTYPE html>

<html>

<head>

<title>belajar membuat format kode HTML</title>

</head>

<body>

<p>HTML--->ini menggunakan tag paragraf</p>

<code>HyperText Markup Language--->ini menggunakan tag code ,syntax kode program dapat di ketikkan di sini dan tidak akan di eksekusi sebagai program,tetapi di tampilkan dengan text yang berformat kode program</code>

</body>

</html>

Membuat Format code pada HTML

dari contoh di atas dapat anda lihat perbedaan antara <code> dengan <p>. salah satu perbedaan yang paling menonjol adalah font yang digunakan.

jadi, kesimpulannya : <code> digunakan dalam penulisan code program dalam halaman web. salah satu contoh penggunaan <code> dalam aplikasi adalah dalam pembuatan text editor online.

Tutorial HTML Dasar Lainnya

Belajar HTML Part 1 : Pengertian HTML

Belajar HTML Part 2 : Memilih Text Editor

Belajar HTML Part 3 : Mengenal Tag, Element, Atribut HTML

Belajar HTML Part 4 : Heading Pada HTML

Belajar HTML Part 5 : Format Text Pada HTML

Belajar HTML Part 6 : Membuat Paragraf Pada HTML

Belajar HTML Part 7 : Membuat Table Pada HTML

Belajar HTML Part 8 : Membuat Hyperlink Pada HTML

Belajar HTML Part 9 : Membuat List Pada HTML

Belajar HTML Part 10 : Membuat Format Code Pada HTML

Belajar HTML Part 11 : Membuat Form Pada HTML

Belajar HTML Part 12 : Atribut Form Pada HTML

Belajar HTML Part 13 : Membuat Symbol Pada HTML

Belajar HTML Part 14 :Menampilkan Gambar Pada HTML

Belajar HTML Part 15 : Tag Iframe Pada HTML

Belajar HTML Part 16 : Menghubungkan HTML dengan CSS

Belajar HTML Part 17 : Mengenal Class dan Id Pada HTML

Incoming search terms:

malas koding
malaskoding
malaskoding com
membuat kode html
malas koding com
membuat tag html
malas ko
Kode koding
format coding
web html malas coding

Bagi orang yang sudah familiar dengan dunia pemrograman, khususnya pemrograman web, sudah pasti tak asing dengan coding HTML.

Dengan coding HTML, kamu yang bahkan seorang pemula bisa membangun sebuah website pribadi atau website untuk dijual.

Tak hanya itu, kamu juga bisa membuat template website yang memiliki harga jual dari murah hingga mahal.

Oleh karena itu, artikel ini akan membuat kamu belajar apa saja contoh HTML yang sering ditemui atau digunakan oleh para web developer.

Eits, supaya proses belajar coding HTML semakin komplit, pastikan kamu sudah download dan instal text editor untuk menulis coding HTML ya.

Kamu bisa gunakan Notepad++ atau Visual Studio Code.

Sumber: Envato

<!DOCTYPE html>

Kamu memerlukan tag ini di awal setiap dokumen HTML yang dibuat.

Coding HTML ini akan memastikan browser tahu bahwa website itu HTML dan bahkan HTML5, versi terbaru.

Meskipun ini sebenarnya bukan tag HTML, tapi tag ini juga penting untuk diketahui.

<html>

Coding HTML yang satu ini adalah tag wajib yang memberi tahu browser bahwa sedang membaca HTML.

Tag <html> berada tepat setelah tag DOCTYPE, dan kamu perlu menutupnya dengan tag </html> tepat di akhir file program.

Segala sesuatu yang lain dalam dokumen Anda berada di antara tag-tag ini.

<head>

Tag <head> memulai bagian header file HTML. Coding HTML yang masuk ke sini tidak muncul di halaman web kamu.

Sebaliknya, tag ini berisi metadata untuk mesin pencari, dan info untuk browser. Untuk halaman dasar, tag <head> nantinya hanya akan berisi judul halaman web.

Tag Judul (<title>)

Tag ini menetapkan judul halaman web kamu dengan memasukkan atau menuliskan judul halaman web ke antara tag <title> dan menutupnya dengan tag </title>.

Itulah nama yang akan ditampilkan sebagai judul tab saat dibuka di browser.

Contoh HTML:

<head>

<title>Hello World</title>

</head>

Seperti tag <title>, metadata diletakkan di area header halaman web.

Metadata digunakan oleh search engine dan merupakan informasi tentang apa yang ada di halaman web.

Ada beberapa contoh coding HTML website untuk metadata yang berbeda, namun berikut ini beberapa value dari tag yang paling umum digunakan.

description: deskripsi dasar halaman web
keywords: pilihan kata kunci yang berlaku untuk halaman web
author: Penulis halaman web
viewport: Tag untuk memastikan halaman web terlihat bagus di semua perangkat.

Contoh HTML:

<meta name="description" content="Contoh Coding HTML Website">

<meta name="keywords" content="HTML,code,tags">

<meta name="author" content="Admin">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tag ‘viewport’ harus selalu memiliki ‘width=device-width, initial-scale=1.0’ untuk memastikan halaman web ditampilkan dengan baik di perangkat seluler dan desktop.

Tag Body (<body>)

Setelah kamu menutup bagian header – dari !DOCTYPE hingga meta – kamu mulai masuk ke badan coding HTML.

Kamu awali dengan tag <body> dan menutupnya dengan tag </body> tepat di akhir file HTML sebelum tag penutup </html>.

Semua konten halaman web kamu akan berada di antara tag-tag ini.

Semua konten halaman web akan berada di antara tag ini.

</body>

Tag body memiliki atribut yang opsional digunakan sesuai kebutuhan website.

Beberapa atribut tag body adalah:

background: menambahkan background dengan gambar tertentu

Contoh HTML:

<html>

<body background="https://assets.digitalocean.com/blog/static/hacktoberfest-is-back/hero.png">

</body>

</html>

bgcolor: memberikan warna background untuk dokumen HTML.

Contoh HTML:

<body bgcolor="#afafaf">

<h2>Website ini memiliki background berwarna.</h2>

</body>

*Catatan:

HTML5 tidak mendukung format atribut <body bgcolor>. Sebaiknya kamu gunakan style CSS untuk memberi warna pada background dengan contoh coding HTML website berikut:

<body style="background-color: rgb(251, 235, 217)">

Tag Heading (<h2> sampai <h6>)

Tag <h2> mendefinisikan header level satu di halaman web.

Coding HTML ini biasanya digunakan untuk membuat judul dan idealnya hanya ada satu di setiap halaman.

Lalu tag <h2> mendefinisikan header level dua untuk header bagian, tag <h3> untuk sub-header level-tiga, dan seterusnya hingga <h6>.

Semakin besar angka heading, semakin kecil ukuran tulisan.

Contoh HTML:

<h2>Heading 1</h2>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

Tag Paragraf (<p>)

Coding HTML paragraf berguna ketika kamu ingin memulai paragraf baru.

Tag ini biasanya menyisipkan dua jeda baris.

Contoh HTML:

<p>Your first paragraph.</p>

<p>Your second paragraph.</p>

Kamu juga bisa menggunakan style CSS di tag paragraf coding HTML, contohnya:

<p style="font-size: 150%;">Tulisan ini berukuran 50% lebih besar.</p>

Sumber: Envato

Tag Break (<br>)

Coding HTML ini berfungsi memberikan jeda baris (break) tunggal antar paragraf atau antar kalimat.

Tag ini bekerja dengan cara yang sama dengan tag <hr>.

Hanya saja tag <hr> memberikan garis horizontal pada halaman web sehingga lebih bagus untuk memisahkan bagian teks.

Contoh HTML:

<p>Baris pertama.<br>Baris kedua.</p>

Tag Image/Gambar (<img>)

Jika kamu ingin menambahkan gambar di halaman web, kamu harus menggunakan tag gambar. Coding HTML tag ini biasanya akan menggunakan atribut ‘src’.

Atribut src akan merujuk ke lokasi file gambar pada dokumen komputer atau web directory.

Tag img juga biasanya disertai atribut ‘alt’.

Fungsi ‘alt’ adalah penjelasan alternatif gambar jika gambar tidak dapat ditampilkan karena masalah teknis pada browser, seperti koneksi lambat atau pengguna masih menggunakan browser versi lama.

Contoh HTML:

<img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="gambar burung">

Tag Divisi (<div>)

Elemen divisi konten HTML (div) adalah wadah tingkat blok umum untuk “konten aliran”.

Konten aliran adalah contoh coding HTML website yang berisi teks atau konten yang melengkapi halaman web.

Elemen anchor, blockquote, dan title dianggap sebagai konten aliran.

Dalam konsep pemrograman backend, elemen div membantu mengatur kode ke dalam bagian yang ditandai dengan jelas.

Di ujung depan, mereka menambahkan jeda baris sebelum dan sesudah konten mereka.

Jika tidak, mereka tidak mempengaruhi konten atau tata letak halaman kecuali ditata dengan CSS.

Contoh HTML:

<div>

<img src="https://assets.codepen.io/6093409/sprocket.svg" alt="the HubSpot sprocket logo"/>

</div>

Tag div juga sering ditemui di versi HTML selain HTML5 dengan atribut align sehingga contoh coding HTML websitenya seperti ini:

<div align="left">

--Isi konten--

</div>

Tag Span (<span>)

Elemen rentang atau span HTML adalah wadah inline umum untuk “frasa konten”.

Frasa konten mengacu pada teks dan markup apa pun yang dikandungnya, seperti tag <abbr> dan <audio>.

Tag span tidak secara inheren mewakili apa pun, tetapi digunakan untuk mengelompokkan frasa konten karena dua alasan.

Yang pertama adalah menerapkan informasi gaya ke bagian teks tertentu.

Misalnya, jika kamu membuat drop caps, maka kamu dapat membungkus huruf pertama dari paragraf pembuka setiap bagian artikel dalam tag span.

Contoh HTML:

<p><span style="font-size:36px;">I</span>ni adalah contoh teks span.</p>

Tag Anchor (<a>)

Elemen anchor HTML berfungsi untuk membuat hyperlink. Coding HTML ini memerlukan atribut href, yang menentukan tujuan link.

Link tujuan dapat berupa bagian lain di halaman web yang sama atau halaman web lain di website yang sama, atau website eksternal, file, dan alamat email.

Biasanya tampilan kata yang diberi tag anchor akan memiliki garis bawah dan berwarna biru.

Contoh HTML:

<p><a href="https://www.domainesia.com/panduan"> Panduan Belajar HTML Dasar</a> terbaik hanya di DomaiNesia.</p>

Atribut berguna lainnya pada tag ini adalah ‘target’ dan ‘title.’ Atribut target digunakan untuk membuka tautan di tab yang sama atau jendela baru, contohnya:

<a href="https://www.domainesia.com/panduan"/" target="_blank"> Panduan Belajar HTML Dasar</a> terbaik hanya di DomaiNesia.

Tag Unordered List (<ul>)

Coding HTML elemen unordered list digunakan untuk mengelompokkan item ketika urutannya tidak penting.

Item daftar menggunakan tag ini harus didefinisikan oleh tag <li> diantara elemen <ul>.

Tag ‘ul’ memiliki atribut ‘type’ yang bisa kamu atur ke bentuk ‘disc,’ ‘circle,’ atau ‘square’ dengan menambahkan property list-style-type.

Contoh HTML:

<h2>Daftar Tag dan Atribut Belajar HTML Dasar</h2>

<ul style="list-style-type:circle;">

<li>Tag Paragraf (<p></p>)</li>

<li>Tag Gambar (<img>)</li>

<li>Tag Heading (<h2><h2> sampai <h6></h6>)</li>

<li>Tag Divisi (<div>)</li>

<li>Tag Span (<span>)</li>

<li>Tag Anchor (<a>)</li>

<li>Tag Unordered List (<ul>)</li>

</ul>

Sintaks di atas akan membuat list dengan bentuk icon bulat hitam.

Tag Ordered List (<ol>)

Coding HTML elemen ordered list digunakan untuk mengelompokkan item ketika urutannya penting. Misalnya resep yang harus mengikuti urutan tertentu.

Langkah-langkahnya harus didefinisikan oleh tag <li> diantara elemen <ul>. Secara default, daftar yang diurutkan akan dimulai dari nomor 1.

Jika kamu ingin memulai dari nomor lain, cukup tambahkan atribut awal dan atur nilainya ke nomor yang diinginkan.

Contoh atribut type yang umum dijumpai adalah 1, A, a, I (romawi besar), dan i (romawi kecil),

Contoh HTML:

<h2>Resep Nasi Goreng Kecap</h2>

<ol type="1">

<li>Panaskan minyak dan tumis bumbu hingga harum.</li>

<li>Masukkan telur dan wortel, lalu orak-arik hingga matang.</li>

<li>Masukkan nasi putih, bumbui dengan garam, merica bubuk, dan sedikit kecap. Masak hingga matang dan sajikan</li>

</ol>

Sumber: Envato

Tag Emphasis (<em>)

Coding HTML elemen emphasis berguna untuk menekankan teks yang dikandungnya.

Browser biasanya membuat teks dalam huruf miring.

Cara kerja tag ini sama dengan tag <i> yang sama-sama membuat kata atau kalimat dicetak miring.

Contoh HTML:

<p>Ini adalah paragraf normal.</p>

<p><em>Paragraf ini penting!</em></p>

<p>Kata <em>ini</em> sangat penting!</p>

Tag Strong (<strong>)

Coding HTML elemen strong berguna untuk menunjukkan suatu teks bersifat sangat penting atau mendesak.

Browser biasanya membuat teks lebih tebal. Cara kerja tag ini sama dengan tag <b> yang sama-sama membuat kata atau kalimat dicetak tebal.

Contoh HTML:

<p>Ini adalah paragraf normal.</p>

<p><strong>Paragraf ini penting!</strong></p>

<p>Kata <strong>ini</strong> sangat penting!</p>

Tag Tabel (<table>)

Meskipun penggunaan tabel untuk pemformatan website tidak disukai, tetapi kamu bisa menggunakan baris dan kolom dengan coding HTML <table> untuk mengelompokkan informasi di halaman web.

Contoh HTML:

<table>

<tbody>

<tr>

<th>Kolom Pertama</th>

<th>Kolom Kedua</th>

</tr>

<tr>

<td>Baris 1, Kolom 1</td>

<td>Baris 1, Kolom 2</td>

</tr>

<td>Baris 2, Kolom 1</td>

<td>Baris 2, Kolom 2</td>

</tbody>

</table>

Tag <table> dan </table> menentukan awal dan akhir tabel. Sedangkan tag <tbody> berisi semua konten tabel.

Setiap baris tabel diapit oleh tag <tr>. Setiap sel dalam setiap baris dibungkus dengan tag <th> dan tag <td> untuk data kolom.

Tag Quote (<blockquote>)

Ketika kamu mengutip suatu website atau orang lain dan kamu ingin membedakan kutipan dari dokumen yang lain, gunakan tag blockquote.

Kamu hanya perlu melampirkan kutipan di antara tag pembuka <blockquote> dan tag penutup </blockquote>.

Contoh HTML:

<blockquote>Dengan DomaiNesia, kamu bisa [beli domain dengan harga murah](https://www.domainesia.com/domain/), lho!</blockquote>

Tag Form (<form>)

Formulir HTML membantu kamu bisa berinteraksi dengan pengguna dengan mengizinkan pengguna mengirim data ke website kamu.

Untuk menginisialisasi formulir HTML, kamu harus menggunakan sepasang tag coding HTML <form> dan </form> untuk membuat elemen formulir.

Elemen tag form memungkinkan kamu membuat formulir text input area dan button.

Jika ingin membuat text input, maka kamu perlu menulis atribut ‘text’ di tag <input type = 'jenis_atribut_form'>.

Contoh coding HTML website text input:

<form>

<br>Nama depan:<br>

<input type="text" name="nama depan">

<br>Nama belakang:<br>

<input type="text" name="nama belakang">

</form>

Sumber: Envato

Sedangkan jika kamu ingin membuat form multiple choice, kamu perlu menulis atribut radio, checkboxes, atau dropdown sesuai kebutuhan kamu.

Contoh coding HTML website multiple choice:

<form>

<input type="radio" name="day" value="monday" checked>Senin<br>

<input type="checkboxes" name="day" value="tuesday">Selasa<br>

<input type="dropdown" name="day" value="wednesday">Rabu

</form>

Penutup

Nah, dari sekian contoh coding HTML website yang sudah dijelaskan di atas, HTML tidak sesulit itu untuk dipelajari bukan?

Tak ada salahnya kamu juga belajar coding HTML dari dasar secara mandiri.

Semoga melalui artikel ini, kamu semakin tahu bahwa ada banyak contoh coding HTML website yang berguna dalam pengembangan web.

Software apa yang digunakan untuk membuat HTML?

Berikut ini beberapa aplikasi text editor lainnya yang bisa digunakan untuk belajar penulisan kode HTML..

Notepad++.

BracketsText..

Sublime Text Editor..

Visual Studio Editor..

Emacs..

Netbeans..

Aptana Studio..

HTML pakai bahasa apa?

HTML adalah bahasa standar pemrogaman yang digunakan untuk membuat halaman website, yang diakses melalui internet. Singkatan dari "Hypertext Markup Language" atau "bahasa markup".

Apa saja yang dibutuhkan untuk belajar HTML?

Apa Saja Yang Dibutuhkan Untuk Belajar HTML.

Text Editor. Text Editor. Text Editor adalah alat bantu untuk menuliskan script atau formula pada saat proses pemrograman. ... .

Browser. Web Browser. ... .

3. Web Server. Web Server..

Langkah langkah membuat coding HTML?

Cara Membuat Halaman Web Sederhana dengan HTML.

Buka editor teks. ... .

Atur jenis dokumen untuk HTML. ... .

Tambahkan tab judul untuk halaman web kamu. ... .

Ketik di bawah tag "Head" yang tertutup. ... .

Selanjutnya membuat judul halaman. ... .

Tambahkan judul tambahan jika kamu mau. ... .

Membuat paragraf. ... .

Mengubah warna teks..

Coding html menggunakan apa?

Membuat Format code pada HTML

Tutorial HTML Dasar Lainnya

Incoming search terms:

<!DOCTYPE html>

<html>

<head>

Tag Judul (<title>)

Tag Body (<body>)

Tag Heading (<h2> sampai <h6>)

Tag Paragraf (<p>)

Tag Break (<br>)

Tag Image/Gambar (<img>)

Tag Divisi (<div>)

Tag Span (<span>)

Tag Anchor (<a>)

Tag Unordered List (<ul>)

Tag Ordered List (<ol>)

Tag Emphasis (<em>)

Tag Strong (<strong>)

Tag Tabel (<table>)

Tag Quote (<blockquote>)

Tag Form (<form>)

Penutup

Software apa yang digunakan untuk membuat HTML?

HTML pakai bahasa apa?

Apa saja yang dibutuhkan untuk belajar HTML?

Langkah langkah membuat coding HTML?

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social