30 Halaman Web Sangat Mudah

Sebilangan halaman yang terkenal sangat padat dengan maklumat, tetapi saya lebih suka sebaliknya: yang mudah.

Jelas sekali penyokong hebat kumpulan ini adalah Google dengan laman utama minimalisnya sejak ia memulakan perjalanannya, tetapi jelas bukan satu-satunya di Internet yang komited untuk menjaga perkara-perkara sederhana.

Contoh laman web HTML ringkas

Kean richmond

Kean Richmond membuat kita melihat kesederhanaan bermain dengan beberapa elemen, tetapi sangat sesuai memberi rasa minimalis. Logo di kiri atas, ikon Twitter dan kenalan di sebelah kanan dan tengah, dengan tipografi yang mencolok, untuk apa yang dikhususkannya.

Pautan ke laman web: Keanrich isnin

Alice drougard

Alice drougard mudahkan juga dengan logo anda diletakkan di tengah, empat tab untuk berpindah di antara halaman utama laman web anda dan serangkaian foto yang diletakkan dengan betul sehingga sepintas lalu kami tahu apa yang anda lakukan dan apa yang anda lakukan.

Pautan ke laman web: Alice drougard

jonathan ogden

Ogden terus bermain dengan seberapa sederhana nama anda sebagai logo, rangkaian sosial yang terletak tepat di bawah tanpa menarik perhatian dan reka bentuknya berfungsi agar kita dapat melaluinya dengan cepat. Pada satu halaman itu menunjukkan semua yang penting.

Pautan ke laman web: jonathan ogden

Finch

Finch sudah pergi ke tempat lain untuk bermain dengan tipografi dan yang lain warna yang menunjukkan keanggunan dan kebijaksanaan apa yang dilakukannya. Dengan hanya beberapa elemen, dia membiarkan semua profesionalisme dilihat. Ini juga menjelaskan halaman mana yang telah dihubungkan dengan anda.

Pautan ke laman web: Finch

Reka Bentuk yang berbeza

Laman web ini bermain dengan cara yang berbeza. Gunakan kertas dinding dengan tajuk dari mana kita boleh pergi ke halaman utama, telefon anda dan pautan ke rangkaian sosial anda.

Pautan ke laman web: Reka Bentuk yang berbeza

pantas

Kai menggambarkan kita dengan sosoknya sendiri dengan segitiga abstrak dan palet warna yang sesuai untuk memberi kedekatan. Dia juga menawarkan sebahagian bio-nya dengan fon dalam ukuran yang lebih kecil sekiranya kita ingin mengetahui lebih banyak tentangnya.

Pautan ke laman web: pantas

Reka Bentuk Taman Vertikal

Seperti yang sebelumnya, Vertical Garden Design menggunakan gambar yang menunjukkan dengan pantas salah satu pekerjaan terbaiknya di lapangan terbang Oslo. Di bahagian atas kita mempunyai tajuk dengan «bar nav» atau bar navigasi dan bahkan kemungkinan mengubah bahasa. Logo meletakkannya dalam format menegak untuk memberikan sentuhan terakhir ke halaman yang sangat sederhana.

Pautan ke laman web: Reka Bentuk Taman Vertikal

247Grad

247Grad bermain dengan monokrom dan gambar latar hampir gelap. Fon header, lebih kecil daripada teks dan header, ditulis dengan huruf besar untuk menghasilkan kontras yang besar pada keseluruhan reka bentuk.

Pautan ke laman web: 247Grad

Nikmati ini

yang tipografi yang hebat boleh menjadi tanda sahih dan bahawa kita tahu apa yang kita lakukan. Anda tidak perlu memberikan apa-apa lagi jika mesejnya langsung. Mereka menjelaskan: mereka gemar membuat aplikasi dan laman web yang indah. Mereka meninggalkan surat untuk projek dan kajian mereka dalam pautan lain.

Pautan ke laman web: Nikmati ini

Allison hou

Allison membawa kami sebelum kursus lain dan merangkumi lebih banyak gambar dan jenis huruf yang lebih "feminin". Perkara yang sama berlaku untuk gambar utama anda dan tajuk tersebut. Dia mempunyai kemewahan menghadiahkan kad yang menunjukkan helah membeli-belah.

Pautan ke laman web: Allison hou

pixelot

Pixelot agak gila, tetapi ia juga menunjukkan kreativiti pengarang. Gunakan penunjuk tetikus untuk membuat topeng yang kabur di mana sahaja kita berada.

Pautan ke laman web: pixelot

Lionel skolt

Jika anda mahu buat resume anda dalam talian dengan tidak lebih daripada itu, Lionel menunjukkan kepada anda langkah-langkahnya. Fon yang sesuai, foto anda di kiri atas, pautan ke rangkaian sosial dan pengalaman anda. Satu-satunya elemen hiasan adalah dua garis mendatar dengan warna yang berbeza.

Pautan ke laman web: Lionel skolt

Burung Camar Elegan

Kami kembali kepada keanggunan minimalisme dan ruang kosong yang besar itu. Di satu sisi, header sangat jauh dari elemen-elemen yang lain, dan di sisi lain elemen-elemen tersebut dibentuk sedemikian rupa sehingga mereka mewujudkan keharmonian visual yang hebat di antara mereka.

Pautan ke laman web: Burung Camar Elegan

Lebensraum

Seperti yang anda lihat dalam semua contoh, adalah penting tab tajuk untuk pergi ke halaman yang berbeza dari laman web. Tipografi sangat penting, bermain dengan satu untuk tajuk dan yang lain untuk teks dengan sans serif yang berfungsi dengan baik.

Pautan ke laman web: Lebensraum

PinkPoint

Kontras warna membawa kita ke laman web yang sedikit lebih kompleks dari semua paparan. Tidak semua elemen utama hilang untuk bermain kali ini dengan kecerunan untuk gambar latar dan dua bahagian yang mempunyai warna utama kecerunan untuk gambar utama.

Pautan ke laman web: PinkPoint

IWC

Foto hebat dengan fon yang dipilih dengan baik dan elemen "wira" anda boleh berikan ke laman web ini. Dengan slaid, ia menunjukkan bahawa sebahagian daripada karya agak mudah dalam konsepnya.

Pautan ke laman web: IWC

Cincang

Ilustrasi digital membawa kita ke Chop Chop dengan gambar yang memakan semua visual itu. Warna biru di tajuk memberikan titik untuk membuat nilai kromatik selaras dengan keseluruhan gambar yang diproyeksikan oleh web.

Pautan ke laman web: Cincang

7Pain

7Pine bermain dengan hijau untuk menjadi protagonis hebat pinggan rumah. Selebihnya menyusunnya gambar dengan banyak hijau dan pengepala sederhana yang mahu dilupakan oleh logo.

Pautan ke laman web: 7Pain

Jumlah

Jumlah itu membawa kita ke arah lain. Main dengan hitam dan putih, ilustrasi yang sangat kreatif dan itu sesuai dengan unsur-unsur lain dan dua ilustrasi lain untuk membuat pemandangan yang lebih menarik. Contoh untuk membuat laman web yang menonjol dari yang lain.

Pautan ke laman web: Jumlah

Kotak topi

Biru adalah warna utama di laman web ini di mana tidak ada kekurangan gambar yang diterangi sepenuhnya oleh warna putih dan bagaimana permainannya dalam 3D pembangun laman web itu yang bergerak semasa kita bergerak.

Pautan ke laman web: Kotak topi

Kara lyte

Kara pergi ke kesederhanaan dan minimalis dengan kehadirannya yang semula jadi dan indah dalam gambar anda. Selebihnya adalah teks yang disertakan dengan elemen utama untuk tajuk dan butang hamburger untuk membukanya.

Pautan ke laman web: Kara lyte

Pemasaran Studio Instrinsik

Es dari laman web paling mudah tapi itu menunjukkan kepada kita apa itu membuat blog. Merah dan hitam adalah watak utama dalam laman "blog" yang sangat.

Pautan ke laman web: Pemasaran Studio Instrinsik

Cara membuat laman web ringkas dalam HTML

Kami akan mengajar anda buat laman web ringkas dalam HTML supaya anda mengetahui elemen paling asas yang menyusunnya. Perlu ada host web di mana kita dapat memuatkan kod dan beberapa perubahan dalam CSS, tetapi ayuh, ini adalah prinsip untuk memulakan perjalanan kita dalam HTML.

Setelah melihat beberapa contoh web mudah Dengan itu anda dapat memotivasi diri anda cukup untuk membuat reka bentuk anda sendiri tanpa banyak kepala. Kadang-kadang yang sederhana menghasilkan kesan yang lebih baik daripada menyulitkan kita dalam perkara yang kompleks. Anda akan melihat bahawa dalam kebanyakan kes, kaedah ini berfungsi dengan baik. Berusaha untuk mendapatkannya.

Membuat laman web sederhana dalam HTML lebih mudah daripada yang kelihatannya pada mulanya. Laman sesawang terdiri daripada tajuk, badan atau kandungan dan footer atau footer sebagai elemen utama. Kami dapat mengklasifikasikannya dengan cara ini:

• Dokumen: semua dokumen yang akan kita buat mesti dibuat dengan a . Kami buka dengan dan sentiasa ditutup dengan a
• Badan atau badan: bahagian dokumen yang kelihatan adalah antara Y
• Tajuk: mereka dikenali dengan H1, H2, H3 ... Kita mulakan dengan a dan kita tutup dengan a . Teks yang ada di dalamnya akan muncul sebagai tajuk dan bergantung pada penomorannya, teks tersebut akan dibuat dalam ukuran yang lebih kecil atau lebih besar.
• Ayat: perenggan tersebut dilampirkan dalam a dan ditutup dengan
• Pautan: contoh paling jelas ialahcreativosonline.org/»> Pautan ke Creativos Online
• Imejan: kami menentukannya dengan label . Contohnya ialah . Kami menggunakan gambar di antara tanda petik dan menggunakan alt untuk teks alternatif yang penting untuk SEO.
• Senarai: kami menentukan senarai dengan untuk tidak kemas dan dengan untuk kemas. Item senarai digunakan dengan . Sentiasa ingat untuk menutupnya dengan bar.

Dengan unsur-unsur ini kita akan ada asas untuk membuat laman web yang mudah seperti yang anda akan lihat dalam jumlah yang banyak bahawa kami akan mengajar anda di bahagian seterusnya. Katakan bahawa struktur semantik dengan unsur-unsurnya yang paling penting kelihatan seperti ini:

• Tandakan dengan bar navigasi untuk laman web yang berbeza.
• Artikel atau ruang badan di mana kita boleh membuat entri blog, meletakkan kurikulum atau gambar kita.
• Bar sisi atau bar sisi untuk meletakkan maklumat tambahan.
• Kaki atau kaki, di mana kami akan meletakkan pautan ke laman web yang paling penting serta ikon rangkaian sosial (selalu sebagai contoh).

Dalam contoh yang akan anda lihat di bawah adalah semuanya berdasarkan logo yang ringkas tetapi elegan, tajuk di mana mereka meletakkan navigasi ke halaman laman web yang berbeza, ruang tengah yang dikuasai oleh teks atau gambar dan footer dengan unsur-unsur yang disebutkan dalam perenggan sebelumnya.

Kami mengesyorkan bahawa jangan patah kepala dan pergi ke arah sederhana. Perkara utama adalah bahawa kawasan ini dibezakan dari yang lain dalam visual detik. Dengan masa kita akan dapat menyulitkan diri sendiri dan bekerja lebih banyak di tempat lain.

Ini adalah contoh jelas kod HTML dengan elemen yang paling penting:

<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='UTF-8'/>
    <title>HTML Semántico</title>
  </head>
  <body>

    <h1>Crear web es fácil!</h1>
    <ul>
      <li><a href='#'>Inicio</a></li>
      <li><a href='#'>Acerca de</a></li>
      <li><a href='#'>Blog</a></li>
      <li><a href='#'>Iniciar sesión</a></li>
    </ul>

  </body>
</html>

Dengan baris-baris kod HTML ini, kita akan mempunyai pertama kali membuat tajuk halaman di tajuk dengan, dalam kes ini «Semantik HTML», kita akan menutup kedua tajuk dengan , pengepala dengan dan kita akan memberi jalan untuk membuka badan dengan .

Kami akan mempunyai tajuk pertama di H1 dengan untuk menutupnya dengan , dan kami akan pergi ke senarai yang akan membantu kami membuat bar navigasi untuk pelbagai halaman di laman web kami. Kami menutup senarai dengan , kita tutup dan akhirnya dokumen html dengan .

Untuk menamatkan, selalu buka dokumen dengan untuk menutupnya pada akhir keseluruhan kod dengan garis miring. Setelah membuka dokumen, rujukan bahasa selalu digunakan, yang dalam hal ini adalah bahasa Sepanyol dengan «es» dan dengan a .

Penting untuk anda melihat kodnya dengan teliti dan bila-bila masa anda membuka fungsi menutupnya dengan bar berkenaan.

Sedikit CSS

Kami masuk ke CSS sedikit, tetapi akhirnya sehingga anda faham cara menggayakan HTML. Katakan bahawa CSS dan HTML berganding bahu untuk memberikan laman web mudah yang anda dapati di bawah.

Sekiranya di satu pihak kita menggunakan HTML semantik untuk apa itu tajuk, isi atau badan dengan artikel atau gambar dan footernya, dalam CSS kita akan menggunakan fungsi «Div» untuk mengenal pasti ke setiap ruang ini untuk kemudian menerapkan perubahan yang diperlukan dalam reka bentuk.

Sesuatu yang semudah:

Walaupun kita dapat menerapkan gaya dengan Div, struktur yang sesuai dan sempurna akan membantu supaya perayap web dapat "membaca" dengan sempurna isi kandungan kami, jadi jika kami mengikuti struktur asas itu, kami akan mempunyai pekerjaan dan asas yang hebat terlebih dahulu.

Un contoh kod CSS ringkas:

h1 {
warna: putih;
text-align: pusat;
}

Kami memanggil H1 dan teksnya kami akan meletakkannya dengan warna putih: putih; dan kami akan menjajarkannya ke bahagian tengah dengan «text align». Sentiasa tutup dengan tanda kurung persegi setelah membuka panggilan H1.

Foto tajuk dari Greg rakozy