Beranda » Pendidikan » Cara Membuat Tanpilan Website Sekolah Yang Sederhana mengunakan HTML DAN CSS

Cara Membuat Tanpilan Website Sekolah Yang Sederhana mengunakan HTML DAN CSS

CSS

fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik. Dan lebih bagus lagi di lihat dan semakin menarik tentunya.

cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html. Tersebut nantinya.

HTML

HTML biasanya menggunakan tahap-tahapan yang tertentu dan berada dalam tanda kurung < >. Sebagian besar pada HTML adalah tag yang berpasangan, contoh : jika kita menggunakan <head> harus ditutup dengan </head>, atau jika kita menggunakan <p> harus ditutup dengan </p>. Tapi ada juga yang beberapa pada tanpilan yang tidak berpasangan, contohnya adalah <img>.

Dokumen HTML mirip dengan dokumen tulisan biasa. Akan tetapi, dalam dokumen HTML, sebuah tulisan dapat memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Contohnya, jika ingin membuat tulisan ditampilkan menjadi tebal, seperti TULISAN TEBAL, penulisan dalam dokumen HTML dilakukan dengan cara TULISAN TEBAL. Tanda dipakai untuk mengaktifkan instruksi cetak tebal, kemudian diikuti tulisan yang ingin ditebalkan. Setelah itu, diakhiri dengan tanda untuk menonaktifkan cetak tebal tersebut.

Dan jangan lupa di tanpilkan script CSS. Untuk tanpilan yang lebih menarik pada tanpilan web nya nati.

baca juga ya di bawah ini:

Opreasi-Operasi Dasar Struktur Data

Di bawah ini ada contoh script CSS:

<style>

/* Css resets */

* {

padding:0;

margin:0;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

-box-sizing:border-box;

}

ul {

list-style: none;

}

img {

max-width: auto;

height: auto;

}

body {

font-family: 'Georgia', serif;

background-color: #FFFF66;

}

h1,h2,h2,h3,h4,h5

h1 {

color: blue;

}

h1 {

color: color;

}

margin:0.3em 0 0.5em 0;

}

/* End css resets */

/* Css default */

@media (min-width:768px){

.container {

width:1000px;

}

}

.container {

margin:3vh auto;

padding:10px;

}

.page-title {

margin:10px auto;

text-align: center;

color:#cc00ff;

font-size: 17px;

}

.page-title h1 {

font-size:40px;

color:#3300ff;

line-height: 1;

}

.page-title a{

color:#ff7777;

text-decoration: none;

}

.page-title a:hover{

text-decoration: underline;

color: #ff3333;

}

/* End css default */

.menu, .menu >ul {

position: relative;

background-color: #800;

height: 50px;

}

.menu >ul >li {

display: inline-block;

padding:15.5px 0;

overflow: hidden;

}

.menu >ul >li >a {

padding:17px;

color:#eee;

text-decoration: none;

}

.menu >ul >li:hover {

background-color: #ff00ff;

-webkit-transition:ease 0.3s;

}

.menu .menu-detail {

height: 0;

visibility: hidden;

opacity: 0;

position: absolute;

}

.menu >ul >li:hover >div.menu-detail {

opacity: 1;

height: 300000px;

width:100%;

visibility: visible;

top:50px;

right:0;

left: 0;

z-index: 99;

background-color: #FFFF66;

color:#black;

-webkit-transition:height 1s;

-moz-transition:height 1s;

transition:height 1s;

border-top:3px solid #00cc00;

overflow: hidden;

}

baca juga ya di bawah ini:

Etika Profesi Teknologi Informasi Cyber Ethics

Di bawah ini ada contoh script HTML:

<html>

<head>

<title> Selamat Datang Di web SMPK NEGRI 1 kota pekanbaru</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body background = "Gedung Smk Negeri 1 pekanbaru.jpg">

<body>

</style>

<div class="wrap">

<div class="header">

<a target="_blank" href="img_fjords.jpg">

<img src="Logo 1.PNG" alt="Trolltunga Norway" width="150" height="200">

</a>

</div>

<h1>SMK NEGRI KOTA PEKANBARU<h1>

<p>SELAMAT DATANG DI SMK NEGRI KOTA PEKANBARU</p>

<marquee> SELAMAT DATANG DI SMK KOTA PEKANBARU</marquee>

</div>

<div class="menu">

<ul>

<li><a href="#">Home</a>

<div class="menu-detail profile">

<div class="section section-1">

<h3 class="section-title">SELAMAT DATANG DI SMK NEGRI 1 PEKANBARU </h3>

<p> Selamat datang di Sekolah Menangah Atas (SMK) Negeri 1 kota peknbaru </strong></p>

<P>Kota pekanbaru. SMK NEGRI merupakan salah satu Sekolah unggulan yang berada di kota pekanbaru </strong></p>

</div>

</div>

<li><a href="#">VISI dan MSI</a>

<div class="menu-detail profile">

<div class="section section-1">

<h3 class="section-title">Visi dan Misi</h3>

<br>

<h3 class="section-title">VISI</h3>

<div class="gallery">

<a target="_blank" href="img_fjords.jpg">

<img src="Gedung Smk Negeri 1 pekanbaru.jpg" alt="Trolltunga Norway" width="300" height="200">

</a>

</div>

<p>Menjadi Lembaga Pendidikan Menengah Kejuruan yang dapat menghasilkan tamatan yang memiliki IMTAQ dan IPTEK</p>

<br>

<h3 class="section-title">Visi dan Misi</h3>

<p>Melaksanakan peningkatan kualitas dan keunggulan tamatan yang memiliki kompetensi nasional/internasional melalui</p>

<p> 1. Meningkatkan Mutu Sumber Daya Manusia ( SDM )</p>

<p> 2. Meningkatkan Mutu Kegiatan Belajar Mengajar</p>

<p> 3. Meningkatkan Sarana dan Prasarana</p>

<p> 4. Meningkatkan Hubungan Kerja Sama dengan Masyarakat, Komite Sekolah dan DU/DI</p>

<p> 5. Meningkatkan tenaga kerja sesuai dengan bidangnya agar dapat menghadapi era globalisasi </p>

<div class="section copywrite">

</div>

<li><a href="#">Frofil Sekolah</a>

<div class="menu-detail profile">

<div class="section section-1">

<h3 class="section-title">Frofil Sekolah</h3>

<br>

<h3 class="section-title">PROFIL SMK NEGERI KOTA PEKANBARU</h3>

<br>

<h3 class="section-title">Sejarah Singkat </h3>

<p> di sini kalian bisan menambahkan nama sekolah anda</p>

<p> 1. kota pekanbaru merupakan Lembaga pendidikan dan latihan dibawah naungan Direktorat Jenderal Pendidikan Dasar dan Menengah, </p>

<p> Departemen Pendidikan Nasional, yakni bagian yang terpadu dalam sistem pendidikan kejuruan Direktorat Pendidikan Menengah </p>

<p> Kejuruan dalam bentuk teknis pelaksanaan untuk Pengembangan sekolah Menengah Kejuruan.</p>

<br>

<p di sini juga anda bisa menambakan segala hal yang berada di sekolah anda ini hanya sekedar contoh</p>

<p> contoh tanggal 02 Oktober 2004 SMK Negeri ditetapkan sebagai SMK berstandar Internasional.</p>

<br>

<p> di sini kalian bisa di tambahkan tahun bedirinya sekolah anda ini sekedar contoh saja</p>

<p> sebagai modal awal dari kepemimpinan baru melaksanakan pembinaan dan pengembangan sistem manajemen melalui pendekatan </p>

<p> Manajemen Kualitas ISO 9001:2000.</p>

<br>

<p> kalian bisa menambahkan segal sesuatu tentang sekolah anda.</p>

<br>

<p> di sini kalian bisa tambahkan tentang tahun kegiatn kalian dan acara-acar yang di lagsanakan kalian</p>

<p> KEBERSAMAAN sebagai lanjutan dari kepemimpinan baru melaksanakan pembinaan dan pengembangan sistem manajemen </p>

<p> melalui pendekatan Manajemen Kualitas ISO 9001:2008.</p>

<br>

<p>di kalian bisa menambahkan identitas sekolah kalian dll ini hanya conntoh.</p>

<div class="section copywrite">

</div>

<li><a href="#">Galeri</a>

<div class="menu-detail profile">

<div class="section section-1">

<h3 class="section-title"></h3>

<div class="section copywrite">

</div>

<br>

<p> FOTO FOTO SISWA SMK NEGERI 1 KOTA PEKANBARU</P>

<br>

<a target="_blank" href="img_fjords.jpg">

<img src="Siswa.jpg" alt="Trolltunga Norway" width="300" height="200">

</a>

<a target="_blank" href="img_fjords.jpg">

<img src="SSWA1.jpg" alt="Trolltunga Norway" width="300" height="200">

</a>

</a target="_blank" href="img_fjords.jpg">

<img src="SISWA 3.jpg" alt="Trolltunga Norway" width="300" height="200">

</a>

</a target="_blank" href="img_fjords.jpg">

<img src="Siswa 4.jpg" alt="Trolltunga Norway" width="300" height="200">

</a>

</a target="_blank" href="img_fjords.jpg">

<img src="Siswa 5.jpg" alt="Trolltunga Norway" width="300" height="200">

</a>

</a target="_blank" href="img_fjords.jpg">

<img src="siswa 6.jpg" alt="Trolltunga Norway" width="300" height="200">

</a>

</a target="_blank" href="img_fjords.jpg">

<img src="siswa 7.jpg" alt="Trolltunga Norway" width="300" height="200">

</a>

<img src="siswa 8.jpg" alt="Trolltunga Norway" width="300" height="200">

<img src="siswa 9.jpg" alt="Trolltunga Norway" width="300" height="200">

<img src="siswa 10.jpg" alt="Trolltunga Norway" width="500" height="300">

</div>

<li><a href="#">Agenda</a>

<div class="menu-detail profile">

<div class="section section-1">

<br>

<h3 class="section-title">Formulir Pendaftaran Calon Siswa/i Baru SMK </h3>

<br>

<p> TAHUN PELAJARAN 2018/2019</p>

<br>

<p> SMK 1 pekanbaru (STM & SMEA) kota pekanbaru </p>

<br>

<h3 class="section-title"></h3>

<p>Nama Lengkap</p>

<input type="text" name="userid">

<br>

<h3 class="section-title"></h3>

<p> Nama Pangglilan</p>

<input type="text" name="userid">

<br>

<h3 class="section-title"></h3>

<p> Jenil Kelamin</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Tempat/Tgl.Lahir<p/>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Agama</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Anak Ke Berapa<p/>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Jumlah Saudara Kandung</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Bahasa Sehari-hari</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Alamat Tempat Tinggal</p>

<input type="password" name="psw">

<br>

<div class="section copywrite">

</div>

<br>

<p> Masukkan alamat lengkap anda termasuk Rt, Rw, Kelurahan, Kecamatan, Kota serta Kode Pos.</p>

<br>

<div class="section copywrite">

</div>

<h3 class="section-title"></h3>

<p> No. Telp / HP</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Tinggal Dengan</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Jarak Tempat Tinggal Ke Sekolah (KM)</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Golongan Darah</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Penyakit Berat Yang Pernah Diderita</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Kelainan Jasmani</p>

<input type="password" name="psw">

<br>

<br>

<h3 class="section-title">DATA SEKOLAH ASAL</h3>

<br>

<p>Isilah data sekolah asal anda dengan lengkap.</strong></p>

<br>

<div class="section copywrite">

</div>

<h3 class="section-title"></h3>

<p> Nama Sekolah</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Alamat Sekolah</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Tahun Lulus</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> No. Ijasah / STTB</p>

<input type="password" name="psw">

<br>

<p>Apabila belum menerima Ijasah dapat dikosongkan saja yang di atas</strong></p>

<div class="section copywrite">

</div>

<br>

<h3 class="section-title"></h3>

<p> Nomor Induk Siswa Nasional (NISN)</p>

<input type="password" name="psw">

<br>

<p>Apabila belum memilki dapat dikosongkan saja yang di atas</strong></p>

<br>

<h1>BIODATA ORANG TUA CALON SISWA </h1>

<br>

<p>Isilah biodata orang tua anda dengan lengkap</strong></p>

<br>

<div class="section copywrite">

</div>

<h3 class="section-title"></h3>

<p> Nama Ayah</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Tempat / Tgl Lahir</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Agama</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Pendidikan</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Pekerjaan Ayah</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Penghasilan / Bulan</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Alamat Rumah</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Nama Ibu</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Tempat / Tgl Lahir</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Agama</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Pendidikan</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Pekerjaan Ibu</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Alamat Rumah</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> No. Telp / HP</p>

<input type="password" name="psw">

<br>

<br>

<h3 class="section-title">BIODATA WALI CALON SISWA BARU</h3>

<br>

<p>Isilah biodata wali siswa anda dengan lengkap</strong></p>

<br>

<div class="section copywrite">

</div>

<h3 class="section-title"></h3>

<p> Nama Wali</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Tempat / Tgl Lahir</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Agama</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Pendidikan</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Pekerjaan Wali</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Alamat Wali Siswa</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> No. Telp / HP</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Kegemaran / Hobi Siswa</p>

<input type="password" name="psw">

<br>

<h3 class="section-title"></h3>

<p> Pilihan Program Keahlian</p>

<input type="password" name="psw">

<br>

<br>

<marquee>Terima Kasih Telah Melakukan Pendaftaran Online</marquee>

<marquee>Silahkan anda datang ke Sekolah untuk melakukan daftar ulang dan pembayaran biaya pendidikan</marquee>

<p>Sampai Jumpa Lagi di SMK 1 kota pekanbaru riau</strong><p>

<div class="section copywrite">

</div>

<li><a href="#">Siswa</a>

<div class="menu-detail profile">

<div class="section section-1">

<div class="section copywrite">

<div class="gallery">

<br>

<a target="_blank" href="img_fjords.jpg">

<img src="kelas pilihan.jpg" alt="Trolltunga Norway" width="300" height="200">

</a>

</div>

<h3 class="section-title">Kelas Pilihan</h3>

<P> 1. Reguler</p>

<p> 2. Full Day</p>

<p> 3. Sistem Kredit Semester (SKS)</p>

<br>

<h3 class="section-title">Kurikulum </h3>

<p> Menggunakan Kurikulum Nasional, Kurikulum Sekolah, dan Muatan Lokal</p>

<br>

<a target="_blank" href="img_fjords.jpg">

<img src="Photo siswa.jpg" alt="Trolltunga Norway" width="300" height="200">

</a>

</div>

<h3 class="section-title">Program Unggulan</h3>

<p> Computer Skill, Islamic Building Training, Skill Leadership Training, English Club, Japanese Club, German Club, Arabic </p>

<p> Club, Drone Piloting Club, Literacy Club, Fruit Gardening Club, Al- Quran Training dan Fardu Kifayah, Sholat Zuhur dan </p>

<p> Ashar Berjamaah, Sholat Dhuha, Tematik Al-Quran, Pelayanan Konseling dan Psikologi, Market Day, Studi Observasi </p>

<p> Kelautan dan Kehutanan, serta Dunia Usaha dan Industri dan Bimbingan Tes/Studi, GEMAS (Gerakan Membersihkan </p>

<p> Masjid), Seminar Antar Kelas, Bedah Buku dan Sains Expo.</p>

</div>

<li><a href="#">Kontak</a>

<div class="menu-detail profile">

<div class="section section-1">

<h3 class="section-title"></h3>

<div class="section copywrite">

</div>

<h3 class="section-title"> </h3>

<br>

<p> KONTAK DAN INFORMASI</p>

<br>

<p> YAYASAN PROF SMK NEGRI 1 Kota Pekanbaru </p>

<br>

<h3 class="section-title"> PERGURUAN SMK NEGRI 1 KOTA PEKANBARU</h3>

<br>

<a target="_blank" href="img_fjords.jpg">

<img src="Logo 1.PNG" alt="Trolltunga Norway" width="200" height="200">

</a>

</div>

<h3 class="section-title">SMP SMK</h3>

<br>

<p> JLN. Semeru No.16, Rintis, Kec.Lima Puluh, Kota Pekanbaru Prov. Riau</p>

<li><a href="#">Artikel</a>

<div class="menu-detail profile">

<div class="section section-1">

<br>

<a target="_blank" href="img_fjords.jpg">

<img src="Poto Artikel 1.JPG" alt="Trolltunga Norway" width="400" height="300">

</a>

</div>

<h3 class="section-title">SMk Negeri 1 Pekanbaru Juara 2 Olimpiade Matematika OSN 2017</h3>

<br>

<P> di sini kalian bisa menambahkan kegiatan sekolah adna tentang kegiatan siswa anda contohnya : tentang perlombahan</P>

<br>

<P> SMk negeri 1 Pekanbaru kembali meraih prestasi yang membanggakan dan mengharumkan nama sekolah. Terbaru, peserta didik SMk negeri 1 </p>

<p> Pekanbaru berhasil meraih juara 2 Olimpiade Matematika Pada Event bergengsi OSN 2017 yang berlangsung Tanggal 2 s.d 8 Juli 2017 </p>

<p> lalu di Pekanbaru , Riau. </p>

<br>

<p> Demikian disampaikan Koordinator Olimpiade SMk NEGERI 1 Pekanbaru Dra. Novera mengatakan peserta didik yang berhasil meraih prestasi </p>

<p> itu adalah Aditya Dwianto yang merupakan peserta didik kelas XII MIA8.</p>

<br>

<p> "Alhamdulillah, Peserta didik asal SMk NEGERI Pekanbaru berhasil meraih medali Perak dalam OSN 2017. Sebelumnya, Aditya juga berhasil </P>

<li><a href="#">Video</a>

<div class="menu-detail profile">

<div class="section section-1">

<h3 class="section-title"></h3>

<div class="section copywrite">

</div>

<h3 class="section-title"> </h3>

<br>

<br>

<marquee> SELAMAT DATANG DI YOUTUBE KEGIATAN SMK 1 PEKANBARU</marquee>

<br>

<h3 class="section-title">Video Kegiatan SMK 1 Pekanbaru</h3>

<br>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

video {

max-width: 100%;

height: 300;

}

</style>

</head>

<body>

<video width="400" controls >

<source src="video damen barus.mp4" type="video/mp4">

<source src="mov_bbb.ogg" type="video/mp4">

</video>

<br>

<video width="400" controls >

<source src="Video Siswa.mp4" type="video/mp4">

<source src="mov_bbb.ogg" type="video/mp4">

</video>

<br>

<video width="400" controls >

<source src="video1.mp4" type="video/mp4">

<source src="mov_bbb.ogg" type="video/mp4">

</video>

<marquee>Jangal lupa ya like dan share SUBSCRIBER Terimakasih sudah mampir ke youtube saya sampai junpalagi di video saya berikutnya</marquee>

</ul>

</div>

</div>

</body>

</html>

baca juga ya di bawah ini:

Sistem Informasi Manajemen Sumber Daya Manusia

Etika Profesi Teknologi Informasi Cyber Ethics

Ahmad Ansori3 February 2020 at 19:47
Baca Tutorial Membuat WEB Sekolah Lainnya :Klik Disini.
ReplyDelete
Replies
Nanachan1 December 2021 at 17:05
wah makasih
ReplyDelete
Replies

Subscribe to: Post Comments (Atom)