PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński"

Alicja Piotrowska
5 lat temu
Przeglądów:

1 PROGRAMOWANIE

2 HTML W składni języka HTML wykorzystuje się charakterystyczne znaczniki. Każdy z nich zaczyna się i kończy ostrokątnym nawiasem a pomiędzy nimi znajduje się wyrażenie html. Rozróżniamy znaczniki otwarcia i zamknięcia. Drugi różni się dodatkowym znakiem forward slash poprzedzający wyrażenie html. < x > LEWY NAWIAS WYRAŻENIE PRAWY NAWIAS < p > / p > LEWY NAWIAS WYRAŻENIE PRAWY NAWIAS < LEWY NAWIAS SLASH WYRAŻENIE PRAWY NAWIAS

3 RODZAJE ZNACZNIKÓW Znacznik otwierający i zamykający <znacznik> </znacznik> np. <p> </p> Pojedynczy znacznik <znacznik> np <br> do pojedynczych znaczników zaliczamy m.in. <img >, <hr>, <link >, <meta >

4 PODZIAŁ ZNACZNIKÓW Znaczniki strukturalne opisują podstawową strukturę dokumentu <head>, <body>, <nav>, <footer>, <div>, Znaczniki formatujące określają wygląd poszczególnych elementów <b> </b>, <u> </u>, <blockquote>, Znaczniki definiujące obiekt umieszczanie w treści strony obiektów <img>, <video>, <figure>, Komentarze komentarze, to część pliku która nie jest ani wyświetlana ani interpretowana przez przeglądarkę ostry nawias, wykrzyknik, myślnik myślnik; myślnik myślnik ostry nawias, bez spacji pomiędzy znakami HTML: <! tresc komentarza >

5 ATRYBUTY Atrybuty dostarczają dodatkowych informacji o elemencie HTML Elementy HTML mogą posiadać atrybuty wyjątek stanowią znaczniki puste takie jak <br> Atrybut jest zawsze umiejscowiony w znaczniku otwierającym Atrybut składa się z pary nazwa-wartość w strukturze name= value

6 STRUKTURA STRONY WWW <!DOCTYPE html> <html> <head> <title>page Title</title> </head> <body> <h1>my First Heading</h1> <p>my first paragraph.</p> </body> </html> DOCTYPE definiuje typ dokumentu jako HTML Rozpoczęcie zawartości dokumentu HTML Rozpoczęcie części nagłówkowej (informacyjnej) dokumentu HTML Tytuł dokumentu Zakończenie części informacyjnej Rozpoczęcie widocznej części strony Nagłówek H1 Rozpoczęcie części informacyjnej dokumentu HTML Rozpoczęcie części informacyjnej dokumentu HTML Rozpoczęcie części informacyjnej dokumentu HTML

7 SEKCJA HEAD W sekcji nagłówkowej przechowujemy informacje o konfiguracji strony. Zawartość tej sekcji jest, z jednym wyjątkiem, niewidoczna, lecz określa jej ważne elementy. W tej części znajdują się następujące elementy: <title> <meta> charset, content-type content description, author, open graph (og:title,:type,:image ), twitter (:card, :url, :title ) keywords lang robots <script> text/javascript <style> text/css <link> text/css

8 KODOWANIE ZNAKÓW Aby strona, stworzona w języku polskim, poprawnie wyświetlała się w przeglądarce klienta, należy użyć odpowiedniego kodowania znaków. Dla języka polskiego mamy dostępne dwa standardy utf-8 <meta charset="utf-8"> iso <meta charset= iso "> podstawową różnicą pomiędzy standardami jest sposób przechowywania danych w pamięci komputera. UTF jest standardem wielobajtowym przechowującym wszystkie znaki Unicode. ISO jest natomiast jednobajtowy i przechowuje 256 pierwszych znaków Unicode

9 BODY W sekcji body umieszczamy widoczną zawartość strony HTML HEAD BODY

10 AKAPIT <p align= left > </p> <p align= center > </p> <p align= right > </p> <p align= justify > </p>

11 FORMATOWANIE TEKSTU Podstawowe znaczniki formatowania tekstu w HTML <strong> wyraz pogrubiony <b> wyraz pogrubiony <u> wyraz podkreślony <em> wyraz pochylony <i> wyraz pochylony <small> wyraz pomniejszony <mark> podświetlony wyraz <sup> indeks górny <sub> indeks dolny <s> wyraz usunięty <ins> wyraz wstawiony <del> wyraz usunięty <h1>..<h6> Nagłówki H1-H6

12 <ol> <li>element listy</li> <li>element listy</li> </ol> <ul> <li>element listy</li> <li>element listy</li> </ul> 1. element listy 2. element listy element listy element listy <ol> <li>element listy</li> <li>element listy <ol> <li>element listy zagnieżdżonej</li> <li>element listy zagnieżdżonej</li> </ol> </li> </ol> 1. element listy 2. element listy 1. element listy zagnieżdżonej 2. element listy zagnieżdżonej

Podobne dokumenty

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Struktura języka HTML ZNACZNIKI Oto bardzo prosta strona WWW wyświetlona w przeglądarce: Rysunek 1: Przykładowa strona wyświetlona w przeglądarce A tak wygląda kod źródłowy takiej strony: Rysunek 2: Kod