XHTML Budowa strony WWW

Wielkość: px
Rozpocząć pokaz od strony:

Download "XHTML Budowa strony WWW"

Transkrypt

1 XHTML Budowa strony WWW Wydział Fizyki Politechnika Warszawska 2019 dr inż. Marzena Sala-Tefelska

2 Założenie strony www na serwerze student 1. Tworzymy główny plik o nazwie index.html (plik tekstowy). UWAGA!: Nazwa głównego pliku musi być index.html! Dodatkowe podstrony można już nazywać dowolnie np. optyka.html, astronomia.html 2. Plik index.html, a także inne pliki muszą posiadać prawa do odczytu, jeśli ich nie mają, trzeba im je nadać 3. Tak przygotowane pliki umieszcza się w katalogu /home/www/login, login jest dla każdego przypisany 4. W katalogu /home/www/login można tworzyć podkatalogi i w nich zapisywać np. obrazki, pliki, które następnie są wyświetlane na stronie (w ten sposób zachowujemy porządek :) ) 5. W pasku adresu przeglądarki internetowej należy wpisać: Właśnie pod tym adresem będzie widoczna Wasza strona :)

3 Edytor Bluefish Dostępny pod Linuksa i Windowsa

4 Edytor Bluefish Dostępny pod Linuksa i Windowsa

5 Edytor Bluefish - ustawienia Tryb języka

6 Edytor Bluefish - ustawienia Kodowanie znaków ang. character encoding

7 Struktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia stron WWW, specyfikację XHTML przygotowuje organizacja W3C (World Wide Web Consortium), która ustanawia standardy pisania i przesyłu stron WWW Dokumenty XHTML są zgodne ze składnią XML (ang. Extensible Markup Language rozszerzalny język znaczników uniwersalny język znaczników przeznaczony do reprezentowania różnych danych w strukturalizowany sposób) Plik zawierający kod xhtml jest plikiem tekstowym

8 Struktura XHTML Zawartość pliku o nazwie index.html: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>tytuł strony</title> <meta http-equiv="content-type" content="text/html; charset=iso " > </head> <body> <p> Przykład akapitu </p> </body> </html> Zawartość strony, ciało dokumentu WWW Nagłówek

9 Struktura XHTML <?xml version="1.0" encoding="iso "?> Każda strona w języku XHTML musi zaczynać się od określenia wersji języka XML (tutaj mamy wersję 1.0) i sposobu kodowania znaków. Dla języka polskiego mamy iso Przeglądarka odczytując kod wie, że strona jest zgodna z XML kodowanym w standardzie iso

10 Struktura XHTML Zawartość pliku o nazwie index.html: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>tytuł strony</title> <meta http-equiv="content-type" content="text/html; charset=iso " > </head> <body> <p> Przykład akapitu </p> </body> </html> Zawartość strony, ciało dokumentu WWW Nagłówek

11 Struktura XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Dokumenty XHTML muszą spełniać ograniczenia podane w DTD (ang. Document Type Definition - definicja typu dokumentu). Obowiązkowo musi pojawić się deklaracja typu dokumentu przed elementem podstawowym czyli html. W języku XHTML 1.0 są trzy wersje DTD: Strict (ścisła) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Transitional (przejściowa) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Frameset (ramkowa) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "

12 Struktura XHTML Zawartość pliku o nazwie index.html: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>tytuł strony</title> <meta http-equiv="content-type" content="text/html; charset=iso " > </head> <body> <p> Przykład akapitu </p> </body> </html> Zawartość strony, ciało dokumentu WWW Nagłówek

13 Struktura XHTML <html xmlns=" xml:lang="en" lang="en"> Elementem podstawowym w dokumencie musi być html. Element ten musi zawierać deklarację xmlns identyfikującą przestrzeń nazw XHTML, która stanowi zbiór nazw używanych w dokumencie jako typy elementów i nazwy atrybutów. znaczniki

14 Struktura XHTML Zawartość pliku o nazwie index.html: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>tytuł strony</title> <meta http-equiv="content-type" content="text/html; charset=iso " > </head> <body> <p> Przykład akapitu </p> </body> Nagłówek Zawartość strony, ciało dokumentu WWW </html> UWAGA: Aby zrobić komentarz w kodzie należy tekst zamieścić między <!-- --> np. <!-- jakiś komentarz -->

15 Struktura XHTML Zawartość pliku o nazwie index.html: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>tytuł strony</title> <meta http-equiv="content-type" content="text/html; charset=iso " > </head> <body> <p> Przykład akapitu </p> </body> Nagłówek Zawartość strony, ciało dokumentu WWW </html> UWAGA: Aby zrobić komentarz w kodzie należy tekst zamieścić między <!-- --> np. <!-- jakiś komentarz -->

16 Struktura XHTML Znaczniki to zdefiniowane nazwy składnia języka xhtml. Znaczniki zapisuje się wewnątrz nawiasów ostrokątnych < > np. <p> - znacznik akapitu Każdy znacznik po otwarciu należy zamknąć poprzez </p>: np. <p> tekst </p> <a> - znacznik odnośnika (link, odsyłacz do innej strony WWW lub np. do miejsca na tej samej albo innej stronie)

17 Struktura XHTML Znaczniki XHTML mogą mieć jeszcze atrybuty, które zmieniają ich właściwości np. atrybut href do znacznika <a>, który określa adres innej strony <a href = > Wydział Fizyki </a> W tej sytuacji po naciśnięciu na tekst Wydział Fizyki przejdziemy na stronę wydziału Znacznik img odpowiada za wyświetlanie obrazków. Ma wiele atrybutów, a jednym z nich jest src (czyli source źródło obrazka). Zastosujemy obrazek jako odnośnik do innej strony: <a href = target="_blank"> <img src= obrazki/logowf.png width= 120 height= 60 alt= Wydział Fizyki border= 0 /></a> Dodatkowo zastosowaliśmy atrybuty: target, width, height, alt, border

18 Struktura XHTML WAŻNE! 1. Znaczniki należy zamykać w kolejności odwrotnej do ich otwierania: <p> tekst <b> teskt2 </b> </p> 2. Nazwy znaczników i atrybutów obowiązkowo muszą być pisane małymi literami 3. Wartości atrybutów muszą być ujęte w cudzysłowy <td rowspan = 3 > 4. Puste znaczniki np. znacznik przerwy lub linii poziomej muszą mieć znacznik zamykający albo ich znacznik otwierający musi się kończyć na /> <br/> <br/> <hr></hr> lub <hr/> 5. Nie można zagnieżdżać (umieszczać jeden w drugim) następujących znaczników: a nie może zawierać innych elementów a label nie może zawierać innych elementów label (do formularza) form nie może zawierać innych elementów form (do formularza) pre nie może zawierać elementów: img, object, big, small, sub, sup (do formularza) button nie może zawierać elementów: input, select, textarea, label, button, form, fieldset, iframe, isindex (do formularza)

19 Podstawowe znaczniki/elementy body - definiuje zawartość strony WWW b - pogrubiony tekst head - określa nagłówek strony h1 - rozmiar nagłówka h1, h2, h3, h4, h5, h6 ul - określa listę zwykłą li - określa element listy ol - określa listę numerowaną img - określa grafikę p - określa akapit table - określa tabelę td - określa komórki tabeli th - określa tytuł kolumny tr - określa wiersz tabeli hr - określa linię poziomą

20 Struktura XHTML Zawartość znacznika head <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title> Strona domowa - imię i nazwisko </title> <meta http-equiv="content-type" content="text/html; charset=iso " > <meta http-equiv="reply-to" content="kubus.puchatek@pw.edu.pl"/> <meta name="description" content="moja strona domowa" /> <meta name="keywords" content="stu milowy las, miód, pszczółki" /> <meta name="author" content="kubuś Puchatek" /> <meta name="copyright" content="kubuś Puchatek" /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> </body> </html>

21 Struktura XHTML Zawartość znacznika head <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title> Strona domowa - imię i nazwisko </title> <meta http-equiv="content-type" content="text/html; charset=iso " > <meta http-equiv="reply-to" content="kubus.puchatek@pw.edu.pl"/> <meta name="description" content="moja strona domowa" /> <meta name="keywords" content="stu milowy las, miód, pszczółki" /> <meta name="author" content="kubuś Puchatek" /> <meta name="copyright" content="kubuś Puchatek" /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> </body> </html>

22 Struktura XHTML - tabelka W znaczniku <body> <table border="2"> <tr> <td> pierwszy wiersz (rząd), pierwsza komórka </td> <td> pierwszy wiersz (rząd), druga komórka </td> </tr> <tr> <td> drugi wiersz (rząd), pierwsza komórka </td> <td> drugi wiersz (rząd), druga komórka </td> </tr> </table>

23 Struktura XHTML - tabelka W znaczniku <body> <table border="4" style="border-color:purple; border-style:dashed;"> <thead> <!-- thead - znacznik nagłówka --> <tr><th><font color="green"> Nagłówek1 </font> </th><th>nagłówek2</th></tr> </thead> <tbody> <!-- dane tabeli --> <tr> <td> pierwszy wiersz (rząd), pierwsza komórka </td> <td> pierwszy wiersz (rząd), druga komórka </td> </tr> <tr> <td> drugi wiersz (rząd), pierwsza komórka </td> <td> drugi wiersz (rząd), druga komórka </td> </tr> </tbody> </table> UWAGA: zalecane jest żeby formatowanie tabel (czyli wysokość, szerokość, tło, etc.) przenosić do CSS. Należy dodatkowo pamiętać, że atrybutu width można używać w znacznikach table, img, td, etc., natomiast atrybutu height można używać w znacznikach img, td, etc. ale bez znacznika table!

24 Struktura XHTML - tabelka W znaczniku <body> <table border="2"> <tr> <td colspan="2"> pierwsza komórka i druga komórka połączone</td> </tr> <tr> <td> drugi wiersz (rząd), pierwsza komórka </td> <td> <img src="lodka.gif" width="100" alt="lodka" /> </td> </tr> <tr> <td rowspan="3"> połączone 3 wiersze (rzędy) </td> <td> wiersz </td> </tr> <tr> <td> wiersz </td> </tr> <tr> <td> wiersz </td> </tr> </table>

25 Struktura XHTML - listy Lista numerowana: <ol> <li> punkt pierwszy </li> <li> punkt drugi </li> <li> punkt trzeci </li> </ol> Lista zwykła punktowa: <ul> <li> punkt pierwszy <ul> <li>podpunkt pierwszy</li> <li>podpunkt drugi</li> </ul> </li> <li> punkt drugi </li> <li> punkt trzeci </li> </ul>

26 Style CSS CSS - Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) CSS jest ściśle powiązany z językiem opisu struktury dokumentów takich jak (X)HTML. CSS daje możliwość globalnego zarządzania formą prezentacji całej witryny internetowej. UWAGA: Część poleceń stylów może nie być interpretowana/obsługiwana przez niektóre przeglądarki. Oczywiście strona wyświetli się, ale może brakować jakiegoś elementu stylu. Zatem najlepiej sprawdzić efekty pracy w najbardziej popularnych przeglądarkach: Firefox, Opera, Google Chrome czy też Internet Explorer Za pomocą języka (X)HTML wstawia się znaczniki do kodu źródłowego strony, a następnie dzięki CSS można nadać im potem określony sposób wyświetlania.

27 Style CSS Wewnętrzny arkusz stylów: W pliku index.html <head> <!-- definiujemy kaskadowe arkusze stylów: --> <style type="text/css"> kod CSS </style> </head>

28 Style CSS Wewnętrzny arkusz stylów: przykład W pliku index.html <head> <!-- definiujemy kaskadowe arkusze stylów: --> <style type="text/css"> body { background-color: #E6E6FA; /* background-image: url(ocean01.jpg); */ } p, center, h1, ul, td, tr, a { font-weight: bold; font-style: italic; font-family: arial; } </style> </head>

29 Style CSS Zewnętrzny arkusz stylów: W pliku index.html zamieszczamy <head> <link rel="stylesheet" href="moje_style.css" type="text/css" /> <title>strona z użyciem CSS </title> <!--wyświetla się na górze przeglądarki --> </head>

30 Style CSS Zewnętrzny arkusz stylów: W nowym pliku o nazwie moje_style.css zakończonej.css Ogólny schemat zapisywania kodu CSS selektor { właściwość: wartość; } - można użyć dowolnej nazwy

31 Style CSS Kod CSS: body { background-color: #E6E6FA; /* background-image: url(ocean01.jpg); */ } Komentarz w CSS p, center, h1, ul, td, tr, a { font-weight: bold; font-style: italic; font-family: arial; }

32 Klasy class Klasy mogą zostać użyte do uchwycenia dowolnej liczby elementów (w tym także jednego!) Zewnętrzny arkusz stylów: Selektor poprzedzony znakiem kropki.klasa1 { color: red; text-decoration: overline; }.klasa2 { color: blue; text-decoration: underline; } W pliku index.html musi się znaleźć nazwa klasy: <p class="klasa1">to jest tekst określony klasą pierwszą</p> <p class="klasa2">to jest tekst określony klasą drugą</p>

33 Klasy class Klasy mogą zostać użyte do uchwycenia dowolnej liczby elementów (w tym także jednego!) Zewnętrzny arkusz stylów: p.klasa1 { color: red; text-decoration: overline; } p.klasa2 { color: blue; text-decoration: underline; } W pliku index.html musi się znaleźć nazwa klasy: <p class="klasa1">to jest tekst określony klasą pierwszą</p> <p class="klasa2">to jest tekst określony klasą drugą</p>

34 Identyfikatory id Identyfikatory stosuje się do uchwycenia tylko jednego elementu w sposób unikalny. W kodzie xhtml nie mogą istnieć elementy o takim samej wartości atrybutu id!! Element posiadający unikalny identyfikator może zostać użyty do różnorodnych celów przede wszystkim jako sposób linkowania do konkretnych części dokumentu (kotwica nawigacyjna), jako uchwyt dla skryptów JS oraz do ostylowania konkretnego elementu w CSS. Selektor poprzedzony znakiem # #topright { color:blue; text-decoration: underline; } W pliku index.html musi się znaleźć nazwa id: <div id="topright">...zawartość... </div>

35 Element liniowy span Wyodrębnia elementy liniowe np. fragmenty tekstu, które można odpowiednio poprzez arkusz stylów zdefiniować, np. kolor, typ czcionki itd. <p> To jest przykładowy tekst. <span class= tekst1 > A ten jest napisany w kolorze czerwonym. </span> To jest przykładowy tekst. W pliku style.css należy dodać.tekst1 { color: red; } To jest przykładowy tekst. A ten jest napisany w kolorze czerwonym. To jest przykładowy tekst.

36 Element blokowy div Wyodrębnia poszczególne bloki w układzie dokumentu, np. menu nawigacyjne, stopkę dokumentu itd. Przykład strony

37 Zawartość index.html <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <link rel="stylesheet" href="mojestyle.css" type="text/css" /> <title>strona </title> </head> <body> <div id="top"> <div id="tytul">tytuł strony</div> <div id="menu">menu nawigacyjne</div> <div id="tresc">treść strony</div> <div id="stopka">stopka</div> </div> </body> </html>

38 Zawartość mojestyle.css html, body { background-color: #FFFAFA; color: #000; margin: 0; padding: 0; text-align: center; } #top { width: 780px; margin-left: auto; margin-right: auto; text-align: left; } #TYTUL { background-color: #D2B48C; } #MENU { width: 150px; float: left; overflow: hidden; background-color: #FFEFD5; } #TRESC { width: 630px; float: left; overflow: hidden; background-color: #F5DEB3; } #STOPKA { clear: both; width: 100%; background-color: #F4A460; }

39 Przykład zdefiniowanych stylów Zewnętrzny arkusz stylów: table { width: 70%; border: 4px; border-color: green; border-style: dotted; background-color: #B0C4DE; } td /* do obramowania wewnętrznego */ { border: 1px; border-color: black; border-style: solid; color: navy; /* kolor czcionki w tabeli */ }

40 Przykład zdefiniowanych stylów Zewnętrzny arkusz stylów: ol { color: green; font-weight: bold; } ul { color: purple; } a:link { color: blue; } a:visited { color: navy; }

41 Przydatne strony Walidator XHTML - Walidator CSS - Tag count: Kolory:

Podstawy (X)HTML i CSS

Podstawy (X)HTML i CSS Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z

Bardziej szczegółowo

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

Wykład 1: HTML (XHTML) Michał Drabik Wykład 1: HTML (XHTML) Michał Drabik 1 Czyli to wszystko co trzeba wiedzieć aby zacząć tworzyć strony internetowe. 2 HTML 4 HTML = HyperText Markup Language Hipertekstowy język znaczników umożliwiający

Bardziej szczegółowo

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

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

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

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów opracowanie I. K. używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów ISO-8859-2 - norma międzynarodowa określająca sposób kodowania

Bardziej szczegółowo

Elementarz HTML i CSS

Elementarz HTML i CSS Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna

Bardziej szczegółowo

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

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński PROGRAMOWANIE KASKADOWE ARKUSZE STYLÓW CASCADING STYLE SHEETS Za pomocą HTML tworzymy strukturę dokumentu, jego elementy oraz treść CSS służy do opisu wyglądu struktury dokumentu, elementów oraz treści

Bardziej szczegółowo

Przedmiot: Grafika komputerowa i projektowanie stron WWW

Przedmiot: Grafika komputerowa i projektowanie stron WWW KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW 1 opracował: dr inż. Jerzy Januszewicz HTML (HyperText Markup

Bardziej szczegółowo

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

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2 Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy

Bardziej szczegółowo

HTML (HyperText Markup Language)

HTML (HyperText Markup Language) HTML (HyperText Markup Language) Struktura dokumentu tytuł strony sekcja nagłówka Tutaj wpisujemy

Bardziej szczegółowo

Hyper Text Markup Language

Hyper Text Markup Language Podstawy projektowania dokumentów WWW Język znaczników HTML Hyper Text Markup Language Język słuŝący do zapisu dokumentów WWW. Opisuje wygląd dokumentu i definiuje łączniki hipertekstowe, pozwalające na

Bardziej szczegółowo

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

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

TWORZENIE STRON WWW. Zasady opisu stron w języku HTML: TWORZENIE STRON WWW Strony WWW definiowane są za pomocą języków opisu stron. Najpopularniejszym językiem tego typu jest język HTML (Hyper Text Markup Language). Zasady opisu stron w języku HTML: - opis

Bardziej szczegółowo

Programowanie internetowe

Programowanie internetowe Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML

Bardziej szczegółowo

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

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css. Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu

Bardziej szczegółowo

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

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385.

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385. Źródła CSS: http://www.csszengarden.com/ XHTML: http://www.xhtml.org/ XML: http://www.w3.org/xml/ PHP: http://www.php.net/ JavaScript: http://devedgetemp.mozilla.org/library/manuals/2000/javas cript/1.5/reference/

Bardziej szczegółowo

Budowa dokumentu HTML 5

Budowa dokumentu HTML 5 Podstawy HTML 5 i CSS Budowa dokumentu HTML 5 Na dokument HTML składają się deklaracje: typu dokumentu DTD, nagłówka oraz treści strony. Deklaracja dokumentu DTD określa w jaki sposób przeglądarka reaguje

Bardziej szczegółowo

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik Zaawansowana Pracownia Komputerowa - Ćwiczenia Krzysztof Miernik HTML - Podstawowe Informacje HTML to hipertekstowy język znaczników (ang. HyperText Markup Language) służacy do tworzenia stron internetowych

Bardziej szczegółowo

O stronach www, html itp..

O stronach www, html itp.. O stronach www, html itp.. Prosty wstęp do podstawowych technik spotykanych w internecie 09.01.2015 M. Rad Plan wykładu Html Przykład Strona www Xhtml Css Php Js HTML HTML - (ang. HyperText Markup Language)

Bardziej szczegółowo

CSS - layout strony internetowej

CSS - layout strony internetowej www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach: Ćwiczenie 1 Proszę przy pomocy listy stworzyć menu pionowe o następujących własnościach:

Bardziej szczegółowo

Wprowadzenie do języka HTML

Wprowadzenie do języka HTML Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

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

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. Reformuje on znane zasady języka HTML 4 w taki sposób, aby były zgodne z XML (HTML przetłumaczony na XML).

Bardziej szczegółowo

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

Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski Podstawy HTML i CSS Grzegorz Arkit Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski 13 października 2016 G. Arkit (WMIiE) Podstawy HTML i CSS 13 października 2016 1 / 20 Informacja

Bardziej szczegółowo

Specyfikacja techniczna dot. mailingów HTML

Specyfikacja techniczna dot. mailingów HTML Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej

Bardziej szczegółowo

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: 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

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

Laboratorium 1: Szablon strony w HTML5 Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony

Bardziej szczegółowo

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument

Bardziej szczegółowo

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

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional). Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu

Bardziej szczegółowo

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

Programy dedykowane do edycji stron internetowych dzielą się na dwa rodzaje: 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

Bardziej szczegółowo

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony

Bardziej szczegółowo

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

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów. Kaskadowe arkusze stylów Kaskadowe arkusze stylów CSS (Cascading Style Sheets) służą do definiowania sposobu wyświetlania elementów HTML. Pozwalają np. określać rozmiar i kolor czcionki, definiować odstępy

Bardziej szczegółowo

Tworzenie stron internetowych w oparciu o język HTML

Tworzenie stron internetowych w oparciu o język HTML Ćwiczenie 1 Temat: Tworzenie stron internetowych w oparciu o język HTML Cel ćwiczenia: Celem ćwiczenia jest zapoznanie studenta z technologią tworzenia stron internetowych z wykorzystaniem języka HTML.

Bardziej szczegółowo

Narzędzia informatyczne w językoznawstwie

Narzędzia informatyczne w językoznawstwie Narzędzia informatyczne w językoznawstwie HTML i XHTML Marcin Junczys-Dowmunt junczys@amu.edu.pl Zakład Logiki Stosowanej http://www.logic.amu.edu.pl 17. października 2007 Marcin Junczys-Dowmunt Narzędzia

Bardziej szczegółowo

Wybrane znaczniki HTML

Wybrane znaczniki HTML Wybrane znaczniki HTML Struktura dokumentu HTML informacje o dokumencie i plikach zewnętrznych zawartość wyświetlana w przeglądarce wraz z tagami formatującymi

Bardziej szczegółowo

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

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

Kurs HTML 4.01 TI 312[01]

Kurs HTML 4.01 TI 312[01] TI 312[01] Spis treści 1. Wiadomości ogólne... 3 2. Wersje języka HTML... 3 3. Minimalna struktura dokumentu... 3 4. Deklaracje DOCTYPE... 3 5. Lista znaczników, atrybutów i zdarzeń... 4 5.1 Lista atrybutów

Bardziej szczegółowo

Znaczniki języka HTML

Znaczniki języka HTML www.math.uni.lodz.pl/ radmat Elementy inline ... Elementy inline ... ... Elementy inline ... ... ... Elementy inline

Bardziej szczegółowo

WITRYNY I APLIKACJE INTERNETOWE

WITRYNY I APLIKACJE INTERNETOWE WITRYNY I APLIKACJE INTERNETOWE TECHNIKUM INFORMATYCZNE wg programu 351203 KLASA II 3 godz. tygodniowo 90 godziny Liczba godzin w cyklu kształcenia 180 rok szkolny 2013/2014 Sylwia Płonka 2. W 1980 fizyk

Bardziej szczegółowo

Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz

Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz Wykład 2 TINT XHTML tabele i ramki Zofia Kruczkiewicz 1. Tabele 1.1. Przykład tabeli zawierającej kalendarz na miesiąc marzec ... definiuje tabelę Atrybuty: border ="" obramowanie tabeli,

Bardziej szczegółowo

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable

Można też ściągnąć np. z: http://portableapps.com/apps/development/notepadpp_portable W zadaniach można używać programu Notepad++ (jest wygodny, ponieważ m.in. koloruje składnię i uzupełnia funkcje) albo też jakiegoś innego edytora zainstalowanego w systemie (np. notatnika). Najnowszą,

Bardziej szczegółowo

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

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Nazwa implementacji: CSS i box model Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Wprowadzenie CSS (kaskadowe arkusze stylów, ang. Cascading

Bardziej szczegółowo

Witryny i aplikacje internetowe

Witryny i aplikacje internetowe Test z przedmiotu Witryny i aplikacje internetowe Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch

Bardziej szczegółowo

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

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce

Bardziej szczegółowo

Strony WWW - podstawy języka HTML

Strony WWW - podstawy języka HTML Strony WWW - podstawy języka HTML Jacek Krzaczkowski 2004 r. HTML (Hyper Text Markup Language) jest językiem opisu dokumentu używanym do tworzenia stron WWW. Znaczniki języka HTML informują przeglądarkę

Bardziej szczegółowo

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2} Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu.

Bardziej szczegółowo

Systemy internetowe HTML

Systemy internetowe HTML Systemy internetowe HTML West Pomeranian University of Technology, Szczecin; Faculty of Computer Science Kwestie organizacyjne Obecność na wykładach nieobowiązkowa Obecność na laboratoriach obowiązkowa

Bardziej szczegółowo

Politechnika Gdańska Wydział Elektrotechniki i Automatyki Kierunek: Automatyka i Robotyka Studia stacjonarne I stopnia: rok I, semestr II

Politechnika Gdańska Wydział Elektrotechniki i Automatyki Kierunek: Automatyka i Robotyka Studia stacjonarne I stopnia: rok I, semestr II SIECI KOPMPUTEROWE I TECHNOLOGIE INTERNETOWE (SKiTI) Wykład 11 Wprowadzenie do (X)HTML Politechnika Gdańska Wydział Elektrotechniki i Automatyki Kierunek: Automatyka i Robotyka Studia stacjonarne I stopnia:

Bardziej szczegółowo

www.fwrl.pl/szkolenie

www.fwrl.pl/szkolenie STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

Responsywne strony WWW

Responsywne strony WWW www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę zaprojektować następujący layout strony, oparty na DIV-ach: Aby osiągnąć powyższy efekt, w pliku CSS powinniśmy utworzyć reguły: #cala_strona width: 780px;

Bardziej szczegółowo

plansoft.org Zmiany w Plansoft.org

plansoft.org   Zmiany w Plansoft.org Zmiany w Plansoft.org Mapy Google... 1 Tworzenie mapy... 2 Wprowadzanie szerokości i długości geograficznej... 2 Tworzenie mapy... 2 Dostosowanie wyglądu mapy... 3 Ograniczanie liczby zasobów do wyświetlenia

Bardziej szczegółowo

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

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej. Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 26 lutego 2006 roku Czas trwania zajęć: 90 minut, przedmiot: TI Temat lekcji: Tworzenie strony internetowej

Bardziej szczegółowo

Technologie Informacyjne

Technologie Informacyjne Technologie Informacyjne Wykªad 6 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 18 HTML HyperText Markup Language J zyk oparty na znacznikach Opisuje

Bardziej szczegółowo

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

Witryna internetowa. Należy unikać w nazwach plików używania polskich znaków. HTML Wstęp Język HTML jest uniwersalnym jezykiem wykorzystywanym przy tworzeniu stron internetowych, rozpoznawanym przez wszystkie przeglądarki internetowe niezależnie od producenta. Składa on się z elementów

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.

Ćwiczenia laboratoryjne nr 8 Podstawy języka XML. Prezentacja Danych i Multimedia II r Socjologia Ćwiczenia laboratoryjne nr 8 Podstawy języka XML. Celem ćwiczeń jest poznanie zasad tworzenia dokumentów w oparciu o język XML oraz metod modyfikacji ich

Bardziej szczegółowo

Akademia Techniczno-Humanistyczna w Bielsku-Białej

Akademia Techniczno-Humanistyczna w Bielsku-Białej Akademia Techniczno-Humanistyczna w Bielsku-Białej Wydział Budowy Maszyn i Informatyki Laboratorium z sieci komputerowych Ćwiczenie numer: 8 Temat ćwiczenia: Tworzenie stron WWW (HTML, skrypty CSS). 1.

Bardziej szczegółowo

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.

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. Style CSS Wstęp 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. Podstawową zaletą i zadaniem stylów jest oddzielenie

Bardziej szczegółowo

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

Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów. Ćw.4 Dokumenty HTML Przy pomocy języka znaczników opisać można strukturę witryny internetowej, postać i wygląd jej elementów. Znaczniki HTML (tagi) postać ogólna: zawartość

Bardziej szczegółowo

HTML podstawowe polecenia

HTML podstawowe polecenia HTML podstawowe polecenia Szkielet dokumentu:

Bardziej szczegółowo

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

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML

Bardziej szczegółowo

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008 Wprowadzenie do HTML, CSS, JavaScript, PHP Kurs 18.11 2008 22 12. 2008 Narzędzia do tworzenia i utrzymania dokumentów web owych Edytory HTML Server WWW i baz danych Przeglądarka internetowa kompilator

Bardziej szczegółowo

Tworzenie stron internetowych w kodzie HTML Cz 5

Tworzenie stron internetowych w kodzie HTML Cz 5 Tworzenie stron internetowych w kodzie HTML Cz 5 5. Tabele 5.1. Struktura tabeli 5.1.1 Odcięcia Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki w komórkach tabeli w przypadku tworzenia

Bardziej szczegółowo

Mailingi HTML. Specyfikacja techniczna

Mailingi HTML. Specyfikacja techniczna Mailingi HTML Specyfikacja techniczna Informacje wstępne Grupa Morizon S.A. zastrzega sobie prawo do odmowy emisji materiałów reklamowych bez podania przyczyny, w szczególności gdy ich jakość techniczna

Bardziej szczegółowo

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

Języki programowania wysokiego poziomu. HTML cz.2. Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)

Bardziej szczegółowo

Krok 1: Stylizowanie plakatu

Krok 1: Stylizowanie plakatu HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

Wordpress: http://wordpress.org. Joomla! http://www.joomla.org/ Drupal. http://drupal.org

Wordpress: http://wordpress.org. Joomla! http://www.joomla.org/ Drupal. http://drupal.org System zarządzania treścią (Content Management System, CMS) jest to aplikacja internetowa lub ich zestaw, pozwalająca na łatwe utworzenie serwisu WWW oraz jego późniejszą aktualizację i rozbudowę. Prezentacja

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

Aplikacje internetowe

Aplikacje internetowe Temat: Język HTML i style CSS Aplikacje internetowe Pracownia specjalistyczna, studia podyplomowe, rok 2011/2012 1. Stwórz formularz HTML pozwalający na rejestrację użytkownika w aplikacji internetowej.

Bardziej szczegółowo

Język HTML i podstawy CSS

Język HTML i podstawy CSS Notatki do wykładu Język HTML i podstawy CSS dr Jacek Tarasiuk WFiIS, AGH wersja 2006 Spis treści Język HTML...1 Rodzaje dokumentów HTML...1 Budowa dokumentu HTML...1 Zestawienie znaczników...2 Szkielet

Bardziej szczegółowo

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze

Bardziej szczegółowo

Sierpień 2015 rozwiązanie plik: index.htlm

Sierpień 2015 rozwiązanie plik: index.htlm Sierpień 2015 rozwiązanie plik: index.htlm strona główna //ustalamy położenie wyświetlania

Bardziej szczegółowo

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH KASKADOWE ARKUSZE STYLÓW (Cascading Style Sheets) 1. Wprowadzenie Selektory należą do kluczowych pojęć, wskazują obiekty, którym przypisujemy jakiś zestaw

Bardziej szczegółowo

Zawartość specyfikacji:

Zawartość specyfikacji: Zawartość specyfikacji: Wielkość, waga i kodowanie Umieszczanie obrazków w kreacji Elementy niedopuszczalne Nazewnictwo plików Stopka mailingu Nie spełniam wymagań pracodawcy Waga, wielkość i kodowanie

Bardziej szczegółowo

Zastosowanie kaskadowych arkuszy stylów (CSS - Cascading Style Sheets) w technologii JavaServer Faces

Zastosowanie kaskadowych arkuszy stylów (CSS - Cascading Style Sheets) w technologii JavaServer Faces Zastosowanie kaskadowych arkuszy stylów (CSS - Cascading Style Sheets) w technologii JavaServer Faces wg http://www.w3.org/tr/css3-selectors/ http://courses.coreservlets.com/course-materials/pdf/jsf/jsf2/jsf2-

Bardziej szczegółowo

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

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów. JĘZYK - HTML Hipertekst - możliwośd przechodzenia między różnymi fragmentami tego samego lub różnych dokumentów, które zostały ze sobą powiązane. Jest systemem odnośników (tzw. Skrótów), działających na

Bardziej szczegółowo

Podstawy tworzenia stron internetowych

Podstawy tworzenia stron internetowych Podstawy tworzenia stron internetowych HTML Wstęp Do edycji stron HTML (Hyper Text Markup Language) można wykorzystać dowolny edytor tekstowy (np. Notatnik) umożliwiający edycję zwykłych plików tekstowych.

Bardziej szczegółowo

HTML jak zrobić prostą stronę www

HTML jak zrobić prostą stronę www HTML jak zrobić prostą stronę www Z tej prezentacji dowiemy się: - co to jest HTML - jak znając podstawy HTML'a zrobić prostą stronę Co to jest HTML? HTML = HyperText Markup Language, czyli język znaczników

Bardziej szczegółowo

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

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień. Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do poprzedniego scenariusza, jeśli ktoś go nie skończył). Skoro jesteśmy przy odsyłaczach, to warto poznać

Bardziej szczegółowo

Facelets ViewHandler

Facelets ViewHandler JSF i Facelets Wprowadzenie JSP (JavaServer Pages) są natywną i najczęściej używaną technologią do tworzenia warstwy prezentacyjnej dla JSF (JavaServer Faces) Istnieją alternatywne technologie opisu wyglądu

Bardziej szczegółowo

Projekty z Technologii Informacyjnych

Projekty z Technologii Informacyjnych Projekty z Technologii Informacyjnych Zad. 1. Opracuj prezentację w programie PowerPoint lub podobnym na zadany temat. Prezentacja powinna być przeznaczona do prezentowania w czasie ok. 10 minut. Zad.

Bardziej szczegółowo

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

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński PROGRAMOWANIE 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

Bardziej szczegółowo

1. HTML dla zielonych

1. HTML dla zielonych www.kurshtml.edu.pl 1. HTML dla zielonych Jeśli uważasz, że pisanie stron w języku HTML jest dla Ciebie "czarną magią", a sama strona jest jakimś tajemniczym i bardzo skomplikowanym dokumentem, to się

Bardziej szczegółowo

HTML kurs podstawowy. nagłówek, linia pozioma, obraz, img, ramka, div, tabela, tabel, lista

HTML kurs podstawowy. nagłówek, linia pozioma, obraz, img, ramka, div, tabela, tabel, lista HTML kurs podstawowy Wykład: język znaczników, atrybuty, XML, XHTML, rodzaje znaczników, wybór edytora, struktura dokumentu, head, title, body, kodowanie, utf-8, iso-8859-2, meta, link, akapit, font, color,

Bardziej szczegółowo

Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW

Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW Rys.1. Przykład prostej tabeli zawierającej kalendarz na miesiąc marzec ... definiuje tabelę Atrybuty: border

Bardziej szczegółowo

Plan dzisiejszego wykładu. Narzędzia informatyczne w językoznawstwie. XML - Definicja. Zalety XML

Plan dzisiejszego wykładu. Narzędzia informatyczne w językoznawstwie. XML - Definicja. Zalety XML Plan dzisiejszego wykładu Narzędzia informatyczne w językoznawstwie Perl - Wprowadzenie do XML Marcin Junczys-Dowmunt junczys@amu.edu.pl Zakład Logiki Stosowanej http://www.logic.amu.edu.pl 16. kwietnia

Bardziej szczegółowo

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

Języki programowania wysokiego poziomu. HTML cz.1. Języki programowania wysokiego poziomu HTML cz.1. Struktura dokumentu html Dokument HTML ma postać:

Bardziej szczegółowo

Wykład 6 Skrypty typu JavaScript. Technologie internetowe Zofia Kruczkiewicz

Wykład 6 Skrypty typu JavaScript. Technologie internetowe Zofia Kruczkiewicz Wykład 6 Skrypty typu JavaScript Technologie internetowe Zofia Kruczkiewicz 1 Umieszczanie kodu JavaScript w plikach XHTML http://www.w3schools.com/js/default.asp 1.1. W przypadku XHTML 1.x nie występuje

Bardziej szczegółowo

Technologie Informacyjne

Technologie Informacyjne Technologie Informacyjne Wykªad 7 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 23 HTML HTML Sªu»y do deniowania struktury dokumentu: akapity nagªówki

Bardziej szczegółowo

LABORATORIUM 5 WSTĘP DO SIECI TELEINFORMATYCZNYCH WPROWADZENIE DO XML I XSLT

LABORATORIUM 5 WSTĘP DO SIECI TELEINFORMATYCZNYCH WPROWADZENIE DO XML I XSLT LABORATORIUM 5 WSTĘP DO SIECI TELEINFORMATYCZNYCH WPROWADZENIE DO XML I XSLT 1. Wstęp XML (Extensible Markup Language Rozszerzalny Język Znaczników) to język formalny przeznaczony do reprezentowania danych

Bardziej szczegółowo

Wykład 5_2 Arkusze stylów dziedziczenie. Technologie internetowe Zofia Kruczkiewicz

Wykład 5_2 Arkusze stylów dziedziczenie. Technologie internetowe Zofia Kruczkiewicz Wykład 5_2 Arkusze stylów dziedziczenie Technologie internetowe Zofia Kruczkiewicz 1. Dziedziczenie stylów Zagnieżdżone elementy dziedziczą styl od elementów zagnieżdżających. Dziedziczenie stylu wynika

Bardziej szczegółowo

HTML DOM, XHTML cel, charakterystyka

HTML DOM, XHTML cel, charakterystyka HTML DOM, XHTML cel, charakterystyka Mariusz Kacała Łukasz Przywarty Grzegorz Trawiński HTML DOM XHTML Ramowy plan prezentacji Wstęp HTML DOM - Założenia - Model i struktura - Właściwości - Metody i zastosowania

Bardziej szczegółowo

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

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych rk Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych pojęć, prawdopodobnie zastanawiasz się, kiedy zaczniesz

Bardziej szczegółowo

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

Cel ogólny lekcji: Wprowadzenie do tworzenia stron WWW w języku HTML. Wprowadzenie pojęć: strona WWW, język HTML, dokument HTML. Piotr Chojnacki IV rok, informatyka chemiczna Liceum Ogólnokształcące Nr I we Wrocławiu Wrocław dn. 23 lutego 2006 roku Czas trwania zajęć: 45 minut, przedmiot: TI Temat lekcji: Pierwsze kroki w języku

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 6

Tworzenie Stron Internetowych. odcinek 6 Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą

Bardziej szczegółowo

I. Dlaczego standardy kodowania mailingów są istotne?

I. Dlaczego standardy kodowania mailingów są istotne? 1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego

Bardziej szczegółowo

e r T i H M r e n L T n

e r T i H M r e n L T n s e r T t w o i H M r e o T n w z n L Podstawy 1. Nawigacja na stronie jest niezwykle istotna, powinna być możliwie jak najprostsza. Pamiętajmy, że im mniej kroków do celu tym lepiej. 2. Projekt graficzny

Bardziej szczegółowo