Programy dedykowane do edycji stron internetowych dzielą się na dwa rodzaje:

Podobne dokumenty
HTML podstawowe polecenia

HTML (HyperText Markup Language) hipertekstowy język znaczników

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

Przedmiot: Grafika komputerowa i projektowanie stron WWW

HTML (HyperText Markup Language)

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:

STRONY INTERNETOWE mgr inż. Adrian Zapała

Programowanie WEB PODSTAWY HTML

2 Podstawy tworzenia stron internetowych

Wykład 1: HTML (XHTML) Michał Drabik

WITRYNY I APLIKACJE INTERNETOWE

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

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

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

XHTML Budowa strony WWW


Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski

Tworzenie stron internetowych w oparciu o język HTML

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

Elementarz HTML i CSS

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych

I. Formatowanie tekstu i wygląd strony

Witryny i aplikacje internetowe

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

Źródła. cript/1.5/reference/ Ruby on Rails: AJAX: ssays/archives/

Cel ogólny lekcji: Wprowadzenie do tworzenia stron WWW w języku HTML. Wprowadzenie pojęć: strona WWW, język HTML, dokument HTML.

Justyna Klimczyk Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Wprowadzenie do języka HTML

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM

HTML jak zrobić prostą stronę www

za pomocą: definiujemy:

Moduł IV Internet Tworzenie stron www

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

TWORZENIE STRON WWW. Zasady opisu stron w języku HTML:

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów.

Strony WWW - podstawy języka HTML

TEMAT: Moja pierwsza strona WWW. Grzegorz Mazur

Tworzenie Stron Internetowych. odcinek 5

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

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

2. Projektowanie stron WWW podstawowe informacje

Programowanie internetowe

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs

O stronach www, html itp..

Ćw. IV. Tworzenie stron internetowych. Podstawy projektowania, wprowadzenie do języka HTML

Znaczniki zbudowane są ze znaków '< >', pomiędzy którymi znajduje się litera lub krótki tekst okreslający rodzaj znacznika.

Często używanym elementem języka HTML są tabele, które wykorzystuje się do wygodnego rozmieszczania informacji i obrazów.

Można też ściągnąć np. z:

I. Wstawianie rysunków

CSS - layout strony internetowej

Można też ściągnąć np. z:

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów.

Krótki przegląd własności języka CSS

Tworzenie Stron Internetowych. odcinek 6

E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >

Uwaga: znaczniki <body> </body> nie powinny byd umieszczane na stronie zawierającej ramki, w ramach FRAMESET.

Tworzenie Stron Internetowych. odcinek 6

Lab.1. Praca z tekstem: stosowanie arkuszy stylów w dokumentach OO oraz HTML/CSS

Podstawy (X)HTML i CSS

Responsywne strony WWW

Podstawy HTML. 2. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami.

Specyfikacja techniczna dot. mailingów HTML

plansoft.org Zmiany w Plansoft.org

Kurs HTML 4.01 TI 312[01]

<html> </html> <body> </body> <p> [</p>] <br> <html> <head> </head> <body> </body> </html> Materiały dydaktyczne 1/5

Wybrane znaczniki HTML

Podstawowe znaczniki języka HTML.

Technologie Informacyjne

URL:

Akademia Techniczno-Humanistyczna w Bielsku-Białej

Kaskadowe arkusze stylów (CSS)

Pierwsza strona internetowa

Języki programowania wysokiego poziomu. HTML cz.2.

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.

Tworzenie stron internetowych w kodzie HTML Cz 5

Tworzenie Stron Internetowych. odcinek 5

Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.

Podstawy tworzenia stron internetowych

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Edukacja na odległość

Laboratorium numer 1

Laboratorium 1: Szablon strony w HTML5

Proste kody html do szybkiego stosowania.

Dokument hipertekstowy

Hyper Text Markup Language

WYMAGANIA EDUKACYJNE. Witryny i Aplikacje Internetowe klasa I

Narzędzia informatyczne w językoznawstwie

Znaczniki języka HTML

Projekty z Technologii Informacyjnych

Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów.

Witryna internetowa. Należy unikać w nazwach plików używania polskich znaków.

Transkrypt:

HTML - język www. 1. HTML i XHTML HTML (Hypertext Markup Language - hipertekstowy język znaczników) to język opisu stron internetowych, przeznaczony do tworzenia dokumentów tekstowych w formacie zrozumiałym dla przeglądarki internetowej. Inaczej mówiąc, dokument HTML jest zwykłym plikiem tekstowym zawierającym polecenia HTML, które są odpowiednio interpretowane i wyświetlane przez przeglądarkę internetową. XHTML to skrót od Extensible Hypertext Markup Language, czyli rozszerzalny hipertekstowy język znaczników. Jest on rozwinięciem języka HTML bazującym na języku XML Extensible Markup Language - rozszerzalny język znaczników). XHTML eliminuje wady i nieścisłości języka HTML oraz wymusza stosowanie prawidłowej składni i reguł językowych. XHTML stopniowo zastępuje HTML stając się obowiązującym standardem tworzenia stron www zalecanym przez konsorcjum W3C. 2. Edytory stron www Do napisania strony internetowej nie jest potrzebne żadne specjalistyczne oprogramowanie, wystarczy zwykły program potrafiący zapisywać pliki w formacie tekstowym (*.txt), np: systemowy Notatnik. Ponadto większość stosowanych obecnie zaawansowanych edytorów tekstowych potrafi zapisywać pliki w formacie HTML. Jednak programy tego typu nie oferują takich możliwości i ułatwień jak programy dedykowane, przeznaczone głównie do pisania kodu w języku HTML. Programy dedykowane do edycji stron internetowych dzielą się na dwa rodzaje: o o tekstowe edytory HTML, umożliwiające tworzenie witryny internetowej poprzez bezpośrednią edycję źródła strony, wpisując znaczniki HTML wypełnione pożądaną treścią, graficzne edytory WYSIWYG, umożliwiające tworzenie strony www bez konieczności wpisywania kodu HTML. Praca nad witryną przypomina tworzenie typowego dokumentu tekstowego zawierającego obiekty i formatowanie w takim kształcie, w jakim będą widoczne w przeglądarce internetowej. Zarówno edytory graficzne, jak i HTML oferują różną funkcjonalność i są mniej lub bardziej skomplikowane. Na rynku dostępnych jest wiele programów tego typu, płatnych i darmowych, które można wykorzystać do pracy nad własną stroną internetową. Decyzję co do wyboru programu należy podjąć na podstawie własnych doświadczeń, oczekiwań i upodobań, tak żeby tworzenie strony nie nastręczało problemów i nie zniechęciło do ich pisania. Spośród wielu dostępnych programów na uwagę zasługuje edytor tekstowy KED, który dostępny jest pod Windows na licencji Freeware oraz bluefish pod Linuxem. Przykładem edytorów graficznych jest MS Front Page dostępny w systemie Windows lub KompoZer pod Linuxem.

3. Nazewnictwo plików Witryna internetowa może być zbudowana z jednego lub wielu dokumentów HTML, a każdy plik wchodzący w skład witryny internetowej powinien mieć rozszerzenie.htm, html lub xhtml. Główny dokument powinien nosić nazwę index.html (rozszerzenie może się różnić) i powinien być zapisany w katalogu głównym serwisu. Nazwy plików powinny być pisane małymi literami i nie powinny zawierać polskich znaków diakrytycznych. 4. Struktura dokumentu HTML Polecenie HTML składa się z pary znaczników: otwierającego i zamykającego. Znacznik (tag) to ciąg znaków objęty nawiasami ostrymi, np: <p>,<h1>,<title>, który jest odpowiednio rozumiany przez przeglądarkę. Znaczniki powinny być pisane małymi literami, co jest zalecane przez specyfikację HTML. Przykładowe polecenie formatujące tekst jako nagłówek stopnia pierwszego wygląda tak: <h1>jakiś nagłówek</h1> Każdy dokument HTML zawiera szkielet, w którym musi się znaleźć cały kod opisujący stronę www. Szkielet ten stanowi para znaczników <html> </html>, pomiędzy którymi znajduje się sekcja nagłówkowa objęta parą znaczników <head> </head>. Treść strony internetowej (tzw. ciało dokumentu), powinna być objęta parą znaczników <body> </body>. Szkielet dokumentu powinien być poprzedzony definicją typu dokumentu, czyli powinien zawierać tzw. prolog: <?xml version="1.0" encoding="iso-8859-2"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> Deklaracja ta mówi, że dany dokument pisany jest w języku XHTML. Sekcja head zawiera m.in. informacje nagłówkowe ujęte w znaczniki <meta... />, które opisują zawartość dokumentu. Znaczniki te nie są obowiązkowe z punktu widzenia poprawności dokumentu, ale mają znaczenie dla różnych programów internetowych, np: wyszukiwarek. Na przykład informacje o zawartości strony podaje się w taki sposób: <meta name="description" content="strona internetowa pracowni komputerowej " /> Ostatecznie szkielet dokumentu (HTML 4.01) powinien wyglądać tak jak poniżej: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>tytuł strony</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <meta name ="description" content="jakaś tam treść" /> </head>

<body> Ciało dokumentu zbudowane z poleceń HTML </body> </html> 5. Podstawowe znaczniki Tytuł (nagłówek) Tytuły, zwane też śródtytułami lub nagłówkami (heading), są podstawowymi elementami dzielącymi dokument na logiczne części. Pełnią one analogiczną rolę, jak nagłówki w gazecie. W języku HTML mamy do dyspozycji sześć poziomów tytułów, które można stosować hierarchicznie - tytuł stopnia drugiego, z punktu widzenia logiki treści, jest podrzędny w stosunku do tytułu stopnia pierwszego, a trzeci - w stosunku do drugiego. <h1> Tytuł stopnia pierwszego</h1> <h2> Tytuł stopnia drugiego</h2> Nagłówki można swobodnie formatować za pomocą stylów, określając atrybuty czcionki, wyrównanie i wcięcie tekstu, kolor, marginesy i obramowania itd. <h1 style="text-align: right; ">Śródtytuł wyrównany do prawego marginesu</h1> <h1 style="letter-spacing: 1mm; border: 3px double; padding: 10px; ">Obramowany śródtytuł z literami co 1mm</h1> <h1 style="font-variant: small-caps; text-align: center; color: darkseagreen; background-color: black; ">Śródtytuł w kolorze darkseagreen na tle black</h1> Śródtytuły powinniśmy traktować jako podstawowe elementy strukturalne dokumentu, natomiast cała strona prezentacyjna, wizualna, jest przenoszona do kaskadowych arkuszy stylów, za pomocą których możemy swobodnie manipulować tymi elementami, mając nieograniczoną wręcz swobodę ich wizualizacji. Akapit Akapit jest podstawowym elementem zawierającym tekst w dokumentach HTML i służy do wydzielania fragmentów zawierających jakąś zwartą myśl. Obok śródtytułów jest najważniejszym elementem strukturalnym dokumentu HTML. <p>treść akapitu</p> <p style="text-align: right; ">Akapit wyrównany do prawego marginesu</p> <p style="word-spacing:1em; border: 1px dashed brown; padding:5px; ">Obramowany akapit z wyrazami co 1em i wewnętrznym odstępem 5 pikseli</p> <p style="width: 50%; text-indent: 5em; line-height: 200%; text-align: justify; color: blue; ">Akapit w niebieskim kolorze, w pojemniku o szerokości 50%, wyrównany do obu marginesów, z wcięciem pierwszego wiersza i podwójną wysokością wiersza</p>

Znacznik końca wiersza Znacznik końca wiersza służy do przełamywania wiersza i przenoszenia treści do następnego wiersza bez kończenia akapitu. Nowy wiersz jest wprowadzany bez dodatkowej interlinii, w przeciwieństwie do polecenia akapitu, które wprowadza dodatkowy odstęp między dwoma akapitami z tekstem. <br /> Pozioma linia Pozioma linia to po prostu kreska ciągnąca się przez całą szerokość okna lub pojemnika, w którym została umieszczona. <hr /> <hr style= border-top:1px dashed red; border-width:1px 0 0 0; height:1px; > <hr style= background-color:red; color:red; border-width:0; height:10px; > Komentarz <!--... --> Polecenie pozwala wstawiać do dokumentu komentarz autora. Treść komentarza nie będzie wyświetlana na ekranie, ale stanowi dodatkową informację dla samego autora lub osoby czytającej, gdy zajrzy do źródła dokumentu. Na przykład: <!-- Ten dokument jest w trakcie budowania. Najprawdopodobniej następne zmiany pojawią się w przyszłym miesiącu --> Zakres Zakres definiowany jest za pomocą polecenia <span> </span>. Jest elementem wydzielającym jakiś fragment dokumentu, ale w przeciwieństwie do polecenia div pełni tę rolę jako element liniowy, np. pozwala wydzielić fragment akapitu i nadać mu za pomocą stylów specjalne formatowanie, jak pogrubienie tekstu w kolorze niebieskim albo pochylenie tekstu na zielonym tle. <span>... </span> <p>w tym akapicie <span style="font-weight:bold; color:blue">ten fragment jest pogrubiony i w niebieskim kolorze</span>, natomiast <span style="fontstyle:italic; background-color:green">ten fragment jest pochylony i na zielonym tle</span>, a tu jest koniec akapitu.</p> Obraz Wstawianie zdjęć polega na podaniu adresu obrazka za pomocą znacznika <img src="/obraz.png" />. Obraz nie jest wbudowywany w stronę, lecz w kodzie strony zawarta jest informacja o lokalizacji danego zdjęcia. Należy zatem pamiętać, aby w miejscu wskazanym przez atrybut src znajdował się obrazek o podanej nazwie. W przeciwnym razie obrazek nie zostanie wyświetlony na stronie, lecz pojawi się pusty prostokąt.

Przykład: <img src="/procesor.png" style="width: 50px; height: 50px; float: both; margin: 3pt 3mm 1pt 0;" alt="procesor" title="procesor klasy Pentium" /> Odsyłacz Odsyłacz (link, odnośnik, hiperłącze), to element aktywny, kliknięcie którego powoduje przejście do innego miejsca w dokumencie, na innej stronie lub do innej usługi (poczta, plik), znajdującego się często na na innym serwerze, odległym nawet o setki kilometrów. Odsyłaczem może być tekst lub grafika. Dla odróżnienia od zwykłego tekstu zamieszczonego na stronie www, odsyłacz wyróżnia się stosując inny sposób formatowania, np.: kolor czcionki, tła, styl znaków, kursora, itp. Odsyłacze, cechuje także zmiana wyglądu po najechaniu kursorem myszy. Odsyłacz umieszcza się pomiędzy znacznikami: <a>odsyłacz</a>, np.: odsyłacz do strony Gimnazjum będzie wyglądał następująco: <a href= adres >nazwa </a>. Każdemu odsyłaczowi można przypisać odmienne formatowanie, dzięki czemu hiperłącze może przyjmować różny wygląd. Formatowanie odsyłaczy odbywa się wg tych samych zasad, co formatowanie innych elementów stron www. Odsyłacze mogą wskazywać na miejsca w dokumencie, w sieci lub na typ usługi. Przykłady: <a href="http:/gimsusz.pl" style="color:green;background-color:yellow;texttransform:uppercase;">szkoła w Pilźnie</a> <a href="#nazwa_zakładki" style="color:red;background-color:grey;texttransform:uppercase;">szkoła Pilzno</a> <a href="http://gimsusz.pl#nazwa_zakładki" style="color:red;backgroundcolor:white;font-size:40px;">szkoła</a> <a href="mailto: sekretariat@pilzno.pl" style="color:white;backgroundcolor:green;border: 2px outset white;text-decoration:none">napisz do Szkoły</a> Często spotykaną konstrukcją odsyłacza jest odsyłacz graficzny, który zamiast tekstu wyświetla obrazek. Obrazek staje się częścią aktywną odsyłacza i kliknięcie go powoduje skok do wskazanego miejsca. W zasadzie w każdym z powyższych przykładów możemy zastosować odsyłacz obrazkowy. <a href="http://www.onet.pl"><img src="/obrazek.gif" alt="onet.pl" /></a>