Young Enterpreneur

Young Enterpreneur

Kamis, 12 Maret 2015

Belajar HTML bagi pemula

HTML Pendahuluan
Apa itu HTML?
HTML adalah bahasa markup untuk menggambarkan dokumen web (halaman web).

HTML singkatan dari Hyper Text Markup Language
Sebuah bahasa markup adalah seperangkat tag markup
Dokumen HTML dijelaskan oleh tag HTML
Setiap tag HTML menjelaskan isi dokumen yang berbeda


Sama seperti "ikuti bola memantul", power up Notepad dan mulai dengan ini ...

<Html>
</ Html>
Masing-masing dari mereka disebut tag. Ada tag awal dan tag penutup. Untuk membuat tag penutup hanya menambahkan / tag awal. Kebanyakan, tetapi tidak semua tag memiliki tag penutup. Pikirkan tag sebagai melampirkan sedikit teks untuk browser untuk menafsirkan. Browser akan menafsirkan segala sesuatu antara <html> dan </ html> sebagai dokumen HTML. Tag yang berbeda diinterpretasikan dengan cara yang berbeda oleh browser. Mari kita lanjutkan ...

Setiap dokumen HTML membutuhkan sepasang tag kepala.

<Html>
<Head>
</ Head>
</ Html>

Satu-satunya hal yang kita harus menyibukkan diri dengan dalam tag kepala (untuk saat ini) adalah tag judul.

<Html>
<Head>
<Title> </ title>
</ Head>
</ Html>

Dan sebagian besar halaman tersebut akan berada dalam tag body.

<Html>
<Head>
<Title> </ title>
</ Head>
<Body>
</ Body>
</ Html>

Oh, dan satu hal lagi, memberikan dokumen Anda judul, dan memasukkan sesuatu ke dalam tubuh.

<Html>
<Head>
<Title> ole halaman buruk besar saya! </ Title>
</ Head>
<Body>
Hello Joe!
</ Body>
</ Html>


di sini mungkin datang suatu waktu ketika Anda ingin menambahkan daftar ke halaman web, atau mungkin tidak, tapi hanya dalam kasus di sini adalah bagaimana membuat daftar. Sebuah daftar dimulai dan diakhiri dengan "unordered" daftar tag:
<ul> </ ul>

The ul singkatan dari "daftar unordered", itu akan membuat Anda bulet teks, Anda tahu, titik di samping teks. Tag ul pembuka mulai daftar dan tag ul penutupan berakhir daftar, di antara berjalan teks dikelilingi oleh pembukaan dan penutupan "daftar item" tag:

<li> </ li>
contoh:

<ul>

<li> Beagle </ li>
<li> Terrier </ li>
<li> Chihuahua </ li>
</ ul>


Menceritakan Tag Apa yang Harus Dilakukan
Kita dapat mengubah cara tag display hal pada halaman web dengan menempatkan apa yang disebut "atribut" menjadi tag pembuka. Banyak hal yang dilakukan dengan attibutes sekarang dilakukan dengan CSS, sehingga pelajaran ini akan menunjukkan cara untuk menempatkan kode CSS ke dalam tag dengan menggunakan atribut style:


<Style h1 = "text-align: center;"> My Webpage </ h1>
Pekerjaan gaya atribut adalah untuk menahan kode CSS, itulah hal-hal dalam tanda kutip. Dalam contoh di atas itu mengatakan tag h1 untuk pusat teks pada halaman web. Perhatikan bahwa ada usus antara text-align dan pusat dan pada akhir pusat ada titik koma. Ini adalah bagaimana perintah CSS yang terstruktur.

Teks dalam contoh kita selanjutnya dapat diubah dengan menambahkan perintah CSS lain untuk atribut style:

<Style h1 = "text-align: center; color: red;"> My Webpage </ h1>
Hasilnya akan menjadi teks merah berpusat pada halaman web. Jumlah yang tidak terbatas perintah CSS dapat ditambahkan ke atribut style selama mereka tertutup antara tanda kutip dan setiap perintah diakhiri dengan titik koma.

Atribut style dapat dimasukkan ke dalam setiap tag pembuka untuk mengubah beberapa aspek tag, misalnya bila digunakan dengan tag body, semua teks pada halaman web dapat ditampilkan dalam font yang berbeda:

<Style body = "font-family: arial;">
Perintah font-family mengubah font teks, dalam contoh ini ada di style.Adding Arial perintah background CSS dalam tag body mengubah halaman warna latar belakang:

<Style body = "background: red;">

Itu akan memberikan halaman web Anda latar belakang merah (Anda tidak benar-benar ingin halaman web merah kan?). Warna dapat ditentukan dengan baik menggunakan nama warna atau kode warna, misalnya # ff0000 adalah kode warna merah:

<Style body = "background: # ff0000;">
Nomor tanda, # harus dimasukkan di depan kode ketika menentukan warna dengan kode warna mereka.

Mengubah Ukuran Font
Mengubah ukuran teks dengan mudah dengan perintah CSS font-size:

<Em style = "font-size: 40px;"> saya lebih besar </ em> dari Anda


Membuat sebuah situs web tidak lengkap tanpa menambahkan grafis agar terlihat bagus dan cantik. Menempatkan gambar pada halaman web dilakukan dengan tag img. Tag img adalah tag tunggal sehingga tidak memerlukan tag penutup:
<Img src = "filename.jpg">

Img singkatan "image", src adalah atribut, ia memberitahu browser mana untuk menemukan gambar. Hal-hal di tanda kutip adalah nama file grafis, ganti filename.jpg dengan nama file gambar Anda dan pastikan itu adalah antara tanda kutip.

Catatan
Nama file gambar juga harus menyertakan format, misalnya jpg seperti dalam contoh di atas. Lebih lanjut tentang format gambar kemudian dalam pelajaran ini.

Untuk menjaga hal-hal sederhana, untuk saat menyimpan gambar di tempat yang sama sebagai halaman web Anda, misalnya jika Anda menyimpan file HTML Anda dalam folder bernama "halaman saya", menempatkan gambar Anda di sana juga.

Setiap gambar pada halaman web memiliki tag img sendiri:

<Img src = "button.gif">
<Img src = "button2.gif">

Itu akan menempatkan dua gambar berdampingan di halaman:

 tombol biru muda
Jika tag img tertutup antara pembukaan dan penutupan p tag, gambar lain akan dimulai pada baris baru:

<P> <img src = "button.gif"> </ p>
<Img src = "button2.gif">

Hasil:




Berikan gambar deskripsi dengan menambahkan atribut alt tag img seperti:

<Img src = "button2.gif" alt = "tombol biru muda">
Atribut alt akan membuat deskripsi muncul jika browser tidak menampilkan gambar. Dalam beberapa browser deskripsi juga akan muncul ketika pointer mouse digerakkan di atas gambar.

Format Gambar
Gambar di web biasanya baik dalam gif atau format jpg. Format gif banyak digunakan untuk gambar dengan blok yang solid warna seperti grafik, atau ketika gambar membutuhkan latar belakang transparan. Format jpg cocok untuk gambar dengan perubahan warna halus seperti foto.
Selain format yang tepat, gambar pada situs web juga perlu dioptimalkan, yaitu, ukuran file gambar itu perlu diturunkan sehingga tidak akan memakan waktu terlalu lama untuk load. Untuk info lebih lanjut lihat Mengoptimalkan Graphics.
: