Penerapan HTML (Part 11)

I.Latar Belakang.


Latar belakang kali ini kita masih mengenal sintag tentang HTML apa saja yang di butuhkan untuk membuat web dasar

II.Alat dan Bahan.

  • Laptop / PC
  • W3SCHOOLS
  • Sublime text

III.Tujuan.

 untuk mengetahui langkah dasar untuk membuat web yang sederhana.

IV.Penjelasan.

 HTML Head

HTML <head> Elemen
<Head> elemen merupakan wadah untuk metadata (data tentang data) dan ditempatkan di antara <html> tag dan <body> tag.metadata HTML adalah data tentang dokumen HTML. Metadata tidak ditampilkan.Metadata biasanya menentukan judul dokumen, set karakter, gaya, link, script, dan informasi meta lainnya.Tag berikut menggambarkan metadata: <title>, <style>, <meta>, <link>, <script>, dan <base>. 

HTML <title> Elemen
<Title> elemen mendefinisikan judul dokumen, dan diperlukan dalam semua dokumen HTML / XHTML.

<Title> elemen:

  •     mendefinisikan judul di tab browser
  •     memberikan judul untuk halaman ketika ditambahkan ke favorit
  •     menampilkan judul untuk halaman dalam hasil mesin pencari
Contoh :

dengan menambahkan title pada bagian head agar mudah dalam pemberian judul, jika kita outputkan makan pada title nya akan muncul seperti ini

 HTML <style> Elemen
<Style> elemen digunakan untuk mendefinisikan informasi style untuk halaman HTML

Contoh :


Maka outputnya :

 HTML <link> Elemen
<Link> elemen digunakan untuk link ke style sheet eksternal

Contoh :


Maka outputnya :

 HTML <meta> Elemen

<meta> elemen digunakan untuk menentukan karakter set yang digunakan, deskripsi halaman, kata kunci, penulis, dan metadata lainnya.
Metadata digunakan oleh browser (bagaimana menampilkan konten), oleh mesin pencari (kata kunci), dan layanan web lainnya.
Mendefinisikan set karakter yang digunakan

<Meta charset = "UTF-8">

Mendefinisikan deskripsi dari halaman web Anda 

<Meta name = "description" content = "Free Web tutorial">

 Menentukan kata kunci untuk mesin pencari 

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Mendefinisikan penulis halaman
<Meta name = "author" content = "John Doe">Refresh dokumen setiap 30 detik
<Meta http-equiv = "refresh" content = "30">
Contoh <meta> tag

 Setting ViewportHTML5 memperkenalkan metode untuk membiarkan web desainer mengambil kendali atas viewport, melalui <meta> tag.

viewport adalah daerah terlihat pengguna dari halaman web. Ini bervariasi dengan perangkat, dan akan lebih kecil pada ponsel daripada di layar komputer.
Anda harus menyertakan <meta> elemen viewport berikut di semua halaman web Anda

<Meta name = "viewport" content = "width = device-width, awal skala = 1.0">

A <meta> elemen viewport memberikan petunjuk browser pada bagaimana mengontrol dimensi halaman dan scaling.
Lebar = bagian perangkat-lebar set lebar halaman untuk mengikuti layar-lebar perangkat (yang akan bervariasi tergantung pada perangkat).
Awal skala = 1,0 bagian menetapkan tingkat zoom awal saat halaman pertama dimuat oleh browser.
Berikut adalah contoh dari halaman web tanpa meta tag viewport, dan halaman web yang sama dengan meta tag viewport

Tanpa meta tag viewport

Dengan meta tag viewport

HTML <script> Elemen<Script> elemen digunakan untuk mendefinisikan JavaScripts client-side.
JavaScript ini menulis "Hello JavaScript!" ke elemen HTML dengan id = "demo"

Contoh :

Maka outputnya :

HTML <base> Elemen<base> elemen menentukan URL dasar dan sasaran dasar untuk semua URL relatif dalam halaman

Contoh :

Maka outputnya :


Menghilangkan <html>, <head> dan <body>?
Menurut standar HTML5; <html>, <body>, dan <head> tag dapat dihilangkan.
Kode berikut akan memvalidasi sebagai HTML5

Contoh :

Maka outputnya :

Elemen kepala HTML

    tag           Deskripsi
  • <Head> Mendefinisikan informasi tentang dokumen
  • <Title> Mendefinisikan judul dokumen
  • <Base> Mendefinisikan sebuah alamat default atau target standar untuk semua link pada halaman
  • <Link> Mendefinisikan hubungan antara dokumen dan sumber daya eksternal
  • <Meta> Mendefinisikan metadata tentang dokumen HTML
  • <Script> Mendefinisikan sebuah script sisi klien
  • <Style> Mendefinisikan informasi style untuk dokumen
V.Kesimpulan.
  
dapat kita simpulkan bahwa trik trik dasar itu harus kita pelajari agar kita dapat membuat suatu web sederhana yang maximal.

VI.Refrensi.


  • http://www.w3schools.com/html 

Komentar

Posting Komentar

Postingan Populer