Orrialde ospetsuenetako batzuk informazioz gainkargatuta daude, baina nik kontrakoa nahiago dut: sinpleak.
Bistan denez, talde honen erakusle nagusia Google da bere hasierako orri minimalista, bere ibilbidea hasi zuenetik, baina, argi dago, ez da Interneten gauza soilak mantentzeko konpromisoa hartzen duen bakarra.
Index
- 1 HTML web orrien adibide sinpleak
- 1.1 Kean Richmond
- 1.2 Alice drougard
- 1.3 jonathan ogden
- 1.4 Finch
- 1.5 Diseinu ezberdina
- 1.6 bizkor
- 1.7 Lorategi Diseinu Bertikala
- 1.8 247Gradua
- 1.9 Gozatu hau
- 1.10 Allison hou
- 1.11 pixelot
- 1.12 Lionel eskolarrak
- 1.13 Kaioak dotoreak
- 1.14 Lebensraum
- 1.15 PinkPoint
- 1.16 IWC
- 1.17 Txuleta txikitu
- 1.18 7Pinua
- 1.19 Batuketa
- 1.20 Kapela-kutxa
- 1.21 Kara lyte
- 1.22 Instrinsic Studio Marketina
- 2 Nola sortu webgune sinplea HTML-n
HTML web orrien adibide sinpleak
Kean Richmond
Kean Richmondek elementu gutxirekin jolasteko sinpletasuna ikusarazten digu, baina oso ondo kokatuta dago eman sentsazio bikaina minimalismoari. Bere logoa goiko ezkerrean, Twitter eta harremanetarako ikonoak eskuinean eta erdian, tipografia deigarriarekin, eskainitakoari.
Webera esteka: Keanrich mond
Alice drougard
Alice drougard mantendu erraza zure logotipoa jarrita ere erdian, lau fitxa zure webguneko orri nagusien artean mugitzeko eta egoki jarritako argazki sorta, begirada batean zer egiten duzun eta zer egiten duzun jakiteko.
Webera esteka: Alice drougard
jonathan ogden
Ogden jarraitu jolasten zure izena zein erraza den logotipo gisa, arreta erakarri gabe azpian kokatzen diren sare sozialak eta haien diseinua azkar funtzionatu ahal izateko. Orrialde batean axola duen guztia erakusten du.
Webera esteka: jonathan ogden
Finch
Finch dagoeneko beste leku batzuetara doa tipografiarekin eta horiekin jolasteko egiten duenaren dotorezia eta jakinduria adierazten duten koloreak. Elementu gutxi batzuekin, profesionaltasun guztia uzten du. Zurekin zein orrialde lotu dituzten ere argi uzten du.
Webera esteka: Finch
Diseinu ezberdina
Webgune hau desberdin jokatu. Erabili horma papera goiburuarekin eta bertatik orrialde nagusietara, telefonoa eta sare sozialetarako esteketara joan gaitezke.
Webera esteka: Diseinu ezberdina
bizkor
Kaik bere irudiarekin ilustratzen gaitu triangelu abstraktua eta kolore paleta egokia gertutasuna emateko. Bere biografiaren zati bat tamaina txikiagoko letra tipo batekin ere eskaintzen du, hari buruz gehiago jakin nahi badugu.
Webera esteka: bizkor
Lorategi Diseinu Bertikala
Aurrekoaren antzera, Lorategi Bertikalaren Diseinuak azkar erakusten duen argazki baterantz doa bere lan onenetako bat Osloko aireportuan. Goialdean goiburua «nab barra» edo nabigazio barrarekin eta hizkuntza aldatzeko aukera ere badugu. Logotipoak formatu bertikalean jartzen du orri oso sinpleari azken ukitua emateko.
Webera esteka: Lorategi Diseinu Bertikala
247Gradua
247Gradua jolastu monokromoarekin eta atzeko irudiarekin ia guztiz iluna. Goiburuko letra-tipoa, testua eta goiburua baino txikiagoa, letra larriz idazten da diseinu orokorrean kontraste handia sortzeko.
Webera esteka: 247Gradua
Gozatu hau
a tipografia bikaina benetakoa izatearen seinale izan daiteke eta badakigula zer egiten dugun. Ez duzu ezer gehiago eman behar mezua zuzena bada. Argi dute: aplikazio eta webgune ederrak sortzea maite dute. Proiektuetarako eta ikasketetarako posta beste esteka batean uzten dute.
Webera esteka: Gozatu hau
Allison hou
Allison-ek eramaten gaitu beste ikastaro batzuen aurretik eta irudi gehiago biltzen ditu eta letra mota "femeninoago" hori. Gauza bera gertatzen da zure irudi nagusiarekin eta goiburuarekin. Erosketak egiteko trikimailuak erakusten dituen txartela aurkezteko luxua du.
Webera esteka: Allison hou
pixelot
Pixelot zoro samarra da, baina egilearen sormena ere adierazten du. Erabilera saguaren erakuslea maskara bat sortzeko hori lausotzen da guk daukagun lekuan.
Webera esteka: pixelot
Lionel eskolarrak
Nahi baduzu egin zure curriculuma linean hori baino ez, Lionelek urratsak erakusten dizkizu. Letra tipo egokia, goiko ezkerreko argazkia, zure sare sozialetarako estekak eta zure esperientzia. Dekorazio elementu bakarra kolore desberdineko bi lerro horizontal horiek dira.
Webera esteka: Lionel eskolarrak
Kaioak dotoreak
Itzuliko gara minimalismoaren dotoreziara eta espazio huts handi haiek. Alde batetik goiburua gainontzeko elementuetatik oso urrun dago, eta, bestetik, haien artean ikusizko harmonia handia sortzen duten moduan moldatutako elementuak.
Webera esteka: Kaioak dotoreak
Lebensraum
Adibide guztietan ikus dezakezun moduan, garrantzitsua da goiburuko fitxak orrialde desberdinetara joateko webgunetik. Tipografiak garrantzi handia du, jolastu goiburuarekin eta beste batekin lan bikaina egiten duen sans serifarekin.
Webera esteka: Lebensraum
PinkPoint
Koloreen kontrasteak ikuspegi guztien sare pixka bat konplexuago batera garamatza. Elementu nagusi horiek guztiak ez dira falta oraingoan atzeko irudiko gradienteekin eta irudi nagusirako gradientearen kolore nagusiak dituzten bi atal horiekin jolasteko.
Webera esteka: PinkPoint
IWC
Argazki bikaina ondo aukeratutako letra mota eta "heroi" elementua web honi eman diezaiokezu. Irristailu batekin obraren zati bat nahiko sinplea dela erakusten du.
Webera esteka: IWC
Txuleta txikitu
Ilustrazio digitalak Chop Chop-ekin garamatza haren presentzia bisual guztia jaten duen irudi hori. Goiburuko kolore urdinak sareak proiektatutako irudi osoarekin sintonizatuta dauden balio kromatikoak sortzeko puntua ematen dio.
Webera esteka: Txuleta txikitu
7Pinua
7Pine berdearekin jolasten da etxeko plateraren protagonista bikaina izateko. Gainerakoek osatzen dute berde asko eta goiburu sinplea duen irudia logoak oharkabean pasa nahi du.
Webera esteka: 7Pinua
Batuketa
Batuketak beste norabide batzuetara eramaten gaitu. Jolastu zuri-beltzeko fabularekin, oso sormenezko ilustrazioarekin eta hori gainerako elementuekin eta beste bi ilustrazioekin batera doa paisaia interesgarria baino gehiago sortzeko. Adibide bat gainerakoetatik nabarmentzen den webgunea sortzeko.
Webera esteka: Batuketa
Kapela-kutxa
Urdina da webgune honetako kolorea nagusi. Zuriak guztiz argitutako irudiak eta jokoak nolakoak izango liratekeen ez da falta gune eraikitzaile horretako 3Dan hori mugitzen garen heinean mugitzen da.
Webera esteka: Kapela-kutxa
Kara lyte
Kara joaten da soiltasuna eta minimalismoa bere presentzia natural eta ederrarekin zure argazkian. Gainerakoa goiburuko elementu nagusiak zein diren eta irekitzeko hanburgesa botoiarekin bat datorren testua da.
Webera esteka: Kara lyte
Instrinsic Studio Marketina
Es web errazena baina horrek blog bat egitea zer den erakusten digu. Gorria eta beltza dira oso "blog" gune bateko protagonistak.
Webera esteka: Instrinsic Studio Marketina
Nola sortu webgune sinplea HTML-n
Irakatsiko dizuegu sortu webgune sinplea HTML-n hura osatzen duten elementurik oinarrizkoenak ezagutu ditzazun. Beharrezkoa izango da web ostalari bat edukitzea, non kodea eta CSS-n zenbait aldaketa karga ditzakegun, baina tira, hauek dira gure ibilbidea HTML bidez hasteko printzipioak.
Batzuk ikusita web adibide sinpleak Horrekin nahikoa motibatu dezakezu zure diseinuak egiteko burua asko hautsi gabe. Batzuetan sinpleak gauza konplexuetan konplikatzea baino efektu hobea sortzen du. Ikusiko duzu kasu gehienetan sinpleak oso ondo funtzionatzen duela. Joan zaitez.
Webgune sinplea HTMLn sortzea hasiera batean dirudiena baino errazagoa da. Webgune bat goiburua du, gorputza edo edukia eta orri-oina edo orri-oina elementu nagusi gisa. Horrela sailka ditzakegu:
- Dokumentuak: sortuko ditugun dokumentu guztiak a-rekin egin behar dira . Batekin irekitzen dugu eta beti itxi egiten du
- Gorputza edo gorputza: dokumentuaren zati ikusgaia artean dago Y
- Goiburuak: H1, H2, H3 bidez ezagutzen dira ... a-rekin hasten gara eta batekin ixten dugu . Barruan dagoen testua goiburu gisa agertuko da eta zenbakitzearen arabera tamaina txikiagoan edo handiagoan egingo du.
- Paragrafoak: paragrafoa a barruan sartzen da eta honekin ixten da
- Loturak: adibiderik argiena Link to Creativos Online da
- Irudiak: etiketaren bidez definitzen ditugu . Adibide bat litzateke . Komatxoen arteko irudia deitzen dugu eta alternatiboa erabiltzen dugu SEOrako ezinbestekoa den testu alternatiboarentzat.
- zerrendak: zerrendak honekin definitzen ditugu nahastu eta batera txukun egiteko. Zerrendako elementuak erabiltzen dira . Gogoan izan beti barrarekin ixten.
Elementu hauekin izango ditugu webgune sinple bat sortzeko oinarria hurrengo atalean irakatsiko dizkizugun kopuru onean ikusiko duzun bezala. Demagun egitura semantikoak bere elementu garrantzitsuenekin itxura hau duela:
- Goiburua bere nabigazio barrarekin guneko orrialde desberdinetarako.
- Artikulua edo gorputzaren espazioa bertan blogeko mezu bat sor dezakegu, gure curriculuma edo irudi bat jarri.
- Alboko barra edo alboko barra informazio osagarria jartzeko.
- Oina edo oina, webguneko orrialde garrantzitsuenetara eta sare sozialetako ikonoetara (beti adibide gisa) estekak jarriko ditugu.
Jarraian ikusiko dituzun adibideetan daude dena logotipo sinple baina dotorean oinarrituta, goiburua non guneko orrialde desberdinetarako nabigazioa kokatzen duten, testu edo irudi bat nagusi den espazio zentrala eta aurreko paragrafoan aipatutako elementuekin orri bat.
Hori gomendatzen dugu ez ezazu burua hautsi eta joan errazenera. Garrantzitsuena da arlo horiek gainerakoetatik bereizten direla segundo batzuetako ikusizko pasaldian. Denborarekin gure burua zaildu eta beste espazio batzuetan gehiago lan egiteko gai izango gara.
Hau da, HTML kode baten adibide argia elementu garrantzitsuenekin:
<!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>
HTML kode lerro hauekin izango genituzke orrialdearen izenburua lehenengo goiburuan sortu du, kasu honetan «HTML semantikoa» izenburuarekin itxiko genuke , goiburua eta guk gorputza irekitzeko bidea emango genuke .
A izango genuke lehen goiburua H1-rekin honekin ixteko , eta gure webguneko orrialde desberdinetarako nabigazio barra sortzen lagunduko ligukeen zerrendara joango gara. Zerrenda honekin ixten dugu , itxi egiten dugu eta, azkenik, html dokumentua .
Amaitzeko, ireki beti dokumentuarekin barra osoarekin kode osoaren amaieran ixteko. Dokumentua ireki ondoren, hizkuntzaren erreferentzia erabiltzen da beti, kasu honetan gaztelania da «es» -rekin eta a-rekin .
Garrantzitsua da kodea eta noiznahi begiratzea funtzio bat irekitzen duzu itxi barrarekin dagokionez.
CSS pixka bat
CSS-ra sartzen gara pixka bat, baina bide batez uler dezazun HTML estilizatzeko modua. Demagun CSS eta HTML eskuz esku doazela jarraian aurkituko dituzun webgune erraz horiei.
Alde batetik HTMLren erabilera semantikoa badugu goiburua, gorputza edo gorputza bere artikuluarekin edo irudiarekin eta orri-oinarekin, CSSn «Div» funtzioa erabiliko genuke identifikatzeko espazio horietako bakoitzari gero diseinuan beharrezko aldaketak aplikatzeko.
Bezain erraza:
Estiloak Div-ekin aplika ditzakegun arren, egitura egoki eta perfektu batek lagunduko du beraz, web arakatzaileek gure edukia zertan den "irakurri" dezakete, beraz, oinarrizko egitura hori jarraituz gero, lan eta oinarri bikaina izango dugu.
Un CSS kode adibide sinplea:
h1 {
kolore: zuria;
testua lerrokatu: zentro;
}
H1 eta testuari deitzen diogu zuriz jarriko dugu kolorearekin: zuria; eta erdira lerrokatuko dugu «testu lerrokatzearekin». Itxi beti kortxeteekin H1 deia ireki ondoren.
Goiburuaren argazkia Greg rakozy
3 iruzkin, utzi zurea
Diseinua ere sutsua naiz, diseinuaren mundua ikusteko orrialde ona.
Agur bero bat.
Kaixo lagunok, zer moduz zaude?
Web orrialde oso erraza egiten ari naiz html-ean, eta iruzkinen koadro bat gehitu nahi nuke argitalpen bakoitzari. Gidatuko al zenidake nola egin?
Hiru botoi eta irudi dituen web orrialde oso sinplea behar dugunok, eta edozein kasutan erreproduzitzailea, horrelako zerbait oso erabilgarria izango litzateke.
Hala ere, ez dut uste informazio honekin nire orria eraikitzeko gai naizenik, baina behintzat ideiak eta zer bilatu behar dizkizu ematen