Senin, 05 Desember 2016

MEMBUAT TEMPLATE SEDERHANA

DATA BIODATA SAYA
NAMA
:
SUDARMAN MARIYONO
NIM
:
1504411212
SEMESTER/KELAS
:
III/F
TTL
:
SALUBUA 18 MARET 1996
Dosen
:
Syafriadi, S.Kom, M,Kom

Berikut ini saya akan melampirkan langkah-langkah membuat template pada HTML . dalam hal ini berkaitan dengan tugas kuliah saya yang mana isi dari template tersebut adalah biodata pribadi.


Berikut ini saya lampirkan screenshoot kumpulan data rangkaian HTML saya:

Step yang pertama , saya menginput skrip untuk mengisi Heading seperti nama kampus, fakultas, prodi , kemudian ada juga Logo (format PNG) dan foto (format JPG)

<html>
<head>
</head>
<body div style="padding:2px;background-image:url('dd.jpg');
background-repead:repead;background-position:center;">
<table border="0"width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><center><img src="h6.png" width="60%"></td>
<td width="70%"><center>
<font face="hangbord DSG">
<br><font color="RED">
<b>PROGRAM STUDI TEKNIK INFORMATIKA<br>
   FAKULTAS TEKNIK KOMPUTER<br>UNIVERSITAS COKROAMINOTO PALOPO<br>
   TUGAS MATA KULIAH PEMROGRAMAN HTML<br><b><font face="jurassic">
   <marquee direction="right scrollamount="20" width="30% height="30%"> 
darmansudarman03@gmail.com </td>
<td><center><img src="h6.png" width="60%"></td></center>
</tr>
</table>
<hr align="center" size="2 pixel" width="1320centimeter" noshade color="BLUE">
</marquee>
</body>
</html>

Hasilnya:

Saya juga menambahkan, membuat, serta merubah font dan mengganti warna font. Mengatur jarak, dam membuat running text .

 <html>
<head>
<title>SUDARMAN MARIYONO</title>
</head>
<body bgcolor="BLACK">
<marquee>------------------------->Halaman Web Sederhana ini Merupakan <b>"Tugas html"</b>... Mata Kuliah <b>"Pemrograman HTML"</b><----------------------------- </marquee>
<table width="520" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="pink" bgcolor="BLUE">
  <tr bgcolor="RED">
    <th colspan="3" height="65">
    <p>DATA BIODATA SAYA</p>
    </th>
  </tr>
  <tr>
    <td width="153"><b>NAMA</b></td>
    <td width="23"><div align="center" >:</div></td>
    <td width="326"> SUDARMAN MARIYONO </td>
  </tr>
  <tr>
    <td><b>NIM</b></td>
    <td><div align="center" >:</div></td>
    <td> 1504411193</td>
  </tr>
  <tr>
    <td><b>SEMESTER/KELAS</b></td>
    <td><div align="center" >:</div></td>
    <td>  III/F</td>
  </tr>
  <tr>
    <td><b>TTL</b></td>
    <td><div align="center" >:</div></td>
    <td> SALUBUA 18 MARET 1996</td>
  </tr>
  <tr>
  <td><b>Dosen</b></td>
  <td><div align="center" >:</div></td>
  <td>Syafriadi, S.Kom, M,Kom
</table>
</body>
</html>

Hasilnya :

Cara memanggil :
<html>
<head>
<title> dasar pembuatan frame</title>
</head>
<frameset border="0" rows="30%,20%">
<frame src="D1.html">
<frame src="BIODATA.html">
</frameset>
</frameset>
</html>

Hasilnya :

Itu dia tadi cara sederhana membuat template. Semoga bermafaat bagi pembaca . adapun kekurangannya saya memohon maaaf, karena masih dalam proses pembelajaran . JIka kurang jelas silahkan tanyakan di e-mail saya : darmansudarman03@gmail.com 

Selasa, 08 November 2016

Geografi

BIODATA  DIRI
UNIVERSITAS COKROAMINOTO PALOPO
JURUSAN TEKNIK INFORMATIKA
DATA PRIBADI
Perkenalkan nama saya Sudarman Mariyono biasa di paggil Darman, Tempat tanggal lahir saya di Desa Salubua 18-Maret-1996. Kurang Lebihnya  bisa kita data lengkap saya di bawah ini.




Nama                                       : Sudarman Mariyono
Tempat/Tanggal Lahir             : Salubua, 18 Maret 1996
Jenis Kelamin                          : Laki-Laki
Nim                                         : 1504411212
Agama                                     : Islam
Alamat                                    : Suli Barat
NO. Hp                                   : 085242707460
E-Mail                                     : darmansudarman03@gmail.com
Kewarganegaraan                   : Indonesia
Status Perkawinan                  : Belum Menikah

RIWAYAT PENDIDIKAN
SD                                           :  SDN 304 Mamara
SMP                                        : Mts.Bajo
SMA                                       : MA Negeri 1 Suli

DATA ORANG TUA
Nama Ayah                             : Mariyono
Pekerjaan                                 : Petani
Nama Ibu                                : Masnaini
Pekerjaan                                 : PNS




Hasil Pratikum Bab2 sampai Bab4



















Senin, 07 November 2016

list ol


kragter


latihan 2


lint ul


line break


format pont


paragraf


pratikum 1


pratikum 2


Jenis Link


Minggu, 06 November 2016

Bab 2
Struktur HTML & Tag-Tag Dasar

Praktikum 1
<html> 
<head> 
<title>Contoh</title> 
</head> 
<body> 
SEDANG BELAJAR PEMROGRAMAN WEB 
</body> 
</html>

Praktikum 2
Menambahkan warna background, dan
pemformatan tampilan teks.


<html> 
<head>
<title>Contoh2</title> 
</head> 
<body bgcolor=”#0000ff” text=”#ff0000” >
SEDANG BELAJAR PEMROGRAMAN WEB
</body>
</html>

Praktikum 3
(Paragraf)

<html> 
<head> 
<title>Paragraf</title> 
</head> 
<body> 
<p>SELAMAT DATANG</p> 
<p>Di Dunia HTML</p> 
<p>Elemen paragraf ditandai dengan tag P dan setiap paragraf baru di tampilkan pada baris baru</p> <p align=”left”> rata kiri</p> 
<p align=”right”>rata kanan</p> 
<p align=”center”> rata tengah</p> 
<p align=”justiyf”> rata kiri kanan</p> 
</body> 
</html>

Praktikum 4
(Line Break)


<html> 
<head> 
<title>Paragraf</title> 
</head> 
<body> <p>Elemen paragraf <BR>ditandai dengan tag P <BR> dan setiap paragraf baru <BR> di tampilkan pada baris baru</p> 
</body> 
</html>

Praktikum 5
(Heading)


<html> <head> 
<title>Heading</title> 
</head> <body> 
<h1>Heading 1</h1> 
<h2>Heading 2</h2> 
<h3>Heading 3</h3> 
<h4>Heading 4</h4> 
<h5>Heading 5</h5> 
<h6>Heading 6</h6> 
</body> 
</html>

Praktikum 6
(Membuat Garis)


<html> <body color="silver"> 
Garis Lebar 80%, rata kiri<hr width="80%" align="left"> Garis Lebar 80%, rata kanan<hr width="80%" align="right"> Garis normal rata tengah<hr align="center"> Garis ukuran "10", rata tengah, lebar "70%"<hr size="10" align="center" width="70%"> Garis lebar "65%", rata Kiri, ukuran "15" noshade <hr width="65%" align="left" size="15" noshade> 
<p><hr> 
<i>Copyright © nama anda</i> 
</body> 
</html>


Bab 3
Formating Teks HTML


Praktikum 1
(Format Font)


<HTML> 
<HEAD> 
<TITLE> Formatting Font </TITLE> 
</HEAD> 
<BODY> 
<b>Bold</b> 
<BR> 
<u>Underline</u> 
<BR> 
<I>Italic</I> 
<BR> 
<strong>Strong</strong>
<BR> 

<em>Emphasis</em>
<BR> 
<cite>Citation</cite> 
<BR> 
<s>ini di coret</s> 
<BR> 
X<sup>3</sup> + 2X<sup>2</sup> - 5 
<BR> 
H<sub>2</sub>O 
</BODY></HTML>

Praktikum 2
(Karakter-karakter khusus)


<HTML> 
<HEAD> 
<TITLE> karakter khusus </TITLE>
</HEAD> 

<BODY> Copyright © <br> 
Trademark ™ <br> 
Registered ® <br> 
Poundsterling £ <br> 
Yen ¥ <br> 
Euro €<br> 
</BODY> 
</HTML>

Praktikum 3
(Indentasi)


<html> 
<head> 
<title>Ceritaku Ceritamu</title> 
</head> <body> 
<DD>Engkau datang membawa sejarah_ dari kota kecil menuju kota besar_ Indonesia rindu pemimpin sepertimu_ semoga ada tempat bagimu untuk dipilih_</DD>
<BLOCKQUOTE>Memimpin negeri ini bukanlah surga_ meyambung warisan panasnya neraka_ Tak semudah balikkan punggung tangganmu_ mesti seirama beresolusi_</BLOCKQUOTE> 
<DL> 
<DT>kami gantung harapan kami_ di bahu pemimpin kami</DT> 
</DL> 
</body> 
</html>


BAB 4
List dan Link


Praktikum 1

(List)

Praktikum 1a

<HTML> 
<BODY> 
<B>SISTEM KOMPUTER</B> 
<OL TYPE="I">
 <B><LI>BRAIN WARE</B> 
<B><LI>HARDWARE</B> 
<OL Type="A" > 
<LI>Input Device 
<LI>Output Device <LI>CPU 
<LI>Storage Device 
</OL> 
<B><LI>SOFTWARE</B> 
<OL Type="a"> 
<LI>Sistem Operasi 
<OL Type="i"> 
<LI>Windows 
<LI>Linux 
</OL> 
<LI>Aplikasi 
<OL > 
<LI>MS. Word <LI>CorelDraw </OL></OL></OL> 
</BODY> 
</HTML>

Praktikum 1b

<HTML><BODY> 
<B>SISTEM KOMPUTER</B> 
<UL TYPE="Disc"> 
<B><LI>HARDWARE</B> 
<UL Type="Circle" > 
<LI>Input Device 
<LI>Output Device 
<LI>CPU 
<LI>Storage Device 
</UL> 
<B><LI>SOFTWARE</B> 
<UL Type="square"> 
<LI><U>Sistem Operasi </U> 
<LI><U>Aplikasi</U> 
</UL></UL></BODY></HTML>


Praktikum 2a
(Link)


Latihan1
<html> 
<head> 
<title>Latihan1</title>
</head> 

<body bgcolor="red"> 
<p>Latihan Satu</p> 
<body> 
</html>

Latihan2 
<html> 
<head> 
<title>Latihan2</title> 
</head> 
<body bgcolor="blue"> 
<p>Latihan Dua</p> 
<body> 
</html>

Latihan3 
<html> 
<head> 
<title>Latihan3</title> 
</head> 
<body bgcolor="yellow"> 
<p>Latihan Tiga</p> 
<body> 
</html>

Link_Menu 
<html> 
<head> 
<title>Latihan Link</title> 
</head> 
<body link="red"> Selamat Belajar : <UL Type="A"> 
<LI> <a href="Latihan1.html">Latihan 1</a></LI> 
<LI> <a href="Latihan2.html">Latihan 2</a></LI> 
<LI> <a href="Latihan3.html">Latihan 3</a></LI> 
</UL> 
<body> 
</html>

Pratikum 2b

Jenis_Link 
<HTML> 
<HEAD> 
</HEAD> 
<BODY> 
<A NAME="TOP"> 
<BR> 
<H1>Link secara relatif, lihat contoh di bawah ini:</H1> 
<P> 
<A HREF="page_2.html">Klik di sini </A> jika mau ke halaman berikutnya </P> 
<H1>Link secara absolut, lihat contoh di bawah ini:</H1> 
<P> 
Klik <A HREF="http://www.facebook.com">facebook</A> menuju ke facebook </P> 
<P> 
<H1>Membuat window baru untuk link:</H1> 
Open <A HREF="http://www.mangosoft.com" TARGET="_blank"> my home page</A> 
with new window. 
</P><H1>Membuat link tanpa garis bawah:</H1><P> 
<A HREF="http://www.mangosoft.com" style=" textdecoration:none">Klik This Link </A> , Looks it's not use underline. 
</P></P> 
<H1>Membuat link pada suatu pesan mail:</H1> 
<BR> kirim email ke <a href="mailto:syafriadi82@gmail.com"> syafriadi82@gmail.com</a> 
</p> 
<BR><BR><BR><BR><BR><BR><BR><BR><BR><A HREF="#TOP"> kembali ke atas</A> 
</BODY> 
</HTML>