Scribd
Unggah
446 tayangan15 halaman

Kumpulan Syntax Dasar HTML

Dokumen tersebut membahas syntax dasar HTML dan CSS serta perintah-perintah dasar MySQL untuk membuat dan mengelola basis data."

Diunggah oleh

FerlyRomadhon
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 DOCX, PDF, TXT atau baca online di Scribd
446 tayangan15 halaman

Kumpulan Syntax Dasar HTML

Dokumen tersebut membahas syntax dasar HTML dan CSS serta perintah-perintah dasar MySQL untuk membuat dan mengelola basis data."

Diunggah oleh

FerlyRomadhon
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 DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 15

KUMPULAN SYNTAX DASAR HTML

Struktur Dasar

1 <span style="font-size: small;"><html>


2 <head>
3 <!-ini adalah bagian header-->
4 <title>judul web</title>
5 </head>
6 <body>
7 <!-tempat menuliskan kode-->
8 </body>
9 </html>
10 </span>

<!--…-->

<span style="font-size: small;"><!—Ini adalah komentar dan tidak akan ditampilkan dibrowser--
1
></span>

<a>
Mendefinisikan tag anchor. Digunakan untuk membuat link ke dokumen lain menggunakan
atribut herf dan juga untuk membuat bookmark dokumen mengunakan atribut name.
Contoh :
1 <body>
2 <a href=http://www.google.com”>kunjungi website google</a>
3 </body>

<b>
Digunakan untuk mencetak tebal suatu teks.
Contoh:
1 <b>teks tercetak tebal (bold)</b>
<body>
Digunakan untuk mendefinisikan badan html, yang didalamnya merupakan tempat untuk
meletakan elemen-elemen html lainnya, seperti gambar, teks, table, form, dll
Contoh:
1 <html>
2 <head>
3 <title>judul web</title>
4 </head>
5 <body>
6 <!-ini adalah bagian badan tempat anda menuliskan kode-->
7 </body>
8 </html>

<br>
Digunakan untuk menyisipkan sebuah baris(ganti baris)
Contoh:
1 <body>
2 Salah satu aplikasi internet adalah web
3
4 Html adalah kode dasar untuk membuat web
5
6 </body>

<center>
Digunakan untuk menampilkan teks ditengah halaman
Contoh:
1 <center> teks ini akan tampil ditengah halaman</center>
<div>
Digunakan untuk mendifinisikan bagian dari sebuah halaman web. Seringkali digunakan
untuk mengelompokan elemen-elemen HTML dengan format style tertentu.
Contoh:
1 <div style=’color:#ff0000”>
2 <h3>ini merupakan judul</h3>
3 <p>ini merupakan paragraph</p>
4 </div>

<form>
Digunakan untuk mendifinisikan sebuah form masukan dari pengguna
Contoh:
1 <form action=”action.php” method=”get”>
2 Nama: <input type=”text” name=”f_nama”/>
3
4
5 email: <input type=”text” name=”f_email”/>
6
7
8 <input type=”submite” value=’simpan”/>
9 </form>

<h1> sampai dengan <h6>


Digunakan untuk mendinisikan bagian atas (heading) teks. Dimulai dari ukuran besar<h1>
hingga ukuran kecil<h6>
Contoh:
1 <h1> HTML adalah kode dasar membuat web</h1>
2 <h2> HTML adalah kode dasar membuat web</h2>
3 <h3> HTML adalah kode dasar membuat web</h3>
4 <h4> HTML adalah kode dasar membuat web</h4>
5 <h5> HTML adalah kode dasar membuat web</h5>
6 <h6> HTML adalah kode dasar membuat web</h6>
<head>
Digunakan untuk mendifinisikan bagian atas(head) sebuah dokumen html. Bagian ini
biasanya digunakan untuk mendifinisikan tag <base>, <link>, <meta>, <script>, <style>, dan
<title>.
Contoh:
1 <head>
2 <title>judul web</title>
3 </head>

<hr>
Digunakan untuk mendifinisikan sebuah garis horizontal dalam halaman html
Contoh:
1 Salah satu aplikasi internet adalah web<hr>
2 Html adalah kode dasar untuk membuat web

<i>
Digunakan untuk mencetak miring suatu teks.
Contoh:
1 <i>teks tercetak miring(italic)</i>

<p>
Digunakan untuk membuat paragraph baru.

<select>
Digunakan untuk mendinisikan daftar pilihan
Contoh:
1 <select>
2 <option value=”detik”>detik</option>
3 <option value=”viva”>vivanews</option>
4 <option value=”glodokshop”>glodok shop</option>
5 <option value=”bhineka”>Bhineka</option>
6 </select>
<Strong>
Digunakan untuk mempertegas tampilan suatu teks.
Contoh:
1 Kode dasar untuk membuat web adalah <strong>HTML</strong>

<Style>
Digunakan untuk mendifinisikan informasi style pada dokumen html
Contoh:
1 <head>
2 <style type=”text/css”>
3 Span.blue {color:lightskyblue;
4 Font-weight:bold}
5 </style>
6 </head>
7 <body>
8 Kode dasr untuk membuat web adalah <span class=”blue”>HTML</span>
9 </body>

<table>
Digunakan untuk membuat table dalam halaman web.
Contoh:
1 <table border=”1”>
2 <caption>daftar situs</caption><tr>
3 <th>berita</th>

<title>
Digunakan untuk mendifinisikan judul pada dokumen html.
Contoh:
1 <head>
2 <title>judul web</title>
3 </head>
<u>
Digunakan untuk menambahkan garis bawah suatu teks
Contoh:
1 <u>teks bergaris bawah(bold)</u>

<ul>
Digunakan untuk membuat daftar yang tak berurut (unordered list) menggunakan symbol
bullets.
Contoh:
1 <ul>
2 <li>webpribadi</li>
3 <li>blog</li>
4 <li>facebook</li>
5 </ul>
SYNTAX CSS (CASCADING STYLE SHEET)
SYNTAX CSS
CSS memiliki syntax yang sederhana dan menggunakan sejumlah kata kunci berbahasa
Inggris untuk menentukan nama-nama berbagai properti. CSS memiliki dua aturan utama,
yaitu Selector dan Declaration. Untuk lebih jelasnya, lihat cara penulisan serta komponen
yang terdapat pada CSS berikut :

Dalam kode CSS, ada 2 bagian yang terpisah, yaitu Selector dan Declaration.
Selector biasanya merupakan elemen HTML atau tag dimana berbagai properti diberi suatu
nilai.
Setiap Declaration terdiri dari Property dan Value.
Untuk penulisan Declaration harus menggunakan tanda kurung kurawal {...}
Property adalah atribut style yang ingin dirubah, misalnya color, background, margin, dll.
Setiap Property memiliki Value (nilai) sesuai dengan jenis property-nya.

Pengelompokan Selector
Seperti yang dilihat pada contoh di atas, salu selector dapat memiliki beberapa property. Jika
terdapat beberapa selector yang memiliki property yang sama, dapat dilakukan
pengelompokan selector. Lihat contoh berikut :
- Syntax CSS
h1, body, p, ul { color: blue; }
- Syntax HTML
<body>
<h1>Warna Biru</h1>
Contoh teks
</body>
Pada contoh di atas, elemen header, body, paragraph, dan unordered list berada pada group
yang sama. Semua elemen tersebut nantinya akan memiliki teks berwarna biru.
ID dan Class
Untuk memahami tentang ID dan Class, dapat melihat contoh kode CSS berikut :
#identitas {
font-size: 20px;
color: #FF0000;
background-color: #000;
}

.kelas {
font-size: 30px;
color: #12FF34;
background-color: #FFFFFF;
}
Selector ID menggunakan tanda pagar (#) sebagai penandanya, sedangkan Selector Class
menggunakan tanda titik (.).
Penamaan pada selector ID dan Class dapat dibuat secara bebas, tetapi sebaiknya disesuaikan
dengan nama kelompok yang terkait untuk mempermudah pengeditan.
Perbedaan antara ID dan Class pada CSS adalah pada tingkat penggunaannya. ID sebaiknya
digunakan sebagai identitas yang unik seperti Logo, Header, Footer, Sidebar.
Sedangkan Class digunakan untuk menandai atribut yang lebih spesifik seperti ketebalan
border (garis pinggir), kode warna, paragraph, jenis font, ukuran font, dll.
Class dapat digunakan untuk mengatur tampilan atau atribut dari suatu kelompok data
HTML, baik yang memiliki ID tertentu atau tidak.
ID digunakan untuk memberikan identifikasi atau atribut pada kelompok data atau elemen
HTML yang lebih besar.

Implementasi CSS
Ada 2 cara yang bisa diterapkan untuk menggunakan CSS pada tampilan web. Cara pertama
yaitu dengan membuat CSS langsung di dalam satu file HTML. Cara ini disebut
dengan internal/inline style sheet.
Cara yang kedua yaitu dengan cara membuat file CSS tersendiri,lalu file tersebut dipanggil
melalui HTML yang dibuat. Cara ini disebut dengan external style sheet.
Internal Style CSS
Metode Internal Style maksudnya ialah style CSS digabung atau ditulis bersamaan dengan
tag-tag HTML. Agar dapat lebih dipahami, lihat contoh kode HTML berikut :
File index.html

<html>
<head>
<title>Contoh Internal Style</title>
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
}
.kelas {
font-size: 50px;
color: #FF0000;
background-color: #000;
}
#identitas {
font-size: 30px;
color: #000;
background-color: #FF0000;
}
</style>
</head>
<body>
<div class="kelas">Contoh Penulisan Class</div>
<br \>
<div id="identitas">Contoh Penulisan ID</div>
</body>
</html>
Dilihat dari kode di atas, syntax CSS ditulis langsung di dalam HTML yang dibuat, yaitu
pada bagian <head>dengan tag <style>. Selector body langsung digunakan oleh HTML tanpa
perlu dipanggil kembali, sedangkan ID dan Class pada contoh di atas dipanggil pada
tag <div>.
External Style CSS
Merupakan metode penulisan CSS dimana Syntax CSS dibuat file tersendiri yang terpisah
dengan file HTML. File CSS ini nantinya dapat digunakan oleh semua file HTML yang ada.
Untuk memanggil file CSS yang telah dibuat, tambahkan baris berikut pada
bagian <head> HTML :
<link rel="stylesheet" type="text/css" href="lokasi_file_css.css" />
Untuk lebih memahami penggunaannya, perhatikan contoh berikut :
- File gaya.css
body {
font-family: Arial, Helvetica, sans-serif;
}
.kelas {
font-size: 50px;
color: #FF0000;
background-color: #000;
}
#identitas {
font-size: 30px;
color: #000;
background-color: #FF0000;
}
- File index.html
<html>
<head>
<title>Contoh External Style</title>
<link rel="stylesheet" type="text/css" href="gaya.css" />
</head>
<body>
<div class="kelas">Contoh Penulisan Class</div>
<br \>
<div id="identitas">Contoh Penulisan ID</div>
</body>
</html>
SYNTAX / PERINTAH-PERINTAH DASAR MYSQL
Perintah contoh syntax

menampilkan mysql> show databases ;


semua data base
membuat mysql> create database
database baru mahasiswa;
Memilih mysql> use mahasiswa;
database yang
akan digunakan
membuat tabel mysql> create table
mahasiswa
- > (nopeg int unsigned
auto_increment primary key,
- > nama varchar(35) not
null,
- > gender varchar(2),
- > alamat varchar(30),
- > kota varchar(15),
- > tgllahir date null
default ’0000-00-00’) ;
melihat tabel mysql> show tables ;
Menampilkan mysql> show columns from
Struktur Tabel mahasiswa ;
mengisi data mysql> insert into
(cara 1) mahasiswa
> (nama, gender, alamat,
kota, tgllahir, kodepos)
> values
> (’Ahmad’,’LK’,’Pasar
Minggu no
2’,’Jakarta’,’1985-09-
25’,’15617’)
> ;
mengisi data mysql> insert into
(cara 2) mahasiswa
> set nama = ’budi’,
> gender = ’LK’,
> alamat = ’Kerinci N0 12’,
> kota = ’Depok’,
> tgllahir =’1995-07-17’,
mengisi data mysql> insert into mahasiswa
(cara 3) > values
> (null,’andi’,’LK’,’blok
A’,’Jakarta’,’1985-09-
25’,’15617’)
>;
menampilkan mysql> select * from
data mahasiswa ;
> ;
menambah kolom mysql-> alter table
mahasiswa
-> add kodepos
varchar(5)
-> ;
menghapus mysql->drop database
database mahasiswa;
menghapus kolom (contoh menghapus kolom
alamat)
mysql>alter table mahasiswa
drop alamat;
mengubah kolom mysql->alter table mahasiswa
change kodepos telepon
int(10);
menampilkan mysql->select nama, alamat
kolom pilihan from mahasiswa;
,
cth:
menampilkan
kolom nama dan
alamat
untuk mysql>select * from
menampilkan mahasiswa order by nama;
field sesuai
urutan pilihan

Anda mungkin juga menyukai