HTML5 - Kama Kaczmarek https://kamakaczmarek.net/tag/html5/ Strona z materiałami dla uczniów i nauczycieli Fri, 15 Nov 2019 08:10:25 +0000 pl-PL hourly 1 HTML5 – listy https://kamakaczmarek.net/html5-listy/ Mon, 11 Nov 2019 13:45:23 +0000 http://kamakaczmarek.net/?p=1986 Listy pomagają w usystematyzowaniu treści na stronie i można wypunktować najważniejsze elementy. Listy służą również do tworzenia menu. W HTML mamy do wyboru listy nieuporządkowane, listy uporządkowane oraz listy definicji. Większość znaczników HTML, jak również nazwy funkcji i metod w językach programowania, tworzy się od nazw angielskich odpowiednich tłumaczeń. Listy nieuporządkowane Jeżeli wiemy, że lista […]

Artykuł HTML5 – listy pochodzi z serwisu Kama Kaczmarek.

]]> Listy pomagają w usystematyzowaniu treści na stronie i można wypunktować najważniejsze elementy.

Listy służą również do tworzenia menu.

W HTML mamy do wyboru listy nieuporządkowane, listy uporządkowane oraz listy definicji.

Większość znaczników HTML, jak również nazwy funkcji i metod w językach programowania, tworzy się od nazw angielskich odpowiednich tłumaczeń.

Listy nieuporządkowane

Jeżeli wiemy, że lista nieuporządkowana po angielsku to unordered list, możemy teraz wziąć pierwsze litery z przetłumaczonego zwrotu i otrzymujemy znacznik <ul>. Każdy podpunkt naszej listy to <li>

<ul>
    <li>1 element</li>
    <li>2 element</li>
    <li>3 element</li>
    <li>4 element</li>
</ul>

Otrzymamy:

  • 1 element
  • 2 element
  • 3 element
  • 4 element

Listy uporządkowane

Jeżeli wiemy, że lista uporządkowana po angielsku to ordered list, możemy teraz wziąć pierwsze litery z przetłumaczonego zwrotu i otrzymujemy znacznik <ol>. Każdy podpunkt naszej listy to <li>

<ol>
    <li>1 element</li>
    <li>2 element</li>
    <li>3 element</li>
    <li>4 element</li>
</ol>
typy list

Listy mogą zostać zdefiniowane wg typów:

  • cyfry arabskie – 1 lub brak typu
  • wielkie litery – A
  • małe litery – a
  • cyfry rzymskie wielkie – I
  • cyfry rzymskie małe – i

Jeżeli zastosujemy poniższy typ:

<ol type="a">
    <li>1 element</li>
    <li>2 element</li>
    <li>3 element</li>
    <li>4 element</li>
</ol>

Otrzymamy następującą listę:

  1. 1 element
  2. 2 element
  3. 3 element
  4. 4 element
zmiana numeracji

Jeżeli musimy rozpocząć numeracje od konkretnej liczby, możemy to zrobić za pomocą atrybutu start:

<ol type="a" start="3">
    <li>1 element</li>
    <li>2 element</li>
    <li>3 element</li>
    <li>4 element</li>
</ol>

Otrzymamy:

  1. 1 element
  2. 2 element
  3. 3 element
  4. 4 element

Zagnieżdżanie list

Listy możemy dowolnie zagnieżdżać w sobie. Przykład:

<ol type="I">
    <li>1 element</li>
    <ol type="1" start="5">
        <li>1 element</li>
        <li>2 element</li>
        <li>3 element</li>
    </ol>
    <li>2 element</li>
    <li>3 element</li>
    <li>
        <ul>
            <li>1 element</li>
            <li>2 element</li>
            <li>3 element</li>
            <li>4 element</li>
        </ul>
    </li>
</ol>

Otrzymamy:

  1. 1 element
    1. 1 element
    2. 2 element
    3. 3 element
  2. 2 element
  3. 3 element
    • 1 element
    • 2 element
    • 3 element
    • 4 element

Listy definicji

Lista definicji <dl> zawiera w sobie 2 znaczniki <dt>, czyli tytuł definicji oraz <dd> – opis definicji.

<dl>
<dt>Opis HTML5</dt>
<dd>Język wykorzystywany do tworzenia i prezentowania stron internetowych www. </dd> 

<dt>Nowości</dt>
<dd>HTML5 poza dodaniem nowych elementów, usprawniających tworzenie serwisów i aplikacji internetowych, doprecyzowuje wiele niejasności w specyfikacji HTML 4, dotyczących przede wszystkim sposobu obsługi błędów.</dd>
</dl>

Otrzymamy:

Opis HTML5
Język wykorzystywany do tworzenia i prezentowania stron internetowych www.
Nowości
HTML5 poza dodaniem nowych elementów, usprawniających tworzenie serwisów i aplikacji internetowych, doprecyzowuje wiele niejasności w specyfikacji HTML 4, dotyczących przede wszystkim sposobu obsługi błędów.

 

Ćwiczenie:

W pliku z ćwiczenia poprzedniego, umieść wszystkie rodzaje poznanych list, zastosuj odpowiednie typy i skorzystaj z właściwości „start”.

Artykuł HTML5 – listy pochodzi z serwisu Kama Kaczmarek.

]]> Kolory https://kamakaczmarek.net/kolory/ Mon, 11 Nov 2019 11:38:54 +0000 http://kamakaczmarek.net/?p=1974 Na potrzeby tej lekcji poznacie selektor background-color, który służy do ustawiania tła elementu. Kolory definiujemy na kilka sposobów, najczęstsze z nich to: rgb, rgba /* kolor bez przezroczystości zawiera tylko 3 argumenty RGB*/ background-color: rgb(52, 117, 117); /* jeżeli chcemy dodać przezroczystość, dodajemy też 4ty argument "A", który określa stopień przezroczystości*/background-color: rgba(52, 117, 117, 0.8); […]

Artykuł Kolory pochodzi z serwisu Kama Kaczmarek.

]]> Na potrzeby tej lekcji poznacie selektor background-color, który służy do ustawiania tła elementu.

Kolory definiujemy na kilka sposobów, najczęstsze z nich to:

  • rgb, rgba

/* kolor bez przezroczystości zawiera tylko 3 argumenty RGB*/ 
background-color: rgb(52, 117, 117); 

/* jeżeli chcemy dodać przezroczystość, dodajemy też 4ty argument "A", który określa stopień przezroczystości*/
background-color: rgba(52, 117, 117, 0.8);

 

  • #, hex

/* kolor bez przezroczystości zawiera tylko 3 lub 6 znaków notacji hexadecymalnej #RRGGBB */ 
background-color: #FFFFFF;
/*lub #RGB*/
background-color: #FFF; 

/* jeżeli chcemy dodać przezroczystość, dodajemy dodatkowe 2 znaki  #RRGGBBAA. Im mniejsza wartość znaków AA (z zakresu 0-9 i A-F) tym większa przezroczystość*/
background-color: #34757580;

 

  • nazwa koloru po angielsku

background-color: red;

 

Czasami występuje potrzeba przeliczenia koloru z RGB na HEX i odwrotnie. Jak tego dokonać?

HEX -> RGB

Liczbę w HEX #347575, musimy podzielić na 3 części odpowiedzialne za każdy kolor, czyli #RR | GG | BB

Teraz zamienimy poszczególne zapisy systemu hexadecymalnego na decymalny:

34 -> dziesiątki * 16 + jedności, czyli: 3*16+4=52

75 -> dziesiątki * 16 + jedności, czyli: 7*16+5 = 117

75 -> dziesiątki * 16 + jedności, czyli: 7*16+5 = 117

i otrzymujemy liczbę w rgb(52, 117, 117).

RGB -> HEX

Liczbę w rgb(52, 117, 117), musimy zamienić na każdy kolor w hex, czyli #RR | GG | BB

Teraz zamienimy poszczególne zapisy systemu decymalnego na hexadecymalny:

52 ->

52/16=3,25 -> bierzemy całości z wyniku i mnożymy przez 16

3*16=48

52-48=4

pierwsza para liczb to 34

117 ->

117/16=7,31 -> bierzemy całości z wyniku i mnożymy przez 16

7*16=112

117-112=5

druga i trzecia para liczb to 75

i otrzymujemy liczbę w hex #347575.

Artykuł Kolory pochodzi z serwisu Kama Kaczmarek.

]]> HTML 5 – znaczniki semantyczne SECTION, ARTICLE, ASIDE, HGROUP, HEADER, FOOTER, NAV, MAIN, DETAILS, SUMMARY https://kamakaczmarek.net/html-5-znaczniki-section-article-aside-hgroup-header-footer-nav-main-details-summary/ Mon, 07 Oct 2019 17:07:43 +0000 http://kamakaczmarek.net/?p=1904 Semantyka w programowaniu to precyzyjnie określenie znaczenia poszczególnych symboli oraz ich funkcji w programie. SECTION, ARTICLE <section> treść </section> sekcja jest elementem służącym do tworzenia szkieletu strony, sekcja zawiera tematyczną treść, może zawierać nagłówki. Nie stosuje się jej do formatowania wyglądu danej części strony – do tego służy <div>. Możemy za pomocą sekcji logicznie dzielić […]

Artykuł HTML 5 – znaczniki semantyczne SECTION, ARTICLE, ASIDE, HGROUP, HEADER, FOOTER, NAV, MAIN, DETAILS, SUMMARY pochodzi z serwisu Kama Kaczmarek.

]]> Semantyka w programowaniu to precyzyjnie określenie znaczenia poszczególnych symboli oraz ich funkcji w programie.

SECTION, ARTICLE

<section> treść </section>

sekcja jest elementem służącym do tworzenia szkieletu strony, sekcja zawiera tematyczną treść, może zawierać nagłówki. Nie stosuje się jej do formatowania wyglądu danej części strony – do tego służy <div>. Możemy za pomocą sekcji logicznie dzielić całość treści i znaczniki <section> możemy w sobie zagnieżdżać w nieskończoność.

<article> treść </article>

artykuł jak sama nazwa wskazuje służy do przechowywania treści niezależnej od całości, która wyrwana z reszty tekstu nie traci swojego sensu.

Oto przykład zawierający oba znaczniki:

<article>
   <h1>Serwisy społecznościowe</h1>
      <section>
         <h2>Twitter</h2>
         <p>Treść...</p>
      </section>
      <section>
         <h2>Facebook</h2>         <p>Treść...</p>
      </section>
      <section>
         <h2>Google+</h2>
         <p>Treść...</p>
      </section>
</article>

 

ASIDE

<aside> treść </aside>

coś obok – element uzupełniający, nie jest wymagana do zrozumienia treści dokumentu. Gdybyśmy usunęli sekcję aside, zarówno sam artykuł jaki i wyrwana z kontekstu sekcja nie utracą sensu ani swojej wewnętrznej kompletności. Typowe przeznaczenie: cytaty umieszczone w treści artykułu w postaci osobno wyróżnionych bloków, bannery reklamowe, grupy linków nawigacyjnych.

 

HEADER

<header> treść </header>

nie mylić z nagłówkiem, do tego służą znaczniki h1..h6. Jest to element, który zawiera nagłówkowe treści, logicznie uwidacznia kod nagłówkowy dla programisty. Stosujemy go jeżeli chcemy w kodzie zaznaczyć, że dany fragment treści zawiera elementy tytułowe np.

<header> a logo </header > 
<header>
	<p>Witam na stronie...</p>
	<h1>Kurs języka HTML</h1>
</header>


<header>
	<h1>Sekcja 1</h1>
	<p>Akapit sekcji 1</p>
	<h2>Podsekcja 1.1</h2>
</header>
<p>Akapit podsekcji 1.1</p>
<h2>Podsekcja 1.2</h2>
<p>Akapit podsekcji 1.2</p>

 

FOOTER

<footer>...</footer>

Stanowi stopkę dla zawierającego ją elementu sekcji (ARTICLE, ASIDE NAV, SECTION). Stopka przechowuje zwykle informacje na temat sekcji – np.: autor, linki do powiązanych dokumentów, prawa autorskie itp. Stopka może również zawierać w sobie znaczniki sekcji. W takim przypadku stosuje się ją do oznaczania: załączników, skorowidzów (alfabetycznych indeksów haseł), kolofonów (opisów na zakończenie książki), szczegółowych praw autorskich itp.

<footer>
  Some copyright info or perhaps some author info for an &lt;article&gt;?
</footer>

 

NAV

<nav>...</nav>

sekcja nawigacyjna – zawiera odnośniki nawigacyjne do innych stron albo do określonych fragmentów na tej samej stronie. Nie wszystkie linki na stronie powinny być umieszczane w tym znaczniku. Został on przewidziany przede wszystkim do oznaczania nim podstawowej nawigacji witryny. Często w stopce serwisu znajdują się linki takie jak: kontakt, regulamin, prawa autorskie. Choć teoretycznie można je objąć znacznikiem nav, zwykle bardziej właściwy do tego będzie element footer. Niewłaściwym miejscem dla nav będą linki umieszczone w środku treści tekstowej artykułu.

 

HGROUP

znacznik grupujący nagłówki:

<hgroup><h1>Main title</h1><h2>Secondary title</h2></hgroup>

 

MAIN

 

<main>...</main>


Powinniśmy nim oznaczyć główną treść każdego dokumentu. Zwykle można ją rozpoznać po tym, że jest bezpośrednio związana z tytułem strony. Znacznikiem MAIN nie należy obejmować żadnych stałych elementów, które powtarzają się w całym serwisie: menu nawigacyjnego, informacji o prawach autorskich, logo serwisu, bannerów, formularzy wyszukiwania itp. Znacznik ten może jednak obejmować linki nawigujące do podsekcji głównej zawartości dokumentu, które nie powtarzają się na innych stronach.

 

<header>
    Serwis kinomaniaków
    <nav>
	<ul>
		<li><a>Matrix</a></li>
		<li><a href="incepcja.html">Incepcja</a></li>
		<li><a href="trzynaste-pietro.html">Trzynaste piętro</a></li>
	</ul>
    </nav>
</header>

<main>
    <h1>Matrix</h1>
   <nav>
	<ul>
		<li><a href="#czym-jest-matrix">Czym jest Matrix?</a></li>
		<li><a href="#matrix-reaktywacja">Matrix: Reaktywacja</a></li>
		<li><a href="#matrix-rewolucje">Matrix: Rewolucje</a></li>
	</ul>
    </nav>

    <h2 id="czym-jest-matrix">Czym jest Matrix?</h2>
    <p>Pierwsza część trylogii science fiction.</p>
    <h2 id="matrix-reaktywacja">Matrix: Reaktywacja</h2>
    <p>Ciąg dalszy zmagań Neo, Trinity i Morfeusza z inteligentnymi maszynami, 
zagrażającymi całej ludzkości.</p>
    <h2 id="matrix-rewolucje">Matrix: Rewolucje</h2>
    <p>Neo kontra Agent Smith. Syjon - ostatnia enklawa ludzkiej cywilizacji - 
zagrożony zniszczeniem.</p>
</main>

<footer>Wszystkie prawa zastrzeżone</footer>

 

Na rysunku przedstawiłam przykładowy schemat budowy strony na bazie znaczników semantycznych:

 

znaczniki semantyczne i div

W skrócie – znacznika <div> używamy wszędzie tam, gdzie nie mamy możliwości zastosowania znaczników semantycznych.

 

DETAILS, SUMMARY

Służy do ukrywania większej partii tekstu, która pojawi się po kliknięciu na dany fragment tekstu.

  • Panel domyślnie zamknięty: 
    <details>
	<summary>nagłówek</summary>
	...
</details>
  • Panel domyślnie otwarty: 
    <details open>
	<summary>nagłówek</summary>
	...
</details>

 

Przykład:

 

Nagłówek panelu – kliknij, aby zobaczyć więcej…

Lorem ipsum dolor sit amet consectetuer et aliquam mus urna pede. Nam convallis metus aliquam sociis eu nec Curabitur gravida ipsum condimentum. Sed cursus sapien Aenean urna Sed diam volutpat urna auctor sapien. Auctor sociis diam In sem tellus tincidunt In risus ornare nibh. Condimentum sit In augue sit ultrices nibh iaculis sem Sed nec. In interdum a eget sit porta tempus lacinia Vestibulum Nam.

<details>
	<summary>Nagłówek panelu - kliknij, aby zobaczyć więcej...</summary>
	Lorem ipsum dolor sit amet consectetuer et aliquam mus urna pede...
</details>

 

Ćwiczenie:

Na podstawie kodu, jaki utworzyłeś wykonując ćwiczenie z tematu HTML5 – Formatowanie tekstu, zamień bloki utworzone  za pomocą znacznika <div> na odpowiednie znaczniki semantyczne HTML5. Poniżej znacznika <header> utwórz znacznik <nav> i wstaw w nim nazwy nagłówków występujących na stronie.

Przykładowe rozwiązanie ćwiczenia z tematu HTML5 – Formatowanie tekstu – pobierz.

Artykuł HTML 5 – znaczniki semantyczne SECTION, ARTICLE, ASIDE, HGROUP, HEADER, FOOTER, NAV, MAIN, DETAILS, SUMMARY pochodzi z serwisu Kama Kaczmarek.

]]> HTML5 – elementy liniowe https://kamakaczmarek.net/html5-elementy-liniowe/ Tue, 24 Sep 2019 13:07:52 +0000 http://kamakaczmarek.net/?p=1862 Elementy liniowe zajmują na stronie tyle miejsca ile mają zawartości. Obok danego elementu liniowego może występować inny. Elementy liniowe mogą zawierać tekst lub inne elementy liniowe. Elementy liniowe nie wymuszają nowego wiersza. Lista elementów liniowych: <a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>

Artykuł HTML5 – elementy liniowe pochodzi z serwisu Kama Kaczmarek.

]]> Elementy liniowe zajmują na stronie tyle miejsca ile mają zawartości. Obok danego elementu liniowego może występować inny.

Elementy liniowe mogą zawierać tekst lub inne elementy liniowe.

Elementy liniowe nie wymuszają nowego wiersza.

Lista elementów liniowych:

<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>

Artykuł HTML5 – elementy liniowe pochodzi z serwisu Kama Kaczmarek.

]]> HTML5 – elementy blokowe https://kamakaczmarek.net/html5-elementy-blokowe/ Tue, 24 Sep 2019 13:00:38 +0000 http://kamakaczmarek.net/?p=1859 Elementy blokowe zajmują całą powierzchnię danej linii, w której występują. Wymuszają tym samym, że kolejne elementy strony nie znajdą się na tym samym poziomie co element blokowy. Elementy blokowe mogą zawierać w sobie zarówno elementy liniowe jak i blokowe. Elementy blokowe domyślnie zaczynają się od nowej linii. Lista elementów blokowych: <address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>

Artykuł HTML5 – elementy blokowe pochodzi z serwisu Kama Kaczmarek.

]]> Elementy blokowe zajmują całą powierzchnię danej linii, w której występują. Wymuszają tym samym, że kolejne elementy strony nie znajdą się na tym samym poziomie co element blokowy.

Elementy blokowe mogą zawierać w sobie zarówno elementy liniowe jak i blokowe.

Elementy blokowe domyślnie zaczynają się od nowej linii.

Lista elementów blokowych:

<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>

Artykuł HTML5 – elementy blokowe pochodzi z serwisu Kama Kaczmarek.

]]> HTML5 – Formatowanie tekstu https://kamakaczmarek.net/html5-formatowanie-tekstu/ Tue, 24 Sep 2019 10:45:53 +0000 http://kamakaczmarek.net/?p=1844 Poznaliście już budowę nagłówka strony: <head> Teraz zajmiemy się sekcją <body>. Pomiędzy tagami <body></body> umieszczamy wszystko co tworzy naszą stronę. Za chwilę poznacie tagi formatujące tą zawartość. Pamiętajcie że sekcja <body> występuje RAZ na stronie, jeżeli chcecie użyć poniższych właściwości dodawajcie je kolejno po spacji. Umieszczone tutaj tagi wykorzystujemy pomiędzy znacznikami <body> tutaj umieszczamy tagi […]

Artykuł HTML5 – Formatowanie tekstu pochodzi z serwisu Kama Kaczmarek.

]]> Poznaliście już budowę nagłówka strony: <head>

Teraz zajmiemy się sekcją <body>.

Pomiędzy tagami <body></body> umieszczamy wszystko co tworzy naszą stronę. Za chwilę poznacie tagi formatujące tą zawartość.

Pamiętajcie że sekcja <body> występuje RAZ na stronie, jeżeli chcecie użyć poniższych właściwości dodawajcie je kolejno po spacji.

Umieszczone tutaj tagi wykorzystujemy pomiędzy znacznikami <body> tutaj umieszczamy tagi </body>

Proszę pamiętać o zamykaniu tagów!

<!– komentarz –>

nie będzie widoczny na stronie, widoczny tylko w kodzie źródłowym

<!-- Ten tekst
zostanie zignorowany
przez przeglądarkę -->

Znaki specjalne:

Jeżeli chcemy umieścić w treści wpisu na stronie znak specjalny np: <,> lub & to musimy zapisać numery lub nazwy tych znaków, inaczej przeglądarka zinterpretuje je jako kod HTML. Oto kilka „zamienników” znaków specjalnych:

Znak specjalny Nazwa Opis
& &amp; ampersand (and/i)
< &lt; Znak mniejszości
> &gt; Znak większości
§ &sect; paragraf
™ &trade; zastrzeżony znak towarowy
© &copy; znak praw autorskich
® &reg; zastrzeżony znak towarowy
€ &euro; euro
  &nbsp; znak twardej spacji

<p> akapit </p>

<p> akapit </p>

<hn> nagłówek </hn>

„n” może przyjmować wartości od 1 do 6

<h1> nagłówek 1go stopnia </h1>

<div> blok </div>

<div> blok zawierający treść </div>

<br> koniec linii

koniec linii <br> 
a tutaj następna linia

<nobr> blokada przełamania wiersza </nobr>

<nobr> ten tekst pozostanie w jednej linii </nobr>

<b> pogrubienie </b>

<b> tekst pogrubiony </b>

<i> pochylenie </i>

<i> tekst pochylony </i>

<u> podkreślenie </u>

<u> tekst podkreślony </u>

<s> przekreślenie </s>

<s> tekst przekreślony </s>

<em> wyróżnienie słabe </em>

<em> emfaza </em>

<strong> wyróżnienie mocne </strong>

<strong> tekst mocno wyróżniony </strong>

<sup> indeks górny </sup>

a teraz <sup> indeks górny </sup>

<sub> indeks dolny </sub>

a teraz <sub> indeks dolny </sub>

<pre> tekst preformatowany</pre>

czcionka zwykła i <pre> czcionka monotypiczna </pre>

<code> kod komputerowy </code>

zwykły tekst i  <code> kod komputerowy </code>

cytat

<cite> odniesienie do źródła </cite> 
<q> krótki cytat  </q> 
<blockquote> blok cytowany </blockquote>

zmiany

<ins> treść dodana </ins> 
<del> treść usunięta </del>

pozioma linia <hr>

<hr>

Ćwiczenie:

Stwórz stronę www korzystając z poznanych znaczników. Strona powinna przypominać tą na rysunku poniżej:

przykład do ćwiczenia

Pobierz treść do ćwiczenia – kliknij.

Należy zastosować standard kodowania polskich znaków: UTF-8.

Tytuł strony: Informacje o języku HTML5.

Strona podzielona na bloki za pomocą znacznika <div>. Na rysunku poziome linie oddzielają kolejne bloki (w sumie 4).

Tekst „Język HTML5” i „Historia” umieść w nagłówku 1 stopnia.

Tekst „Opis języka”, „nowości” i „semantyka” umieść w nagłówku 3 stopnia.

Pozostałe teksty umieść w akapitach (każdy nowy wiersz to oddzielny akapit).

Artykuł HTML5 – Formatowanie tekstu pochodzi z serwisu Kama Kaczmarek.

]]>