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²
• 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

• html5test.com
• fmbip.com