Khoirun Nafisah: Pengenalan HTML

 A. Pengertian

Pengenalan HTML Langkah Dasar: Halo sobat jika anda ingin membuat sebuah website, tetapi anda tidak tahu bagaimana cara memulainya? tenang saja dalam artikel ini akan dijelaskan tentang dasar html. Pertama kita akan mulai dari awal dengan belajar tentang hypertext markup language, yang lebih dikenal sebagai HTML. Dalam artikel ini kita juga akan belajar secara teori maupun praktek dengan membangun sebuah halaman web sederhana.
Apakah sobat tahu bagian apa yang membuat desain web dan pengembangan web begitu menyenangkan bila dibandingkan dengan pengembangan perangkat lunak lainnya, jawabannya adalah bahwa anda dapat langsung melihat hasil dari usaha anda.Bahkan jika anda belum pernah membuat website sebelumnya, saya pikir Anda akan terkejut dengan betapa mudahnya untuk membuat konten Anda muncul dalam browser.
HTML adalah pembentuk dasar dari hampir setiap website, tidak peduli seberapa besar atau kecil website tersebut.
Jadi, pada saat anda selesai belajar tentang HTML, anda akan siap untuk melanjutkan dengan teknologi web lain seperti CSS, Java Script dan teman-temannya.

misalnya Dijelaskan

    Deklarasi DOCTYPE mendefinisikan jenis dokumen menjadi HTML
    Teks antara < html > dan < / html > menggambarkan sebuah dokumen HTML
    Teks antara < head> dan < / head> memberikan informasi tentang dokumen
    Teks antara < title> dan < / title> memberikan judul untuk dokumen
    Teks antara <body > dan < / body> menggambarkan isi halaman yang terlihat
    Teks antara < h1 > dan < / h1 > menggambarkan judul
    Teks antara < p > dan < / p > menggambarkan sebuah paragraf

< Abbr > Mendefinisikan sebuah singkatan atau akronim

<Address > Mendefinisikan informasi kontak untuk penulis / pemilik dokumen

```
< Bdo > Mendefinisikan arah teks
```

< Blockquote > Mendefinisikan bagian yang dikutip dari sumber lain

```
< Cite> Mendefinisikan judul karya
```

< Q > Mendefinisikan sebuah kutipan inline singkat

Atribut HTML

alt    Menentukan teks alternatif untuk gambar

disable          Menentukan bahwa elemen input harus dinonaktifkan

href   Menentukan URL ( alamat web ) untuk link

```
id    Menentukan id unik untuk elemen
```

src    Menentukan URL ( alamat web ) untuk gambar

style           Menentukan gaya CSS inline untuk suatu elemen

title    Menentukan informasi tambahan tentang elemen ( ditampilkan     sebagai tool tip )

< Html > Mendefinisikan sebuah dokumen HTML

```
<Body > Mendefinisikan tubuh dokumen
```

<Head > Mendefinisikan elemen kepala dokumen

< H1 > untuk < h6 > Mendefinisikan judul HTML

```
< Hr > Mendefinisikan garis horizontal
```
```
 Mendefinisikan sebuah paragraf
```
```
 Situs Sisipan satu baris tunggal
```

< Pre > Mendefinisikan pra - diformat teks

HTML Style

    Gunakan atribut style untuk elemen styling HTML

    Gunakan background-color untuk warna latar belakang

```
    Gunakan color untuk warna teks
```

    Gunakan font-family untuk font teks

    Gunakan font-size untuk ukuran teks

    Gunakan text-align untuk perataan teks

HTML Formatting

```
 Mendefinisikan teks tebal
```
```
 Mendefinisikan menekankan teks
```
```
 Mendefinisikan teks miring
```
```
 Mendefinisikan teks kecil
```
```
 Mendefinisikan teks penting
```
```
 Mendefinisikan teks subscript
```

<Sup > Mendefinisikan teks superscripted

< Ins > Mendefinisikan teks dimasukkan teks

```
< del > Mendefinisikan dihapus
```

< Mark > Mendefinisikan ditandai / teks yang disorot

HTML Quotation Element

< Abbr > Mendefinisikan sebuah singkatan atau akronim

<Address > Mendefinisikan informasi kontak untuk penulis / pemilik dokumen

```
< Bdo > Mendefinisikan arah teks
```

< Blockquote > Mendefinisikan bagian yang dikutip dari sumber lain

```
< Cite> Mendefinisikan judul karya
```

< Q > Mendefinisikan sebuah kutipan inline singkat

HTML Computer Element

```
< Code> Mendefinisikan kode pemrograman
```
```
< Kbd > Mendefinisikan input keyboard
```
```
< Samp > Mendefinisikan output komputer
```
```
< Var > Mendefinisikan variabel
```
```
< Pre > Mendefinisikan teks terformat
```

    Gunakan atribut style HTML untuk styling inline

    Gunakan HTML <style> elemen untuk menentukan CSS internal yang

    Gunakan HTML <link > elemen untuk merujuk ke file CSS eksternal

    Gunakan HTML <head > elemen untuk menyimpan < style> dan <link > elemen

    Menggunakan properti color CSS untuk warna teks

    Menggunakan properti CSS font-family untuk font teks

    Menggunakan properti CSS font-size untuk ukuran teks

    Menggunakan properti perbatasan(border) CSS untuk batas elemen yang terlihat

    Menggunakan properti CSS bantalan(padding) untuk ruang di dalam perbatasan

    Menggunakan properti CSS margin untuk ruang luar perbatasan

Rangkuman Bab

<Style> Mendefinisikan informasi style untuk dokumen HTML

<Link > Mendefinisikan hubungan antara dokumen dan sumber daya eksternal

Target HTML Link

_blank Membuka dokumen terkait di jendela baru atau tab

_self Membuka dokumen terkait pada frame yang sama seperti yang diklik ( ini adalah default )

_parent Membuka dokumen terkait dalam kerangka induk

_top Membuka dokumen terkait dalam tubuh penuh jendela

framename Membuka dokumen terkait dalam bingkai bernama<a> Mendefinisikan sebuah hyperlink

Rangkuman Bab

    Gunakan elemen HTML <a> untuk mendefinisikan link

    Gunakan HTML atribut href untuk menentukan alamat link

    Gunakan atribut target HTML untuk menentukan di mana untuk membuka dokumen terkait

    Gunakan HTML < img > elemen ( dalam <a> ) untuk menggunakan gambar sebagai link

    Menggunakan atribut HTML id ( id = " value " ) untuk menentukan bookmark di halaman

    Gunakan HTML href atribut ( href = " # value " ) untuk link ke bookmark

Rangkuman Bab

Gunakan HTML < img > elemen untuk menentukan gambar

    Menggunakan atribut HTML src untuk menentukan URL gambar

    Menggunakan atribut HTML alt untuk mendefinisikan teks alternatif untuk gambar , jika tidak dapat ditampilkan

    Gunakan lebar HTML dan tinggi atribut untuk menentukan ukuran gambar

    Gunakan CSS lebar dan tinggi sifat untuk menentukan ukuran gambar (alternatif )

    Menggunakan properti CSS mengapung untuk membiarkan mengambang gambar

    Gunakan HTML < map > elemen untuk menentukan gambar - peta

    Gunakan HTML < area > elemen untuk menentukan daerah-daerah yang dapat diklik pada gambar - peta

    Gunakan elemen HTML < img > ' s usemap atribut untuk menunjuk ke gambar - peta

< img > Mendefinisikan gambar
< map > Mendefinisikan sebuah image-map
< area > Mendefinisikan daerah yang dapat diklik di dalam gambar - peta
Gunakan HTML <table > elemen untuk mendefinisikan tabel
    Gunakan HTML < tr > elemen untuk menentukan baris tabel
    Gunakan HTML < td > elemen untuk menentukan data tabel
    Gunakan HTML < th > elemen untuk mendefinisikan meja pos
    Gunakan HTML < caption > elemen untuk mendefinisikan judul tabel
    Menggunakan properti perbatasan(border) CSS untuk menentukan perbatasan
    Menggunakan properti CSS border-collapse runtuh batas sel
    Menggunakan properti CSS padding untuk menambahkan padding untuk sel
    Menggunakan properti CSS text-align menyelaraskan teks sel
    Menggunakan properti CSS border- spacing untuk mengatur jarak antara sel-sel
    Menggunakan atribut colspan untuk membuat rentang sel banyak kolom
    Menggunakan atribut rowspan untuk membuat rentang sel banyak baris
    Menggunakan atribut id untuk mendefinisikan unik satu meja

tag Deskripsi
<Table > Mendefinisikan meja
< Th > Mendefinisikan sebuah header cell dalam sebuah tabel
< Tr > Mendefinisikan baris dalam sebuah tabel
< Td > Mendefinisikan sebuah sel dalam tabel
< Caption > Mendefinisikan sebuah caption tabel
< Colgroup > Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat
< Col > Menentukan sifat kolom untuk setiap kolom dalam < colgroup > elemen
< Thead > Grup isi header dalam sebuah tabel
< Tbody > Grup isi tubuh dalam sebuah tabel
< Tfoot > Grup isi footer dalam sebuah tabel

list-style-type:disc  Daftar item akan ditandai dengan peluru (default )
list-style-type:circle  Daftar item akan ditandai dengan lingkaran
list-style-type:square  Daftar item akan ditandai dengan kotak
list-style-type:none  Daftar item tidak akan ditandai

Daftar HTML memerintahkan - The Jenis Atribut

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

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 Lists Tag
tag  Deskripsi
< Ul > Mendefinisikan sebuah daftar unordered
< Ol > Mendefinisikan sebuah daftar memerintahkan
< Li > Mendefinisikan sebuah item daftar
< Dl > Mendefinisikan daftar deskripsi
< Dt > Mendefinisikan istilah dalam daftar deskripsi
<Dd > Mendefinisikan deskripsi dalam daftar deskripsi
HTML Grouping Tags
tag   Deskripsi
< Div > Mendefinisikan sebuah bagian dalam sebuah dokumen ( block -level )
<Span > Mendefinisikan sebuah bagian dalam sebuah dokumen ( inline )
< Header> - Mendefinisikan header untuk dokumen atau bagian yang
    < Nav > - Mendefinisikan sebuah wadah untuk link navigasi
    <Section > - Mendefinisikan sebuah bagian dalam sebuah dokumen
    <Article > - Mendefinisikan sebuah artikel mandiri independen
    <Aside > - Mendefinisikan konten selain dari konten (seperti sidebar )
    < Footer > - Mendefinisikan footer untuk dokumen atau bagian yang
    < Rincian > - Mendefinisikan rincian tambahan
    < Summary > - Mendefinisikan heading untuk < rincian > elemen

Referensi : http://www.w3schools.com/

Khoirun Nafisah

Halaman

Jumat, 03 Juni 2016

Pengenalan HTML

Tidak ada komentar:

Posting Komentar

Bab 1 Konsep Dasar Ilmu Ekonomi dan Permasalahannya

Blogroll

Blogger news