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ą.

Ten atrybut również jest używany w tagach . Powoduje, że link otwiera się w nowej karcie lub nowym oknie przeglądarki.

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 &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.

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:

Button HTML ⇒

<br /><br /><br /> <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><br /><br /><br />
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

<br /><br /><br /> Html:<span class=”txt-rotate” data-period=”2000″ data-rotate='[ „Warszawa”, „Paryż”, „Rzym”, „Londyn”, „New York ” ]’></span></p><br /><br /> <p>
<br /><br /><br /> Script:<br /><br /><br /> var TxtRotate = function(el, toRotate, period) {<br /><br /><br /> this.toRotate = toRotate;<br /><br /><br /> this.el = el;<br /><br /><br /> this.loopNum = 0;<br /><br /><br /> this.period = parseInt(period, 10) || 2000;<br /><br /><br /> this.txt = ”;<br /><br /><br /> this.tick();<br /><br /><br /> this.isDeleting = false;<br /><br /><br /> };</p><br /><br /> <p>TxtRotate.prototype.tick = function() {<br /><br /><br /> var i = this.loopNum % this.toRotate.length;<br /><br /><br /> var fullTxt = this.toRotate[i];</p><br /><br /> <p> if (this.isDeleting) {<br /><br /><br /> this.txt = fullTxt.substring(0, this.txt.length – 1);<br /><br /><br /> } else {<br /><br /><br /> this.txt = fullTxt.substring(0, this.txt.length + 1);<br /><br /><br /> }</p><br /><br /> <p> this.el.innerHTML = '<span class=”wrap”>’+this.txt+'</span>’;</p><br /><br /> <p> var that = this;<br /><br /><br /> var delta = 300 – Math.random() * 100;</p><br /><br /> <p> if (this.isDeleting) { delta /= 2; }</p><br /><br /> <p> if (!this.isDeleting && this.txt === fullTxt) {<br /><br /><br /> delta = this.period;<br /><br /><br /> this.isDeleting = true;<br /><br /><br /> } else if (this.isDeleting && this.txt === ”) {<br /><br /><br /> this.isDeleting = false;<br /><br /><br /> this.loopNum++;<br /><br /><br /> delta = 500;<br /><br /><br /> }</p><br /><br /> <p> setTimeout(function() {<br /><br /><br /> that.tick();<br /><br /><br /> }, delta);<br /><br /><br /> };</p><br /><br /> <p>window.onload = function() {<br /><br /><br /> var elements = document.getElementsByClassName(’txt-rotate’);<br /><br /><br /> 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 }”;<br /><br /><br /> document.body.appendChild(css);<br /><br /><br /> };</p><br /><br /> <p>

Więcej
https://tympanus.net/codrops/2015/02/16/create-animated-text-fills/
https://freefrontend.com/css-text-animations/
https://freefrontend.com/css-text-effects/


https://speckyboy.com/css-javascript-text-animation-snippets/

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