Edytując strony w html-u można zrobić więcej i dokładniej. Dlatego warto znać podstawy html. Poniżej zamieszczam przykłady często używanych augmentów kodu, przydatnych dla początkujących osób przy edycji treści na stronach.
Link nofollow, Target blank
Podstawowy element używany przy tworzeniu linków zewnętrznych.
nofollow
Ten atrybut jest używany w tagach (linkach). Informuje wyszukiwarki, aby nie śledziły tego linku i nie przekazywały żadnej „mocy SEO” (takiej jak PageRank) na stronę docelową.
Jest używany, gdy link nie powinien wpływać na ranking strony docelowej, np. w przypadku linków sponsorowanych, komentarzy użytkowników, czy też treści generowanych automatycznie.
Argument nofollow – link nie przenosi „siły” strony do adresu docelowego.
target=”_blank”
Ten atrybut również jest używany w tagach . Powoduje, że link otwiera się w nowej karcie lub nowym oknie przeglądarki.
Poprawia wygodę użytkownika, gdy chcemy, aby pozostał na stronie, którą przegląda, a jednocześnie mógł zobaczyć treści z linku.
Argument blank – otwiera łącze w nowej karcie przeglądarki.
Wzór
<a href=”http://motyle-motyle.pl” target=”_blank” rel=”nofollow”>Motyle</a>
Przykład działania: Motyle
Drugie zagnieżdżenie na liście
<ul><li>Pierwszy poziom
<ul><li>Drugi poziom</li></ul>
</li></ul>
Wzór:
- Pierwszy poziom
- Drugi poziom
Link z zagnieżdżeniem na stronie
Kolejny trik pozwala – po kliknięciu w wybrany link lub przycisk – na przeniesienie do wybranego miejsca na bieżącej lub innej wskazanej stronie.
Aby to wykonać trzeba w miejscu wstawienia linka dodać na końcu adresu url wstawić hashtag i nazwę atrybuty elementów do którego przeniesie link. I po drugie dodać unikalny atrybut do miejsca docelowego aby link mógł znaleźć właściwe miejsce.
<p><a href=”#link1″>Tu link do wskazanego miejsca na stronie</a></p>
<h6><span id=”link1″>Tu wskazanie zagnieżdżenia</span></h6>
Wzór:Tu link do wskazanego miejsca na stronie
Tu wskazanie zagnieżdżenia
Twarda Spacja
– znak specjalany
Twarda spacja ma głównie dwa zastosowania. Po pierwsze niektóre CMSy po prostu usuwają podwójną spację – wówczas trzeba użyć „twardej” aby wymusić większy odstęp. Np. aby zwiększyć odstęp od znaków specjalnych.
Drugie zastosowanie jest związane z łączeniem wyrazów aby zapobiec ich automatycznemu dzielenia wyrazów w wierszach. Np. gdy na końcu wiersza zostaje jakiś przyimek. Wówczas warto oddzielić go twardą spacją z kolejnym wyrazem – tak aby stanowił ciąg znaków – bez odstępu. Wówczas przeglądarka potraktuje wyrazy jako jeden i przeniesie całość do następnego wiersza.
Dowiedz się więcej na stronie: Twarda Spacja
Prosty przycisk w Html
To przykład jak utworzyć szybko prosty przycisk. Tu wstawione są style bezpośrednio w kod, ale oczywiście można dodać klasę do linku i wrzucić je w plik CSS.
Przykład:
Kod:
<a style=”border: 1px #073375; background-color: blue; padding: 8px 13px; color: white; border-radius: 5px; font-family: Open Sans,Arial,sans-serif;” href=”#” target=”_blank” rel=”noopener”>Button HTML ⇒</a>
Jak wstawić strzałkę do przycisku? Czytaj poniżej.
Wyświetlenie kodu znaku specjalnego
Jak wyświetlić kod znaku specjalnego na stronie? Używając kolejnego znaku specjalnego : )
Np. Aby wyświetlić – (i nie wstawić twardej spacji), trzeba wpisać &nbsp;
gdzie znak & jest zastąpiony znakami &.
Symbole, znaki specjalne html
™ ™ Trade mark sign Znak handlowy ™
Λ Λ Greek capital letter „lambda” Grecka wielka litera „lambda” Λ
Σ Σ Greek capital letter „sigma” Grecka wielka litera „sigma” Σ
Ω Ω Greek capital letter „omega” Grecka wielka litera „omega” Ω
π π Greek small letter „pi” Grecka mała litera „pi” π
← ← Leftwards arrow Strzałka w lewo ←
↑ ↑ Upwards arrow Strzałka w górę ↑
→ → Rghtwards arrow Strzałka w prawo →
↓ ↓ Downwards arrow Strzałka w dół ↓
↔ ↔ Left right arrow (horizontal) Strzałka lewo-prawo ↔
↵ ↵ Downwards arrow with corner leftwards (carriage return) Strzałka w dół z rogiem w lewo (powrót karetki) (w IE6 tylko czcionka Unicode) ↵
⇐ ⇐ Leftwards double arrow Podwójna strzałka w lewo (w IE6 tylko czcionka Unicode) ⇐
⇑ ⇑ Upwards double arrow Podwójna strzałka w górę (w IE6 tylko czcionka Unicode) ⇑
⇒ ⇒ Rightwards double arrow Podwójna strzałka w prawo (nie interpretuje IE6) ⇒
⇓ ⇓ Downwards double arrow Podwójna strzałka w dół (w IE6 tylko czcionka Unicode) ⇓
⇔ ⇔
⊕ ⊕ Circled plus (direct sum) Plus w kółku (bezpośrednia suma) (nie interpretuje IE6) ⊕
⊗ ⊗ Circled times (vector product) Iloczyn wektorowy (w IE6 tylko czcionka Unicode) ⊗
〈 ⟨ Left-pointing angle bracket (bra) Lewy ostrokątny nawias (nie interpretuje IE6 ani Opera 7.5) ⟨
〉 ⟩ Right-pointing angle bracket (ket) Prawy ostrokątny nawias (nie interpretuje IE6 ani Opera 7.5) ⟩
» » Right angle quote, guillemot right (prawy cudzysłów ostrokątny) »
¼ ¼ Fraction – one quarter (ułamek jedna czwarta) ¼
½ ½ Fraction – one half (ułamek jedna druga) ½
¾ ¾ Fraction – three quarters (ułamek trzy czwarte) ¾
‚ ‚ Single low-9 quotation mark (przecinek) ‚
“ “ Left double quotation mark “
” ” Right double quotation mark (prawy cudzysłów) ”
„ „ Double low-9 quotation mark „
† † Dagger (znak krzyżyka) †
‡ ‡ Double Dagger (znak podwójnego krzyżyka) ‡
‰ ‰ Per mille (thousand) sign (promil) ‰
‹ ‹ Single left-pointing angle quotation mark ‹
› › Single right-pointing angle quotation mark ›
€ € Euro sign (znak Euro) €
™ Trademark (znak handlowy) ™
© © Copyright (znak praw autorskich) ©
ª ª Feminine ordinal (liczebnik porządkowy żeński) ª
« « Left angle quote, guillemot left (lewy cudzysłów ostrokątny) «
¬ ¬ Not sign (znak negacji) ¬
­ ­ Soft hyphen (łącznik opcjonalny)
® ® Registered trademark (zastrzeżony znak towarowy) ®
¯ ¯ Macron accent kreska górna) ¯
° ° Degree sign (znak stopnia) °
± ± Plus or minus (plus-minus) ±
² ² Superscript two (2 w indeksie górnym) ²
³ ³ Superscript three (3 w indeksie górnym) ł
´ ´ Acute accent (akcent silny) ´
µ µ Micro sign (grecka litera mi) µ
¶ ¶ Paragraph sign (znak akapitu) ¶
∧ ∧ Logical and (wedge) Operator logiczny i (nie interpretuje IE6) ∧
∨ ∨ Logical or (vee) Operator logiczny lub (nie interpretuje IE6) ∨
∞ ∞ Infinity Nieskończoność ∞
∗ ∗ Asterisk operator Operator gwiazdka (w IE6 tylko czcionka Unicode) ∗
√ √ Square root (radical sign) Pierwiastek kwadratowy √
≈ ≈ Almost equal to (asymptotic to) …prawie równe… ≈
≠ ≠ Not equal to …różne od… ≠
≡ ≡ Identical to …równe tożsamościowo… (identyczne) ≡
≤ ≤ Less-than or equal to …mniejsze lub równe… ≤
≥ ≥ Greater-than or equal to …większe lub równe… ≥
⊂ ⊂ Subset of …jest podzbiorem… (nie interpretuje IE6) ⊂
⊃ ⊃ Superset of …jest zbiorem nadrzędnym dla… (nie interpretuje IE6) ⊃
⊄ ⊄ Not a subset of …nie jest podzbiorem… (w IE6 tylko czcionka Unicode) ⊄
Kolorowy Tekst – Gradientowe przejście kolorów na tekście
Aby uzyskać efket jak w nagłówku trzeba nadać classę do wybranego elementu.
Np. h4 sytle=”kolorowo”
Nastepęnie w stylach opisać klasę
.kolorowo {
font-size: 25px;
background: -webkit-linear-gradient(left, #0598e5 20%, #00e29c 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
i gotowe
Efekty animacji tekstów
Więcej
https://freefrontend.com/css-text-animations/
https://freefrontend.com/css-text-effects/
Inne:
https://inspirationalpixels.com/creating-a-responsive-menu-with-html-css-jquery/
Efekty animacji tekstów
Animacja rotującego tekstu
Przykład działania
<span class=”txt-rotate” data-period=”2000″ data-rotate='[„Warszawa nocą”, „Paryż”, „Wszystkie drogi prowadzą do Rzymu”, „Londyn”, „New York”]’></span>
<script>
class TxtRotate {
constructor(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = ”;
this.isDeleting = false;
this.tick();
}
tick() {
const i = this.loopNum % this.toRotate.length;
const fullTxt = this.toRotate[i];
this.txt = this.isDeleting
? fullTxt.substring(0, this.txt.length – 1)
: fullTxt.substring(0, this.txt.length + 1);
// Używamy textContent zamiast innerHTML (szybciej)
this.el.querySelector(’.wrap’).textContent = this.txt;
let delta = 100 + Math.random() * 100;
if (this.isDeleting) delta /= 2;
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === ”) {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
// Zamiast setTimeout: requestAnimationFrame z opóźnieniem
setTimeout(() => requestAnimationFrame(() => this.tick()), delta);
}
}
window.addEventListener(’DOMContentLoaded’, () => {
const elements = document.getElementsByClassName(’txt-rotate’);
for (let el of elements) {
const toRotate = el.getAttribute(’data-rotate’);
const period = el.getAttribute(’data-period’);
if (toRotate) {
el.innerHTML = '<span class=”wrap”></span>’;
new TxtRotate(el, JSON.parse(toRotate), period);
}
}
// CSS tylko raz
const css = document.createElement(’style’);
css.textContent = ’.txt-rotate > .wrap { border-right: 0.08em solid #666; padding-right: 3px; }’;
document.head.appendChild(css);
});
</script>
Logo Carousel Slaider
Krok po kroku jak zrobić Logo Carousel Slider – prosty slider logotypów w HTML i CSS
Dowiedz się, jak samodzielnie stworzyć lekki i płynnie działający slider logotypów bez wtyczek i skomplikowanych narzędzi. Wystarczy prosty kod HTML + CSS, aby na stronie pojawił się pasek z logo przesuwającymi się w nieskończonej pętli. Efekt wygląda profesjonalnie, a dodatkowo animacja zatrzymuje się po najechaniu kursorem, co pozwala skupić uwagę na wybranym logotypie.
Zobacz poradnik na stronie: Logo Carousel Slider
![Jak wykryć deepfake? 10 sposobów na rozpoznanie fałszywych treści [2025]](https://uuru.pl/wp-content/uploads/2025/07/jak-wykryc-deepfake-150x150.jpg)
