html5

Znaczniki html5

oznaczone w poniższym wykazie kolorem:

  • <!– tekst –> – komentarz
  • <!DOCTYPE> – typ dokumentu
  • a – odnośnik do strony, elementu strony
  • abbr – skrót słowny , element bloku tekstowego, z atrybutem title
  • address – kontener adresu
  • area – obszar wewnątrz mapy odsyłacza
  • article – niezależna część dokumentu
  • aside – treść powiązana z zawartością artykułu?
  • audio – kontener treści dźwiękowej
  • b – pogrubienie
  • base – podstawowy format url dla wszystkich odnośników na stronie
  • bdo – kierunek wyświetlania tekstu
  • blockquote – blok cytowanej treści z atrybutem cite – podaje źródło cytatu
  • body – początek elementu body
  • br – przerwa pojedyncza
  • button – przycisk klikalny
  • canvas – kontener do renderowania grafiki
  • caption – nagłówek tabeli
  • cite – kontener cytatu, tytuł pracy, książki, artykułu, filmu
  • code – format dla tekstu kodu komputerowego
  • col – kolumny tabeli
  • colgroup – grupa kolumn tabeli
  • command – komenda, którą użytkownik może wywołać
  • datalist – generator listy, używany z znacznikiem <input> i jego atrybutem list
  • dd – kontener wartości elementu dt, opis słowa definiowanego
  • del – oznaczenie usuniętego tekstu, najczęściej przez jego przekreślenie
  • details – zawiera szczegóły elementu
  • dfn – definicja terminu, element bloku tekstowego
  • div – sekcja w dokumencie
  • dl – lista definicji
  • dt – objaśniany termin definicji, słowo definiowane
  • em – wyróżniony tekst
  • embed – zewnętrzny, interaktywny plugin lub treść
  • fieldset – kontener ramki rysowanej dookoła zawartości
  • figcaption – podpis elementu figure
  • figure – zawiera grupę treści multimedialnych, ich podpisy
  • footer – kontener stopki elementu, strony
  • form – formularz
  • h1 – h6 – nagłówki
  • head – kontener pierwszego kodu interpretowanego przez wyszukiwarkę
  • header – kontener nagłówka elementu, strony
  • hgroup – nagłówek sekcji zawierający wiele elementów h1-h6
  • hr – pozioma linia
  • html – kontener dokumentu html
  • i – kursywa, wyróżnienie tekstu np. inna intonacją głosu
  • iframe – ramka iframe (pływająca), zawiera atrybuty:
    • name pozwalający na nadanie nazwy,
    • width, height
    • seamless – pozwalający osadzić ramkę tak by była częścią dokumentu, krawędzie i paski przewijania znikają
    • srcdoc – bezpieczne osadzanie potencjalnie niebezpiecznych treści
    • sandbox – ustawienie dodatkowych restrykcji dla treści osadzonych w ramce, jego wartości:
      • allow-top-navigation – umożliwia nawigowanie najwyższego rodzica kontekstu, z poziomu ramki można kontrolować stronę na której została ona wykorzystana
      • allow-same-origin – traktowanie treści osadzonej jako elementu o tym samym pochodzeniu
      • allow-forms – pozwala na działanie formularzy dostępnych na osadzonej stronie
      • allows-scripts – pozwala na działanie skryptów dostępnych na osadzonej stronie
  • img – kontener obrazka
  • input – pole do wprowadzania tekstu
  • ins – oznaczenie dodanego tekstu wewnątrz paragrafu, najczęściej oznaczony podkreśleniem
  • kbd – kontener tekstu wprowadzanego przez użytkownika z klawiatury np. F5
  • keygen – reprezentacja kontrolera generatora par kluczy
  • label – etykieta pola formularza w interfejsie użytkownika
  • legend – tytuł na granicy ramki
  • li – pozycja z listy
  • link – źródło odwołania (np. css)
  • main
  • map – kontener mapy odsyłacza
  • mark – ciąg znaków, tekstu w jednym dokumencie, oznaczony lub wyróżniony jako odwołanie w innym dokumencie, oznaczenie tekstu ważnego, przydatnego dla czytelnika
  • menu – lista poleceń
  • meta – dodatkowe informacje
  • meter – kontener określający wartość z przedziału
  • nav – sekcja nawigacji
  • object – osadzony obiekt, osadzenie apletów Java, atrybut type definiuje rodzaj osadzanego obiektu, atrybuty width, height – określają wymiary osadzanego apletu, współpracuje ze znacznikiem param
  • ol – lista numerowana
  • optgroup – tworzenie grup opcji na liście
  • option – poszczegulne opcje rozwijanej listy
  • output – definiuje postęp zadania dowolnego typu, pozwala na umieszczenie wyników obliczeń bezpośrednio na stronie
  • p – blok paragrafu
  • param – dodawanie parametrów, np. przy osadzaniu apletu Java, znacznik bez pary domykajacej
  • pre – tekst z zachowaniem jego oryginalnego formatowania
  • progress – postęp zadania
  • q – cytowany tekst w cudzysłowie, mała partia tekstu będącego częścią większego elementu tekstowego
  • rp – wskaźnik w anotacjach języka programowania Ruby definiujący co pokazać przeglądarkom, które nie obsługują elementu <ruby>
  • rt – komponent tekstowy anotacji języka Ruby
  • ruby – element bloku anotacji Ruby
  • samp – przykład kodu komputerowego, wynik działania aplikacji np.: Hello World
  • script – kontener JavaScript lub innego skryptu
  • section – identyfikator do grupowania treści
  • select – lista wybieralna
  • small – mały tekst
  • source – kontener zasobów multimedialnych różnych specyfikacji
  • span – wpisana sekcja w dokument
  • strong – zaakcentowany mocno tekst
  • style – kontener rodzaju stylu
  • sub – indeks dolny
  • summary – informacja dotycząca elementu details
  • sup – indeks górny – x<sup>2</sup>
  • table – tabela
  • tbody – właściwa zawartość tabeli
  • td – komórka tabeli
  • textarea – obszar tekstowy
  • tfoot – stopka tabeli
  • th – nagłówek tabeli
  • thead – nagłówek tabeli
  • time – kontener daty/czasu, z atrybutem datatime gdzie podaje się czas w formie dostosowanej dla aplikacji i robotów sieciowych
  • title – tytuł dokumentu
  • tr – wiersz tabeli
  • ul – lista wypunktowana
  • var – styl zmiennej w formule
  • video – element odnośnika pliku video
  • wbr – miejsca możliwości złamania wiersza w przypadku długich słów lub ciągów znaków (Inspiracje!wbr /!Fotograficzne.pl)

Przykłady:

<figure>
 <img src="images/logo.png" alt="webscene">
 <figcaption>Wdrożenia WordPress</figcaption>
</figure>

<cite>“Swoją drogą. Opowieść o trzech podróżach po inne życie”</cite>

<blockquote cite="http://www.tomekmichniewicz.pl/">„Zabiorę cię w dowolne miejsce na świecie. Pod jednym warunkiem – decyzję, dokąd chcesz lecieć i po co, musisz podjąć już, w tej chwili”.</blockquote>

<abbr title="ang. Hyper Text Markup Language">HTML</abbr>

<object type="application/x-java-applet" height="250" width="250">
 <param name="code value="aplication" />
 <param name="archive" value="aplication.jar" />
 The applet can't be started. Install the Java Virtual Machine
</object>

Inspiracje<wbr />Fotograficzne<wbr />.pl

 

Wykorzystanie znacznika ruby do przypisów nad wyrazami:

<ruby>Agnieszka<rt>imię</rt> Trefler<rt>nazwisko</rt></ruby>

 

obiekty DOM w HTML5 do przechowywania:

  • przechowywanie w sesji
  • przechowywanie globalne
  • przechowywanie lokalne
  • przechowywanie w bazie danych

przechowywanie w parach: klucz-wartość

 

Przechowywanie w sesji

użytkownik może przechowywać dane pojedynczej strony tak długo jak trwa przeglądanie tej strony. Opuszczenie strony równa się utracie danych.

metody przechowywania:

  • set – .setItem() – pobieranie danych
  • get – .getItem() – pobieranie danych

 

przechowywanie wartości: sessionStorage.setItem(„key”, value);

pobranie przechowywanych danych: sessionStorage.getItem(key);

key – wartość tekstowa, lub zmienna/funkcja zawierająca/zwracająca typ tekstowy.

 

<script type="text/javascript">
  webData=new Object();
  
  webData.setData=function(){
    sessionStorage.setItem("firstM",document.mountain.firstM.value);
  }
  
  webData.getFirst=function(){
    mountainName=sessionStorage.getItem("firstM");
    alert(mountainName + " it's a mountain");
  }
</script>




<form name="mountain">
  <input type="text" name="firstM" placeholder="first mountain"> 
  <input type="button" onClick="webData.setData()" value="save">  
  <input type="button" onCLick="webData.getFirst()" value="check">
</form>



 

Przechowywanie lokalne

jest trwałe. działa podobnie jak cookies ale z różnicami:

  • prz. lokalne pozwala na przechowywanie wykorzystujące większą ilość przestrzeni niż cookies
  • dane prz. lokalne nie są automatycznie retransmitowane za każdym zapytaniem do serwera – dużo mniej pracy dla serwera i przegladarki
  • dane prz. lokalnie są transmitowane tylko w odpowiedzi na zapytanie

Przechowywanie, czyszczenie, odzyskiwanie danych poprzez element – localStorage()

 

wykaz elementów HTML:

http://www.html-5-tutorial.com/all-html-tags.htm

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

 

Ogólne nowości w html5:

  • usprawniona obsługa błędów podczas parsowania HTML
  • zintegrowane sprawdzanie poprawności formularzy
  • lokalne przechowywanie
  • znaczniki nagłówka i stopki
  • zintegrowana obsługa znaczników audio/wideo
  • znacznik canvas – dynamiczne tworzenie grafiki i obrazów
  • interfejs API (Application Programming Interface) geolokacji, drag & drop, Google Docs

 

testowanie w przegladarkach