HTML singkatan dari Hypertext Markup Language adalah bahasa berkembang. HTML berkembang dari waktu ke waktu dengan versi terbarunya yang selalu terupdate. Hal tersebut ditujukan untuk memudahkan kegiatan sebagai contoh membangun web atau blog dan penataan konten yang lebih cantik, efektif dan efisien.
Belajar HTML Teknik Komputer
Kali ini akan dibahas mengenai Dasar kode HTML serta kode lainnya untuk digunakan sebagai sarana praktek sederhana membangun konten menggunakan HTML. Langsung saja ke pembahasanya mulai dari struktur membangun HTML pertama kali.
<!DOCTYPE html>
<html>
<head>
<title>Judul Konten</title>
</head>
<body>
di isi dengan konten
</body>
</html>
Pastikan dalam pembuatan konten yang paling utama yaitu dengan memberikan kode <html>...isi konten...</html>. Pada dasarnya tanpa kode itu konten masih tetap bisa diakses.
KODE HTML
Berikut ini adalah kode dasar HTML yang wajib diketahui :
a. Head
Head digunakan untuk judul konten HTML dalam format <head><title>...</title></head> . Selain itu pada head juga digunakan untuk menambahkan meta yang digunakan dalam pengelolaan blog serta biasanya terdapat javascript yang dibutuhkan pada suatu website, pembahasan lebih lanjut akan dituliskan pada artikel berikutnya.
b. Body
Di sini merupakan letak isi konten pada HTML yang mana bisa di isi dengan tulisan teks, gambar, video dan berbagai konten lainya yang diperlukan. Untuk dasar pembelajara HTML ini yang akan dibahas sebagai praktik pada atribut body hanya pengeditan backgroundnya saja yang mana dapat menggunakan Warna ataupun gambar sebagai background. Untuk warna menggunakan bahasa inggris seperti contoh red untuk merah, yellow untuk kuning, tetapi jika anda paham kode warna HTML bisa menggunakanya juga seperti contoh #000000 untuk hitam dan #ffffff untuk kode warna HTML putih.
Contoh Kode HTML Body :
<head>
<title>Back Ground Body</title>
</head>
<body bgcolor="Black" text="ffffff">
Isi konten body dengan bgcolor black atau juga bisa diganti dengan kode warna HTML #000000 membuat backgroundnya menjadi hitam
<center><br>Paragraf 1 menggunakan kode center yang mana membuat paragraf ini menjadi rata tengah</center>
<p align="right">Paragraf 2 menggunakan align paragraf right yang mana membuatnya menjadi rata kanan dan tidak menggunakan kode br karena menggunakan format html P</p>
</body>
1. Format Teks
<br> untuk Enter<b></b> atau <strong></strong> untuk Bold (tulisan tebal)<i></i> atau <em></em> untuk Italic (tulisan miring)<u></u> untuk Underline (garis bawah)
Contoh pengeditan format Teks menggunakan kode HTML :
Cara membuat <b>Tebal</b> Tulisan
<br>Cara membuat <i>Miring</i> tulisan
<br>Cara membuat <u>Garis Bawah</u> tulisan
<br>Cara Membuat <b><i>Tebal dan Miring</i></b> tulisan
<br>Cara membuat <b><u><i>Garis Bawah, Miring dan Tebal</i></u></b> tulisan
Setelah mengetahui kode HTML untuk menambah format text seperti Bold, Italic dan Underline yang sangat umum dan sering digunakan dalam pembuatan konten artikel. Selanjutnya memahami cara melakukan pengeditan format Paragraf dengan kode HTML.
2. Format Paragraf
<p></p> yang bisanya ditambah dengan pengaturan format paragraf yaitu align=”left|center|right|justify“ . Left untuk format paragraf rata kiri, center untuk rata tengah yang sebenarnya bisa kode <p align="center"></p> digantikan dengan kode <center></center>, right untuk rata kanan dan Justify rata kanan dan kiri untuk merapikan tulisan agar lebih tertata.
Contoh format paragraf rata Kanan <p align="right">...</p>
<p align="right">
Paragraf ini adalah hanya sebagai contoh untuk memperlihatkan
seperti apakah itu rata kiri, rata tengah, rata kanan
dan rata kiri kanan atau justify. Biasanya pada MS Word
atau Doc Editor lainya tentu sudah disediakan tombol untuk
secara langsung menggunakan format tersebut tetapi bagaimana
jika dilakukan secara manual dengan menggunakan kode html
left untuk kiri, center untuk tengah dan right untuk
rata kanan. Dengan belajar dan praktik langsung maka
akan lebih mudah mengetahuinya.
</p>
Contoh format paragraf Justify <p align="justify">...</p>
<p align="justify">
Paragraf ini adalah hanya sebagai contoh untuk memperlihatkan
seperti apakah itu rata kiri, rata tengah, rata kanan
dan rata kiri kanan atau justify. Biasanya pada MS Word
atau Doc Editor lainya tentu sudah disediakan tombol untuk
secara langsung menggunakan format tersebut tetapi bagaimana
jika dilakukan secara manual dengan menggunakan kode html
left untuk kiri, center untuk tengah dan right untuk
rata kanan. Dengan belajar dan praktik langsung maka
akan lebih mudah mengetahuinya.
</p>
Anda bisa mengubah format “justify” dengan Left, Center atau Right sesuai kebutuhan format paragraf.
3. Font (Format Huruf/Tulisan)
Font menjadi format yang cukup penting dalam kode HTML, karena sering digunakan sehingga kode ini harus dipahami dan dihafal untuk bisa lancar membuat konten menggunakan HTML. Kode utamanya yaitu <font></font>, dengan nama atribusi berupa :
- face = jenis huruf A
- color = warna huruf A
- size = ukuran huruf A
Sebagai contoh kode font bisa dituliskan sebagai berikut ini.
<font face="arial" color="red" size="6">Jenis huruf Arial, warna Merah, Ukuran 6</font>
4. Gambar
Untuk memasukan gambar dalam format HTML yaitu dengan menggunakan kode <img src="Lokasi Gambar/Nama File">. Sebagai contoh jika ingin memasukan gambar (Offline) dari file yang berada di komputer maka menggunakan alamat direktori file gambar tersebut, tentunya jika file HTML dipindah ke komputer lain yang tidak ada file gambar tersebut maka tidak akan muncul di komputer lain. Memasukan gambar secara online yaitu gambar yang berada di Internet maka harus memiliki koneksi Internet agar gambar bisa munul yaitu dengan menggunakan url gambarnya.
<img src="https://jagad.id/wp-content/uploads/2018/06/Logo-Jagad.id_.png" border="6" alt="situs jagad" title="Website Jagad.id">
5. List
a. Bulleted
Bulleted yaitu list yang tidak menggunakan urutan Nomor dan Abjad. Pada list ini menggunakan kode HTML <ul type="Disc|Circle|Square"></ul> yang mana Disc untuk lingkaran penuh hitam, Circle lingkaran putih dengan garis luar Hitam dan Square yaitu list menggunakan simbol kotak.
Persiapan untuk membuat blog :
<ul type="circle">
<li>Manusia</li>
<li>Komputer</li>
<li>Internet</li>
<li>Daya Listrik</li>
<li>dll</li>
</ul>
b. Number
Dituliskan pada Dokumen editor Number list tetapi tidak hanya mengacu pada penggunaan list nomor saja, tetapi juga bisa menggunakan abjad urutan huruf Alfabet dan juga angka Romawi. Kode HTML list yaitu <ol type="1|a|A|i|I"></ol> yang mana 1 berarti urut sesuai penomoran, a untuk urutan alfabet huruf kecil, A huruf besar, i untuk angka Romawi kecil dan I untuk angka romawi besar.
Persiapan untuk membuat blog :
<ol type="1">
<li>Manusia</li>
<li>Komputer</li>
<li>Internet</li>
<li>Daya Listrik</li>
<li>dll</li>
</ol>
6. Haris Horisontal
Walaupun tidak sering digunakan dalam membuat artikel, tetapi beberapa blogger sering juga menggunakan kode ini untuk membuat konten yang dibuat lebih terlihat rapi. <hr size="6" color="yellow" width="60%" align="right" noshade> Penggunaanya cukup mudah, biasanya digunakan untuk membatasi antara konten satu dengan yang lainnya pada satu halaman yang sama.
<hr size="6" color="green" width="60%" align="right" noshade>
Nah itulah beberapa kode dasar HTML yang wajib diketahui untuk bisa membuat konten sederhana. Kode kode tersebut sangat sering digunakan dalam membuat artikel pada blog atau Website.
Rekomendasi:
- Pengertian Telekomunikasi Adalah : Macam Jenis dan Contoh Jagad.id - Pengertian Telekomunikasi - Manusia adalah makhluk sosial yang sering sekali melakukan komunikasi, dimana komunikasi ini berguna untuk menjalin hubungan antara sesamanya. Seiring berkembangnya zaman komunikasi tidak hanya dilakukan…
- Situs Web dan Aplikasi Terbaik Untuk Belajar HTML 2023 Jagad.id - Situs web dan Aplikasi Terbaik Untuk Belajar HTML: Siapa pun yang memulai pemrograman web harus mempelajari HTML. Bahasa pengkodean dasar untuk desain dan pengembangan web adalah HTML dan…
- Penyebab Kasus Pelanggaran Hak Cipta di Internet - Peraturan… Jagad.id - Internet saat ini sudah menjadi kebutuhan yang bisa dikategorikan pokok karena internet memudahkan seseorang untuk berkomunikasi serta mencari informasi dengan sangat mudah dan praktis. Di Internet anda dapat menemukan Tulisan…
- Diterima Adsense Setelah Blog di Tolak Adsnese dan Masuk Ke… Jagad.id - Pertama kali saya mengenal blog ketika saya menduduki bangku SMK yang memiliki hobi bermain game android. Saya mengunjungi banyak website lokal game android, website atau blog yang selalu menampilkan…
- Pengertian Bahasa Pemrograman : Jenis, Fungsi Dan Contoh Jagad.id - Pengertian Bahasa pemograman merupakan sebuah instruksi standar yang bertugas untuk memerintah komputer. Sering disebut juga dengan bahasa komputer atau bahasa pemograman komputer. Bahasa pemrograman juga bisa di katakan…
- 10 Ide Konten Marketing Terbaik, Belum Banyak Orang Pakai! Jagad.id - Kita semua tahu bahwa mantra digital marketing: "konten adalah raja". Membuat konten berkualitas sangat penting untuk memiliki kehadiran digital yang kuat, tetapi terkadang inspirasi gagal dan sulit bagi…
- Google Search Console : Ada 5 Fitur Utamanya lho! Jagad.id - Google Search Console dapat menawarkan wawasan dan memfasilitasi tindakan yang akan membantu menghasilkan lebih banyak traffic organik dari penelusuran web. Apakah Anda seorang pakar SEO yang berpengalaman atau…
- 5 Alasan Penting Memilih E-Money Dalam Bertransaksi Dengan adanya kemajuan di bidang teknologi membuat semua hal menjadi tepat dan cepat di setiap detiknya. Selain itu, sudah menjadi hal yang mudah bagi kita untuk mendapatkan informasi dan kemudahan…
- Daftar Hosting Gratis Selamanya Terbaik Unlimited Jagad.id - Hosting merupakan kebutuhan yang sangat diperlukan untuk server website yang dimiliki oleh para Webmaster. Dengan menggunakan Self Hosting pengguna akan leluasa dalam mealakukan pengolahan dan modifikasi Website sesuai…
- Template Reel Instagram: Apa Itu Dan Cara Menggunakannya Jagad.id - Reel Instagram memungkinkan Anda berbagi video hingga 60 detik dengan filter, efek, musik, dan lainnya. Popularitas Reel telah membuatnya dimasukkan dalam banyak strategi pemasaran video yang menggunakan template…
- Peta Medan : Sejarah dan Letak Lokasi Geografis Pada topik kali ini, kita akan membagi pembahasan utama kedalam 2 bagian. Seperti judul yang sudah kita lihat bersama, kita akan membahas mengenai Peta Kota Medan yang juga berisi mengenai…
- Peta Kota Palu : Sejarah dan Letak Lokasi Geografis Sejarah Singkat Palu Sedikit mengulas sejarah mengenai kota palu. Asal mula dari terbentuknya kota Palu ternyata berawal dari sebuah kerajaan. Saat itu kerajaan tersebut merupakan gabungan dari 4 buah desa…
- Menentukan Layanan Blogger : Blogspot atau Wordpress Bagi anda yang sudah siap terjun di dunai blogger pasti anda bingung untuk memilih layanan penyedia pembuatan Blog Gratis yang paling terpopuler antara Blogspot dan Wordpress. Sebenarnya masih ada banyak…
- Cara Membuat Search Box di BlogSpot - Menambah Kotak… Jagad.id - Cara Membuat Search Box di BlogSpot - Search Box atau yang dikenal Kotak Pencarian merupakan Widget yang sangat penting untuk Navigasi dalam suatu Website. Website bisa dikatakan kurang…
- Cara Membuat Video Tiktok Terbaru, Auto FYP! Jagad.id - Cara Membuat Video Tiktok - Kebangkitan TikTok sangat eksponensial, dengan basis pengguna platform tersebut dengan cepat melampaui banyak platform media sosial lainnya. Peluangnya tidak terbatas! Di TikTok, membuat…
- Pekerjaan Pemrograman Dengan Bayaran Tertinggi 2023 Jagad.id - Pekerjaan Pemrograman Dengan Bayaran Tertinggi: Bagi pendatang baru, tempat kerja mungkin merupakan tempat yang membuat stres. Menemukan peluang karir yang tepat dan kemudian memasukinya membutuhkan banyak waktu dan…
- Membuat Posting di Blog Agar Cepat Terindex Google Terbaru Jagad.id - Membuat Posting di Blog Agar Cepat Terindex Google - Jika anda heran mengapa posting tidak muncul di Google anda dapat membaca artikel ini agar mengetahui cara membuat Posting…
- Peta Magelang : Sejarah dan Letak Lokasi Geografis Sejarah Kota yang dijuluki sebagai “Kota Getuk” Ini tidak ubahnya seperti kota kota di Indonesia lainnya. Selalu memiliki cerita yang menarik dan tentunya sejarah yang sarat akan hikmah. Konon, nama…
- Cara Submit Url dan Sitemap ke Google WebMaster Tool -… Jagad.id - Cara Submit Url dan Sitemap ke Google WebMaster Tool - Cara menampilkan blog di google halaman pertama, cara agar blog muncul di google paling atas, postingan blog terbaik,…
- Cara Redirect Blogspot ke Website Lain atau Domain Berbeda Jagad.id - Cara Redirect Blogspot ke Website Lain - Blogspot merupakan layanan untuk membuat blog gratis yang dapat digunakan oleh siapapun. Blogspot berada dibawah naungang google yang tentunya dalam menggunakan…
- Cara Transfer Domain Ke Hosting Lain Domain TLD sangatlah penting sebagai branding konten kita di Internet. Sekalipun membuat blog bisa menggunakan sub domain baik blogspot, wordpress, wix ataupun weebly namun tentunya akan lebih baik jika menggunakan…
- Cara Membuat Halaman di Weebly - Tutorial Master Weebly Salah satu penyedia layanan Hosting blog gratis yang cukup diminati oleh blogger Dunia yang terbaik adalah Weebly . Weebly berada di urutan ketiga dari penyedia hosting blog gratis yang banyak…
- Cara Menjadi Menjadi Bounty Hunter yang Benar Jagad.id - Menjadi seorang Hacker merupakan sebuah kebanggaan tersendiri bagi sebagian orang. Karena, mereka bisa masuk ke dalam sistem komputer dengan cara menggunakan bahasa pemrograman yang menurut kebanyakan orang susah…
- Cara Belajar yang Tepat Agar Lulus SBMPTN Jagad.id - Cara Belajar yang Tepat Agar Lulus SBMPTN - Setelah lulus dari jenjang pendidikan SLTA sederajat ada pilihan untuk bekerja, melanjutkan kuliah atau GAP year. Ketika kelas 12 kamu…
- 8 Aplikasi Belajar Pemrograman Terbaik 2023 Jagad.id - Aplikasi Belajar Pemrograman Terbaik - Bisakah Saya Belajar Pemrograman Dengan Telepon?: Pemrograman (atau pengkodean) adalah salah satu keterampilan yang semakin populer. Saking populernya, sekolah menengah atas pun mulai…
- Cara Memonetisasi Video YouTube Di Tahun 2023 Jagad.id - Cara Memonetisasi Video YouTube - Video marketing telah menjadi bentuk ekspresi favorit bagi jutaan pembuat konten dan sumber pendapatan penting bagi mereka. Selama tiga tahun terakhir (2019 hingga…
- Apa Itu SEO Google - Mengenal Istilah Dalam Arti SEO SEO adalah singkatan dari Search Engine Optimization dalam bahasa Indonesia diartikan Optimasi Mesin Pencarian yaitu ilmu yang mempelajari pengoptimalan agar suatu konten yang diPublikasi (Website atau Artikel atau Laman atau…
- Cara Mendapatkan Hosting Murah untuk Website Cara Mendapatkan Hosting Murah untuk Pemula - Ada hal mendasar yang harus Anda ketahui, yaitu mengetahui terlebih dahulu apa tujuan dari website tersebut. Anda harus mengetahui tujuan memiliki website karena…
- Cara Submit Sitemap Bing - Bing Webmaster Tool Jagad.id - Cara Submit Sitemap Bing - Search Engine yang berada di Internet memang sangat banyak, dan masing-masing orang memiliki alasan tersendiri untuk menggunakan Mesin Pencari yang mereka suka .…
- Sejarah Internet di Dunia Lengkap Sejarah Internet - Internet merupakan salah satu aspek penting yang mana dalam beberapa tahun terakhir ini sudah banyak dijadikan sebagai salah satu kebutuhan atau konsumsi oleh sebagian besar masyarakat diseluruh…
