Scribd
Unggah
13 tayangan31 halaman

Mengenal HTML

Dokumen ini menjelaskan tentang HTML, bahasa markup standar untuk web yang digunakan untuk menyusun struktur halaman website. HTML terdiri dari tag, atribut, dan elemen yang membentuk konten web, serta mencakup berbagai fungsi seperti pemformatan teks, pembuatan tabel, dan penambahan gambar. Selain itu, dokumen ini juga membahas penggunaan link, video, audio, dan formulir dalam HTML.

Diunggah oleh

picaprosa
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
13 tayangan31 halaman

Mengenal HTML

Dokumen ini menjelaskan tentang HTML, bahasa markup standar untuk web yang digunakan untuk menyusun struktur halaman website. HTML terdiri dari tag, atribut, dan elemen yang membentuk konten web, serta mencakup berbagai fungsi seperti pemformatan teks, pembuatan tabel, dan penambahan gambar. Selain itu, dokumen ini juga membahas penggunaan link, video, audio, dan formulir dalam HTML.

Diunggah oleh

picaprosa
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 31

DESAIN WEB

WEBSITE

MENGENAL HTML
HTML
PENGERTIAN
HTML merupakan singkatan dari HYPERTEXT MARKUP
LANGUAGE yaitu bahasa standar web yang dikelola
penggunaanya oleh W3C (World Wide Web Consortium)
berupa tag tag yang menyusun setiap elemen dari
website.

berperan sebagai penyusun struktur halaman website


sesuai layout yang diinginkan, HTML adalah dasar dari
seluruh halaman web yang ada di Internet.
HYPERTEXT MARKUP LANGUAGE
Kata Hypertext dari HTML Markup dapat diterjemahkan sebagai Bagian terakhir dari HTML adalah
menekankan pengertian: text yang tanda atau penanda (bahasa inggris: Language. Istilah language jika
lebih dari sekedar teks ('hyper'text). mark). Di dalam HTML, kita akan diterjemahkan berarti: bahasa.
Maksudnya selain berfungsi sebagai menggunakan tanda-tanda khusus Khusus bagi anda yang pernah
teks biasa, sebuah teks di HTML juga seperti <p>, <li>. Tanda ini diperlukan berkenalan dengan bahasa
bisa berfungsi sebagai penghubung untuk mengatur format dan pemrograman komputer, di sini
ke halaman lain atau dikenal dengan membuat struktur halaman web. HTML tidak menggunakan
istilah link. Nantinya kita juga akan ‘Programming Language’, tetapi
melihat bahwa tidak hanya teks saja hanya ‘Language’ saja.
yang bisa digunakan sebagai link,
tetapi bisa berupa gambar. Link inilah
yang menjadi inti dari HTML

Hal ini secara tidak langsung menyatakan bahwa HTML bukanlah sebuah bahasa pemrograman. HTML tidak
memiliki struktur dasar seperti variabel, kondisi IF, function, atau class seperti layaknya sebuah bahasa
pemrograman komputer.
FUNGSI
HTML
Dalam proses web development (proses pembuatan
web), HTML berfungsi untuk membuat struktur
dari sebuah website. HTML digunakan untuk
menandai bagian mana yang akan menjadi judul
artikel, bagian mana yang berfungsi sebagai isi
artikel, atau bagian mana yang butuh disajikan
dalam bentuk tabel. Saat ini untuk membuat
sebuah web modern tidak bisa hanya dari HTML saja
UNSUR HTML
HTML terdiri dari unsur unsur yang membentuk
struktur skrip HTML, sebagai berikut :

Tag

Atribut

Element
Tag
Karakteristik dari tag pada HTML :

Tag adalah simbol khusus (markup) berupa dua Tag boleh ditulis dengan huruf besar(kapital),
karakter “<” dan “>” yang mengapit suatu teks kecil atau campuran, karena sifatnya yang incase
sebagai nama tag. Contohnya tag <body> adalah sensitive. misalnya: <BODY>, <body>, atau <Body>
tag dengan nama body. Sebagian besar tag semuanya memiliki hasil yang sama. Namun,
memiliki tag pembuka dan tag penutup yang untuk standarnya lebih baik menggunakan huruf
membatasi pengaruh dari tag tersebut. kecil semua.

Namun, terdapat sebagian kecil tag yang tidak Tag berisi tag lain. Tag yang dibuka pertama
memiliki tag penutup. Penutup tag ditambah ditutup terakhir, sedangkan tag yang dibuka
simbol “/” setelah tanda “<”, misalnya </body> yang terakhir ditutup pertama. Namun, kesalahan
merupakan penutup tag <body>. dalam struktur ini tidak mengakibatkan error
misalnya :
Atribut
Karakteristik dari atribut pada HTML :

Atribut yaitu property yang mengatur bagaimana Atribut hanya ditulis pada tag pembuka.
elemen dari suatu tag akan ditampilkan. Atribut ada
yang memiliki nilai dan ada yang tidak memiliki nilai. Setiap tag memiliki atribut yang berbeda-beda
Nilai suatu atribut ditulis di dalam tanda petik ganda yang dapat diterapkan pada tag tersebut.
(“....”), dipisahkan dengan simbol sama dengan (=)
dari nama atribut. Misalnya: <p align=”center”>. Beberapa atribut ada yang dapat diterapkan ke
semua tag atau disebut global attribute,
misalnya:class, id, style, dan sebagainya.

Sebuah tag dapat ditulis dengan satu atribut,


banyak atribut, atau tanpa atribut sama sekali.

jika tag ditulis dengan banyak atribut, masing


masing atribut dipisahkan oleh spasi.
Element

Element adalah bagian dari skrip HTML yang terdiri


dari tag pembuka, isi element dan tag penutup. Jika
sebuah element ditampilkan pada browser, maka
hanya isi element yang tampil di browser Misalnya :

Jika ditampilkan pada browser, maka hanya tulisan


“Aku senang belajar HTML” yang akan tampil di
browser
STRUKTUR
DASAR HTML
HTML disimpan dengan ekstensi *.html, jika di
dalamnya tidak mengandung skrip PHP. Jika di
dalamnya mengandung skrip PHP, maka disimpan
dengan ekstensi *.php.
Dalam penulisan HTML ada beberapa tag yang wajib Penjelasan dan fungsi dari masing-masing tag di samping
dituliskan dengan struktur yang sudah ditentukan. sebagai berikut :
Setiap file HTML harus menerapkan struktur
tersebut, sebagai berikut: <!DOCTYPE HTML>, adalah tag awal dari setiap dokumen
HTML yang berfungsi untuk menginformasikan pada
browser bahwa dokumen yang sedang dibuka adalah
dokumen HTML.. Tag ini perlu dicantumkan pada setiap
awal penulisan HTML..
<html>....</html>, adalah tag yang menunjukkan
pembuka dan penutup dokumen HTML.
<head>....</head>, adalah tag yang digunakan untuk
menyimpan berbagai informasi tentang dokumen HTML.
Apa yang terdapat d dalam tag ini tidak akan ditampilkan
di browser.
<title>.....</title>, adalah tag yang digunakan untuk
membuat judul website yang akan muncul di title bar
browser.
<body>.....</body>, adalah tag yang menunjukkan bagian
utama website. Semua yang akan ditampilkan pada
halaman browser dituliskan di dalam tag ini.
PEMFORMATAN PARAGRAF DAN TEKS
Ada beberapa jenis pemformatan text dalam HTML. Agar lebih jelas dalam memahami tag <p>,
Masing masing akan dibahas satu per satu sebagai perhatikan contoh kode HTML berikut:
berikut :

Pemformatan Paragraf
Paragraf dibuat dengan tag <p>... </p>. Atribut yang
sering digunakan dalam tag ini adalah align. Atribut
ini digunakan untuk mengatur perataan paragraf.
Nilai yang dapat diberikan pada atribut align antara
lain left, center, right, dan justify. Setiap penggunaan
tag <p> akan berganti ke baris baru. Jika ingin
pindah baris tanpa memulai dengan tag <p>, dapat
menggunakan tag <br> tanpa penutup.

Pada skrip tersebut terdapat 4 paragraf


dengan perataan yang berbeda. Hasilnya
seperti gambar berikut:
PEMFORMATAN PARAGRAF DAN TEKS
Pada skrip tersebut berisi susunan judul
Pemformatan Judul yang dibuat dengan <h1> hingga <h6>.
Hasilnya seperti gambar berikut:
Ada 6 style judul dalam HTML yang dibuat
menggunakan tag <h1> sampai <h6>. Tag <h1>
menghasilkan judul dengan ukuran huruf paling
besar, sedangkan <h6> akan menghasilkan judul
dengan ukuran paling kecil.
STYLE TEKS
Teks yang dibuat dengan HTML dapat dibuat tebal, Walaupun hasil yang didapat sama antara tag <b>
miring, bergaris bawah, bergaris tengah, dan dan tag <strong>, tag <i> dan tag <em>, tag <u> dan
sebagainya. Berikut tag yang dapat digunakan tag <ins>, serta tag <strike> dan tag <delete>, namun
untuk mengatur style teks: penggunaan tag tersebut memiliki tujuan yang
berbeda. Tag <strong>dan <em> lebih ditujukan
Tag <b>...</b>, untuk membuat teks tebal. untuk menandai teks yang penting.
Tag <i>...</i>, untuk menjadikan teks miring.
Tag <u>... </u>, untuk membuat teks bergaris bawah.
Tag <strike>...</strike>, untuk membuat teks bergaris tengah.
Tag <strong>...</strong>, untuk menunjukkan teks penting
dengan teks dicetak tebal.
Tag <em>...</em>, untuk menunjukkan teks penting dengan
teks dicetak miring.
Tag <small>...</small>, untuk membuat teks lebih kecil dari
umumnya.
Hasil dari skrip tersebut seperti gambar berikut:
Tag <mark>...</mark>, untuk membuat teks dengan
background kuning, seperti teks yang ditandai.
Tag <del>...</del>, untuk menunjukkan teks yang dihapus
dengan teks dicoret tengah.
Tag <ins> ... </ins>, untuk menunjukkan teks yang disisipkan
dengan teks bergaris bawah.
SUBSCRIPT DAN SUPERSCRIPT

Dalam penulisan rumus matematika, sering ditemui


Skrip tersebut berisi rumus matematika dan rumus
penulisan huruf yang ditulis lebih kecil dan posisinya
kimia yang menggunakan superscript dan subscript.
lebih ke atas atau ke bawah yang biasanya disebut
Hasilnya sebagai berikut :
superscript dan subscript. Untuk membuat
superscript menggunakan tag <sup>, sedangkan
untuk membuat subscript menggunakan tag <sub>.
LIST
Ada dua jenis list yaitu list berurutan (ordered list) dan list tidak berurutan (unordered list). Untuk membuat list
berurutan menggunakan ag <ol>...</ol>, tag ini memiliki atribut type yang menunjukkan jenis penomoran dan dapat
diberi nilai 1, a, A, atau / Untuk membuat list tidak berurutan menggunakan tag <ul>... </ul>, atribut ini juga memiliki
atribut type tetapi nilainya berbeda, yaitu round, disc, dan square. Untuk membuat item list pada tiap baris list baik
pada list berurutan maupun list tidak berurutan menggunakan tag <li> ... </li>, perhatikan contoh berikut:

Skrip tersebut berisi


kombinasi list berurutan dan
tidak berurutan.
Hasilnya seperti gambar
berikut:
TABEL
Tabel pada HTML dapat dibuat menggunakan tag <table>... </table>. Isi
dalam tabel dibagi menjadi dua bagian, yaitu header tabel ditunjukkan
dengan tag <thead>......</thead> dan body tabel ditunjukkan dengan
tag <tbody>... </tbody>. Untuk menambah baris pada tabel
menggunakan tag <tr> ... </tr>, untuk menambahkan data, jika berupa
data header menggunakan tag <th> ..... </th>, sedangkan pada body
tabel menggunakan tag <td> ..... </td>.

Sebagian besar atribut seperti Height, Width, Align, Bgcolor, Border,


dan lain lain sudah tidak support pada HTML5, kecuali Colspan dan
Rowspan.

Dalam membuat tabel sering kali menggabungkan beberapa sel


menjadi satu sel. Dalam HTML, penggabungan sel dikenal dengan
istilah span. Untuk menggabungkan beberapa sel di dalam HTML
digunakan atribut colspan dan rowspan. Colspan digunakan untuk
menggabungkan beberapa kolom, sedangkan rowspan digunakan
untuk menggabungkan beberapa baris. Nilainya diisi angka sesuai
jumlah kolom atau baris yang digabungkan. Sebagai contoh, perhatikan
skrip berikut:
TABEL

Pada skrip tabel tersebut memiliki 3 kolom tabel. Pada baris pertama, karena
ada penggabungan kolom kedua dan ketiga, maka hanya terdiri dari 2 kolom.
Pada baris kedua, karena kolom pertama telah digabungkan dengan kolom
pertama pada baris di atasnya, maka tinggal terdiri dari 2 kolom. Hasilnya
seperti gambar berikut:
GAMBAR

Tag yang digunakan untuk menambahkan gambar di dalam HTML adalah tag
<img>. Tag ini tidak memliki tag penutup. Atribut yang dapat diberikan ke
dalam tag ini di antaranya:

Src, untuk menentukan sumber dan nama gambar.


Width, untuk menentukan lebar gambar.
Height, untuk menentukan tinggi gambar.
Alt, untuk memberi text alternatif yang ditampilkan jika gambar tidak
dapat ditampilkan.
Title, untuk membuat text yang tampil ketika mouse di atas gambar

Jika gambar tidak ditentukan tinggi dan lebarnya, maka ukuran gambar sesuai
dengan gambar aslinya. Namun, jika gambar ditentukan tinggi dan lebarnya
sekaligus, ukuran gambar menjadi tidak proporsional. Maka, jika ukuranya
ingin diubah, sebaiknya tentukan tinggi atau lebarnya saja.
GAMBAR
Format gambar yang didukung oleh tag <img> adalah jpg, png,
dan gif. Nama dan format gambar harus dituliskan dengan
lengkap pada atribut src. Penulisan nama dan letak gambar ada
beberapa kemungkinan sebagai berikut:

Jika gambar satu folder dengan file HTML, maka penulisanya


src="nama_gambar.jpg".

Jika gambar terletak di dalam folder yang sama dengan file


HTML. maka penulisanya menjadi
src="nama_folder/nama_gambar.jpg".

Jika gambar terletak di folder yang berbeda dengan folder yang


berisi file HTML, maka harus keluar dari folder yang beris file
HTML dulu, sehingga penulisanya yaitu
src="../nama_folder/nama_gambar.jpg". Tanda ../ artinya keluar
dari folder yang berisi file HTML.
VIDEO DAN AUDIO
Pada HTML 5 ada tag tambahan yang dapat menampilkan
video atau audio di dalam browser. Tag yang digunakan
untuk menampilkan video yaitu <video> </video>. Adapun
tag yang digunakan untuk menampilkan audio yaitu
<audio>... </audio>. Kedua tag ini memiliki kesamaan dalam
atributnya sebagai berikut:

Skrip tersebut berisi skrip untuk menampilkan audio


Src, untuk menentukan nama file dan sumber/letak video
dan video. Pada tag <audio> diatur langsung dimainkan
atau audio.
dengan atribut autoplay, sedangkan pada tag <video>
Width, untuk menentukan lebar video atau audio control.
tidak menggunakan atribut autoplay. Hasilnya seperti
Height, untuk menentukan lebar video, hanya dipakai
berikut:
pada tag <video>.
Controls, pilihan untuk menampilkan tombol kontrol atau
tidak.
Autoplay, pilihan untuk langsung dimainkan atau tidak.

Format video yang didukung yaitu ogg, mp4, dan webm.


Sedangkan untuk audio, format yang didukung yaitu ogg,
mp3, dan wav. Aturan penulisan nama file dan letak file
sama dengan aturan untuk menampilkan gambar.
LINK

Link merupakan pintasan untuk menuju suatu Penulisan nilai atribut href memiliki beberapa cara
URL website, baik halaman lain pada suatu tergantung dari fungsi link sebagai berikut:
website maupun halaman pada website lain. Link
sering digunakan untuk membuat menu Jika link digunakan untuk membuka file cara penulisanya
website. Tag yang digunakan untuk membuat href="galeri.html". Jika format file dapat dibuka di browser seperti
link adalah tag <a>..</a>. Tag ini memiliki html, txt, jpg, png atau gif, maka file akan ditampilkan pada
beberapa atribut di antaranya: halaman browser. Jika format file tidak dapat dibuka oleh browser
seperti docx, xlsx, zip, rar, dan sebagainya, maka file akan
Href, menentukan tujuan dari link ketika didownload.
diklik. Jika link digunakan untuk menuju bagian lain dalam satu
Target, menentukan target yang dituju saat halaman website maka penulisanya menjadi href="#bawah". Agar
diklik apakah di tab yang sama atau tab lain. link tersebut berfungsi, maka harus ada tag <a> yang diberi
Title, menentukan tulisan yang tampil saat atribut id="bawah" sebagai target yang dituju ketika link diklik.
mouse memasuki area link. Jika link digunakan untuk menuju halaman website lain, maka
penulisanya menjadi href="http://www.nama_website.com".
Jika link digunakan untuk mengirim email maka penulisanya
menjadi href="mailto: nama_email".

Untuk lebih jelasnya perhatikan contoh berikut:


LINK

Skrip tersebut berisi 5 link dengan fungsi yang


berbeda-beda. Untuk mengetahui fungsinya,
silakan klik masing-masing link.
IFRAME

Iframe digunakan untuk membuat area yang


dapat menampilkan konten dari website lain. Tag Skrip tersebut akan menampilkan hasil file yang
yang digunakan yaitu <iframe> ... </iframe>. Tag telah dibuat sebelumnya, sesuai yang ditulis
ini sering digunakan untuk membuat widget pada atribut src.
pada blog. Atribut yang bisa digunakan yaitu:

Src, menentukan sumber website yang ingin


ditampilkan.
Width, menentukan lebar area.
Height, menentukan tinggi area.
Lebih jelasnya, perhatikan contoh berikut:
FORMULIR

Formulir digunakan untuk menginputkan data Perbedaan antara method get dan post pada
oleh pengguna pada website. Data yang form sebagai berikut:
diinputkan biasanya akan disimpan pada
database. Tag yang digunakan untuk membuat Method GET:
formulir yaitu <form>... </form>. Tag ini memiliki Hanya dapat mengirim data dalam ukuran
beberapa atribut yaitu: kecil.
Data yang dikirim akan ditampilkan pada
address bar browser.
Action, menentukan nama file yang akan
memproses data yang dikirim.
Method POST:
Method, mengatur metode pengiriman data,
Dapat mengirim data dalam ukuran besar.
bisa diisi get atau post.
Data tidak ditampilkan pada address bar.
Name, mengatur nama form.

Di dalam tag <form> </form> ada beberapa tag


yang digunakan untuk membuat alat input data,
yaitu:
FORMULIR
1. Tag <label>... </label>

Tag <label> digunakan untuk membuat label dari sebuah alat input. Tag ini
biasanya ditulis sebelum tag <input>. Atribut yang biasanya digunakan dalam
tag ini adalah for yang diisi dengan nama id dari alat input yang diberi label.

2. Tag <input>

Tag <input> digunakan untuk membuat alat input dengan berbagai


macam tipe. Atribut yang dapat digunakan pada tag ini yaitu:
Name, memberi nama sebagai identitas data yang akan di kirim.
Value, memberi nilai/isi data yang akan dikirim.
Size, mengatur lebar alat input.
Placeholder, mengatur tulisan yang tampil ketika nilainya kosong.
Disabled, membuat input tidak dapat diubah isinya.
Readonly, seperti disabled namun masih bisa diubah nilainya dengan
skrip.
Type, menentukan tipe alat input.
Id, memberi identitas data yang akan dikirim.
FORMULIR

Khusus tipe radio dan checkbox memiliki atribut checked. Adapun macam-macam tipe
input yang dapat diberikan pada atribut type, yaitu:
Text, untuk memasukkan text biasa.

Hidden, untuk menyembunyikan input.

Password, untuk memasukkan password.

Radio, untuk memberi pilihan beberapa nilai yang dapat dipilih dengan cara diklik.

Checkbox, untuk memberi pilihan dengan cara diceklis.

Submit, untuk membuat tombol yang akan mengirim data ketika diklik.

Reset, untuk membuat tombol yang akan mengosongkan formulir ketika diklik.

Button, untuk membuat tombol biasa yang memiliki fungsi lain.


FORMULIR
Pada HTML 5 ada penambahan beberapa tipe input.
Tipe input yang ditambahkan pada HTML 5 sebagai
berikut:

Color, untuk memilih warna.


Time, untuk memasukkan waktu.
Number, untuk memasukkan khusus angka.
Range, untuk memilih angka pada batas
tertentu dengan cara menggeser slider.
Date, untuk memasukkan tanggal.
Email, untuk memasukkan email.
Url, untuk memasukkan URL (alamat website).

Beberapa tipe input di atas memiliki tampilan yang


sama, namun ketika dimasuki nilai yang tidak sesuai
dengan formatnya akan menampilkan pesan
kesalahan. Sebagai contoh, perhatikan skrip berikut:
FORMULIR

Hasil dari skrip tersebut seperti gambar berikut :


FORMULIR

3. Tag <select> ... </select>

Tag <select>...</select> digunakan untuk membuat


input berupa pilihan dalam bentuk dropdown.
Atribut yang bisa digunakan sama dengan atribut
tag <input>. Yang membedakan pada tag ini dapat
diberi atribut multiple yang memungkinkan
pengguna dapat memilih lebih dari satu pilihan.
Untuk menambahkan pilihan menggunakan tag
<option>...

<option> yang ditulis di dalam tag <select>...


</select>.

Lebih jelasnya, perhatikan contoh berikut:


FORMULIR

4. Tag <textarea>... </textarea>

Tag <textarea> ... </textarea> digunakan untuk


membuat input yang dapat diisi dengan text dalam
jumlah banyak dan lebih dari satu baris, misalnya
untuk input pesan, komentar, berita, dan lain-lain.
Atribut yang dapat digunakan juga sama, namun
ada beberapa tambahan seperti:
Textarea pada skrip tersebut diatur dengan lebar 60
huruf dan tinggi 10 baris teks. Hasilnya seperti
Cols, untuk mengatur jumlah huruf yang bisa
gambar berikut:
diinputkan dalam 1 baris.
Rows, untuk mengatur jumlah baris yang dapat
ditampilkan tanpa scroll.

Contoh penggunaanya perhatikan skrip berikut:


TERIMAKASIH

Anda mungkin juga menyukai