Definisi Algoritma dan Flowchart

"Algoritma adalah suatu langkah-langkah yang disusun secara sistematis dan logis guna menyelesaikan suatu masalah"

Urutan-urutan dalam algoritma biasa disimbolkan dengan sebuah notasi yang biasa disebut dengan bagan alur (Flowchart). Flowchart ini menggambarkan setiap tahapan eksekusi dari awal hingga akhir untuk menyelesaikan masalah. PembuatanFlowchart harus menggunakan kaidah yang benar dan baku sehingga terjadi persamaan penafsiran maka dari itulah dibuat suatu rumusan penulisan Flowchart yang disetujui dan dipakai secara Internasional.
Lambang-lambang Flowchart tersebut melambangkan setiap eksekusi atau proses yang terjadi didalamnya, sehingga seorang programmer dapat mengetahui proses apa saja yang terjadi dari sebuah program yang hendak ia buat dengan bantuan Flowcharttersebut.

Fungsi dari Flowchart antara lain adalah:
1. Mengetahui alur kerja suatu kejadian/masalah
2. Memperjelas tahapan kerja
3. Mempresentasikan tahapan kerja
4. Mempermudah dalam membuat program

Selain itu flowchart juga dapat menjadi indikasi bahwa sebuah program itu sebelum mengeluarkan output program tersebut harus menjalankan sekian eksekusi, sekian kondisi dan sebagainya. Maka dari itu, bagi dunia pemrograman wajib bagi programmer untuk mengetahui lambang dan arti dari lambang flowchart.

Arti dari lambang Flowchart :




Tanpa basa-basi lagi, saya akan membahas sedikit materi tentang algoritma pemrograman, meliputi :


1. Type Data

Adalah sebuah aturan yang digunakan untuk mendeklarasikan data-data dalam pemrograman.Untuk menyimpan suatu variabel diperlukan tempat khusus di dalam memori komputer, Besar dan tipe dari Variabel-variabel di dalam standar program C++ dispesifikasikan sebagai berikut :






2. Input dan Output

A. Statement Input

Beberapa fungsi / statement input yang dapat digunakan yaitu :


- Scanf
Digunakan untuk memasukkan berbagai jenis data melalui keyboard.

- Gets
Digunakan untuk dapat menerima dan memasukkan data string. Sintaknya :


Gets(nama-variabel-array);- Cin
Dalam C++, perintah cin digunakan untuk menginput suatu nilai dari suatu piranti masukan (keyboard) untuk selanjutnya di proses oleh program. Sintaknya yaitu :


Cin >> variable;


- Getch
Perintah getch() berfungsi sama seperti cin (perintah input), akan tetapi getch() khusus untuk input berupa karakter. Disamping itu getch() dapat membaca input berupa spasi atau tab sedangkan cin tidak bisa. Fungsi ini juga dapat digunakan apabila tidak diinginkan penekanan enter ketika input data karakter. Sintaknya yaitu :



Variabel = getch();- Getche
Perintah getche() kegunaannya sama dengan getch(), hanya saja getche() menampilkan/ membaca karakter yang diinputkan, tidak perlu diakhiri dengan menekan tombol enter, dan karakter yang dimasukkan akan ditampilkan ke layar. Fungsi getch() dan getche() sama-sama membutuhkan file header conio.h



B. Statement Output
Beberapa perintah output yang biasa digunakan :

- Printf
Digunakan untuk menampilkan hasil yang terformat dengan menggunakan format spesification, seperti yang terlihat pada tabel 1.1.

- Puts
Digunakan untuk mencetak string ke layar dimana pencetakan akan diakhiri dengan karakter new line (ke baris baru). Terdapat dalam file header stdio.h.

- Putchar
Menampilkan sebuah karakter ke layar, pencetakan karakter tidak diakhiri dengan karakter new line, terdapat dalam file header : stdio.h


- Cout
Dalam C++, perintah cout digunakan untuk menampilkan suatu informasi ke piranti output (layar). Berikut ini perintah-perintah tambahan untuk mengatur tampilan output.

endl Perintah ini berfungsi sama dengan \n (ganti baris)
setw()Perintah ini digunakan untuk mengatur lebar tampilan data (rata kanan).
setfill() Perintah setfill() digunakan untuk menambahkan suatu karakter tertentu pada field yang kosong pada suatu data.
Perintah-perintah tambahan pada cout diatas memerlukan file header iomanip.hsupaya dapat digunakan.

- Cprintf
Memiliki fungsi yang mirip dengan printf, hanya saja cprintf dapat menampilkan warna, dan juga terdapat dalam file header stdio.h.






3. Array

Array merupakan kumpulan variabel bertipe data yang sama dalam urutan tertentu yang menggunakan nama yang sama. Array merupakan konsep yang penting dalam pemrograman, karena array memungkinkan untuk menyimpan data dalam jumlah banyak dan terindeks. Setiap elemen array dapat diakses melalui indeks yang dihitung dari nol.


Contoh Program :




Hasil :















4. Void


"Void merupakan tipe data yang digunakan untuk tipe suatu fungsi yang tidak mengembalikan nilai"
Contoh program :




Hasil :






5. Fungsi / Void Rekursi
"Fungsi Rekursi merupakan fungsi yang dapat memanggil dirinya sendiri"

Contoh program :




Hasil :





ddari pelajaran sini ane menyimpulkan bahwa :
Algoritma sangat berguna dalam kehidupan karena algoritma dapat memudahkan untuk pengambilan keputusan untuk pemecahan masalah dengan urutan yang logis, dan juga algoritma dapat melatih logika kita dalam menyelesaikan masalah.
Yang paling penting untuk dipelajari dalam Algoritma adalah urutan-urutan dalam menyelesaikan masalah dan dalam penggunaan logika yang tepat agar pemecahan masalah menjadi terurut dan terstruktur.

Baca Selengkapnya →

Komponen Komponen tentang program C++

jumpa lagi dengan ane :D hehehe semoga gak bosen bosennya ngebaca postingan ane yak :D

ane lengkapin nih materi tadi yaitu tentang program C++

silahkan disimak baik baik yuk

1.4 STRUKTUR BAHASA C++
Program C maupun C++ selalu tersusun dari 4 (empat) bagian utama, yaitu :
1. Bagian komentar yang ditandai dengan symbol // dan pasangan /* … */
2. Bagian pengarah compiler yang ditandai dengan symbol #
3. Bagian deklarasi
4. Bagian definisi

1.4.1 BAGIAN KOMENTARProgram yang baik pada umumnya diberi komentar yang akan membantu orang lain maupun pembuat program itu untuk memahami program yang dibuat. Dalam C atau C++ setiap tulisan yang diapit oleh symbol /* … */ atau setiap baris yang dimulai dengan symbol // dianggap komentar. C++ tidak mengizinkan komentar bersarang ( nested comment), namun Borland C++ lebih fleksibel dalam hal ini. 

Contoh C++ menggunakan komentar:
_______________________________________________
/* FIRST.CPP */
/* Program C++ pertamaku */
// Praproses
# include <iostream.h>
Void main ( )
{
Char pesan [ ] = “Hello, C++ programmers!” ;
T. Pemrograman Terstruktur 2 ( 1 ) Page 3 of 6
Cout << pesan ;
Return 0 ;
}
Pada Borland C++ dapat menggunakan komentar bersarang asalkan opsi cek
Nested commentspada menu Options/Compiler/Sourcedipilih.
______________________________________________

1.4.2 BAGIAN PENGARAH KOMPILER
Contoh program C++ :
______________________________________________
# include <iostream.h>
Void main ( )
{
Char pesan [ ] = “Hello, C++ programmers!” ;
Cout<< pesan ;
Return 0 ;
} 

______________________________________________

Merupakan statement praprosesor, disebut juga pengarah compiler karena
berfungsi mengatur proses kompilasi.
IOSTREAM.Hmerupakan file program yang mengandung deklarasi kelaskelas yang diperlukan oleh objek cout. File-file dengan ekstensi .H yang berisi deklarasi fungsi-fungsi standar C ini, disebut secara umum sebagai file header.

Beberapa pengarah compiler adalah :
1. # define
2. # include
3. # if, # else, # elif, # endif
4. # ifdef, # ifndef

1.4.2.1 PENGARAH KOMPILER # DEFINE
Untuk mendefinisikan suatu pengenal / konstanta yang nantinya akan digantikan oleh praprosesor saat program dikompilasi. 

Contoh Program :
_______________________________________________
# define SIZE30
Int array [SIZE] ;
For (register int i = 0 ; i < SIZE ; i++)
{
Cout << array [ i ] ;
}
T. Pemrograman Terstruktur 2 ( 1 ) Page 4 of 6
1.4.2.2 PENGARAH KOMPILER # INCLUDE

_______________________________________________

Berfungsi membaca file program tertentu dan mengikutsertakan file tersebut
dalam proses kompilasi. Nama file yang dimaksud harus diapit symbol ‘ < ‘
dan ‘ > ‘ atau tanda kutip dua ( “ … “ ).

1.4.2.3 PENGARAH KOMPILER # IF, # ELSE, # ELIF, # ENDIF
Digunakan untuk memilih bagian program yang akan dikompilasi. Kompilasi cari ini disebut kompilasi bersyarat dan program yang baik biasanya memanfaatkan teknik ini.

1.4.2.4 PENGARAH KOMPILER # IFDEF, # IFNDEF
Digunakan juga dalam kompilasi bersyarat. # Ifdefdapat dibaca : ‘jika
didefinisikan’ dan # ifndefdapat dibaca : ‘jika tidak didefinisikan’. Pengarah compiler ini sering digunakan untuk menandai bahwa suatu file sudah diikutsertakan dalam kompilasi

1.4.3 BAGIAN DEKLARASI DAN DEFINISISemua program C pada dasarnya tersusun dari rangkaian pemanggilan fungsi yang bekerja atas sekelompok data. Selain pemanggilan fungsi, program C mengandung komponen lain yang disebut statement.
Statement C ada dua, yaitu : statement yang tidak dapat dieksekusi / non executable ( bila dikompilasi tidak menghasilkan kode objek dan biasanya digunakan untuk mengatur alur program), dan statement yang dapat dieksekusi / executable (bila dikompilasi akan menghasilkan kode objek).
Setiap pemanggilan fungsi maupun statement executable dalam C harus diakhiri dengan tanda titik koma ( ; ).

Contoh program C++:
__________________________________________________
# include <iostream.h>
Void main ( )
{
Char pesan[ ] = “Hello, C++ programmers!” ;
Cout << pesan ;
Return 0 ;
} 

__________________________________________________

Dalam contoh program C++ diatas,Returnmerupakan contoh statement executable yang menginstruksikan agar suatu fungsi mengembalikan nilai balik tertentu. Contoh statement non executable adalah : If, else, dan while.
T. Pemrograman Terstruktur 2 ( 1 ) Page 5 of 6 Main ( )merupakan contoh fungsi, sedangkan pesanadalah contoh data. Baik data maupun fungsi harus dideklarasikan. Data perlu dideklarasikan agar compiler tahu berapa byte memori yang harus disediakan untuk data yang bersangkutan, sedangkan fungsi perlu dideklarasikan agar compiler dapat memeriksa ketepatan pemanggilan fungsi yang bersangkutan. Deklarasi fungsi sering disebut pula prototype fungsi.

1.5 INPUT DAN OUTPUTDi ANSI C, operasi input dan output dilakukan dengan menggunakan
fungsi-fungsi yang ada di header file stdio.h. contohnya untuk input dan
output ke layer monitor digunakan perintah seperti printf, scanf, putch, dsb.
Untuk input dan output ke file digunakan perintah seperti fread, fwrite, fputc,
dsb.
C++ mempunyai teknik input dan output yang baru, yaitu :
menggunakan stream. Header file untuk input dan output stream adalah
iostream.hdan beberapa file lain, seperti strstrea.h, fstream.h, dan
constrea.h.
Stream adalah suatu logika device (peralatan logika) yang
menghasilkan dan menerima informasi atau suatu wadah yang digunakan
untuk menampung keluaran dan menampung aliran data. Stream adalah
nama umum untuk menampung aliran data (contoh : file, keyboard, mouse),
maupun untuk keluaran (contoh : layer, printer).
Dalam C++ input berarti membaca dari stream dan output berarti menulis ke stream.
Bentuk Umum Output operator :
_______________________________________________
Cout << ekspresi ;
Bentuk umum Input operator :
Cin >> variable ;
Dalam C++, menggunakan escape sequences untuk
merepresentasikan suatu karakter yang tidak terdapat dalam tradisional
symbol. Beberapa diantaranya :
\ n : linefeed / baris baru \ b : back space \ “ : petik ganda
T. Pemrograman Terstruktur 2 ( 1 ) Page 6 of 6 

Contoh program versi ANSI C :

___________________________________________________
# include <stdio.h>
Void main ( )
{
Int x ;
Printf( “Masukkan sebuah bilangan : \n” ) ;
Scanf( “ %d ”, &x ) ;
Printf( “Bilangan yang dimasukkan adalah %d\n “, x ) ;
}
Contoh program versi C++ :
# include <iostream.h>
Void main ( )
{
Int x ;
Cout <<“Masukkan sebuah bilangan : ” << endl ;
Cin >>x ;
cout <<“Bilangan yang dimasukkan adalah “ << x << endl ;
}
Contoh Program untuk input dan output :
# include <iostream.h>
Main ( )
{
Int a ;
Cout << “masukkan suatu bilangan :” ;
Cin >> a ;
Cout << “nilai tersebut ditambah 1 = ‘ << a+1 ;
Return 0 ;

______________________________________________

semoga bermanfaat tentang C++ kali ini hehehe terima kasihh

Baca Selengkapnya →

Pengenalan Program C++

setelah tadi dan kemarin kita ngebahas tentang materi Pemrograman Web nih kali ini kita beralih ke pelajaran Pemrograman dasar hehehe kayak guru aja nih mimin :D

langsung aja yuk , yang pertama ini mimin kasi tau dulu nih tentang Sejarah software C++ 

 SEJARAH C++

     Bahasa C++ diciptakan oleh Bjarne Stroustrup di AT&T Bell

Laboratories awal tahun 1980-an berdasarkan C ANSI (American National

Standard Institute). Pertama kali, prototype C++ muncul sebagai C yang

dipercanggih dengan fasilitas kelas. Bahasa tersebut disebut C dengan kelas

( C wih class). Selama tahun 1983-1984, C dengan kelas disempurnakan

dengan menambahkan fasilitas pembebanlebihan operator dan fungsi yang

kemudian melahirkan apa yang disebut C++. Symbol ++ merupakan operator

C untuk operasi penaikan, muncul untuk menunjukkan bahwa bahasa baru ini

merupakan versi yang lebih canggih dari C.

Borland International merilis compiler Borland C++ dan Turbo C++.

Kedua compiler ini sama-sama dapat digunakan untuk mengkompilasi kode

C++. Bedanya, Borland C++ selain dapat digunakan dibawah lingkungan

DOS, juga dapat digunakan untuk pemrograman Windows.

Selain Borland International, beberapa perusahaan lain juga merilis

compiler C++, seperti Topspeed C++ dan Zortech C++.

Contoh Program C :

________________________________________________

# include <stdio.h>

Main ( )

{

Char pesan [ ] = “Hai, C programmers !” ;

Printf (pesan) ;

Return 0 ;

}

Contoh Program C++ :

# include <iostream.h>

Main ( )

{

Char pesan [ ] = “Hai, C programmers !” ;

Cout << pesan ;

Return 0 ;

} 
________________________________________________

1.2 TENTANG C++

C++ diciptakan untuk mendukung pemrograman berorientasi pada

objek (Object Oriented Pragramming/OOP) yang tidak dimiliki C. sementara C

merupakan bahasa pemrograman terbaik dilingkungannya, bahasa ini tidak

T. Pemrograman Terstruktur 2 ( 1 ) Page 2 of 6

memiliki kemampuan OOP. Reputasi C tidak diragukan lagi dalam

menghasilkan program .EXE berukuran kecil, eksekusi yang cepat,

antarmuka (interfacing) yang sederhana dengan bahasa lain dan fleksibilitas

pemrograman. Apa yang membuat C tampak sukar dipelajari mungkin karena

tiadanya pemeriksaan tipe. Sebagai contoh, dapat mencampur bilangan bulat

dengan string untuk menghasilkan karakter. Namun, justru dsitu letak

fleksibilitas C, dapat mengolah data C sebebas mengolah data dalam bahasa

assembly.

1.3 BORLAND C++

Dibandingkan compiler C++ yang lain, Borland C++ memiliki

keunggulan terutama dalam hal kecepatan dan efisiensi kompilasi. Disamping

itu, Borland C++ mendukung beberapa system operasi yaitu DOS, Windows

16bit (Window 3.0) dan windows 32 bit (Windows NT). Meskipun demikian

compiler Borland C++ juga memiliki kelemahan bila dibandingkan compiler

C++ yang lain, misalnya : pemrograman dengan Borland C++ terutama yang

menyangkut tampilan jauh lebih sulit daripada pemrograman dengan

Microsoft Visual C++. 

teriimaakasiihh buat penyimak yang sudah membaca postingan ane kali ini hehehe semoga bermanfaat 

Baca Selengkapnya →

Memformat halaman WEB

hai haii selamat siangg kawann panas banget yah hari ini , sebagai selingan aja nih mimin MANCHESTER HACKER akan mengepost tentang bagaimana cara memformat halaman web dan juga kali ini mimin akan skalian ane kasi tau nih ttg memberi background pada laman web kawan

 yukk langsung saja ke TKP :D hehehe . 

1. Format dengan margin
______________________________

<HTML>
<HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">
BODY
{
margin-top : 1cm;
margin-right : 2cm;
margin-bottom : 1cm;
margin-left : 2cm; 

}
</STYLE>
</HEAD>
<BODY>

Pengaturan Margin Halaman
(1cm,2cm,1cm,2cm)


2. Pemetaan menggunakan padding
Padding hampir sama dengan margin :

a. Margin hanya digunakan untuk membuat batasan-batasan sisi halaman.
b. Padding dapat membuat batasan-batasan pada komponen web lain seperti tabel, disamping pengaturan batas halaman.

________________________________________________
<HTML>
<HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css"> 

BODY {
padding-top : 10%;
padding-right : 20%;
padding-bottom : 40%;
padding-left: 20%;
}
Bengkel Internet PENS-ITS : Cascading Style Sheets
</STYLE>
</HEAD>
<BODY>
Text ini berada di tengah halaman , karna di lakukan pengaturan halaman dengan menggunakan padding atas 10%,
kanan 20%,bawah 40%,dan kiri 20%.
</BODY>
</HTML> 

________________________________________________


MEMBUAT BACKGROUND

1. Background warna
________________________________________________
<HTML>
<HEAD>
<TITLE>Menggunakan Background
Warna</TITLE>
<STYLE type="text/css">
BODY { background-color : yellow}
</STYLE> 

</HEAD>
<BODY>
Halaman ini di buat Berwarna Kuning </BODY>
</HTML>

_________________________________________________


2. Background campuran
_________________________________________________

<HTML>
<HEAD>
<TITLE>Menggunakan Background
Warna</TITLE>
<STYLE ="text/css">
body {background-color : #99CCFF}
h2 {background : green} h3 {background-color : transparent}
p {background : rgb(240,248,255)}
</STYLE>
</HEAD>
<BODY>
<h2>Header 2,Background Hijao</h2>
<h3>Header 3 , Bakground Transparan</h3>
<p>Background pada paragraph</p>
</BODY>
</HTML>
_________________________________________________

3. Background gambar

Properties Value Keterangan
backgroundimage
url Alamat gambar
yang dituju
backgroundrepeat
repeat
repeat-x
repeat-y
no-repeat
Diulang dlm hal
Diulang sumbu x
Diulang sumbu y
Tampil 1 gbr
Backgroundposition
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
Atas kiri hal
Atas tngh hal
Atas kanan hal
Tgh kiri hal
Pusat hal
Tngh kanan hal
Bwh kiri hal
Bwh tgh hal
Bwh kanan hal
Pakai nilai %

Contoh 1 : 

_________________________________________________

<HTML>
<HEAD>
<TITLE>Menggunakan Background
Gambar</TITLE>
<STYLE ="text/css">
BODY
{
background-image:
url("drums.jpg");
background-repeat: repeat-x; 

}
</STYLE>
</HEAD>
<BODY>
Background Berulang pada Sumbu X
</BODY>
</HTML> 

_________________________________________________

Contoh 2 :_________________________________________________
<HTML>
<HEAD>
<TITLE>Menggunakan Background
Gambar</TITLE>
<STYLE ="text/css">
BODY
{
background-image:url ("motor.jpg");
background-repeat: no-repeat;
background-position: center center;
}
Bengkel Internet PENS-ITS : Cascading Style Sheets
6
</STYLE>
</HEAD>
<BODY>
Background di Pusat Halaman </BODY>
</HTML>

________________________________________________ terima kasih kawann semoga pembelajaran hari ini dapat membantu buat kawan kawan sekalian dalam pembuatan web/html :)

Baca Selengkapnya →

Materi CSS dalam pembuatan HTML

hai haii agan agann selamat malam buat pengunjung blog setia MANCHESTER HACKER kali ini ane akan share ttg materi sekolah ane nih yaitu tentang CSS (Cassading Style Sheet) , simak baik baik yah :)

Apa itu CSS :
· Feature untuk membuat dynamic HTML.
· Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template)
· Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan
· berwarna biru)
· Support ke semua browser.

Aturan penulisan :
Nilai untuk property tidak boleh dalam tanda petik.
contoh : color : green; ¾ Nama property bersifat case sensitive.
color : green;
property : color
value : green
Cara penggunaan CSS :

_External Style Sheet
Bentuk : <link rel=“stylesheet” type=“text/css” href=“css_files.css”>
dimana :
‰ <link, merupakan tag pembuka diakhiri dengan tanda “>”
‰ rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet
‰ type=“text/css”, file yang dipanggil berupa css
‰ href=“css_files.css”, alamat dokumen stylesheet yang dipanggil
Contoh Penggunaan :
script efek.css
body {
color: green;
background: white;
Bengkel Internet PENS-ITS : Cascading Style Sheets
font-family : arial;
}

_Internal Style Sheet
Bentuk umum : <style type=“text/css”>
…definisi style… </style>
Contoh Penggunaan :
Inline Style sheet
Contoh Penggunaan :




<HTML>
<HEAD>
<TITLE>centranet</TITLE>
<LINK REL="STYLESHEET"
TYPE="text/css" HREF="efek.css">
</HEAD>
<BODY>
<H1>PENS ITS</H1>
<P> PENS ITS adalah kampus teknik yang concern ke bidang elektro
</BODY>







<HTML>
<HEAD>
<TITLE>centranet</TITLE>
<STYLE type="text/css">
body {
color: white; background: green;
font-family : arial; }
</STYLE>
</HEAD>
<BODY>
<H1>Zefnet</H1>
<P>Zefnet adalah sebuah web Developer dan Linux Center
</BODY>
</HTML>



<HTML>
<HEAD>
<TITLE>centranet</TITLE>
</HEAD>
<BODY style="color: white;
background: green; font-family : arial;“ >
<H1>ZEFNET</H1>
<P>ZEFNET adalah sebuah web
Developer dan Linux Center
</BODY>
</HTML>


II. ATURAN PENULISAN PADA CSS
Syntaxis CSS dibagi dalam 3 bagian :
selector {property : value}
dimana :
selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah
Cara penulisan : FONT-FAMILY : sans-serif; FONT-SIZE : small;
Cara penulisan yang salah : FONT-FAMILY : “sans-serif”; FONT-SIZE : ‘small’;
Cara mendeklarasikan kelompok : (tanda koma serta &)
H1, H2 {color : green}; H3, H4 & H5 {color : red};
Cara menuliskan komentar :
• Menggunakan tanda : /* ….. */
• Menggunakan tanda : <!-- - - >
Bentuk ukuran :
Ukuran Keterangan
em Untuk menentukan ukuran yang pecahan (desimal)
ex x-height, digunakan untuk menentukan ukuran yang
sifatnya vertikal
px Pixels, menentukan ukuran yang bersifat pixel (layar
monitor) seperti ukuran huruf.

III. SELECTOR SEBAGAI PENGONTROL DESIGN

1. Selector untuk merubah body.

<HTML> 

<HEAD>
<TITLE> Selector </TITLE> <style type="text/css">
body
{
FONT-FAMILY: Geneva, Arial;
FONT-SIZE: 20px;
color: red; BACKGROUND-COLOR: green; 

}
</style>
</HEAD>
<BODY>

Halaman efect CSS
</BODY>
</HTML>
Bengkel Internet PENS-ITS : Cascading Style Sheets

2. Jenis-jenis selector
a. Selector bebas
<HTML>
<HEAD>
<TITLE> Selector </TITLE> <style type="text/css">
gbawah{
TEXT-DECORATION: underline;
}
</style>
</HEAD>
<BODY>
<gbawah> Efect Garis Bawah dengan Selector Bebas </gbawah> 

</BODY>
</HTML>

b. Selector dengan class

<HTML>
<HEAD>
<TITLE> Selector </TITLE> <style type="text/css">
.right { text-align : right }
</style>
</HEAD>
<BODY>
<h2 class="right">Class Heading 2 </h2>
<p class="right"> Class Paragraf</p>
</BODY>
</HTML>

c. Selector Id
<HTML>
<HEAD>
<TITLE> Selector </TITLE> <style type="text/css">
#BODY_115 {
FONT-SIZE: 20px; TEXT-DECORATION: underline; COLOR: blue; FONT-FAMILY:Comic Sans MS; }
</style>
</HEAD>
<BODYid="BODY_115">
Menggunakan ID Selector
</BODY>
</HTML>

Baca Selengkapnya →

Format Teks HTML

HTML FORMAT TEKS

ELEMENT BR (Line Break)

Element BR berfungsi untuk ganti baris. Dan elementBR 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 P mempunyai attribute yaitu alignyang bernilai "left", "center", "right"yang menspesifikasikan

posisi tepi horizontal dari paragraf (default: "left").

Sintaks:

<p align="left"|"center"|"right">

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

</p>

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

yaitu alignyang bernilai "left", "center", "right"yang menspesifikasikan posisi horizontal dari header

(default: "left").

Sintaks:

<hx align="left"|"center"|"right">

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

</hx>

x : 1 ... 6

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

Sintaks:

<u>

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

</u>

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 BASEFONT

Element BASEFONT berfungsi untuk merubah dasar ukuran huruf tampilan dari web browser. Attribute dari

element ini adalah sizeyang merupakan ukuran huruf dengan nilai "1" sampai dengan "7" pixel, atau berupa

ukuran relatif ( + atau - ), default nya adalah "3"pixel. Element ini tidak mempunyai tag penutup.

Sintaks:

<basefont size="pixel">

ELEMENT FONT

Element FONT berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf. Element ini mempunyai

attribute coloruntuk merubah warna huruf, faceuntuk merubah jenis huruf (jika lebih dari satu jenis huruf,

harus dibatasi dengan koma), dan sizeuntuk merubah ukuran huruf (pixel).

Sintaks:

<font color="warna" face="font" size="pixel">

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

</font>

ELEMENT HR (Horizontal Rule)

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

mempunyai attribute alignuntuk menempatkan posisi secara horizontal ("left", "center", "right"), sizeuntuk

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

Sintaks:

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

Baca Selengkapnya →

Materi Pemograman Web

1-HTML DASAR
STRUKTUR DASAR DOKUMEN HTML
   HTML merupakan singkatan dari HyperText Markup Languageadalah script untuk menyusun dokumendokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tagyang
memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.
Struktur dasar dokumen HTML adalah sebagai berikut:

<html>

<head>

<title>Disini Judul Dokumen HTML</title>

</head>

<body>

Disini penulisan informasi Web

</body>

</html>

Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut:
a. Tag

Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body>adalah tag dengan nama body.

Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembukadan tag penutup(ditambahkan
karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan
</body>ini adalah tag penutup isi dokumen HTML.
b. Element

Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan

judul dokumen HTML pada web browser digunakan element title, dimana:
<title>ini adalah tag pembuka judul dokumen HTML
Disini Judul Dokumen HTMLini adalah isi judul dokumen HTML
</title>ini adalah tag penutup judul dokumen HTML
Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan
pasangan tag-tag lainnya.
Contoh penulisan tag-tag yang benar
c. Attribute

Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya

adalah sebagai berikut:
<TAG>
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
.................
</TAG>
Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna
teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah
<body bgcolor="black" text="yellow">
d. Element HTML
Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.
Sintaks:
<html>
..........
</html>
e. Element HEAD
Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara tag <html> dan tag
</html>.
Sintaks:
<head>
...........
</head>
<p>
<b>
................
</b>
</p>


f. Element TITLE

Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag <title> dan tag

</title> terletak di antara tag <head> dan tag </head>.
Sintaks:
<title>
.........
</title>


g. Element BODY
Element ini untuk menampilkan isi dokumen HTML. Tag<body> dan tag </body> terletak di bawah tag <head>
dan tag </head>.
Element BODY mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan latarbelakang
dokumen yang akan ditampilkan pada browser.
Sintaks:
<body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z">
..............
</body>
keterangan : Attributetext memberikan warna pada teks, bgcolormemberikan warna pada latarbelakang
dokumen HTML, backgroundmemberikan latarbelakang dokumen HTML dalam bentukgambar,link
memberikan nilai warna untuk link, alinkmemberikan warna untuk link yang sedang aktif, vlinkmemberikan
warna untuk link yang telah dikunjungi.
Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan
digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka

attribute bgcolor yang akan digunakan. 

demikian yang bisa ane sampaikan kawan :) semoga bermanfaat 

Baca Selengkapnya →