Kali ini saya akan menjelaskan tentang HTML 5
Berikut adalah tentang HTML 5:
- Struktur HTML
Markup / Struktur Penulisan
Bagaimana memulai HTML? Cukup menuliskan tag berikut
Lengkap nya sebagai berikut:
Ada beberapa Tag HTML baru yang bisa dipakai seiring munculnya HTML5
<header>
Header dari sebuah section, mungkin lebih enak menyebutnya seperti itu
Biasanya Header berfungsi untuk menentukan header dari website yang berisi Logo/Nama Website atau deskripsi website
header juga bisa diletakkan diantara <section>, untuk menandakan judul dari sebuah section
<section>
Section biasanya digunakan untuk meletakkan konten, sebuah section biasanya diletakkan setelah Header, dan sebelum Footer
<nav>
Untuk mendefinisikan area navigasi, biasanya berisi daftar link.
<article>
Article biasanya untuk menempatkan entry independent dalam sebuah blog, majalah, ringkasan dan sebagainya.
biasanya terletak didalam section
<aside>
Sebuah aside menunjukan konten yang berkaitan dengan konten lain nya yang ada di sekitar nya. Biasanya aside bisa digunakan untuk area sidebar pada sebuah blog.
<footer>
Untuk menentukan bagian footer atau bagian bawah dari sebuah website, biasanya berisi hak cipta dari sebuah website.
Penggunaan nya dalam struktur HTML selengkapnya sebagai berikut:
- Tag Tag HTML dan Penjelasan Fungsinya
1.
ELEMEN
Element merupakan isi
dari tag yang berada di antara tag pembuka dan tag penutup, juga termasuk tag
itu sendiri dan atribut yang dimilikinya.
2.
ATRIBUT
Atribut merupakan
informasi tambahan yang diberikan kepada tag. Informasi yang dimaksud bisa
berupa perintah untuk warna dari teks, ukuran huruf teks, menentukan posisi
teks, dan masih banyak lagi.
3.
HEADING
Tag Heading adalah sebuah code
HTML yang berfungsi untuk mengubah tulisan. Tag Heading biasa di gunakan
untuk membuat judul pada sebuah artikel atau dokument.
4.
PARAGRAPHS
Tag Paragraf adalah tag
yang berfungsi untuk membuat paragraf pada dokumen HTML.
5.
HTML STYLE
Tag
untuk membuat informasi style untuk dokumen.
6.
HTML FORMATTING
Berfungsi untuk mengubah format suatu
dokumen kedalam bentu memperbaiki agar tertata rapi.
7.
COMMENTS
Berfungsi
untuk memberi tanda pada suatu objek yang sudah dikerjakan.
8.
COLORS
Berfungsi untuk
memberi warna pada latar, tulisan dan sejenisnya.
9.
LINKS
Tag untuk membuat
hubungan antara dokumen dan sumber daya eksternal (paling sering digunakan
untuk link ke style sheet).
10. IMAGES
Tag yang berfungsi untuk menambahkan gambar pada HTML.
11. TABLES
Tag yang berfungsi
untuk menambah tabel pada HTML.
12. LISTS
Tag yang berfungsi untuk menampilkan daftar yang dibutuhkan.
13. UNORDERED
LIST
Tag yang berfungsi
untuk menampilkan daftar secara berurutan dengan tampilan angka.
14. ORDERED
LIST
Tag yang berfungsi untuk menampilkan daftar secara
berurutan dengan tampilan angka.
15. DEFINITION
LIST
Tag yang berfungsi sebagai daftar definisi dalam penjelasan
singkat sebuah kata.
16. NESTED
LIST
Tag yang berfungsi
untuk menampilkan sebuah daftar yang berisikan daftar tidak berurutan dan
berurutan.
17. IFRAMES
Tag
yang berfungsi untuk menampilkan suatu dokumen yang digunakan seperti whatsapp
dan bisa juga website tertentu. Tetapi ini harus di simpan kembali dan instal
sebelum dipakai.
18. JAVASCRIPT
Javascript adalah
bahasa pemrograman yang digunakan untuk membuat website yang interaktif dan
digunakan di dalam file HTML. Terdapat 4 cara untuk menginput atau memasukkan
kode Javascript ke dalam HTML.
a.
Menggunakan tag <script>
b.
Menggunakan tag <script scr=””>
c.
Menggunakan Even Handler
d.
Menggunakan URL (href:=”javascript:”)
19. FILE
PATHS
File Paths digunakan agar file-file dapat berkomunikasi
antara satu dengan yang lainnya dan dapat mengetahui dimana lokasi file lainnya.
<img src="gambar/down.png" width="80"
height="100"> adalah kode HTML yang menyisipkan gambar ke dalam
halaman. Gambar berada pada folder gambar
dengan nama down. Untuk menelusuri
struktur file dari FilePaths.html ke
gambar maka File Path yang digunakan
adalah gambar/down.png.
20. HEAD
Head adalah wadah penampung untuk semua elemen. Head dapat
memasukkan elemen <title>, <script>, <style>, <meta>,
<base>, <link>.
21. LAYOUT
Layout adalah
bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar. Sama
seperti tipografi, terdapat sangat banyak elemen-elemen pada layout. Sebuah
dokumen web memiliki elemen-elemen sebagai berikut :
a.
Header merupakan elemen yang berisi judul dan
penjelasan dokumen.
b.
Navigation adalah elemen yang memberikan
akses navigasi ke halaman lain
dalam web.
c.
Sidebar dapat berada di kiri atau kanan konten,
atau bahkan ke dua sisi konten, sesuai dengan kreatifitas perancangan.
d.
Konten merupakan isi dari dokumen web.
e.
Footer merupakan bagian penutup dari website,
yang dapat berisi informasi lain tentang website.
22. RESPONSIVE
Responsive adalah tampilan layout web yang akan mengalir
mengikuti ukuran layar yang digunakan oleh pengunjung web tanpa membuat layout
jadi berantakan. Responsive menggunakan HTML dan CSS untuk otomatis merubah
ukuran dan tampilan sebuah website agar terlihat bagus di layar komputer
desktop, tablet, dan handphone.
Kode computer
(Computercode) mencakup sebuah nama element XML, nama sebuah file, program
komputer, atau kode-kode lainnya yang dapat dikenali oleh komputer. Untuk
menunjukkan sebuah bagian dari kode computer digunakan tag <code>.
24. ENTITIES
Entities (entitas) pada HTML
digunakan untuk membuat karakter yang tidak mungkin digunakan pada teks dalam
HTML, seperti kurang dari (<), lebih dari (>), dan yang lainnya.
Keuntungan dari penggunaan entitas adalah untuk memudahkan pengingatan nama,
walaupun ada kerugian yang didapatkan dari penggunaan entitas ini karena tidak
semua browser mendukung penggunaan karakter entitas. Pada umumnya karakter
entitas yang digunakan pada HTML adalah non-breaking space: , artinya browser akan selalu
memotong spai pada halaman-halaman dalam HTML.
25. SYMBOL
Pada html selain menyediakan kode warna HTML juga menyediakan
kode symbol, karena pada HTML tidak dapat menuliskan symbol secara langsung,
maka harus menggunakan kode. Ada dua jenis symbol yang disediakan dalam HTML
yaitu number dan entity. Berikut kode HTML untuk membuat symbol :
|
Symbol
|
Number
|
Entity
|
|
∀
|
∀
|
∀
|
|
∂
|
∂
|
∂
|
|
∃
|
∃
|
∃
|
|
∅
|
∅
|
∅
|
|
∇
|
∇
|
∇
|
|
∈
|
∈
|
∈
|
|
∉
|
∉
|
∉
|
|
∋
|
∋
|
∋
|
|
∏
|
∏
|
∏
|
|
∑
|
∑
|
∑
|
|
Α
|
Α
|
Α
|
|
Β
|
Β
|
Β
|
|
Γ
|
Γ
|
Γ
|
|
Δ
|
Δ
|
Δ
|
|
Ε
|
Ε
|
Ε
|
|
Ζ
|
Ζ
|
Ζ
|
|
©
|
©
|
©
|
|
®
|
®
|
®
|
|
€
|
€
|
€
|
|
™
|
™
|
™
|
|
←
|
←
|
←
|
|
↑
|
↑
|
↑
|
|
→
|
→
|
→
|
|
↓
|
↓
|
↓
|
|
♠
|
♠
|
♠
|
|
♣
|
♣
|
♣
|
|
♥
|
♥
|
♥
|
|
♦
|
♦
|
♦
|
26. CHARSET
Character set adalah sekumpulan
karakter yang biasanya berupa angka, huruf dan berbagai karakter lain yang
terstandarisasi, yang masing-masing memiliki ID unik yang disebut code point.
27. Character
Set ASCII
Pada
awal generasi digunakannya sistem komputer, ASCII Character Set yang
mulai ada sejak 1960-an menjadi standar yang digunakan di sebagian
besar sistem komputer untuk menampilkan karakter.ASCII merupakan
kependekan dari American Standard Code for Information Interchange,
sehingga dapat ditebak bahwa ASCII ini dibuat oleh Amerika, yang memang
ditujukan untuk mengakomodasi karakter yang digunakan pada bahasa mereka dan
oleh sebab itu ASCII generasi pertama ini sering disebut US-ASCII.Character Set
ASCII hanya terdiri dari 128 karakter yang terdiri dari karakter nyata
(huruf, angka, simbol dan tanda baca) dan karakter tidak nyata (tab,
enter, alt, dsb), contoh karakter ASCII adalah seperti yang ada pada tombol
keyboard yang kita gunakan sekarang ini
28. Character
Set Latin-1 atau ISO/IEC 8859-1
Secara umum format character set
ISO-8859-x adalah karakter ke 0 s.d 127 untuk karakter ASCII sedangkan
sisanya karakter tambahan. contoh:
|
Encoding
|
#0
– #127
|
#128
– #255
|
|
ISO-8859-5
|
ASCII
|
Cyrillic
|
|
ISO-8859-6
|
ASCII
|
Arabic
|
|
ISO-8859-7
|
ASCII
|
Greek
|
|
ISO-8859-8
|
ASCII
|
Hebrew
|
29. Character
Set UTF-16 dan UCS-2
UTF-16 atau disebut juga Extended UCS-2
yang direlease tahun 1996.UTF-16 merupakan sistem variable
length encoding yang berarti setiap code point (kode
yang mencerminkan suatu karakter) di encode menggunakan satu atau dua kali
16-bit (1 code unit = 16 bit).Sederhananya setiap karakter unicode di
encode menjadi 16 bit (1 code unit) atau 32 bit (2 code unit) tergantung
jenis karakternya.
30. Character
Set UTF-32 dan UCS-4
Angka 32 pada UTF berarti 32 bit dan 4
pada UCS berarti 4 byte, yang dapat diartikan bahwa space yang digunakan
untuk menyimpan suatu karakter adalah 4 byte atau 32 bit.UTF-32 merupakan
alternatif dari UTF-16, jika pada UTF-16 terdapat penggunaan sistem doubel 16
bit (untuk karakter ke 65.535 keatas), UTF-32 menggunakan fixed – width
encoding, dengan base 32 bit (1 code unit = 32 bit),
dimana semua karakter disimpan menggunakan sistem 32 bit
encoding.Akibatnya setiap karakter membutuhkan ruang penyimpanan sebesar 4 byte
(32 bit), meskipun sebenarnya terdapat karakter yang hanya menggunakan 8 bit,
sehingga pada UTF-32, yang terisi hanya 8 bit pertama, sisanya bernilai 0.
31. Character
Set dan Character Encoding UTF-8
UTF-8 menggunakan sistem variable
length encoding dengan basis 8 bit (1 code unit = 8bit), angka
ini tercermin pada angka 8 yang berada di belakang UTF.
Sistem variable length berarti
karakter di encoding menggunakan pola tertentu dengan panjang bit tidak tetap
tergantung jenis karakternya, bisa 8, 16, 24 atau 32 bit. Pembagian penggunaan
bit adalah sebagai berikut:
·
8
bit (1 byte) encoding digunakan untuk karakter 0 s.d 127, sama persis dengan
yang digunakan ASCII.
·
16
bit (2 byte) encoding digunakan untuk karakter 128 s.d 2047. Contoh: Huruf
Latin Extended (dengan tilde (Ã), macron (¯), acute(Á), grave(À)
dan accents (tanda diatas huruf) lainnya), huruf kirilitz (cyrillic)
yang digunakan beberapa negara Slavia: Rusia, Ukraina, Bulgaria dan Serbia
(Contoh: КАЛИФОРНИЯ) , Yunani (Greek), contoh: μαγεια, Armenia,
Ibarani (Hebrew), contoh: הוא עובד, Arab contoh: اللغة العربية, dan lainnya.
·
24
bit (3 byte) encoding digunakan untuk karakter 2048 s.d 65.535. Contoh huruf
Cina, Jepang dan Korea.
·
32
bit (4 byte) encoding untuk karakter 65.536 s.d 1,112,064
dari data diatas diketahui bahwa UTF-8
menggunakan 1 s.d 3 byte untuk mengencode karakter yang ada pada pada BMP
(0 s.d 65.535), berbeda dengan UTF-16 yang hanya 2 byte,
sedangkan untuk karakter ASCII UTF-8 hanya butuh 1 byte, tidak seperti
UTF-16 yang butuh 2 byte.
32. URL
Encoding
URL Encoding adalah proses
konversi URL (Uniform Resource Locator)
saat kita melakukan proses request suatu halaman situs ke web server.
33. Form
Form merupakan salah satu elemen dalam HTML
yang digunakan untuk menerima input dari pengunjung. Melalui form pengunjung
sebuah halaman web dapat melakukan interaksi dengan web. Pengunjung dapat
memasukan data melalui elemen-elemen input seperti textfield, checkbox, radio
button, textarea, submit button, dropdown dan lain-lain. Selain itu
pengunjung juga dapat melakukan pemilihan data mengunakan elemen select
list atau dengan istilah lain combo box atau drop-down list. Form membuat
sebuah halaman web menjadi web interaktif dan dinamis, karena form merupakan
satu-satunya sarana bagi pengembang website untuk mendapatkan informasi dari
pengguna.
34. Form
Elemen
Form elemen dimulai dengan tag
<form> dan ditutup dengan tag </form> digunakan untuk membuat form
pada HTML untuk input pengguna.
Elemen <form> dapat berisi satu atau beberapa form elemen
berikut:
a. <input>: Mendefinisikan kontrol input.
35. Input
Type
Berikut
macam-macam type pada tag input dan masing-masing type yang akan diimplementasikan:
a.
type=”text”
: untuk input angka ataupun huruf jika di input text atau huruf tidak akan
merah input nya.
b.
type=”number”
: input ini hanya khusus untuk input angka, jika di isikan huruf maka akan
berwarna merah pertanda harus diisikan hanya angka saja.
c.
type=”email”
: input ini hanya boleh di isikan khusus email saja, jika di inputkan selain
email maka akan berwarna merah pertanda harus diisikan hanya email saja.
d.
type=”button”
: input ini adalah button klik input, biasanya di pakai untuk kirim data.
e.
type=”url”
: input ini khusus hanya inputan url saja atau halaman website dll, selain url
maka akan berwarna merah pertanda harus diisikan hanya url saja.
f.
type=”radio”
: input ini berbentuk bulat, biasanya di pakai untuk menentukan satu pilihan
dari beberapa pilihan yang ada.
g.
type=”checkbox”
: input ini sama seperti type=”radio” namun input ini bisa memilih banyak
pilihan dari beberapa pilihan.
h.
type=”submit”
: input ini sama dengan type=”button” untuk mengirim data.
36. Input
Atribut
Atribut input bersangkutan dengan inputan form
didalam HTML, yakni kita akan mengenal Atribut Input di HTML5. Didalam elemen
inputan HTML terdapat banyak atribut yang mempunyai fungsi serta peran
masing-masing. Seperti, atribut value, atribut readonly, atribut disable,
atribut size, dan atribut max-length. Tentu atribut yang ada digunakan sesuai
dengan kebutuhan. Masing-masing akan dijelaskan fungsi serta kegunaan atribut
inputan didalam HTML serta hasil dari source code pada sub bab 1.4.
37. Atribut
Nilai
Untuk elemen button,
input, dan option, atribut nilai menentukan nilai awal elemen.
Untuk elemen li,
atribut nilai menetapkan nilai item daftar yang dipesan. Item daftar berikut
akan bertambah dari angka tersebut.
Untuk elemen progress, atribut nilai menentukan
berapa banyak tugas yang telah diselesaikan. Untuk elemen param, atribut nilai
menentukan nilai elemen <param>.
38. Atribut
Read-Only
Atribut readonly
adalah atribut boolean.
Input field atau
textarea hanya bisa dibaca.
Atribut readonly tidak
dapat dimodifikasi (tetapi, pengguna dapat menandainya dan menyalin teks).
Atribut readonly dapat diatur untuk menjaga
pengguna dari mengubah nilai sampai beberapa kondisi lain telah dipenuhi
(seperti memilih kotak centang, dll.). Kemudian, JavaScript dapat menghapus
value readonly, dan membuat input field dapat diedit.
39. Atribut
Disable
Atribut yang didisable
atau dinonaktifkan adalah atribut boolean.
Elemen yang
dinonaktifkan tidak dapat digunakan.
Atribut yang dinonaktifkan dapat disetel untuk
menjaga pengguna agar tidak menggunakan elemen hingga beberapa kondisi lain
terpenuhi (seperti menyentang kotak centang, dll.). Kemudian, JavaScript dapat
menghapus value yang dinonaktifkan, dan membuat elemen dapat digunakan.
40. Atribut
Ukuran
Untuk elemen input, atribut
ukuran menentukan lebar yang terlihat dari elemen <input>.
Untuk elemen select, atribut ukuran menentukan jumlah opsi
yang terlihat dalam daftar drop-down.
41. Atribut
Max-Length
Atribut maxlength menentukan
panjang maksimum (dalam karakter) dari text area.
- Contoh Kode HTML pada setiap Tag
1.
Elemen
<html>
<head>
<title>Judul
Halaman</title>
</head>
<body>
Ini halaman pertama
saya. <b>Teks ini ditebalkan</b>
</body>
</html>
2.
Atribut
<!DOCTYPE
html>
<html
lang="en-US">
<body>
<h1>Aku Heading
Pertama</h1>
<p>Aku Paragraf</p></body>
</html>
3. Heading
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>ini adalah heading 1</h1>
<h2>ini adalah heading 2</h2>
<h3>ini adalah heading 3</h3>
<h4>ini adalah heading 4</h4>
<h5>ini adalah heading 5</h5>
<h6>ini adalah heading 6</h6>
</body>
</html>
4.
PARAGRAPHS
<!DOCTYPE
html>
<html>
<head>
<title>belajar membuat
paragraf</title>
</head>
<body>
<p>ini merupakan
penulisan paragraf pertama dalam dokument HTML</p>
<p>ini merupakan
penulisan paragraf kedua dalam dokument HTML</p>
</body>
</html>
5. HTML STYLE
<!DOCTYPE
html>
<html>
<head>
<title>HTML style tag</title>
<style>
p {
color: blue;
}
span {
color: red
}
</style>
</head>
<body>
<p>Hello World</p>
<span>Helo Dunia</span>
</body>
</html>
6.
HTML FORMATTING
<!DOCTYPE html>
<html>
<head>
<title>belajar
format format text</title>
</head>
<body>
<b>ini
format format text tebal</b><br/>
<i>ini
format text italic</i><br/>
<u>ini
format text underline</u><br/>
<em>ini
format text em</em><br/>
<small>ini
format text small</small><br/>
<strong>ini
format text strong</strong><br/>
<sub>ini
format text sub</sub><br/>
<sup>ini
format text sup</sup><br/>
<ins>ini
format text ins</ins><br/>
<del>ini
format text del</del><br/>
<mark>ini
format text mark</mark>
</body>
</html
7.
COMMENTS
<html>
<head><title>ini
judul</title></head>
<body>
Silahkan Berkomentar<hr/><br/>
<form>
<table>
<tr><td>Tulis
komentar:</td><td><textarea cols="30"
rows="5"></textarea></td></tr>
<tr><td><input
type="submit" value="Postkan
Komentar"/></td><td><input type="reset"
value="hapus"></td></tr>
</table>
</form>
</body>
</html>
8.
COLORS
<html>
<head>
<title> HTML
</title>
</head>
<body>
<font
color=blue>Universitas Teknologi Yogyakarta</color>
</body>
</html>
9.
LINKS
<!DOCTYPE
html>
<html>
<head>
<title>belajar memubuat
hyperlink</title>
</head>
<body>
ini adalah contoh
alamat absolute <a href="https://www.malasngoding.com/category/html/">klik
disini</a>
</body>
</html>
10. IMAGES
Script
:
<!doctype html>
<html>
<head>
<title>penggunaan tag
image</title>
</head>
<body>
<h1>Tambah Tag
Gambar</h1>
<img alt="gambar
maba" src="IMG_20150911_200844.jpg"/>
</body>
</html>
11. TABLES
Script:
<table border=1>
<tr>
<td>Nama</td>
</tr>
<tr>
<td>Tempat tanggal
lahir</td>
</tr>
<tr>
<td>Alamat</td>
</tr>
</table>
12. LISTS
Script:
<!doctype html>
<html>
<head>
<title>penggunaan tag
list</title>
</head>
<body>
<h1>Daftar perlengkapan
sekolah</h1>
<li>
<li>Buku</li>
<li>Tempat pensil</li>
<li>Bollpoint</li>
<li>Pensil</li>
<li>Penghapus</li>
<li>Tas</li>
</li>
</body>
</html>
13. UNORDERED
LIST
Script:
<!doctype html>
<html>
<head>
<title>penggunaan tag
list</title>
</head>
<body>
<h1>Daftar perlengkapan
sekolah</h1>
<ul>
<li>Buku</li>
<li>Tempat pensil</li>
<li>Bollpoint</li>
<li>Pensil</li>
<li>Penghapus</li>
<li>Tas</li>
</ul>
</body>
</html>
14. ORDERED
LIST
Script:
<!doctype html>
<html>
<head>
<title>penggunaan tag
list</title>
</head>
<body>
<h1>Daftar perlengkapan
sekolah</h1>
<ol>
<li>Buku</li>
<li>Tempat pensil</li>
<li>Bollpoint</li>
<li>Pensil</li>
<li>Penghapus</li>
<li>Tas</li>
</ol>
</body>
</html>
15. DEFINITION
LIST
Script:
<dl>
<dt>Sekolah</dt>
<dd>
Pembelajaran sekolah dapat
menambah wawasan dalam ilmu jika diterapkan, dipelajari, dan diulang-ulang
dalam belajar pasti bisa mengerjakan jika ada tugas.
</dd>
</dl>
16. NESTED
LIST
Script:
<ol>
<li> LIST
<ul>
<li>
Buku, Tempat pensil, Bollpoint,
Pensil, Penghapus, dan Tas
<ol>
<li>Buku</li>
<li>Tempat pensil</li>
<li>Bollpoint</li>
<li>Pensil</li>
<li>Penghapus</li>
<li>Tas</li>
</ol>
</li>
</ul>
</li>
</ol>
17. IFRAMES
Script:
<iframe src="WhatsAppSetup(1).exe"></iframe>
18. JAVASCRIPT
Menggunakan tag <script>
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script>
alert("Ini contoh");
</script>
</head>
<body>
<h1>Contoh Menggunakan JavaScript</h1>
</body>
</html>
19. FILE
PATHS
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>FilePaths</title>
</head>
<body>
<img
src="gambar/down.png" width="80" height="100">
</body>
</html>
20. HEAD
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Ini
Contoh Penggunaan Tag Head</title>
</head>
<body>
<p>Tag
Head</p>
</body>
</html>
21. LAYOUT
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
* {
box-sizing:
border-box;
}
body {
font-family: Arial,
Helvetica, sans-serif;
}
header {
background-color:
#666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
nav {
float: left;
width: 30%;
height: 300px;
background: #ccc;
padding: 20px;
}
nav ul {
list-style-type:
none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color:
#f1f1f1;
height: 300px;
}
section:after {
content:
"";
display: table;
clear: both;
}
footer {
background-color:
#777;
padding: 10px;
text-align: center;
color: white;
}
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header>
<h2>Ini
Header</h2>
</header>
<section>
<nav>
<ul>
<li><a
href="#">Ini Sidebar</a></li>
<li><a
href="#">Menggunakan</a></li>
<li><a
href="#">Navigasi</a></li>
</ul>
</nav>
<article>
<h1>Ini
Section</h1>
<p>Layout
adalah bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar. Sama
seperti tipografi, terdapat sangat banyak elemen-elemen pada layout.</p>
</section>
<footer>
<p>Ini
Footer</p>
</footer>
</body>
</html>
22. RESPONSIVE
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Responsive</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
* {
box-sizing:
border-box;
}
.menu {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px
solid #f1f1f1;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color:
lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
@media only screen and (max-width:800px) {
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
@media only screen and (max-width:500px) {
.menu, .main, .right
{
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Contoh</h1>
<h3>Responsive</h3>
</div>
<div style="overflow:auto">
<div
class="menu">
<div
class="menuitem">Contoh</div>
<div
class="menuitem">Tag</div>
<div
class="menuitem">Html</div>
<div
class="menuitem">Responsive</div>
</div>
<div
class="main">
<h2>Responsive</h2>
<p>Responsive
menggunakan HTML dan CSS untuk otomatis merubah ukuran dan tampilan sebuah
website agar terlihat bagus di layar komputer desktop, tablet, dan
handphone.</p>
<img
src="gambar/wallpaper.jpg" style="width:100%">
</div>
<div
class="right">
<h2>Ini</h2>
<p>Responsive
menggunakan HTML dan CSS untuk otomatis merubah ukuran dan tampilan sebuah
website agar terlihat bagus.</p>
<h2>Contoh</h2>
<p>Responsive
menggunakan HTML dan CSS untuk otomatis merubah ukuran dan tampilan sebuah
website agar terlihat bagus.</p>
<h2>Responsive</h2>
<p>Responsive
menggunakan HTML dan CSS untuk otomatis merubah ukuran dan tampilan sebuah website
agar terlihat bagus.</p>
</div>
</div>
</body>
</html>
a.
Desktop
b.
Handphone
23. COMPUTERCODE
Source code :
<!DOCTYPE html>
<html>
<head>
<title>COMPUTERCODE</title>
</head>
<body>
<h2>Ini
Contohnya</h2>
<p>Computer Code</p>
<code>
1 + 1<br>
2 + 2;<br>
3 + 3;
</code>
</body>
</html>
24. ENTITIES
Source code :
<!DOCTYPE html>
<html>
<head>
<title>Entities</title>
</head>
<body>
<p>contoh menggunakan entities pada
html</p>
<p>1 < 2</p>
<p>3 > 1</p>
</body>
</html>
25. SYMBOL
Source code :
<!DOCTYPE html>
<html>
<head>
<title>Symbol</title>
</head>
<body>
<h1>Menggunakan
Symbol</h1>
<p>contoh menggunakan symbol panah atas
↑</p>
<p>contoh menggunakan symbol panah bawah
↓</p>
<p>contoh menggunakan symbol panah kiri
←</p>
<p>contoh menggunakan symbol panah kanan
→</p>
<p>contoh menggunakan symbol hati ♣</p>
<p>contoh menggunakan symbol copy ©</p>
</body>
</html>
26. CHARSET
27. Character
Set ASCII
28. Character
Set Latin-1 atau ISO/IEC 8859-1
29. Character
Set UTF-16 dan UCS-2
30. Character
Set UTF-32 dan UCS-4
31. Character
Set dan Character Encoding UTF-8
Source code :
<html>
<head>
<meta
charset="utf-8" />
<title>Demo
HTML kbd tag</title>
<style>
</style>
</head>
<body>
<p>Untuk
menyimpan file, tekan <kbd><kbd>Ctrl</kbd>
+<kbd>s</kbd></kbd></p>
</body>
</html>
32. URL
Encoding
33. Form
Source code :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Form </title>
</head>
<body>
<form action=" formulir.html"
method="get">
Nama: <input type="text" name="nama"
value="Nama Kamu" />
<br />
Password: <input type="password"
name="password" />
<br />
Jenis Kelamin :
<input type="radio"
name="jenis_kelamin" value="laki-laki" checked />
Laki - Laki
<input type="radio"
name="jenis_kelamin" value="perempuan" />
Perempuan
<br />
Hobi: <input type="checkbox"
name="hobi_baca" /> Membaca Buku
<input
type="checkbox" name="hobi_nulis" checked /> Menulis
<input
type="checkbox" name="hobi_mancing" /> Memancing
<br />
Asal Kota:
<select
name="asal_kota" >
<option
value="Kota Jakarta"> Jakarta</option>
<option
value="Kota Bandung">Bandung</option>
<option
value="Kota Semarang" selected>Semarang</option>
</select>
<br />
Komentar Anda:
<textarea name="komentar" rows="5"
cols="20">
Silahkan katakan isi hati anda
</textarea>
<br />
<input type="submit" value="Mulai
Proses!" >
</form>
</body>
</html>
34. Form
Elemen
35. Input
Type
Source code:
<!DOCTYPE html>
<html>
<body>
<input
type="text"><span style=""> Ini type
text</span>
<br><br>
<input type="number"
name=""><span> Ini type number</span>
<br><br>
<input type="email"
name=""><span> Ini type email</span>
<br><br>
<input type="button"
name="" value="button"><span> Ini type
button</span>
<br><br>
<input type="url"
name=""><span> Ini type url</span>
<br><br>
<input type="radio"
name=""><span> Ini type radio</span>
<br><br>
<input type="checkbox"
name=""><span> Ini type checkbox</span>
<br><br>
<input type="submit"
name="" value="Daftar"><span> Ini type
submit</span>
</body>
</html>
36. Input
Atribut
37. Atribut
Nilai
Source code:
<html>
<body>
<form>
Nama depan: <input type="text"
name="namad" value="Christanto"><br>
Nama belakang: <input
type="text" name="namab"
value="Raka"><br><p>
<input type="submit"
value="Daftar">
</form>
</body>
</html>
38. Atribut
Read-Only
Source code:
<!DOCTYPE html>
<html>
<body>
<textarea
rows="4" cols="45" readonly>
Hello world! Didalam
text area ini tulisannya hanya bisa dibaca saja tidak dapat diedit ya. Jadi,
harap maklum ya :)
</textarea>
</body>
</html>
39. Atribut
Disable
Source code:
<!DOCTYPE html>
<html>
<body>
<form>
Nama depan: <input type="text"
name="namadepan"><br><p>
Nama belakang: <input
type="text" name="namabelakang"
disabled><br><p>
<input type="submit"
value="Submit">
</form>
</body>
</html>
40. Atribut
Ukuran
Source code:
<!DOCTYPE html>
<html>
<body>
<form>
Email: <input type="text"
name="email" size="35"><br><p>
Password: <input type="text"
name="pass" size="20"><br><p>
<input type="submit"
value="Submit">
</form>
</body>
</html>
41. Atribut
Max-Length
Source
code:
<!DOCTYPE html>
<html>
<body>
<textarea rows="4"
cols="40" maxlength="50">
</textarea>
</body>
</html>
Oke sekian penjelasan tentang HTML5, semoga jika ada tulisan tentang HTML5 lainnya, Semoga bermanfaat untuk kawan-kawan semuanya :)
Tidak ada komentar:
Posting Komentar