contoh penggunaan localhost di web

Andhika Ramaditya Oktober 09, 2022

Berikut contoh hasil localhost dalam pembuatan website



hasil tersebut dibuat menggunakan code editor Visual Studio.

berikut codingannya

HTML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="p.css" />
</head>
<body>
    <div class="container">
        <div class="head">
            <h3>Resep Ngenyangin</h3>
            <img src="download (2).png" alt="d" height="50px">
        </div>
        <div class="menu">
            <img src="images.jpg" height="40px" class="img">
            <h3><a href="#">Home</a></h3>
            <h3><a href="#">Resep</a></h3>
            <h3><a href="#">Artikel</a></h3>
            <h3><a href="#">call us</a></h3>
            <p></p>
        </div>
        <div class="sidebar">
            <div class="lr">
                <ul type="none">
                <li><a href="">Sate</a></li>
                <li><a href="">Rendang</a></li>
                <li><a href="">Soto</a></li>
                <li><a href="">Sop</a></li>
                <li><a href="">Kikil</a></li>
                <li><a href="">Dendeng</a></li>
                <li><a href="">Kerak telor</a></li>
                <li><a href="">Nasi goreng</a></li>
                <li><a href="">Indomie</a></li>
                <ul>
            </div>
            
            <div class="main">
                <h1 style="text-align:center;">Sate</h1>
                <img src="download (2).jpg" alt="" style="float:left; margin:10px;">
                <p>Sate atau satai adalah makanan yang terbuat dari daging yang dipotong kecil-kecil dan ditusuk sedemikian rupa dengan tusukan lidi tulang daun kelapa atau bambu, kemudian dipanggang menggunakan bara arang kayu. Sate disajikan dengan berbagai macam bumbu yang bergantung pada variasi resep sate. Daging yang dijadikan sate antara lain daging ayam, kambing, domba, sapi, babi, kelinci, kuda, dan lain-lain.</p>
                <br>
                <p>
                    Sate diketahui berasal dari Jawa, Indonesia, dan dapat ditemukan di mana saja di Indonesia dan telah dianggap sebagai salah satu masakan nasional Indonesia.[10] Sate juga populer di negara-negara Asia Tenggara lainnya seperti Malaysia, Singapura, Filipina, dan Thailand. Sate juga populer di Belanda karena dipengaruhi masakan Indonesia yang dulu merupakan koloninya.
                </p>
                <br>
                <br>
                <h2 align="center">Cara Memasak</h2>
                <p>
                    Ada banyak resep sate yang ada di dunia. Akan tetapi secara garis besarnya resep sate adalah sebagai berikut. Kunyit atau kecap manis adalah salah satu bumbu penting untuk membumbui daging sate dan memberikan warna. Daging sate sendiri banyak ragamnya, misalnya daging kambing, ayam, sapi, domba, babi, ikan, udang, cumi-cumi, kelinci,telur puyuh atau jeroan. Beberapa daging adalah daging eksotik yang kurang lazim, seperti daging kura-kura, bulus, buaya, kuda, kadal, dan ular. Daging yang sudah ditusuki dan diberi bumbu baluran rendaman ini, kemudian dipanggang dalam bara api arang hingga matang.Sate dapat disajikan dengan bumbu kacang atau kecap manis, disertai potongan bawang merah dan mentimun. Disajikan dengan nasi putih panas, ketupat, atau lontong. Sate babi biasanya menggunakan saus berbahan dasar nanas, atau kecap manis.
                </p>
            </div>
            <div class="lr2">
                <img src="IKLAN-vertikal.jpg" alt="">
            </div>
        </div>

        <div class="footer">
            <h3>© Dibuat Oleh Andhika Ramaditya</h3>
        </div>
    </div>
</body>
</html>

CSS


* {
    margin: 0;
    padding:0;
}



.head {
    width: 100%;
    height: 80px;
    background-color: rgb(255, 255, 255);
    text-align: center;
}
.menu {
    width: 100%;
    height: 50px;
    background-color: rgb(3, 2, 2);
    display: flex;
    color: white;
    justify-content: space-between;
    align-items: center;
    
}

.menu h3 a{
    text-decoration: none;
    color: white;
}

.menu h3 a:hover{
    color: purple;
}

.menu h3 a:active{
    color:blue
}

.sidebar{
    width: 100%;
    height: 600px;
    background-image: url(moroccan-flower.png);
    display: flex;
}

.lr ul li a{
    text-decoration: none;
    
}

.lr ul li a:hover{
    color: blue;
    border-radius: 8px;
    background-color: beige;
}

.main{
    height: 100%;
    flex: 2;
    font-size: medium;
    padding: 10px;
    overflow: auto;
}

.lr {
    flex: 1;
    height: 100%;
    border-right: 2px solid black;
    font-size: x-large;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 50px;
    background-color: rgb(220, 220, 220);
    display: block;
}

.lr2 {
    flex:1;
    height: 100%;
    font-size: large;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    border-left:2px solid black;
    background-color: white;
}

.img{
    padding: 5px;
}

.footer{
    width: 100%;
    height: 50px;
    background-color: black;
    color: white;
    padding: 15px;
}

.footer h3 {
        margin-top: 15px;
        text-align: center;
    }


ul li a{
    color: black;
}

 

Andhika Ramaditya

Diposting oleh Andhika Ramaditya

Posting Komentar

0 Komentar