M4 PHP, HTML, CSS, MySQL

PENGANTAR KOMPUTER DAN TI 2C
PERTEMUAN 4
Peg. Komp & TI 2C
M4
HyperText Markup Language (HTML)

Sebuah bahasa markup yang digunakan untuk membuat sebuah
halaman web dan menampilkan berbagai informasi di dalam sebuah
browser Internet.

HTML merupakan sebuah standar yang digunakan secara luas untuk
menampilkan halaman web dan HTML kini merupakan standar
Internet yang saat ini dikendalikan oleh World Wide Web Consortium
(W3C).

Mark up : informasi tambahan yang ditempatkan pada teks untuk
menjelaskan bagaimana teks tersebut diinterpretasi (diartikan)
Peg. Komp & TI 2C
M4
Versi HTML

HTML Versi 1.0

HTML versi ini merupakan versi pertama sejak lahirnya Bahasa HTML yang
memiliki kemampuan untuk heading, paragraph, hypertext, manipulasi text (bold
& italic) serta memiliki hubungan terhadap penggunaan sebuah gambar.

HTML Versi 2.0

HTML versi ini lahir pada tanggal 14 Januari 1996 dengan beberapa kemampuan
tambahan seperti penambahan form & hal ini menjadi cikal bakal adanya proses
interaktif dengan pengguna. Mulai versi ini, HTML menjadi awal mula adanya
website interaktif.

HTML Versi 3.0

HTML versi ini lahir pada tanggal 18 Desember 1997 yang dikenal dengan HTML+
karena mempunyai beberapa fasilitas penambahan fitur table dalam paragraph.
Peg. Komp & TI 2C
M4
Versi HTML (Lanj.)

HTML Versi 3.2

HTML versi ini merupakan versi terbaru penyempurnaan dari versi 3.0 pada bulan
Mei 1998.

HTML Versi 4.0

HTML versi ini lahir pada tanggal 24 Desember 1999 dengan penambahan
beberapa fitur lagi seperti adanya Table, Image, Text, Link, Form, Imagemaps &
lain-lain sebagai penyempurna dari HTML versi 3.2.

HTML Versi 5.0

HTML versi ini atau lebih dikenal dengan HTML5 lahir pada tahun 2009 yang
menjadi standar baru untuk HTML, XHTML, & DOM HTML. HTML5 ini merupakan
proyek kerjasama antara W3C dengan WHATWG (Web Hypertext Application
Technology Working Group).
Peg. Komp & TI 2C
M4
Editor HTML
Text editor
Notepad ++
Editor plus
Sublime
www.w3schools.com (online)
WYSIWYG (What You See Is What You Get)
Adobe Dreamweaver
Microsoft frontpage
Microsoft publisher
Peg. Komp & TI 2C
M4
Struktur dokumen HTML
Kepala
<head>
<Head>
<Title>
Judul Homepage
</Title>
</Head>
Tubuh
<body>
<Body>
Isi…Teks
Isi…Tabel.
Isi…Audio, Video, dll.
</Body>
Homepage
Peg. Komp & TI 2C
M4
Contoh Sederhana HTML
Script HTML:
<html>
<head>
<title>Contoh Sederhana </title>
</head>
<body>
<h1>Hello Word<h1>
</body>
</html>
HTML Ekstensi
• Untuk menyimpan file HTML ekstensi yang digunakan
adalah .htm atau html.
• Ekstensi yang paling sering digunakan adalah .html
Peg. Komp & TI 2C
M4
CSS
Cascading Style Sheets (CSS) adalah suatu teknologi
yang digunakan untuk memperindah halaman website
(situs).
Fungsi : mendefenisikan style untuk suatu teks
dengan jenis huruf, ukuran , warna tertentu.
 CSS dapat dituliskan pada bagian <body>, <head>
suatu dokumen HTML atau diletakkan di sebuah file
eksternal.
 Perintah-perintah CSS dibatasi oleh tag <style> dan
</style>
Peg. Komp & TI 2C
M4
Contoh Sederhana
Script HTML:
<html>
<head>
<title>StyleSheet Sederhana
</title>
<style>
h1
{
font-family: verdana;
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>StyleSheet Sederhana<h1>
</body>
</html>
Tampilan:
Selector
Adalah nama yang diberikan untuk setiap style berbeda yang dibuat.
Di dalam style didefinisikan bagaimana setiap selector akan bekerja
(font, color dan lain-lain.).
Kemudian di dalam bagian body halaman web, selector tersebut dipanggil
untuk mengaktifkan style yang telah didefinisikan.
Jenis-jenis Selector:
•Selector HTML
•Selector Class
•Selector ID
Selector HTML
Digunakan untuk mendefinisikan style yang berhubungan
dengan tag HTML, melakukan redefinisi tag normal HTML
 Syntax: SelectorHTML {Properti:Nilai;}

Script HTML:
<html>
<head>
<title>Selector HTML</title>
<style type="text/css">
b {font-family:arial; font-size:14px; color:red}
</style>
</head>
<body>

<b>Tulisan ini tebal karena menggunakan style
CSS</b>
</body>
</html>
Tampilan:
Selector Class
Digunakan untuk mendefinisikan style yang dapat
dipakai tanpa melakukan redefinisi tag HTML.
 Syntax: ClassSelector {Properti:Nilai;}

Script HTML:
<html>
<head>
<title>Selector Class</title>
<style type="text/css">
.headline {font-family:arial; font-size:14px; color:red}
</style>
</head>
<body>
<b class="headline">
Tulisan ini tebal karena pengaruh selector class headline
</b><br>
<i class="headline">
Tulisan ini dicetak miring karena selector class headline
</i>
</body>
</html>
Tampilan:
Selector ID
Digunakan untuk mendefinisikan style yang
berhubungan dengan suatu object
memanfaatkan ID unik, biasa digunakan saat
bekerja dengan layer
 Syntax: #IDSelector {Properti:Nilai;}

Tampilan:
Selector ID
Script HTML:
<html>
<head>
<title>Selector ID</title>
<style type="text/css">
#layer1 {position:absolute; left:100;top:75; z-index:2}
#layer2 {position:absolute; left:130;top:120; z-index:1}
</style>
</head>
<body>
<div id="layer1">
<table border="1" bgcolor="cyan">
<tr> <td>Ini adalah layer 1<br>Diletakkan pada posisi (100,100)</td></tr>
</table>
</div>
<div id="layer2">
<table border="1" bgcolor="yellow">
<tr><td>Ini adalah layer 2<br>Diletakkan pada posisi (130,120)</td></tr>
</table>
</div>
</body>
</html>
PHP
Apakah PHP itu ?
PHP (Hypertext Preprocessor) adalah bahasa scripting open source
yang paling banyak digunakan di dalam proses pembuatan web
dinamis, yang dapat disisipkan ke dalam dokumen HTML.
Pada awalnya PHP merupakan kependekan dari Personal Home Page
(Situs personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada
tahun 1995. Pada waktu itu PHP masih bernama Form Interpreted
(FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk
mengolah data formulir dari web.
Peg. Komp & TI 2C
M4
banyak database yang telah didukung oleh
PHP dan kemungkinan akan terus bertambah
 dBase,
DBM
 FilePro,
mSQL
 MySQL,
ODBC
 Oracle,
Postgres
 Sybase,
Velocis
Cara penulisan kode php

<? echo ("ini adalah script PHP\n"); ?>

<?php echo("ini juga\n"); ?>

<script language="php">
echo ("tulis pake ini jika html editor Anda tidak mengenali PHP");
</script>

<% echo ("kalau yang ini mirip dengan ASP"); %>
Perhatikan bahwa tiap akhir baris harus selalu diberi tanda titik koma
(;).
Javascript
•
Javascript adalah bahasa yang berbentuk kumpulan skrip
yang pada fungsinya berjalan pada suatu dokumen HTML,
sepanjang sejarah internet bahasa ini adalah bahasa skrip
pertama untuk web. Bahasa ini adalah bahasa pemrograman
untuk memberikan kemampuan tambahan terhadap bahasa
HTML dengan mengijinkan pengeksekusian perintah perintah
di sisi user, yang artinya di sisi browser bukan di sisi server
web.
• Javascript bergantung kepada browser(navigator) yang
memanggil halaman web yang berisi skrip skrip dari
Javascript dan tentu saja terselip di dalam dokumen HTML.
Struktur Dasar Javascript

Script dari JavaScript adalah sebagai berikut :
< SCRIPT language=”JavaScript” type =
“text/javascript”>
[ statemen JavaScript …]
</ SCRIPT >
•
Peletakan JavaScript adalah sebagai berikut :
Pada bagian head :
Pada bagian body :
<html>
<head>
<script language=”JavaScript”
type=”type/javascript”>
<html>
<head>
</head>
<body>
<script language=”JavaScript” type=”text/javascript”>
…
</script>
</head>
…
</script>
</body>
Contoh Java Script
MySQL
MySQL adalah database (tempat penyimpanan data) server
relasional yang gratis di bawah lisensi GNU (General
Public Lisensi).
MySQL adalah Sebuah program database server yang mampu
menerima dan mengirimkan datanya sangat cepat, multi
user serta menggunakan peintah dasar SQL ( Structured
Query Language).
Peg. Komp & TI 2C
M4
PHP MyAdmin mysql
Cara kerja
SEKIAN

M4 PHP, HTML, CSS, MySQL

Products

Support

M4 PHP, HTML, CSS, MySQL

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib