Pemrograman Web

<html>
<head>
<title>penggunaan ALIGN</title>
</head>
<body>
<table border="1">
<caption>Daftar wianiaga</caption>
<tr>
<th colspan="2" rowspan="2">WIRANIAGA</th>
<th colspan="3">KOTA</th>
</tr>
<tr>
<th>SEMARANG</th>
<th>Kudus</th><th>Solo</th>
<tr>
<tr>
<th rowspan="2">Jenis Kelamin</th>
<th>Pria</th>
<td aligh="right">30</td>
<td aligh="right">20</td>
<td aligh="right">30</td>
</tr>
<tr>
<th>Wanita</th>
<td aligh="right">20</td>
<td aligh="right">8</td>
<td aligh="right">18</td>
</tr>
</table>
</body>
</html>

Pemrograman Dasar

Pemrograman Dasar

MENGENAL TIPE DATA

Dalam membuat algoritma,algoritma yang menjadi cetak biru alir program yang kelak akan dikonersikan ke dalam sebuah kode bahasa pemrograman pasti akan membutuhkan tipe data. Tipe data adalah sebuah karkter atau jenis dari objek yang dimiliki jangkauan nilai memori dalam computer. Pemanggilan tipe data igunakan intuk memanpulasi sebuah objek yang diawali oleh variable dan konstanta. Variabel adalah nama bentuk yang dibuat oleh pemrograman dengan ketentuan:

·         Diawali dengan karakter bukan angka numeric

·         Dapat berupa gabungan antara karakter dan angka numeric

·         Tidak boleh menggunakan spasi

Variabel dan konstanta adalah sama, tetapi yang membedakan adalah nilai konstanta bersifat tetap karena telah dideklarasi pada bagian header program. Variable bersifat dinamis karena bisa berubah ubah sesuai input pengguna.Berikut dua jenis tipe data,

1.Tipe Data Sederhana (Predefined Data Type)

a.      Jenis bilangan bulat

Karakteristik utama bilangan bulat adalah nilai numeric yang tidak mengandung pecahan decimal, seperti “12,10,dan 13”. Setiap tipe data yang termasuk jenis bilangan bulat memiliki kapasitas penyimpanan memori computer sehingga sangat berpengaruh terhadap jangkauan nilai yang dapat digunakan. Sebagai contoh,tipe data byte membutuhkan kapasitas memori sebesa 1 byte,dimana 1 byte=8 bit memori. Setelah dilakukan konversi biner ke decimal,8 bit memori=225 desimal. Tipe data byte memiliki jangkauan (range)data maksimal 225 desimal. Table di bawah menunjukkan daftar tipe data jenis bilangan bulat.

Tipe Data	Memori	Jangkauan(Range)
Byte	Unsigned 8 bit	0…225
Shortint	Signed 8 bit	-128…127
Word	Unsigned 16 bit	0…65535
Integer	Signed 16 bit	-32768…32767
Longint	Signed 32 bit	-2147483648…2147483648

b.      Jenis bilangan real

Ciri khas bilangan real adalah “bilangan yang dapat mengandung nilai pecahan dalam decimal.” Sebagai contoh 2.45. nilai pecahan decimal dalam pemrograman diawali tanda titik “.” Setelah nilai bilangan bulat. Table dibawah ini menunjukkan beberapa tipe data berjenis bilangan real.

Tipe Data	Memori	Jangkauan
Single	4 byte	1.5x10-45…3.4x1038
Double	8 byte	5.0x10-324…1.7x10308
Real	6 byte	2.9x10-39…1.7x1038
Extended	10 byte	3.4x10-4932…1.1x104932

c.       Jenis bilangan logika

Tipe data yang lebih dikenal sebagai nilai data boolear hanya memiliki dua data, yaitu true dan false. Nilai true diwakili angka 1,sedangkan nilai false diwakili angka 0.

d.      Jenis data karakter

Semua karakter mulai dari abjad ‘a’…’z’…’A’…’Z’,angka ‘0’..’9’,sampai simol khusus seperti ‘!’,’@’,’#’,’$’,’%’,’^’,’&’,’*’,’,’.’,’~’,proses penetapan variabel memiliki nilai data karakter adalah selalu diapit dengan tanda petik satu. Karakter kosong atau null mempunyai panjang karakter nol dengan bentuk karakter ‘ ‘. Perhatikan contoh penulisan berikut,

Deklarasi

            X=char{variabel x bertipe data character}

Algoritma

            X<- ‘z’

e.      Jenis data string

“Tipe data ini merupakan deretan atau gabungan beberapa karakter sehingga membentuk sebuah kalimat”. Perhatikan contoh berikut

Deklarasi

            X=string{variabel x bertipe data string Algoritma}

            X<- ‘Andi Novianto’ {nilai data variabel x adalah string ‘Andi Novianto’}

2.Tipe Data Bentukan (User-Defined Type)

Tipe ini merupakan sebuah tipe data yang terbentuk dari gabungan dari beberapa tipe data sederhana seperti yang telah disebutkan sebelumnya. Ada dua jenis tipe data bentukan,yakni tipe data dengan nama baru dan tipe data terstruktur

Pemprograman web

<html>

<head>

<title>Tabel</title>

</head>

<body>

berikut contoh tabel dengan rowspan dan colspan

<table width=80% border=2 cellspacing=0 cellpadding=0>

<tr>

<td>baris 1 kolom 1</td>

<td>baris 1 kolom 2</td>

</tr>

<tr>

<td colspan=2>baris 2 kolom 1</td>

</tr>

<tr>

<td rowspan=2baris 3 kolom 1</td>

<td>baris 3 kolom 2</td>

</tr>

</table>

</body>

</html>

Pw

<html>
<head>

<title>List Ordered Type</title>

</head>

<body>

<ol>

<li>Landasan Hukum/Legal Operasional</li>

<li>Aspek Institusional</li>

<li>Cakupan Pelayanan</li>

<li>Aspek Teknis dan Teknologi</li>

<ol type="a">

<li>Tempat Penampungan Sementara (TPS)</li>

<li>Tempat Pemprosesan Akhir (TPA)</li>

</ol>

<li>Peran Serta Masyarakat dan Jender dalam Pengolahan Sampah</li>

<li>Permasalahan dalam Pengolahan Sampah</li>

</ol>

</body>

</html>

Pemprograman Web

<head>

<title>List Kombinasi</title>

</head>

<body>

Tipe - Tipe Tulisan Sandi

<ol>

<li>Sandi Abjad/Sandi Balik</li>

<li>Sandi Koordinat</li>

<li>Sandi Angka</li>

<li>Sandi Napoleon</li>

<li>Sandi Morse</li>

<ul type="Circle">

<li>Sandi Rumput</li>

<li>Sandi Bangun(Bentuk)</li>

<li>Sandi Kimia</li>

<li>Sandi Morse 1/</li>

</ul>

<li>Sandi Semaphore</li>

<li>Sandi Jam</li>

<li>Sandi Nomor</li>

<li>Sandi Geser</li>

<li>Sandi Naik Turun Tingkat</li>

</ol>

</body>

</html>

PW

<html>
<head>
<title>unordered lish</title>
</head>
<body>

Macam macam peripheral
<ul type="disk">
<li>Input</li>
<li>Mouse</li>
<li>Keryboard</li>
<li>Touchpad</li>
<li>Microphone</li>
<li>Webcam</li>
<li>Scanner</li>
<li>Barcode</li>
<li>Kamera digital</li>
<li>Light pen</li>
<li>Joystick</li>
<li>Output</li>
<li>Monitor</li>
<li>Printer</li>
<li>Proyektor</li>
<li>Speaker</li>
<li>Plotter</li>

</body>
</html>

PW

<html>
<head>
<title>unordered lish</title>
</head>
<body>

Macam macam peripheral
<ul type="circle">
<li>Input</li>
<li>Mouse</li>
<li>Keryboard</li>
<li>Touchpad</li>
<li>Microphone</li>
<li>Webcam</li>
<li>Scanner</li>
<li>Barcode</li>
<li>Kamera digital</li>
<li>Light pen</li>
<li>Joystick</li>
<li>Output</li>
<li>Monitor</li>
<li>Printer</li>
<li>Proyektor</li>
<li>Speaker</li>
<li>Plotter</li>

</body>
</html>

PW

<html>
<head>
<title>unordered lish</title>
</head>
<body>

Macam macam peripheral
<ul type="square">
<li>Input</li>
<li>Mouse</li>
<li>Keryboard</li>
<li>Touchpad</li>
<li>Microphone</li>
<li>Webcam</li>
<li>Scanner</li>
<li>Barcode</li>
<li>Kamera digital</li>
<li>Light pen</li>
<li>Joystick</li>
<li>Output</li>
<li>Monitor</li>
<li>Printer</li>
<li>Proyektor</li>
<li>Speaker</li>
<li>Plotter</li>
</body>
</html>

pemrograman web

STRUKTUR ALOGARITMA DENGAN PSEUDOCODE

        Pseudo memiliki arti tidak sebenarnya,semu,atau samar.Jadi,pseudocode adalah sebuah notasi kode tidak sebenarnya,tetapi mewakili logika alogaritma bahasa pemrograman yang akan digunakan.Penulisan pseudocode memiliki beberapa pedoman sebagai berikut:

1.  Memiliki bagian header(kepala)yang menunjukkan judul alogaritma,komentar,dan deklarasi(lihat penjelasa sebelumnya)

2.  Memiliki bagian badan alogaritma yang merupakan inti drip roses

3.  Memiliki bagian akhir dip roses alogaritma yang menandakan bahwa proses alir program alogaritma telah berakhir

4.  Pada saat mendeklarasian variable,gunakan format sebagai berikut:

Deklarasi

    Nama_variabel:tipe data

Contoh:

    X:Integer

5.Assignmenth(pernyataan/penugasan)atau pada saat memberikan volue pada variable dan konstanta,gunakan format penulisan berikut:

Nama_variabel <-       value

Contoh:

X<- 3

Artinya memberikan nilai 3 kepala variable x

6.Lebih banyak menggunaka bahasa inggris,sebagai contoh perintah:

Ø Read,untuk memasukkan data dari keyboard

Ø Write,menampilkan data variable pada monitor

Ø While,untuk perulangan yang artinya akan dilakukan secara benar

Ø If then,artinya jika…maka akan mode penyelekseian kebenaran

7.Untuk menulis komentar diawali dengan karakter”{“dan diakhiri dengan karakter”}”

pemrograman web

STRUKTUR ALOGARITMA DENGAN NATURAL LANGUAGE

          Struktur penulisan dengan metode natural language lebih mendekati penulisan algoritma bergaa bahasa manusia yang digunakan dalam keseharian.Langkah-langkah yang dibuat lebih deskriptif,sigkat,padat,dan mudah dimenerti.

          Notasi penulisan bisa diganti dengan kebutuhan dan kemampuan perancang dengan pendeskripsikan pemikirannya.Sebagai contoh notasi”Tetapkan variable x dengan tipe data integer”dapat diganti dengan”Masukkan data 0 ke variable x”.

Adapun keuntungan penulisan natural language,antara lain:

·       Mudah penulisannya

·       Sederhana

·       Tidak sulit mempelajarinya karena tidak memiliki standar dalam penulisannya

Kerugian metode penulisan natural language:

·       Gaya penulisan setiap programmer tidak sama

·       Pemahaman dalam pembacaan alogaritma menjadi sulit

·       Sukar untuk menerjemahkannya kedalam betuk kode programmer

pemrograman web

STRUKTUR ALOGARITMA DENGAN FLOWCHART

          Alogaritma pada awalnya dimodelkan dalam bentuk bangunan ruang oleh para ilmuan ketika computer mulai berkembang.Model penulisan alogaritma ini disebut sebagai bagan alir atau flowchart.Pedoman yang harus diikuti oleh perancang alogaritma ketika menggunakan metode ini adalah sebagai berikut:

1.Peletakkan symbol bagan alir(flowchart)sebaiknya dimulai dari atas kebawah dan dimulai dari sebelah kiri suatu halaman

2.Kegiatan didalam symbol bagan alir(flowchart)harus ditunjukkan dengan jelas nama kegiatan yang jelas

3.Harus dimulai dari symbol start(awal)dan diakhiri dengan symbol end(akhir)

4.Setiap kegiatan harus memiliki input dan menghasilkan output

5.Penjelasan dalam symbol flowchart sebaiknya menggunakan kata kerj,misalnya:

1.    “Entry data siswa”

2.    “Hitung A+B”

6.Setiap kegiatan dibagan alir(flowchart)harus memiliki alur data proses secra rinci dann jelas

7.Kegiatan yang terpotong dan akan disambung ditempat lain harus ditunjukkan dengan jelas menggunakan symbol penghubung

Lima jenis bagan alir(flowchart),adalah sebagai berikut:

1.Bagan alir system(system flowchart)yang menjelaskan urutan setiap proedur yag dapat pada system

2.Bagan alir dokuen(dokumen flowchart)yang menunjukkan arah aliran data laporan dan folmulir oada subprogram atau proses.

3.Bagan alir skematik(schematic flowchart)memiliki kemiripan dengan bagan alir system,yaitu untuk menggambarkan skema aliran data pada prosedur didalam system

4.Bagan alir program(program flowchart)berguna untuk melakukan analisis system dengan menggambarkan proses dalam suatu prosedur program

5.Bagan alir proses(process flowchart)merupakan bagan yang sering digunakan dalam aliran proses pada teknik industri.

Simbol sombol yang digunakan pada penulisan flowchart

Berikut ini keuntungan metode flowchart

·       Memudahkan setiap orang untuk menbaca dan memahami alogarirma karena adanya standardisasi symbol dalam perancangan

·       Cocok untuk alogaritma dengan skala kerumitan tingkat rendah

·       Aliran proses program cukup rinci dengan pemodelan secara visual

Metode flowchart ternyata mempunyai beberapa kerugian,diantaranya:

·       Tidak cocok untuk program yang kompleks

·       Membutuhkan tools khusus untuk merancang alogaritma

·       Cukup sulit untuk menerjemahkan kedalam entuk kode program sebenarnya

Pedoman dalam merancang alogaritma dengan bagan alir program adalah sebagai berikut:

1.    Bagan alir dimulai dengan symbol start atau elips dan diakhiri dengan symbol end atau elips

2.    Untuk memulai suatu proses secara computing,diperlukan inisialisasi atau proses deklarasi

3.    Secara input akan dilakukan proses secara computer dengan symbol persegi panjang dan setiap proses akan menghasilkan output

Pemrograman Web

<html>
<head>
<title>odered list</title>
</head>
<body>
<ol type="A">

Langkah langkah menjalankan notepad
<li>Klik start kemudian all program</li>
<li>Klik accessories</li>
<li>Klik notepad</li>

</body>
</html>

Pemrograman Web

<html>
<head>
<title>odered list</title>
</head>
<body>
<ol type="a">

Langkah langkah menjalankan notepad
<li>Klik start kemudian all program</li>
<li>Klik accessories</li>
<li>Klik notepad</li>

</body>
</html>

Pemrograman Web

<html>
<head>
<title>odered list</title>
</head>
<body>
<ol type="i">

Langkah langkah menjalankan notepad
<li>Klik start kemudian all program</li>
<li>Klik accessories</li>
<li>Klik notepad</li>

</body>
</html>

Pemrograman Web

<html>
<head>
<title>odered list</title>
</head>
<body>
<ol type="I">

Langkah langkah menjalankan notepad
<li>Klik start kemudian all program</li>
<li>Klik accessories</li>
<li>Klik notepad</li>

</body>
</html>

Pemrograman Web

 Algoritma pemograman
-konsep algoritma      istilah algoritma berasal dari kata " algorisma " yang merupakan pangglan populer bangsa eropa terhadap seorang ahli matematika , namun dalam perkembangannya istilah " algorisma " berubah menjadi " algorithm " karena berkaitan dengan istilah dalam matematika . Algoritma adalah urutan langkah - langkah logis penyelesaian masalah yang disusun secara sistematis dan logis
  Struktur penulisan algoritma
untuk menjadi seorang memrograman mesin komputer , seseorang harus mengera konsep algoritma dan mencapainnya . Ada beberapa metode penulisan dalam rancang algoritma . yaitu :
 1. menggunakan bahasa alami / natural language ( bahasa nggris , indonesia atau bahasa lainnya )
 2. menggunakan bagan alir dokumen atau flowchart dan
 3. menggunakan notasi pseudocode
    Struktur algoritma terdiri dari 3 bagian
1. bagian kepala atau header
        bagian ini menandakan awal permulaan sebuah algoritma
2. bagian pendeklarasian
       pada bagian ini merupakan tahap pernyataan dan penentuan berbagai jenis variable
3. bagian badan algoritma
       bagian ini menunjukan untaian proses yang dilakukan .

quotation

<html>
<head>
<title>quotation</title>
</head>
<body>
tulisan ini BUKAN quotation
<blockquote>
tulisan ini adalah quotation <br>
tulisan ini adalah quotation <br>
tulisan ini adalah quotqion  <br>
</blockquote>
</body>
</html>

pre format+

<html>
<head>
<title>Tag Preformat</title>
</head>
<body>
<pre>
This section provides a brief overview of the menus in Dreamweaver.
  The File menu and Edit menu contain the standard menu items for file and edit
menus,  such as new , open, save, save all, cut, copy, paste,
undo, and redo
</pre>
<pre>
ini adalah
preformatted text.
menampilkan        spasi
dan line break apa adanya
</pre>
<p>tag PRE cocok digunakan untuk menampilkan kode bahasa
pemrograman komputer :</p>
<pre>
for i = 1 to 10
  print i
next i
</pre>
</body>
</html>

pre format

<html>
<head>
>tittle>preformat</tittle>
</head>
<body>
<h2>daftar harga keladi :</h2>
<pre>
red flash ......... 35.000
red fire .......... 60.000
fannie munson ..... 60.000
</pre>
harga sewaktu-waktu bisa berubah.
</body>
</html>

format teks

<html>
<head>
<tittle>format teks</tittle>
</head>
<body>
<p>
<b>tulisan ini ditebalkan (bold)</b>
<p>
<b>tulisan ini ditebalkan
<strong></strong>
</p>
<p>
<em>tulisan ini miring (emphasize)
</em>
</p>
<p>
<i>tulisan ini besar (big)</big>
</p>
<p>
</p>tulisan ini
_subscript
</p>
</body>
</html>

HTML PARAGRAF

HTML PARAGRAF

<!DOCTYPE html>

<html>

<head>

<tittle>paragraf</tittle>

</head>

<body>

<p>Ini adalah paragraf.Ini adalah paragraf.Ini adalah paragraf.Ini adalah paragraf.Ini adalah paragraf.Ini adalah paragraf.</p>

<p>Ini paragraph lainnya.Ini paragraph lainnya.Ini paragraph lainnya.Ini paragraph lainnya.Ini paragraph lainnya.</p>

</body>

</html>

Struktur halaman dasar website

<html>
<head>
   <h1>This is heading 1 Tira Cindia Ayudita</h1>
   <h2>This is heading 2 X TKJ 1</h2>
   <h3>This is heading 3 32</h3>
   <h4>This is heading 4 membaca novel</h4>
   <h5>This is heading 5 SMK Karya Nugraha</h5>
   <h6>This is heading 6 Pengusaha
</body>
</html>

struktur dasar halaman website

<html>
<head>
<title>Anatom dokumen web</title>
</head>
<body>
Struktur dasar dokumen halaman web dibuat oleh tira cindia ayudita
</body>
</html>

biodataku

hai teman teman , selamat siang , ijinkan saya memperkenalkan diri saya
                                     BIODATA KU

 nama : tira cindia ayudita
 nomor : 31
 kelas : X tkj 1
 alamat : Tumang sari , Cepogo , boyolali
 tempat tanggal lahir : boyolali,01 september 2000
 hobi : membaca novel
 status : pelajar
 nama ayah : munadi
 pekerjaan : pengrajin
 nama ibu : utnawati
 pekerjaan : ibu rumah tangga

                         IMPIAN DI SMK KARYA NUGRAHA  BOYOLALI

1. bisa merakit komputer dengan benar
2. bisa juara di kelas
3. bisa juara pararel di tkj
4. ingin menjad orang sukses
5. lebih mendalami ilmu agama
5. mengharum kan nama smk karya nugraha
6. ingin jadi orang sukses di bidang komputer
7. ingin lebih teliti lagi
8. ingin belajar ilmu tkj tkj dengan iklas
9. ingin selalu konsisten terhadap ucapan
10. ingin menjadi pakar tkj
11. ingin nilai yang memuaskan
12. ingin membuat penemuan penemuan baru
13. ingin rajin dalam segara hal
14. ingin menjadi orang yang berguna di smk
15. ingin selalu optimis
16. ingin selalu mengerjakan tugas tepat waktu
17. ingin menebarkan optimisme kepada siapapun
18. ingin menginspirasi semua orang
19. ingin menjadi yang lebih baik lagi
20. ingin menjadi pelajar yang hebat
21. menjadi siswa teladan
22.  ingin mematuhi semua aturan yang ada di smk
23. tidak melanggar peraturan
24. ingin mnjadi orang yang tidak sombong
25. ingin semua tercapai