Postingan

Menampilkan postingan dari Oktober, 2019

Membuat border radius

-
Gambar
hello temen2, kali ini kita akan belajar tentang CSS, atau bagaimana sih kita menghias halaman HTML kita, yuk kita lihat kodingan nya.... <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Belajar CSS 3</title> <style> #box{ height: 100px; width: 100px; background-color: blue; border-radius: 10px; } #box2{ height: 100px; width: 100px; background-color: yellow; border-radius: 50%; } </style> </head> <body> <div id="box"></div> <div id="box2"></div> </body> </html> fokus kita sekarang yang berada di dalam <style> ... </style>
Posting Komentar
Baca selengkapnya

Audio pada Web

-
Gambar
hello temen2, sekarang kita akan mempelajari bagaimana caranya memasukan file audio ke dalam web kita, yuk kita ikuti kodingan nya... <!DOCTYPE html> <html> <head> <title>Belajar HTML5</title> <meta charset="utf-8"> <style> body{ font-family: Verdana, sans-serif; font-size: 12px; } header, nav, main, aside, footer { border: 1px solid grey; margin: 5px; padding: 5px; } main{ float: left; width: 60%; } aside{ float: left; width: 30%; } footer{ clear: both; } </style> </head> <body> <header> <h1>Belajar WEB</h1> <h2>bersama Muhammad Mufti Ramdhani</h2> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Profil</a></li> <li><a href="#">Kontak</a><...
Posting Komentar
Baca selengkapnya

Video pada Web

-
Gambar
hello temen2, bila kemarin kita sudah belajar bagaimana caranya memasukkan gambar ke halaman HTML, sekarang kita akan belajar, bagaimana caranya memasukan video, yuk kita ikuti kodingannya... <!DOCTYPE html> <html> <head> <title>Belajar HTML5</title> <meta charset="utf-8"> <style> body{ font-family: Verdana, sans-serif; font-size: 12px; } header, nav, main, aside, footer { border: 1px solid grey; margin: 5px; padding: 5px; } main{ float: left; width: 60%; } aside{ float: left; width: 30%; } footer{ clear: both; } </style> </head> <body> <header> <h1>Belajar WEB</h1> <h2>bersama Muhammad Mufti Ramdhani</h2> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Profil</a></li> ...
Posting Komentar
Baca selengkapnya

Membuat kotak search, email dan warna

-
Gambar
hello temen2, yuk kita membuat kotak search, email dan warna di halaman web kita... <!DOCTYPE html> <html> <head> <title>Belajar HTML5</title> <meta charset="utf-8"> <style> body{ font-family: Verdana, sans-serif; font-size: 12px; } header, nav, main, aside, footer { border: 1px solid grey; margin: 5px; padding: 5px; } main{ float: left; width: 60%; } aside{ float: left; width: 30%; } footer{ clear: both; } </style> </head> <body> <header> <h1>Belajar WEB</h1> <h2>bersama Muhammad Mufti Ramdhani</h2> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Profil</a></li> <li><a href="#">Kontak</a></li> </ul> </nav> <main...
Posting Komentar
Baca selengkapnya

Membuat dialog dan detail di HTML

-
Gambar
hello, temen2 sekarang kita akan belajar tentang dialog dan details, dialog itu seperti ada kotaknya sedangkan detail itu bila di klik akan memunculkan anak dibawahnya yuk, kita buat di web kita. <!DOCTYPE html> <html> <head> <title>Belajar HTML5</title> <meta charset="utf-8"> <style> body{ font-family: Verdana, sans-serif; font-size: 12px; } header, nav, main, aside, footer { border: 1px solid grey; margin: 5px; padding: 5px; } main{ float: left; width: 60%; } aside{ float: left; width: 30%; } footer{ clear: both; } </style> </head> <body> <header> <h1>Belajar WEB</h1> <h2>bersama Muhammad Mufti Ramdhani</h2> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Profil</a></l...
Posting Komentar
Baca selengkapnya

Menambahkan gambar di halaman Web

-
Gambar
hello temen2, tentunya kadang kita ingin menambahkan gambar dihalaman web kita, tapi bagaimana ya caranya, yuk lihat kodingannya... <!DOCTYPE html> <html> <head> <title>Belajar HTML5</title> <meta charset="utf-8"> <style> body{ font-family: Verdana, sans-serif; font-size: 12px; } header, nav, main, aside, footer { border: 1px solid grey; margin: 5px; padding: 5px; } main{ float: left; width: 60%; } aside{ float: left; width: 30%; } footer{ clear: both; } </style> </head> <body> <header> <h1>Belajar WEB</h1> <h2>bersama Muhammad Mufti Ramdhani</h2> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Profil</a></li> <li><a href="#">Kontak</a><...
Posting Komentar
Baca selengkapnya

Mengenal Struktur HTML 5

-
Gambar
setelah mengenal struktur dasar HTML, sekarang kita akan mengenal beberapa atribut baru di HTML 5, berupa : header, nav, main, article, section, aside dan footer <!DOCTYPE html> <html> <head> <title>Belajar HTML5</title> <meta charset="utf-8"> <style> body{ font-family: Verdana, sans-serif; font-size: 12px; } header, nav, main, aside, footer { border: 1px solid grey; margin: 5px; padding: 5px; } main{ float: left; width: 60%; } aside{ float: left; width: 30%; } footer{ clear: both; } </style> </head> <body> <header> <h1>Belajar WEB</h1> <h2>bersama Muhammad Mufti Ramdhani</h2> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Profil</a></li> <li><a href="#...
Posting Komentar
Baca selengkapnya

Struktur Dasar HTML

-
Gambar
hello, temen2 semua... kali ini kita akan belajar bagaimana membangun sebuah web dari 0 tentunya ilmu yang pertama kali akan kita pelajari adalah strukdur dasar HTML. bagaimana strukturnya yuk kita lihat kodingannya <html> <head> <title>Belajar struktrur dasar HTML</title> <style> body{ font-family: Verdana, sans-serif; font-size: 12px; } #header, #nav, #main-content, #sidebar-content, #footer { border: 1px solid grey; margin: 5px; padding: 5px; } #main-content{ float: left; width: 60%; } #sidebar-content{ float: left; width: 30%; } #footer{ clear: both; } </style> </head> <body> <div id="header"> <h1>Belajar WEB</h1> <h2>bersama Muhammad Mufti Ramdhani</h2> </div> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li>...
Posting Komentar
Baca selengkapnya