Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Podstawy języka HTML. Jak stworzyć najprostszą stronę www? Informacje nagłówkowe Właściwa treść (ciało) dokumentu.

Podobne prezentacje


Prezentacja na temat: "Podstawy języka HTML. Jak stworzyć najprostszą stronę www? Informacje nagłówkowe Właściwa treść (ciało) dokumentu."— Zapis prezentacji:

1 Podstawy języka HTML

2 Jak stworzyć najprostszą stronę www? Informacje nagłówkowe Właściwa treść (ciało) dokumentu

3 Tytuł strony Tytuł własny strony TITLE - nie oznacza wcale tytułu na stronie. Zawarta między tymi znacznikami treść ukaże się w pasku tytułowym przeglądarki, a nie w dokumencie.

4 Strona kodowa lub

5 Podsumowując Tytuł strony właściwa treść (ciało) dokumentu

6 Kolor tła "kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą wartości szesnastkowych - #FF0000, #008000, #000000, #FFFFFF

7 Tytuły, czyli nagłówki... Wartość domyślna: Zawsze pogrubione i wyrównane do lewej. Opcje: Opcje: (align=left/center/right) Największy Najmniejszy

8 Akapity i wiersze To jest treść pierwszego akapitu To jest treść drugiego akapitu

9 Wiersze Znacznik stosujemy, gdy chcemy przejść do następnego wiersza To jest pierwszy wiersz To jest drugi wiersz To jest trzeci wiersz To jest czwarty wiersz znaczy break, czyli złamanie linii

10 Pozioma linia Opcje dodatkowe: size – rozmiar w pikselach, noshade – brak cieniowania, color – kolor linii, width – długość w pikselach lub procentach strony. strony. align – typ wyrównania (do lewej, środka, prawej)

11 Wykazy – wypunktowane Dlaczego uczę się języka HTML? Uważam, że dzięki temu stworzę swoją własną stronę www Uważam, że to frajda Uważam, że w taki sposób nauczę się podstaw programowania Opcje dodatkowe: type=kształt (circle,square,disc)

12 Wykazy – numerowane Dlaczego uczę się języka HTML? Uważam, że to bardzo przydatna umiejętność Uważam, że dzięki temu nauczę się podstaw programowania Uważam, że to jest fajna zabawa Opcje dodatkowe: type=typ (A, a, I, i, 1) start=x (początek numeracji

13 Atrybuty czcionek To jest tekst normalny To jest tekst pogrubiony (bold) To jest tekst pochylony (italic, kursywa) To jest tekst podkreślony (underlined) To jest tekst przekreślony (strike) Czcionka o stałej szerokości Tekst cytatu książkowego

14 Odsyłacze (linki, hiperłącza) Oficjalna witryna Gimnazjum w Mierzęcicach Napisz do nas (Kolory ) vlink vlink=kolor (kolor łącza odwiedzonego) alink alink =kolor (kolor łącza podczas kliknięcia)

15 Wielkość czcionki Wielkość bezwzględna Tekst objęty definicją x = Wielkość względna Tekst objęty definicją x = 1...6

16 Kolor czcionki Tekst objęty poleceniem Szesnaście podstawowych barw: black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal aqua Kolor może być podany kodem hexadecymalnym, czyli szesnastkowym w postaci: #CCF78A

17 Grafika na stronie lub Ważne!!! Konieczna ścieżka dostępu. Najlepiej umieścić plik obrazek.jpg w folderze, w którym znajduje się index.html.

18 Muzyka na stronie lub Ważne!!! Najlepiej umieścić plik muzyka.mid w folderze, w którym znajduje się plik index.html.

19 Ogólne ramy tabel

20 Wiersz tabeli

21 Komórka w wierszu Przykład:

22 Obramowanie tabeli

23 Obramowanie komórek

24 Marginesy dla komórek Kowalski

25 Szerokość tabeli, komórki Możemy podać w procentach szerokości strony, np. 45%

26 Wysokość tabeli Lub podajemy zamiast w procentach w pikselach np. 50

27 Wyrównanie tabeli

28 Poziome i pionowe wyrównanie danych w komórce Poziome Pionowe text

29 Kolor tła tabeli i komórki Obrazek w tle: !!! Można użyć dla oznaczenia koloru kodu hexadecymalnego

30 Kolor obramowania …

31 Tytuł tabeli (podpis tabeli) Tytuł tabeli umieszczony u góry Tytuł tabeli umieszczony u góry i z lewej strony

32 Dalsze kroki:

33 Kaskadowe Arkusze Stylów - Cascading Style Sheet Podstawy CSS

34 Atrybuty arkuszy stylów Atrybutu kaskadowych arkuszy stylów można pogrupować w kilka szerokich kategoriach: Wygląd czcionki i jej styl. Tło - kolor i obrazy. Wyrównywanie tekstu. Odstępy Wygląd obramowań Inne (w tym skalowanie, zawijanie tekstu i listy).

35 Wygląd i styl czcionki – cz.I AtrybutOpis font-familyOkreśla krój pisma. Wartościami są nazwy czcionek (takie jak Arial, Times lub Palatino) lub nazwa jednej z pięciu rodzin ogólnych: SERIF(times), SANS-SERIF(helvetica), CURSIVE(zaph chancery), FANTASY(western), MONOSPACE(courier) font-size Określa wielkość czcionki w oparciu o rozmiar absolutny, względny, w stosunku do wartości em oraz w procentach. (pt, in, cm, px) font-styleOkreśla styl czcionki. Jest on reprezentowany przez wartości normal, italic i oblique font-weightOkreśla grubość czcionki. Podstawowymi wartościami są normal, bold, bolder i lighter,.

36 Wygląd i styl czcionki – cz.II AtrybutOpis font Umożliwia jednoczesne dokonanie wszystkich dotychczas omawianych ustawień. Oto porządek, w jakim powinny się pojawiać atrybuty: font-style, font-variant, font-weight, font-size, line-height, font-family. color Definiuje kolor elementu tekstu i jest określany za pomocą jednego z szesnastu słów kluczowych: black, maroon lub kodem hexadec. text- decoration Umożliwia wprowadzanie dodatkowych ozdobników, takich jak podkreślenie, przekreślenie i miganie. Może przyjmować cztery wartości: none, overline, line-through i blink.

37 Wygląd i styl czcionki – cz.III AtrybutOpis backgroundUmożliwia jednoczesne definiowanie szeregu wartości atrybutów tła. Porządek jest następujący: background-color, background-image, background- position. background: gray line-heightUstawia odległość między liniami pisma (interlinia) - w (pt), (in), (cm), (px). margin-left margin-right margin-top margin-bottom Ustawia marginesy - w (pt), (in), (cm), (px). Przykład margin-left: 1.5cm text-alignUstawia justowanie (do lewej – left), do środka (center), do prawej (right). text-indentUstawia odległość od lewego marginesu - w (pt), (in), (cm), (px).

38 Wygląd i styl czcionki – cz. IV AtrybutOpis word-spacing Umożliwia zwiększenie domyślnych odstępów pomiędzy wyrazami. Odstępy są podawane w jednostkach absolutnych. Wartość domyślna to normal. letter-spacingUmożliwia zwiększenie domyślnych odstępów pomiędzy literami. Odstępy są podawane w jednostkach absolutnych. Wartość domyślna to normal.

39 Przykłady i ćwiczenia do wykonania Tekst sformatowany bez użycia stylów WYKONAJ korzystając z NOTATNIKA Oto zwykły akapit z informacjami. Oto zwykły akapit z informacjami.

Tu będzie wyświetlony pewien kod, powinien być "w courierze" i powinien mieć duże odstępy między wierszami, więcej niż normalnie w przypadku kroju średniego rozmiaru. Tu będzie wyświetlony pewien kod, powinien być "w courierze" i powinien mieć duże odstępy między wierszami, więcej niż normalnie w przypadku kroju średniego rozmiaru.
I nie zapomnij także o tej ważnej - wciętej - uwadze! I nie zapomnij także o tej ważnej - wciętej - uwadze!

40 Ćwiczenia i przykłady-śródliniowe arkusze stylów WYKONAJ korzystając z NOTATNIKA (wewnątrz WYKONAJ korzystając z NOTATNIKA (wewnątrz Oto zwykły akapit z informacjami. Tu będzie wyświetlony pewien kod, powinien być "w courierze" i powinien mieć duże odstępy między wierszami, więcej niż normalnie w przypadku kroju 12-punktowego. I nie zapomnij także o tej ważnej - wciętej - uwadze! Lecz popatrz - ma wcięcie z jednej strony, a nie z obydwu, czyli lewej i prawej. Nareszcie jest sposób na realizację tej kwestii!

41 Ćwiczenia i przykłady – cd. WYKONAJ korzystając z NOTATNIKA (wewnątrz WYKONAJ korzystając z NOTATNIKA (wewnątrz Ćwiczenie wykonane zwykłym i poniżej uproszczonym zapisem stylu CSS

Pierwszy ważny nagłówek Drugi ważny nagłówek

42 Ćwiczenia i przykłady – cd. WYKONAJ korzystając z NOTATNIKA (wewnątrz WYKONAJ korzystając z NOTATNIKA (wewnątrz Pierwszy akapit Drugi akapit Trzeci akapit

43 Obramowanie wokół tekstu

Gimnazjum w Mierzęcicach kontra

Gimnazjum w Mierzęcicach Typy obramowania groove (wyżłobienie), none (brak), dotted (kropkowane) dashed (kreskowane), solid (ciągłe), double (podwójne), Ridge (grzbiet), inset (wklęsłe), outset (wypukłe).


Pobierz ppt "Podstawy języka HTML. Jak stworzyć najprostszą stronę www? Informacje nagłówkowe Właściwa treść (ciało) dokumentu."

Podobne prezentacje


Reklamy Google