« 1 2 »
Autor Zpráva
petr90
Profil
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
Tomáš123
Profil
petr90:
Značky <div> a <span> sú obe sémanticky neutrálne, teda nenesú pre vyhľadávače žiadnu pridanú hodnotu. Rozdiel medzi nimi je v tom, že značka <div> vytvorí blokový prvok, zatiaľ čo zo značky <span> vznikne prvok riadkový.

Identifikátor:
• v rámci jednej stránky by mal byť unikátny
• dá sa naň odkazovať pomocou kotvy
• v CSS má väčšiu prioritu ako trieda
• často sa využíva aj v JavaScripte
Trieda:
• na stránke sa môže vyskytovať viackrát
• v CSS má väčšiu prioritu ako značka

Na to čo kedy používať sú rôzne názory. Niekto je za to, že identifikátory by mali byť vyhradené pre JavaScript a v CSS by nemali vôbec figurovať. Ja osobne používam identifikátory pri významných blokoch stránky (navigácia, obsah, postranný panel, pätička).

Myslel jsem že bych třeba přidal nějak ty id - odstavec1 odstavec2 ikona-facebook copyright-text
Takto určite nie.
Názov, či už triedy alebo identifikátora, by mal vyjadrovať čo je obsiahnuté vo vnútri daného prvku. Keď ti napadne niečo ako odstavec1 a odstavec2, spravidla existuje výstižnejší názov.
<h1>Nadpis</h1>
<div class="popis">
  <p>Obsah odstavca 1...
  <p>Obsah odstavca 2...
</div>
<ul class="socialne-siete">
  <li><a href="#"><img src="..." alt="Facebook"></a>
  <li><a href="#"><img src="..." alt="Instagram"></a>
</ul>
Tomášeek
Profil
petr90:
<div a <span. Potřeboval bych vědět hlavně rozdíl mezi tímto
Co konkrétně jsi z JPW nepochopil?

jaké tagy zvolit
Takové, které jsou pro danou situaci sémanticky vhodné. Na JPW je celý jejich seznam.

No a potřebuji na to nahodit google fonty
A s Google fonty je problém kde, kromě toho, že neumím, nikdy jsem nedělal?

Tyhle základy jsou popsané na mnoha místech, chce to jen chtít.
petr90
Profil
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
Tomášeek
Profil
petr90:
ale bez jasných příkladu se to těžko dá pochopit když se vžijete do role začátečníka.
Ty příklady si musíš vyzkoušet (= napsat si v praxi, co se píše v teorii na JPW a sledovat, co se děje).

HTML má navíc narozdíl od serverových jazyků v době učení obrovskou výhodu - je veřejné. Na jakékoliv stránce si můžeš HTML kód zobrazit, projít vývojářskými nástroji. Nauč se pracovat s nimi, hodně ti pomohou. Upozorním, že kód JPW ani DJPW není zkoumáníhodný, je otřesný.

No a teď jsem objevil třeba class, na jpw se píše že to je zastaralá metoda a je to tzv. nápoveda.
Eh? Kde se to píše? Nic takového tam nevidím. Rozdíl mezi třídou a ID se řešil tady už před 10 lety.

proč tam nestačí být jen bez toho class a nebo tam dát id.
Bez třídy/ID bys nebyl schopný daný DIV zaměřit ve stylech*. ID by tam být mohl, pokud bys tyto styly podobné tomuto nechtěl mít na stránce jinde.

Ty google fonty jsem vyřešil, to bylo jednoduchý
Zbytek je podobně jednoduchý.

Ještě k tomu, jaký tag kdy použít, ti pomůže i tento prastarý, ale pořád platný návod.


PS. upozorním, že za den, noc, týden ani měsíc se z tebe dobrý kodér nestane. Uč se, na HTML/CSS jsou materiálů mraky. Není nutné s každým drobným nezdarem po hodinovém přemýšlení diskutovat o "problému".


* Dalo by se, ale pro začátečníka raději píšu, že ne.
petr90
Profil
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... :-)
Tomášeek
Profil
petr90:
Na to, ze existuje "position" zapomen. Je to spatny přístup a nepoužil jsi ji správně.

Řešilo se tu milionkrát, ze position nepoužívat, je to myslím i ve faq.
Trejpa
Profil
petr90:
Kdysi jsem udělal příklad stránky, zobraz si komentovaný zdrojový kód. Když děláš čistě jednostránkový web, je zbytečně zpomalující dávat styly externě.

Základem je rozvrhnout si stránku na bloky, chceš-li, obdélníky. Vnějšímu nastavit nějakou šířku, klidně i proměnlivou, a ostatní v něm zanořené nechat přirozeně plynout za/pod sebou. Těm třeba nastavit okraje, aby měly mezi sebou místo.
petr90
Profil
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.
T-fon
Profil
Ten zápis fontu je z verze 5 myslim a ty používáš 4.7, takže asi takhle
Keeehi
Profil
1) Na ty tučné části použiješ tah <em>. Defaultní vzhled v prohlížečích je, že jeho obsah je tučný.

2) Podle dokumentace ten zápis funguje až od verze 5.0. Stačí nalinkovat správnou verzi FA.

3) margin nebo padding. Záleží jestli chceš tu mezeru vytvořit vně nebo uvnitř elementu.
Trejpa
Profil
Keeehi:
Jen tučný je <b>, důležitý a také tučný je <strong>. <Em> je důležitý kurzívou, ale pochopitelně může být přestylován do tučna.

petr90:
<div id=zapati><b>tučné</b> ostatní </div>
Keeehi
Profil
Trejpa:
jj, drobná chybka, mělo tam být strong
petr90
Profil
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
petr90
Profil
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.
Trejpa
Profil
petr90:
Zápis stran
Surikata
Profil *
petr90:
Jestli bys chcel, mohol by som ta ucit HTML a treba aj JavaScript... Ja zas naopak viem horšie CSS


Inak neznáte nejakú dobrú českú stránku s CSS tutoriálmi?
petr90
Profil
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.
Kcko
Profil
>>CSS je jednoduší oproti HTML.

Tak to fakt není ;-), je to dáno tvým velmi střídmým pohledem na danou problematiku pramenící z tvojí neznalosti a nezkušenosti.
Surikata
Profil *
popravde HTML môže byť aj extrémne zložitý, rovnako aj CSS,... viete že len pomocou čistého CSS (a trocha HTML pre zobrazenie) dokážete vytvoriť kalkulačku rátajúcu mocniny?


ale to HTML a to CSS ktoré sa nachádza v 99.9999999% webstránkach je primitívne jednoduché.


akurát ja CSS neviem, ale nie z dôvodu že by bolo ťažké, ale z toho že sa oň nezaujímam a nerobím s ním (iba pár drobností)... sotva dokážem vytvoriť layout.
petr90
Profil
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.
Keeehi
Profil
petr90:
A ještě bych se chtěl zeptat, jak zapsat aby na celé stránce byl použitý urč. font.
Nastav font-family pro body a všichni jeho potomci ho automaticky zdědí.
T-fon
Profil
Ten font awesome máš špatně nalinkovanej, má to být takto
Bubák
Profil
petr90:
psát font-family a font.
Tomu nerozumím, pokud budu deklarovat font-family a pak font, tak deklarace font přepíše font-family. Podobně nedává smysl ani opačné pořadí.
petr90
Profil
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.
Surikata
Profil *
petr90:
ten script je tam nutný, protože v ňom sú práve definície fontu...
T-fon
Profil
petr90:
Hele díky, ten tvuj taky fungoval akorát nevím proč tam máš ten script ?
fontawesome.com/get-started/svg-with-js
Ono je několik možností, jak to nalinkovat, vzal jsem hned tu první.
petr90
Profil
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
Taurus
Profil
class="fab fa-facebook-f" v HTML je .fab.fa-facebook-f {} v CSS.
Trejpa
Profil
petr90:
nevím kde byl zas problém
V tom, že neznáš základy CSS.

Definice .fab fa-facebook-f{color:white;} hledá značku <fa-facebook-f> v další značce s třídou fab. Třída nemůže mít v názvu mezeru. Mezerou se odděluje více tříd v jedné značce. Stačí použít jednu z nich, například .fa-facebook-f{color:white;}, případně nutnosti obě, viz Taurus [#29].
« 1 2 »

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: