Scribd
Unggah
26 tayangan

M4 Pengenalan PHP, HTML, CSS, MySQL

Dokumen tersebut membahas tentang Hypertext Markup Language (HTML) yang merupakan bahasa markup standar untuk membuat halaman web dan menampilkan berbagai informasi. HTML memungkinkan penambahan tag-tag dan atribut untuk mengatur tampilan teks, tabel, gambar, dan elemen lainnya. Dokumen tersebut juga menjelaskan versi-versi HTML, editor HTML, struktur dasar dokumen HTML, dan penggunaan Cascading Style Sheets (CSS) untuk mendefinisikan gaya

Diunggah oleh

febrianti dwianjani
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
26 tayangan

M4 Pengenalan PHP, HTML, CSS, MySQL

Dokumen tersebut membahas tentang Hypertext Markup Language (HTML) yang merupakan bahasa markup standar untuk membuat halaman web dan menampilkan berbagai informasi. HTML memungkinkan penambahan tag-tag dan atribut untuk mengatur tampilan teks, tabel, gambar, dan elemen lainnya. Dokumen tersebut juga menjelaskan versi-versi HTML, editor HTML, struktur dasar dokumen HTML, dan penggunaan Cascading Style Sheets (CSS) untuk mendefinisikan gaya

Diunggah oleh

febrianti dwianjani
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 25

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

<Head>
<Title>
Kepala Judul Homepage
<head> </Title>
</Head>
Homepage
<Body>
Isi…Teks
Tubuh Isi…Tabel.
<body> Isi…Audio, Video, dll.
</Body>

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
Tampilan:
</title>
<style>
h1
{
font-family: verdana;
color: red;
text-align: center;
}
</style>
</head>

<body>
<h1>StyleSheet Sederhana<h1>
</body>
</html>
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;}

Tampilan:
Script HTML:
<html>
<head>
<title>Selector HTML</title>
<style type="text/css">
b {font-family:arial; font-size:14px; color:red}
</style>
</head>
<body>
<!-- memanggil selector b yang me-redefinisi-kan
<b> -->
<b>Tulisan ini tebal karena menggunakan style
CSS</b>
</body>
</html>
Selector Class

 Digunakan untuk mendefinisikan style yang dapat


dipakai tanpa melakukan redefinisi tag HTML.
 Syntax: ClassSelector {Properti:Nilai;}
Script HTML:
<html>
Tampilan:
<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>
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> <html>
<head> <head>
<script language=”JavaScript” </head>
<body>
type=”type/javascript”>
<script language=”JavaScript” type=”text/javascript”>
… …
</script> </script>
</head> </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

Anda mungkin juga menyukai