Penerapan HTML (Part 8)


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.

Daftar HTML

 Contoh pemakaian unorder list
  •  Bakpao
  • Arem arem
  • Tahu bacem
Contoh pemakaian order list
  1. Mie ayam
  2. Bakso
  3.  Es teh
HTML unordered daftar

Daftar unordered dimulai dengan <ul> tag. Setiap item daftar dimulai dengan <li> tag.
Daftar item akan ditandai dengan peluru (lingkaran hitam kecil)

Contoh :

Maka outputnya :


 Daftar HTML unordered - The Style Atribut
Sebuah atribut style dapat ditambahkan ke daftar unordered, untuk menentukan gaya penanda.

         gaya                                   Deskripsi
  1. list-style-type: disc Daftar item akan ditandai dengan peluru (default)
  2. list-style-type: Lingkaran item daftar akan ditandai dengan lingkaran
  3. list-style-type: persegi Daftar item akan ditandai dengan kotak
  4. list-style-type: none Daftar item tidak akan ditandai
 Contoh :

Maka outputnya :

HTML ordered list.
Daftar memerintahkan dimulai dengan <ol> tag. Setiap item daftar dimulai dengan <li> tag.
Daftar item akan ditandai dengan nomor

Jenis Atribut
Sebuah atribut jenis dapat ditambahkan ke daftar memerintahkan, untuk menentukan jenis penanda
          Jenis                    Deskripsi
  1. type = "1" Daftar barang akan diberi nomor dengan angka (default)
  2. type = "A" Daftar barang akan diberi nomor dengan huruf besar
  3. type = "a" Daftar barang akan diberi nomor dengan huruf kecil
  4. type = "I" Daftar barang akan diberi nomor dengan angka romawi huruf besar
  5. type = "i" Daftar barang akan diberi nomor dengan angka romawi huruf kecil
Contoh :

Maka outputnya :
 
 Deskripsi HTMLHTML juga mendukung daftar deskripsi.
Sebuah daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah.
<dl> tag mendefinisikan daftar deskripsi, yang <dt> mendefinisikan istilah (nama), dan <dd> tag menjelaskan setiap istilah

Contoh :

Maka outputnya :

HTML nested list
Daftar dapat bersarang (daftar dalam daftar)

Contoh :

Maka output :


item daftar dapat berisi daftar baru, dan elemen HTML lainnya, seperti gambar dan link, dll

Daftar horisontal
daftar HTML bisa ditata dalam berbagai cara dengan CSS.
Salah satu cara yang populer, adalah gaya daftar yang akan ditampilkan secara horizontal


Maka outputnya :

Dengan sedikit tambahan gaya, Anda dapat membuatnya terlihat seperti menu

Contoh :

Maka outputnya :

Rangkuman Bab
  •     Gunakan HTML <ul> elemen untuk mendefinisikan daftar unordered
  •     Gunakan atribut style HTML untuk menentukan gaya bullet
  •     Gunakan HTML <ol> elemen untuk menentukan daftar memerintahkan
  •     Gunakan jenis atribut HTML untuk menentukan jenis penomoran
  •     Gunakan HTML <li> elemen untuk menentukan item daftar
  •     Gunakan HTML <dl> elemen untuk menentukan daftar deskripsi
  •     Gunakan HTML <dt> elemen untuk mendefinisikan istilah deskripsi
  •     Gunakan HTML <dd> elemen untuk mendefinisikan data deskripsi
  •     Daftar dapat bersarang di dalam daftar
  •     item daftar dapat berisi elemen HTML lainnya
  •     Menggunakan tampilan properti CSS: inline untuk menampilkan daftar horizontal
HTML Daftar Tag

  tag                      Deskripsi

  1. <Ul> Mendefinisikan sebuah daftar unordered
  2. <Ol> Mendefinisikan sebuah daftar memerintahkan
  3. <Li> Mendefinisikan sebuah item daftar
  4. <Dl> Mendefinisikan daftar deskripsi
  5. <Dt> Mendefinisikan istilah dalam daftar deskripsi
  6. <Dd> Mendefinisikan deskripsi dalam daftar deskripsi
Blok HTML dan Inline ElementsSetiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemen itu. Tampilan nilai default untuk kebanyakan unsur adalah blok atau inline.

Elemen blok-tingkat

Sebuah elemen blok-tingkat selalu dimulai pada baris baru dan mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh itu bisa).

Contoh elemen blok-tingkat:

    <Div>
    <H1> - <h6>
    <P>
    <Form>

inline Elements
Elemen inline tidak dimulai pada baris baru dan hanya membutuhkan sebanyak lebar yang diperlukan.

Ini adalah inline <span> elemen di dalam sebuah paragraf.

Contoh elemen inline:

    <Span>
    <a>
    <Img>

<Div> Elemen
<Div> elemen adalah elemen blok-tingkat yang sering digunakan sebagai wadah untuk elemen HTML lainnya.
<Div> elemen tidak memiliki atribut yang diperlukan, tapi gaya dan kelas yang umum.
Ketika digunakan bersama-sama dengan CSS, yang <div> elemen dapat digunakan untuk blok gaya konten

Contoh :

Maka outputnya :

<Span> Elemen
<Span> elemen merupakan elemen inline yang sering digunakan sebagai wadah untuk beberapa teks.
<Span> elemen tidak memiliki atribut yang diperlukan, tapi gaya dan kelas yang umum.
Ketika digunakan bersama-sama dengan CSS, yang <span> elemen dapat digunakan untuk gaya bagian dari teks

Contoh :

Maka outputnya :

HTML Pengelompokan Tags

   tag                         Deskripsi

  1. <Div> Mendefinisikan sebuah bagian dalam sebuah dokumen (block-level)
  2. <Span> Mendefinisikan sebuah bagian dalam sebuah dokumen (inline)
 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