Belajar HTML 5 Lengkap

Halo Teman Teman Semua, Selamat Datang kembali di Halaman ini, Yaitu pada Blog Awonapa JR. Nah pada kesempatan kali ini, kita akan membahas secara menyeluruh tentang apa yang sudah kita pelajari. Dimulai dari Materi Tentang HTML 5 Terlengkap, HTML dasar, Tag, Attribute, Coment, Metadata, Header, Footer, Paragraf, Styling, Block Quote, Anchor, Button, Daftar(list), image, video, audio, Iframe, Tabel, Elemen,


Materi HTML 5 Lengkap
Materi HTML 5 Lengkap
Untuk Teman teman yang belum terlalu memahami Materi HTML sejak awal ini, maka teman teman bisa melihat postingan sebelum sebelumnya pada Materi HTML ini yah.

  1. BELAJAR HTML | MEMPELAJARI DASAR KERANGKA HTML
  2. BELAJAR HTML | HEADING DAN PARAGRAPH PADA HTML
  3. BELAJAR HTML | CARA MEMBUAT HYPERLINK PADA HTML
  4. 6 CARA TERMUDAH BELAJAR HTML
  5. BELAJAR HTML | MENAMPILKAN GAMBAR DAN MENGENAL IFRAME
  6. BELAJAR HTML | MENGENAL FORMAT TEXT PADA HTML
  7. BELAJAR HTML | MENGENAL BLOCK DAN INLINE SERTA MENAMBAH KOMENTAR PADA HTML
  8. FAKTA TENTANG HTML 5 YANG TIDAK ANDA KETAHUI
  9. BELAJAR HTML | CARA MEMBUAT HALAMAN LEBIH DARI SATU PADA HTML
  10. BELAJAR HTML | CARA MUDAH MEMBUAT TABLE & LIST DI HTML
  11. BELAJAR HTML | APA ITU META TAG CHARSET UTF-8 PADA HTML 5
  12. BELAJAR HTML | CARA MEMBUAT SYMBOL ATAU KARAKTER KHUSUS DI HTML
  13. BELAJAR HTML | CARA MEMBUAT FORM PALING MUDAH PADA HTML
  14. BELAJAR HTML | MENAMBAH ATTRIBUTE LABEL, ID, CHECKBOX DAN RADIO PADA HTML
Oke Teman Teman yang akan kita bahas pada Halaman ini adalah
  • Sekilas Tentang HTML 5
  • Mengenal Meta tag Charset UTF-8
  • Elemen Dasar dengan Tag dan Atribut
  • Paragraf Pada HTML  
  • Hyperlink Ke Halaman Lain
  • Menampilkan Gambar dan Iframe
  • Membuat Tabel dan List
  • Symbol
  • Form dengan Legend, Fieldset, Label, Id, Checkbox, Radio di HTML

Sekilas Tentang HTML 5

HTML adalah satu dari banyak bahasa markup yang menjadi bagian pembangun dasar sebuah halaman web (webpage). Saat ini versi terbarunya adalah versi 5.1, secara resmi disebut HTML5.
HTML menentukan konten dari sebuah webpage, namun bukan fungsionalitasnya. Untuk mengetahui hubungan antara HTML, CSS, dan JavaScript dalam pembuatan website.
Perlu di ingat bahwa HTML dan CSS bukan bahasa pemrograman melainkan hanya seorang coder atau developer yang dapat membuat dan mendesain website.
Dan ketika kita sudah selesai dengan Materi HTML ini, kita akan melanjutkan ke CSS dan Javascript.
Tutorial Belajar CSS Dasar

Mengenal Meta tag Charset UTF-8

Meta-tag Charset UTF-8 , adalah meta tag yang paling sering digunakan di dalam HTML, dan penulisan nya seperti ini.
Meta-tag tersebut digunakan untuk memberi instruksi kepada web browser , untuk menerjemahkan karakter di dalam HTML sebagai UTF-8. Dan apakah penting untuk menggunakan Meta-tag Charset UTF-8 ini?
Simak Selanjutnya. BELAJAR HTML | APA ITU META TAG CHARSET UTF-8 PADA HTML 5

Elemen Dasar dengan Tag dan Atribut

Dokumen atau konten HTML dalam sebuah halaman web dideskripsikan dengan elemen HTML atau tag seperti head, title, body, article, section, p, div, span, img, picture, dan banyak lainnya.
Dari contoh sebelumnya, beberapa teks terdapat di antara tag pembuka dan penutup:
  • <!doctype html> menentukan tipe file/dokumen menjadi HTML
  • <html> dan </html> menyatakan dokumen HTML, yang berisi:
  • <head> dan </head> memuat meta data/information, yang berisi:
  • <title> dan </title>, judul dokumen
  • <meta/>, data dan informasi tentang halaman ini
  • <body> dan </body> akan menunjukkan konten halaman, yang berisi:
  • <div> dan </div> adalah pembagi (divider) atau wadah (container), yang berisi:
  • <h1> dan </h1>, heading atau judul artikel misalnya
  • <p> dan </p>, paragraf teks

Kita bisa menggabungkan atau mengumpulkan berbagai tag HTML yang berbeda di dalam satu sama lain. Dalam HTML, penyusunan tag sangat fleksibel.
Contoh nya seperti ini

Nah Untuk temen temen yang mau mencoba nya bisa menggunakan Codepen atau pun Repl.it
Pada hasil diatas, kita menggunakan tag href, <p> , <div> dan seperti pada diatas.

Paragraf Pada HTML

Di dalam Postingan blog ini, sudah sekilas materi tentang Paragraf.
Kamu sudah melihat paragraf, teks panjang yang berisi sebuah penjelasan atau cerita (apapun!), yang juga dapat terbagi ke beberapa bagian (section).

Dan teman teman juga bisa menggunakan <em> <b> ataupun blog inline lainya
Kita bisa gunakan paragraf untuk menyajikan teks polos apapun. nah untuk lengkap nya di halaman pada blog ini,
BELAJAR HTML | HEADING DAN PARAGRAPH PADA HTML


Hyperlink ke Halaman Lain

Jika kita butuh menautkan halaman ke halaman lain, gunakan anchor dengan URL. Anchor ini juga disebut hyperlink (hypertext anchor).
<a>Clickable but unknown link</a>
<a href="https://google.com">Go to Google</a>  <!-- kamu akan sering membutuhkan anchor -->
Beberapa atributnya yang bisa digunakan antara lain adalah target, rel, media, hreflang, dan type; juga mereka memerlukan atribut href agar bisa bekerja.

Menampilkan Gambar dan Iframe

Dengan HTML, kita dapat menyertakan HTML di dalam HTML! Sering kali disebut framing, seperti embedding juga, kita dapat gunakan iframe. bisa dibilang website dalam website. 
<iframe src="https://google.com" height="300" width="800"></iframe>
dan juga yang pasti sering adalah kita akan menampilkan gambar di HTML.
<img src="folder/namagambar.jpg" height="200" width="400" >
pada bagian src, itu adalah sumber atau lokasi dimana gambar berada, terkadang kita akan menggunakan sebuah link untuk mengambil lokasi gambar.

Membuat Table dan List

Mari kita menyajikan atau menunjukkan data dan informasi dalam dua dimensi! Gunakan table untuk melakukannya. Berhati-hatilah bahwa table bukan untuk digunakan sebagai layout atau memposisikan sebuah halaman, namun sebaiknya hanya untuk menyajikan data saja. Gunakan kombinasi table dengan caption, thead, tbody, tfoot, tr, th, td, col, colgroup.
<table border="1">
        <caption>DAFTAR SISWA</caption>
        <tr>
            <th>Nama</th>
            <th>Kelas</th>
        </tr>
        <tr>
            <td>Anita</td>
            <td>Bagus</td>
        </tr>
        <tr>
            <td>XII AP 1</td>
            <td>XII TKJ 1</td>
        </tr>
</table>
Jika teman teman mau mencoba nya disini.

Oiya jika kurang lengkap teman teman bisa Mengunjungi Link Ini.

Mengenal Symbol khusus pada HTML

Nah beberapa waktu lalu, kita sudah mencoba untuk membahas symbol, dan ini adalah hasil dari sekilas symbol yang kita coba.
See the Pen
symbol entities
by Wahyu Pambudi (@wahyup)
on CodePen.
Untuk Lebih Lengkap, maka di blog ini sudah tersedia. disini yah!
BELAJAR HTML | CARA MEMBUAT SYMBOL ATAU KARAKTER KHUSUS DI HTML

Form dengan Legend, Fieldset, Label, Id, Checkbox, Radio

Form pada HTML adalah satu dari banyak cara untuk berinteraksi di sebuah website atau web app dengan pengguna (users). Dengan cara ini, pengguna dapat memasukkan (input) beberapa teks atau data/informasi yang dibutuhkan oleh pemilik website, kemudian diproses atau diterima oleh form tersebut, yang pada akhirnya dikirim ke server.
<form>
 <fieldset>
  <legend> Personal Information</legend>
     <p>
   <label for = "full-name"> Full Name </label>
   <input placeholder="Input Name" id="full-name" name="fullName" type="text">
  </p>
  <p>
   <label for="email"> Email </label>
   <input placeholder="Email" id="email" name="email" type="email">
  </p>
  <p>
        <label for="telpon"> No Telp </label>
        <input placeholder="Telp" id="telpon" name="telpon" type="tel" >
       </p>
       <p>
       <label for= "berkas"> Input Berkas </label>
      <input id="berkas" name="berkas" type="file">
     </p>
   </fieldset>
</form>

Jika teman teman ingin melihat hasil dari Sourcode Di atas, maka silahkan kunjungi ini
https://codepen.io/wahyup/pen/drRYqL
Dan untuk melihat Artikel lebih lengkap nya silahkan kunjungi halaman lain dari Blog ini yah teman teman.

Okelah kita sudah di berada di penghujung materi HTML, dan seperti nya nanti akan ada Soal Latihan dari Awonapa JR ni hehe.
Silahkan di tunggu yah, Terimakasih!

Salam Semangat!!

Tambah Skill Kamu, dengan Mengisi Email untuk Update!!

Belum ada Komentar untuk "Belajar HTML 5 Lengkap"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel