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.
Argument nofollow – link nie przenosi „siły” strony do adresu docelowego.
Argument blank – otwiera łącze w nowej karcie przeglądarki.
<a href=http://motyle-motyle.pl target=”_blank” rel=”nofollow”>Motyle</a>

Wzór: 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 &nbsp;

&nbsp; – 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.

---

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:

Button HTML ⇒

<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ć – &nbsp; (i nie wstawić twardej spacji), trzeba wpisać &amp;nbsp;
gdzie znak & jest zastąpiony znakami &amp;.

---

Symbole, znaki specjalne html

&#8482;   &trade;   Trade mark sign Znak handlowy ™
&#923;   &Lambda;   Greek capital letter „lambda” Grecka wielka litera „lambda” Λ
&#931;   &Sigma;   Greek capital letter „sigma” Grecka wielka litera „sigma” Σ
&#937;   &Omega;   Greek capital letter „omega” Grecka wielka litera „omega” Ω
&#960;   &pi;   Greek small letter „pi” Grecka mała litera „pi” π
&#8592;   &larr;   Leftwards arrow Strzałka w lewo ←
&#8593;   &uarr; Upwards arrow Strzałka w górę ↑
&#8594; &rarr; Rghtwards arrow Strzałka w prawo →
&#8595; &darr; Downwards arrow Strzałka w dół ↓
&#8596; &harr; Left right arrow (horizontal) Strzałka lewo-prawo ↔
&#8629; &crarr; Downwards arrow with corner leftwards (carriage return) Strzałka w dół z rogiem w lewo (powrót karetki) (w IE6 tylko czcionka Unicode) ↵
&#8656; &lArr; Leftwards double arrow Podwójna strzałka w lewo (w IE6 tylko czcionka Unicode) ⇐
&#8657; &uArr; Upwards double arrow Podwójna strzałka w górę (w IE6 tylko czcionka Unicode) ⇑
&#8658; &rArr; Rightwards double arrow Podwójna strzałka w prawo (nie interpretuje IE6) ⇒
&#8659; &dArr; Downwards double arrow Podwójna strzałka w dół (w IE6 tylko czcionka Unicode) ⇓
&#8660; &hArr;
&#8853; &oplus; Circled plus (direct sum) Plus w kółku (bezpośrednia suma) (nie interpretuje IE6) ⊕
&#8855; &otimes; Circled times (vector product) Iloczyn wektorowy (w IE6 tylko czcionka Unicode) ⊗
&#9001; &lang; Left-pointing angle bracket (bra) Lewy ostrokątny nawias (nie interpretuje IE6 ani Opera 7.5) ⟨
&#9002; &rang; Right-pointing angle bracket (ket) Prawy ostrokątny nawias (nie interpretuje IE6 ani Opera 7.5) ⟩
&#187; &raquo; Right angle quote, guillemot right (prawy cudzysłów ostrokątny) »
&#188; &frac14; Fraction – one quarter (ułamek jedna czwarta) ¼
&#189; &frac12; Fraction – one half (ułamek jedna druga) ½
&#190; &frac34; Fraction – three quarters (ułamek trzy czwarte) ¾
&#8218; &sbquo; Single low-9 quotation mark (przecinek) ‚
&#8220; &ldquo; Left double quotation mark “
&#8221; &rdquo; Right double quotation mark (prawy cudzysłów) ”
&#8222; &bdquo; Double low-9 quotation mark „
&#8224; &dagger; Dagger (znak krzyżyka) †
&#8225; &Dagger; Double Dagger (znak podwójnego krzyżyka) ‡
&#8240; &permil; Per mille (thousand) sign (promil) ‰
&#8249; &lsaquo; Single left-pointing angle quotation mark ‹
&#8250; &rsaquo; Single right-pointing angle quotation mark ›
&#8364; &euro; Euro sign (znak Euro) €
&trade; Trademark (znak handlowy) ™
&#169; &copy; Copyright (znak praw autorskich) ©
&#170; &ordf; Feminine ordinal (liczebnik porządkowy żeński) ª
&#171; &laquo; Left angle quote, guillemot left (lewy cudzysłów ostrokątny) «
&#172; &not; Not sign (znak negacji) ¬
&#173; &shy; Soft hyphen (łącznik opcjonalny) ­
&#174; &reg; Registered trademark (zastrzeżony znak towarowy) ®
&#175; &macr; Macron accent kreska górna) ¯
&#176; &deg; Degree sign (znak stopnia) °
&#177; &plusmn; Plus or minus (plus-minus) ±
&#178; &sup2; Superscript two (2 w indeksie górnym) ²
&#179; &sup3; Superscript three (3 w indeksie górnym) ł
&#180; &acute; Acute accent (akcent silny) ´
&#181; &micro; Micro sign (grecka litera mi) µ
&#182; &para; Paragraph sign (znak akapitu) ¶
&#8743; &and; Logical and (wedge) Operator logiczny i (nie interpretuje IE6) ∧
&#8744; &or; Logical or (vee) Operator logiczny lub (nie interpretuje IE6) ∨
&#8734; &infin; Infinity Nieskończoność ∞
&#8727; &lowast; Asterisk operator Operator gwiazdka (w IE6 tylko czcionka Unicode) ∗
&#8730; &radic; Square root (radical sign) Pierwiastek kwadratowy √
&#8776; &asymp; Almost equal to (asymptotic to) …prawie równe… ≈
&#8800; &ne; Not equal to …różne od… ≠
&#8801; &equiv; Identical to …równe tożsamościowo… (identyczne) ≡
&#8804; &le; Less-than or equal to …mniejsze lub równe… ≤
&#8805; &ge; Greater-than or equal to …większe lub równe… ≥
&#8834; &sub; Subset of …jest podzbiorem… (nie interpretuje IE6) ⊂
&#8835; &sup; Superset of …jest zbiorem nadrzędnym dla… (nie interpretuje IE6) ⊃
&#8836; &nsub; 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

Html: <p><span class="txt-rotate" data-period="2000" data-rotate='[ "Warszawa", "Paryż", "Rzym", "Londyn", "New York " ]'></span></p>
Script: var TxtRotate = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ”; this.tick(); this.isDeleting = false; }; TxtRotate.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length – 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = ’<span class="wrap">’+this.txt+’</span>’; var that = this; var delta = 300 – 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; } setTimeout(function() { that.tick(); }, delta); }; window.onload = function() { var elements = document.getElementsByClassName(’txt-rotate’); for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute('data-rotate'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtRotate(elements[i], JSON.parse(toRotate), period); } } // INJECT CSS var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }”; document.body.appendChild(css); };
Więcej

How to Create (Animated) Text Fills

https://freefrontend.com/css-text-animations/ https://freefrontend.com/css-text-effects/

10 Amazing Animated Text CSS & JavaScript Code Snippets

Inne: https://inspirationalpixels.com/creating-a-responsive-menu-with-html-css-jquery/