Možnosti vložení vlastního HTML, CSS a JavaScript kódu u služby F-Page

Drobné úpravy v kódu u služby F-Page jsou možné, ale ke zdrojovému HTML kódu není přístup možný. Možnosti editace jsou popsány níže.

Vlastní kód můžete přidat do těla nebo do hlavičky stránky. Cesta jak se k tomuto nastavení můžete dostat je: Home page -> Skripty stránky :


Scripty lze použít třeba k vložení reklamního "banneru".




Vkládání standardních scriptů a stylů do sekcí "head" a "body"

1. Facebook Pixel

Krátká definice: Jedná se o kus kódu pro web, který vám umožní měřit, optimalizovat a sestavovat okruhy uživatelů pro reklamní kampaně.
Přidání: Nápověda na vytvoření a vložení se nachází přímo na stránkách Facebooku. Uživatel musí vlastnit účet.
URL: https://www.facebook.com/business/help/952192354843755
Alternativa: Vyhledávač (Google, Bing, Seznam) - přidání Facebook Pixelu na web.



2. Google Tag manage / Google Analytics

Krátká definice: Umožňuje vlastníkům webových stránek získávat statistická data o uživatelích svého webu.
Přidání: Nápověda na vytvoření a vložení se nachází přímo na stránkách Google. Uživatel musí vlastnit účet.
URL: https://support.google.com/analytics/answer/1009694?hl=cs
Alternativa: Vyhledávač (Google, Bing, Seznam) - přidání Google Analytics na web.



3. Vlastní script

Krátká definice: Standardní vkládání externího scriptu / JS z jakékoliv URL - "path" slouží k nahrazení URL.
Doplňující informace: https://www.w3schools.com/tags/att_script_src.asp 



4. Vlastní styl

Krátká definice: Standardní vkládání externího stylu /CSS z jakékoliv URL - "path" slouží k nahrazení URL.
Doplňující informace: https://www.w3schools.com/tags/tag_link.asp 



5. a 6. BOOTSTRAP 4 a 5

Krátká definice: Sada nástrojů CSS stylů pro tvorbu webu a webových aplikací.
Přidání: Stránky vývoje zobrazují jak příklady jednotlivých pravidel, tak samotné nasazení na web.
Dokumentace: https://getbootstrap.com/docs/4.0/getting-started/introduction/
Dokumentace: https://getbootstrap.com/docs/5.0/getting-started/introduction/ 



7. JQUERY 3.6.0

Krátká definice: jQuery je JavaScript knihovna, která umožňuje webovým vývojářům přidávat na jejich webové stránky další funkce.
Přidání: Stránky vývoje zobrazují jak příklady jednotlivých pravidel, tak samotné nasazení na web.
Dokumentace: https://api.jquery.com/ 



8. Příklad použití CSS

Vysvětlení: Jde o přímo vkládané vlastní CSS mezi tagy <style>...</style>, kdy si uživatel může různě upravovat jednotlivé prvky na webu.
Vhodná URL pro začátečníky: https://www.w3schools.com/css/ 



9. Příklad použití JS / JavaScript

Vysvětlení: Jde o přímé vkládání vlastního scriptu mezi tagy <script>...</script>, kdy si uživatel může různě přidávat nějaké základní i složitější funkce na web.
Výborná URL pro začátečníky: https://www.w3schools.com/js/ 



Body 1-9 lze vkládat primárně do částí HEAD a BODY scripts.
 
10. Příklad vložení vlastního HTML kódu a následné zobrazení

Zde si můžeme ukázat vložení a následné zobrazení kódu pro vytvoření sloupců. Dole je vložení kódu do "Embed widget" a v posledním obrázku je jeho následné vyobrazení.

K "Embed widget" se lze dostat skrze Přidat obsah -> Přidat widget -> Videa a zvuky -> Vložit.
Přetáhneme "Vložit" (dále jako Embed widget) na libovolné místo na stránce, kde chceme, aby byl zobrazen výsledek.

Do tohoto obsahu lze vkládat scripty a styly jako v předchozích bodech. Víceméně jde o vše a například pravidla pro Bootstrap 4,5 nebo jQuery 3.6.0 jsou standardně dostupná na stránkách vývojářů, kde lze vidět použití a nastavení: