zaenal abidin
Download
Skip this Video
Download Presentation
HTML HyperText Markup Language

Loading in 2 Seconds...

play fullscreen
1 / 45

HTML HyperText Markup Language - PowerPoint PPT Presentation


  • 223 Views
  • Uploaded on

Zaenal Abidin. HTML HyperText Markup Language. HTML. singkatan dari HyperText Markup Language menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software yang diperlukan: Text editor sederhana. Contoh: Windows: Notepad

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' HTML HyperText Markup Language' - nerice


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide2
HTML
  • singkatan dari HyperText Markup Language
  • menentukan tampilan suatu teks dan tingkat kepentingan dari

teks tersebut dalam suatu dokumen.

Software yang diperlukan:

  • Text editor sederhana.

Contoh:

Windows: Notepad

Linux: Bluefish, gEdit, mcedit, pico, dll

  • Web browser untuk menampilkan dokumen web yang dibuat.

Contoh:

Windows: Internet Explorer, Opera dan Firefox

Linux: Firefox dan Conqueror.

istilah istilah dalam html
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
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
Contoh HTML sederhana :

<html>

<head>

<title> HTML </title>

</head>

<body>

Kami sedang mulai belajar HTML

</body>

</html>

penggunaan komentar
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 heading
Tag Heading
  • Untuk judul atau sub judul dalam dokumen HTML

<h1 [align=”left”|”center”|”right”]> . . . </h1>

<h2 [align=”left”|”center”|”right”]> . . . </h2>

..

<h6 [align=”left”|”center”|”right”]> . . . </h6>

slide8

Script:

<html>

<head>

<title> Heading </title>

</head>

<body>

<h1 align="center">Heading 1: HTML</h1>

<h2 align="center">Heading 2: HTML</h2>

<h3 align="center">Heading 3: HTML</h3>

<h4 align="center">Heading 4: HTML</h4>

<h5 align="center">Heading 5: HTML</h5>

<h6 align="center">Heading 6: HTML</h6>

</body>

</html>

tag paragraf
Tag Paragraf
  • Paragraf yang dapat diatur perataannya (kiri, tengah, kanan):

<p [align=”left”|”center”|”right”]> . . . </p>

Script:

<html>

<head>

<title> Paragraf </title>

</head>

<body>

<h2 align="center">Materi HTML</h2>

<p align="right">Kami sedang mulai belajar HTML</p>

<p align="left">Saatinimembahas materi Dasar-dasar HTML </p>

</body>

</html>

tag memformat dokumen
Tag Memformat Dokumen

Script:

<html>

<head>

<title> Format Dokumen </title>

</head>

<body>

<p>Contoh <b>Teks Bold</b></p>

<p>Contoh <i>Teks Italic</i></p>

<p>Contoh<sup>Teks superscripted</sup></p>

<p>Contoh<sub>Teks subscripted</sub></p>

<p>Contoh<del>Teksstruckthrough</del></p>

<p>Contoh<code>Teks Computer Code</code></p>

</body>

</html>

tag pre format
Tag Pre-format
  • Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML:

<pre> . . . </pre>

Script:

<html>

<head>

<title>Pre-Format</title>

</head>

<body>

<pre>

Saya sedang

Bel ajar HTML

Untuk mem buat aplikasi

berbasis web

</pre>

</body>

</html>

tag break
Tag Break
  • Untuk menulis teks pada baris berikutnya:

<br>

Script:

<html>

<head>

<title>Mengganti Baris</title>

</head>

<body>

Muhammad Yusuf<br/>

Jurusan Teknik Informatika<br/>

Fakultas Teknik<br/>

Universitas Trunojoyo <br/>

</body>

</html>

tag garis pemisah horisontal
Tag Garis Pemisah Horisontal
  • Garis horisontal untuk memisahkan teks dengan teks lain.

<hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”]

[noshade]> </hr>

Script:

<html>

<head>

<title>Membuat Garis Horisontal</title>

</head>

<body>

Berikut ini penggunaan

satu garis horisontal: <hr/>

dan penggunaan dua garis

horisontal: <hr/> <hr />

</body>

</html>

tag font
Tag 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>

Script:

<html>

<head>

<title>Memformat Font</title>

</head>

<body>

<font size=5 color="#FF00FF">

Teks berwarna hexcolor #FF00FF

</font><br/>

<font color="red">Teksberwarna

merah</font>

</body>

</html>

tag hypertext link
Tag 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>

tag hypertext link 2
Tag Hypertext Link (2)

Script:

<html>

<head>

<title>Membuat link</title>

<head>

<body>

<p>Silahkan download <i>handout</i>

perkuliahan di <A href="

http://zheira83.wordpress.com">

blog </A></p>

</body>

</html>

tag memuat gambar
Tag Memuat Gambar

Memuat gambar ke dalam halaman Web

<img src=”URL”|”name” height=”n” width=”n” align=”top”|”center”|”bottom”] />

Relative Path:

  • File gambar ada dalam direktori yg sama: ./
  • File gambar ada dalam direktori sebelumnya: ../

Script:

<html>

<head>

<title> Insert Gambar</title>

</head>

<body>

<img src="./penguins.jpg"></br>

<b> Penguins</b>

</body>

</html>

warna background
Warna Background

Menggunakan warna

<body bgcolor=#nnnnnn> . . . </body>

Script:

<html>

<head>

<title> Penggunaan Latar

Belakang Warna </title>

</head>

<body bgcolor="pink">

Kami sedang mulai belajar

HTML

</body>

</html>

warna background 2
Warna Background (2)

Menggunakan gambar

<body background=“nama_file_gambar”> . . . </body>

Script:

<html>

<head>

<title> Penggunaan Latar

Belakang Gambar </title>

</head>

<body

background="./Desert.jpg">

<p><h2

align="center">Kami

sedang mulai belajar

HTML</h2></p>

</body>

</html>

tag list
Tag List
  • <ul> - unordered list (daftar tdk bernomor); bullet

<ul [type=“disc”|”square”|”circle”] > . . . </ul>

  • <ol> - ordered list; nomor

<ol [type=“1”|”a”|”A”|”I”|”i"] [start=“n”] > . . . </ol>

  • <dl> - definition list; dictionary

<dl> . . . </dl>

<dt> . . . </dt>

<dd> . . . [</dd>]

tag list 2
Tag List (2)

Script:

<html>

<head>

<title>Penggunaan List</title>

</head>

<body>

<h4>Istilah-istilah dalam HTML:</h4>

<ol>

<li><i>Tag</i></li>

<li><i>Element</i></li>

<li><i>Attribute</i></li>

</ol>

<h4>Contoh <i>tag</i>:</h4>

<ul type="square">

<li><i>Tag heading</i></li>

<li><i>Tag list</i></li>

</ul>

</body>

</html>

tabel
TABEL

Fungsi:

  • Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca
  • Mengatur tampilan homepage agar lebih menarik
membuat tabel sederhana
Membuat Tabel Sederhana
  • Tag yang diperlukan:

- Membuat baris: <tr> (table row)

- Membuat kolom: <td> (table data)

Contoh:

<table border="1">

<tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr>

<tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr>

</table>

menambahkan judul tabel
Menambahkan Judul Tabel
  • Judul tabel: <caption>
  • Judul baris/kolom: <th> (table header)

Contoh:

<table border="1">

<caption align="top"> <b> DAFTAR MAHASISWA </b> </caption>

<tr><th>No</th><th>NPM</th><th>Nama</th></tr>

<tr><td>1</td><td>06.100.001</td><td>Amin A. Angkasa</td></tr>

<tr><td>2</td><td>06.100.002</td><td>Beni B. Bernardi</td></tr>

</table>

mengatur lebar tinggi tabel
Mengatur Lebar & Tinggi Tabel

Atribut: width dan height

Nilai:

  • ukuran % (max 100%)
  • ukuran pixel

Contoh:

<table border="1" width=“50%”>

<caption align="top">

<b> DAFTAR MAHASISWA </b> </caption>

<tr><th>No</th>

<th>NPM</th>

<th>Nama</th></tr>

<tr><td width=“20”>1.</td>

<td width=“80” height=“50“>06.100.001</td>

<td width=“180” height=“50”>Amin A. Angkasa</td></tr>

<tr><td width=“20”>2.</td>

<td width=“80” height=“70”>06.100.002</td>

<td width=“180” height=“70”>Beni B. Bernardi</td></tr>

</table>

perataan dalam tabel
Perataan dalam tabel
  • horisontal: atribut align ->utk <caption>, <tr>, <td> dan <th>
  • vertikal: atribut valign -> utk <tr>, <td> dan <th>

Contoh:

<table border="1" align="center">

<caption align="top">

<b> DAFTAR MAHASISWA </b> </caption>

<tr><th>No</th><th>NPM</th><th>Nama</th></tr>

<tr><td align="center" width="20">1.</td>

<td align="center" valign="middle"

width="80" height="50">06.100.001</td>

<td align="right" valign="top"

width="180" height="50">Amin A. Angkasa</td></tr>

<tr><td width="20">2.</td>

<td align="left" valign="top"

width="80" height="70">06.100.002</td>

<td align="left" valign="bottom"

width="180" height="70">Beni B. Bernardi</td></tr>

</table>

membuat warna pada tabel
Membuat warna pada tabel
  • Atribut: bgcolor

Contoh:

<body bgcolor="purple">

<font size="3" face="arial" color="yellow">

<table border="2" bgcolor="white" align="center">

<caption align="bottom">

<b> Tabel Daftar Mahasiswa </b> </caption>

<tr bgcolor="yellow">

<th>No</th><th>NPM</th><th>Nama</th></tr>

<tr bgcolor="cyan"><td align="center"

width="20">1.</td>

<td align="left" valign="middle“

width="80" height="40">06.100.001</td>

<td align="left" valign="middle“

width="180" height="40">Amin A. Angkasa</td></tr>

<tr><td bgcolor="blue" width="20">2.</td>

<td bgcolor="red" align="left" valign="middle"

width="80" height="40">06.100.002</td>

<td bgcolor="green" align="left" valign="middle"

width="180" height="40">Beni B. Bernardi</td></tr>

</table>

</body>

penggabungan baris kolom
Penggabungan baris/kolom
  • Menggabungkan bbrp kolom menjadi 1: atribut colspan
  • Menggabungkan bbrp baris menjadi 1: atribut rowspan
script html
Script HTML:

<table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12">

<caption align="top">

<b> Tabel Daftar Nilai Mahasiswa </b> </caption>

<trbgcolor="gray"><throwspan="2">No</th>

<throwspan="2">NPM</th> <throwspan="2">Nama</th> <thcolspan="2">Nilai</th>

</tr>

<trbgcolor="gray"><th>UTS</th> <th>UAS</th> </tr>

<tr><td align="center" width="20">1.</td>

<td align="left" valign="middle" width="80" height="40">06.100.001</td>

<td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td>

<td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>

</tr>

<tr><td width="20">2.</td>

<td align="left" valign="middle" width="80" height="40">06.100.002</td>

<td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td>

<td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>

</tr>

</table>

slide31
FORM
  • Kegunaan Form
  • Berikut ini beberapa contoh kegunaan Form dalam web:
    • memperoleh data-data user baik nama, alamat dan data lainnya
    • memperoleh informasi pembelian secara online
    • memperoleh feedback dari user mengenai website anda
    • Menambahkan buku tamu / komentar user
slide32
FORM
  • form
  • input
  • textarea
  • select
  • option
  • optgroup
  • button
  • label
  • fieldset
  • legend
form element
Form Element

Tag <FORM> digunakan untuk membuat form dalam document HTML.

Attribute Description

  • ACCEPT Mendefinisikan MIME yang di izinkan oleh server yang memuat script untuk memproses form. Syntax: ACCEPT=”Internet Media Type”
  • METHOD Menentukan bagaimana data akan di kirim ke server.
    • GET – data akan di kirim dengan menggunakan query string pada URL.
    • POST – data akan di kirim ke server sebagai block data ke script. Syntax:
  • METHOD=”POST|GET”
  • ACTION Menentukan lokasi dari script yang akan memproses data dari form Syntax: ACTION=”URL”
enctype multipart form data
enctype="multipart/form-data">
  • Element ini perlu ditambahkan jika anda mengirim file / upload sebuah gambar dengan menggunakan form yang anda buat.
form element input
Form Element <INPUT>
  • Tag ini teletak didalam blok tag form
  • Atribut :
    • Type (jenis input), nilai : text, checkbox, radio, hidden, button, submit, reset, file, image.
    • Name (nama elemen)
    • Value (nilai isian)
refrensi html beginner intermediate advanced
Refrensi HTML Beginner & Intermediate & Advanced
  • http://www.htmldog.com/guides/html/
ad