BELAJAR DASAR HTML CSS DAN PHP UNTUK PEMULA
materi bahan belajar html css php dasar pemula website ppt word php terbaru terlengkap
materi bahan belajar html css php pemula website ppt word php terbaru terlengkap
Teks berjalan / maequee
<marquee>.....</marquee>
MENAMPILKAN GAMBAR
<img src="...">
PARAGRAF
<p>......</p>
<pre>...</pre>
MARK & DELETE
<mark>...</mark> = menandai kata
<del>...</del> = membuat garis tengah kata
BIG & SMALL
<big>...</big> = membuat ukuran huruf besar
<small>...</small> = membuat ukuuran huruf kecil
SUBSCRIPT & SUPERSCRIPT
<sup>...</sup> = kuadrat
<sub>..</sub> = >< kuadrat
BULET
<ul>
<li>...</li>
<li>...</li>
</ul>
Numbering
ordered list (ol)
<ol>
<li>...</li>
<li>...</li>
</ol>
type:
1 => default
i => romawi kecil
I => romawi besar
a => abjad kecil
A => abjad besar
HYPERLINK
<a href="url-link">judul link</a>
href: hypertext reference
ex:
<a href ="www.bsi.a.id">BSI</a>
<a href="bsi.html">BSI</a>
<a href="halaman/bsi.html">BSI</a>
target :
_blank => membuka link di tab/window baru
ex :
<a href="bsi.ac.id" target="_blank">BSI</a>
PENGERTIAN CSS
internal : di dalam sebuah file
ex :
<style>
body {
color : blue;
}
</style>
Eksternal : dalam file tersendiri. pemanggilan diantara tag
<head>.......</head>
ex:
Dalam css,
Penulisan id diawali dengan (#)
PHP adalah singkatan dari "PHP: Hypertext Prepocessor", yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML. PHP diciptakan oleh Rasmus Lerdorf pertama kali tahun 1994. Pada awalnya PHP adalah singkatan dari "Personal Home Page Tools". Selanjutnya diganti menjadi FI ("Forms Interpreter"). Sejak versi 3.0, nama bahasa ini diubah menjadi "PHP: Hypertext Prepocessor" dengan singkatannya "PHP". PHP versi terbaru adalah versi ke-5. Berdasarkan survey Netcraft pada bulan Desember 1999, lebih dari sejuta website menggunakan PHP, di antaranya adalah NASA, Mitsubishi, dan RedHat.
BELAJAR DASAR HTML CSS DAN PHP UNTUK PEMULA
Bahasa Pemrograman (programming language) adalah sebuah
instruksi standar untuk memerintah komputer agar menjalankan fungsi tertentu.
Bahasa pemrograman ini merupakan suatu himpunan dari aturan sintaks dan
semantik yang dipakai untuk mendefinisikan program komputer. Bahasa ini
memungkinkan seorang programmer dapat menentukan secara persis data mana yang
akan diolah oleh komputer, bagaimana data ini akan disimpan/diteruskan, dan
jenis langkah apa secara persis yang akan diambil dalam berbagai situasi.
Fungsi bahasa pemrograman yaitu memerintah komputer untuk mengolah data sesuai
dengan alur berpikir yang kita inginkan. Keluaran dari bahasa pemrograman
tersebut berupa program/aplikasi. Contohnya adalah program yang digunakan oleh
kasir di mal-mal atau swalayan, penggunaan lampu lalu lintas di jalan raya,
dll.
Bahasa
Pemrograman yang kita kenal ada banyak sekali di belahan dunia, tentang ilmu
komputer dan teknologi dewasa ini. Perkembangannya mengikuti tingginya inovasi
yang dilakukan dalam dunia teknologi. Contoh bahasa pemrograman yang kita kenal
antara lain adalah untuk membuat aplikasi game, antivirus, web, dan teknologi
lainnya.
Bahasa
pemrograman komputer yang kita kenal antara lain adalah Java, Visual Basic,
C++, C, Cobol, PHP, .Net, dan ratusan bahasa lainnya. Namun tentu saja
kebutuhan bahasa ini harus disesuaikan dengan fungsi dan perangkat yang
menggunakannya.
Secara
umum bahasa pemrograman terbagi menjadi 4 kelompok, yaitu :
- Object Oriented Language (Visual dBase, Visual FoxPro, Delphi, Visual C)
- High Level Language (seperti Pascal dan Basic)
- Middle Level Language (seperti bahasa C), dan
- Low Level Language (seperti bahasa Assembly)
HTML
HTML adalah singkatan dari HyperText Markup Language yaitu bahasa
pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang
kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah
penjelajah web Internet (Browser). HTML
dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam
komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs
dalam dunia internet
Supaya dapat menghasilkan tampilan wujud yang terintegerasi Pemformatan hiperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML.
HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbirtan yang disebut Standard Generalized Markup Language (SGML).
Supaya dapat menghasilkan tampilan wujud yang terintegerasi Pemformatan hiperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML.
HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbirtan yang disebut Standard Generalized Markup Language (SGML).
Fungsi
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language) adalah suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk
menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut
dapat ditampilkan secara benar.
Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.
Fungsi HTML yang lebih spesifik yaitu :
Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.
Fungsi HTML yang lebih spesifik yaitu :
1.
Membuat halaman web
1.
Menampilkan berbagai
informasi di dalam sebuah browser Internet.
1.
Membuat link menuju
halaman web lain dengan kode tertentu (hypertext).
Sebagai
Contoh sederhana :
Pembuatan
Biodata menggunakan HTML
<html>
<head>
<title>Form Biodata</title>
</head>
<body style="background-color:pink;color:black; font-family:Times new roman;font-size:20px">
<body>
<form>
Nama Siswa: <input type="text" name="nm_siswa" maxlength="15" required
width="250" placeholder="Isikan nama lengkap"><br>
foto : <input type="file" name="foto"><br>
Jekel : <input type="radio" name= "jekel">L <input type="radio" name="jekel">P<br>
Hobi : <input type="checkbox" name="Voli">Voli <input type="checkbox" name="Basket"> Basket<br>
Password: <input type="Password" name="pass"><br>
<input type="hidden" name="nim"><br>
<input type="submit" value="SIMPAN">
<input type="reset" value="BATAL">
</form>
</body>
</html>
<head>
<title>Form Biodata</title>
</head>
<body style="background-color:pink;color:black; font-family:Times new roman;font-size:20px">
<body>
<form>
Nama Siswa: <input type="text" name="nm_siswa" maxlength="15" required
width="250" placeholder="Isikan nama lengkap"><br>
foto : <input type="file" name="foto"><br>
Jekel : <input type="radio" name= "jekel">L <input type="radio" name="jekel">P<br>
Hobi : <input type="checkbox" name="Voli">Voli <input type="checkbox" name="Basket"> Basket<br>
Password: <input type="Password" name="pass"><br>
<input type="hidden" name="nim"><br>
<input type="submit" value="SIMPAN">
<input type="reset" value="BATAL">
</form>
</body>
</html>
Tag-tag
HTML
<br>
pindah baris
<hr> garis lurus
<b>...</b> tebal
<i>...</i> miring
<u>...</u> garis bawah
Heading
<hl>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<hr> garis lurus
<b>...</b> tebal
<i>...</i> miring
<u>...</u> garis bawah
Heading
<hl>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
Teks berjalan / maequee
<marquee>.....</marquee>
MENAMPILKAN GAMBAR
<img src="...">
PARAGRAF
<p>......</p>
<pre>...</pre>
MARK & DELETE
<mark>...</mark> = menandai kata
<del>...</del> = membuat garis tengah kata
BIG & SMALL
<big>...</big> = membuat ukuran huruf besar
<small>...</small> = membuat ukuuran huruf kecil
SUBSCRIPT & SUPERSCRIPT
<sup>...</sup> = kuadrat
<sub>..</sub> = >< kuadrat
BULET
<ul>
<li>...</li>
<li>...</li>
</ul>
Numbering
ordered list (ol)
<ol>
<li>...</li>
<li>...</li>
</ol>
type:
1 => default
i => romawi kecil
I => romawi besar
a => abjad kecil
A => abjad besar
HYPERLINK
<a href="url-link">judul link</a>
href: hypertext reference
ex:
<a href ="www.bsi.a.id">BSI</a>
<a href="bsi.html">BSI</a>
<a href="halaman/bsi.html">BSI</a>
target :
_blank => membuka link di tab/window baru
ex :
<a href="bsi.ac.id" target="_blank">BSI</a>
PENGERTIAN CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi
yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan
desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors
(warna), margins (ukuran), latar belakang (background), ukuran font (font
sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf),
sizes (ukuran) dan spacing (jarak) disebut juga “styles”. Cascading Style
Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan)
yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser
bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada halaman web
lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS,
Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada
setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan
kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.
Cascading
, Style Sheet
ada 3
jenis CSS :
1.
Inline
1.
Internal
1.
Exsternal
Inline :
Di dalam sebuah tag
ex :
<input style="color:red">
ex :
<input style="color:red">
internal : di dalam sebuah file
ex :
<style>
body {
color : blue;
}
</style>
Eksternal : dalam file tersendiri. pemanggilan diantara tag
<head>.......</head>
ex:
<link
href="style.css">
beda
class dan id?
-class
dapat dipanggl berkali-kali dalam satu file
-id
hanya dapat dipanggil satu kali dalam satu file
Dalam css,
Penulisan
class diawali dengan (.)
cntoh
: .tabel, .miring, .menu
Penulisan id diawali dengan (#)
cth
: #header, #isi, #sidebar
- fungsi css
fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman
wesite(blog juga website). dan isi dari halaman website adalah tag-tag html,
logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi
lebih fungsional dan menarik.
- cara kerja css
cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector
id dan class tersesuaikan) maka secara otomatis akan bekerja pada document
html.
#header{
background-color: blue;
text-align: center;
color: white;
padding: 4px;
}
#menu {
background-color: black;
color: white;
width: 150px;
height: 300px;
float: left;'/
}
#isi {
float: left;
background-color: white;
color: black;
width: 450px;
padding: 10px;
}
#footer {
background-color: blue;
color: white;
text-align:center;
clear: both;
}
background-color: blue;
text-align: center;
color: white;
padding: 4px;
}
#menu {
background-color: black;
color: white;
width: 150px;
height: 300px;
float: left;'/
}
#isi {
float: left;
background-color: white;
color: black;
width: 450px;
padding: 10px;
}
#footer {
background-color: blue;
color: white;
text-align:center;
clear: both;
}
Pengertian
PHP
PHP adalah singkatan dari "PHP: Hypertext Prepocessor", yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML. PHP diciptakan oleh Rasmus Lerdorf pertama kali tahun 1994. Pada awalnya PHP adalah singkatan dari "Personal Home Page Tools". Selanjutnya diganti menjadi FI ("Forms Interpreter"). Sejak versi 3.0, nama bahasa ini diubah menjadi "PHP: Hypertext Prepocessor" dengan singkatannya "PHP". PHP versi terbaru adalah versi ke-5. Berdasarkan survey Netcraft pada bulan Desember 1999, lebih dari sejuta website menggunakan PHP, di antaranya adalah NASA, Mitsubishi, dan RedHat.
PHP
adalah bahasa pemrograman script server-side yang didesain untuk
pengembangan web. Selain itu, PHP juga bisa digunakan sebagai bahasa
pemrograman umum (wikipedia). PHP di
kembangkan pada tahun 1995 oleh Rasmus Lerdorf, dan sekarang dikelola oleh The
PHP Group. Situs resmi PHP beralama di http://www.php.net.
PHP
disebut bahasa pemrograman server side karena PHP diproses pada komputer
server. Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side
seperti JavaScript yang diproses pada web browser (client).
Pada
awalnya PHP merupakan singkatan dari Personal Home Page. Sesuai dengan
namanya, PHP digunakan untuk membuat website pribadi. Dalam beberapa tahun
perkembangannya, PHP menjelma menjadi bahasa pemrograman web yang powerful dan
tidak hanya digunakan untuk membuat halaman web sederhana, tetapi juga website
populer yang digunakan oleh jutaan orang seperti wikipedia, wordpress, joomla,
dll.
Contoh :
<html>
<head>
<title>Input Mahasiswa</title>
</head>
<body bgcolor="pink">
<form action="tampilmahasiswa.php" method="post">
<b>PENGELOLAAN DATA MAHASISWA</b>
<br>
<pre>
Nama : <input type="text" name="nama" size="25" maxlenght="50">
Alamat : <input type="text" name="alamat" size="25" maxlenght="50">
</pre>
Jenis Kelamin :
<input type="radio" name="jeniskel" velue="Laki-Laki">Laki-Laki
<input type="radio" name="jeniskel" velue="Perempuan">Perempuan
<p>
Pekerjaan :
<select name="pekerjaan">
<option value="-Pilih-">
<option value="Pelajar">Pelajar
<option value="Karyawan">Karyawan
<option value="Wirausaha">Wirausaha
<option value="Lain-Lain">Lain-Lain
</select>
<p>
HOBI :<br>
<input type="checkbox" name="hobi1" Value="Olahraga">Olahraga <br>
<input type="checkbox" name="hobi2" Value="Musik">Musik <br>
<input type="checkbox" name="hobi3" Value="Jalan-Jalan">Jalan-Jalan
<p>
<input type="submit" value="Kirim"><input type="reset" value="Batal">
</form>
</body>
</html>
<head>
<title>Input Mahasiswa</title>
</head>
<body bgcolor="pink">
<form action="tampilmahasiswa.php" method="post">
<b>PENGELOLAAN DATA MAHASISWA</b>
<br>
<pre>
Nama : <input type="text" name="nama" size="25" maxlenght="50">
Alamat : <input type="text" name="alamat" size="25" maxlenght="50">
</pre>
Jenis Kelamin :
<input type="radio" name="jeniskel" velue="Laki-Laki">Laki-Laki
<input type="radio" name="jeniskel" velue="Perempuan">Perempuan
<p>
Pekerjaan :
<select name="pekerjaan">
<option value="-Pilih-">
<option value="Pelajar">Pelajar
<option value="Karyawan">Karyawan
<option value="Wirausaha">Wirausaha
<option value="Lain-Lain">Lain-Lain
</select>
<p>
HOBI :<br>
<input type="checkbox" name="hobi1" Value="Olahraga">Olahraga <br>
<input type="checkbox" name="hobi2" Value="Musik">Musik <br>
<input type="checkbox" name="hobi3" Value="Jalan-Jalan">Jalan-Jalan
<p>
<input type="submit" value="Kirim"><input type="reset" value="Batal">
</form>
</body>
</html>
Nama : Sofyan Afika Permata
NIM
: 12151396
Kelas
: 12.5A.21
