30 Ongelooflike eenvoudige webbladsye | Kreatiewe aanlyn
30 Ongelooflike eenvoudige webbladsye
Manuel Ramirez | | algemene, inspirasie
Sommige van die bekendste bladsye is baie oorlaai met inligting, maar ek verkies die teenoorgestelde: die eenvoudige.
Dit is duidelik dat die grootste eksponent van hierdie groep Google is met sy minimalistiese tuisblad sedert sy reis begin het, Maar dit is duidelik dat dit nie die enigste op die internet is wat daartoe verbind is om dinge eenvoudig te hou nie.
1 Eenvoudige HTML-webbladvoorbeelde
1.5 'N Ander ontwerp
1.7 Vertikale tuinontwerp
1.8 247 grade
1.9 Geniet dit
1.13 Elegante seemeeue
1.17 Kap kap
1.18 7 Pynappel
1.19 Die som
1.22 Instrinsic Studio Bemarking
2 Hoe om 'n eenvoudige webwerf in HTML te skep
2.1 'N Bietjie CSS
Kean Richmond laat ons die eenvoud sien om met min elemente te speel, maar baie goed geplaas om gee 'n wonderlike gevoel aan minimalisme. Sy logo links bo, die Twitter- en kontakikone regs en in die middel, met 'n opvallende tipografie, aan wat hy toegewy het.
Skakel na die web: Keanrich mond
Alice drougard hou dit eenvoudig ook met u logo geplaas in die middel, vier oortjies om tussen die hoofbladsye van u webwerf te beweeg en 'n reeks foto's gepas geplaas sodat ons in 'n oogopslag weet wat u doen en wat u doen.
Skakel na die web: Alice drougard
Ogden hou aan om te speel met hoe eenvoudig u naam as 'n logo is, die sosiale netwerke wat net onder geleë is sonder om aandag te trek, en die ontwerp daarvan werk sodat ons vinnig daardeur kan gaan. Op een bladsy word alles getoon wat saak maak.
Skakel na die web: Jonathan Ogden
Finch gaan al na ander plekke om met tipografie en dié te speel kleure wat elegansie en wysheid aandui van wat dit doen. Met net 'n paar elemente laat hy al sy professionaliteit in die oog. Dit maak dit ook duidelik watter bladsye aan u gekoppel is.
Skakel na die web: Finch
'N Ander ontwerp
Hierdie webwerf anders speel. Gebruik 'n muurpapier met 'n opskrif waarvandaan ons na die hoofbladsye, u telefoon en die skakels na u sosiale netwerke kan gaan.
Skakel na die web: 'N Ander ontwerp
Kai illustreer ons met sy eie figuur met 'n abstrakte driehoek en 'n geskikte kleurpalet om nabyheid te gee. Hy bied ook 'n gedeelte van sy biografie aan met 'n lettertipe in 'n kleiner grootte as ons meer van hom wil weet.
Skakel na die web: Brizk
Soos die vorige, gaan Vertikale Tuinontwerp na 'n foto wat vinnig vertoon een van sy beste werk op die lughawe in Oslo. Aan die bokant het ons die kop met die «nav-balk» of navigasiebalk en selfs die moontlikheid om die taal te verander. Die logo plaas dit in vertikale formaat om 'n baie eenvoudige bladsy die finale aanslag te gee.
Skakel na die web: Vertikale tuinontwerp
247 grade speel met monochroom en 'n agtergrondbeeld amper heeltemal donker. Die kopskrif, kleiner as die teks en kop, is hoofletters om 'n groot kontras in die algehele ontwerp te skep.
Skakel na die web: 247 grade
'n goeie tipografie kan die teken wees van outentiek wees en dat ons weet wat ons doen. U hoef niks meer te gee as die boodskap direk is nie. Hulle stel dit baie duidelik: hulle hou daarvan om pragtige programme en webwerwe te skep. Hulle laat die pos vir projekte en hul studie in 'n ander skakel.
Skakel na die web: Geniet dit
Allison neem ons voor ander kursusse en bevat meer beelde en daardie meer "vroulike" lettertipe. Dieselfde geld vir u hoofbeeld en die kop. Hy het die luukse om 'n kaartjie met winkeltoertjies aan te bied.
Skakel na die web: Allison hou
Pixelot is 'n bietjie mal, maar dit dui ook op die kreatiwiteit van die skrywer. Gebruik die muiswyser om 'n masker te skep wat vervaag oral waar ons dit sit.
Skakel na die web: Pixelot
As jy wil maak u CV aanlyn met niks meer as dit nie, Lionel wys jou die stappe. 'N Geskikte lettertipe, u foto links bo, skakels na u sosiale netwerke en u ervaring. Die enigste dekoratiewe element is die twee horisontale lyne van verskillende kleure.
Skakel na die web: Lionel scholtes
Ons kom terug tot die elegansie van minimalisme en daardie groot leë spasies. Enersyds is die kopstuk baie ver van die res van die elemente af, en andersyds is die elemente so gevorm dat dit 'n groot visuele harmonie tussen hulle skep.
Skakel na die web: Elegante seemeeue
Soos u in al die voorbeelde kan sien, is dit belangrik die koppe-oortjies om na die verskillende bladsye te gaan vanaf die webwerf. Die tipografie is van groot belang, speel met een vir die koptekst en 'n ander vir die teks met 'n sans serif wat goeie werk lewer.
Skakel na die web: habitat
Die kontras van kleure lei ons na 'n effens meer komplekse web van al die aansigte. Nie al die hoofelemente ontbreek nie om hierdie keer te speel met die gradiënte vir die agtergrond en die twee afdelings wat die hoofkleure van die gradiënt van die hoofbeeld het.
Skakel na die web: PinkPoint
'N Goeie foto met 'n goed gekose lettertipe en 'n 'held'-element kan u aan hierdie web gee. Met 'n skuifbalk wys dit dat 'n deel van die werk redelik eenvoudig is in sy konsepsie.
Skakel na die web: IWC
Die digitale illustrasie bring ons by Chop Chop met daardie beeld wat al die visuele teenwoordigheid daarvan opvreet. Die blou kleur in die opskrif gee die punt om chromatiese waardes te skep in ooreenstemming met die hele beeld wat deur die web geprojekteer word.
Skakel na die web: Kap kap
7Pine speel met die setperk om die groot protagonis van die tuisbord te wees. Die res stel dit saam 'n beeld met baie groen en 'n eenvoudige kop wat deur die logo ongesiens wil bly.
Skakel na die web: 7 Pynappel
Die som neem ons wel in ander rigtings. Speel met spoggerige swart en wit, 'n baie kreatiewe illustrasie en dit gaan saam met die res van die elemente en twee ander illustrasies om 'n meer as interessante landskap te skep. 'N Voorbeeld om 'n webwerf te skep wat van die res uitstaan.
Skakel na die web: Die som
Blou is die oorheersende kleur op hierdie webwerf waarin daar geen beelde ontbreek wat volledig deur wit verlig is nie en hoe die spel sou lyk in 3D van die werfbouer dit beweeg soos ons beweeg.
Skakel na die web: Hoededoos
Kara gaan na eenvoud en minimalisme met sy natuurlike en pragtige teenwoordigheid op u foto. Die res is 'n teks wat saam met die hoofelemente vir die koptekst verskyn en 'n hamburgerknoppie om dit oop te maak.
Skakel na die web: Kara lyte
Instrinsic Studio Bemarking
Es van die eenvoudigste web maar dit wys ons wat dit is om 'n blog te maak. Rooi en swart is die sterre van 'n baie "blog" webwerf.
Skakel na die web: Instrinsic Studio Bemarking
Hoe om 'n eenvoudige webwerf in HTML te skep
Ons gaan u leer skep 'n eenvoudige webwerf in HTML sodat u die basiese elemente ken wat dit saamstel. Dit sal nodig wees om 'n webhost te hê waar ons die kode en 'n paar aanpassings in CSS kan laai, maar nou, dit is die beginsels om ons reis in HTML te begin.
Nadat ek gesien het eenvoudige webvoorbeelde Waarmee jy jouself genoeg kan motiveer om jou eie ontwerpe te maak sonder om jou kop baie te breek. Soms skep die eenvoudige 'n beter effek as om ons in ingewikkelde dinge te bemoeilik. U sal sien dat die eenvoud in die meeste gevalle baie goed werk. Gaan vir dit.
Om 'n eenvoudige webwerf in HTML te skep, is makliker as wat dit aanvanklik lyk. 'N webwerf bestaan ​​uit 'n kop, die liggaam of inhoud en die voet- of voetskrif as hoofelemente. Ons kan hulle so klassifiseer:
dokumente: al die dokumente wat ons gaan skep, moet met a gedoen word . Ons open met 'n en sluit altyd met 'n
Die liggaam of liggaam: die sigbare deel van die dokument is tussen Y
Opskrifte: hulle word geken aan die H1, H2, H3 ... Ons begin met 'n en ons sluit met 'n . Die teks wat binne is, sal as 'n koptekst verskyn, en afhangend van die nommering, sal dit in 'n kleiner of groter grootte gedoen word.
Paragrawe: die paragraaf is opgesluit in a en sluit met
Enlaces: die duidelikste voorbeeld is 'n skakel na Creativos Online
Imagery: ons definieer dit aan die hand van die etiket . 'N Voorbeeld sou wees . Ons roep die beeld op tussen die aanhalingstekens en gebruik 'n alt vir die alternatiewe teks wat vir SEO noodsaaklik is.
Lyste: ons definieer die lyste met vir 'n morsige en met vir 'n netjiese. Lysitems word saam met . Onthou om dit altyd met die staaf toe te maak.
Met hierdie elemente sal ons hê die basis vir die skep van 'n eenvoudige webwerf soos u sal sien in die goeie hoeveelheid wat ons u in die volgende afdeling sal leer. Gestel die semantiese struktuur met sy belangrikste elemente lyk soos volg:
Opskrif met sy navigasiebalk vir die verskillende bladsye op die webwerf.
Die artikel of liggaamsruimte waarin ons 'n bloginskrywing kan maak, ons kurrikulum of 'n beeld kan plaas.
Die sybalk of sybalk om addisionele inligting te plaas.
Die voetskrif of voet, waar ons skakels na die belangrikste bladsye van die webwerf sowel as die ikone van sosiale netwerke sal plaas (altyd as voorbeeld).
In die voorbeelde wat u hieronder sal sien, is alles gebaseer op 'n eenvoudige, maar elegante logo, 'n koptekst waar hulle die navigasie na die verskillende bladsye van die werf plaas, 'n sentrale ruimte wat oorheers word deur 'n teks of 'n afbeelding en 'n voetskrif met die elemente wat in die vorige paragraaf genoem word.
Ons beveel dit aan moenie jou kop breek nie en gaan na die eenvoudige. Die belangrikste is dat hierdie gebiede in 'n visuele verloop van sekondes van die res onderskei word. Met verloop van tyd sal ons onsself kan bemoeilik en meer aan ander ruimtes kan werk.
Dit is 'n duidelike voorbeeld van 'n HTML-kode met die belangrikste elemente:
Met hierdie reëls van HTML-kode sou ons hê het eers die bladsytitel met die, in hierdie geval «Semantiese HTML», sou ons albei die titel met sluit , die kop met en ons sou plek maak om die liggaam mee oop te maak .
Ons sou 'n eerste kop in H1 met om dit mee toe te maak , en ons gaan na 'n lys wat ons sal help om die navigasiebalk vir die verskillende bladsye op ons webwerf te skep. Ons sluit die lys af met , maak ons ​​toe en uiteindelik die html-dokument met .
Om te eindig, open altyd 'n dokument met om dit aan die einde van die hele kode met die skuinsstreep toe te maak. Na die opening van die dokument word die verwysing na die taal altyd gebruik, wat in hierdie geval Spaans is met "es" en met a .
Dit is belangrik dat u die kode en wanneer ook al noukeurig ondersoek jy 'n funksie oopmaak, maak dit toe met die balk correspondiente.
'N Bietjie CSS
Ons gaan 'n bietjie in die CSS, maar terloops sodat u dit verstaan hoe om HTML te styl. Gestel CSS en HTML gaan hand aan hand om die eenvoudige webwerwe te gee wat u hieronder sal vind.
As ons enersyds die semantiese gebruik van HTML vir die kop, die liggaam of die liggaam met sy artikel of afbeelding en die voetskrif gebruik, in CSS sou ons die «Div» -funksie gebruik om te identifiseer op elkeen van hierdie ruimtes om later die nodige veranderinge in die ontwerp toe te pas.
Iets so eenvoudig soos:
Alhoewel ons die style met Div kan toepas, 'n geskikte en perfekte struktuur sal help sodat webkruipers perfek kan "lees" waaroor ons inhoud gaan, so as ons die basiese struktuur volg, sal ons eers 'n uitstekende werk hê.
Un eenvoudige CSS-kode voorbeeld:
Ons noem H1 en die teks ons sal dit in wit sit met kleur: wit; en ons sal dit met die middel in lyn bring met «teksbelyning». Sluit altyd met hakies na die opening van die H1-oproep.
Opskriffoto van Greg rakozy
Volledige pad na artikel: Aanlyn kreatiewe » algemene » inspirasie » 30 Ongelooflike eenvoudige webbladsye
Cristopher - webwerf dijo
Ek is regtig ook passievol oor ontwerp, 'n goeie bladsy om die wêreld van ontwerp te sien.
Antwoord op Cristopher - webblad
Hallo vriende, hoe gaan dit met jou?
Ek maak 'n baie eenvoudige webblad in html, en ek wil 'n opmerkingsblokkie by elke publikasie voeg. Kan u my lei hoe om dit te doen?
Diegene onder ons wat 'n baie eenvoudige webblad met drie knoppies en 'n prentjie en in elk geval 'n speler nodig het, sal so iets nuttigs wees.
Ek glo egter nie dat ek my bladsy kan opbou nie, maar dit gee u ten minste idees en waarna u moet kyk.