Jednostránkový web - základy

Dobrý den, jsem začátečník v HTML. Pracoval jsem akorát s wysiwyg editory. Naopak trochu více rozumím CSS.

Abych začal, chci vytvořit stránku, kde na pozadí bude černá barva, nahoře bude nadpis, pod nadpisem bude text na dva řádky a budou tam pod tímto textem ještě tři ikony na sociální sítě a následně ještě
tlačítko na klikání, které bude přesměrovávat na webovou stránku. Na těch tlačítkách pro sociální sítě chci mít nastaven barevný přechod tzv. hover a na tom tlačítku taky.

Co mi není jasné, chápu podstatu head a body, mám tam vyplněný title apod. Akorát nevím, jak zapsat ten text. Chápu to tak, že do index.html příjde jen text a následně na něj napojím style.css.
Všiml jsem si že někteří přidávají ty styly už do indexu a žádný další style.css nemají, já bych měl rád text v indexu a styl pouze ve style.css.

Vytvořil jsem proto style.css a přidal do index.html - <link href="style.css" rel="stylesheet">

Dále mi není jasné, jak zapisovat ten text do indexu, jaké tagy zvolit, všude vidím <div a <span. Potřeboval bych vědět hlavně rozdíl mezi tímto, četl jsem to na vaší stránce ale spíše bych potřeboval vidět reálné příklady.

Já vlastně potřebuju jen vytvořit text nějak dát vědět že končím řádek a pak o pár odstavcu dal, dát znova to stejné. A veškeré tyto texty si následně upravit ve stylu, nasměrovat kde je chci apod.
Nevím jak k těm textum jednotlivě přiřadit ty tagy nebo id. Vlastně nevím rozdíl mezi id a class abych ty jednotlivé texty mohl upravovat, tak aby se mi nezměnil veškerý text na stránce ale jen libovolně.
Myslel jsem že bych třeba přidal nějak ty id - odstavec1 odstavec2 ikona-facebook copyright-text apod.

Toto je přesně to co potřebuji - i.imgur.com/bvGrXR8.jpg

No a potřebuji na to nahodit google fonty, to je jedno jaký, upravil bych se to dle sebe pak.


Děkuji moc za pomoc

Díky, koukám ještě na nějaké tutorialy od základu. Jako i když si to přečtu na jpw, tak je to tam popsáno pěkně, ale bez jasných příkladu se to těžko dá pochopit když se vžijete do role začátečníka.

Už jsem pochopil div a když k němu přidám id tak pak stačí v css napsat #nazevid a toto si upravovat. No a teď jsem objevil třeba class, na jpw se píše že to je zastaralá metoda a je to tzv. nápoveda.
Tak se ptám k čemu je vlastně class a proč ho používáte ? Výše jste mi napsali např <div class="popis"> to chápu, proč tam nestačí být jen bez toho class a nebo tam dát id.

Jinak začal jsem používat nejnovější dreamweaver a aspon jsou tam ty nápovedy takže to taky hodně pomůže.
Ty google fonty jsem vyřešil, to bylo jednoduchý, nalinkovat na google fonty a pak přidat jen font-family a ten font ani nevím proč jsem se na to ptal :-)

Díky

Díky Tomášeek, tak už vím jaký je rozdíl mezi div a class, pročetl jsem si to. Stačilo mi to vysvětlení v předchozích diskuzích z tvého odkazu.
Já vím že to nepůdje rychle, ovšem mě pro začátek stačí HTML, CSS s tím pracuji už delší dobu hlavně u custom css na wordpressu nebo když jsem něco manuálně upravoval.
Ale nedovolím si říct že CSS ovládám, ale nejsem v něm uplny začátečník. Naopak začátečník jsem v HTML, ze začátku to jde těžko ale pujde to :-)
Ale počítám že se zase ozvu jak příjde na něco pro mě nepochopitelného.

A ještě mi není jasné posunování textu, když mám jeden odstavec textu a pod ním druhý. Ovšem na oba ty odstavce jsem nastavil odlišené class, protože ten první odstavec je jinak velký apod než ten druhý.
A ten druhý odstavec bych chtěl posunout trochu výš, tzn. pod ten první. To se řeší pomocí position v css ?

A když mám název stránky (jinak řečeno místo loga mám tento text) např. NÁZEV STRÁNKY, a vedle toho Y chci přidat třeba CZ. Chtěl bych aby to bylo nahoře v pravo nad tím Y.
Mám na tohle vytvořit novou třídu, nebo to jde zakombinovat již do te existující třídy s tou třídou kde mám NÁZEV STRÁNKY. Výsledky by měl být takový - NÁZEV STRÁNKY CZ (to CZ bude tedy v pravo nahoře vedle Y).

A pro vložení ikon na sociální sítě doporučujete načíst zvlášt font, nebo to lze nějak dle zkratek a napojit např na font awesome ? Nebo je jednoduší nahodit svg ikony :-)


Dík


-----

tak posunování textu jsem vyřešil

position: relative; bottom: 20px;

funguje to tak jak jsem chtěl, jestli je to správně nevím, ale tímto způsobem zjisti si sám to jde sakra pomalu ah... :-)

Trejpa: Díky podívám se na to,

Ještě pár otázek:

1.
Když třeba přidávám text do zápatí, mám tam nastaven class zapati, ten text mám z části tučný a z části normální. Já se ptám, mám ten text rozdělit do více částí, to znamení více tříd v css, nebo to mám nastylovat přímo v tom html. Dle mého názoru je uplný nesmysl vytvářet více tříd na jednu větu, ale ptám se. Chci vědět jak se tohle řeší. Jestli je vhodné stylovat přimo do html a ještě zvlášť nebo je nejlepší vše házet do stylu.

2.
Snažím se přidat tři ikony na stránku z font-awesome, ikonu pro facebook,instagram,email. Přidal jsem do hlavičky tento odkaz <link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> a do body jsem přidal <i class="fab fa-facebook-f"></i> mno a nic se nezobrazuje, kde může být chyba ?

3.
Vrátím se k tomu pozicování, Tomášeek psal že position nepoužívat. Ovšem do FAQ jsem se díval jak píšeš, o pozicování tam není to co potřebuju.
Jaký je nejběžnější způsob pro vytvoření mezery mezi textem, nebo když chci určitou část textu posunout někam. To mi dělá největší problém. Z 90 procent potřebuji vždy něco někde posunout, přes position to jde ale když píšeš že to není uplně běžný způsob.

Jak poslední věc pak budu řešit tlačítko, našel jsem par stránek kde se dá předem pěkně vygenerovat tak uvidíme.

Jinak jsem to vesměs nějak zplácal a budu pak postupovat dále a dále.

Keeehi:

Díky, jo takto jsem to měl. No a ten fontawesome stále nejde. Zkoušel jsem i zápis pro verzi 5.0.9. fontawesome.com/get-started/web-fonts-with-css
<link rel="stylesheet" href="use.fontawesome.com/releases/v5.0.9/css/all.css"

Zkusím si s tím ještě nějak pohrát, při nejhorším zkusím jiný webfont pro ty ikony

Takže může být to posunování vyřešeno tímto stylem ?

.nazev-webu
{
margin-top: 50px;
margin-right: 50px;
margin-left: 50px;
margin-bottom: 73px;


Vím že některé věci se dají napsat i zkráceně vedle sebe např - 20 20 30 px apod. ale nevím jak to jde postupně co je posunutí nahoru, dolu apod.

Tak já zrovna nejsem ten kdo by někoho dokázal něco učit :-) Ale myslím si že CSS je jednoduší oproti HTML. Většina věcí se používá pořád dokola a velmi málo kdy použiješ něco jiného.
Když si nevím rady tak tady vždy najdu vše ohledně CSS a dalších věcí www.w3schools.com tady je uplně všechno akorát v AJ.

Horší je pak to skládat dohromady s HTML navíc když nevím co správně použít na učité věci.

No díky vašim radám jsem stránku kterou jsem chtěl vytvořit vytvořil, ale největší podíl na tom má i Dreamweaver, pracuje se mi v něm podstatně lépe než v klasickém editoru.

Co se mi nedaří je stále ten font awesome.
Nechápu kde může být u toho fontu chyba.

A ještě bych se chtěl zeptat, jak zapsat aby na celé stránce byl použitý urč. font. Tak abych ke každé třídě v CSS nemusel psát font-family a font.
Vím že to je někde řešeno h1,h2,h3 apod a pak ten font nebo p.

Momentálně bych se chtěl zkusit naučit jak celou stránku převést do responsivní formy.

Hele díky, ten tvuj taky fungoval akorát nevím proč tam máš ten script ? Ale teď jsem zjistil že ten muj byl celou dobu funkční :D
Měl jsem nastavené černé pozadí a ta ikonka je černá a jednoduše to nešlo vidět. :-)

Přitom jsem v tom DW zkoušel přejíždět v tom v tom živém náhledu a žádná známka o te ikoně tak nebyla, tak mě ani nenapadlo měnit pozadí. Moje chyba.

Ano vidím máš pravdu, jak se ty ikonky dají přebarvit ?

Zkouším tohle a nic se neděje.

.fab fa-facebook-f{
color:white;
}

Když jsem to přebarvil tímto způsobem přímo v html tak to šlo ale radši bych to měl zvlášť v style.css
<i class="fab fa-facebook-f" style="color:#FFF;">fab fa-facebook-f</i>



tak už to najednou jde i starým způsobem takže ok.. nevím kde byl zas problém