Zaenal abidin
Download
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
Zaenal abidin

Zaenal Abidin

HTMLHyperText 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

    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>


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>


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


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)



Form element radio
Form Element <RADIO>









Refrensi html beginner intermediate advanced
Refrensi HTML Beginner & Intermediate & Advanced

  • http://www.htmldog.com/guides/html/


ad