Pengenalan HTML

Tugas Praktikum 3




1. Index
 <html>
<head>
<title>Homepage</title>
</head>
<frameset rows=20%,80%>
<frame name=atas src=top.html frameborder=1 noresize>
<frameset cols=20%,*>
<frame name=menu scrolling=no src=menu.html>
<frame name=isi src=isi.html>
</frameset>
</frameset>
</html>

2. Home
<html>
<head>
<title>Praktikum 4</title>
</head>
<body bgcolor="pink">
<a href="unhas_logo.gif" target="isi">
<IMG SRC="unhas_logo.gif" align="left" width="100" height="100">
</a>
<h1><pre><font face="Times New Roman"font color=grey><p align="center">
Universitas Hasanuddin </p></font></pre></h1>
<h2><pre><font face=Times New Roman font color=grey><p align=center>Fakultas Matematika dan Ilmu Pengetahuan Alam </p></font></pre></h2><br><br><br><br>
<h3><pre><font face=Arial font color= black><p align=center>Tugas Praktikum PIK</p></font></pre></h3>
<h4><pre><font face=Arial font color=red font size=12><p align=center>Nur Hildah Inayah</p></font></pre></h4>
<h5><pre><font face=Arial font color=red font size=8><p align=center>H11115503</p></font></pre></h5>
</body>
</html

3. Isi
<html>
<head>
<head><title>Hyperlink</title></head>
<body bgcolor=White>
<hr>
<p align=right>Google+ | Telusuri | Gambar | Maps | YouTube | Berita | Gmail | Drive |<a href=home.html target=isi>Praktikum</font></a></br>
<br> <br> <br> <br> <br> <br> <br> <br> <br>
<center>
<img src=images.png>
<form method=post action>
<input name=nama size=80> <br>
<input type=Submit> <input type=reset>
</form></b></center>
</body>
</html>

4. Top
<html>
<head><title>Top</title></head>
<body bgcolor=red>
<center><font size=8 color=white face=Arial><marquee>Welcome</marquee></center></font>
</body>
</html>

5.Tag HTML dan Kegunaannya
<HTML>
<HEAD>
<TITLE>TAG</TITLE>
</HEAD>
<BODY bgcolor="pink">
<H2><p align="center"><FONT FACE="Times New Roman">TAG Serta Kegunaannya</font></p></h2>
<font face="Cambria"><h3><pre>

!-- ... --        : Digunakan untuk memberi sebuah komentar atau keterangan. Kalimat yang terletak pada kontiner ini tidak akan terlihat pada browser      
!DOCTYPE        : Mendefinisikan informasi tipe dokumen       
a            : Mendefinisikan sebuah anchor, tetapi lebih tepat jika diartikan sebagai tautan dikarenakan tautan ini digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain       
abbr            : Digunakan untuk menguraikan satu ungkapan yang disingkat dan Anda dapat memberikan informasi bermanfaat kepada penelusur-penulusur page source(halaman sumber kode) / pembaca layar, sistem terjemahan dan mesin pencari yang berasal dari singkatan yang sudah diuraikan, tetapi saat di browser uraian tersebut tidak akan tampil dan hanya sebagai informasi saja      
acronym            : Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag <abbr>      
address            : Mendefinisikan informasi kontak untuk penulis/pemilik dokumen      
applet            : Digunakan untuk memasukan file java kedalam dokumen HTML      
area /            : Mendefinisikan daerah yang dapat diklik (link) pada peta gambar      
b            : Membuat teks tebal      
base /            : Mendefinisikan URL dasar/target untuk semua URL relatif dalam dokumen      
basefont /        : Membuat atribut teks default, seperti warna, ukuran, jenis font untuk semua teks dalam dokumen      
bdo            : Digunakan untuk menimpa arah teks      
big            : Memperbesar ukuran teks sebesar satu point dari defaultnya      
blink            : Membuat teks berkedip      
blockquote        : Mendefinisikan sebuah kutipan panjang. Pada saat di browser teks akan tampil menjorok kedalam       
body            : Mendefinisikan body/isi dokumen HTML, berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan di web browsernya. Isi dokumen tersebut dapat berupa teks, gambar, animas, link dan seterusnya      
br /            : Memberi baris baru/pindah baris      
button            : Mendefinisikan sebuah tombol diklik      
caption            : Membuat caption pada tabel      
center            : Untuk perataan tengah terhadap teks atau gambar       
cite            : Mendefinisikan kutipan      
code            : Mendefinisikan sebuah bagian dari kode komputer      
col /            : Mendefinisikan nilai atribut dari satu kolom atau lebih dalam sebuah tabel      
colgroup        : Menentukan kelompok dari satu kolom atau lebih dalam sebuah tabel untuk performatan      
dd            : Mendefinisikan deskripsi dari item dalam daftar definisi      
del            : Untuk memberi garis tengah pada teks/mencoret teks      
dfn            : Mendefinisikan sebuah istilah definisi      
dir            : Mendefinisikan sebuah daftar direktori      
div            : Mendefinisikan sebuah section dalam dokumen       
dl            : Mendefinisikan sebuah daftar definisi      
dt            : Mendefinisikan istilah (item) dalam daftar definisi      
em            : Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em> yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring      
embed            : Digunakan untuk memasukkan file video atau file musik      
fieldset        : Untuk mengelompokkan elemen-elemen yang terkait dalam form / membuat seperti frame-box di dalam form      
font            : Mendefinisikan jenis font, warna dan ukuran untuk teks      
form            : Mendefinisikan sebuah form HTML untuk input form      
frame /            : Mendefinisikan frame dalam fremeset      
frameset        : Mendefinisikan satu set frame      
h1 to h6        : Digunakan untuk menunjukkan awal dari suatu header/judul dari dokumen HTML tersebut.      
head            : Digunakan untuk memberikan informasi tentang dokumen tersebut      
hr /            : Membuat garis horisontal      
html            : Mendefinisikan root dari suatu dokumen HTML      
i            : Membuat teks miring      
iframe            : Mendefinisikan sebuah inline frame      
img /            : Berfungsi untuk menampilkan gambar pada dokumen HTML      
input /            : Mendefinisikan input field pada form      
ins            : Membuat teks bergaris bawah      
kbd            : Mendefinisikan teks yang di input dari keyboard      
label            : Mendefinisikan label untuk sebuah elemen < input >      
legend            : Mendefinisikan sebuah caption untuk elemen < fieldset >      

</pre>
</h3></font>
</BODY>
</HTML>

6.Pengenalan HTML


<html>
<head>
<title>Pengenalan HTML</title>
</head>
<body bgcolor="pink">
<h2><p align="center">Pengenalan HTML</p></h2>
<h2><font color="Red">Sejarah singkat HTML</font></h2>
<h2><font color=Grey><p align=justify>Di akhir tahun 1980an, Tim Berners-Lee bekerja sebagai seorang physicist di CERN (Sebuah Organisasi untuk research nuklir di eropa). Beliau merancang sebuah jalan bagi para scientis untuk berbagi dokumen melalui internet. Sebelum invensi ini, komunikasi melalui internet hanya terbatas pada dokumen teks biasa menggunakan beberapa teknologi seperti email,, FTP (File Transfer Protocol), dan Panel diskusi berbasis Usenet. Invensi dari HTML memanfaatkan model dan konten yang disimpan dalam server pusat yang dapat ditransfer dan ditampilkan pada workstation lokal melalui browser. Invensi ini menyederhanakan akses terhadap konten dan memungkinkan untuk menampilkan konten yang "kaya" (seperti  pemformatan teks yang mutakhir dan menampilkan gambar)</font></h2></p>
<h2><font color=Red>Apa itu HTML?</font></h2>
<h2><font color=Grey><p align=justify>HTML adalah bahasa untuk memarkup (memformat). HTML memberitahu Web Browser bagaimana cara menampilkan konten. HTML memisahkan "konten" (kata-kata, gambar, audio, video dan lainnya) dari "Penampilan" (Definisi dari tipe konten dan instruksi bagaimana tipe konten tersebut harus ditampilkan). HTML menggunakan beberapa elemen yang telah didefinisikan untuk mengidentifikasi tipe-tipe konten. Element-elemen memiliki satu atau lebih "tag" yang memiliki atau mengekspresikan konten. Tatag diawali dan diakhiri dengan  kurung siku, dan tag "penutup" (tag yang menandakan akhir dari konten) diawali dengan garis miring.
Sebagai contoh, elemen paragraf terdiri dari tag pembuka < p > dan tag penutup < / p > </font></h2></p>
</body>
</html>

7. Struktur HTML

<html>
<head>
<title>Struktur Dasar</title>
</head>
<body bgcolor=purple>
<h2><p align=center>Struktur Dasar HTML</p></h2>
<h2><font color=White>1.Element</font></h2>
<pre><font face=Calibri size=4>
Element terdiri dari 3 bagian,yaitu pembuka,isi dan penutup.Contohnya untuk menampilkan judul dari sebuah halaman</font></pre>
<h2><font color=White>2.Tag</font></h2>
<pre><font face=Calibri size=4>
Tag adalah teks khusus berupa dua karakter < dan >.Contohnya tag <head> dengan nama  head,<body> dengan nama body,dan sebagainya.Tag ini sudah diatur dari sananya,jadi kita
tidak boleh membuatnya sendiri.Misal jika kita menulis <bodi>,jelas tidak akan berfungsi.
</font></pre>
<h2><font color=White>3.Atribut</font></h2>
<pre><font face=Calibri size=4>
Atribut terdapat didalam script sebuah elemen,fungsinya untuk memberi informasi tambahan tentang elemen.Nilai dari atribut harus ditutup dengan tanda kutip,
seperti dalam penulisan password yang jika diketik akan menjadi **** seperti ini.</font></pre>
</body>
</html>

8.Top


<html>
<head><title>Top</title></head>
<body bgcolor=red>
<center><font size=8 color=white face=Arial><marquee>Welcome</marquee></center></font>
</body>
</html>

9. Penggunaan Tabel


<html>
<head>
<title>Penggunaan Tabel</title>
</head>
<body bgcolor="purple"><font color="white">
<h1><pre><font face="Times New Roman" color="white"><p align="center">
Cara Membuat Tabel dalam HTML
Menggunakan Notepad</pre></h1>
<center>
<p><img src="index.jpeg"></p>
<p>Ini Contoh Tabel</p></center>
<p></p>
<p></p>
<p></p>

<center><table border="1" width="50%">
<caption><Atribut Pendukung Tabel</caption>
<tr>
<th width="30"><center><font color="white">Atribut</center></th>
<th width="70"><center><font color="white">Kegunaan</center></th>
</tr>

<tr>
<td><center><font color="white">align</center></td>
<td><font color="white">untuk mengatur posisi horizontal</td>
</tr>

<tr>
<td><center><font color="white">valign</center></td>
<td><font color="white">untuk mengatur posisi vertikal</td>
</tr>

<tr>
<td><center><font color="white">width</center></td>
<td><font color="white">untuk mengatur lebar</td>
</tr>

<tr>
<td><center><font color="white">height</center></td>
<td><font color="white">untuk mengatur tinggi</td>
</tr>

<tr>
<td><center><font color="white">border</center></td>
<td><font color="white">untuk mengatur tebal garis</td>
</tr>

<tr>
<td><center><font color="white">border-color</center></td>
<td><font color="white">unutk memberi tebal garis dengan warna</td>
</tr>

<tr>
<td><center><font color="white">cellpadding</center></td>
<td><font color="white">untuk mengatur jarak garis dengan objek di dalamnya</td>
</tr>

<tr>
<td><center><font color="white">cellspacing</center></td>
<td><font color="white">untuk mengatur jarak tiap cell</td>
</tr>

<tr>
<td><center><font color="white">bgcolor</center></td>
<td><font color="white">untuk mengatur warna</td>
</tr>

<tr>
<td><center><font color="white">background</center></td>
<td><font color="white">untuk mengatur latar gambar</td>
</tr>

<tr>
<td><center><font color="white">rowspan</center></td>
<td><font color="white">mengatur jumlah baris yang memotong beberapa baris</td>
</tr>

<tr>
<td><center><font color="white">colspan</center></td>
<td><font color="white">mengatur jumlah kolom yang memotong beberapa kolom</td>
</tr>
</TABLE>

<p><center>nah ini adalah contoh dari tabe dengan beberapa kode warna dengan atribut<br>
<img src="tabel dengan html.png" width="400"></center>

9. Katrol


<html>
<head>
<title>Kartu Kontrol</title>
</head>
<body bgcolor=pink>
<h1><pre><font face=Times New Roman><p align=center>
KARTU KONTROL PRAKTIKUM
PENGANTAR ILMU KOMPUTER</p></font></pre></h1>
<a href=hildah.jpg target=top>
<IMG SRC=hildah.jpg align=right width=150 height=200>
</a>
<h3><pre><font face=Times New Roman align=left>

NAMA                : NUR HILDAH INAYAH
NIM                    : H11115503
PROGRAM STUDI    : MATEMATIKA
KELOMPOK            : MONITOR
ASISTEN            : 1.ANDI FAHRUDDIN AKKAS        6.LISMAYANI USMAN
                        2.OKTOSAR SABRI                7.ARMAYANI ARSAL
                        3.MUH.SUDIN NUR                8.RISNAYANI
                        4.AZWAR SYAMSUL KAMAL
                        5.ANDI FABIOLA AWALET
</font></pre></h3>

<table border="1" width="100%">
<tr>
<td style="width:2%;height:40px;" rowspan="2">NO</td>
<td style="width:10%" align="center" rowspan="2">TANGGAL PRAKTIKUM</td>
<td style="width:20%" align="center" rowspan="2">JUDUL MATERI</td>
<td style="width:18%" align="center" COLSPAN="3" >NILAI</td>
<td style="width:8%" align="center" rowspan="2">PARAF ASISTEN</td>
<td style="width:8%" align="center" rowspan="2">KET</td>
</tr>
<td style="height:8%" align="center">TP</td>
<td style="height:8%" align="center">RESPON</td>
<td style="height:8%" align="center">TUGAS</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">21 september 2015</td>
<td align="center">Komputer dan OS</td>
<td align="center">95</td>
<td align="center">85    +10</td>
<td align="center"></td>
<td align="center"><img src=paraf1.jpg width=100 height=30></td>
<td align="center">ACC-</td>
</tr>
<tr>
<td align="center">2</td>
<td align="center">28 september 2015</td>
<td align="center">Microsoft Office</td>
<td align="center">92</td>
<td align="center">77</td>
<td></td>
<td align=center><img src=paraf2.jpg width=100 height=30></td>
<td align="center">ACC-</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">5 oktober 2015</td>
<td align="center">LyX</td>
<td align="center"></td>
<td align="center">60</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">12 oktober 2015</td>
<td align="center">Pengenalan HTML</td>
<td align="center">80</td>
<td align="center"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">7</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">8</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">9</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">10</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>


10. Daftar Gambar

<html>
<head>
<title>Daftar Gambar</title>
</head>
<body bgcolor="PURPLE">
<center><a href src=melati.jpeg><h1><img src="melati.jpeg" width="300" height="300" hspace="20"><img src ="images-6.jpeg" width="300" height="300" hspace="20"><img src ="images-7.jpeg" width="300" height="300" hspace="20"></h1></center>
<p></p></a>

<p></p>

<p></p>

<center><h1><img src="images-8.jpeg" width="300" height="300" hspace="20"><img src ="images-9.jpeg" width="300" height="300" hspace="20"><img src ="images-14.jpeg" width="300" height="300" hspace="20"></h1></center>
<p></p>

<p></p>

<p></p>

<center><h1><img src="images-10.jpeg" width="300" height="300" hspace="20"><img src ="images-12.jpeg" width="300" height="300" hspace="20"><img src ="images-13.jpeg" width="300" height="300" hspace="20"></h1></center>


11.Biodata


<html>
<head>
<title>BIODATA</title>
</head>
<body bgcolor=pink>
<IMG SRC=hildah.jpg align=right width=150 height=200>
<h1><p align=center><font face=Times New Roman>BIODATA</font></p></h1>
<h3><font face=Comic Sans MS color=Black><p align=center><pre>
NAMA                : NUR HILDAH INAYAH
NIM                    : H11115503
TEMPAT LAHIR        : UJUNG PANDANG
TANGGAL LAHIR    : 08 MEI 1997
ALAMAT            : PERM. BERLIAN PERMAI BLOK D4 NO.19
AGAMA                : ISLAM
JENIS KELAMIN        : PEREMPUAN

BIODATA ORANG TUA
AYAH
NAMA                  : MUH. NATSIR NGANRO
PEKERJAAN         : PNS
IBU
NAMA                 : HJ. ST. AISYAH ABBAS, M.AG
PEKERJAAN            : DOSEN UIN

MOTTO HIDUP        : LEARN FROM YESTERDAY, LIVE FOR TODAY AND HOPE FOR TOMORROW

</font>
</p>
</pre>
</body>
</html>
Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment

0 komentar:

Posting Komentar

Find Me

Social Media Sharing by CB Bloggerz