Niektoré z najslávnejších stránok sú veľmi preplnené informáciami, ale ja uprednostňujem pravý opak: tie jednoduché.
Je zrejmé, že veľkým predstaviteľom tejto skupiny je Google so svojou minimalistickou domovskou stránkou od začiatku svojej cesty, ale zjavne nie je jediný na internete, ktorý sa zaviazal k zjednodušovaniu vecí.
Jednoduché príklady webových stránok vo formáte HTML
Kean richmond
Kean Richmond nás núti vidieť jednoduchosť hry s niekoľkými prvkami, ale s veľmi dobrým umiestnením dať skvelý pocit minimalizmu. Jeho logo vľavo hore, ikony Twitteru a kontaktov vpravo a v strede s pútavou typografiou toho, čomu sa venuje.
Odkaz na web: Keanrich mond
Alice drougard
Alice drougard udržujte to jednoduché aj s umiestneným logom v strede štyri karty na prechádzanie medzi hlavnými stránkami vášho webu a skupina fotografií umiestnených vhodne, aby sme na prvý pohľad vedeli, čo robíte a čo robíte.
Odkaz na web: Alice drougard
jonathan ogden
Ogden hrajte sa s tým, aké jednoduché je vaše meno ako logo, sociálne siete umiestnené tesne pod nimi bez priťahovania pozornosti a ich dizajn funguje tak, aby sme ich mohli rýchlo prejsť. Na jednej stránke zobrazuje všetko, na čom záleží.
Odkaz na web: jonathan ogden
pinka
Finch už chodí na iné miesta, aby sa pohral s typografiou a tak farby, ktoré naznačujú eleganciu a múdrosť toho, čo robí. Iba s niekoľkými prvkami necháva na očiach všetku svoju profesionalitu. Taktiež objasňuje, ktoré stránky na vás odkazovali.
Odkaz na web: pinka
Iný dizajn
Táto webová stránka hrať inak. Použite tapetu s hlavičkou, z ktorej môžeme prejsť na hlavné stránky, váš telefón a odkazy na vaše sociálne siete.
Odkaz na web: Iný dizajn
svižný
Kai nás ilustruje svojou vlastnou postavou s abstraktný trojuholník a vhodná farebná paleta dať blízkosť. Časť svojho životopisu ponúka aj písmom v menšej veľkosti, ak by sme sa o ňom chceli dozvedieť viac.
Odkaz na web: svižný
Vertikálny záhradný dizajn
Rovnako ako predchádzajúci, Vertical Garden Design smeruje k fotografii, ktorá sa zobrazuje rýchlo jedno z jeho najlepších pracovných miest na letisku v Osle. V hornej časti máme hlavičku s «navigačnou lištou» alebo navigačnou lištou a dokonca s možnosťou zmeny jazyka. Logo je umiestnené vo vertikálnom formáte, aby dotváralo veľmi jednoduchú stránku.
Odkaz na web: Vertikálny záhradný dizajn
247Grad
247Grad pohrajte sa s monochromatickým obrázkom a obrázkom na pozadí takmer totálna tma. Písmo hlavičky, menšie ako text a hlavička, je veľké a vytvára veľké kontrasty v celkovom dizajne.
Odkaz na web: 247Grad
Užite si to
Una skvelá typografia môže byť znakom toho, že je autentická a že vieme, čo robíme. Ak je správa priama, nemusíte dávať nič viac. Objasňujú to: radi vytvárajú krásne aplikácie a weby. Poštu pre projekty a ich štúdium nechávajú v inom odkaze.
Odkaz na web: Užite si to
Allison hou
Allison nás berie pred ostatnými kurzami a obsahuje viac obrázkov a ten „ženskejší“ typ písma. To isté platí pre hlavný obrázok a hlavičku. Má luxus predložiť kartu s nákupnými trikmi.
Odkaz na web: Allison hou
pixelot
Pixelot je trochu blázon, ale naznačuje to aj tvorivosť autora. Použite kurzorom myši vytvorte masku ktoré sa stierajú všade, kde to máme umiestnené.
Odkaz na web: pixelot
Lionel scholtes
Ak chcete, aby urobte si životopis online s ničím iným, Lionel vám ukazuje kroky. Vhodné písmo, vaša fotografia v ľavom hornom rohu, odkazy na vaše sociálne siete a vaše skúsenosti. Jediným dekoratívnym prvkom sú tieto dve vodorovné čiary rôznych farieb.
Odkaz na web: Lionel scholtes
Elegantné čajky
Vrátime sa k elegancii minimalizmu a tie veľké prázdne miesta. Na jednej strane je hlavička veľmi vzdialená od zvyšku prvkov a na druhej strane sú tieto prvky tvarované tak, aby medzi sebou vytvorili vynikajúci vizuálny súlad.
Odkaz na web: Elegantné čajky
habitat
Ako vidíte na všetkých príkladoch, je to dôležité karty záhlavia slúžia na prechod na rôzne stránky z webovej stránky. Typografia má veľký význam, hrajte s jednou pre hlavičku a druhou pre text so bez pätkou, ktorá odvádza skvelú prácu.
Odkaz na web: habitat
PinkPoint
Kontrast farieb nás vedie k trochu zložitejšej sieti všetkých pohľadov. Nie všetky tieto hlavné prvky chýbajú hrať tentoraz s prechodmi pre obrázok na pozadí a týmito dvoma časťami, ktoré majú hlavné farby prechodu pre hlavný obrázok.
Odkaz na web: PinkPoint
IWC
Skvelá fotografia s dobre zvolené písmo a prvok „hrdina“ môžete dať tomuto webu. Posuvníkom ukazuje, že časť práce je svojou koncepciou celkom jednoduchá.
Odkaz na web: IWC
Chop Chop
Digitálna ilustrácia nás privádza k Chop Chop s ten obraz, ktorý pohltí všetku jeho vizuálnu prítomnosť. Modrá farba v hlavičke dáva zmysel vytvárať chromatické hodnoty v súlade s celým obrazom premietaným webom.
Odkaz na web: Chop Chop
7Borovica
7Pine hrá so zelenou ako veľký protagonista domácej tabuľky. Zvyšok to skladá obrázok s množstvom zelenej farby a jednoduchou hlavičkou ktorý si chce nechať logo nevšimnúť.
Odkaz na web: 7Borovica
Sum
Sum nás vedie inými smermi. Pohrajte sa s legendárnou čiernobielou, veľmi kreatívnou ilustráciou a to ide ruka v ruke so zvyškom prvkov a dvoma ďalšími ilustráciami, ktoré vytvárajú viac ako zaujímavú krajinu. Príklad na vytvorenie webovej stránky, ktorá vyčnieva z radu.
Odkaz na web: Sum
Box na klobúky
Modrá je prevládajúcou farbou na tomto webe, kde nechýbajú obrázky plne osvetlené bielou farbou a to, ako by hra vyzerala v 3D daného nástroja na tvorbu webových stránok že sa hýbe, ako sa hýbeme.
Odkaz na web: Box na klobúky
Kara lyte
Kara ide do jednoduchosť a minimalizmus s jeho prirodzenou a krásnou prítomnosťou na vašej fotografii. Zvyšok je text, ktorý prichádza spolu s hlavnými prvkami hlavičky a tlačidlom hamburger na jej otvorenie.
Odkaz na web: Kara lyte
Marketing Instrinsic Studio
Es najjednoduchšieho webu ale to nám ukazuje, čo to je, robiť si blog. Červená a čierna sú protagonisti veľmi „blogovej“ stránky.
Odkaz na web: Marketing Instrinsic Studio
Ako vytvoriť jednoduchý web v HTML
Budeme vás učiť vytvoriť jednoduchý web v HTML aby ste poznali najzákladnejšie prvky, ktoré ju tvoria. Bude potrebné mať web hostiteľa, kde budeme môcť načítať kód a niektoré vylepšenia v CSS, ale no tak, toto sú princípy, ktoré nám umožňujú začať našu cestu v HTML.
Keď som nejaké videl jednoduché príklady z webu Pomocou ktorých sa môžete dostatočne motivovať k vytváraniu vlastných návrhov bez toho, aby ste si poriadne lámali hlavu. Niekedy jednoduchý spôsobí lepší efekt, ako nás komplikuje v zložitých veciach. Uvidíte, že vo väčšine prípadov jednoduchý funguje veľmi dobre. Ísť na to.
Vytvorenie jednoduchej webovej stránky v HTML je jednoduchšie, ako sa spočiatku môže zdať. Webová stránka sa skladá z hlavičky, tela alebo obsah a päta alebo päta ako hlavné prvky. Môžeme ich klasifikovať takto:
- Dokumenty: všetky dokumenty, ktoré vytvoríme, musia byť vyhotovené s . Otvárame s a vždy sa zatvára s
- Telo alebo telo: viditeľná časť dokumentu je medzi Y.
- Hlavičky: sú známe pod H1, H2, H3 ... Začíname s a a uzavrieme s . Text, ktorý je vo vnútri, sa zobrazí ako hlavička a v závislosti od jeho číslovania to urobí v menšej alebo väčšej veľkosti.
- Odseky: odsek je vložený do a a zatvára sa
- Odkazy: najjasnejší príklad jecreativosonline.org/»> Odkaz na Creativos Online
- Obraznosť: definujeme ich štítkom . Príklad by mohol byť . Vyvoláme obraz medzi úvodzovkami a pre alternatívny text nevyhnutný pre SEO použijeme alt.
- Zoznamy: zoznamy definujeme pomocou za chaotický a s pre úhľadnosť. Položky zoznamu sa používajú s . Vždy ich nezabudnite zavrieť pomocou lišty.
S týmito prvkami budeme mať základ pre vytvorenie jednoduchej webovej stránky ako uvidíte z ich veľkého množstva, ktoré vás naučíme v nasledujúcej časti. Povedzme, že sémantická štruktúra s najdôležitejšími prvkami vyzerá takto:
- Hlavička s navigačnou lištou pre rôzne stránky webu.
- Článok alebo priestor tela do ktorého môžeme vytvoriť blogový záznam, vložiť naše učebné osnovy alebo obrázok.
- Bočný panel alebo bočný panel uviesť ďalšie informácie.
- Päta alebo noha, kde umiestnime odkazy na najdôležitejšie stránky webu ako aj ikony sociálnych sietí (vždy ako príklad).
V príkladoch, ktoré uvidíte nižšie, sú všetko založené na jednoduchom, ale elegantnom logu, hlavička, kam umiestňujú navigáciu na rôzne stránky webu, centrálny priestor, v ktorom dominuje text alebo obrázok, a päta s prvkami uvedenými v predchádzajúcom odseku.
Odporúčame to nelámte si hlavu a choďte na jednoduché. Hlavná vec je, že tieto oblasti sú od ostatných odlíšené vo vizuálnom priebehu niekoľkých sekúnd. Časom sa budeme môcť skomplikovať a pracovať v ďalších priestoroch.
To je jasný príklad kódu HTML s najdôležitejšími prvkami:
<!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>
S týmito riadkami HTML kódu by sme mali najskôr vytvoril nadpis stránky v hlavičke pomocou, v tomto prípade «Semantic HTML», by sme obidva názvy zavreli pomocou , hlavička s a dali by sme priestor otvoriť telo pomocou .
Mali by sme prvá hlavička v H1 s uzavrieť to „Prejdeme na zoznam, ktorý nám pomôže vytvoriť navigačný panel pre rôzne stránky nášho webu. Zoznam uzatvárame pomocou , zatvárame a nakoniec html dokument s .
Do konca, vždy otvoriť dokument s zavriete ho na konci celého kódu lomítkom. Po otvorení dokumentu sa vždy použije odkaz na jazyk, ktorým je v tomto prípade španielčina s výrazmi „es“ a s .
Je dôležité, aby ste si pozorne a vždy prečítali kódex otvoríte funkciu a zatvoríte ju pomocou pruhu zodpovedajúcim spôsobom.
Trochu CSS
Trochu zachádzame do CSS, ale mimochodom, aby ste pochopili ako upravovať HTML. Povedzme, že CSS a HTML idú ruka v ruke s poskytovaním tých jednoduchých webových stránok, ktoré nájdete nižšie.
Ak na jednej strane máme sémantické použitie HTML pre to, čo je hlavička alebo hlavička, telo alebo telo s jeho článkom alebo obrázkom a päta, v CSS by sme na identifikáciu použili funkciu «Div» do každého z týchto priestorov, aby bolo možné neskôr uplatniť potrebné zmeny v dizajne.
Niečo také jednoduché ako:
Aj keď môžeme štýly použiť s Div, pomôže vhodná a dokonalá štruktúra aby mohli webové prehľadávače perfektne „čítať“, o čom je náš obsah, takže ak sa budeme riadiť touto základnou štruktúrou, budeme mať najskôr skvelú prácu a základňu.
Un jednoduchý príklad kódu CSS:
h1 {
farba: biely;
text-align: centrum;
}
Voláme H1 a text dáme do bielej farby: biela; a zarovnáme ho do stredu pomocou «zarovnania textu». Po otvorení hovoru H1 vždy zatvorte hranaté zátvorky.
Fotka hlavičky používateľa Greg rakozy
Som naozaj vášnivý aj pre dizajn, dobrú stránku prezerania sveta dizajnu.
S Pozdravom.
Ahojte priatelia, ako ste na tom vy?
Tvorím veľmi jednoduchú webovú stránku v html a ku každej publikácii by som chcel pridať pole pre komentár. Mohli by ste mi poradiť, ako na to?
Tí z nás, ktorí potrebujú veľmi jednoduchú webovú stránku s tromi tlačidlami a obrázkom, a v každom prípade prehrávač, by niečo také bolo veľmi užitočné.
Neverím však, že s týmito informáciami dokážem vytvoriť svoju stránku, ale aspoň vám poskytne nápady a čo hľadať