Info Link

 

KET KOMPUTER

Untuk Informasi yang dibutuhkan, silahkan Download Link berikut ini :

1. Latihan Soal USEK

 Latihan 1

Latihan 2

Latihan 3

Latihan 4

Latihan 5

2. Latihan UKK

-Latihan 1

1. Materi Ajar

  • Ms. Word
  • Ms. Access
  • HTML
  • Internet
  • Corel
  • Photoshop
  • Power Point

2. Latihan Soal

  • html

3. Latihan Praktikum

4. Niai

 

 

 


 

Pertemuan pertama 14-01-2013

 

HTML

 

HTML adalah bahasa untuk mendeskripsikan web.

HTML singkatan dari Hyper Teks Markup Language.

HTML bukan bahasa pemrograman, ini adalah bahasa markup.

Sebuah bahasa markup adalah serangkaian tag markup, HTML menggunakan tag markup untuk menjelaskan halaman web.

Markup tag HTML biasanya disebut juga Tag HTML

HTML tag adalah kata kunci dikelilingi sudut kurung seperti <html>

HTML tag biasanya berbentuk pasangan seperti <b> dan </b>

Tag yang pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir.

Dokumen HTML disebut juga Web Pages atau halaman web.

Dokumen HTML berisi tag HTML dan teks biasa yang berekstensi .html atau .htm

Tujuan dari web browser ( seperti IE atau Firefox ) adalah untuk membaca dokumen HTML dan menampilkan mereka sebagai halaman web.

Beberapa software yang biasa digunakan untuk mengedit HTML antara lain :

  1. Notepad
  2. Frontpage
  3. Dreamweaver

 

 

Perhatikan html berikut ini :

 

<html>

<head>

<title>Judul Website</title>

</head>

<body>

<h1> Judul Pertama Saya </h1>

<p> Paragraf pertama saya </p>

</body>

</html>

 

Keterangan :

  • Teks antara <html> dan </html> menjelaskan halaman web
  • Teks antara <title> dan </title> menjelaskan title halaman web
  • Teks antara <body> dan </body> adalah halaman yang terlihat konten
  • Teks antara <h1> dan </h1> ditampilkan sebagai sebuah Judul
  • Teks antara <p> dan </p> ditampilkan sebagai sebuah paragraph.

 

Judul HTML didefiniskan dengan tag <h1>

Paragraf HTML didefinisikan dengan tag <p

 


 

 

 

 

Pertemuan Kedua 21012013

 

HTML STYLES

HTML Style Attribute

Tujuan dari Style Attribute adalah untuk menyediakan cara yang umum untuk gaya semua elemen HTML.

Contoh Style HTML

Style = “background-color:yellow”  ( untuk mendefinisikan warna background )

Contoh penulisan untuk style elemen <body>

<html>

<body style =”background-color:yellow”>

</body>

</html>

 

 

Style = “font-family : Times” ( untuk mendefinisikan jenis font )

Contoh penulisan untuk style elemen <h1>

<html>

<body >

<h1 style=”font-family:verdana”> Contoh Font verdana </h1>

</body>

</html>

 

Style = “font-size: 10px” (untuk mendefinisikan ukuran font )

Contoh penulisan untuk style element <p>

<html>

<body >

<p style=”font-size:10px”> Contoh Font verdana </p>

</body>

</html>

 

Style = “text-align : Center “ ( untuk mendefinisikan posisi teks )

Contoh penulisan

<html>

<body >

<p style=”text-align:center”> Contoh paragraph center </p>

<p style=”text-align:center”> Contoh paragraph center sekali </p>

</body>

</html>

 

Contoh penulisan gabungan ( jenis huruf, warna dan ukuran text)

<html>

<body>

<h1 style=”font-family:arial”> contoh font arial </h1>

<p style=”font-family:verdana;color:red; font-size:12px;”> paragraph gabungan </p>

</body>

</html>

 

 

 

Pertemuan Ke 3  28012013

HTML FORMAT TEKS

 

 

 

ELEMENT BR (Line Break)

Element BR berfungsi untuk ganti baris. Dan element BR ini tidak mempunyai tag penutup.

Sintaks:

<br>

 

ELEMENT P (Paragraph)

Element P berfungsi untuk ganti paragraf yang diikuti dengan baris kosong di awal dan akhir paragraf. Tag

penutup </p> sifatnya optional jika suatu paragraf diikuti oleh paragraf berikutnya. Jika tag </p> diabaikan,

maka paragraf itu tidak akan diikuti dengan baris kosong di akhir paragraf.

 

ELEMENT H1,H2,H3,H4,H5,H6 (Header)

Element H1,H2,H3,H4,H5,H6 berfungsi untuk membuat header dengan format 6 jenis ukuran huruf dan

tercetak tebal. Nilai ukuran huruf terbesar adalah H1 dan terkecil adalah H6. Element ini mempunyai attribute

 

ELEMENT B (Bold)

Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold).

Sintaks:

<b>

..........................

</b>

 

ELEMENT I (Italic)

Element I berfungsi untuk membuat tampilan teks tercetak miring (italic).

Sintaks:

<i>

..........................

</i>

 

ELEMENT U (Underline)

Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline).

Modul praktikum html 4

Sintaks:

<u>

..........................

</u>

 

 

 

Pertemuan Ke - 4

11 - 02 - 2013

 

ELEMENT PRE (Preformated text)

Element PRE berfungsi untuk menampilkan teks seperti apa adanya.

Sintaks:

<pre>

..........................

</pre>

 

 

ELEMENT CENTER

Element CENTER berfungsi untuk menampilkan teks dengan posisi horizontal ditengah.

Sintaks:

<center>

..........................

</center>

 

ELEMENT HR (Horizontal Rule)

Element HR berfungsi untuk membuat suatu garis horizontal. Element ini tidak mempunyai tag penutup dan

mempunyai attribute align untuk menempatkan posisi secara horizontal ("left", "center", "right"), size untuk

ukuran ketebalan garis ("pixel"), width untuk ukuran panjang garis ("persen"), dan noshade (garis solid).

Sintaks:

<hr align="left"|"center"|"right" size="pixel" width="persen" noshade>

 

Latihan 1:

Menampilkan teks dengan ganti baris (element BR):

Belajar bahasa pemrograman web. Dengan materi dasar HTML. Dan JSP

Belajar bahasa pemrograman web.

Dengan materi dasar HTML.

Dan JSP.

Nama file: latihan2_1.html

<html>

<head>

<title>Latihan2-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>

 

Latihan 4:

Menampilkan teks sebagai header (element H):

Ini Heading-1

Ini Heading-2

Ini Heading-3

Ini Heading-4

Ini Heading-5

Ini Heading-6

Nama file: latihan2_4.html

<html>

<head>

<title>Latihan2-4</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>

 

 

Latihan 6:

Menampilkan teks dalam bentuk apa adanya (element PRE):

Ini bentuk penulisan preformated text

apapun bentuknya tulisan ini akan ditampilkan

pada web browser

seperti apa adanya, alias yang ditulis

Nama file: latihan2_6.html

<html>

<head>

<title>Latihan2-6</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>

 

Latihan 10:

Menampilkan garis horizontal menggunakan elemen HR:

Nama file: latihan2_10.html

<html>

<head>

<title>Latihan2-10</title>

</head>

<body>

Modul praktikum html 8

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

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

</body>

</html>

Tugas tambahan:

Buatlah garis horizontal di bawah ini dengan size=5, align=center dengan urutan width 40%, 20%, 10%:

 

Pertemuan Ke 5

18-02-2013

 

HTML DAFTAR URUTAN

 

ELEMENT OL (Orderd List)

Element OL berfungsi untuk membuat nomor daftar urut. Element ini mempunyai attribute yaitu start, dan type.

Attribute start berfungsi untuk memberikan nilai awal dari daftar urutan, attribute type berfungsi untuk memilih

bentuk daftar urutan yaitu A untuk abjad huruf besar, a untuk abjad huruf kecil, I untuk abjad romawi besar, i

untuk abjad romawi kecil, 1 untuk angka decimal (default: start="1" type="1" ). Dalam element OL harus

terdapat beberapa element LI.

Sintaks:

<ol start="number" type="A"|"a"|"I"|"i"|"1">

........................

</ol>

 

ELEMENT UL (Unordered List)

Element UL berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet). Element ini mempunyai

attribute yaitu type. Attribute type berfungsi untuk memilih bentuk bullet yang digunakan. Nilai dari pada

attribute type ini adalah "circle", "square" dan "disc" . Dalam element UL harus terdapat beberapa element LI.

Sintaks:

<ul type="circle"|"square"|"disc">

..........................

</ul>

 

 

ELEMENT LI (List Item)

Element LI merupakan isi dari pada daftar. Element ini harus berada di dalam element OL atau UL. Element ini

mempunyai attribute type dan value. Nilai attribute type adalah A,a,I,i,1,circle,square,disc dan attribute value

berisikan nilai nomor urutan dari attribute type.

Sintaks:

<li type="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"disc">

..........................

</li>

 

 

 

 

 

<html>

<head>

<title>Latihan3-1</title>

</head>

<body>

Matakuliah TKJ Semester 1:

<ol>

<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>

 

Ol start

 

<html>

<head>

<title>Latihan3-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>

 

 

HTML IMAGE (GAMBAR)

ELEMENT IMG

Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag penutup dan mempunyai

attribute yaitu align, alt (teks alternatif jika gambar tidak tampil), border, height, width, hspace (jarak kosong

posisi horizontal, vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama filenya).

Sintaks:

<img

align="left"|"right"|"top"|"middle"|"bottom"

alt="text"

border="pixel"

width="pixel"|"%"

height="pixel"|"%"

hspace="pixel"

vspace="pixel"

src="uri">

Latihan 1:

Tampilkan gambar image027.jpg dengan ukuran width dan height 160pixel dan border 8pixel :

Nama file: latihan5_1.html

 

<html>

<head>

<title>Latihan5-1</title>

</head>

<body>

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

</body>

</html>

Tugas tambahan:

Letakkan gambar tersebut ke kanan, setelah itu ke kiri.

Latihan 2:

Dari Latihan 1 ubah gambar menjadi yang terdapat dalam direktori /images dengan nama image050.jpg

Nama file: latihan5_2.html

<html>

<head>

<title>Latihan5-1</title>

</head>

<body>

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

</body>

</html>

Latihan 3:

Tampilkan gambar image027.jpg dengan ukuran width dan height 80pixel dan border 8pixel serta teks seperti di

bawah ini :

Nama file: latihan5_3.html

<html>

<head>

<title>Latihan5-3</title>

</head>

<body>

<img width="80" height="80" src="image027.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. Keuntungan bila sistem jaringan

informasi ini terbentuk, komunikasi antar Biro Perencanaan dan Kerja Sama Luar Negeri dan Provider

dan anggota Teknisi Jardiknas akan lebih cepat terjalin, informasi dapat dengan cepat sampai dan tepat

sasaran pula. Salam Pendidikan...! Dr. Ir. Gatot Hari Priowirjanto

</body>

</html>