Tugas Semester 2 Perpustakaan HTML PHP DAN CSS coding keren ( PART 1 )

Kali ini saya akan membuat Halaman awal yaitu INDEX.php

Sebelum Kamu Lanjut harap diperhatikan sebelum postingan ini ada keterangan Fungsi Meta Tag Dan Div Pemrogramaan kalo sudah oke kita lanjut Rencana saya mau buat tampilan seperti berikut .






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/Style.css">
    <title>Perpustakaan Online Milenial</title>
</head>
<body>

<div id="container">
<div class="header"><img src="Perpustakaan.jpg" width="1100" height="150">
</div>

<div class="main">
<div class="left">
<h3 align="center">MENU</h3>
<ul>
<li><a href="http://localhost:8080/Tugas_web_perpustakaan/login.php">Login Perpustakaan</a></li>
</ul>

</div>

<div class="middle">
<h3 align="center">Artikel/Berita/Buku Terbaru</h3>
<h2 align="center">Buku: Syafii Efendi - Nikah Muda Nikah Kaya</h2><br>
<div align="center">
<img src="nikah_muda.png" width="150" >
</div>
<p><b><a href="#">Baca Selengkapnya -->> </a></p></b>
</div>

<div class="center">
<h3 align="center">WARNING !!!</h3>
<h3 align="center">Terimakasih Telah Mampir Kedalam Website ini, Jangan lupa ketika anda mendapatkan ilmu harap diAMALKAN
karena akan sia- sia ilmu tersebut apabila tidak diamalkan</h3>
</div>
</div>
</div>

<div class="footer"><p align="center">Copyright © 2019 - R4YKERFLY</a></p>
</div>
</div>
</body>
</html>

Copy paste buat dengan nama Index.php selanjutnya nanti saya akan buat blog tentang login.php . 

nah saya ga mau ngasih codingannya doank . alangkah baiknya dengan keterangan .

=============


Pada saat membuat satu halaman website dengan memberikan tag <meta charset=”UTF-8”> berarti halaman tersebut 
telah memberi informasi terhadap browser dan search engine untuk melakukan pengkodean karakter sesuai ketentuan UTF-8.

============
Agar layout menjadi fleksibel, cara terpraktis adalah mendasari lebar viewport anda sesuai perangkat, 
agar lebar layout anda mencocoki dengan lebar perangkat yang anda gunakan.

1. <meta name="viewport" content="width=device-width">


Untuk memastikan bahwa layout anda akan ditampilkan seperti yang anda maksudkan, anda juga dapat mengatur tingkat pembesaran (zoom). Contoh berikut:

2. <meta name="viewport" content="initial-scale=1">

..akan memastikan bahwa ketika terbuka, layout anda akan ditampilkan dengan baik pada skala 1:1. Tidak ada pembesaran yang dilakukan. 
Anda bahkan dapat beranjak lebih jauh dan mencegah pembesaran yang dilakukan oleh pengguna .

============

Elemen div yang merupakan kepanjangan dari division, merupakan salah satu elemen dalam HTML yang 
berfungsi sebagai wadah atau kontainer. Div tidak mempengaruhi tampilan dari layout, kecuali saat anda telah mendefinisikan tampilannya melalui CSS.

Sebagai sebuah container, div tidak mewakili apapun. Fungsi utamanya sebenarnya untuk mengelompokkan konten web yang anda buat, sehingga 
memudahkan saat anda mendesainnya melalui CSS. Mendesain div sendiri bisa dilakukan dengan memanfaatkan salah satu atribut yakni id atau class

Elemen div digunakan sebagai kontainer saat kontainer lainnya tidak sesuai untuk dipakai. Kontainer lain yang bisa dipakai misalnya <article>, <nav>, <section> atau lainnya. 
Anda dapat mengecek berbagai jenis container ini dengan mengacu pada standar World Wide Web Consorsium(W3C).

============
alasan css dipisah karena agar proses editing terhadap style dokumen dapat dilakukan secara mudah dan terpusat.

Penulisan css :
- CSS secara embedded style sheet diletakan diatas body, dalam artian ada di 1 folder itu sendiri
- CSS secara linked style sheet  secara link dalam artian document berbeda

============
ob_start adalah fungsi yang digunakan untuk mengaktifkan penyimpanan output pada browser terhadap halaman tertentu
session_start(), untuk memulai session. session_start — Menginisialisasi data dari session.
ob_end_flush digunakan untuk mengosongkan output buffer dan menutup output buffer.ob_end_flush akan langsung memunculkan seluruh buffer

ob_end_clean digunakan untuk menghapus output buffer dan menutup output buffer
ob_end_clean akan menyembunyikan buffer dan akan dimunculkan dengan menggunakan ob_get_content

===========
tag Marquee mempunyai beberapa attribute seperti dibawah ini :

bgcolor : untuk mengatur background dari text marquee
direction : untuk mengatur gerakan text (up,down,left,right)
scrollamount : untuk mengatur kecepatan gerakan text
behaviour : untuk mengatur effect dari gerakan
width : untuk mengatur lebar area gerakan
height : untuk mengatur tinggi area gerakan
align : untuk mengatur posisi
onmouseover : untuk menghentikan effect ketika mouse mendekat
onmouseout : untuk menjalankan effect ketika mouse menjauh

===========
Hover adalah salah satu element css. Hover ini berguna untuk membuat efek saat mouse mengenai suatu element HTML

    klik link dibawah ini kalo mau lanjut part 2nya

CARA BUAT WEB PERPUSTAKAAN FORM LOGIN TANPA DATABASE


Peringatan Jika anda belum seperti tampilan gambar ketahuilah anda belum buat CSSnya nanti ada diketerangan akhir atau bisa langsung klik link dibawah ini .

No comments:

Post a Comment

Pages