TUJUAN

1)     Memahami dan mengaplikasikan tag-tag HTML dasar dan format text  dalam sebuah web.

2)     Dapat berkreasi dengan beberapa image untuk membuat sebuah karya web personal.

ALAT DAN BAHAN

1) 1 (Satu) unit komputer

KESELAMATAN KERJA

1) Gunakanperalatansesuaidenganfungsinya.

2) Bekerjalahsesuaidengancarakerjaataupetunjuk yang telahditentukan.

LANGKAH KERJA

1)            Periksa semua kabel penghubung pada komputer.

2)            Hidupkan komputer dengan menekan saklar pada komputer, jangan menghidupkan komputer dengan memasukkan colokan ke stop kontak ketika saklar dalam keadaan On.

3)            Jika komputer telah hidup, buatlah satu folder di D dengan nama folder : no. Absen _spasi nama_siswa.

4)            Jalankan aplikasi Notepad.Start à all program à accessories à Notepad

5)            Buat file baruàKlik New File.

6)            Ketiklah tag HTML di bawah ini, perhatikan untuk penulisannya.

a.      Simpan file berikut di folder yang anda buat tadi dengan nama dasar.html

<html>

<head>

<title>Dasar</title>

</head>

<body>

</body>

</html>

b.      Dasar-1.html

<html>

<head>

<title>Dasar-1</title>

</head>

<body>

        Belajar bahasa pemrograman web ternyata mudah juga :)

</body>

</html>

c.       Dasar-2.html (Cobalah untuk warna text : maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua)

<html>

<head>

<title>Dasar-2</title>

</head>

<body text="red">

        Belajar bahasa pemrograman web ternyata mudah juga :)

</body>

</html>

d.      Dasar-3.html (Cobalah untuk warna background : maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua)

<html>

<head>

<title>Dasar-3</title>

</head>

<body text="red" bgcolor="black">

        Belajar bahasa pemrograman web ternyata mudah juga :)

</body>

</html>

e.      Dasar-4.html(sebelum mengetik file ini, anda copykan 2 gambar jpeg yang akan anda gunakan dalam file ini ke dalam folder yang sama)

<html>

<head>

<title>Dasar-4</title>

</head>

<!-image.jpg merupakan gambar yang akan di jadikan background->

<!- image.jpg harus berada satu folder dengan file ini->

<body text="red" bgcolor="aqua" background=" image.jpg">

        Belajar bahasa pemrograman web ternyata mudah juga :)

</body>

</html>

f.        Text-1.html

<html>

<head>

<title>Text-1</title>

</head>

<body>

Belajar bahasa pemgrograman web. Dengan mater dasar HTML. Dan JSP. <br>

<br>Belajar bahasa pemrograman web.<br>Dengan materi dasar HTML.<br>Dan JSP.

</body>

</html>

g.      Text-2.html

<html>

<head>

<title>Text-2</title>

</head>

<body>

Tampilan teks sebelum paragraf.

<p>Tampilan teks paragraf pertama.</p>

<p>Tampilan teks paragraf kedua.</p>

Tampilan teks setelah paragraf.

</body>

</html>

h.      Text-3.html

<html>

<head>

<title>Text-3</title>

</head>

<body>

<h1>Ini Heading-1</h1>

<h2>Ini Heading-2</h2>

<h3>Ini Heading-3</h3>

<h4>Ini Heading-4</h4>

<h5>Ini Heading-5</h5>

<h6>Ini Heading-6</h6>

</body>

</html>

i.        Text-4.html

<html>

<head>

<title>Text-4</title>

</head>

<body>

Ini normal teks<br>

<b>Ini teks tercetak tebal (bold)</b><br>

<i>Ini teks tercetak miring (italic)</i><br>

<u>Ini teks tercetak garis bawah (underline)</u>

</body>

</html>

j.        Text-5.html

<html>

<head>

<title>Text-5</title>

</head>

<body>

<pre>

Ini bentuk penulisan preformated text

      apapun bentuknya tulisan ini akan ditampilkan

pada web browser

                        seperti apa adanya, alias yang ditulis

</pre>

</body>

</html>

k.      Text-6.html

<html>

<head>

<title>Text-6</title>

</head>

<body>

<center>

Teks ini terletak di tengah layar web browser<br>

 dengan menggunakan element CENTER

</center>

</body>

</html>

l.        Text-7.html

<html>

<head>

<title>Text-7</title>

</head>

<body>

<font size="1">Teks ini mempunyai size=1</font><br>

<font size="2">Teks ini mempunyai size=2</font><br>

<font size="3">Teks ini mempunyai size=3</font><br> 

<font size="4">Teks ini mempunyai size=4</font><br>

<font size="5">Teks ini mempunyai size=5</font><br>

<font size="6">Teks ini mempunyai size=6</font><br>

<font size="7">Teks ini mempunyai size=7</font>

</body>

</html>

m.    Text-8.html

<html>

<head>

<title>Text-8</title>

</head>

<body>

<font color="fuchsia" size="+2" face="verdana">

Teks dengan format color=fuchsia; size=+2; face=verdana<br>

</font>

<font color="gray" size="6" face="algerian">

Teks dengan format color=gray; size=6; face=algerian<br>

</font>

<font color="red" size="-1" face="impact">

Teks dengan format color=red; size=-1; face=impact

</font>

</body>

</html>

n.      Text-9.html

<html>

<head>

<title>Text-9</title>

</head>

<body>

<hr align="left" size="6" width="30%">

<hr align="left" size="6" width="30%" noshade>

</body>

</html>

<html>

o.      urutan-1.html (cobalah tipe ul disc, circle dan square)

<html>

<head>

<title>Urutan-1</title>

</head>

<body>

Matakuliah TKJ Semester 1:

<ul type="circle">

     <li>Bahasa Inggris 1</li>

     <li>Matematika 1</li>

     <li>Jaringan Komputer 1</li>

     <li>Konsep Teknologi Informasi</li>

     <li>Keterampilan Komputer dan Pengelolaan Informasi</li>

     <li>Perangkat Keras Komputer</li>

     <li>Sistem Operasi</li>

</ul>

</body>

</html>

p.      urutan-2.html (cobalah tipe ol A, a, I, i dan 1 serta cobalah ubah start dari angka lain)

<html>

<head>

<title>Urutan-2</title>

</head>

<body>

Matakuliah TKJ Semester 1:

<ol start="1" type="a">

     <li>Bahasa Inggris 1</li>

     <li>Matematika 1</li>

     <li>Jaringan Komputer 1</li>

     <li>Konsep Teknologi Informasi</li>

     <li>Keterampilan Komputer dan Pengelolaan Informasi</li>

     <li>Perangkat Keras Komputer</li>

     <li>Sistem Operasi</li>

</ol>

</body>

</html>

q.      urutan-3.html

<html>

<head>

<title>Urutan-3</title>

</head>

<body>

<ol start="1" type="I">

<li>Matakuliah TKJ Semester 1:</li>

     <ol start="1" type="a">

        <li>Bahasa Inggris 1</li>

        <li>Matematika 1</li>

        <li>Jaringan Komputer 1</li>

        <li>Konsep Teknologi Informasi</li>

        <li>Keterampilan Komputer dan Pengelolaan Informasi</li>

        <li>Perangkat Keras Komputer</li>

        <li>Sistem Operasi</li>

     </ol>

</ol>

</body>

</html>

r.       Gambar-1.html

<html>

<head>

<title>Gambar-1</title>

</head>

<body>

<img width="160" height="160" src="image.jpg">

</body>

</html>

s.       Gambar-2.html (Dari Latihan gambar-1 ubah gambar menjadi yang terdapat dalam direktori /images dengan nama image.jpg)

<html>

<head>

<title>Gambar-2</title>

</head>

<body>

<img width="160" height="160" src="./images/image.jpg">

</body>

</html>

Pindahkan folder image ke drive D:

t.       Gambar-3.html

<html>

<head>

<title>Gambar-3</title>

</head>

<body>

<img width="80" height="80" src="image.jpg" align="left" border="8">

Kehadiran Web Teknisi Jardiknas dapat memudahkan penyebaran informasi antara Biro Perencanaan dan Kerja Sama Luar Negeri - dan anggota Teknisi Jardiknas.

</body>

</html>

TUJUAN

1)     Memahami dan mengaplikasikan tag-tag HTML dasar dan format text  dalam sebuah web.

2)     Dapat berkreasi dengan beberapa image untuk membuat sebuah karya web personal.

ALAT DAN BAHAN

1) 1 (Satu) unit komputer

KESELAMATAN KERJA

1) Gunakanperalatansesuaidenganfungsinya.

2) Bekerjalahsesuaidengancarakerjaataupetunjuk yang telahditentukan.

LANGKAH KERJA

1)            Periksa semua kabel penghubung pada komputer.

2)            Hidupkan komputer dengan menekan saklar pada komputer, jangan menghidupkan komputer dengan memasukkan colokan ke stop kontak ketika saklar dalam keadaan On.

3)            Jika komputer telah hidup, buatlah satu folder di D dengan nama folder : no. Absen _spasi nama_siswa.

4)            Jalankan aplikasi Notepad.Start à all program à accessories à Notepad

5)            Buat file baruàKlik New File.

6)            Ketiklah tag HTML di bawah ini, perhatikan untuk penulisannya.

a.      Simpan file berikut di folder yang anda buat tadi dengan nama dasar.html

<html>

<head>

<title>Dasar</title>

</head>

<body>

</body>

</html>

b.      Dasar-1.html

<html>

<head>

<title>Dasar-1</title>

</head>

<body>

        Belajar bahasa pemrograman web ternyata mudah juga :)

</body>

</html>

c.       Dasar-2.html (Cobalah untuk warna text : maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua)

<html>

<head>

<title>Dasar-2</title>

</head>

<body text="red">

        Belajar bahasa pemrograman web ternyata mudah juga :)

</body>

</html>

d.      Dasar-3.html (Cobalah untuk warna background : maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua)

<html>

<head>

<title>Dasar-3</title>

</head>

<body text="red" bgcolor="black">

        Belajar bahasa pemrograman web ternyata mudah juga :)

</body>

</html>

e.      Dasar-4.html(sebelum mengetik file ini, anda copykan 2 gambar jpeg yang akan anda gunakan dalam file ini ke dalam folder yang sama)

<html>

<head>

<title>Dasar-4</title>

</head>

<!-image.jpg merupakan gambar yang akan di jadikan background->

<!- image.jpg harus berada satu folder dengan file ini->

<body text="red" bgcolor="aqua" background=" image.jpg">

        Belajar bahasa pemrograman web ternyata mudah juga :)

</body>

</html>

f.        Text-1.html

<html>

<head>

<title>Text-1</title>

</head>

<body>

Belajar bahasa pemgrograman web. Dengan mater dasar HTML. Dan JSP. <br>

<br>Belajar bahasa pemrograman web.<br>Dengan materi dasar HTML.<br>Dan JSP.

</body>

</html>

g.      Text-2.html

<html>

<head>

<title>Text-2</title>

</head>

<body>

Tampilan teks sebelum paragraf.

<p>Tampilan teks paragraf pertama.</p>

<p>Tampilan teks paragraf kedua.</p>

Tampilan teks setelah paragraf.

</body>

</html>

h.      Text-3.html

<html>

<head>

<title>Text-3</title>

</head>

<body>

<h1>Ini Heading-1</h1>

<h2>Ini Heading-2</h2>

<h3>Ini Heading-3</h3>

<h4>Ini Heading-4</h4>

<h5>Ini Heading-5</h5>

<h6>Ini Heading-6</h6>

</body>

</html>

i.        Text-4.html

<html>

<head>

<title>Text-4</title>

</head>

<body>

Ini normal teks<br>

<b>Ini teks tercetak tebal (bold)</b><br>

<i>Ini teks tercetak miring (italic)</i><br>

<u>Ini teks tercetak garis bawah (underline)</u>

</body>

</html>

j.        Text-5.html

<html>

<head>

<title>Text-5</title>

</head>

<body>

<pre>

Ini bentuk penulisan preformated text

      apapun bentuknya tulisan ini akan ditampilkan

pada web browser

                        seperti apa adanya, alias yang ditulis

</pre>

</body>

</html>

k.      Text-6.html

<html>

<head>

<title>Text-6</title>

</head>

<body>

<center>

Teks ini terletak di tengah layar web browser<br>

 dengan menggunakan element CENTER

</center>

</body>

</html>

l.        Text-7.html

<html>

<head>

<title>Text-7</title>

</head>

<body>

<font size="1">Teks ini mempunyai size=1</font><br>

<font size="2">Teks ini mempunyai size=2</font><br>

<font size="3">Teks ini mempunyai size=3</font><br> 

<font size="4">Teks ini mempunyai size=4</font><br>

<font size="5">Teks ini mempunyai size=5</font><br>

<font size="6">Teks ini mempunyai size=6</font><br>

<font size="7">Teks ini mempunyai size=7</font>

</body>

</html>

m.    Text-8.html

<html>

<head>

<title>Text-8</title>

</head>

<body>

<font color="fuchsia" size="+2" face="verdana">

Teks dengan format color=fuchsia; size=+2; face=verdana<br>

</font>

<font color="gray" size="6" face="algerian">

Teks dengan format color=gray; size=6; face=algerian<br>

</font>

<font color="red" size="-1" face="impact">

Teks dengan format color=red; size=-1; face=impact

</font>

</body>

</html>

n.      Text-9.html

<html>

<head>

<title>Text-9</title>

</head>

<body>

<hr align="left" size="6" width="30%">

<hr align="left" size="6" width="30%" noshade>

</body>

</html>

<html>

o.      urutan-1.html (cobalah tipe ul disc, circle dan square)

<html>

<head>

<title>Urutan-1</title>

</head>

<body>

Matakuliah TKJ Semester 1:

<ul type="circle">

     <li>Bahasa Inggris 1</li>

     <li>Matematika 1</li>

     <li>Jaringan Komputer 1</li>

     <li>Konsep Teknologi Informasi</li>

     <li>Keterampilan Komputer dan Pengelolaan Informasi</li>

     <li>Perangkat Keras Komputer</li>

     <li>Sistem Operasi</li>

</ul>

</body>

</html>

p.      urutan-2.html (cobalah tipe ol A, a, I, i dan 1 serta cobalah ubah start dari angka lain)

<html>

<head>

<title>Urutan-2</title>

</head>

<body>

Matakuliah TKJ Semester 1:

<ol start="1" type="a">

     <li>Bahasa Inggris 1</li>

     <li>Matematika 1</li>

     <li>Jaringan Komputer 1</li>

     <li>Konsep Teknologi Informasi</li>

     <li>Keterampilan Komputer dan Pengelolaan Informasi</li>

     <li>Perangkat Keras Komputer</li>

     <li>Sistem Operasi</li>

</ol>

</body>

</html>

q.      urutan-3.html

<html>

<head>

<title>Urutan-3</title>

</head>

<body>

<ol start="1" type="I">

<li>Matakuliah TKJ Semester 1:</li>

     <ol start="1" type="a">

        <li>Bahasa Inggris 1</li>

        <li>Matematika 1</li>

        <li>Jaringan Komputer 1</li>

        <li>Konsep Teknologi Informasi</li>

        <li>Keterampilan Komputer dan Pengelolaan Informasi</li>

        <li>Perangkat Keras Komputer</li>

        <li>Sistem Operasi</li>

     </ol>

</ol>

</body>

</html>

r.       Gambar-1.html

<html>

<head>

<title>Gambar-1</title>

</head>

<body>

<img width="160" height="160" src="image.jpg">

</body>

</html>

s.       Gambar-2.html (Dari Latihan gambar-1 ubah gambar menjadi yang terdapat dalam direktori /images dengan nama image.jpg)

<html>

<head>

dfgfsgs<title>Gambar-2</title>

</head>

<body>

<img width="160" height="160" src="./images/image.jpg">

</body>

</html>

Pindahkan folder image ke drive D:

t.       Gambar-3.html

<html>

<head>

<title>Gambar-3</title>

</head>

<body>

<img width="80" height="80" src="image.jpg" align="left" border="8">

Kehadiran Web Teknisi Jardiknas dapat memudahkan penyebaran informasi antara Biro Perencanaan dan Kerja Sama Luar Negeri - dan anggota Teknisi Jardiknas.

</body>

</html>