HTML BASIC.

(1)

HTML BASIC

www.ewawan.com

(2)

www.ewawan.com HTML BASIC - Halaman 2

Yang Harus Di Kuasai

HTML Basic

HTML Introduction HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Formatting HTML Styles

HTML Links HTML Images HTML Tables HTML Lists HTML Forms HTML Colors

HTML Colornames

HTML Colorvalues

HTML Quick List

(3)

HTML BASIC

Pendahuluan

Dengan HTML Anda dapat membuat situs Web Anda sendiri. Materi ini mengajarkan Anda segala sesuatu tentang HTML. HTML mudah dipelajari - Anda akan menikmatinya.

Apakah HTML?

HTML adalah bahasa untuk mendeskripsikan halaman web.

* HTML singkatan Hyper Teks Markup Language

* HTML bukan bahasa pemrograman, ini adalah bahasa markup * Sebuah bahasa markup adalah serangkaian tag markup

* HTML menggunakan tag markup untuk menjelaskan halaman web

Tag HTML

Markup tag HTML biasanya disebut tag HTML

* HTML tag adalah kata kunci dikelilingi oleh sudut kurung seperti <html>

* HTML tags biasanya datang dalam pasangan seperti <b> dan </ b>

* Tag yang pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir * Mulai dan akhiri tag juga disebut tag membuka dan menutup tag

Dokumen HTML = Web Pages

* Menggambarkan dokumen HTML halaman web * Dokumen HTML berisi tag HTML dan teks biasa * Dokumen HTML juga disebut halaman web * Disimpan dengan tipe file .html atau .htm

Tujuan dari sebuah web browser (seperti Internet Explorer atau Firefox) adalah untuk membaca dokumen HTML dan menampilkan mereka sebagai halaman web.

(4)

www.ewawan.com HTML BASIC - Halaman 4 Browser tidak menampilkan tag HTML, tetapi menggunakan tag untuk menafsirkan isi dari halaman:

<html>

<title>HTML Pertama Ku</title>

<body>

<h1> Judul Pertama Saya </ h1>

<p> paragraf pertama saya </ p>

</ body>

</ html>

Penjelasan:

* Teks antara <html> dan </ html> menjelaskan halaman web * Teks antara <title> dan </title> menjelaskan title halaman web

* Teks antara <body> dan </ body> adalah halaman yang terlihat konten * Teks antara <h1> dan </ h1> ditampilkan sebagai judul

* Teks antara <p> dan </ p> ditampilkan sebagai sebuah paragraph

Persiapan apa yang butuhkan?

* Anda tidak perlu web server * Anda tidak perlu situs web

HTML Editing

Dalam materi ini menggunakan editor teks biasa (seperti Notepad) untuk mengedit HTML Namun, pengembang web profesional sering lebih memilih editor HTML seperti FrontPage, Dreamweaver dan lain sebagainya.

Jangan khawatir jika contoh menggunakan tag Anda belum pelajari. Anda akan belajar tentang HTML dalam bab-bab berikutnya.

Headings HTML

Judul HTML didefinisikan dengan tag <h1> untuk <h6>.

Contoh:

<h1> Ini adalah heading </h1>

<h2> Ini adalah heading </h2>

<h3> Ini adalah heading </h3>

(5)

www.ewawan.com HTML BASIC - Halaman 5 Paragraf HTML

HTML paragraf didefinisikan dengan tag <p>.

Contoh:

<p> Ini adalah sebuah paragraf </p>

<p> Ini adalah paragraf yang lain </p>

Format HTML Tag

HTML menggunakan tag seperti <b> dan <i> untuk memformat output, seperti tebal atau miring teks.

Tag HTML ini dinamakan tag format.

Lihat bagian bawah halaman ini untuk referensi yang lengkap.

Tag Deskripsi

<b> Mendefinisikan teks tebal

<big> Mendefinisikan teks besar

<em> Mendefinisikan teks italic

<i> Mendefinisikan teks kecil

<small> Mendefinisikan teks kecil

<strong> Mendefinisikan teks kuat tebal

<sub> Mendefinisikan teks subscript

<sup> Mendefinisikan teks yang dimasukkan

<ins> Mendefinisikan teks yang dimasukkan

<del> dihapus teks

<s> Deprecated. Gunakan bukannya <del>

<strike> Deprecated. Gunakan bukannya <del>

<u> Teks garis bawah

Output Komputer

<code> Mendefinisikan teks kode komputer

<kbd> Mendefinisikan teks keyboard

<samp> Mendefinisikan kode komputer sampel

<tt> Mendefinisikan teks teletype

<var> Mendefinisikan variabel

<pre> teks terformat

<listing> Gunakan <pre> sebaliknya

<plaintext> Gunakan <pre> sebaliknya

<xmp> Gunakan <pre> sebaliknya

(6)

www.ewawan.com HTML BASIC - Halaman 6 Kutipan, dan Definisi Tag

<abbr> Mendefinisikan singkatan

<acronym> Mendefinisikan akronim

<address> Mendefinisikan elemen alamat

<bdo> arah teks

<blockquote> Mendefinisikan kutipan panjang

<q> Mendefinisikan kutipan pendek

<cite> Mendefinisikan kutipan

<dfn> Mendefinisikan sebuah istilah definisi

Teks format

Contoh ini menunjukkan bagaimana Anda dapat memformat teks dalam dokumen HTML

<html>

<body>

<pre>

This is

preformatted text.

It preserves both spaces and line breaks.

</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>

for i = 1 to 10 print i next i

</pre>

</body>

</html>

HTML Styles

HTML Style Attribute

Tujuan dari atribut gaya adalah:

Untuk menyediakan cara yang umum untuk gaya semua elemen HTML. Styles diperkenalkan dengan HTML 4, sebagai cara yang baru dan lebih suka untuk gaya elemen HTML. Dengan gaya HTML, gaya dapat ditambahkan pada elemen HTML secara langsung dengan menggunakan atribut gaya, atau tidak langsung dalam terpisah style sheet (CSS file).

Anda dapat mempelajari segala sesuatu tentang gaya dan CSS pada tutorial CSS kita.

(7)

www.ewawan.com HTML BASIC - Halaman 7 Dalam HTML tutorial kita menggunakan atribut style untuk memperkenalkan Anda ke gaya HTML

Contoh Style HTML

style = "background-color: yellow"

style = "font-size: 10px"

style = "font-family: Times"

style = "text-align: center"

Tag dan Atribut

Dalam HTML 4, beberapa tag dan atribut didefinisikan sebagai usang. Berarti bahwa tidak akan didukung dalam versi HTML dan XHTML.

Pesannya adalah jelas: Hindari penggunaan tag dan atribut usang.

Tag dan atribut ini harus dihindari:

Tags Description

<center> konten berpusat tengah

<font> and <basefont> HTML fonts

<s> and <strike> teks Coret

<u> Mendefinisikan teks bergaris

Attributes Atribut Keterangan

align penyelarasan teks

bgcolor bgcolor warna latar belakang

color warna warna teks

Warna Latar

<body style="background-color:yellow">

Atribut gaya mendefinisikan style untuk elemen <body>.

<html>

<h2>Look: Colored Background!</h2>

</body>

</html>

Atribut bgcolor gaya lama

<html>

<h2>Look: Colored Background!</h2>

<p>For future proof HTML, use HTML styles instead:</p>

<p>style="background-color:yellow"</p>

</body>

</html>

(8)

www.ewawan.com HTML BASIC - Halaman 8 Jenis Huruf, Warna dan Ukauran

<body style="background-color:yellow">

Atribut gaya mendefinisikan style untuk elemen <p>.

<html>

<body>

<h1 style="font-family:verdana">A heading</h1>

<p style="font-family:courier new; color:red; font-size:20px;">A paragraph</p>

</body>

</html>

Atribut membuat tag <font> gaya lama

Teks Alignment

Atribut gaya mendefinisikan style untuk elemen <h1>.

Link HTML

Link HTML didefinisikan dengan tag <a>.

Contoh:

<a href="http://www.ewawan.com"> Ini adalah link </ a>

Catatan: alamat link disediakan sebagai sebuah atribut.

Images HTML

Gambar HTML didefinisikan dengan tag <img>.

Contoh:

<html>

<body>

This is a paragraph.

</font></p>

This is another paragraph.

</font></p>

</body>

</html>

<img src="ewawan.jpg" width="104" height="142" />

(9)

www.ewawan.com HTML BASIC - Halaman 9 Catatan: Nama dan ukuran gambar disediakan sebagai atribut.

Elements HTML

Dokumen HTML didefinisikan oleh elemen HTML. Elemen HTML muali dari tag awal sampai akhir tag:

TAG AWAL * ISI TAG AKHIR *

<p> Ini adalah sebuah paragraf </p>

<a href="default.htm" > Ini adalah link </a>

<br />

* Tag awal sering disebut tag pembuka. Tag akhir sering disebut tag penutup.

Sintaks HTML

* Sebuah elemen HTML dimulai dengan tag awal / pembuka tag * Sebuah elemen HTML diakhiri dengan tag akhir / tag penutup * Unsur konten adalah segalanya antara awal dan akhir tag * Beberapa elemen HTML memiliki konten kosong

* Empty elemen ditutup pada awal tag

* Sebagian besar elemen HTML dapat memiliki atribut Contoh Dokumen HTML:

<html>

<title> Latihan paragraf pertama</title>

<body>

<p> Ini adalah paragraf pertama </p>

</body>

</html>

*Contoh di atas berisi 3 elemen HTML.

Penjelasan : elemen <p>:

<p> Ini adalah paragraf pertama </ p>

Elemen yang <p> mendefinisikan sebuah paragraf di dokumen HTML Unsur memiliki start tag <p> dan end tag </ p>

Konten elemen adalah: Ini adalah ayat pertama . Elemen<body> :

<body>

<p> Ini adalah paragraf pertama </p>

</body>

(10)

Tabel HTML

Tabel didefinisikan dengan tag <table>. Sebuah meja dibagi ke dalam baris (dengan tag <tr>), dan setiap baris data dibagi ke dalam sel (dengan tag <td>). Surat-surat td singkatan dari "data tabel", yang

merupakan isi sel data. Sebuah sel data dapat berisi teks, gambar, daftar, paragraf, form, aturan horisontal, meja, dll.

<tr>

</tr>

<tr>

</tr>

</table>

Tampilannya dalam browser:

row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Tabel dan Atribut

Jika Anda tidak menentukan atribut border tabel akan ditampilkan tanpa batas. Kadang-kadang hal ini dapat berguna, tetapi sebagian besar waktu, Anda ingin perbatasan untuk menunjukkan.

Untuk menampilkan tabel dengan batas-batas, Anda harus menggunakan atribut border:

<tr>

</tr>

</table>

(11)

www.ewawan.com HTML BASIC - Halaman 11 Judul dalam tabel

Judul dalam tabel didefinisikan dengan tag <th>.

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Lists HTML

HTML mendukung perintahkan teratur dan daftar. List adalah daftar item. Daftar Item yang ditandai dengan peluru (biasanya lingkaran hitam kecil).

Daftar <ul> dimulai dengan tag. Masing item daftar <li> dimulai dengan tag.

<ul>

</ul>



Kopi



Teh



Susu

Di dalam list item Anda dapat menempatkan paragraf, baris, gambar, link, daftar lainnya, dll.

(12)

www.ewawan.com HTML BASIC - Halaman 12 List Item

Daftar item. Daftar Item yang ditandai dengan angka.

Ordered list dimulai dengan tag <ol>. Masing item daftar <li> dimulai dengan

Berikut adalah tampilannya dalam browser:

1. Kopi 2. Susu

Di dalam daftar item Anda dapat menempatkan paragraf, baris, gambar, link, daftar lainnya, dll Daftar Definisi

Sebuah daftar definisi bukan daftar item tunggal. Ini adalah daftar item (istilah), dengan deskripsi setiap item (istilah).

Sebuah daftar definisi dimulai dengan tag <dl> (daftar definisi).

Tiap hal diawali dengan sebuah tag <dt> (definisi istilah).

Setiap deskripsi dimulai dengan tag <dd> (definisi deskripsi).

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

</dl>

Berikut adalah tampilannya dalam browser:

Coffee

Black hot drink Milk

White cold drink

Di dalam tag <dd> Anda dapat menempatkan paragraf, baris, gambar, link, daftar lainnya, dll

<ol>

</ol>

(13)

HTML Forms dan Input

Formulir HTML digunakan untuk memilih berbagai jenis input pengguna.

Form

Suatu bentuk adalah daerah yang dapat berisi elemen form.

Bentuk elemen elemen yang memungkinkan user untuk memasukkan informasi (seperti text field, textarea fields, drop-down, radio button, checkbox, dll) dalam bentuk.

Suatu bentuk didefinisikan dengan tag <form>.

Input

Bentuk yang paling umum digunakan <input> tag adalah tag. Jenis input ditentukan dengan atribut jenis.

Yang paling umum digunakan masukan jenis dijelaskan di bawah ini.

Text Fields

Text field yang digunakan ketika Anda menginginkan para pengguna untuk mengetik huruf, angka, dll dalam formulir.

First name:

Last name:

Perhatikan bahwa bentuk itu sendiri tidak terlihat. Juga mencatat bahwa dalam kebanyakan browser, lebar dari text field adalah 20 karakter secara default.

<form>

.

input elements .

</form>

<form>

First name:

<br />

Last name:

</form>

(14)

Radio Buttons

Radio Buttons digunakan ketika Anda menginginkan para pengguna untuk memilih salah satu dari sejumlah pilihan.

<form>

<input type="radio" name="sex" value="male"

/> Male

<br />

<input type="radio" name="sex"

value="female" /> Female

</form>

Male Female

Catatan bahwa hanya satu pilihan yang dapat dipilih.

Checkboxes

Kotak centang yang digunakan saat Anda ingin pengguna untuk memilih satu atau lebih pilihan dari sejumlah pilihan.

<form>

Aku punya sepeda:

<br />

Aku punya mobil:

<br />

Aku punya pesawat terbang:

</ form>

Aku punya sepeda:

Aku punya mobil:

Aku punya pesawat terbang:

(15)

www.ewawan.com HTML BASIC - Halaman 15 Form Atribut dan Submit Button

Ketika pengguna mengklik pada tombol "Submit", isi formulir dikirim ke server. Bentuk tindakan atribut mendefinisikan nama file untuk mengirim konten ke. File didefinisikan dalam atribut action biasanya melakukan sesuatu dengan input yang diterima.

Username:

</form>

Username:

^Submit

Jika Anda mengetik beberapa karakter dalam kolom teks di atas, dan klik tombol "Submit", browser akan mengirimkan masukan Anda ke halaman yang disebut "html_form_submit.asp". Halaman akan

memperlihatkan kepada anda menerima masukan.

Warna HTML

Ditampilkan memadukan warna RED, GREEN, dan BLUE cahaya.

Nilai Warna

Warna HTML didefinisikan menggunakan hexadecimal (hex) notasi kombinasi Merah, Hijau, dan nilai- nilai warna Biru (RGB).

Nilai terendah yang dapat diberikan kepada salah satu sumber cahaya adalah 0 (hex 00). Nilai tertinggi adalah 255 (hex FF).

Nilai hex ditulis sebagai 3 dua digit angka, dimulai dengan tanda #.

(16)

www.ewawan.com HTML BASIC - Halaman 16 Nilai Warna

Color Color HEX Color RGB

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)

16 Juta Warna Berbeda

Kombinasi Merah, Hijau dan Biru nilai 0-255 memberikan total lebih dari 16 juta warna yang berbeda untuk bermain dengan (256 x 256 x 256).

Monitor modern mampu menampilkan setidaknya 16.384 warna yang berbeda.

HTML BASIC.

HTML BASIC

www.ewawan.com

Yang Harus Di Kuasai

HTML Basic

HTML Introduction HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Formatting HTML Styles

HTML Links HTML Images HTML Tables HTML Lists HTML Forms HTML Colors

HTML Colornames

HTML Colorvalues

HTML Quick List

HTML BASIC

Pendahuluan

Persiapan apa yang butuhkan?

HTML Styles

Warna Latar

Link HTML

Images HTML

Tabel HTML

Lists HTML

Kopi

Teh

Susu

1. Kopi 2. Susu

Coffee

Black hot drink Milk

White cold drink

HTML Forms dan Input

First name:

Last name:

Radio Buttons

Male Female

Checkboxes

Aku punya sepeda:

Aku punya mobil:

Aku punya pesawat terbang:

Username:

Warna HTML

****Selanjutnya Lihat Di Materi Warna-Warna Web****

Selanjutnya Lihat Di Materi Warna-Warna Web