Cara membuat website menggunakan html gratis

Baru-baru ini saya membuat situs web ramah seluler HTML sederhana untuk teman saya yang menjalankan bisnis konstruksi. Di situsnya dan materi branding, dia meminta untuk mencantumkan semua layanan yang disediakan perusahaannya. Jadi kami mulai dengan perbaikan kecil dan kosmetik, melewati rumah keluarga dan menyelesaikan daftar dengan kompleks perumahan dan industri. Saya pikir jika ini memulai artikel ini setelah menghabiskan dua hari bermain-main dengan alat Mobirise HTML Builder yang paling kuat – Editor Kode HTML/CSS

Topik-topik yang berkaitan

• Galeri pembuat situs web kode html. potret sebagai gambar
• Gambar FaceBook dalam kode html pembangun situs web
• Bagaimana cara mengubah ukuran logo di pembuat situs web dengan blok Menu kode html?
• Alternatif WordPress Terbaik, Pembuat Situs Web WordPress vs HTML
• Bagaimana cara mematikan referensi pembuat situs web dengan html?

Seperti yang mungkin Anda ingat dari artikel saya sebelumnya, saya lebih menyukai Illustrator dan Photoshop, dan membuat situs web datang sebagai kebutuhan untuk memenuhi permintaan klien. Saya awalnya mulai dengan WordPress dan baru-baru ini menemukan keberadaan perangkat lunak yang luar biasa ini – pembuat bootstrap HTML Mobirise. Cara membangun situs web yang ditawarkannya terlihat alami dan benar. Jadi saya memutuskan untuk menerapkan alat hebat ini dalam pekerjaan saya sehari-hari

Kode HTML siap pakai dan tip untuk memudahkan hidup Anda lebih jauh

Belakangan saya menikmati kemampuan luar biasa dari Mobirise HTML5 Builder berkali-kali dan seperti yang terjadi dalam proses mulai memperhatikan beberapa celah kecil yang tidak dapat saya isi dan harus mengatasi mengubah visi atau membuat kompromi. Kesenjangan kecil memang, tetapi karena saya mengikuti moto bahwa Jika sesuatu layak dilakukan - itu layak dilakukan dengan cara yang seharusnya, saya bertanya-tanya

"Program ini sangat keren - saya pikir - tidak mungkin mereka tidak memikirkan cara menyempurnakan sesuatu" Yah, mereka melakukannya - tampaknya keputusan dari kasus desain yang lebih maju terletak pada pengeditan kode. Jadi, jika Anda ingin membuat sesuatu yang benar-benar hebat dan menarik situs web HTML5 - Mobirise adalah alat untuk Anda dan jika Anda memerlukan lebih banyak penyempurnaan daripada berbagai opsi yang ditawarkan kepada Anda - Editor Kode adalah ekstensi hanya untuk Anda. Dan kabar baiknya adalah tidak memerlukan banyak waktu atau membaca untuk mencapai hasil yang luar biasa dengan Editor Kode

Berapa banyak keterampilan pengkodean yang diperlukan untuk memanfaatkan tutorial ini?

Untuk menggunakan kode HTML siap pakai yang disebutkan di sini – hampir tidak ada. Yang Anda butuhkan hanyalah menyalin/menempel di tempat yang benar dan mengubah beberapa nilai agar sesuai dengan visi situs Anda – kebanyakan warna dan font. Tempat persisnya Anda harus membuat perubahan dijelaskan dengan baik di komentar di dalam kode untuk membantu Anda menemukannya dengan mudah

Ringkasan

Untuk mempelajari cara membuat halaman web menggunakan HTML dan CSS, mari kita lihat lebih dekat antarmuka Code Editor. Karena semuanya itu Mobirise, itu sangat alami dan intuitif. Anda menariknya keluar dengan mengklik ikon biru yang muncul saat Anda mengarahkan mouse ke blok yang sudah dimasukkan dalam proyek Mobilise Anda. Di Code Editor fly out Anda mendapatkan dua opsi – cukup menata tampilan dengan deklarasi CSS tambahan atau menambahkan CSS dan HTML khusus dengan biaya kehilangan fungsi pengeditan parameter blok

Anda juga memutuskan bagaimana tampilan editor kode. Jika Anda masuk ke Akun ke Pengaturan Aplikasi, Anda akan menemukan opsi untuk memilih satu dari 3 tema untuk editor kode yang paling Anda sukai

Untuk tema M5 (berbasis Bootstrap 5) dan AMP (Accelerated Mobile Pages), hanya ada mode layar penuh, sehingga Anda dapat dengan mudah mengedit HTML dan CSS. Untuk memeriksa perubahan, Anda biasanya perlu mengklik tombol seperti mata biru di pojok kanan bawah editor kode. Dalam tema ini, Anda hanya perlu menerapkan perubahan dan melihatnya langsung di aplikasi. Anda selalu dapat membatalkan dan mengulang apa pun baik di editor kode maupun di aplikasi saat perubahan diterapkan

Saran saya adalah – manfaatkan sepenuhnya kemampuan perangkat lunak yang kuat – biarkan ia melakukan sebagian besar pekerjaan dan pelajari dengan cepat cara membuat situs web menggunakan HTML dan CSS. Pilih blok yang paling cocok dengan tampilan yang Anda tuju dan sesuaikan dengan parameter blok dan deklarasi CSS. Saat itu tekan untuk membuka kunci editor HTML dan tambahkan kode khusus seperlunya. Ini semua mungkin terdengar agak umum, jadi izinkan saya memberikan beberapa contoh. Sebagai orang tanpa kode, saya telah mencoba menemukan cara paling sederhana dan termudah dan sekarang akan membaginya dengan Anda

Sesuatu yang menarik untuk dicatat – Editor Kode Mobirise membantu Anda menulis dengan benar mewarnai teks saat Anda mengetik (Anda ingin menghindari warna merah) dan yang paling penting – tidak membiarkan Anda Menyimpan dan Menutup jika sesuatu yang salah dalam kode HTML/CSS terdeteksi. Dalam kasus saya – kebanyakan dilupakan” } “ di bagian akhir

Memberikan bumbu pada teks

Beberapa hal yang sangat keren dan mengesankan dapat dilakukan dengan tampilan teks menggunakan beberapa baris kode HTML untuk situs web yang ditempelkan di area CSS Kustom Editor Kode. Mengubah warna teks yang disorot dan warna sorotan itu sendiri – terkadang berguna untuk memiliki trik ini di tangan Anda. Untuk melakukannya, gunakan kode berikut

::selection{ /* Safari and Opera */ 
    background:rgba(9, 67, 136, 0.5);  
    color:#000;   
}

::-moz-selection{ /* Firefox */ 
    background:rgba(9, 67, 136, 0.5);  
    color:#000;  
}

Saya membuatnya dengan warna sorot semitransparan, tetapi bekerja juga dengan padat – RGB atau HEX (seperti yang ada di baris bawah)

Ubah huruf pertama atau baris pertama paragraf seperti di buku cerita atau majalah gunakan Custom CSS ini

/*select to which stile to apply: paragraph - p, heading - h1-h6*/
p:first-letter{ 
display:block; 
/*adjust the letter position for best appearance*/
margin:5px 5px 0 5px!important;  
float:left; 
/*set font family color and size*/
color:#FF3366; 
font-size:3.0em; 
font-family:permanent marker; 
}

Untuk menerapkan ke seluruh baris pertama alih-alih huruf pertama, ganti –letter dengan –line Karena kami membuat situs responsif di sini, panjang baris pertama dapat berbeda secara signifikan di berbagai layar. Anda juga harus mempertimbangkan struktur baris pertama Anda untuk mempertahankan efek dengan lebih banyak atau lebih sedikit kata yang dipengaruhi oleh pemformatan yang berbeda. Cara terbaik adalah dengan mempratinjau halaman, mengubah lebar jendela browser, mengamati tampilan, dan mengedit bagian awal teks yang Anda gaya jika diperlukan.

Mengubah cara Anda mengutip – menambahkan tanda kutip keren dan sorotan teks sebagai ganti gaya kutipan standar juga mudah. Untuk menerapkan efek ini ke teks di seluruh blok, gunakan kode ini

p {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "201C""201D""2018""2019";
}
p:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}
p {
    display: inline;
}
p:after {
    color: #ccc;
    content: close-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}

Dan ubah warna tanda kutip dan latar belakang jika perlu

Meniadakan navbar dan tombol

Opasitas latar belakang navbar

Saya menyukai latar belakang video, tetapi saya juga menyukai latar belakang semitransparan – mereka memberikan tampilan yang halus dan ringan yang sering ingin saya capai. Untuk melakukan ini saya melakukan beberapa eksperimen dan mendapatkan solusi sederhana

Ada dua penampilan umum saya, dan mungkin sebagian besar dari Anda akan menganggap paling tepat

• Navbar yang sepenuhnya transparan pada posisi awalnya di halaman dan semitransparan dengan beberapa warna campuran saat Anda menggulir ke bawah dan navbar menjadi lengket
• Navbar semitransparan di semua tempat dengan kemampuan untuk mengontrol opasitas warna navbar awal dan lengket

Untuk mencapai ini, Anda memerlukan dua baris kode sederhana ini yang ditempelkan di area CSS khusus di bilah navigasi

/*sets semitransparent color to sticky navbar*/
.mbr-navbar--stuck& .mbr-navbar__section {
     background: rgba(9, 67, 136, 0.5)!important;
}
/*sets semitransparent color to top navbar */
.mbr-navbar__section {
     background: rgba(9, 67, 136, 0.9);
}

Dengan cara ini Anda mendapatkan warna semitransparan untuk navbar statis dan lengket. Jika Anda ingin menjaga navbar statis tetap transparan, hapus, kode kedua, potong/tempel "*/" ke akhir baris terakhir - tepat setelah "}" - dengan cara ini dianggap sebagai komentar, tetapi tetap

Warna menu

Mengenai warna yang diinginkan itu sendiri – Anda mungkin pernah mendengar tentang RGB di mana warna Merah Hijau dan Biru dicampur untuk membentuk warna apa pun. Yah rgba adalah hal yang sama kecuali untuk nilai terakhir dalam tanda kurung, yaitu opacity warna – 1 untuk warna solid dan 0 – untuk sepenuhnya transparan. Anda harus memainkannya untuk mendapatkan tingkat transparansi yang tepat seperti yang Anda bayangkan

Nilai RGB warna yang diinginkan dapat Anda peroleh dengan mudah dari perangkat lunak pengedit gambar favorit Anda atau dengan bantuan palet online ini yang sebenarnya saya sukai – mudah dan memberi Anda nilai siap salin/tempel

Beberapa kata tentang pentingnya – karena halaman web biasanya mendapatkan informasi tentang gaya elemennya dari berbagai sumber dan dalam kasus kami, kami memiliki bantuan parameter Blok Pembuat Mobirise, kode CSS khusus kami memerlukan sedikit bantuan untuk mengalahkan persyaratan gaya lainnya (jika ada

Untuk mencapai itu kami benar-benar menunjukkannya, menambahkan “. penting" deklarasi CSS khusus kami. Hal ini terutama diperlukan saat kita memberi gaya pada elemen yang sudah dapat disesuaikan sebagian melalui Flyout Opsi Blok. Meskipun Anda harus ingat penyesuaian bagus apa yang telah Anda lakukan dengan cara ini karena pengaturan yang sesuai di Opsi Blok secara visual tidak berlaku - tetapi mereka melakukannya, dikuasai oleh ". penting” aturan yang telah Anda tetapkan sebelumnya. Ingatlah hal itu untuk menata desain Anda

Gaya nama merek dan item menu

Hal lain di navbar yang tidak dapat disesuaikan secara langsung melalui Opsi Blok adalah bobot nama merek. Untuk mengubahnya, tempelkan kode berikut di area Custom CSS

/*sets the weight of the brand name in navbar possible values are
     normal | bold | bolder | lighter | 100 | 200 . to 900  */
.mbr-brand__name {
     font-weight:lighter!important;
}

dan ubah "lebih ringan" menjadi bobot yang menurut Anda paling sesuai

Menata bobot font untuk item menu bekerja dengan cara yang sama, tetapi Anda harus menggunakannya

mbr-buttons__link sebagai gantinya. mbr-brand__name

Menyesuaikan tombol situs web

Untuk mendapatkan kontrol penuh atas tampilan tombol juga, saya telah menggunakan sedikit trik – kode readymade dari generator tombol online, yang terletak di sini

Di sini sebagian besar opsi tombol mudah disesuaikan melalui antarmuka visual. Sesuaikan saja dengan preferensi Anda, salin kode dan tempel di area Custom CSS. Satu-satunya hal yang perlu Anda edit adalah jenis font dan akhirnya menambahkan garis yang menentukan bobot font

Sedikit hati-hati sekarang - jika Anda bermaksud menata semua tombol dalam satu blok, cukup tempel kode dan edit font jika perlu. Tetapi jika Anda hanya perlu menata salah satu tombol di blok, Anda harus melakukan beberapa penggantian sederhana sesuai dengan warnanya sebelum menata

Anda ingin mengganti ". btn” dengan

• “. btn-default” untuk mempengaruhi transparan dengan batas putih;
• “. btn-primary” untuk mempengaruhi warna abu-abu dan seterusnya
• “. btn-sukses” - hijau;
• “. btn-info” - biru;
• “. btn-peringatan” - kuning;
• “. btn-bahaya” - oranye;
• “. btn-link” - transparan;

Untuk menata semua tombol di area navbar, ganti “. btn" dengan ". tombol-mbr__btn"

Menambahkan dropdown dengan submenu

Sekarang mari selami lebih dalam kode situs web HTML dan lakukan sesuatu yang sangat keren. Pembuat Situs Web HTML Mobirise memberi kami kemampuan untuk membuat halaman yang tampak hebat dengan sedikit usaha, tetapi ada sesuatu yang selalu mengganggu saya – kurangnya menambahkan beberapa item submenu yang muncul dari halaman utama. Jadi ketika saya mulai menulis tentang kemampuan Editor Kode, ini adalah salah satu topik yang ingin saya bahas. Setelah beberapa googling dan coba-coba, saya berhasil menyatukan kode yang memberi Anda menu responsif flyout ramping yang ditata sesuai

Untuk melakukan itu, kita perlu membuka kunci editor HTML navbar, jadi sebaiknya atur semua Opsi Blok yang tersedia dengan cara yang paling sesuai dengan visi Anda. Sekarang buka kunci Editor HTML

Scroll down until you find the