Nawi Web

" Tutorial Perancangan Web Dasar untuk Pemula "

Minggu, 26 April 2015

Belajar HTML

08.00 Posted by Nawi No comments
Apa itu HTML?
  • Singkatan dari HyperText Markup Language
  • Menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen
  • HTML digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen
  • Tag-tag utama dalam dokumen HTML adalah <head> dan <body>. 
  • <head> digunakan untuk memberikan informasi mengenai dokumen HTML, seperti TITLE, TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE dan META.
  • <body> digunakan untuk menyimpan informasi atau data yang akan ditampilkan di dalam dokumen HTML. Di dalam tag ini, dapat dilakukan berbagai macam pengaturan, misalnya mengatur warna latar belakang, membuat - heading, membuat paragraf, membuat preformatted text, membuat blockquote, membuat break, memformat font, memformat dokumen, membuat garis pemisah horisontal, membuat list/daftar, memuat gambar, membuat - hypertext link, dan lain-lain
Software yang diperlukan:
Text editor sederhana.
Contoh:
Windows: Notepad
Linux: gEdit, mcedit, pico, dan vi.

Web browser untuk menampilkan dokumen web yang dibuat.
Contoh:
Windows: Internet Explorer, Opera dan Firefox
Linux: Firefox dan Conqueror.

Istilah-istilah dalam HTML:
Tag - Digunakan untuk menentukan tingkah laku web browser. Dinyatakan dengan tanda lebih kecil “<“ (tag awal) dan tanda lebih besar “>” (tag akhir). Tag kontainer:
<namatag> ..... </namatag>

Element – Jenis-jenis dari tag. HTML mempunyai banyak elemen untuk berbagai keperluan dengan berbagai bentuk penggunaan.

Attribute - Digunakan untuk memodifikasi nilai dari elemen HTML. Suatu elemen biasanya akan mempunyai banyak atribut.

Tag Utama dalam struktur dokumen HTML:
<html>
<!– untuk menyatakan suatu dokumen HTML -->
 <head>
  <!-- memberikan informasi mengenai dokumen HTML >
  <!-- tag-tag: TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE dan META >
 </head>
 <body>
  <!-- menyimpan informasi atau data yang akan ditampilkan dalam  dokumen HTML >
 </body>
</html>
Contoh HTML sederhana:
<html>
 <head>
   <title> HTML </title>
 </head>
 <body>
  Kami sedang mulai belajar HTML
 </body>
</html>
Penggunaan komentar:
Format:
<! --   >

Fungsi:
  • Memberi nama aplikasi
  • Mendeskripsikan tujuan pengkodean tertentu di dalam file
  • Memberi nama pengarang
  • Memberi tanggal pembuatan
  • Memberi nomer versi
  • Memberi informasi hak cipta
Tag-tag dalam <body>:
  • Untuk warna latar belakang
  • Untuk heading
  • Untuk paragraf
  • Untuk preformatted text
  • Untuk blockquote
  • Untuk break
  • Untuk font
  • Untuk format dokumen
  • Untuk garis pemisah horisontal
  • Untuk list/daftar
  • Untuk memuat gambar
  • Untuk hypertext link
  • Dan lain-lain
Preformatted Text:
Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML:
<pre> . . . </pre>

Blockquote:
Untuk menulis kutipan teks:
<blockquote> . . . </ blockquote >

Break:
Untuk menulis teks pada baris berikutnya:
<br>

Font:
Ukuran font
<font size=“n”> . . . </font>
Jenis font
<font size=“n” face=“jenis_font”> . . . </font>
Warna font
<font size=“n” face=“jenis_font” color=“warna”> . . . </font>

Format dokumen:
Bold:
<b> . . .</b>
Emphasized:
<em> . . . </em>
Italic:
<i> . . . </i>
Superscript:
<sup> . . .</sup>
Subscripted:
<sub> . . . </sub>
Struck trough:
<del> . . . </del>

Garis pemisah horisontal:
Garis horisontal untuk memisahkan teks dengan teks lain.
<hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”] [noshade]> </hr>

List/Daftar:
Unordered lists <UL>: daftar item dengan tanda bullet.
<ul [type=“disc”|”square”|”circle”] > . . . </ul>
Ordered Lists <OL>: untuk membuat daftar item yang terurut.
<ol [type=“1”|”a”|”A”|”I”|”i"] [start=“n”] > . . . </ol>
Definition Lists <DL>: untuk menjelaskan istilah-istilah.
<dl> . . . </dl>
<dt> . . . </dt>
<dd> . . . [</dd>]
Menu List: menampilkan item-item yang mempunyai link ke page lain.
<menu> . . . </menu>
Directory List (DIR): untuk daftar item yang pendek atau kurang dari 20 karakter.
<dir> . . . </dir>

Hypertext Link:
Format:
<a href=”address” > . . . </a>

Link ke dokumen lain
<a href=”nama_dokumen” > . . . </a>
Link ke bagian tertentu dalam dokumen yang sama
<a href=”#target” > . . . </a>
<a href=”target” > . . . </a>
Link ke alamat URL atau WebSite
<a href=”alamat_URL” > . . . </a>
Link ke alamat Email
<a href=”mailto:alamat_email” > . . . </a>
Link File yang akan didownload
<a href=”nama_file” > . . . </a>

Selamat Belajar...!

0 komentar:

Posting Komentar