Pengertian HTML menurut berbagai sumber beserta Contohnya.

Pengertian HTML menurut berbagai sumber beserta Contohnya. Hypertext Markup Language adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets dan bahasa scripting seperti JavaScript dan VBScript. HTML (HyperText Markup Language) adalah suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar. HTML adalah singkatan dari Hypertext Markup Language. HTML memungkinkan seorang pengguna dapat membuat dan menyusun bagian heading, paragraf, link atau tautan, dan blockquote untuk halaman sebuah website. HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar 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 penerbirtan yang disebut Standard Generalized Markup Language (SGML). Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web. HTML merupakan singkatan dari Hypertext Markup Language, yaitu bahasa markup standar untuk membuat dan menyusun halaman dan aplikasi web. Anda bisa menggunakan bahasa markup ini untuk menyusun bagian paragraf, heading, maupun link pada suatu halaman web.
1. HTML Basic
Segala template HTML di dunia memiliki bentuk dasar, yaitu HTML Basic. Apa saja yang pasti ada dalam coding HTML Basic? Kami akan membedahnya satu per satu.

2. Heading
Heading adalah judul hingga sub-judul yang ada di dalam website. Fungsinya, untuk memetakan info dari umum ke khusus. Berikut contoh HTML untuk berbagai macam heading.

3. Paragraf
Paragraf itu penting. Sekarang, bayangkan Anda membaca artikel website yang tidak punya paragraf. Setiap ide pokok terlihat samar dan melelahkan mata gara-gara tak punya jeda. Karena itu, setiap paragraf perlu dipisah. Nah untuk membuat paragraf dengan coding HTML, gunakan saja tag P.

4. Bold/Strong
Tulisan dengan efek bold (atas) dan strong (bawah) Pertama, coding HTML bold dan strong memiliki tag yang berbeda:

Dan meskipun outputnya terlihat sama, Google memandangnya lain.
5. Italic/Emphasize
Berikut contoh HTML dengan tag italic/emphasize.

6. Line Break
Seperti namanya, Line Break berfungsi membuat baris baru. Namun, baris tersebut masih dalam paragraf yang sama. Ini dia contoh HTML Line Break.

Hasilnya akan terlihat seperti ini.
7. Images
Nah untuk memasukkan gambar, gunakan coding HTML images. Ukurannya juga bisa Anda atur sendiri pada atribut Style.

Berikut hasil contoh HTML images.
8. Horizontal line
Contoh coding HTML-nya juga simple. Cukup masukkan tag hr pada bagian yang Anda inginkan.

Penting! Beda dari tag lainnya, tag br, img, dan hr memang tidak memiliki tag penutup (/br, /img, /hr).
9. Cross-through text
Membuat cross-through text mudah, kok. Langsung saja gunakan contoh HTML ini.

Sekarang, Anda sudah bisa mencoret tulisan sendiri bukan?
10. Quote
Blockquote adalah quote panjang yang terpisah dari teks utama. Sedangkan short quote yaitu quote ringkas yang bisa menjadi satu bagian atau terpisah dari teks utama. Di bawah ini contoh HTML yang bisa Anda gunakan.

11. Font
Tenang, Anda bisa kok mengubah jenis font. Baik itu pada header, paragraf, ataupun jenis teks lainnya. Caranya, masukkan property style ke dalam tag.

Contoh coding HTML di atas kira-kira menghasilkan output seperti ini.
12. Highlighted
Nah, Anda juga bisa lho highlight kata penting pada website Anda. Berikut contoh coding HTML untuk melakukannya.

Secara otomatis, highlight text Anda akan berwarna kuning. Nah bagi Anda yang ingin memakai warna lain, bisa kok modif sendiri. Caranya yaitu dengan menambahkan CSS berikut.

13. Text Colour
Caranya, gunakan property style seperti contoh HTML berikut.

Nah, Anda harus memasukkan warna sesuai dengan kode warna HTML. Nantinya, browser akan memproses dan menampilkan hasil sesuai permintaan warna.
14. Text Size
Selain mengubah warna teks, bisa juga lho mengatur ukuran tulisan. Caranya juga mudah, ikuti saja contoh HTML di bawah.

Hasilnya akan terlihat seperti ini.
15. Text Alignment
Ingin mengubah posisi teks? Caranya gampang kok! Masukkan saja property style seperti ini:

Lihat hasilnya. Teks langsung bergeser sesuai perintah. Tapi, kalau yang Anda masukkan adalah “text-align: center”, jangan kaget kalau teks tidak berpindah. Lho, kenapa begitu? Saat ini, HTML5 tidak support “text-align: center”. Sehingga, Anda harus menggunakan CSS property style jika ingin memindah posisi teks ke tengah.

16. Anchor Text
Berikut contoh html anchor text.

Nantinya, teks pilihan Anda akan memiliki warna berbeda sekaligus bisa di-klik.
17. CTA Button
Gimana sih cara membuat CTA Button dengan coding HTML? Berikut contoh HTML-nya.

Beda dari tag lainnya, Anda melihat tag div pada syntax di atas. Yap, tag div berfungsi membungkus elemen ke dalam satu grup/class. Tag div memudahkan Anda saat mendesain dengan CSS. Sebab, CSS akan diterapkan pada kelompok yang diinginkan saja. Dalam hal ini, class button-wrapper. Lho, maksudnya gimana? Begini, syntax CTA Button tadi hanya menghasilkan output yang lebih mirip seperti anchor text daripada sebuah tombol. Alasannya, contoh coding HTML itu hanya untuk membangun kerangka CTA Button saja. Agar ada desainnya, perlu mendesain tombol CTA menggunakan CSS untuk class button-wrapper. Penting! Sisipkan syntax link href=”style.css” rel=”stylesheet” pada coding HTML supaya file CSS terhubung dan desain bisa ditampilkan.

Source Code: drivencreativelymad.com Oh ya, jangan lupa juga terapkan tips membuat CTA agar tombol konversi Anda makin oke dan efektif ya!
18. Ordered List
Cara membuatnya, pakailah coding HTML tag ol. Berikut contoh HTML Ordered List.

Sekarang, mungkin Anda penasaran: kok di sana ada tag li? Nah, tag ol memang biasanya diikuti tag li. Tag ol berfungsi menentukan kelompok info yang mau diurutkan, sedangkan tag li untuk membuat list-nya. Tanpa tag ol, daftar list secara otomatis menjadi bullet points (Unordered List). Lalu, bagaimana jika Anda ingin Ordered List Anda menggunakan alfabet ataupun angka romawi? Simple saja. Anda cukup memasukkan atribut type: Type Fungsi type=”1″ Item angka type=”A” Item huruf besar type=”a” Item huruf kecil type=”I” Item romawi besar type=”i” Item romawi kecil Lho, memasukkan atributnya di mana? Mudah saja, silakan bubuhkan di sebelah tag ol. Sudah nggak bingung lagi, kan?

19. Unordered List
Untuk membuatnya, Anda bisa menggunakan contoh HTML berikut.

Dengan contoh coding HTML di atas, output-nya adalah list item dengan bullet points. Lalu, bagaimana jika Anda ingin ganti icon? Mirip seperti cara pada Ordered List, Anda bisa menggunakan property list-style-type berikut. Value Fungsi disc List item berupa bullet hitam circle List item berupa bullet putih square List item berupa kotak none List item tidak terlihat Cara menyelipkan property list-style-type juga mudah, kok. Hanya begini saja:

Sekarang, icon list item Anda pasti sudah berubah sesuai keinginan Anda.
20. Superscript
Nah, caranya gampang, kok. Bikin saja dengan coding HTML sup. Tanpa waktu lama, Anda sudah berhasil membuat superscript.
text^TM

21. Subscript
Penasaran contoh coding HTML Subscript? Lihat saja syntax ini.

Sekarang, Anda pun bisa menulis senyawa kimia dengan coding HTML.
22. Tabel
Sebagai langkah awal, silakan buat tabel dengan contoh coding HTML berikut.

Namun, contoh HTML di atas hanya memberikan Anda sebuah tabel sederhana saja. Kurang menarik, bukan? Nah, kalau Anda ingin tabel yang lebih keren dan fungsional, silakan ikuti Cara Membuat Tabel HTML ini. Dijamin, tabel Anda jadi jauh lebih kece!
23. Form
Apakah membuat form dengan coding HTML susah? Jawabannya, tidak juga. Dengan tag

, bisa kok langsung membuat form dengan HTML. Seperti contoh coding HTML di bawah.

Lalu, jadilah tampilan form yang seperti ini. Sekarang Anda memiliki kolom username dan password standar untuk form. Meski begitu, form tersebut masih bisa dipercantik sehingga visitor website Anda akan menyukainya. Gimana sih caranya? Nah, langsung saja meluncur ke Panduan Membuat Form Login yang ramah pemula ini. Nah, sampai sini Anda sudah memahami coding HTML dasar untuk pemula. Artinya, Anda sudah siap mempelajari contoh desain web HTML yang menggabungkan berbagai tag HTML. Berikut beberapa contoh desain web HTML sederhana dari Doctor Code untuk Anda coba.
24. Contoh Desain Web HTML Landing Page Responsive
Coding HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <meta name="viewport" content="width=device-width , initial-scale=1.0">
    </head>
   
   
    <body>
       
        <div class="filter">
        </div>
        <div class="nav">
              <div class="container">
                  <h1>Logo</h1>
             
              </div>
               
        </div>      
        <div class="description">
            <h1>Welcome to our website</h1>
            <p>discover our amazing website with our amazing services and contact us </p>
        </div>
    </body>
</html>
CSS Markup:

@import url('shorturl.at/btNO5');
*{
    margin: 0;
    padding: 0;
    outline: 0;
}
body{
    width: 100vw;
    height: 100vh;
    background-image: url(shorturl.at/dkFT0);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.nav{
    width: 100%;
    height: 80px;
    position: relative;
    z-index: 9;
}
.container{
    width: 80%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}

.nav h1{
    color: #fafafa;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Marck Script",cursive;
    font-size: 38px;
}

.filter{
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

.description{
   
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fafafa;
}
.description h1{
    font-size: 60px;
    text-transform: uppercase;
    font-family: 'Oleo Script', cursive;
}
.description p{
    font-size: 40px;
    font-family: 'Oleo Script', cursive;
}
@media screen and (max-width:700px){
    .container{
        width: 100%;
    }
   
    .nav h1{
       
        left: 50%;
        transform: translateX(-50%);
    }
   
    .description{
        z-index: 0;
       
    }
    .description h1{
        font-size: 1.8rem;
    }
    .description p{
        font-size: .9rem;
    }
}

25. Contoh Desain Web HTML Website Travel
Coding HTML:

<!DOCTYPE HTML>
<html>
        <head>
            <link rel="stylesheet" href="style.css">
        </head>

<body>
              <div class="nav">
                <div class="container">
                    <img src="shorturl.at/clsI1" class="logo">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">services</a></li>
                        <li><a href="#">about us </a></li>
                        <li><a href="#">Blog</a></li>
                    </ul>
                </div>
            </div>
   
            <div class="header">
                <div class="search">
                    <input type="text" placeholder="search your destination">
                    <button>Search</button>
</div>
            </div>  
           
            <div class="footer">
                <p>copyright © All rights reserved to DoctorCode</p>
            </div>
        </body>
    <script src="tab.js"></script>
</html>
CSS Markup:

*{
    margin: 0;
    padding: 0;
    outline: 0;
}
.container{
    width: 80%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: auto;
}
.contact-nav{
    background-color: #424242;
    padding: 5px 10px;
    color: #fafafa;
}

.nav img{
    height: 100px;
}
.nav ul{
    float: right;
    padding-top: 45px;
}
.nav ul li{
    display: inline-block;
    margin-right: 15px;
}
.nav ul li a{
    font-size: 1.2rem;
    text-transform: uppercase;
    text-decoration: none;
    color: #212121;
    transition: .4;
}
.nav ul li a:hover{
    color: #3e7a7e;
}

.header{
    position: relative;
    width: 100%;
    height: 600px;
    background-image: url("shorturl.at/inqZ6");
    background-size: cover;
    background-position: center;
}
.header .search{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
   
    border-radius: 4px;
}
.header .search input{
    padding: 15px 10px;
    border: none;
    width: 500px;
    font-size: 1.1rem;
}
.header .search button{
    padding: 17px 6px;
    border: none;
  width: 100px;
    border-radius: 0 4px 4px 0;
    background-color: #8ed1d5;
    color: #fafafa;
    font-size: 1.2rem;
    transition: .4s;
}
.header .search button:hover{
    background-color: #3e7a7e;
}

.footer{
    padding: 15px;
    background-color: #3e7a7e;
}
.footer p{
    text-align: center;
   
}

26. Contoh Desain Web HTML Kartu Ucapan
Coding HTML

CSS Markup:

@import url('shorturl.at/qrKYZ');
body{
    padding: 0;
    margin: 0;
    outline: 0;
    height: 100vh;
    background: url(shorturl.at/nqGV0);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.filter{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color:
    opacity: .6;
    z-index: 1;
}
h1{
    position: absolute;
    width: 100%;
    z-index: 2;
    font-size: 4em;
    text-align: center;
    color: #fff;
    font-family: 'Courgette', cursive;
}
.valentine_card{
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    width: 40%;
    padding: 25px;
    font-family: 'Courgette', cursive;
}
.valentine_card label{
    font-size: 1.3rem;
}
.valentine_card input{
    width: 100%;
    font-size:1.3rem;
    font-family: 'Courgette', cursive;
    border: none;
    border-bottom: 1px solid black;
    margin: 10px 0;
}
*:focus{
    outline: none;
}
.valentine_card textarea{
    width: 100%;
    height: 150px;
    resize: none;
    font-size:1.3rem;
    font-family: 'Courgette', cursive;
    border: none;
    border-bottom: 1px solid black;
    margin: 10px 0;
}
.valentine_card button{
    border: none;
    background: transparent ;
    font-size: 1.5rem;
    float: right;
    font-family: 'Courgette', cursive;
    transition: .4s;
   
}
.valentine_card button:hover{
    color: #f44336;
}

CaraWudy.

Pengertian HTML menurut berbagai sumber beserta Contohnya.

تعليق واحد

Blog CaraWudy.

Blog WudysoftApp.

Blog BapakWudy.

Blog Wudysoft.

Blog WudyTech.

Tutorial Nuyul!!

Play Together

VSCO

Sistem operasi android

Tumblr