BELAJAR MEMBUAT WEBSITE SEDERHANA dengan Elemen HTML, CSS, dan Js

Seputar belajar membuat web sederhana . Maka pembahasannya berisi tentang HTML, CSS, dan Js. pertama-tama kenalan dulu yuk sama mereka.

1.Apa itu website, html dan css?

A. Apa Itu Website

Website adalah sebuah kumpulan halaman pada suatu domain di internet yang dibuat dengan tujuan tertentu dan saling berhubungan serta dapat diakses secara luas melalui halaman depan (home page) menggunakan sebuah browser menggunakan url website.

B. Apa Itu HTML

HTML adalah singkatan dari Hypertext Markup Language yaitu bahasa pemrograman yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web internet (browser). HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbitan yang disebut Standard Generalized Markup Language (SGML).

Link : https://senuansa.blogspot.com/2021/11/ambil-code.html?m=1

C. Apa Itu Css

Oke pertama-tama saat mulai belajar CSS kamu tentu harus paham betul pengertiannya. Sebenarnya apa itu CSS? CSS adalah singkatan dari Cascading Style Sheets. Jika diterjemahkan ke bahasa Indonesia secara harfiah, CSS berarti “lembar penataan menurun”. Namun secara konteks, Cascading Style Sheets adalah kumpulan perintah yang digunakan untuk menjelaskan tampilan sebuah halaman situs web dalam mark-up language. Mark-up language atau bahasa markah adalah bahasa pemrograman yang biasanya digunakan membuat website

D. Apa itu JS

Javascript apakah sama dengan java? beda! Javascript ini bukan anak dari java. Javascript Menyempurnakan tampilan dan sistem halaman web

Penggunaan Js dulu digunakan untuk sistem halaman web secara statis saja, sekarang Js sudah dintegrasi kan dengan database, namun kali ini kita bakalan bahas fungsi js di membuat web sederhana

E. Mencoba Membuat Web sederhana

Sudah kenalan mari kita buka Browser terlebih dahulu sebelum membuat web sederhana.

⚙ Contoh Code HTML

⚙ Contoh Code CSS

.hide{display:none;visibility:hidden;}
.popbox{position:fixed;top:0;left:0;bottom:0;width:100%;z-index:1000000;}
.pop-content{width:800px;height:400px;display:block;position:absolute;top:50%;left:50%;margin:-200px 0 0 -400px;z-index:2;box-shadow:0 3px 20px 0 rgba(0,0,0,.5);}
.popcontent{width:100%;height:100%;display:block;background:#fff;border-radius:5px;overflow:hidden}
.pop-overlay{position:absolute;top:0;left:0;bottom:0;width:100%;z-index:1;background:rgba(0,0,0,.7)}
.popbox-close-button{position:absolute;width:20px;height:20px;line-height:20px;text-align:center;top:-10px;right:-10px;background-color:#fff;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:50%;cursor:pointer;font-size:34px;font-weight:lighter;padding:0}
.popcontent img{width:100%;height:100%;display:block}
.flowbox{position:relative;overflow:hidden}
@media screen and (max-width:840px){.pop-content{width:90%;height:auto;top:20%;margin:0 0 0 -45%}
.popcontent img{height:auto}
}

⚙ Contoh Code JS

Atau

// setTimeout(function(){ document.getElementById('popbox').classList.remove('hide'); document.body.className+=" flowbox" }, 5000); function removeClassonBody(){var element=document.body;element.className=element.className.replace(/bflowboxb/g,"")} //

📥 Contoh Code Website Sederhana Lengkap :

HELLO WORD

BELAJAR MEMBUAT WEBSITE SEDERHANA

MULAI

SEJARAH

SOSIAL

Jika Anda Berminat

Maka Silahkan coba membuat Website sederhana dengan Code Editor Berikut ini :

https://jsbin.com/woqokanuno/
https://output.jsbin.com/pozayamelu/
https://output.jsbin.com/yuradawobu/
https://output.jsbin.com/cihodakome/
https://jsbin.com/reyugijexa/

Sekian di post kali ini apabila ada yang ingin ditanyakan silahkan berkomentar dibawah.