WORKSHOP BERSAMA PHP INDONESIA : Pembahasan Tentang HTML dan CSS

create-script - hai gaesss... bertemu lagi bersama saya di blog kesayangan kita :v. pada kesempatan kali ini, BLC TELKOM kedatangan tamu dari PHP Indonesia nih. pastinya kalian bertanya gimana sih keseruannya?, dan apa saja yang di sharingkan di BLC TELKOM ya?...oke lah, supaya tidak kelamaan, mari kita simak keseruannya berikut :)

kali ini BLC TELKOM kedatangan tamu dari PHP indonesia. Dan tamunya adalah :

Pak Cahyo Sasongko
Mbak Sinta
Mas Yeri
Mas Agashi

Acara dari PHP Indonesia dibuka dengan pak Cahyo sharing dan cerita-cerita tentang pengalamannya.

kemudian dilanjutkan dengan pak Cahyo memperkenalkan anak didiknya yang juga anggota di PHP Indonesia dan juga merupakan rekrut'an beliau:

lalu, setelah beliau-beliau berkenalan, beliau langsung memberi materi dan menceritakan sedikit cerita, dan ilmu sepputar dunia IT

yang pertama adalah sharing bersama Mbak Sinta, beliau menceritakan tentang :

kenapa orang dengan jurusan IT sulit mencari pekerjaan yang sesuai dengan IT. dan hal ini terjadi karena materi yang diajarkan di sekolah tidak sesuai dengan yang dibutuhkan perusahaan
software developer dan software developmen

SESI SHARING (BERSAMA MAS AGASHI) :

Beliau sharing tentang sebagai berikut:

apa itu WEB & HTML
bagaimana cara kerja WEB

beliau memceritakan bahwa web dapat dibedakan menjadi 3 protokol, yaitu sebagai berikut :

URL's : addresses of resource
HTTP : dialogue between client and server
HTML : format of resources

Materi yang akan dipelajari selanjutnya adalah :

mysql
html5
php
JQuery
CSS3

Aplikasi yang digunakan saat pembuatan suatu Website :

1. Aplikasi Web Browsernya, anda dapat menggunakan salah satu Web Browser Dibawah ini:

internet explorer
mozilla firefox
google chrome
safari
opera mini

2. Web Server :

XAMPP(aplikasi bundle yang didalamnya ada apache dll, supaya tidak menginstall sendiri")
PHP
MySql

3. Versi-versi HTML :

HTML:1991
HTML2.0 : 1996
HTML 3.2 : 1997
HTML 4.01 : 1999
HTML 5 : 2008

4. Atribut-atribut pada HTML

SESI PRAKTEK DAN LATIHAN (BERSAMA MAS YERI)

sesi selanjutnya adalah Praktik dan Latihan, pada sesi ini yang sharing adalah Mas Yeri. Beliau Memberikan Script Berikut :

1. contoh pertama, rekan dari PHP indonesia memberikan sedikit contoh website menggunakan html sederhana :

<!DOCTYPE html>
<html>
<head>
<title>Belajar bersama PHP Indonesia</title>
</head>
<body>
<h1>Hai</h1>
</body>
</html>

Penjelasan :
html memiliki aturan lebih tepatnya ada structuralnya, yaitu sebagai Berikut :

html(bagian terluar dari struktur)
head(bagian kepala dari struktural
body(bagian tempat meletakkan tag" yang akan ditampilkan di browser)

2. contoh kedua :

mas yeri memberikan tambahan script dari script pertama tadi

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    *{
    font-family: sans-serif;
}
h1{
    font-size: 50px;
    text-align: center;
    background-color: blue;
    padding: 20px 20px 20px 20px;
}
p{
    background-color: blue;

}
div p{
    background-color: red;
}
li{
    float: left;
    list-style: none;
    padding: 20px 20px 20px 20px;
    background-color: black;
    color: yellow;
}
li:hover{
    background-color: red;
    border-bottom: 5px solid orange;
}
</style>
    <title>Belajar bersama PHP Indonesia</title>
</head>
<body>
<h1>Hai</h1>
<p>hschavycfvab chjfasvbx vhfsgcvgsdc VCHVGS cgcvnbVZHVD ASvhsgaV Dvf yhfv AHVDjwgavhD AHVDjwgavhD</p>
<pre>saya ganteng</pre>
<ol>
<li>ini</li>
<li>adalah</li>
<li>tag satu </li>
</ol>
<img src="images/anu.jpg" />
<a target="_blank" href="linktujuan.com">link tujuan</a>
<iframe width="560" height="310" src="link youtube" frameborder="0" allowfullscreen></iframe>
</body>
</html>

Penjelasan :
script diatas tidak jauh berbeda dengan script contoh pertama, yaitu hanya ditambah dengan tag-tag dan CSS-nya saja.

Penjelasannya sebagai Berikut :

tag <style> hanya digunakan untuk memperindah tampilannya saja, didalam tag <style> ada selector, atribut dan value.

selector digunakan untuk memasukkan nama tag-tagnya
atribut digunakan untuk seperti apa tampilan yang akan kita atur nanti
value digunakan untuk memasukkan level yang digunakan untuk mengatur CSS-nya.

karena script CSS-nya terlalu panjang, maka silakan dicermati sendiri-sendiri di w3schools :)

dan untuk penjelasan script HTML-nya Sebagai Berikut :

tag <p> digunakan untuk memberi paragraf.
tag <ol>/<ul> yaitu digunakan untuk menuliskan list.
tag <img> digunakan untuk menampilkan gambar dan src="" digunakan sebagai penunjuk dimana kita menaruh gambar kita yang ingin ditampilkan di website.
tag <a> digunakan untuk hyperlink, didalam petik adalah link yang dituju yaitu dengan menggunakan href="". didalamnya juga ada tulisan target="_blank" yang berfungsi untuk membuka tab baru saat link tersebut di klik.

sekian sharing saya tentang kegiatan Workshop PHP indonesia kali ini

Semoga Bermanfaat

Wassalammualikum Wr.Wb

Share this