HTML5 i CSS3: Pierwsze kroki

Spisie treści
HTML (HyperText Markup Language) lub hipertekstowy język znaczników, to standard używany do tworzenia stron internetowych, jest to język oparty na znacznikach, który porządkuje informacje w oparciu o hierarchię treści. Sam HTML nie nadaje cech graficznych prezentowanym informacjom, a jedynie organizuje je w taki sposób, że ma logiczną kolejność czytania.
Po drugie CSS (Cascading Style Sheet) lub kaskadowe arkusze stylów to język używany do definiowania i tworzenia prezentacji ustrukturyzowanego dokumentu napisanego w HTML, odpowiada za formułowanie specyfikacji arkuszy stylów, które będą służyć jako standard dla przeglądarek.
W tym samouczku przedstawimy podstawową strukturę dokumentu HTML5, najpopularniejsze etykiety i hierarchiczna kolejność ich deklarowania. Z kolei wyjaśnimy związek między HTML5 i CSS3, sposób ich powiązania, strukturę deklaracji składanych w CSS3 oraz atrybuty graficzne, które mogą nadać dokumentowi HTML.
Do przykładów, które zamierzamy wykonać konieczne jest posiadanie edytora kodu, w naszym przypadku wybrany edytor to Dreamweaver CC 2014, w tutorialu Dreamweaver CS6 - podstawy: znajomość środowiska pracy opisane są cechy aplikacji, które pozostają takie same pomimo różnic w ich wersjach
1. Struktura dokumentu HTML5

DO) Ten tag wskazuje wersję, której będziemy używać w dokumencie, w tym przypadku jest to wersja 5 HTML.
B) Wskazuje otwarcie dokumentu HTML, jest to pierwszy zadeklarowany znacznik.
C) Możesz dołączyć między innymi tytuł dokumentu, skrypty, style, meta-informacje.
D) Udostępnia metadane dotyczące dokumentu HTML. Metadane nie będą wyświetlane na stronie, będą analizowane tylko jako informacje załączone. Elementy są zwykle używane do określenia m.in. opisu strony, słów kluczowych, autora dokumentu. W przykładzie pokazanym na obrazku użyliśmy atrybutu charset do zdefiniowania zestawu znaków w jakim będzie wyświetlana strona, charset = "utf-8" w przypadku języka hiszpańskiego.
ORAZ) Pozwala nam przypisać nazwę strony, która będzie się wyświetlać w przeglądarkach.
F) Ogromna większość tagów w HTML potrzebuje deklaracji otwierającej i zamykającej:
 Zawartość etykiety 
W tym przypadku pokazany obraz zamyka tag głowy za pomocą
G) Wszystko w tym elemencie będzie wyświetlane przez przeglądarkę, to znaczy w ramach tego tagu wyznaczymy całą zawartość wizualną naszego dokumentu HTML.
H) W taki sam sposób, jak wyjaśniono w sekcji F to jest zamknięcie tagu
I) W taki sam sposób, jak wyjaśniono w sekcji F to jest zamknięcie tagu
Struktura dokumentu CSS3

DO) .class: Wszystkie deklaracje zaczynające się od kropki są typu class, ich charakterystyka graficzna może być zastosowana do dowolnego znacznika HTML.
B) #Id: Deklaracje zaczynające się od krzyżyka wskazują, że jest to typ ID. Zarówno klasy, jak i identyfikatory są używane do określenia, jakie atrybuty graficzne chcemy nadać naszej zawartości HTML. Jednak różnice między tymi 2 typami oświadczeń są następujące:
Identyfikatory są unikalne:
- Każdy element może mieć tylko jeden identyfikator.
- Każda strona może mieć tylko jeden element o tym identyfikatorze.
Nasz kod HTML nie przejdzie walidacji, jeśli ten sam identyfikator zostanie użyty w więcej niż jednym elemencie.
Klasy nie są unikalne:
- Ta sama klasa może być użyta w kilku elementach.
- Możesz używać kilku klas w tym samym elemencie.
Wszelkie style, które należy zastosować do wielu obiektów na stronie, muszą być wykonane za pomocą klasy. Należy wspomnieć, że we wszystkim, co jest zadeklarowane w dokumentach CSS, rozróżniana jest wielkość liter.
C) {Nawias otwierający rozpoczynający deklarację atrybutów.
D) } Klucz zamykający deklaracje złożone do klasy lub identyfikatora.
ORAZ) Struktura atrybutu: po zadeklarowaniu atrybutu należy podać jego wartość, w przykładzie pokazanym na obrazku przypisujemy #Id wysokość 600 pikseli.
Do oddzielenia atrybutów i ich wartości używa się średnika; jak pokazano na zdjęciu.
Są to w uproszczeniu ogólna charakterystyka budowy kodu HTML, niezbędne etykiety i sposób ich zamawiania. W przypadku CSS rodzaje deklaracji i ich ogólna struktura. Dzięki tej wiedzy będziemy gotowi do stworzenia naszego pierwszego HTML i nadania etykietom charakterystyki graficznej.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt
wave wave wave wave wave