Search

Script HTML dan CSS Beserta Foto Hasilnya

Arief_ichwan.f Agustus 03, 2022 0 Komentar
   SCRIPT STYLE CSS : 

.container{
width: 90%;
margin:10px auto;
color:#333;
border:1px solid gray;
line-height: 130%;
}

.header{
padding: .5em;
height: 270px;
background-image : url('banner8.gif');
/*background-color: #ddd;*/
border-bottom:1px solid gray;
}

.nav{
padding: .5em;
background-color: #ddd;
border-bottom:1px solid gray;
}

.content{
padding: .5em;
background-color: #fff;
border-bottom:1px solid gray;
}

.footer{
clear: both;
text-align: center;
margin: 0;
padding: .5em; 
background-color: #ddd;
border-top:1px solid gray;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
body{
font-family: sans-serif;
background: #d5f0f3;
}
 
h1{
text-align: center;
/ketebalan font/
font-weight: 300;
}

.tulisan_login{
text-align: center;
/membuat semua huruf menjadi kapital/
text-transform: uppercase;
}
 
.kotak_login{
width: 350px;
background: white;
/meletakkan form ke tengah/
margin: 80px auto;
padding: 30px 20px;
}
 
label{
font-size: 11pt;
}
 
.form_login{
/membuat lebar form penuh/
box-sizing : border-box;
width: 100%;
padding: 10px;
font-size: 11pt;
margin-bottom: 20px;
}
 
.tombol_login{
background: #46de4b;
color: white;
font-size: 11pt;
width: 100%;
border: none;
border-radius: 3px;
padding: 10px 20px;
}
 
.link{
color: #232323;
text-decoration: none;
font-size: 10pt;

=========================================================================
    Contoh script Beranda HTML : 

<html>
  <head>
<title>Websiteku</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="container">
<div class="header"></div>
    <div class="navbar">
   <a href="index.html">Beranda</a>
   <a href="profil.html">Profil</a>
   <a href="daftar.html">Daftar</a>
   <a href="login.html">Login</a>
   <div class="dropdown">
<button class="dropbtn">Catatan 
  <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
   <a href="audio.html">HTML Audio</a>
   <a href="video.html">HTML Video</a>
  <a href="ytb.html">HTML Youtube</a>
</div>
  </div> 
</div>

<div class="content">
Beranda
<p>Internal CSS adalah kode CSS yang ditulis di dalam tag style. Intarnal CSS juga dikenal dengan sebutan Embeded CSS.</p>
</div>
<div class="footer">
Arief_ichwan.f
</div>
</div>
</body>
</html>

    Hasil script Beranda HTML : 

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

Contoh script Profile HTML : 

<html>

  <head>

<title>Websiteku</title>

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

</head>

<body>

<div class="container">

<div class="header"></div>

    <div class="navbar">

   <a href="index.html">Beranda</a>

   <a href="profil.html">Profil</a>

   <a href="daftar.html">Daftar</a>

   <a href="login.html">Login</a>

   <div class="dropdown">

<button class="dropbtn">Catatan 

  <i class="fa fa-caret-down"></i>

</button>

<div class="dropdown-content">

   <a href="audio.html">HTML Audio</a>

   <a href="video.html">HTML Video</a>

  <a href="ytb.html">HTML Youtube</a>

</div>

  </div> 

</div>

<div class="content">

Profil

<p><!-- Tag body ini gunanya untuk mengisikan semua konten yang ada di dalam web-->

    <h1 align="center">BIOGRAPHY</h1><!--Judul Halaman Web-->

    <hr align="center" width="100%" color="#3a3634" size="2"><!--Untuk Membuat Garis-->

    <center><!--Tag untuk ke tengah gambarnya-->

        <img src="foto1.jpg" width="300" height="300" alt="image in here"><!--tag img src itu sesuaikan nama file di dalam folder dan file gambar harus di dalam folder yang sama dengan file web kita-->

    </center>

    <h1 align="center" size="36"> BINGO </h1>

<p align="center"> 

            NAMA : ARIEF ICHWAN FANANI <br>

UMUR : 17 TAHUN<br>

ALAMAT : KELAPA DUA DEPOK</br>

<p align="center"><!-- Ini untuk penulisan list -->

    HOBI : OLAHRAGA</p>

    <hr align="center" width="100%" color="#3a3634" size="2">

<p align="center"> Copyright 2018 </p></p>

</div>

<div class="footer">

   Arief_ichwan.f

</div>

</div>

</body>

Related Article

</html>

    Hasil script Beranda HTML : 

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

    Contoh script Login HTML : 

<html>

  <head>

<title>Websiteku</title>

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

</head>

<body>

<html>

  <head>

<title>Websiteku</title>

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

</head>

<body>

<div class="container">

<div class="header"></div>

    <div class="navbar">

   <a href="index.html">Beranda</a>

   <a href="profil.html">Profil</a>

   <a href="daftar.html">Daftar</a>

   <a href="login.html">Login</a>

   <div class="dropdown">

<button class="dropbtn">Catatan 

  <i class="fa fa-caret-down"></i>

</button>

<div class="dropdown-content">

   <a href="audio.html">HTML Audio</a>

   <a href="video.html">HTML Video</a>

  <a href="ytb.html">HTML Youtube</a>

</div>

  </div> 

</div>

<div class="content">

<center><table><div class="kotak_login"></table>

<p class="tulisan_login">SILAHKAN LOGIN</p>

<form>

<label>Username</label>

<center><input type="text" name="username" class="form_login" placeholder="Username atau email .."></center>

<label>Password</label>

<input type="text" name="password" class="form_login" placeholder="Password ..">

<input type="submit" class="tombol_login" value="LOGIN">

<br/>

<br/>

<center>

<a class="link" href="index.html">kembali</a>

</center>

</form>

</div></center>

<div class="footer">

Arief_ichwan.f

</div>

</div>

</body>

</html>

      Hasil script Login HTML : 

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

    Contoh script Audio HTML : 
<html>
  <head>
<title>Websiteku</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="container">
<div class="header"></div>
    <div class="navbar">
   <a href="index.html">Beranda</a>
   <a href="profil.html">Profil</a>
   <a href="daftar.html">Daftar</a>
   <a href="login.html">Login</a>
   <div class="dropdown">
<button class="dropbtn">Catatan 
  <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
   <a href="audio.html">HTML Audio</a>
   <a href="video.html">HTML Video</a>
  <a href="ytb.html">HTML Youtube</a>
</div>
  </div> 
</div>


<div class="content">
1. Audio
<p>
<img src="foto9.png">
</p>
<p><audio controls>
<source src="rizky_febian_hingga_tua_bersama_official.ogg" type="audio/ogg">
<source src="rizky_febian_hingga_tua_bersama_official.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio></p>
<p>
<img src="foto8.png">
</p>
<div class="footer">
Arief_ichwan.f
</div>
</div>
</body>
</html>

      Hasil script Audio HTML : 
===============================================================================

     Contoh script Video HTML : 
<html>
  <head>
<title>Websiteku</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="container">
<div class="header"></div>
    <div class="navbar">
   <a href="index.html">Beranda</a>
   <a href="profil.html">Profil</a>
   <a href="daftar.html">Daftar</a>
   <a href="login.html">Login</a>
   <div class="dropdown">
<button class="dropbtn">Catatan 
  <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
   <a href="audio.html">HTML Audio</a>
   <a href="video.html">HTML Video</a>
  <a href="ytb.html">HTML Youtube</a>
</div>
  </div> 
</div>
<div class="content">
1. video
<p><video width="320" height="400" controls>
  <source src="movie1.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p>
  <img src="foto6.png"></p>
</div>
</div>
<div class="footer">
Arief_ichwan.f
</div>
</div>
</body>
</html>

     Hasil script Video HTML : 
================================================================================

    Contoh script Youtube HTML : 
<html>
  <head>
<title>Websiteku</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="container">
<div class="header"></div>
    <div class="navbar">
   <a href="index.html">Beranda</a>
   <a href="profil.html">Profil</a>
   <a href="daftar.html">Daftar</a>
   <a href="login.html">Login</a>
   <div class="dropdown">
<button class="dropbtn">Catatan 
  <i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
   <a href="audio.html">HTML Audio</a>
   <a href="video.html">HTML Video</a>
  <a href="ytb.html">HTML Youtube</a>
</div>
  </div> 
</div>
<div class="content">
1. Youtube
<p><iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
<p>
  <img src="foto7.png"></p>
</div>
</div>
<div class="footer">
Arief_ichwan.f
</div>
</div>
</body>
</html>

      Hasil script Youtube HTML : 
================================================================================

Arief_ichwan.f

Diposting olehArief_ichwan.f

0 Komentar