Podstawowa struktura dokumentu HTML

Slides:



Advertisements
Podobne prezentacje
Dokument HTML jest zwykłym
Advertisements

Technologie prezentacji medialnych, © 2006 Igor Garnik
Podstawowe wiadomości
Style CSS.
Podstawowa struktura dokumentu HTML
Tworzenie stron w języku WML jest zbliżone do tworzenia stron w HTML. W obydwu przypadkach używa się do tego celu znaczników (tagów). Zadaniem znaczników.
„Zasady formatowania plików w formacie Microsoft Word”
Kurs HTML.
Budowa i układ strony dokumentu
HTML ostatni następny. Edytory: Co jest potrzebne, żeby napisać stronę internetową? Teoretycznie może to być dowolny edytor tekstu.Dokument (X)HTML, czyli.
Tworzenie stron internetowych www World Wide Web
HTML 4 Zebrał i opracował : dr inż. Jerzy Zgraja.
HTML 4 Zebrał i opracował : dr inż. Jerzy Zgraja.
PODSTAWY <HTML>
Czym są HTML i XHTML? Skrót HTML pochodzi od słów Hypertext Markup Language (język znakowania hipertekstu). Język HTML jest podstawą każdej strony WWW.
Projektowanie Stron WWW
OPRACOWAŁ : KONRAD MIGAŁA iz krótki tekst Krótki tekst Do formatowania tekstu użyjemy znacznika jest to znacznik który umożliwia utworzenie akapitu.
Edytor tekstu MS WORD.
WORD Mgr inż. Jolanta Hopciaś
Wprowadzenie do edytorów tekstu.
Poznaj bliżej program Microsoft Office Word 2007
ZESTAW DO NAUKI JAVASCRIPT
Wskazówki dotyczące pisania tekstów
Tworzenie stron internetowych
ANNA BANIEWSKA SYLWIA FILUŚ
Podstawy tworzenia stron WWW
Uniwersytet Mikołaja Kopernika Wydział Fizyki, Astronomii i Informatyki Stosowanej Podyplomowe Studium Programowania i Zastosowań Komputerów Marcin Hankiewicz.
Tworzenie strony internetowej krok po kroku.
Uniwersytet Mikołaja Kopernika Wydział Fizyki, Astronomii i Informatyki Stosowanej Podyplomowe Studium Programowania i Zastosowań Komputerów Paweł Abramczyk.
Edytor tekstu Word.
Temat 7: Tekst.
Temat 8: Listy.
Temat 3: Podstawowa struktura dokumentu
Tworzenie stron internetowych www World Wide Web
Formatowanie tekstu w Microsoft Word
HTML Hyper Text Markup Language komputerowe Esperanto cz. II Obiekty podstawowe na stronach.
Wprowadzenie do HTML Informatyka Cele lekcji: Wiadomości:
Projektowanie stron www
Temat 5: Pozycjonowanie elementów
Wykaz nieuporządkowany - służy do sporządzenia wykazu nienumerowanego, w którym kolejne punkty są wyróżniane punktorami. ◦ Polecenie tworzy ramy wykazu,
Wprowadzenie do CSS Okiełznać style.
Aplikacje internetowe
Podstawy HTML RAMKi. Ramki Za ich pomocą możesz swobodnie podzielić okno przeglądarki na kilka części i w nich niezależnie przeglądać dokumenty. Ramki.
Aplikacje internetowe
Moja pierwsza strona internetowa Created by Marta Guba
Aplikacje internetowe
Dofinansowano ze środków Ministra Kultury i Dziedzictwa Narodowego
HTML Czyli Publikowanie w Internecie. Przeglądarka internetowa –Mosaic - pierwsza –Netscape –Internet Explorer –Opera –Mozilla Dokument HTML –Dokument.
LISTY HTML. Listy s ą definiowane za pomoc ą znacznika podstawowego innego dla ka ż dego rodzaju list Specyfikacja XHTML, zawiera specjalne znaczniki.
Aplikacje internetowe CSS - style fontów, tekstu Ciąg dalszy.
Treści multimedialne - kodowanie, przetwarzanie, prezentacja Odtwarzanie treści multimedialnych Andrzej Majkowski 1 informatyka +
Treści multimedialne - kodowanie, przetwarzanie, prezentacjaOdtwarzanie treści multimedialnych Andrzej Majkowski informatyka +
Aplikacje internetowe Formatowanie tekstu w HTML-u.
Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Wprowadzenie do kaskadowych arkuszy stylów Informatyka.
Temat 4: Klasy i identyfikatory
Temat 1: CSS Dołączanie stylów do dokumentu
Temat 2: Składnia kaskadowych arkuszy stylów. Za zmianę wyglądu witryny w kaskadowych arkuszach stylów odpowiadają reguły stylów. Każda z reguł powiązana.
Formatowanie dokumentów
Podstawy tworzenia stron WWW w języku HTML Koło Naukowe Elektroniki Przemysłowej - KNEP Wykonali:Mariusz Zawistowicz i Karol Witowski.
I TY ZOSTAŃ WEBMASTEREM! CZĘŚĆ 2 – „STRUKTURA STRONY” STWORZYŁ GABRIEL ŚLAWSKI.
Kaskadowe arkusze stylów CSS. Reguła CSS – definiuje sposób formatowania elementów na stronie WWW Części składowe reguły CSS selektor{ właściwość: wartość;
XHTML + CSS Style definiujące tekst Damian Urbańczyk.
Wykład 4 Informatyka MPDI sem.3 HTML cd. Arkusze stylów - CSS.
Istotą kolumn jest przedzielenie strony na kilka części położonych obok siebie. Ilość kolumn jest generowana przez użytkownika, odpowiednio dla jego potrzeb.
HTML + CSS = strony internetowe Krzysztof Geras. FAKTY I MITY Czym nie jest HTML: ● programem do tworzenia stron internetowych, ● interpreterem skryptów.
Innowacja pedagogiczna „Pasja programowania”
Hipertekst HTML WWW.
Wprowadzenie do edytorów tekstu.
W przypadku studiów pierwszego stopnia praca dyplomowa może mieć formę projektu,
Style definiujące tekst
Zapis prezentacji:

Podstawowa struktura dokumentu HTML Paulina Jankowska Karolina Ziółkowska

Czym jest HTML? HTML został wynaleziony w 1990 przez naukowca Tima Berners-Lee. Celem było ułatwienie naukowcom na różnych uniwersytetach dostępu do dokumentów badawczych. Projekt okazał się wielkim sukcesem, większym niż wyobrażał sobie to Tim Berners-Lee. Poprzez wynalezienie języka HTML, położył on fundamenty internetu takiego jaki znamy dziś. Język HTML składa się ze specjalnego ciągu znaków, nazywanego znacznikami (tzw. tagi). Dzięki nim możemy kierować wyglądem strony WWW: m.in.. ustalać grubość czcionki,kolor tekstu oraz tła, wstawiać takie elementy strony, jak np. tabele. HTML jest językiem, który umożliwia prezentację informacji (np. badań naukowych) w internecie. To co widzisz kiedy przeglądasz strony to interpretacja kodu HTML przez przeglądarkę. Aby zobaczyć kod HTML strony w internecie, po prostu kliknij "Widok" w górnym menu przeglądarki i wybierz "Źródło".

Szkielet strony HTML

Co oznacza H-T-M-L? HTML jest skrótem od "Hyper Text Mark-up Language" Hyper jest odwrotnością słowa liniowy. W dawnych dobrych czasach - kiedy mysz była czymś co gonił kot - programy komputerowe działały liniowo: kiedy program uruchomił jedną akcję szedł do następnej linii, zaraz po tym do kolejnej i tak dalej. Ale HTML jest inny - możesz iść gdziekolwiek chcesz i kiedy chcesz. Na przykład, nie trzeba odwiedzić MSN.com zanim wejdziesz na HTML.net. Text - tekst. Mark-up (podnosić) oznacza to co robisz z tekstem. Podnosisz standard tekstu tak jak to robisz za pomocą edytorów tekstowych z tytułami, wypunktowaniem lub pogrubianiem i tak dalej. Language (język) to czym jest HTML. Używa wielu Angielskich wyrazów.

Elementy blokowe i liniowe W skład języka HTML/XHTML wchodzą polecenia, dzięki którym stronę możemy podzielić na tzw. elementy blokowe oraz elementy liniowe (wierszowe), stanowiące podstawowe komponenty konstrukcyjne strony, między którymi wyświetlamy treść znaczników. Elementy blokowe występują niezależnie/odrębnie od siebie. Umieszczamy je jeden pod drugim, nigdy w jednej linii. Wewnątrz siebie mogą zawierać inne elementy blokowe lub zwyczajny tekst. Z elementów blokowych konstruujemy bloki strony większe, niż z elementów wyświetlanych w linii. Z kolei elementy liniowe (wierszowe) nie mogą zawierać wewnątrz siebie elementów blokowych, innych elementów liniowych oraz tekstu. Owszem, mogą występować w jednej linii z racji tego, że nie budują nowego wiersza.

Elementy blokowe <hn> </hn> (<h1> </h1> <h2></h2> itd. do 6) <p> </p> <br /> <hr /> <pre> </pre> <blockquote> </blockquote> <address> </address> <div> </div> <ul> </ul> <li> </li> <ol> </ol> <dl> </dl> <dt></dt> <dd></dd> <fieldset> </fieldset>

Nagłówek (tytuł, śródtytuł) <hn> Nagłówki dzielą treść strony internetowej na pewne logicznie wyodrębnione części, podobnie jak nagłówki w prasie czy książkach. W języku HTML/XHTML możemy wykorzystywać sześć poziomów tytułów, traktowanych hierarchicznie (nagłówek stopnia pierwszego jest nadrzędny w stosunku do tytułu stopnia drugiego, itd.).

Znacznik akapitu <p> Aby umieścić akapit na stronie WWW, wykorzystujemy element nazywany znacznikiem akapitu. Tekst umieszczamy wewnątrz znacznika <p> oraz </p>. Kolejne akapity umieszczamy zawsze jeden pod drugim. Niezależnie od ilości wierszy w tekście, który wprowadzamy między znacznikiem akapitu, przeglądarka odczyta tekst jako jeden ciąg tekstu, który będzie łamany w zależności od długości i dostępnej szerokości.

Znacznik końca wiersza <br /> Do złamania wiersza wewnątrz akapitu posłuży nam znacznik końca wiersza. Jest to element pusty, tj. taki który nie posiada znacznika zamykającego. W kodzie zapisujemy go w następujący sposób: <br />. Znacznik końca wiersza stosujemy wtedy, kiedy chcemy w konkretnym miejscu złamać tekst w taki sposób, żeby w każdej przeglądarce wyglądał tak, jak chcemy: np. fragment wiersza lub tekstu piosenki.

Pozioma linia <hr /> Stosując znacznik poziomej linii w kodzie, na stronie otrzymamy… poziomą linię. Obecnie bardzo rzadko używa się tego znacznika, w celu wykonania linii dekoracyjnej lepiej jest zastosować Kaskadowe Arkusze Stylów (CSS). Jest to pusty element bez znacznika zamykającego, zapisujemy go tak: <hr />.

Blok przeformatowany <pre> Blok przeformatowany <pre> umieszczając tekst wewnątrz znacznika bloku przeformatowanego <pre></pre>, zachowujemy wszystkie spacje i złamania wiersza. Będą widoczne na naszej stronie www.

Blok cytowany <blockquote> Jeśli chcemy wpisywany tekst umieścić jako cytat, stosujemy znacznik bloku cytowanego <blockquote></blockquote>. Możemy go stosować, jeśli mamy potrzebę zacytowania większego fragmentu tekstu, ciągnącego się przez wiele linijek. Wszystkie wiersze w środku bloku cytowanego rozpoczynają się tabulatorem. Jednak należy pamiętać, że nie wszystkie przeglądarki, po zastosowaniu tego znacznika, będą wyświetlały tekst ujęty w cudzysłów tak, jakbyśmy chcieli.

Adres <address> Znacznik adresu definiuje blok, w którym umieszczamy adres (własny lub jakikolwiek inny kontakt) do wyświetlenia na naszej stronie internetowej. Tekst wewnątrz znacznika zazwyczaj interpretowany jest przez przeglądarki jako czcionka pochyła. Do złamania wiersza stosujemy znacznik <br /> .

Blok dokumentu <div> Znacznik bloku dokumentu może zawierać inne elementy blokowe oraz elementy liniowe. Jest tzw. elementem ogólnym, odgrywającym szczególną rolę. Element <div></div> stosujemy przy ustalaniu struktury naszego dokumentu. Powtarzające się na stronie WWW elementy, typu menu (górne, dolne, z boku), oznaczamy jako klasy (class), natomiast elementy strony, które się nie powtarzają (nagłówek, stopka), otrzymują identyfikator (id).

Wykazy (listy) <ul> <li> <ol> Za ich pomocą tworzymy pogrupowane spisy informacji, wyświetlane w postaci punktów nienumerowanych i numerowanych. Wykaz nienumerowany (nieuporządkowany, wypunktowany) <ul> Jest on odpowiednikiem wypunktowania w edytorach tekstu, tworzymy go za pomocą elementu <ul></ul>. Wewnątrz tego znacznika umieszczamy dodatkowo element <li></li>. Jeden taki element <li></li> tworzy jedną pozycję listy. Wykaz numerowany (uporządkowany) <ol> Jest tworzony podobnie jak lista wypunktowana. Ponumerowany blok tworzymy za pomocą znaczników <ol></ol>. Również tutaj poszczególne pozycje listy tworzymy za pomocą znaczników <li></li>.

Lista definicyjna (definicji) <dl> <dt> <dd> Na pojedynczą listę definicji składa się definiowany termin <dt></dt> oraz definicja <dd></dd>. Całość zawieramy w elemencie <dl></dl>.

Obramowanie formularza <fieldset> Definiując formularz, możemy umieścić w nim dodatkowe elementy. Jednym z nich jest element grupujący <fieldset></fieldset>. Za pomocą tego znacznika możemy pogrupować kontrolki dotyczące podobnej tematyki. Zostaną one dzięki niemu otoczone obramowaniem.

Elementy liniowe <span> </span> <q> </q> <!--…--> style czcionek (fizyczne i logiczne)

Zakres <span> Znacznik <span></span>, podobnie jak <div>, należy do tzw. elementów ogólnych. Może on zawierać dowolne elementy liniowe, ale nie może zawierać żadnych elementów blokowych. Wykorzystujemy go do definiowania „nowych” elementów, w połączeniu z identyfikatorami i klasami, takich jak nazwy plików.

Cytat w wierszu <q> Znacznika <q></q> używamy do umieszczenia w tekście cytatów. W przeglądarce widoczne są one w bieżącym wierszu, bez specjalnego eksponowania. Wewnątrz znacznika nie umieszczamy znaków cudzysłowu, ponieważ z założenia przeglądarka powinna je dodać do fragmentu tekstu.

Komentarz <!--…--> Zdarza się, że musimy coś w kodzie naszej strony skomentować, lub też oznaczyć jakiś fragment dokumentu, albo tymczasowo usunąć blok kodu. W tym celu używamy znacznika komentarza <!--tu wpisz komentowany tekst-->. Cały wpisany tekst wewnątrz znacznika jest ignorowany przez przeglądarki. Należy pamiętać o tym, że komentarzy nie należy zagnieżdżać (tj. umieszczać jeden wewnątrz drugiego).

Style czcionek (fizyczne i logiczne) Są to znaczniki, za pomocą których zmieniamy wygląd pojedynczych wyrazów lub całego tekstu. Style fizyczne definiują sposób sformatowania tekstu, wyróżniając poszczególne fragmenty z całego tekstu. Poniżej pokazane są przykłady wykorzystania poszczególnych stylów fizycznych. Czcionka pogrubiona <b> Czcionka pochylona <i> Czcionka o stałej szerokości znaku <tt>

Indeks górny (superskrypt) <sup> Indeks dolny (subskrypt) <sub> Duża czcionka (+1 punkt) <big> Mała czcionka (-1 punkt) <small>

Podstawowe znaczniki

Znacznik font może przyjmować kilka parametrów: size – rozmiar czcionki, wyróżniamy względny i bezwzględny; ten pierwszy, jak sama nazwa wskazuje, ustalamy na podstawie czcionki bazowej, np. o trzy pkt. większa od standardowej, w drugim przypadku po prostu podajemy wartość, która nas interesuje: <font size="12">Tekst o rozmiarze 12</font> <font size="-8">Tekst pomniejszony o 8 pkt.</font> color – kolor, możemy podać jego nazwę (np. black) lub wpisać kod szesnastkowo <font color="red">Czerwona czcionka</font> <font color="FF0000">Czerwona czcionka zapisana heksadecymalnie</font> face – rodzaj czcionki <font face="Times New Roman"> Czcionka Times New Roman </font>