30 nihoyatda sodda veb-sahifalar

Web

Ba'zi taniqli sahifalar juda ko'p ma'lumotlarga ega, ammo men buning aksini afzal ko'raman: oddiylari.

Shubhasiz, ushbu guruhning buyuk vakili - bu sayohatni boshlaganidan beri minimalist uy sahifasi bilan Google, Ammo, aniqrog'i, Internetdagi yagona narsa oddiy narsalarni saqlashga sodiq emas.

Oddiy HTML veb-sahifalar misollari

Kin Richmond

Kin RichMond

Kin Richmond bizni bir nechta elementlar bilan o'ynashning soddaligini ko'rishga majbur qiladi, ammo juda yaxshi joylashtirilgan minimalizmga ajoyib tuyg'ularni berish. Uning chap yuqori qismida joylashgan logotip, o'ng tomonda va markazda joylashgan Twitter va aloqa piktogrammasi, o'ziga xos narsaga bag'ishlangan ajoyib tipografiya bilan.

Internetga havola: Keanrich mond

Elis qurbaqa

Elis qurbaqa

Elis qurbaqa logotipingiz joylashtirilgan holda ham sodda bo'ling markazida sizning veb-saytingizning asosiy sahifalari va to'g'ri joylashtirilgan bir qator fotosuratlar o'rtasida harakat qilish uchun to'rtta yorliq, shunda bir qarashda biz nima qilayotganingizni va nima qilayotganingizni bilib olamiz.

Internetga havola: Elis qurbaqa

Jonatan Ogden

Jonatan Ogden

Ogden logotip sifatida sizning ismingiz qanchalik sodda ekanligi bilan o'ynashni davom eting, shunchaki pastda joylashgan ijtimoiy tarmoqlar e'tiborni jalb qilmasdan va ularning dizayni biz tezda ulardan o'tishimiz uchun ishlaydi. Bir sahifada u muhim bo'lgan hamma narsani ko'rsatadi.

Internetga havola: Jonatan Ogden

Finch

Finch

Finch allaqachon tipografiya va boshqa narsalar bilan o'ynash uchun boshqa joylarga ketmoqda uning nafisligi va qilayotgan ishining donoligini anglatuvchi ranglar. Bir nechta elementlar bilan u o'zining barcha professionalligini ko'z oldida qoldiradi. Shuningdek, qaysi sahifalar sizga bog'langanligini aniq ko'rsatib beradi.

Internetga havola: Finch

Boshqa dizayn

Boshqa dizayn

Ushbu veb-sayt boshqacha o'ynash. Asosiy sahifalarga, telefoningizga va ijtimoiy tarmoqlaringizdagi havolalarga o'tishimiz mumkin bo'lgan sarlavha bilan devor qog'ozidan foydalaning.

Internetga havola: Boshqa dizayn

Briz

Briz

Kay bizni o'zining figurasi bilan tasvirlaydi mavhum uchburchak va mos rang palitrasi yaqinlik bermoq. U, shuningdek, biz u haqida ko'proq bilmoqchi bo'lsak, kichik hajmdagi shrift bilan biografiyasining bir qismini taklif qiladi.

Internetga havola: Briz

Vertikal bog 'dizayni

Vertikal bog 'dizayni

Oldingi singari, Vertical Garden Design ham tezkor suratga tushadi uning Oslo aeroportidagi eng yaxshi ishlaridan biri. Yuqorida bizda "nav bar" yoki navigatsiya paneli bor va hatto tilni o'zgartirish imkoniyati mavjud. Logotip uni vertikal formatda joylashtirib, juda sodda sahifaga yakuniy teginishni beradi.

Internetga havola: Vertikal bog 'dizayni

247 daraja

247 daraja

247 daraja monoxrom va fon tasviri bilan o'ynash deyarli qorong'i. Matn va sarlavhadan kichikroq sarlavha shrifti katta dizaynda katta kontrast hosil qilish uchun katta harflar bilan yozilgan.

Internetga havola: 247 daraja

Buning rohatlaning

Buning rohatlaning

Una ajoyib tipografiya haqiqiy bo'lish belgisi bo'lishi mumkin va biz nima qilishimizni bilamiz. Agar xabar to'g'ridan-to'g'ri bo'lsa, sizga ko'proq narsa berish shart emas. Ular buni aniq ta'kidlashadi: ular chiroyli dasturlar va veb-saytlar yaratishni yaxshi ko'radilar. Ular boshqa havolada loyihalarni va o'qish uchun pochtani qoldiradilar.

Internetga havola: Buning rohatlaning

Allison hou

Allison hou

Allison bizni olib boradi boshqa kurslardan oldin va ko'proq rasmlarni o'z ichiga oladi va shuncha "ayol" shrift. Xuddi shu narsa sizning asosiy rasmingiz va ushbu sarlavhangiz uchun ham amal qiladi. U xarid qilish uchun fokuslar ko'rsatiladigan kartani taqdim etish hashamatiga ega.

Internetga havola: Allison hou

Pikselot

Pikselot

Pixelot biroz aqldan ozgan, ammo bu muallifning ijodkorligini ham ko'rsatadi. Foydalanish niqob yaratish uchun sichqoncha ko'rsatgichi qaerda bo'lmasin, u xiralashadi.

Internetga havola: Pikselot

Lionel scholtes

Lionel scholtes

Agar xohlasangiz o'zingizning rezyumeingizni bundan boshqasi bilan onlayn qiling, Lionel sizga qadamlarni ko'rsatadi. Muvofiq shrift, yuqori chapdagi fotosuratingiz, ijtimoiy tarmoqlarga havolalar va tajribangiz. Faqatgina dekorativ element bu turli xil gorizontal chiziqlar.

Internetga havola: Lionel scholtes

Chiroyli qushlar

Chiroyli qushlar

Biz qaytamiz minimalizm nafisligiga va o'sha katta bo'sh joylar. Bir tomondan, sarlavha boshqa elementlardan juda uzoqroq, boshqa tomondan, bu elementlar ular orasida ajoyib vizual uyg'unlikni yaratadigan tarzda shakllangan.

Internetga havola: Chiroyli qushlar

Lebensraum

Lebensraum

Barcha misollarda ko'rib turganingizdek, bu juda muhimdir turli xil sahifalarga o'tish uchun sarlavha yorliqlari veb-saytidan. Tipografiya juda katta ahamiyatga ega, juda yaxshi ishlaydigan sans serif bilan bitta uchun sarlavha uchun, ikkinchisi bilan matn uchun o'ynang.

Internetga havola: Lebensraum

PinkPoint

PinkPoint

Ranglarning qarama-qarshiligi bizni barcha ko'rinishlarning biroz murakkabroq tarmog'iga olib boradi. Ushbu asosiy elementlarning hammasi ham yo'q emas bu safar asosiy rasm uchun gradientlar va gradientning asosiy ranglariga ega bo'lgan ikkita bo'lim bilan o'ynash.

Internetga havola: PinkPoint

IWC

IWC

Bilan ajoyib fotosurat yaxshi tanlangan shrift va "qahramon" elementi siz ushbu veb-saytga berishingiz mumkin. Slayder bilan u ishning bir qismini o'z kontseptsiyasida juda sodda ekanligini ko'rsatadi.

Internetga havola: IWC

Chop chop

Chop chop

Raqamli illyustratsiya bizni Chop Chop-ga olib boradi uning barcha vizual mavjudligini yeyadigan bu tasvir. Sarlavhadagi ko'k rang, xromli qiymatlarni veb tomonidan aks ettirilgan butun tasvirga mos ravishda yaratishga imkon beradi.

Internetga havola: Chop chop

7 Qarag'ay

7 Qarag'ay

7Pine uy plitasining ajoyib qahramoni bo'lish uchun yashil rang bilan o'ynaydi. Qolganlari uni tashkil qiladi juda ko'p yashil va oddiy sarlavha bilan tasvir logotipga e'tibor bermaslik kerak.

Internetga havola: 7 Qarag'ay

Sum

Sum

Sum bizni boshqa yo'nalishlarga olib boradi. Afsonaviy qora va oq rang bilan o'ynang, bu juda ijodiy tasvir va bu boshqa elementlar va boshqa ikkita rasm bilan hamohang bo'lib, yanada qiziqarli manzara yaratadi. Qolganlaridan ajralib turadigan veb-sayt yaratish uchun misol.

Internetga havola: Sum

Xatboks

Xatboks

Ushbu veb-saytda ko'k rang ustun bo'lib, unda oq rang bilan to'liq yoritilgan yo'qolgan rasmlar yo'q va o'yin qanday bo'lishi mumkin sayt quruvchisining 3D formatida bu biz harakat qilayotganda harakat qiladi.

Internetga havola: Xatboks

Kara lyte

Kara lyte

Qora boradi tabiiy va chiroyli mavjudligi bilan soddaligi va minimalizmi sizning fotosuratingizda. Qolganlari - bu sarlavha uchun asosiy elementlar va uni ochish uchun gamburger tugmasi bilan birga kelgan matn.

Internetga havola: Kara lyte

Instrinsic Studio Marketing

Ichki

Es eng oddiy veb-sayt ammo bu bizga blog yaratish nima ekanligini ko'rsatadi. Qizil va qora ranglar juda "blog" saytidagi qahramonlardir.

Internetga havola: Instrinsic Studio Marketing

HTML-da oddiy veb-saytni qanday yaratish

HTML

Biz sizga dars beramiz HTML-da oddiy veb-sayt yaratish shuning uchun siz uni tuzadigan eng asosiy elementlarni bilasiz. Bizda CSS-dagi kodni va ba'zi bir tweakslarni yuklashimiz mumkin bo'lgan veb-xost bo'lishi kerak, lekin hattoki HTML-da sayohatimizni boshlash uchun bu tamoyillar.

Ba'zilarini ko'rib oddiy veb-misollar Buning yordamida siz o'zingizning dizayningizni o'zingizning boshingizni ko'p sindirmasdan qilish uchun etarlicha turtki bera olasiz. Ba'zan oddiy narsa bizni murakkab narsalarda murakkablashtirgandan ko'ra yaxshiroq ta'sir yaratadi. Ko'pgina hollarda oddiy narsalar juda yaxshi ishlashini ko'rasiz. Olg'a.

HTML-da oddiy veb-sayt yaratish, avvaliga qaraganda osonroq. Veb-sayt sarlavhadan, tanadan iborat yoki tarkib va ​​pastki element yoki asosiy element sifatida altbilgi. Biz ularni quyidagicha tasniflashimiz mumkin:

  • Hujjatlar: biz yaratadigan barcha hujjatlar a bilan bajarilishi kerak . Biz bilan ochamiz va har doim a bilan yopiladi
  • Tana yoki tan: hujjatning ko'rinadigan qismi o'rtasida Y
  • Sarlavhalar: ular H1, H2, H3 tomonidan ma'lum ... Biz a bilan boshlaymiz va biz bilan yopamiz . Ichidagi matn sarlavha sifatida paydo bo'ladi va uning raqamlanishiga qarab kichikroq yoki kattaroq hajmda bo'ladi.
  • Paragraflar: paragraf a ichida joylashgan va bilan yopiladi
  • Linklar: eng aniq misol - Creativos Online-ga havola
  • Rasmlar: biz ularni yorliq bilan aniqlaymiz . Misol bo'lishi mumkin . Biz tirnoq orasidagi rasmni chaqiramiz va muqobil matn uchun alt-dan foydalanamiz, bu SEO uchun juda muhimdir.
  • Ro'yxat: biz ro'yxatlarni aniqlaymiz tartibsiz va uchun ozoda uchun. Ro'yxat elementlari bilan ishlatiladi . Ularni bar bilan yopishni doimo unutmang.

HTML

Ushbu elementlar bilan bizda bo'ladi oddiy veb-sayt yaratish uchun asos Keyingi bobda siz ularga o'rgatadigan narsalar haqida bilib olasiz. Aytaylik, eng muhim elementlari bo'lgan semantik tuzilish quyidagicha ko'rinadi:

  • Navigatsiya paneli bilan sarlavha saytning turli sahifalari uchun.
  • Maqola yoki tanadagi bo'shliq unda biz blog yozuvini yaratishimiz, o'quv dasturimiz yoki rasmimizni qo'yishimiz mumkin.
  • Yon panel yoki yon panel qo'shimcha ma'lumot qo'yish.
  • Oyoq yoki oyoq, bu erda biz saytning eng muhim sahifalariga, shuningdek, ijtimoiy tarmoqlarning ikonkalariga havolalarni joylashtiramiz (har doim namuna sifatida).

Quyida ko'rgan misollarda keltirilgan barchasi oddiy, ammo oqlangan logotipga asoslangan, saytning turli xil sahifalarida navigatsiyani joylashtiradigan sarlavha, matn yoki rasm ustun bo'lgan markaziy bo'shliq va oldingi xatboshida aytib o'tilgan elementlar bilan altbilgi.

Biz buni tavsiya qilamiz boshingizni sindirmang va oddiy narsaga o'ting. Asosiysi, bu sohalar vizual soniyalar ichida boshqalardan ajralib turadi. Vaqt o'tishi bilan biz o'zimizni murakkablashtira olamiz va boshqa joylarda ishlashimiz mumkin.

Bu shunday HTML kodining aniq namunasi eng muhim elementlar bilan:

<!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>

Ushbu HTML kod satrlari bilan bizda bo'lar edi oldin sarlavhada sahifa sarlavhasini yaratdi, bu holda «Semantik HTML», biz ikkala sarlavhani ham yopamiz , sarlavha bilan va biz tanani ochish uchun yo'l beramiz .

Bizda birinchi sarlavha bilan H1 bilan yopish va biz saytimizning turli xil sahifalari uchun navigatsiya panelini yaratishda yordam beradigan ro'yxatga kiramiz. Biz ro'yxatni yopamiz , biz yopamiz va nihoyat HTML hujjati .

Tugatish uchun, har doim bilan hujjatni oching uni barcha kod oxirida chiziq bilan yopish uchun. Hujjatni ochgandan so'ng, tilga havola har doim ishlatiladi, bu holda ispancha "es" va a bilan .

Kodni va har doim diqqat bilan qarashingiz muhimdir funktsiyani ochasiz, uni bar bilan yopasiz mos keladi

Bir oz CSS

Biz CSS-ga biroz o'tamiz, ammo siz tushunishingiz uchun HTML-ni qanday uslublash kerakligi. Aytaylik, quyida topishingiz mumkin bo'lgan sodda veb-saytlarni berish uchun CSS va HTML bir-biriga mos keladi.

Agar bizda bir tomondan HTML-ning sarlavhasi yoki sarlavhasi, tanasi yoki tanasi, maqolasi yoki tasviri va altbilgisi nima uchun ma'noga ega bo'lsa, CSS-da biz identifikatsiyalash uchun «Div» funktsiyasidan foydalanamiz dizayndagi kerakli o'zgarishlarni keyinchalik qo'llash uchun ushbu bo'shliqlarning har biriga.

Kabi oddiy narsa:

Veb semantikasi

Uslublarni Div bilan qo'llashimiz mumkin bo'lsa-da, mos va mukammal tuzilish yordam beradi shuning uchun veb-brauzerlar bizning tarkibimiz nimani mukammal "o'qiy olishlari" uchun, agar biz ushbu asosiy tuzilishga amal qilsak, avvalo bizda juda zo'r ish va baza bo'ladi.

Un oddiy CSS kod misoli:

h1 {
rang: oq rang;
matn-align: markaz;
}

Biz H1 va matnni chaqiramiz biz uni oq rangga rang bilan qo'yamiz: oq; va biz uni "text align" bilan markazga moslashtiramiz. H1 qo'ng'irog'ini ochgandan so'ng har doim to'rtburchaklar bilan yoping.

Sarlavha fotosurati Greg rakozi


3 ta sharh, o'zingizni qoldiring

Fikringizni qoldiring

Sizning email manzilingiz chop qilinmaydi. Kerakli joylar bilan belgilangan *

*

*

  1. Ma'lumotlar uchun javobgardir: Migel Anxel Gaton
  2. Ma'lumotlarning maqsadi: SPAMni boshqarish, izohlarni boshqarish.
  3. Qonuniylashtirish: Sizning roziligingiz
  4. Ma'lumotlar haqida ma'lumot: qonuniy majburiyatlar bundan mustasno, ma'lumotlar uchinchi shaxslarga etkazilmaydi.
  5. Ma'lumotlarni saqlash: Occentus Networks (EU) tomonidan joylashtirilgan ma'lumotlar bazasi
  6. Huquqlar: istalgan vaqtda siz ma'lumotlaringizni cheklashingiz, tiklashingiz va o'chirishingiz mumkin.

  1.   Kristofer - veb-sayt dijo

    Men, albatta, dizaynni juda yaxshi ko'raman, dizayn dunyosini ko'rish uchun yaxshi sahifa.

    Yaxshi tilaklar.

  2.   Jorge dijo

    Assalomu alaykum do'stlar, ishlaringiz qanday?

    Men html-da juda oddiy veb-sahifani yaratmoqdaman va har bir nashrga sharhlar qutisini qo'shmoqchiman. Buni qanday qilishni menga ko'rsatma bera olasizmi?

  3.   Emerson dijo

    Uchta tugmachali va tasvirli juda oddiy veb-sahifaga muhtoj bo'lganlar va har qanday holatda ham o'yinchi, shunga o'xshash narsa juda foydali bo'ladi.
    Ammo men ushbu ma'lumot bilan o'z sahifamni qurishga qodir ekanligimga ishonmayman, lekin hech bo'lmaganda bu sizga g'oyalar va nimalarni izlashingizga yordam beradi.