Selasa, 19 September 2017

Workshop dari PHP Indonesia with Mas Yeri dan Mas Agasi | Pengertian HTML dan CSS

A. Pendahuluan
1. Pengertian
    a. Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).
     b. 
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.2. Latar Belakang

3. Maksud dan Tujuan

  • Mengetahui cara kerja HTML
  • Memahami kegunaan CSS
B. Alat dan Bahan
  • Text Editor
  • Browser
C. Durasi Waktu
4 jam

D. Uraian Kegiatan
1. Membuat file bernama index.html dan style.css, dalam satu folder.
2. Pada file pertama index.html isikan dengan
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>
Apa maksudnya, sekarang sudah ada html 5 dimana lebih mudah dalam pengimplementasiannya. Nah, untuk tag tag yang ingin diterapkan, kita taruh di dalam tag body.
Misalkan kita isikan seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h1>Ini Bagian Judul</h1>
    <p>Ini paragraf 1</p>

</body>
</html>

3. Untuk file yang satunya, yakni style.css. File ini adalah dimana tempat kita mengatur stylenya. Mulai dari model huruf, warna huruf, dan yang lainnya.
4. Pada file style.css kita isikan seperti berikut
h1 {
    color : red;
    font-family: sans-serif;
}
p {
    color: blue;
    text-align: center;
}

5. Untuk file index.html kita panggil file style.css nya. Dengan memberi kan tag di bawah ini
<link rel="stylesheet" type="text/css" href="style.css">
Terapkan pada bagian bawah ini
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Ini Bagian Judul</h1>
    <p>Ini paragraf 1</p>
</body>
</html>
6. Untuk melihat hasilnya, kita buka melalui browser


E. Dokumentasi

F. Temuan Masalah
file style.css tidak mau merespon, Kenapa? Ternyata terjadi kesalahan saat saya menuliskan filenya seperti dibawah ini

Sehingga, di browser style tidak merespon.

G. Kesimpulan
Jadi, sebenarnya browser itu membaca file html, yakni Hypertext Markup Language.
Dan style nya tinggal memanggil dan menyesuaikan.

H. Referensi
https://id.wikipedia.org/wiki/HTML
https://id.wikipedia.org/wiki/Cascading_Style_Sheets

Tidak ada komentar:
Write komentar