Tampilkan postingan dengan label Panduan Dasar Lengkap - Dasar Tag HTML. Tampilkan semua postingan

10/14/2024

Dikecualikan oleh tag ‘noindex’

By MY BLOGGER10/14/2024Panduan Dasar Lengkap - Dasar Tag HTML Tidak ada komentar:

Tag noindex adalah tag HTML yang memberi tahu mesin pencari seperti Google untuk tidak mengindeks halaman tertentu, sehingga halaman tersebut tidak muncul dalam hasil pencarian. Jika sebuah halaman di situs Anda "dikecualikan oleh tag ‘noindex’," artinya halaman tersebut telah ditandai dengan tag ini, sehingga mesin pencari tidak akan menampilkannya di indeks mereka.

Fungsi dan Penggunaan Tag noindex:

Mengontrol Konten yang Ditampilkan di Mesin Pencari:Tag noindex sering digunakan untuk mengecualikan halaman tertentu dari indeks mesin pencari. Ini bisa dilakukan karena berbagai alasan, seperti halaman yang berisi konten sementara, konten yang tidak penting untuk SEO, atau halaman duplikat yang tidak diinginkan muncul di pencarian.

Cara Kerja Tag noindex:
Tag noindex biasanya ditempatkan di bagian <head> HTML halaman yang ingin Anda kecualikan.

Contoh penulisan tag:<meta name="robots" content="noindex">

Ketika mesin pencari seperti Google meng-crawl halaman ini dan menemukan tag noindex, mereka akan menghindari memasukkan halaman tersebut ke dalam indeks hasil pencarian.

Alasan Menggunakan Tag noindex:Halaman Privasi atau Keamanan: Halaman login, dashboard pengguna, atau halaman yang memiliki informasi sensitif biasanya tidak perlu diindeks.
Halaman Terima Kasih atau Konfirmasi: Halaman seperti "Thank You" setelah transaksi atau konfirmasi pengisian formulir sering kali tidak perlu dimasukkan ke dalam hasil pencarian.
Konten yang Tidak Menambah Nilai SEO: Halaman yang memiliki sedikit konten atau informasi tidak penting (seperti kebijakan privasi atau syarat dan ketentuan) biasanya tidak ingin diprioritaskan di hasil pencarian.
Menghindari Konten Duplikat: Jika Anda memiliki beberapa halaman dengan konten serupa atau duplikat (misalnya, halaman produk yang berbeda hanya berdasarkan kategori), menggunakan tag noindex membantu menghindari penalti konten duplikat.

Perbedaan dengan Tag Kanonis:Tag canonical digunakan untuk menandai satu halaman sebagai versi utama dari beberapa halaman yang memiliki konten serupa, sedangkan tag noindex digunakan untuk mengeluarkan halaman dari hasil pencarian sepenuhnya.
Jika Anda ingin tetap mengindeks halaman tetapi ingin menandai satu halaman sebagai versi utama, gunakan tag canonical. Jika Anda ingin halaman tidak muncul sama sekali di mesin pencari, gunakan tag noindex.

Dampak Penggunaan noindex:Mengurangi Visibilitas Halaman: Halaman yang memiliki tag noindex tidak akan muncul dalam hasil pencarian Google atau mesin pencari lainnya, sehingga pengguna tidak dapat menemukan halaman ini melalui pencarian.
Meningkatkan Fokus pada Halaman Penting: Dengan menandai halaman yang tidak penting dengan noindex, Anda membantu mesin pencari memprioritaskan halaman yang lebih penting atau relevan, meningkatkan efektivitas SEO situs Anda.
Kapan Tidak Menggunakan Tag noindex:Pada Halaman Penting untuk SEO: Jangan gunakan tag noindex pada halaman yang ingin Anda rangking di mesin pencari, seperti halaman produk, halaman blog, atau halaman layanan utama.
Pada Konten yang Diharapkan untuk Mendapatkan Trafik: Jika halaman tersebut diharapkan mendatangkan pengunjung dari pencarian organik, tag noindex tidak boleh digunakan.

Kesimpulan:

Jika sebuah halaman "dikecualikan oleh tag noindex", mesin pencari tidak akan mengindeks atau menampilkan halaman tersebut dalam hasil pencarian. Gunakan tag ini dengan hati-hati, terutama untuk halaman yang tidak penting untuk SEO atau tidak relevan untuk pengguna mesin pencari.

Cascade Style Sheet (CSS) - 2

By MY BLOGGER7/27/2010Panduan Dasar Lengkap - Dasar Tag HTML Tidak ada komentar:

4 Pendefinisian Style Tag dengan Nama Class khusus

Style dapat dibuat dengan mendefinisikan sebuah tag HTML tertentu dengan atribut style sheet yang memiliki sebuah nama class yang spesifik/khusus. Yaitu dengan menggunakan atribut CLASS dengan nama class tertentu yang dapat menunjukkan cirri khusus untuk siapa definisi style tersebut digunakan.

DIV dan Span biasa digunakan untuk mengelompokkan tag-tag. Selain, keduanya biasa digabungkan dengan atribut ID dan CLASS yang menawarkan mekanisme generic untuk memperluas struktur dokumen (mempermudah dan mengefisiensikan pengaturan tampilan).

SPAN merupakan inline content (text level), sedangkan div merupakan block level. Kedua sangat bermanfaat untuk style sheet. Dimana<DIV></DIV> itu sendiri maupun antara DIV dengan tag-tag lainnya, pada pergantian barisnya tidak terdapat baris kosong (line break). Sedangkan seperti kita ketahui sebelumnya, antara P yang satu denga P yang lain maupun P dengan tag-tag lainnya, terdapat pergantian baris. Lihat kembali penggalan source dari tampilan baris.

…Ryan Giggs berhasil meraih MVP dan hadiah berupa sedan sport

<SPAN CLASS = “hadiah”>Toyota Celica SS-II</SPAN>.
Perhatikan baik-baik, tidak ada pergantian baris pada SPAN.

5 Pendefinisian Style sebuah Nama Identitas khusus

Teknik ini berbeda dengan teknik yang telah dipelajari sebelumnya. Pendefinisian style dapat dibuat dengan menspesifikasikan sebuah nama identitas khusus tertentu dengan atribut-atribut style sheet. Untuk itu gunakanlah #namaidentitas-spesifik dengan atribut style tertentu yang telah didefinisikan. Bentuk pendefinisian ini dapat dipakai oleh tag-tag apapun yang disertai nama identitas tersebut.

Terlihat jelas bahwa identitas ID “identitasku” bisa digunakan oleh tag-tag lain asalkan tag tersebut mencantumkan ID=”identitasku”.

6 Pendefinisian dengan External Style Sheet

Pada pembahasan-pembahasan sebelunya, style sheet dalam bentuk header diletakkan di dalam dokumen yang bersangkutan. Baik itu di dalam HEAD, maupun di dalam BODY. Bagaimana jika kita ingin agar pendefinisian style sheet tersebut diletakkan pada sebuah file tertentu terpisah dengan dokumen HTML tersebut ? Inilah yang disebut External Style Sheet (style sheet luar).

Keuntungan dari External Style Sheet ini adalah mempermudah modifikasi style tanpa harus menyentuh dokumen HTML yang bersangkutan. Selain itu juga, pembuat homepage tidak usah capek-capek membuat definisi-definisi baru di setiap dokumen. Dengan adanya ExternalStyle Sheet, misalnya alternatif yang pertama ukuran huruf sedang, sedangkan pada alternatif kedua ukuran huruf besar.

Pembuat homepage juga dapat menentukan mana alternatif terbaik yang akan digunakan.

Hal-hal yang perlu diketahui dalam membuat External Style Sheet:

a. Tag yang digunakan adalah LINK
b. Atribut utama yang digunakan adalah HREF dengan nilai nama External Style Sheet tersebut (misalnya aangstyle.css) atau URL dari file External Style Sheet tersebut.
c. Untuk membuat “Persistent Style Sheet” (Style Sheet yang paten), digunakan atribut tambahan REL dengan nilai stylesheet, tetapi jangan sampai menyertakan atribut TITLE.
d. Untuk membuat “Persistent Style Sheet” (Style Sheet terbaik), digunakan atribut tambahan REL dengan nilai stylesheet, dan atribut TITLE dengan nilai nama tertentu.
e. Untuk membuat “Alternate Style Sheet” (Style Sheet Alternatif), digunakan atribut tambahan REL dengan nilai alternate stylesheet dan atribut TITLE dengan nilai nama tertentu.

Bisa juga ditambahkan atribut lainnya yaitu TYPE dengan nilai, misalnya text/css.

Contoh:

Untuk membuat “Persistent Style Sheet” :

<LINK HREF =”aangstyle.css” REL=”stylesheet” TYPE=”text/css”>
Untuk membuat “Preffered Style Sheet” :

<LINK HREF=”terbaik.css” TITLE=”MEDIUM” REL=”stylesheet” TYPE=”text/css”>
Untuk membuat “Alternate Style Sheet”:

<LINK HREF=”alternatif.css” TITLE=”besar” REL=”alternate stylesheet” TYPE=”text/css”>
Ingat nilai dari HREF=”../style/mystyle.css”> atau

<LINK HREF=http://www.aang.com/mystyle.css REL=”stylesheet” TYPE=”text/css”>
Ingat, bentuk penulisan LINK bisa seperti ini :

<LINKL HREF=”aangstyle.css” REL=stylesheet”>
Namun jangan sekali-sekali manulisnya hanya dengan bentuk seperti berikut :

<LINK HREF=”aangstyle.css”>
Karena, tampilan pada browser nanti, tidak akan sesuai dengan style sheet yang telah didefinisikan. Ini disebabkan karena tidak adanya REL=”STYLESHEET” yang mengakhibatkan browser tidak mengenali adanya Externanal Style Sheet yang dipanggil oleh homepage tersebut.

Cascade Style Sheet (CSS)

By MY BLOGGER7/27/2010Panduan Dasar Lengkap - Dasar Tag HTML Tidak ada komentar:

Dengan style sheet kita dapat memisahkan style (format tampilan) dengan isi dokumen HTML yang sebenarnya. Hal ini dilakukan dengan tujuan kita ingin mengubah tampilan yang ada pada dokumen HTML, kita tidak perlu menggantikan sebagian besar isi source dengan mengotak-atik setuap baris source dokumen HTML yang ingin kita ubah tersebut.

Cukup dengan mengubah definisi style sheet atau dengan membuat style sheet yang baru, Anda akan dapat melakukan dengan cara yanglebih mudah. Jadi style sheet merupakan sarana yang efisien dan fleksibel untuk mengatur tampilan homepage.

Pembuatan homepage dapat memberikan spesifikasi informasi style dari Style Sheet Language yang akan digunakan dalam sebuah dokumen HTML. Untuk itu, sebaiknya digunakan elemen META untuk meletakkan default Style Sheet Language untuk dokumen tersebut.

Contoh untuk deklarasi CSS (Cascading Style Sheet) Language, maka deklarasi formatnya adalah sbb:

<meta http-equiv=”Content-Style-Type” content=”text/css”>

Cara lain untuk mendefinisikan tipe style adalah seperti contoh berikut:

<head>
<style type=”text/css”> … </style>
</head>

Penulisan dengan TYPE seperti ini tidak harus dilakukan, tujuannya adalah untuk bagi browser yang tidak support untuk mengabaikannya.

1 Inline Style Information

Menggunakan atribut STYLE.Atribut ini digunakan untuk mendefinisikan informasi style dokumen HTML untuk sebuah elemen tunggal. Sintaks dari data style tergantung pada Style Sheet Language yang digunakan.

Contoh berikut ini memperlihatkan penentuan informasi warna dan ukuran huruf suatu paragraph tertentu.

<p style=”font-size:12pt; color:blue;”>aang
Dalam CSS format pendeklarasian property style adalah … “nama : nilai” dan diantara property yang satu dengan lainnya dipisahkan dengan tanda titik kome ( ; ).

Atribut style biasa digunakan untuk mengaplikasikan sebagian style pada sebuah dokumen HTML. Jika style ingin digunakan pada beberapa tag lainnya kembali (re-used), pembuat homepage harus menggunakan elemen STYLE untuk mengelompokkan informasi tersebut dalam bentuk header. Agar kemampuan lebih optimal dan fleksibel , pembuat homepage bisa mendefinisikan style pada External Style Sheet (style sheet luar).

2 Header Style Information

Style sheet bias diletakkan di bagian kepala dokumen HTML. HTML mengizinkan elemen-elemen STYLE berada di bagian HEAD maupun di dalam BODY. Imlementasi style sheet kali ini bias diterapkan lebih bervariasi dibandingkan dengan Inline Style Information. Sebagai contoh, pendeklarasian elemen STYLE dalam bentuk header ini digunakan untuk:

1. Hal-hal yang berkaitan dengan sebuah tag spesifik HTML, misalnya pendeklarasian untuk semua tag P atau untuk semua tag H, dsb.

2. Mendefinisikan sebuah tag HTML tertentu yang memiliki nama class spesifik dengan nilai –nilai style sheet tertentu (digunakan untuk mendefinisikan style tag tertentu). Misalnya, atribut CLASS yang berisi nilai-nilai tertentu tersebut digunakan tag P.

Contoh :

p.aang{text-align:center}

maka style ini hanya digunakan oleh

<p class=”aang”>
3. Mendefinisikan sebuah nama identitas spesifik yang memiliki nilai-nilai style sheet tertentu (mendefinisikan tag-tag yang mengandung identitas spesifik tersebut.) Misalnya, atribut ID yang memiliki nilai-nilai tertentu dengan identitas yang khusus pula digunakan oleh tag P dan DIV yang memiliki identitas khusus pula.

Contoh: #aang{teks-align:center;}

maka style ini digunakan oleh tag-tag apapun yang mengandung nama identitas khusus “aang”, misalnya:

3 Memformat tampilan teks dengan CSS

Dengan style sheet kita juga dapat membuat cetak tebal, miring, menentukan jenis dan ukuran huruf, dsb.

1) Menentukan ukuran huruf
Untuk mengatur ukuran huruf dengan menggunakan stle sheet, gunakan perintah font-size dengan nilai tertentu yang mengadung satuan tertentu pula.

Contoh Penulisan:

<p style=”font-size:12pt”> Riskia Meita Sovie </p>
Berarti semua teks yang berada di antara tag <P> dan </P> akan memiliki ukuran huruf 12 point.

Pada contoh tadi kita menggunkaan teknik “Inline Style”. Kita juga bias menggunakan berbagai macam teknik style sheet yang lain. Berbagai macam alternatif penulisan pada style sheet lain :

1. Inline Style :

<p style=”font-size:12pt”>Riskia Meita Sofie </p>
2. Definisikan dulu style sheet pada dokumen HTML tersebut di antara elemen <head></head> maupun anatara <body></body> dengan contoh penulisan seperti ini …

<head>
<style>P{font-size:12;}</style>
</head>
<body>
<p>Riskia Meita Sovie
</body>

3. Dengan menggunakan “External style sheet ( style sheet luar)” yang akan kita pelajari nanti.

4. Ingat juga, pada contoh-contoh yang akan dibuat oleh penulis nanti akan digunakan teknik seperti pada sebelumnya., yaitu mendefinisikan style sheet di antara <style></style> terlebih dahulu.

2) Menentukan bentuk huruf.
Ada berbagai macam bentuk huruf seperti Courier new, Arial, Verdana, Times New Roman , dan masih banyak lagi yang lainnya. Pada pembuatan Homepage, jika kita tidak menentukan jenis huruf pada source HTML-nya, bentuk huruf yang akan ditampilkan nanti akan sesuai dengan bentuk huruf default browser yang telah ditetapkan sebelumnya. Bagaimana kita mengaturnya dengan style sheet? Gunakan perintah style sheet front-family.

Perhatikan contoh berikut ini

p{font-family:arial;}
div{font-family:”times new roman”;}
Jika bentuk huruf yang digunakan terdiri atas beberapa kata seperti “times new romwn”, “arial black”…”. Jika hanya terdiri atas satu kata saja seperti “arial”, “verdana”, dan lain-lain, Anda boleh menggunakan tanda kutip tersebut boleh juga tidak.

3) Menentukan Jenis cetakan huruf .
Jenis cetakan ada bermacam-macam, antara lain, cetakan tebal, cetakan miring, bergaris bawah, ada garis diatasnya dan teks yang tercoret garis lurus.

Perintah style sheet yang digunakan adalah Cetakan miringfont-style:italic; Cetakan tebeal font-weight:bold; Bergaris bawah text-decoration:underline; Ada garis diatas teks text-decoration:overline; Teks tercoret garis lurus text-decoration:line-through;

4) Menentukan warna huruf
Perintah style sheet yang digunakan untuk menentukan warn ahuruf yang digunakan adalah color. Nilai dari perintah itu bias berupa namawarna dalam bahasa inggris seperti “white”, “black”, :red”, “green”, dan sebagainya.

Perhatikan contoh berikut ini.

<style>
div.merah{color:red;}
</style>
<div class=”merah”>
semua teks yang berada pada daerah ini akan berwarna merah
</div>

5) Mengatur jarak baris antar daerah teks
Kita juga bias mengatur jarak baris antar daerah teks tertentu, misalnya antarparagraf, dengan menggunakan style sheet. Perintah yang digunakan adalah line-height, dengan nilai berupa angka disertai dengan satuan ukuran tertentu. Perhatikan contoh berikut ini:

<style>
p{line-height:1 cm;}
</style>
<P>
ini paragraph kedua … dan jarak antara paragraph Saturday dan dua adalah sebesar 1 cm
6) Mengatur perataan teks
Blok-blok teks tertentu, kita biasa menentukan jenis peralatan teksnya, seperti teks rata kiri, rata kanan, dan teks yang ditengah-tengah. Dalam style sheet digunakan perintah text-align untuk menentukan jenis perataan teks tersebut.

Nilai-nilainya adalah left (rata kiri), right (rata kanan), justify (rata kanan dan kiri), dan center ( teks ditengah-tengah). Perhatikan contoh berikut ini.

<style>
div.rata_kanan{teks-align:right;}
</style>
<div class =”rata_kanan”>semua teks yang berada pada daerah ini akan rata kanan

</div>

7) Membuat jarak spasi masuk pada awal paragraph
Untuk menentukan indentasi, yaitu membuat jarak spasi pada awal paragraph (baris yang masuk ke dalam atau seperti fungsi tombol <TAB>) digunakan atribut text-indent. Satuan yang digunakan oleh atribut-atribut ini sama seperti satuan-satuan yang telah kita ketahui sebelumnya, sepertipixel (px), centimeter (cm), point (pt) dan sebagainya. Perhatikan contoh berikut ini:

<style>
p.masuk_5 cm{text-indent:5 cm;}
</style>
<p class=”masuk_5 cm”>
paragraph ini memiliki jarak masuk awal sebesar 5 cm di awal paragraph…
8) Mengatur batas tepi (margin)
Pada pembuatan homepage, kita juga perlu mengatur margin dari halaman homepage tersebut untuk memeindah tam,pilan. Dalam style sheet, untuk mengatur margin digunakan empat macam atribut, antara lain:
margin-top untuk mengatur batas tepi atas margin-right untuk mengatur batas tepi kanan margin-bottom untuk mengatur batas tepi bawah margin-left untuk mengatur batas tepi kiri

Semua batas tersebut adalah relatif, maksudnya jika kita besarkan maupun kita kecilkan layar browser, dan style sheet telah menentukan batas tepi kiri 3 cm dan tepi kanan 3 cm, tampilan akan selalu berusaha menyesuaikan agar kondisi tetap bertahan.

Contoh penulisan :

BODY{ margin-top:4 cm;
margin-right : 3 cm;
margin-bottom : 3 cm;
margin-left : 4 cm; }

Penentuan batas-batas tepi (margin) tersebut bias disederhanakan. Kita tidak perlu lagi menulis margin top, margin-right, dan sebagainya. Dengan atribut margin, kita dapat menyederhanakan bentuk penulisan tersebut.

Oleh karena itu, pada contoh sebelumnya kita bias menggantinya dengan penulisan :

BODY{margin: 4 cm 3 cm 3 cm 4 cm;}
Kita lihat urutan nilai atribut margin. Dari kiri ke kanan menunjukkan urutan margin-top, margin-right, margin-bottom, margin-left.

Jika penulisannya hanya terdiri atas satu nilai batas, nilai batas lainnya secara otomatis akan dibuat sama. Jika terdiri atas dua atau tiga nilai batas, nilai-nilai batas yang berlawan (atas dengan bawah, kiri dengan kanan) akan sama.

Contoh:

{margin: 1 cm 2 cm 3 cm;}

Berati batas atas 1 cm, batas kanan akan sama dengan batas kiri yaitu 2 cm, dan batas bawah 3 cm.

9) Membuat tampilan border
Border merupakan pembatas suatu daerah /blok tertentu. Dalam hal ini, pembatas tertentu. Dan, daerah/blok tertentu . Dalam hal ini, pembatas tersebut berupa garis. Dan, daerah/blok tertentu yang dibatasi oleh border
tersebut adalah daerah yang berada di dalam tag-tag blok seperti P, DIV, dan sebagainya.

Atribut-atribut yang berkaitan dengan pembuatan border:

a. Border, untuk mendefinisikan ada tidaknya garis pembatas. Nilai yang diberikan adalah none (tidak ditampakkan border/garis pembatasnya), solid (garis pembatasnya berupa garis tebal dengan ukuran default), solid thin (garis pembatasnya lebih tipis daripada solid).

b. border-width, untuk menetukan ukuran tebal garis pembatas. Satuan digunakan adalah satuan-satuan dalam dalam HTML seperti px, cm, mm dan sebagainya.

c. background, untuk memberikan latar belakang pada daerah yang dibatasi oleh border tersebut. Latar belakang ini bisa berupa warna maupun gambar. Untuk membuat latar belakang berupa warna, nilai background adalah nama warna atau kode warna RGB heksadesimal . Sedangkan untuk membuat latar belakang berupa gambar, nilai background adalah URL (`nama atau URL gambar yang digunakan sebagai latar belakang’).

d. margin, untuk mendefinisikan batas-batas wilayah border relatif terhadap wilayah tag-tag blok yang digunakan dimana tag-tag blok melingkupi wilayah border tersebut. Selain itu, kita juga bisa menggantikan margintop, margin-right, margin-bottom, dan margin left.

e. padding, untuk mmendefinisikan jarak antara isi border dengan garis pembatasnya. Nilai yang diberi satuan seperti px, cm, mm dan sebagainya.

Bentuk dan aturan penulisannya tidak jauh berbeda dengan bentuk dan aturan penulisan margin yang sederhana. contohnya

{padding: 20px 20px 10px 10px; },
dengan urutan top right bottom left. Selain itu, terdapat atribut lain yang bisa digunakan yaitu padding-top, padding-right. padding-bottom, paddingh-left yang digunakan untuk mendefinisikan padding di satu sisi saja.

f. blockquote mertupakan tag blok yang penulisannya dalam bentuk indetasi (masuk ke dalam) dan biasa digunakan untuk pembuatan kutipan. Berbeda dengan p, walaupun keduanya sama-sama tag blok, pada
BLOCKQUOTE pada umu mnya bisa berisi tag-tag blok yang lain (pada div juga demikian), sedangkan pada p perlakuan seperti itu jarang dilakukan. Jadi pada BLOCKQUOTE bisa saja terjadi.

<BLOCKQUOTE>
<p>…</p>
<BLOCKQUOTE>…</BLOCKQUOTE>
</BLOCKQUOTE>

INPUT tag

By MY BLOGGER7/24/2010Panduan Dasar Lengkap - Dasar Tag HTML Tidak ada komentar:

Fungsi: mengumpulkan informasi isian dari pengguna Atribut INPUT

• ALIGN: dipakai bersama file gambar (image). Nilai-nilai yang mungkin adalah TOP, MIDDLE ,BOTTOM.
• CHECKED: menempatkan posisi awal dari tipe isian CHECKBOX dan RADIO
• MAXLENGTH: jumlah maksimal karakter yang dapat diisikan
• NAME: nama dari variabel input yang dipakai ketika memproses form
• SIZE: ukuran tampilan. Jika SIZE<MAXLENGTH maka isian bisa digulung(scroll).
• SRC: sumber file gambar/image
• TEXT: satu baris isian teks. Untuk isian banyak baris, dapat dipakai TEXTAREA.
• TYPE: tipe dari INPUT. Dapat berupa

   o CHECKBOX: cawang ( ), dapat memilih lebih dari satu.
   o HIDDEN: tersembunyi. Isian variabel tidak dapat diubah oleh pengguna.
   o IMAGE: setelah pengguna mengklik gambar IMAGE ini, maka form akan di-submit

(dikumpulkan/dikirim) ke server web / blogspot. Pasangan data posisi x dan y kursor sewaktu mengklik,

juga ikut dikirimkan.

o PASSWORD: isian teks, namun ketika pengguna mengisi, tidak ditampakkan ke layar (biasanya tampilan

berupa asterik *)
o RADIO: berfungsi untuk menawarkan beberapa alternatif yang hanya dapat dipilih satu item saja oleh

   pengguna.
   o RESET: kalau di-klik akan mereset data-data di dalam form ke nilai asal (default)
   o SUBMIT: jika di-klik akan mengirimkan data-data isian form ke server web / blogspot untuk diproses.
   o TEXT: satu baris isian teks.

• VALUE: menentukan nilai default dari isian

OPTION tag, SELECT tag, TEXTAREA tag

By MY BLOGGER7/24/2010Panduan Dasar Lengkap - Dasar Tag HTML Tidak ada komentar:

OPTION tag

Atribut OPTION:

• SELECTED: menunjukkan posisi terpilih awal dari alternatif-alternatif yang ditawarkan
• VALUE: nilai dari alternatif

SELECT tag
Atribut SELECT:

• MULTIPLE: jika tidak didefinisikan maka pengguna hanya bisa memilih satu.
Tetapi bila didefinisikan MULTIPLE, maka pengguna boleh memilih lebih dari satu.
• NAME: nama variabel untuk select ini.
• SIZE: ukuran tampilan.

TEXTAREA tag
Memungkinkan pengguna mengisi lebih dari satu baris teks. Atribut TEXT AREA adalah :

- COLS: jumlah kolom tampilan
- NAME: nama variabel TEXTAREA ini
- ROWS: jumlah baris tampilan

FRAME tag

By MY BLOGGER7/24/2010Panduan Dasar Lengkap - Dasar Tag HTML Tidak ada komentar:

Dibahas di sini lebih karena untuk diketahui. Elemen-elemen frame:

a. FRAMESET
b. FRAME
c. NOFRAMES

a. Atribut FRAMESET i. COLS: besar kolom frame
ii. ROWS: besar baris frame
iii. Angka di belakang COLS atau ROWS dapat berupa angka biasa dalam satuan pixel, atau prosentase. Jika berupa *, maka berarti sisa ruangan akan ditempati oleh frame.

b. Atribut FRAME i. MARGINHEIGHT: tinggi batas tepi frame
ii. MARGINWIDTH: lebar batas tepi frame
iii. NAME: nama frame, yang dapat dipakai dalam penunjuk URL
iv. NORESIZE: menunjukkan frame tidak dapat diubah ukurannya. Normalnya, pengguna dapat mengubah besar kecil sebuah frame.
v. SCROLLING: bisa berisi YES, AUTO atau NO, yang menentukan apakan tombol scroll dapat dipakai oleh pengguna atau tidak.
vi. NOFRAMES dipakai untuk menampilkan pesan bagi browser yang tidak mendukung pemakaian frame.

c. Atribut TARGET i. _BLANK: bila diklik akan menampilkan dokumen Web / blogspot di jendela browser baru.
ii. NAME: nama frame yang akan dibuka sebagai dokumen target
iii. _PARENT: dokumen akan ditampilkan di dalam bingkai induk.
iv. _SELF: dokumen akan ditampilkan di dalam bingkai ini.
v. _TOP: dokumen akan ditampilkan di seluruh jendela browser ini.

Dapat dipakai elemen BASE untuk mendefinisikan setiap link agar diberi harga tertentu, misal TARGET=_BLANK

Form tag

By MY BLOGGER7/24/2010Panduan Dasar Lengkap - Dasar Tag HTML Tidak ada komentar:

Form tag

Form digunakan untuk mengumpulkan jawaban dari pengunjung web / blogspot, melalui sebuah antarmuka berbasis Web / blogspot yang terdiri dari blok isian teks, radio box, check box, list box, password, dan sebagainya. Setelah pengguna mengisikan data-datanya, form dapat di-SUBMIT yang kemudian diproses oleh sebuah program (yang dapat berupa ASP ataupun CGI) .

Sebuah form HTML memiliki bentuk dasar sbb:

<FORM Action="URL_aksi.ASP" Method="POST">
</FORM>

• Action menunjukkan program atau halaman yang akan memproses kiriman data hasil isian dari form HTML tersebut.
• Method menunjukkan bagaimana cara data-data isian form HTML tersebut dikirimkan ke server. Ada dua method yang umum yaitu GET dan POST.

Elemen-elemen form:

• INPUT
• SELECT
• OPTION
• TEXTAREA

Dasar Tag Hypertext Markup Language HTML

By MY BLOGGER7/24/2010Panduan Dasar Lengkap - Dasar Tag HTML Tidak ada komentar:

Hypertext Markup Language (HTML)

Dokumen HTML merupakan sebuah file teks. Karena hanya berisi teks, makadokumen HTML menjadi sangat sederhana, sehingga mudah untuk ditransfer ke sebuah jarungan internet. Namun karena sederhana, HTML memiliki kelemahan, salah satunya adalah Kita harus mengetikkan sendiri semua kode HTML jika ingin membuat sebuah halaman web / blogspot. Memang sekarang telah banyak beredar HTML editoryang dapat membantu Kita dalam membuat sebuah halaman web / blogspot tanpa menyentuh kode HTML sama sekali., namun dalam pengembangan halaman web / blogspot denganmenggunakan bahasa script seperti VBScript dan Java Script, pengetahuan mengenaiHTML harus mutlak diperlukan, karena Kita harus tahu dengan pasti di mana harusmenyisipkan script yang diinginkan dalam HTML.

Untuk menuliskan HTMLVBScript dan JavaScript dapat menggunakan teks editor sederhana, seperti Notepad atau EditPad.

Sebuah dokumen HTML berisi elemen-elemen kode HTML yang disebut HTML Tag. Penulisannya diapit oleh apa yang disebut delimiter (pembatas).Delimiter adalah suatu karakter atau kumpulan karakter yang mengawali dan mengakhiri suatu tag.
Untuk HTML delimiter yang dipakai adalah dengan karakter < dan > . Sebuah kode program HTML selalu diawali dan diakhiri dengan sebuah tag.

Tag pada awal kode disebut opening tag, dan pada akhir kode disebut ending tag. Ending Tag ditandai dengan karakter/ diikuti dengan opening Tag.

Contoh tag :

<HTML> -----Kode program. </HTML>

Sebuah dokumen HTML dibagi menjadi 2 bagian yaitu body (badan) dan head (kepala). Bagian head ditkitai dengan tag <HEAD> sedangkan bagian body ditandai dengan tag <BODY>. Bagian head digunakan untuk menyimpan informasi mengenai dokumen tersebut , misalnya judul, nama penulis, komentar-komentar ,dan lain-lain.

Sedangkan bagian body digunakan untuk menuliskan isi utama dari dokumen web / blogspot tersebut.

Contoh dari tag dokumen web / blogspot sederhana :

<HTML>
<HEAD><H1>Belajar BLOGSPOT dasar</H1>
</HEAD>
<BODY> Selamat datang ke belajar blogspot dasar. </BODY>
</HTML>

Berikut ini adalah beberapa tag dasar yang penting dari HTML (penulisan tidak case sensitive, boleh huruf besar atau kecil.)

1. <HTML> … </HTML>.
Menjelaskan bahwa teks file adalah merupakan HTML format. Diletakkan pada awal dan akhir dari setiap halaman web.

2. <HEAD> … </HEAD>
Diantaranya adalah area dari heading halaman. Digunakan untuk script/perintah khusus yang tidak mempunyai hubungan dengan format dari halaman.

3. <TITLE> … </TITLE>
Memberi judul yang ditampilkan pada ujung kiri atas dari browser window.

4. <BODY> … </BODY>
Setelah tag <HEAD> dan digunakan untuk area dimana yang dilihat adalah merupakan tampilan dari web/ isi dari halaman. Pada tag <BODY> di dalamnya dapat ditambahkan beberapa atribut seperti tampak di bawah ini
o bgcolor=”…” memberikan warna latar/ background halaman.
o text=”…” memberikan warna tulisan / teks.
o link=”…” memberikan warna pada hyperlinks (link halaman)
o vlink=”…” memberi warna pada hyperlink yang telah dimasuki/ diklik.
o alink=”…” memberi warna pada link yang aktif.
Warna yang diberikan merupakan kode hexadecimal .
contoh
#000000 warna putih,
#FF0000 warna merah,
#00FF00 warna hijau dan
#0000FF warna biru.

5. <B> … </B>
Membuat tulisan tebal (Bold Text )

6. <P> … </P>
Merupakan perintah paragraph yang termasuk diantaranya pengaturan posisi tulisan, indentansi dan jarak. Antara lain seperti berikut

<P ALIGN=”left”> … </P> untuk pengaturan paragraph rapat kiri (left)
<P ALIGN=”center”> … </P> untuk pengaturan paragraph di tengah (center)
<P ALIGN=”right”> … </P> untuk pengaturan paragraph rapat kanan (right)
<P NOWRAP> … </P> untuk membuat penulisan paragraph tanpa pemotongan batas pinggir halaman untuk berganti baris, dan hanya bisa berganti baris dengan tag <BR>

7. <BR>
Untuk memberikan baris baru / pergantian baris. Diletakkan pada bagian teks yang mau berganti baris.

8. <A> …. </A>

Membuat link antar dua halaman web. Tag <A> adalah merupakan tag penghubung (anchor tag). Biasanya dituliskan dengan <A HREF link file > …</A>. Tatacara penulisan letak file ini juga bergantung dari letak filenya dimana. Untuk itu disini akan dijelaskan beberapa cara penulisan letak relative dari link file sbb( file web referensi adalah file dimana kita menuliskan link halaman) :

o HREF=”file.html” file.html terletak di direktori yang sama dengan file web referensi.
o HREF=”dir/file.html” letak file.html di dalam direktori dir dan direktori dir terletak pada direktori yang sama dengan file web referensi
o HREF=”dir/dir2/file.html” letak file.html di dalam direktori dir2 dimana direktori ini di dalam direktori dir.
o HREF=”../file.html” letak file.html di direktori yang berada satu level di atas direktori posisi file web referensi sekarang.
o HREF=”../../dir/file.html” letak file.html pada dua level di atas.

Untuk beberapa tambahan pada penulisan alamat adalah sbb:
o <A HREF=mailto:email@yahoo.com> … <A>
Penulisan seperti ini adalah untuk memberikan link email dari seseorang/ perusahaan.
o <A HREF=http://www.satu.com> … <A> Memberikan link ke website lainnya.
o <A NAME=”nama”> dan <A HREF=”#nama”> … <A>

Kedua tag di atas memberikan hubungan saling terkait, dimana jika kita meletakkan tag pertama di atas dari halaman (top) dan tag kedua merupakan link yang diletakkan pada paling bawah halaman sendiri, jika link diklik, maka posisi kursor langsung menuju pada letak pemberian tag pertama. Hal ini biasa dibuat untuk membuat link ke atas dan ke bawah dari satu halaman.

9. <IMG SRC=”gambar.jpg” … >…</IMG>
Jika Anda ingin meletakkan gambar / file photo di web Anda, maka dapat dilakukan dengan memberikan tag ini. Perlu diingat bahwa tag ini juga mempunyai beberapa atribut yang dituliskan di belakang keterangan nama file seperti:

o width=”...” memberikan lebar dari gambar.
o height=”…” tinggi dari gambar.
o border=”…” memberikan ketebalan dari bingkai gambar.
o alt=”…” memberi nama dari gambar.
o align=”…” memberikan posisi dari gambar.

Pemberian link web/ dokumen dengan gambar juga bisa dilakukan.Contohnya jika kita mempunyai file gambar : web.gif dan kita ingin membuat link dengan file tersebut. Maka cara penulisannya adalah dengan :

<A HREF=”link.html’>
<IMG SRC=”web.gif” WIDTH=”50” HEIGHT=”50” BORDER=”1” ALT=”web”>
</A>

Jenis file yang dipakai bisa berupa file bmp, gif dan jpg.

10. Pengaturan bentuk, ukuran, dan warna tulisan.

11. <OL>… </OL> , <UL>… </UL>dan <LI>… </LI>

Biasanya untuk membuat list / memberikan penomoran langsung pada list baris. Contohnya

<ol>
<li>List item #3</li>
<li>List item #4</li>
</ol>
akan tampak seperti berikut :

1. List item #1
2. List item #2
3. List item #3
4. List item #4

Selain itu dapat juga dengan mengganti tag <OL> dengan <UL> maka akan tampak seperti berikut :

• List item #1
• List item #2
• List item #3
• List item #4

12. <HR>
Pemberian tag ini bertujuan untuk membuat garis horizontal pada dokumen web. Dapat diberikan attribute seperti pada atribut gambar/ image.

13. Tag Tabel.
Untuk membuat tabel di dokumen web dapat dilakukan dengan memberikan tag-tag Tabel. Dalam tag-tag tabel ini terdiri dari beberapa tag seperti contoh berikut.

Maka tag yang harus ditulis adalah sbb:

<table border="1">
<tr> 
<td>Sel 1, baris 1</td>
<td>Sel 2, baris 1</td>
<td>Sel 3, baris 1</td>
<td>Sel 4, baris 1</td>
</tr> 
<tr> 
<td>Sel 1, baris 2</td>
<td>Sel 2, baris 2</td>
<td>Sel 3, baris 2</td>
<td>Sel 4, baris 2</td>
</tr> 
</table>

Pemberian Tag  adalah sebagai pemberian komentar pada pengkodean dengan tujuan mempermudah pengecekan baris script.

Penulisan dari tag table adalah diawail dengan tag <table> dan untuk memberikan sel pertama dengan tag <td>, sedangkan untuk ganti baris dengant tag <tr>

14. 
Tujuannya memberikan komentar terhadap dokumen dan membantu pengecekan dokumen.

Berita Blog Hari Ini

ads

10/14/2024

Dikecualikan oleh tag ‘noindex’

7/27/2010

Cascade Style Sheet (CSS) - 2

Cascade Style Sheet (CSS)

7/24/2010

INPUT tag

OPTION tag, SELECT tag, TEXTAREA tag

FRAME tag

Form tag

Dasar Tag Hypertext Markup Language HTML