Tugas Ti HTML

Makalah
Teknologi Informasi
HTML
(Hyper Text Markup Language)
Disusun oleh
Moh. Agung Maulana
07/250813/TK/32407
Jurusan Teknik Mesin dan Industri
Fakultas Teknik
Universitas Gadjah Mada
HTML (Hyper Text Markup Language)

Pendahuluan
1. Latar Belakang
Salah satu faktor pendukung eksistensi teknologi informasi pada era

informasi adalah penggunaan HTML pada halaman web. Kepentingan akan
waktu mendorong manusia modern lebih memilih internet sebagai sumber
informasi yang cukup dapat dipercaya. Oleh karena itu HTML begitu menjadi
sangat penting pada perkembangan TI. HTML tidak hanya berperan untuk
membuat aplikasi webside ataupun dokumen – dokumen pada webside saja,
melainkan juga menjadikan halaman web tersebut lebih indah sehingga
dapat menarik perhatian pencari informasi yang membuka web tersebut.
Pembahasan
2. Pengertian HTML
HTML adalah singkatan dari Hyper Text Markup Language merupakan

kumpulan kode yang digunakan untuk pembuatan suatu halaman. HTML
tidak tergolong kedalam sebuah bahasa pemrograman, HTML adalah bahasa
markup yang terdiri dari kumpulan tag markup yang mampu
menggambarkan sebuah halaman web.
Dasar – dasar HTML :
• Hypertext
• Tags dan elements
• Text formatting
• Lists, hyperlinks, images
• Table, frames
• Cascanding style sheets

HTTP (Hyper Text Transfer Protocol) merupakan protokol yang
digunakan untuk mentransfer data antara web server ke web browser.
Protokol ini mentransfer data-data web yang ditulis atau berformat HTML.
HTML dapat disebut pula sebagai Mark-up Language karena berfungsi

untuk memformat file dokumen teks biasa untuk bisa ditampilkan pada web
browser sesuai keinginan. Hal tersebut dapat dilakukan dengan
menambahkan elemen atau sering disebut sebagai tagtag.
HTML Markup Tag biasa disebut tag HTML adalah kata kunci yang
diapit oleh sudut kurung seperti , tag HTML biasanya berpasangan seperti
dan , tag disebut tag awal/pembuka dan adalah tag akhir/penutup cirinya
ditambahkan tanda garis miring.
Elemen HTML biasanya berupa tag-tag yang berpasangan dan setiap

tag ditandai dengan simbol ` <` dan ` >` (tanpa tanda kutip) . Pasangan
dari sebuah tag ditandai dengan tanda `/ ` dan ini menunjukan penutupan
suatu tag .
Misalnya pasangan dari tag < namaku > adalah </ namaku > . Dalam
hal ini tag < namaku > disebut sebagai elemen dan biasanya
dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi
misalnya elemen < namaku > tadi, apabila ditulis dengan
Atributnya adalah sebagai berikut :
< namaku atribut1=”nilai_atribut1”atribut2=”nilai_atribut2” …> .
Dalam penulisan tag HTML tidaklah case sensitive artinya penggunaan

huruf kecil ataupun kapital tidaklah menjadi masalah.
Contoh dari tag yang lain :
tag tunggal:
• <P> menandai akhir dari sebuah paragraf

• <BR> menandai akhir sebuah baris.
• <HR> membuat sebuah garis horisontal.
Contoh tag berpasangan:
• <BODY> dan </BODY> menandai awal dan akhir dari tubuh dokumen.
• <B> dan </B> untuk membuat karakter cetak tebal.
• <I> dan </I> untuk membuat karakter cetak miring.
Dokumen HTML berisi serangkaian tag HTML kemudian diterjemahkan oleh

web browser (internet explorer, mozilla firefox, dll.) untuk selanjutnya
ditampilkan dalam bentuk halaman web, artinya apabila dokumen HTML
sudah dibuka oleh web browser tidak lagi tampil tag-tag htmlnya melainkan
sudah sebagai halaman web.
Dokumen HTML bisa dibuat dengan menggunakan text editor biasa

ataupun dengan editor khusus. Seperti :
• Microsoft Frontpage
• Macromedia Dreamweaver
• Netscape Navigator Gold
• Netscape Composer
• HotDog
• CU-HTML, dll
Format dasar dari dokumen HTML adalah sebagai berikut :
<HTML>
<HEAD>
<TITLE> isi dengan tema </TITLE>
</HEAD>
<BODY>
dokumen utama (boleh apapun: gambar, video, dll
</BODY>
</HTML>
3. Kode Dasar HTML
Kode-kode dasar HTML yang biasa digunakan adalah :
Turun satu baris kebawah(enter) /

1 <br> Kursor dan kalimat dibelakangnya turun
satu baris kebawah
<big>isi tulisan menjadi sedikit lebih besar

2
tulisan</big> dengan ukuran 3
Mewarnai tulisan. Ganti warna tulisan

<font color="warna
dengan salah satu pilihan yang ada :
3 tulisan">isi
red, blue, yellow, green, brown, gold,
tulisan</font>
purple
4 Menambah 1 spasi.
<font size="ukuran
mengganti ukuran tulisan. Ukuran
5 tulisan">isi
standar adalah
tulisan</font>
<strong>isi
Untuk menebalkan tulisan. Fungsi sama
tulisan</strong>
6 dengan '''isi tulisan''' atau tombol 'cetak
atau
tebal'
<b>isi tulisan</b>
Kursor dan kalimat dibelakangnya turun
7 <P>
satu setengah baris kebawah
8 <u>isi tulisan</u> membuat garis bawah tulisan
9 <small>isi tulisan menjadi sedikit lebih kecil

tulisan</small> dengan ukuran 1
1
<s>isi tulisan</s> membuat garis mencoret pada tulisan
0
Membuat tulisan tetap pada keadaan

1 <pre>isi
yang kita mau. misalnya untuk urutan
1 tulisan</pre>
berjejer kebawah.
1 <center>isi Membuat tulisan berada di tengah

2 tulisan</center> halaman
Kode - kode dasar HTML yang lain :
1. Membuat Center,:
<p align="center">Belajar</p>
Belajar
2. Membuat Posisi kekanan:
<p align="right">Belajar</p>
Belajar
3. Membuat Posisi kekiri
<p align="left">Belajar</p>
Belajar
4. Membuat Huruf Tebal
<b>Belajar</b>
Belajar
5. Membuat Huruf Garis Bawah (Underline)
<u>Belajar</u>
Belajar
6. Membuat Huruf bercetak Miring
<i>Belajar</i>
Belajar
7. Membuat Kombinasi huruf tebal,miring,garisbawah,:
<b><i><u>Belajar</u></i></b>
Belajar
8. Membuat Huruf tebal strong
<srong>Belajar</strong>
Belajar
9. Membuat Huruf Hidden
<span style="visibility: hidden">Belajar</span>

Belajar (hasil tidak terihat)
10.Membuat Huruf Besar semua (uppercase):
<span style="text-transform: uppercase">Belajar</span>
BELAJAR
11.Membuat Huruf Small caps:
<span style="font-variant: small-caps">Belajar</span>
BELAJAR
12.Membuat Huruf Subscribe / kecil di bawah:
<p>4<sub>2</sub></p>
42
13.Membuat Huruf Superscribe / pangkat:
<p>4<sup>2</sup></p>
42
14.Membuat Huruf bergaris atas:
<span style="text-decoration: overline">Belajar</span>
Belajar mengganti huruf

15.Membuat Huruf bergaris tengah:
<strike>Belajar</strike>
Belajar
16.Menentukan jenis huruf:
<p><font-family="Arial" >Belajar</font></p>
Belajar
17.Menentukan ukuran huruf:
<p><font-size="3" >Belajar</font></p>
Belajar
18.Menentukan warna huruf:
<p><font-color="green" >Belajar</font></p>
Belajar
19.Menentukan kombinasi warna,jenis,dan ukuran huruf:
<p><font >Belajar</font></p>
Belajar
20.Membuat tabel border solid:

<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>
Text
21.Membuat tabel border dot:
<table border="1" width="200"

style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>
Text
22.Membuat tabel border dashed:
<table border="1" width="200" style="border-style: dashed">

<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
Text
23.Membuat tabel border groove:

<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>
Text
24.Membuat tabel border Ridge:
<table border="1" width="200" style="border-style: ridge">

<tr>
<td>Text</td>
</tr>
</table>
Text
25.Membuat tabel border Insert:
<table border="1" width="200" style="border-style: inset">

<tr>
<td>Text</td>
</tr>
</table>
Text
26.Membuat tabel border Outset:

<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>
Text
27.Membuat Tabel Biasa:
<table border="1"width="200"><td>Text</td></table>
Text
28.Membuat Tabel berwarna:
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel>
Text
29.Membuat Tabel berwarna tak berbingkai
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel>
Text
Penutup
1. Kesimpulan
HTML merupakan suatu bahasa pemformatan pada web yang sangat

penting. Untuk membuat suatu web dibutuhkan pengetahuan untuk
menggunakan bahasa HTML yang berupa kode – kode bahasa mark-up
sebagai dasar bentuk web sesuai dengan yang diinginkan.
2. Daftar Pustaka
• http://id.wikipedia.org/wiki/Menggunakan_kode_HTML_di_Wikipedia
• http://pelajaran-blog.blogspot.com/2009/02/kode-kode-html.html

Tugas Ti HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tugas Ti HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Makalah

(Hyper Text Markup Language)

Moh. Agung Maulana

Jurusan Teknik Mesin dan Industri

Universitas Gadjah Mada

HTML (Hyper Text Markup Language)

Salah satu faktor pendukung eksistensi teknologi informasi pada era

HTML adalah singkatan dari Hyper Text Markup Language merupakan

• Tags dan elements

• Lists, hyperlinks, images

• Cascanding style sheets

HTML dapat disebut pula sebagai Mark-up Language karena berfungsi

Elemen HTML biasanya berupa tag-tag yang berpasangan dan setiap

< namaku atribut1=”nilai_atribut1”atribut2=”nilai_atribut2” …> .

Dalam penulisan tag HTML tidaklah case sensitive artinya penggunaan

Contoh dari tag yang lain :

• <P> menandai akhir dari sebuah paragraf

Dokumen HTML berisi serangkaian tag HTML kemudian diterjemahkan oleh

Dokumen HTML bisa dibuat dengan menggunakan text editor biasa

Format dasar dari dokumen HTML adalah sebagai berikut :

3. Kode Dasar HTML

Kode-kode dasar HTML yang biasa digunakan adalah :

Turun satu baris kebawah(enter) /

<big>isi tulisan menjadi sedikit lebih besar

Mewarnai tulisan. Ganti warna tulisan

4 &nbsp; Menambah 1 spasi.

8 <u>isi tulisan</u> membuat garis bawah tulisan

9 <small>isi tulisan menjadi sedikit lebih kecil

Membuat tulisan tetap pada keadaan

1 <center>isi Membuat tulisan berada di tengah

Kode - kode dasar HTML yang lain :

2. Membuat Posisi kekanan:

3. Membuat Posisi kekiri

5. Membuat Huruf Garis Bawah (Underline)

6. Membuat Huruf bercetak Miring

7. Membuat Kombinasi huruf tebal,miring,garisbawah,:

8. Membuat Huruf tebal strong

9. Membuat Huruf Hidden

<span style="visibility: hidden">Belajar</span>

10.Membuat Huruf Besar semua (uppercase):

<span style="text-transform: uppercase">Belajar</span>

11.Membuat Huruf Small caps:

<span style="font-variant: small-caps">Belajar</span>

12.Membuat Huruf Subscribe / kecil di bawah:

13.Membuat Huruf Superscribe / pangkat:

14.Membuat Huruf bergaris atas:

<span style="text-decoration: overline">Belajar</span>

Belajar mengganti huruf

16.Menentukan jenis huruf:

17.Menentukan ukuran huruf:

18.Menentukan warna huruf:

19.Menentukan kombinasi warna,jenis,dan ukuran huruf:

20.Membuat tabel border solid:

21.Membuat tabel border dot:

<table border="1" width="200"

22.Membuat tabel border dashed:

<table border="1" width="200" style="border-style: dashed">

23.Membuat tabel border groove:

24.Membuat tabel border Ridge:

<table border="1" width="200" style="border-style: ridge">

25.Membuat tabel border Insert:

<table border="1" width="200" style="border-style: inset">

26.Membuat tabel border Outset:

27.Membuat Tabel Biasa:

4 Menambah 1 spasi.