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

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.

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.

https://codepen.io/wahyup/pen/XGgyWp

Oiya jika kurang lengkap teman teman bisa Mengunjungi Link Ini.

BELAJAR HTML | CARA MUDAH MEMBUAT TABLE & LIST DI HTML

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.

BELAJAR HTML | CARA MEMBUAT FORM PALING MUDAH PADA HTML

BELAJAR HTML | MENAMBAH ATTRIBUTE LABEL, ID, CHECKBOX DAN RADIO PADA HTML

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!!

Awonapa - Website dan Blogging