search

Contoh html keren dengan notepad

1 years ago
Komentar: 0
Dibaca: 175
Berikut ini adalah contoh coding HTML dan CSS website yang bisa kamu download secara gratis dan terdiri dari bermacam-macam website, mulai dari situs pribadi, blog, web sekolah, universitas/kampus, web perusahaan/company profile, commerce, toko online,  landing page, dll. Sangat cocok untuk pemula yang lagi belajar koding, ataupun kamu yang lagi ingin tahu cara membuat website atau blog sendiri dengan mudah dan cepat.

wikiHow adalah suatu "wiki", yang berarti ada banyak artikel kami yang disusun oleh lebih dari satu orang. Untuk membuat artikel ini, 65 penyusun, beberapa di antaranya anonim, menyunting dan memperbaiki dari waktu ke waktu.

Show

Artikel ini telah dilihat 104.225 kali.

Setiap hari, kita mengakses berbagai situs web. Namun, terkadang kita bertanya-tanya, sulitkah untuk membuat situs web sendiri? Di artikel ini, Anda akan dipandu untuk membuat halaman web HTML sederhana dengan Notepad.

  1. Bukalah Notepad. Penyunting teks ini merupakan program bawaan yang tersedia di setiap komputer Windows, dan dapat ditemukan di menu Start. Setelah Notepad terbuka, klik File > Save As, lalu pilih All Files pada kolom File Type. Simpan berkas buatan Anda dalam format HTML. Umumnya, halaman utama sebuah situs memiliki nama berkas "index.html", dan berisi tautan ke seluruh halaman pada situs.

  2. Pahami HTML. Tanda (tag) pada HTML (Hypertext Markup Language) berada dalam.
    Tanda tersebut berfungsi untuk membangun situs web Anda. Untuk mengakhiri kode HTML, gunakan tanda penutup (end tag), seperti .Tanda penutup tersebut berguna untuk menutup berbagai tanda, seperti tanda huruf tebal atau paragraf.

  3. Awali halaman web Anda dengan memasukkan tanda di bagian atas berkas.

  4. Gunakan tanda untuk memasukkan berbagai informasi. Tanda

    berguna untuk mengatur judul halaman, sementara tanda <meta> (opsional) berfungsi untuk memasukkan penjelasan mengenai isi halaman web. Tanda <meta> tersebut kemudian akan dibaca oleh mesin pencari, seperti Google. </p> </li> <li> <a></a> <p><b>Setelah memasukkan tanda <head>, beri judul halaman dengan tanda <title>, misalnya <title>wikiHow HTML

  5. Akhiri kepala situs dengan menggunakan tanda

  6. Gunakan tanda untuk memasukkan isi halaman. Ingatlah bahwa tidak semua warna didukung oleh peramban. Misalnya, warna abu-abu gelap mungkin tidak didukung.

  7. Tuliskan isi halaman web di antara tanda . Misalnya, mulailah dengan membuat kepala situs. Kepala situs adalah bagian situs dengan huruf berukuran besar, dan dibuat dengan tanda

    hingga. Tandadapat Anda gunakan untuk membuat kepala situs dengan ukuran huruf terbesar. Cobalah menggunakan tanda tersebut tepat di bawah tanda , sepertiSelamat datang di situs saya!. Pastikan Anda menutup tandadi akhir kalimat.

  8. Buatlah paragraf di halaman dengan tanda

    . Misalnya, tulislah

    Tes paragraf!

    Untuk membuat baris baru, gunakan tanda
    , atau break.

  9. Anda tentu tidak ingin halaman web yang Anda buat hanya berisi teks polos. Gunakan berbagai tanda berikut ini untuk memformat teks pada halaman web: untuk menebalkan teks, untuk memiringkan teks, dan untuk menggarisbawahinya. Setelah menggunakan tanda di atas, jangan lupa untuk menutupnya!

  10. Tambahkan gambar dengan tanda

    Contoh html keren dengan notepad
    .
    Parameter src pada tanda berfungsi untuk menulis nama berkas gambar, dan width serta height berfungsi untuk menjelaskan panjang dan lebarnya.

  11. Buatlah tautan yang mengarah ke halaman lain dengan tanda , misalnya Halaman lain. Teks di tengah tanda adalah teks yang akan muncul di halaman, sementara parameter href berisi halaman tujuan. Dengan tautan, pengunjung dapat berpindah ke berbagai halaman di situs Anda dengan mudah.

  12. Setelah selesai mengisi situs, akhiri halaman dengan menutup tanda . Terakhir, tutup kode HTML dengan

  13. Simpan halaman web buatan Anda dengan ekstensi .html, dan bukalah di peramban favorit Anda untuk mengujinya.

    Sebelumnya badoystudio.com sudah menyajikan artikel seputar 65 tag HTML beserta fungsi dan contoh penggunannya. Nah kali ini penulis akan memberikan beberapa contoh HTML yang terdiri dari berbagai tag sehingga jadi sebuah desain web yang menarik untuk bahan latihanmu. Untuk mempelajari selengkapnya silahkan ikuti artikel berikut ini sampai tuntas. 

    Daftar Isi

    5 Contoh HTML Keren yang Siap dipakai

    Oke, supaya cepat dan tak bertele-tele mari kita simak selengkapnya contoh html yang terdiri dari berbagai kode-kode HTML bahkan tambahan CSS agar lebih menarik tampilannya.

    1. Contoh HTML untuk Membuat Web Biodata atau CV

    Yang pertama yaitu desain web biodata atau CV menggunakan kode-kode HTML. Berikut kode-kode html dan CSSnya.

    <!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel='stylesheet' href='https://badoystudio.com/cloudme.fonts.googleapis.com/css?family=Roboto'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
</style>
<body class="w3-light-grey">

<!-- Page Container -->
<div class="w3-content w3-margin-top" style="max-width:1400px;">

<!-- The Grid -->
<div class="w3-row-padding">

<!-- Left Column -->
<div class="w3-third">

<div class="w3-white w3-text-grey w3-card-4">
<div class="w3-display-container">
<img src="/w3images/avatar_hat.jpg" style="width:100%" alt="Avatar">
<div class="w3-display-bottomleft w3-container w3-text-black">
<h2>Jane Doe</h2>
</div>
</div>
<div class="w3-container">
<p><i class="fa fa-briefcase fa-fw w3-margin-right w3-large w3-text-teal"></i>Designer</p>
<p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>London, UK</p>
<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i>[email protected]</p>
<p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal"></i>1224435534</p>
<hr>

<p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-teal"></i>Skills</b></p>
<p>Adobe Photoshop</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:90%">90%</div>
</div>
<p>Photography</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:80%">
<div class="w3-center w3-text-white">80%</div>
</div>
</div>
<p>Illustrator</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:75%">75%</div>
</div>
<p>Media</p>
<div class="w3-light-grey w3-round-xlarge w3-small">
<div class="w3-container w3-center w3-round-xlarge w3-teal" style="width:50%">50%</div>
</div>
<br>

<p class="w3-large w3-text-theme"><b><i class="fa fa-globe fa-fw w3-margin-right w3-text-teal"></i>Languages</b></p>
<p>English</p>
<div class="w3-light-grey w3-round-xlarge">
<div class="w3-round-xlarge w3-teal" style="height:24px;width:100%"></div>
</div>
<p>Spanish</p>
<div class="w3-light-grey w3-round-xlarge">
<div class="w3-round-xlarge w3-teal" style="height:24px;width:55%"></div>
</div>
<p>German</p>
<div class="w3-light-grey w3-round-xlarge">
<div class="w3-round-xlarge w3-teal" style="height:24px;width:25%"></div>
</div>
<br>
</div>
</div><br>

<!-- End Left Column -->
</div>

<!-- Right Column -->
<div class="w3-twothird">

<div class="w3-container w3-card w3-white w3-margin-bottom">
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Work Experience</h2>
<div class="w3-container">
<h5 class="w3-opacity"><b>Front End Developer / w3schools.com</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jan 2015 - <span class="w3-tag w3-teal w3-round">Current</span></h6>
<p>Lorem ipsum dolor sit amet. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.</p>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>Web Developer / something.com</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Mar 2012 - Dec 2014</h6>
<p>Consectetur adipisicing elit. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.</p>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>Graphic Designer / designsomething.com</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Jun 2010 - Mar 2012</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p><br>
</div>
</div>

<div class="w3-container w3-card w3-white">
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Education</h2>
<div class="w3-container">
<h5 class="w3-opacity"><b>W3Schools.com</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>Forever</h6>
<p>Web Development! All I need to know in one place</p>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>London Business School</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2013 - 2015</h6>
<p>Master Degree</p>
<hr>
</div>
<div class="w3-container">
<h5 class="w3-opacity"><b>School of Coding</b></h5>
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>2010 - 2013</h6>
<p>Bachelor Degree</p><br>
</div>
</div>

<!-- End Right Column -->
</div>

<!-- End Grid -->
</div>

<!-- End Page Container -->
</div>

<footer class="w3-container w3-teal w3-center w3-margin-top">
<p>Find me on social media.</p>
<i class="fa fa-facebook-official w3-hover-opacity"></i>
<i class="fa fa-instagram w3-hover-opacity"></i>
<i class="fa fa-snapchat w3-hover-opacity"></i>
<i class="fa fa-pinterest-p w3-hover-opacity"></i>
<i class="fa fa-twitter w3-hover-opacity"></i>
<i class="fa fa-linkedin w3-hover-opacity"></i>
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</footer>

</body>
</html>

    Maka hasil dari kode-kode html dan css di atas yaitu akan tampil seperti gambar di bawah ini :

    Contoh html keren dengan notepad

    Sumber kode : https://www.w3schools.com/w3css/tryw3css_templates_cv.htm

    Beberapa tag yang digunakan dari kode-kode HTML di atas yaitu :

      • Tag judul, seperti : kode <h1> s/d <h6> dan <hr>
      • Tag paragraf, seperti : kode <br> dan <p>
      • Tag formating, seperti : kode <b>, <i>, dan <u>
      • Tag gambar, seperti : kode <img> dan src
      • dan tag-tag yang lainnya

    2. Contoh HTML untuk Membuat Form yang Rapi dan Modern

    Contoh yang kedua yaitu pembuatan form menggunakan HTML dan CSS. Berikut kode-kode HTML dan CSSnya :

        • Kode HTML 
    <div class="form-style-10">
<h1>Sign Up Now!<span>Sign up and tell us what you think of the site!</span></h1>
<form>
<div class="section"><span>1</span>First Name & Address</div>
<div class="inner-wrap">
<label>Your Full Name <input type="text" name="field1" /></label>
<label>Address <textarea name="field2"></textarea></label>
</div>

<div class="section"><span>2</span>Email & Phone</div>
<div class="inner-wrap">
<label>Email Address <input type="email" name="field3" /></label>
<label>Phone Number <input type="text" name="field4" /></label>
</div>

<div class="section"><span>3</span>Passwords</div>
<div class="inner-wrap">
<label>Password <input type="password" name="field5" /></label>
<label>Confirm Password <input type="password" name="field6" /></label>
</div>
<div class="button-section">
<input type="submit" name="Sign Up" />
<span class="privacy-policy">
<input type="checkbox" name="field7">You agree to our Terms and Policy. 
</span>
</div>
</form>
</div>
        • Kode CSS
    <link href='http:https://badoystudio.com/cloudme.fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<style type="text/css">
.form-style-10{
width:450px;
padding:30px;
margin:40px auto;
background: #FFF;
border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}
.form-style-10 .inner-wrap{
padding: 30px;
background: #F8F8F8;
border-radius: 6px;
margin-bottom: 15px;
}
.form-style-10 h1{
background: #2A88AD;
padding: 20px 30px 15px 30px;
margin: -30px -30px 30px -30px;
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
}
.form-style-10 h1 > span{
display: block;
margin-top: 2px;
font: 13px Arial, Helvetica, sans-serif;
}
.form-style-10 label{
display: block;
font: 13px Arial, Helvetica, sans-serif;
color: #888;
margin-bottom: 15px;
}
.form-style-10 input[type="text"],
.form-style-10 input[type="date"],
.form-style-10 input[type="datetime"],
.form-style-10 input[type="email"],
.form-style-10 input[type="number"],
.form-style-10 input[type="search"],
.form-style-10 input[type="time"],
.form-style-10 input[type="url"],
.form-style-10 input[type="password"],
.form-style-10 textarea,
.form-style-10 select {
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 8px;
border-radius: 6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border: 2px solid #fff;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}

.form-style-10 .section{
font: normal 20px 'Bitter', serif;
color: #2A88AD;
margin-bottom: 5px;
}
.form-style-10 .section span {
background: #2A88AD;
padding: 5px 10px 5px 10px;
position: absolute;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 4px solid #fff;
font-size: 14px;
margin-left: -45px;
color: #fff;
margin-top: -3px;
}
.form-style-10 input[type="button"], 
.form-style-10 input[type="submit"]{
background: #2A88AD;
padding: 8px 20px 8px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
font-size: 15px;
}
.form-style-10 input[type="button"]:hover, 
.form-style-10 input[type="submit"]:hover{
background: #2A6881;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}
.form-style-10 .privacy-policy{
float: right;
width: 250px;
font: 12px Arial, Helvetica, sans-serif;
color: #4D4D4D;
margin-top: 10px;
text-align: right;
}
</style>

    Maka tampilan dari gabungan kode-kode HTML dan CSS di atas yaitu :

    Contoh html keren dengan notepad

    Sumber kode : https://www.sanwebe.com/2014/08/css-html-forms-designs

    Dari kode HTML di atas, tag-tag yang paling dominan digunakan tag form. Berikut tag yang digunakan untuk membangun form :

        • <form>
        • <input>
        • <label>
        • <textarea>
        • <fieldset>
        • <select>
        • <button>
        • dan lain sebagainya

     

    3. Contoh Kode untuk Mendesain Tampilan Web Media Sosial

    Contoh selanjutnya masih diambil dari w3school yaitu kode-kode HTML, CSS, dan JavaScript untuk mendesain tampilan website media sosial.

    <!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue-grey.css">
<link rel='stylesheet' href='https://badoystudio.com/cloudme.fonts.googleapis.com/css?family=Open+Sans'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html, body, h1, h2, h3, h4, h5 {font-family: "Open Sans", sans-serif}
</style>
<body class="w3-theme-l5">

<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-theme-d2 w3-left-align w3-large">
<a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-theme-d2" href="javascript:void(0);" onclick="openNav()"><i class="fa fa-bars"></i></a>
<a href="#" class="w3-bar-item w3-button w3-padding-large w3-theme-d4"><i class="fa fa-home w3-margin-right"></i>Logo</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="News"><i class="fa fa-globe"></i></a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="Account Settings"><i class="fa fa-user"></i></a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" title="Messages"><i class="fa fa-envelope"></i></a>
<div class="w3-dropdown-hover w3-hide-small">
<button class="w3-button w3-padding-large" title="Notifications"><i class="fa fa-bell"></i><span class="w3-badge w3-right w3-small w3-green">3</span></button> 
<div class="w3-dropdown-content w3-card-4 w3-bar-block" style="width:300px">
<a href="#" class="w3-bar-item w3-button">One new friend request</a>
<a href="#" class="w3-bar-item w3-button">John Doe posted on your wall</a>
<a href="#" class="w3-bar-item w3-button">Jane likes your post</a>
</div>
</div>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-right w3-padding-large w3-hover-white" title="My Account">
<img src="/w3images/avatar2.png" class="w3-circle" style="height:23px;width:23px" alt="Avatar">
</a>
</div>
</div>

<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-theme-d2 w3-hide w3-hide-large w3-hide-medium w3-large">
<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">Link 3</a>
<a href="#" class="w3-bar-item w3-button w3-padding-large">My Profile</a>
</div>

<!-- Page Container -->
<div class="w3-container w3-content" style="max-width:1400px;margin-top:80px"> 
<!-- The Grid -->
<div class="w3-row">
<!-- Left Column -->
<div class="w3-col m3">
<!-- Profile -->
<div class="w3-card w3-round w3-white">
<div class="w3-container">
<h4 class="w3-center">My Profile</h4>
<p class="w3-center"><img src="/w3images/avatar3.png" class="w3-circle" style="height:106px;width:106px" alt="Avatar"></p>
<hr>
<p><i class="fa fa-pencil fa-fw w3-margin-right w3-text-theme"></i> Designer, UI</p>
<p><i class="fa fa-home fa-fw w3-margin-right w3-text-theme"></i> London, UK</p>
<p><i class="fa fa-birthday-cake fa-fw w3-margin-right w3-text-theme"></i> April 1, 1988</p>
</div>
</div>
<br>

<!-- Accordion -->
<div class="w3-card w3-round">
<div class="w3-white">
<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-theme-l1 w3-left-align"><i class="fa fa-circle-o-notch fa-fw w3-margin-right"></i> My Groups</button>
<div id="Demo1" class="w3-hide w3-container">
<p>Some text..</p>
</div>
<button onclick="myFunction('Demo2')" class="w3-button w3-block w3-theme-l1 w3-left-align"><i class="fa fa-calendar-check-o fa-fw w3-margin-right"></i> My Events</button>
<div id="Demo2" class="w3-hide w3-container">
<p>Some other text..</p>
</div>
<button onclick="myFunction('Demo3')" class="w3-button w3-block w3-theme-l1 w3-left-align"><i class="fa fa-users fa-fw w3-margin-right"></i> My Photos</button>
<div id="Demo3" class="w3-hide w3-container">
<div class="w3-row-padding">
<br>
<div class="w3-half">
<img src="/w3images/lights.jpg" style="width:100%" class="w3-margin-bottom">
</div>
<div class="w3-half">
<img src="/w3images/nature.jpg" style="width:100%" class="w3-margin-bottom">
</div>
<div class="w3-half">
<img src="/w3images/mountains.jpg" style="width:100%" class="w3-margin-bottom">
</div>
<div class="w3-half">
<img src="/w3images/forest.jpg" style="width:100%" class="w3-margin-bottom">
</div>
<div class="w3-half">
<img src="/w3images/nature.jpg" style="width:100%" class="w3-margin-bottom">
</div>
<div class="w3-half">
<img src="/w3images/snow.jpg" style="width:100%" class="w3-margin-bottom">
</div>
</div>
</div>
</div> 
</div>
<br>

<!-- Interests --> 
<div class="w3-card w3-round w3-white w3-hide-small">
<div class="w3-container">
<p>Interests</p>
<p>
<span class="w3-tag w3-small w3-theme-d5">News</span>
<span class="w3-tag w3-small w3-theme-d4">W3Schools</span>
<span class="w3-tag w3-small w3-theme-d3">Labels</span>
<span class="w3-tag w3-small w3-theme-d2">Games</span>
<span class="w3-tag w3-small w3-theme-d1">Friends</span>
<span class="w3-tag w3-small w3-theme">Games</span>
<span class="w3-tag w3-small w3-theme-l1">Friends</span>
<span class="w3-tag w3-small w3-theme-l2">Food</span>
<span class="w3-tag w3-small w3-theme-l3">Design</span>
<span class="w3-tag w3-small w3-theme-l4">Art</span>
<span class="w3-tag w3-small w3-theme-l5">Photos</span>
</p>
</div>
</div>
<br>

<!-- Alert Box -->
<div class="w3-container w3-display-container w3-round w3-theme-l4 w3-border w3-theme-border w3-margin-bottom w3-hide-small">
<span onclick="this.parentElement.style.display='none'" class="w3-button w3-theme-l3 w3-display-topright">
<i class="fa fa-remove"></i>
</span>
<p><strong>Hey!</strong></p>
<p>People are looking at your profile. Find out who.</p>
</div>

<!-- End Left Column -->
</div>

<!-- Middle Column -->
<div class="w3-col m7">

<div class="w3-row-padding">
<div class="w3-col m12">
<div class="w3-card w3-round w3-white">
<div class="w3-container w3-padding">
<h6 class="w3-opacity">Social Media template by w3.css</h6>
<p contenteditable="true" class="w3-border w3-padding">Status: Feeling Blue</p>
<button type="button" class="w3-button w3-theme"><i class="fa fa-pencil"></i>  Post</button> 
</div>
</div>
</div>
</div>

<div class="w3-container w3-card w3-white w3-round w3-margin"><br>
<img src="/w3images/avatar2.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-right w3-opacity">1 min</span>
<h4>John Doe</h4><br>
<hr class="w3-clear">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="w3-row-padding" style="margin:0 -16px">
<div class="w3-half">
<img src="/w3images/lights.jpg" style="width:100%" alt="Northern Lights" class="w3-margin-bottom">
</div>
<div class="w3-half">
<img src="/w3images/nature.jpg" style="width:100%" alt="Nature" class="w3-margin-bottom">
</div>
</div>
<button type="button" class="w3-button w3-theme-d1 w3-margin-bottom"><i class="fa fa-thumbs-up"></i>  Like</button> 
<button type="button" class="w3-button w3-theme-d2 w3-margin-bottom"><i class="fa fa-comment"></i>  Comment</button> 
</div>

<div class="w3-container w3-card w3-white w3-round w3-margin"><br>
<img src="/w3images/avatar5.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-right w3-opacity">16 min</span>
<h4>Jane Doe</h4><br>
<hr class="w3-clear">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<button type="button" class="w3-button w3-theme-d1 w3-margin-bottom"><i class="fa fa-thumbs-up"></i>  Like</button> 
<button type="button" class="w3-button w3-theme-d2 w3-margin-bottom"><i class="fa fa-comment"></i>  Comment</button> 
</div>

<div class="w3-container w3-card w3-white w3-round w3-margin"><br>
<img src="/w3images/avatar6.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-right w3-opacity">32 min</span>
<h4>Angie Jane</h4><br>
<hr class="w3-clear">
<p>Have you seen this?</p>
<img src="/w3images/nature.jpg" style="width:100%" class="w3-margin-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<button type="button" class="w3-button w3-theme-d1 w3-margin-bottom"><i class="fa fa-thumbs-up"></i>  Like</button> 
<button type="button" class="w3-button w3-theme-d2 w3-margin-bottom"><i class="fa fa-comment"></i>  Comment</button> 
</div> 

<!-- End Middle Column -->
</div>

<!-- Right Column -->
<div class="w3-col m2">
<div class="w3-card w3-round w3-white w3-center">
<div class="w3-container">
<p>Upcoming Events:</p>
<img src="/w3images/forest.jpg" alt="Forest" style="width:100%;">
<p><strong>Holiday</strong></p>
<p>Friday 15:00</p>
<p><button class="w3-button w3-block w3-theme-l4">Info</button></p>
</div>
</div>
<br>

<div class="w3-card w3-round w3-white w3-center">
<div class="w3-container">
<p>Friend Request</p>
<img src="/w3images/avatar6.png" alt="Avatar" style="width:50%"><br>
<span>Jane Doe</span>
<div class="w3-row w3-opacity">
<div class="w3-half">
<button class="w3-button w3-block w3-green w3-section" title="Accept"><i class="fa fa-check"></i></button>
</div>
<div class="w3-half">
<button class="w3-button w3-block w3-red w3-section" title="Decline"><i class="fa fa-remove"></i></button>
</div>
</div>
</div>
</div>
<br>

<div class="w3-card w3-round w3-white w3-padding-16 w3-center">
<p>ADS</p>
</div>
<br>

<div class="w3-card w3-round w3-white w3-padding-32 w3-center">
<p><i class="fa fa-bug w3-xxlarge"></i></p>
</div>

<!-- End Right Column -->
</div>

<!-- End Grid -->
</div>

<!-- End Page Container -->
</div>
<br>

<!-- Footer -->
<footer class="w3-container w3-theme-d3 w3-padding-16">
<h5>Footer</h5>
</footer>

<footer class="w3-container w3-theme-d5">
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</footer>

<script>
// Accordion
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-theme-d1";
} else { 
x.className = x.className.replace("w3-show", "");
x.previousElementSibling.className = 
x.previousElementSibling.className.replace(" w3-theme-d1", "");
}
}

// Used to toggle the menu on smaller screens when clicking on the menu button
function openNav() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else { 
x.className = x.className.replace(" w3-show", "");
}
}
</script>

</body>
</html>

    Hasil dari kode-kode di atas yaitu layout media sosial seperti di bawah ini :

    Contoh html keren dengan notepad

    Sumber kode : https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_social&stacked=h

    Beberapa tag yang digunakan dari kode-kode HTML di atas yaitu :

        • Tag judul, seperti : kode <h1> s/d <h6> dan <hr>
        • Tag paragraf, seperti : kode <br> dan <p>
        • Tag formating, seperti : kode <b>, <i>, dan <u>
        • Tag gambar, seperti : kode <img> dan src
        • dan tag-tag yang lainnya

    4. Contoh Kode untuk Mendesain Tampilan Website Blog

    Ingin belajar mendesain blog menggunakan HTML dan CSS? berikut contoh penerapan kode-kodenya :

    <!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://badoystudio.com/cloudme.fonts.googleapis.com/css?family=Raleway">
<style>
body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>
<body class="w3-light-grey">

<!-- w3-content defines a container for fixed size centered content, 
and is wrapped around the whole page content, except for the footer in this example -->
<div class="w3-content" style="max-width:1400px">

<!-- Header -->
<header class="w3-container w3-center w3-padding-32"> 
<h1><b>MY BLOG</b></h1>
<p>Welcome to the blog of <span class="w3-tag">unknown</span></p>
</header>

<!-- Grid -->
<div class="w3-row">

<!-- Blog entries -->
<div class="w3-col l8 s12">
<!-- Blog entry -->
<div class="w3-card-4 w3-margin w3-white">
<img src="/w3images/woods.jpg" alt="Nature" style="width:100%">
<div class="w3-container">
<h3><b>TITLE HEADING</b></h3>
<h5>Title description, <span class="w3-opacity">April 7, 2014</span></h5>
</div>

<div class="w3-container">
<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed
tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<div class="w3-row">
<div class="w3-col m8 s12">
<p><button class="w3-button w3-padding-large w3-white w3-border"><b>READ MORE »</b></button></p>
</div>
<div class="w3-col m4 w3-hide-small">
<p><span class="w3-padding-large w3-right"><b>Comments  </b> <span class="w3-tag">0</span></span></p>
</div>
</div>
</div>
</div>
<hr>

<!-- Blog entry -->
<div class="w3-card-4 w3-margin w3-white">
<img src="/w3images/bridge.jpg" alt="Norway" style="width:100%">
<div class="w3-container">
<h3><b>BLOG ENTRY</b></h3>
<h5>Title description, <span class="w3-opacity">April 2, 2014</span></h5>
</div>

<div class="w3-container">
<p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed
tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
<div class="w3-row">
<div class="w3-col m8 s12">
<p><button class="w3-button w3-padding-large w3-white w3-border"><b>READ MORE »</b></button></p>
</div>
<div class="w3-col m4 w3-hide-small">
<p><span class="w3-padding-large w3-right"><b>Comments  </b> <span class="w3-badge">2</span></span></p>
</div>
</div>
</div>
</div>
<!-- END BLOG ENTRIES -->
</div>

<!-- Introduction menu -->
<div class="w3-col l4">
<!-- About Card -->
<div class="w3-card w3-margin w3-margin-top">
<img src="/w3images/avatar_g.jpg" style="width:100%">
<div class="w3-container w3-white">
<h4><b>My Name</b></h4>
<p>Just me, myself and I, exploring the universe of uknownment. I have a heart of love and a interest of lorem ipsum and mauris neque quam blog. I want to share my world with you.</p>
</div>
</div><hr>

<!-- Posts -->
<div class="w3-card w3-margin">
<div class="w3-container w3-padding">
<h4>Popular Posts</h4>
</div>
<ul class="w3-ul w3-hoverable w3-white">
<li class="w3-padding-16">
<img src="/w3images/workshop.jpg" alt="Image" class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Lorem</span><br>
<span>Sed mattis nunc</span>
</li>
<li class="w3-padding-16">
<img src="/w3images/gondol.jpg" alt="Image" class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Ipsum</span><br>
<span>Praes tinci sed</span>
</li> 
<li class="w3-padding-16">
<img src="/w3images/skies.jpg" alt="Image" class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Dorum</span><br>
<span>Ultricies congue</span>
</li> 
<li class="w3-padding-16 w3-hide-medium w3-hide-small">
<img src="/w3images/rock.jpg" alt="Image" class="w3-left w3-margin-right" style="width:50px">
<span class="w3-large">Mingsum</span><br>
<span>Lorem ipsum dipsum</span>
</li> 
</ul>
</div>
<hr> 

<!-- Labels / tags -->
<div class="w3-card w3-margin">
<div class="w3-container w3-padding">
<h4>Tags</h4>
</div>
<div class="w3-container w3-white">
<p><span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">New York</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">London</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">IKEA</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">NORWAY</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">DIY</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Ideas</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Baby</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Family</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">News</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Clothing</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Shopping</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Sports</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Games</span>
</p>
</div>
</div>

<!-- END Introduction Menu -->
</div>

<!-- END GRID -->
</div><br>

<!-- END w3-content -->
</div>

<!-- Footer -->
<footer class="w3-container w3-dark-grey w3-padding-32 w3-margin-top">
<button class="w3-button w3-black w3-disabled w3-padding-large w3-margin-bottom">Previous</button>
<button class="w3-button w3-black w3-padding-large w3-margin-bottom">Next »</button>
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</footer>

</body>
</html>

    Layout blog yang dihasilkan dari kode-kode di atas yaitu :

    Contoh html keren dengan notepad

    Sumber kode : https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_blog&stacked=h

    Beberapa tag yang digunakan dari kode-kode HTML di atas yaitu :

        • Tag judul, seperti : kode <h1> s/d <h6> dan <hr>
        • Tag paragraf, seperti : kode <br> dan <p>
        • Tag formating, seperti : kode <b>, <i>, dan <u>
        • Tag gambar, seperti : kode <img> dan src
        • dan tag-tag yang lainnya

    5. Contoh Kode untuk Mendesain Tampilan Website Cafe

    Contoh yang terakhir adalah mendesain website cafe menggunakan HTML, CSS, dan Javascript. Berikut kode-kodenya :

    <!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://badoystudio.com/cloudme.fonts.googleapis.com/css?family=Inconsolata">
<style>
body, html {
height: 100%;
font-family: "Inconsolata", sans-serif;
}

.bgimg {
background-position: center;
background-size: cover;
background-image: url("/w3images/coffeehouse.jpg");
min-height: 75%;
}

.menu {
display: none;
}
</style>
<body>

<!-- Links (sit on top) -->
<div class="w3-top">
<div class="w3-row w3-padding w3-black">
<div class="w3-col s3">
<a href="#" class="w3-button w3-block w3-black">HOME</a>
</div>
<div class="w3-col s3">
<a href="#about" class="w3-button w3-block w3-black">ABOUT</a>
</div>
<div class="w3-col s3">
<a href="#menu" class="w3-button w3-block w3-black">MENU</a>
</div>
<div class="w3-col s3">
<a href="#where" class="w3-button w3-block w3-black">WHERE</a>
</div>
</div>
</div>

<!-- Header with image -->
<header class="bgimg w3-display-container w3-grayscale-min" id="home">
<div class="w3-display-bottomleft w3-center w3-padding-large w3-hide-small">
<span class="w3-tag">Open from 6am to 5pm</span>
</div>
<div class="w3-display-middle w3-center">
<span class="w3-text-white" style="font-size:90px">the<br>Cafe</span>
</div>
<div class="w3-display-bottomright w3-center w3-padding-large">
<span class="w3-text-white">15 Adr street, 5015</span>
</div>
</header>

<!-- Add a background color and large text to the whole page -->
<div class="w3-sand w3-grayscale w3-large">

<!-- About Container -->
<div class="w3-container" id="about">
<div class="w3-content" style="max-width:700px">
<h5 class="w3-center w3-padding-64"><span class="w3-tag w3-wide">ABOUT THE CAFE</span></h5>
<p>The Cafe was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>In addition to our full espresso and brew bar menu, we serve fresh made-to-order breakfast and lunch sandwiches, as well as a selection of sides and salads and other good stuff.</p>
<div class="w3-panel w3-leftbar w3-light-grey">
<p><i>"Use products from nature for what it's worth - but never too early, nor too late." Fresh is the new sweet.</i></p>
<p>Chef, Coffeeist and Owner: Liam Brown</p>
</div>
<img src="/w3images/coffeeshop.jpg" style="width:100%;max-width:1000px" class="w3-margin-top">
<p><strong>Opening hours:</strong> everyday from 6am to 5pm.</p>
<p><strong>Address:</strong> 15 Adr street, 5015, NY</p>
</div>
</div>

<!-- Menu Container -->
<div class="w3-container" id="menu">
<div class="w3-content" style="max-width:700px">

<h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">THE MENU</span></h5>

<div class="w3-row w3-center w3-card w3-padding">
<a href="javascript:void(0)" onclick="openMenu(event, 'Eat');" id="myLink">
<div class="w3-col s6 tablink">Eat</div>
</a>
<a href="javascript:void(0)" onclick="openMenu(event, 'Drinks');">
<div class="w3-col s6 tablink">Drink</div>
</a>
</div>

<div id="Eat" class="w3-container menu w3-padding-48 w3-card">
<h5>Bread Basket</h5>
<p class="w3-text-grey">Assortment of fresh baked fruit breads and muffins 5.50</p><br>

<h5>Honey Almond Granola with Fruits</h5>
<p class="w3-text-grey">Natural cereal of honey toasted oats, raisins, almonds and dates 7.00</p><br>

<h5>Belgian Waffle</h5>
<p class="w3-text-grey">Vanilla flavored batter with malted flour 7.50</p><br>

<h5>Scrambled eggs</h5>
<p class="w3-text-grey">Scrambled eggs, roasted red pepper and garlic, with green onions 7.50</p><br>

<h5>Blueberry Pancakes</h5>
<p class="w3-text-grey">With syrup, butter and lots of berries 8.50</p>
</div>

<div id="Drinks" class="w3-container menu w3-padding-48 w3-card">
<h5>Coffee</h5>
<p class="w3-text-grey">Regular coffee 2.50</p><br>

<h5>Chocolato</h5>
<p class="w3-text-grey">Chocolate espresso with milk 4.50</p><br>

<h5>Corretto</h5>
<p class="w3-text-grey">Whiskey and coffee 5.00</p><br>

<h5>Iced tea</h5>
<p class="w3-text-grey">Hot tea, except not hot 3.00</p><br>

<h5>Soda</h5>
<p class="w3-text-grey">Coke, Sprite, Fanta, etc. 2.50</p>
</div> 
<img src="/w3images/coffeehouse2.jpg" style="width:100%;max-width:1000px;margin-top:32px;">
</div>
</div>

<!-- Contact/Area Container -->
<div class="w3-container" id="where" style="padding-bottom:32px;">
<div class="w3-content" style="max-width:700px">
<h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">WHERE TO FIND US</span></h5>
<p>Find us at some address at some place.</p>
<img src="/w3images/map.jpg" class="w3-image" style="width:100%">
<p><span class="w3-tag">FYI!</span> We offer full-service catering for any event, large or small. We understand your needs and we will cater the food to satisfy the biggerst criteria of them all, both look and taste.</p>
<p><strong>Reserve</strong> a table, ask for today's special or just send us a message:</p>
<form action="/action_page.php" target="_blank">
<p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" required name="Name"></p>
<p><input class="w3-input w3-padding-16 w3-border" type="number" placeholder="How many people" required name="People"></p>
<p><input class="w3-input w3-padding-16 w3-border" type="datetime-local" placeholder="Date and time" required name="date" value="2017-11-16T20:00"></p>
<p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Message \ Special requirements" required name="Message"></p>
<p><button class="w3-button w3-black" type="submit">SEND MESSAGE</button></p>
</form>
</div>
</div>

<!-- End page content -->
</div>

<!-- Footer -->
<footer class="w3-center w3-light-grey w3-padding-48 w3-large">
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>
</footer>

<script>
// Tabbed Menu
function openMenu(evt, menuName) {
var i, x, tablinks;
x = document.getElementsByClassName("menu");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-dark-grey", "");
}
document.getElementById(menuName).style.display = "block";
evt.currentTarget.firstElementChild.className += " w3-dark-grey";
}
document.getElementById("myLink").click();
</script>

</body>
</html>

    Hasilnya :

    Contoh html keren dengan notepad

    Sumber kode : https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_cafe

    Beberapa tag yang digunakan dari kode-kode HTML di atas yaitu :

        • Tag judul, seperti : kode <h1> s/d <h6> dan <hr>
        • Tag paragraf, seperti : kode <br> dan <p>
        • Tag formating, seperti : kode <b>, <i>, dan <u>
        • Tag gambar, seperti : kode <img> dan src
        • dan tag-tag yang lainnya

    Penutup

    Itulah beberapa contoh kode-kode HTML yang juga ditambahkan CSS yang bisa kamu ulik sebagai bahan belajar html secara otodidak. Semoga bermanfaat dan jangan lupa share ke temanmu yang lainnya juga.

kode html

Pos Terkait

Makalah pembuatan aplikasi web dengan php dan mysql
Makalah pembuatan aplikasi web dengan php dan mysql

Akar kuadrat dari angka dengan python
Akar kuadrat dari angka dengan python

Dapatkah saya menggunakan textedit untuk menulis html?
Dapatkah saya menggunakan textedit untuk menulis html?

Bagaimana saya tahu jika mysql berjalan di windows 10?
Bagaimana saya tahu jika mysql berjalan di windows 10?

Cara menggunakan mysql connection string nodejs
Cara menggunakan mysql connection string nodejs

Bagaimana Anda menghitung elemen dalam daftar dengan python?
Bagaimana Anda menghitung elemen dalam daftar dengan python?

Kasus ular ke kasus judul php
Kasus ular ke kasus judul php

Bagaimana cara mengubah lokasi file php ini saya?
Bagaimana cara mengubah lokasi file php ini saya?

Cara menggunakan GET-PIP.PY pada Python
Cara menggunakan GET-PIP.PY pada Python

Apa jenis model data mysql?
Apa jenis model data mysql?

Periklanan

BERITA TERKINI

Bisakah Anda mengaktifkan javascript di ponsel?
1 years ago . by AdorableMantra
Bagaimana Anda menghapus teks duplikat dengan python?
1 years ago . by DecreasingEmperor
Cara menghapus latar belakang video di CapCut
1 years ago . by SkepticalDugout
Apa itu rounddown dalam excel?
1 years ago . by JollyDollar
Dapatkan array multidimensi kunci php
1 years ago . by LuridRecognition
Cara mengeluarkan darah haid yang tidak keluar
1 years ago . by CuriousRedundancy
Dapatkan javascript bulan dengan 0
1 years ago . by NastyMedics
Python cetak daftar daftar secara vertikal
1 years ago . by DeviantColors
Cara membersihkan kacamata yang tergores
1 years ago . by Two-storyDealing
Cara menggunakan variable to dataframe python
1 years ago . by ThrobbingMetaphysics

Toplist Popular

#1
Top 10 berikut ini yang bukan merupakan penetapan tujuan visi perusahaan adalah 2022
1 years ago
#2
Top 10 sebuah bak air berbentuk balok dengan ukuran panjang 40 cm, lebar 30 cm, dan tinggi 35 cm 2022
1 years ago
#3
Top 9 banjir bukan sekadar bencana alam paragraf 3 gagasan utama 2022
1 years ago
#4
Top 10 diketahui himpunan himpunan sebagai berikut p bilangan ganjil yang kurang dari 15 2022
1 years ago
#5
Top 10 penyelesaian dari persamaan 3x 2 y 9 dan 2x y 3 adalah 2022
1 years ago
#6
Top 10 bagaimana cara memberi salam kepada orang tua dan guru yang benar brainly 2022
1 years ago
#7
Top 10 semakin tinggi nilai toleransi semakin tinggi nilai integrasi nasional 2022
1 years ago
#8
Top 10 benda kerajinan tidak boleh membahayakan pemakainya maka benda kerajinan memiliki prinsip 2022
1 years ago
#9
Top 9 bagian tutup sumbat termos biasanya terbuat dari benda berjenis brainly 2022
1 years ago
#10
Top 9 pernyataan yang sesuai dengan prinsipteori evolusi jb lamarck ditunjukkan oleh angka 2022
1 years ago

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social

homeenfritzhtrjako
Copyright © 2024 idkuu.com Inc.