17 September 2013

HTML dan CSS

ASSALAMUALAIKUM YA KULUHUM...
Alhamdulillah saya sudah memasuki semester 3(tiga) sekarang....
Hem akhirnya saya mempelajari tentang Web pemrograman nih sobat...
Sebenarnya sih saya suka sekali belajar mengenai web... jadi web bukan hal asing buat saya...
Untuk share saya kali ini saya akan menjelaskan konsep dasar Web pemograman... saya ingin menerangkan sedikit tentang HTML...
HTML sendiri sebenarnya bukan sebuah bahasa pemograman ya kawan... dia sejenis apa ya sebutannya... heheh sampai saya bingung menjelaskannya.. wkwkwk...

Back to the topic

HTML sendiri adalah Kepanjangan dari Hypertext Markup Language. HTML atau Hypertext Markup Language adalah bahasa untuk menggambarkan struktur halaman Web.

HTML memberikan penulis sarana untuk:

  • Mempublikasikan dokumen online dengan judul, teks, tabel, daftar, foto, dll
  • Desain bentuk untuk melakukan transaksi dengan layanan jarak jauh, untuk digunakan dalam mencari informasi, membuat reservasi, memesan produk, dll
  • Mengambil informasi online melalui hypertext link, di klik tombol.
  • Sertakan menyebar-lembaran, klip video, klip suara, dan aplikasi lainnya secara langsung dalam dokumen mereka.
Dengan HTML, penulis menggambarkan struktur halaman menggunakan markup. Para elemen dari potongan-potongan label bahasa konten seperti "ayat," "daftar," "tabel," dan seterusnya.
Setiap dokumen HTML membutuhkan sebuah judul. Berikut adalah apa yang Anda butuhkan untuk mengetik:
<title> dokumen HTML saya yang pertama </title>


Mengubah teks tersebut "Dokumen HTML pertama" sesuai kebutuhan Anda sendiri. Teks judul didahului oleh tag awal <title> dan berakhir dengan tag akhir pencocokan </title>. Judul harus ditempatkan pada awal dokumen kamu sobat.

Jika sobat telah menggunakan Microsoft Word, sobat akan terbiasa dengan built in gaya untuk heading dengan tingkat kepentingan yang berbeda. Dalam HTML ada enam tingkat dari pos. H1 adalah yang paling penting, H2 adalah sedikit kurang penting, dan begitu seterusnya sampai ke H6, yang paling penting.
Berikut adalah cara untuk menambahkan pos penting:

<h1> pos penting </ h1>
dan di sini adalah sebuah heading yang sedikit kurang penting:
<h2> sedikit kurang penting menuju </ h2>
Setiap paragraf yang Anda tulis harus diawali dengan tag <p>. The </ p> adalah opsional, tidak seperti tag akhir untuk elemen seperti judul. Sebagai contoh:
<p> Ini adalah paragraf pertama. </p>

<p> ini adalah paragraf kedua. </p>

Menambahkan sedikit penekanan kamu dapat menekankan satu atau beberapa kata dengan tag <em>, misalnya:
Ini adalah menarik </em> topik yang sangat <em>!

menambahkan bunga ke halaman kamu dengan gambar.
Cara sederhana untuk menambahkan sebuah gambar menggunakan tag <img>. Mari kita asumsikan sobat memiliki file gambar yang disebut "russ.jpg" dalam sebuah folder / direktori sama seperti file HTML kamu.Ini adalah 200 piksel lebar tinggi 150 piksel.

<Img src = "russ.jpg" width = "200" height = "150"
alt = "ini saya russ">



Fungsi atribut alt untuk memberikan deskripsi singkat mengenai gambar sobat. Sobat juga bisa menambahkan hal berikut menggunakan atribut seperti contoh dibawah ini:


<Img src = "russ.jpg" width = "200" height = "150"
alt = "ini saya russ" longdesc = "russ.html">

TTiga jenis daftar

HTML mendukung tiga jenis daftar. Jenis yang pertama adalah daftar bulletted, sering disebut unordered list . Ia menggunakan tag <ul> dan <li>, misalnya:
<ul>
  <li> item daftar pertama </li>

  <li> item daftar kedua </li>

  <li> item daftar ketiga </li>
</ Ul>
Perhatikan bahwa sobat selalu perlu mengakhiri daftar dengan </ul> akhir tag, tetapi bahwa </li> adalah opsional dan dapat di hiraukan. Jenis daftar kedua adalah daftar dengan nomor, yang sering disebut daftar memerintahkan . Ia menggunakan tag <ol> dan <li>. Sebagai contoh:

<ol>
  <li> item daftar pertama </ li>

  <li> item daftar kedua </ li>

  <li> item daftar ketiga </ li>
</Ol>
Seperti daftar bulletted, ingat sobat kita harus selalu mengakhiri daftar dengan </ol> tag akhir, tapi </li> tag akhir adalah opsional dan dapat di hiraukan. Yang ketiga, dan terakhir dari daftar adalah daftar definisi. Hal ini memungkinkan kamu untuk daftar istilah dan definisi mereka. Daftar ini dimulai dengan tag <dl> dan diakhiri dengan </dl> Setiap istilah dimulai dengan tag <dt> dan setiap definisi dimulai dengan <dd>. Sebagai contoh:

<dl>
  <dt> istilah yang pertama </dt>
  <dd> penjelasannya </dd>

  <dt> istilah kedua </dt>
  <dd> penjelasannya </dd>

  <dt> istilah ketiga </dt>
  <dd> penjelasannya </dd>
</Dl>
Akhir tag </ dt> dan </ dd> merupakan opsi dan dapat diabaikan. Perhatikan bahwa daftar ini bisa saling disisipkan, satu dalam yang lain. Sebagai contoh:

<ol>
  <li> item daftar pertama </li>

  <li>
    item daftar kedua
    <ul>
      <li> Item bersarang pertama </li>
      <li> item yang bersarang kedua </li>
    </Ul>
  </Li>

  <li> item daftar ketiga </li>
</Ol>
Kamu juga dapat menggunakan paragraf dan judul dll untuk daftar item lagi.

HTML memiliki kepala dan tubuh

Jika sobat menggunakan fitur sumber tampilan web browser kamu (lihat Lihat atau menu File) kamu dapat melihat struktur dari halaman HTML. Dokumen umumnya dimulai dengan deklarasi yang versi HTML telah digunakan, dan kemudian diikuti oleh tag <html> diikuti oleh <head> dan pada akhir oleh </ html>. The <html> ...</ Html> bertindak seperti sebuah wadah untuk dokumen. <head> ... </Head> mengandung judul, dan informasi di style sheet dan skrip, sementara <body> ini ... </Body> mengandung markup dengan konten yang terlihat. Berikut adalah template Anda dapat copy dan paste ke text editor anda untuk membuat halaman Anda sendiri:
! <DOCTYPE html PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
    "Http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> ganti dengan judul dokumen anda </title>
</Head>
<body>

ganti dengan isi dokumen Anda

</Body>
</Html>

wahhhhh klo jelasin satu persatu banyak banget yah... hehehehe
sobat cari sendiri yah... pokoknya semoga postingan saya kali ini bermanfaat...
Sukron....

Tidak ada komentar:

Free Blooming Red Rose Cursors at www.totallyfreecursors.com