30 Ótrúlega einfaldar vefsíður

web
Sumar af frægustu síðunum eru mjög ofhlaðnar upplýsingum, en ég vil frekar hið gagnstæða: þær einföldu.

Augljóslega er hinn mikli veldisvígur þessa hóps Google með lægsta heimasíðu sína síðan hann hóf för sína, en greinilega er það ekki sá eini á internetinu sem leggur áherslu á að hafa hlutina einfalda.

Einföld HTML vefsíðu dæmi

Kean richmond

Kean RichMond

Kean Richmond fær okkur til að sjá einfaldleikann við að leika með fáa þætti, en mjög vel í stakk búinn til veita naumhyggju mikla tilfinningu. Merki hans efst til vinstri, Twitter og tengiliðatáknin til hægri og í miðjunni, með sláandi leturfræði, því sem hann er tileinkaður.

Tengill á vefinn: Keanrich mond

Alice drougard

Alice drougard

Alice drougard hafðu það einfalt líka með lógóið þitt sett í miðjunni, fjórir flipar til að fara á milli aðalsíðna vefsíðunnar þinnar og ljósmyndaseríu á viðeigandi hátt þannig að í fljótu bragði vitum við hvað þú gerir og hvað þú gerir.

Tengill á vefinn: Alice drougard

Jónatan Ogden

Jónatan Ogden

Ogden haltu áfram að spila með hversu einfalt nafn þitt er sem lógó, samfélagsnetið staðsett rétt fyrir neðan án þess að vekja athygli og hönnun þeirra virkar þannig að við getum fljótt farið í gegnum þau. Á einni síðu er sýnt allt sem skiptir máli.

Tengill á vefinn: Jónatan Ogden

Finch

Finch

Finch er þegar að fara til annarra staða til að leika sér með leturfræði og þá litir sem tákna glæsileika og visku hvað það gerir. Með örfáum atriðum lætur hann alla sína fagmennsku í augum. Það gerir það einnig ljóst hvaða síður hafa tengst þér.

Tengill á vefinn: Finch

Önnur hönnun

Önnur hönnun

Þessi vefsíða spila öðruvísi. Notaðu veggfóður með haus sem við getum farið á aðalsíðurnar, símann þinn og hlekkina á félagsnetið þitt.

Tengill á vefinn: Önnur hönnun

hressilegur

hressilegur

Kai myndskreytir okkur með sinni eigin mynd með abstrakt þríhyrningur og viðeigandi litatöflu að gefa nálægð. Hann býður einnig upp á hluta af ævisögu sinni með leturgerð í minni stærð ef við viljum vita meira um hann.

Tengill á vefinn: hressilegur

Lóðrétt garðhönnun

Lóðrétt garðhönnun

Líkt og sú fyrri gengur Lóðrétt garðhönnun í átt að ljósmynd sem sýnir hratt eitt besta starf hans á flugvellinum í Osló. Efst höfum við haus með „nav bar“ eða flakkstiku og jafnvel möguleika á að breyta tungumálinu. Merkið setur það á lóðrétt form til að gefa lokahönd á mjög einfalda síðu.

Tengill á vefinn: Lóðrétt garðhönnun

247 gráður

247 gráður

247 gráður spila með einlita og bakgrunnsmynd næstum alveg dökkt. Haushaus leturgerð, minni en texti og haus, er hástafur til að skapa mikla andstæðu í heildarhönnuninni.

Tengill á vefinn: 247 gráður

Njóttu þetta

Njóttu þetta

a frábær leturfræði getur verið merki um að vera ekta og að við vitum hvað við gerum. Þú þarft ekki að gefa neitt meira ef skilaboðin eru bein. Þeir gera það skýrt: Þeir elska að búa til falleg forrit og vefsíður. Þeir skilja póstinn eftir vegna verkefna og nám sitt í öðrum hlekk.

Tengill á vefinn: Njóttu þetta

Allison hou

Allison hou

Allison tekur okkur fyrir önnur námskeið og inniheldur fleiri myndir og það meira „kvenlega“ leturgerð. Sama gildir um aðalmyndina þína og þann haus. Hann hefur þann munað að framvísa korti sem sýnir verslunarbrögð.

Tengill á vefinn: Allison hou

pixelot

pixelot

Pixelot er svolítið brjálað, en það gefur einnig til kynna sköpunargáfu höfundarins. Notaðu músarbendilinn til að búa til grímu sem þokast hvar sem við höfum það uppi.

Tengill á vefinn: pixelot

Lionel scholtes

Lionel scholtes

Ef þú vilt gerðu ferilskrána þína á netinu með ekkert meira en það, Lionel sýnir þér skrefin. Viðeigandi leturgerð, myndin þín efst til vinstri, tenglar á félagsnetið þitt og upplifun þína. Eini skreytingarþátturinn eru þessar tvær láréttu línur í mismunandi litum.

Tengill á vefinn: Lionel scholtes

Glæsilegir mávar

Glæsilegir mávar

Við komum aftur að glæsileika naumhyggju og þessi stóru autt bil. Annars vegar er hausinn mjög langt frá restinni af frumefnunum og hins vegar þessir þættir mótaðir á þann hátt að þeir skapa mikla sjónræna sátt milli þeirra.

Tengill á vefinn: Glæsilegir mávar

Lebensraum

Lebensraum

Eins og sjá má á öllum dæmunum er það mikilvægt hausflipana til að fara á mismunandi síður af vefsíðunni. Leturfræði er mjög mikilvæg, spilaðu með einn fyrir hausinn og annan fyrir textann með sans serif sem gerir frábært starf.

Tengill á vefinn: Lebensraum

PinkPoint

PinkPoint

Andstæða lita leiðir okkur að aðeins flóknari vef öllum skoðunum. Ekki vantar alla þessa meginþætti að leika að þessu sinni með hallana fyrir bakgrunnsmyndina og þessa tvo hluta sem eru með aðallitum aðalmyndar hallans.

Tengill á vefinn: PinkPoint

IWC

IWC

Frábær ljósmynd með vel valið leturgerð og „hetja“ frumefni þú getur gefið þessum vef. Með sleðanum sýnir það hluta verksins að vera nokkuð einfaldur í hugmynd sinni.

Tengill á vefinn: IWC

Chop chop

Chop chop

Stafræna myndskreytingin færir okkur að Chop Chop með þessi mynd sem étur upp alla sjónræna nærveru hennar. Blái liturinn í hausnum gefur því lið sitt að búa til litskilin gildi í takt við alla myndina sem varpað er á vefinn.

Tengill á vefinn: Chop chop

7 Fura

7 Fura

7Pine leikur með flötinni til að vera frábær aðalsöguhetja heimaplatsins. Restin semur það mynd með fullt af grænu og einföldum haus sem vill fara framhjá merkinu.

Tengill á vefinn: 7 Fura

Summan

Summan

Summan tekur okkur í aðrar áttir. Spilaðu með svakalega svarta og hvíta, mjög skapandi mynd og það helst í hendur við restina af þáttunum og tveimur öðrum myndum til að skapa meira en áhugavert landslag. Dæmi um að búa til vefsíðu sem sker sig úr öðrum.

Tengill á vefinn: Summan

Hattakassi

Hattakassi

Blár er ríkjandi litur á þessari vefsíðu þar sem engar myndir vantar að fullu upplýstar með hvítu og hvernig leikurinn væri í þrívídd þess síðusmiðjanda það hreyfist þegar við hreyfum okkur.

Tengill á vefinn: Hattakassi

Kara lyte

Kara lyte

Kara fer til einfaldleiki og naumhyggju með sinni náttúrulegu og fallegu nærveru á ljósmynd þinni. Restin er texti sem fylgir því sem eru meginþættirnir fyrir hausinn og hamborgarhnappur til að opna hann.

Tengill á vefinn: Kara lyte

Markaðssetning Instrinsic Studio

Innri

Es af einfaldasta vefnum en það sýnir okkur hvað það er að búa til blogg. Rauður og svartur eru söguhetjurnar á mjög „blogg“ síðu.

Tengill á vefinn: Markaðssetning Instrinsic Studio

Hvernig á að búa til einfalda vefsíðu í HTML

HTML

Við ætlum að kenna þér búið til einfalda vefsíðu í HTML svo að þú þekkir grunnþætti sem semja það. Það verður nauðsynlegt að hafa vefþjón þar sem við getum hlaðið kóðanum og einhverjum klipum í CSS, en komdu, þetta eru meginreglurnar til að hefja ferð okkar í HTML.

Búinn að sjá nokkra einföld vefdæmi Með því getur þú hvatt þig nógu mikið til að búa til eigin hönnun án þess að brjóta höfuð þitt mikið. Stundum skapar hið einfalda betri áhrif en að flækja okkur í flóknum hlutum. Þú munt sjá að í flestum tilfellum virkar einfalt mjög vel. Farðu í það.

Að búa til einfalda vefsíðu í HTML er auðveldara en það kann að virðast í fyrstu. Vefsíða samanstendur af haus, líkamanum eða innihald og fótur eða fótur sem meginþættir. Við getum flokkað þau á þennan hátt:

  • Skjöl: öll skjöl sem við ætlum að búa til verða að vera gerð með a . Við opnum með og lokar alltaf með a
  • Líkaminn eða líkaminn: sýnilegi hluti skjalsins er á milli Y
  • Fyrirsagnir: þeir eru þekktir af H1, H2, H3 ... Við byrjum á a og við lokum með a . Textinn sem er inni mun birtast sem haus og eftir númerun mun hann gera það í minni eða stærri stærð.
  • Málsgreinar: málsgreinin fylgir innan a og lokar með
  • Tenglar: skýrasta dæmið er Link to Creativos Online
  • Myndmál: við skilgreinum þau með merkimiðanum . Dæmi væri . Við áköllum myndina á milli gæsalappa og notum alt fyrir annan texta sem er nauðsynlegur fyrir SEO.
  • Lists: við skilgreinum listana með fyrir sóðalegt og með fyrir snyrtilegan. Listi hlutir eru notaðir með . Mundu alltaf að loka þeim með stönginni.

HTML

Með þessum þáttum munum við hafa grunninn að gerð einfaldrar vefsíðu eins og þú munt sjá í miklu magni af þeim sem við munum kenna þér í næsta kafla. Segjum að merkingargerð með mikilvægustu þáttum sínum líti svona út:

  • Haus með siglingarstikunni fyrir mismunandi síður síðunnar.
  • Greinin eða líkamsrýmið þar sem við getum búið til bloggfærslu, sett námskrá okkar eða mynd.
  • Skenkur eða skenkur að setja viðbótarupplýsingar.
  • Fóturinn eða fóturinn, þar sem við munum setja tengla á mikilvægustu síður síðunnar sem og tákn samfélagsneta (alltaf sem dæmi).

Í dæmunum sem þú munt sjá hér að neðan eru allt byggt á einföldu en glæsilegu merki, haus þar sem þeir setja leiðsögnina á mismunandi síður síðunnar, miðrými sem einkennist af texta eða mynd og fótur með þeim þáttum sem nefndir voru í fyrri málsgrein.

Við mælum með því ekki brjóta höfuðið og fara í hið einfalda. Aðalatriðið er að þessi svæði eru aðgreind frá hinum í sjónrænu framhjá sekúndum. Með tímanum munum við geta flækt okkur sjálf og unnið meira að öðrum rýmum.

Þetta er skýrt dæmi um HTML kóða með mikilvægustu þættina:

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

Með þessum línum af HTML kóða myndum við hafa bjó fyrst til blaðsíðutitilinn í hausnum með, í þessu tilfelli „Semantic HTML“ myndum við loka báðum titlinum með , hausinn með og við myndum víkja fyrir því að opna líkamann með .

Við myndum hafa fyrsta haus í H1 með að loka því með , og við myndum fara á lista sem myndi hjálpa okkur að búa til flakkstikuna fyrir mismunandi síður á síðunni okkar. Við lokum listanum með , við lokum og að lokum html skjalið með .

Til að klára opnaðu alltaf skjal með að loka því í lok alls kóðans með skástrikinu. Eftir að skjalið hefur verið opnað er alltaf notað tilvísun í tungumálið, sem í þessu tilfelli er spænskt með „es“ og með a .

Það er mikilvægt að þú skoðir kóðann vel og hvenær sem er þú opnar aðgerð lokaðu því með stikunni samsvarandi

Smá CSS

Við förum aðeins inn í CSS en í framhjáhlaupi svo að þú skiljir hvernig á að stíla HTML. Við skulum segja að CSS og HTML haldast í hendur til að gefa þeim einföldu vefsíður sem þú munt finna hér að neðan.

Ef við höfum annars vegar merkingarfræðilega notkun á HTML fyrir hvað er haus eða haus, meginmál eða líkami með grein sinni eða mynd og fótinn, í CSS myndum við nota „Div“ aðgerðina til að bera kennsl á í hvert þessara rýma til að síðar geti beitt nauðsynlegum breytingum á hönnuninni.

Eitthvað eins einfalt og:

Merkingarfræði á vefnum

Þó að við getum beitt stílunum með Div, viðeigandi og fullkomin uppbygging mun hjálpa svo að vefskriðlarar geti „lesið“ fullkomlega hvað innihald okkar snýst um, þannig að ef við fylgjum þeirri grunngerð munum við hafa frábært starf og grunn fyrst.

Un einfalt CSS kóða dæmi:

h1 {
lit: hvítt;
text-align: Center;
}

Við köllum H1 og textann við munum setja það í hvítu með lit: hvítt; og við munum stilla það við miðjuna með «text align». Lokaðu alltaf með hornklofum eftir opnun fyrir H1 símtalið.

Hausmynd af Greg rakozy


Innihald greinarinnar fylgir meginreglum okkar um siðareglur ritstjórnar. Til að tilkynna um villu smelltu hér.

3 athugasemdir, láttu þitt eftir

Skildu eftir athugasemd þína

Netfangið þitt verður ekki birt.

*

*

  1. Ábyrgðarmaður gagna: Miguel Ángel Gatón
  2. Tilgangur gagnanna: Control SPAM, umsögn stjórnun.
  3. Lögmæti: Samþykki þitt
  4. Samskipti gagna: Gögnunum verður ekki miðlað til þriðja aðila nema með lagalegri skyldu.
  5. Gagnageymsla: Gagnagrunnur sem Occentus Networks (ESB) hýsir
  6. Réttindi: Hvenær sem er getur þú takmarkað, endurheimt og eytt upplýsingum þínum.

  1.   Cristopher - vefsíða sagði

    Ég er líka mjög áhugasamur um hönnun, góða síðu til að sjá heim hönnunarinnar.

    Bestu kveðjur.

  2.   Jorge sagði

    Halló vinir, hvernig hefurðu það?

    Ég er að búa til mjög einfalda vefsíðu í html og langar að bæta við athugasemdareit við hverja útgáfu. Gætirðu leiðbeint mér hvernig á að gera það?

  3.   emerson sagði

    Við sem þurfum mjög einfalda vefsíðu með þremur hnöppum og mynd, og í öllum tilvikum leikmann, eitthvað slíkt væri mjög gagnlegt.
    Hins vegar trúi ég ekki að með þessum upplýsingum geti ég byggt upp síðuna mína, en að minnsta kosti gefur það þér hugmyndir og hvað þú átt að leita að

bool (satt)