HTML i tworzenie stron internetowych

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "HTML i tworzenie stron internetowych"

Danuta Żukowska
9 lat temu
Przeglądów:

1 HTML i tworzenie stron internetowych Jolanta Bachan jolabachan@gmail.com Informatyka

2 Syllabus Tworzenie stron internetowych w HTML Pakiet OpenOffice.org Writer, Impress, Drawing, Calc Analiza i anotacja sygnału mowy Zaliczenie: Strona internetowa z elementami HTML oraz web portfolio Dokument: OO Writer i OO Impress z obrazem stworzonym w OO Drawing i wykresem oraz tabelą z OO Calc Anotacja dźwięków mowy Obecność na zajęciach (dopuszczalne 2 nieobecności) Rejestracja w USOSie Jolanta Bachan 2

elementami HTML oraz web portfolio Dokument: OO Writer i OO Impress z obrazem stworzonym w OO Drawing

3 Bibliografia Weber, J. H OpenOffice.org Writer The Free Alternative to Microsoft Word. O'Reilly Community Press. Gibbon, D What a Linguist Needs to Know about Word Processing. Based on E-MELD Project Consultant's Report Gibbon, D Stylesheet for Term Papers and Theses - Guidelines for Students of English Linguistics. Universität Bielefeld Online tutorials: Jolanta Bachan 3

Based on E-MELD Project Consultant's Report 2004-10-01. Gibbon, D. 2007.

4 HTML HTML: Hyper Text Markup Language Plik HTML to plik tekstowy zawierający małe znaczniki, tzw. tagi (markup tags) Tagi mówią przeglądarce internetowej, jak strona ma być wyświetlana Każdy plik HTML ma rozszerzenie htm lub html Plik HTML może być utworzony używając prostego edytora tekstu Jolanta Bachan 4

tagi (markup tags) Tagi mówią przeglądarce internetowej, jak strona ma być

5 Wskazówki na początek Zawsze używaj małych liter dla znaczników <h1>, nie <H1> Zawsze domykaj znaczniki <h1>to jest nagłówek 1</h1> Używaj cudzysłowów przy podawaniu konkretnych wartości poleceń i atrybutów <a href=" Onet.pl</a> Nie mieszaj znaczników <strong><em>witam wszystkich</em></strong> Jolanta Bachan 5

podawaniu konkretnych wartości poleceń i atrybutów <a href="http://www.onet.

6 UTF-8 Kodowanie znaków <meta http-equiv="content-type" content="text/html;charset=utf-8" /> j. polski <meta http-equiv="content-type" content="text/html; charset=iso " /> j. japoński <meta http-equiv="content-type" content="text/html; charset=shift_jis"> Znaki specjalne Jolanta Bachan 6

7 Moja pierwsza strona internetowa <html> <head> <title>tytuł</title> </head> <body> To moja pierwsza strona internetowa. </body> </html> Jolanta Bachan 7

8 Moja pierwsza strona internetowa <html> <head> <title>tytuł</title> </head> <body> To moja pierwsza strona internetowa. </body> </html> Początek dokumentu HTML Początek nagłówka Tytuł strony Koniec nagłówka Tekst wyświetlany w przeglądarce internetowej Koniec dokumentu HTML Jolanta Bachan 8

</body> </html> Początek dokumentu HTML Początek nagłówka Tytuł strony

9 Elementy HTML Dokumenty HTML to pliki tekstowe zbudowane z elementów HTML. Elementy HTML są zdefiniowane przy użyciu tagów HTML. Jolanta Bachan 9

10 Znaczniki HTML Znaczniki HTML są używane do zaznaczenia (mark-up) elementów HTML Znaczniki HTML są otoczone dwoma nawiasami < oraz > Nawiasy < > to nazywane są ostrokątnymi Znaczniki najczęściej występują w parach, np. <b> i </b> Pierwszy tag to tag początkowy (start tag), drugi to tag końcowy (end tag) Tekst pomiędzy tagami to zawartość elementu Jolanta Bachan 10

11 <b>this text is bold</b> Element HTML Element HTML zaczyna się tagiem początkowym (start tag): <b> Zawartość elementu HTML to: This text is bold Element HTML kończy się tagiem końcowym (end tag): </b> Jolanta Bachan 11

12 Podstawowe znaczniki Nagłówki <h1>this is a heading</h1> <h2>this is a heading</h2> <h3>this is a heading</h3> <h4>this is a heading</h4> <h5>this is a heading</h5> <h6>this is a heading</h6> Jolanta Bachan 12

13 Podstawowe znaczniki Paragrafy <p>this is a paragraph</p> <p>this is another paragraph</p> Jolanta Bachan 13

14 Podstawowe znaczniki Line break przeniesienie tekstu do następnego wiersza <p>this <br>is a para<br>graph with line breaks</p> Rezultat: This is a para graph with line breaks. Jolanta Bachan 14

15 Podstawowe znaczniki Horizontal rule linia pozioma <hr> Jolanta Bachan 15

16 Komentarz Podstawowe znaczniki  Jolanta Bachan 16

17 Listy unordered list: <ul> </ul> ordered list: <ol> </ol> list item: <li> </li> <ul> <li>mleko</li> <li>mąka</li> <li>jajko</li> </ul> Jolanta Bachan 17

18 <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Tabele Jolanta Bachan 18

19 Tabele <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Początek tabeli Wiersz tabeli (table row) Komórki (table data cell) tworzą kolumny Koniec wiersza tabeli Wiersz tabeli (table row) Komórki (table data cell) tworzą kolumny Koniec wiersza tabeli Koniec tabeli Jolanta Bachan 19

(table row) Komórki (table data cell) tworzą kolumny Koniec wiersza tabeli Wiersz tabeli

20 Tabele <table> - tabela <tr> - wiersz tabeli (ang. table row) <th> - nagłówek tabeli (ang. table heading) <td> - komórka tabeli (ang. table datum) <colspan> i <rowspan> - scal komórki Jolanta Bachan 20

21 Scal komórki: colspan <table border="1"> <tr> <th>name</th> Name Telephone Bill Gates <th colspan="2">telephone</th> </tr> <tr> <td>bill Gates</td> <td> </td> <td> </td> </tr> </table> Jolanta Bachan 21

22 Scal komórki: rowspan <table border="1"> <tr> <th>name:</th> <td>bill Gates</td> </tr><tr> Name: Telephone: Bill Gates <th rowspan="2">telephone:</th> <td> </td> </tr><tr> <td> </td> </tr></table> Jolanta Bachan 22

23 Atrybuty znaczników Atrybuty zawierają dodatkową informację o elemencie HTML Atrybut to para: nazwa = wartość Atrybuty są zdefiniowene w znaczniku początkowym elementu HTML Jolanta Bachan 23

24 Atrybuty - Przykłady <h1 align="center"> wyśrodkuj <body bgcolor="yellow"> tło <table border="1"> <font face="arial" size="70" color="red"> ramka czcionka Jolanta Bachan 24

25 Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <code> <pre> Formatowanie tekstu Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Defines computer code Defines preformatted text (preserves spaces and line breaks) Jolanta Bachan 25

26 Obrazy Obrazy są zdefiniowane jako <img> (image) Aby obraz ukazał się na stronie, należy zdefiniować atrybut src, który oznacza źródło (source) <img src="url"> Znacznik alt (alternative text) definiuje tekst, który ukaże się na stronie, jeśli obraz nie będzie mógł być wyświetlony <img src="photos\jola.jpg" alt="jola's photo"> Jolanta Bachan 26

27 Anchor <a> </a> Hyperlinki <a href="url">text to be displayed</a> Atrybut Wartość atrybutu: adres url Początek znacznika Koniec znacznika Jolanta Bachan 27

28 Hyperlinki Atrybut target <a href="url" target="_blank">text</a> Target otwiera stronę w nowym oknie przeglądarki Jolanta Bachan 28

29 Zdefiniuj cel: Hyperliki na stronie <a name="tips">useful Tips Section</a> Zdefiniuj link: <a href="#tips">jump to the Useful Tips Section</a> Jolanta Bachan 29

30 Web portfolio Jolanta Bachan 30

31 Web portfolio Dziennik ucznia (Learner's diary) Podsumowanie zajęć, zadania, raporty Słowniczek Dlaczego portfolio jest ważne? ocena postępów w pracy podstawowe wiadomości z zajęć, do których można się odwołać w czasie przygotowań np. do egzaminu wskazówki dla nauczyciela, czego uczniowie nie rozumieją i co wymaga dalszej pracy Jolanta Bachan 31

32 Web portfolio Co powinno zawierać portfolio? Table of contents - contains all the topics covered in the course. Introduction - what do I expect to learn in the course? How can I use gained knowledge? Learner's Diary - contains the topic of a lecture, the date of the lecture, the content of the class, evaluation of the lecture and glossary entries. Exercises and homework. Glossary - technical terms introduced in the class. Evaluation - overview of a single class and assessment. Jolanta Bachan 32

33 Web portfolio Dlaczego portfolio powinno być online? łatwiejszy dostęp sposób na zapoznanie się z mediami elektronicznymi forma Applied Text Linguistics Jeśli jeszcze nie masz strony internetowej, to załóż ją dziś! Jolanta Bachan 33

34 Przykładowe portfolio Moja strona internetowa i moje web portfolia Moje blogi Jolanta Bachan 34

35 Zadanie Załóż swoją własną stronę internetową Jolanta Bachan 35

36 Załóż swoją własną stronę internetową Bezpłatne konta Płatne konta większa pojemność brak reklam Na swoim komputerze serwer Apache Jolanta Bachan 36

37 Załóż swoją własną stronę internetową Bezpłatne konta Płatne konta większa pojemność brak reklam Na swoim komputerze serwer Apache Jolanta Bachan 37

38 miasto.interia.pl Jolanta Bachan 38

39 miasto.interia.pl Jolanta Bachan 39

40 miasto.interia.pl Jolanta Bachan 40

41 miasto.interia.pl Jolanta Bachan 41

42 Zadanie domowe Odwiedź stronę: i przejdź niezapomniany kurs HTMLa! Utwórz swoje web portfolio strona internetowa w HTML Jolanta Bachan 42

43 Do zobaczenia za tydzień! Jolanta Bachan 43

Podobne dokumenty

HTML i tworzenie stron internetowych

HTML i tworzenie stron internetowych Informatyka 2009-02-23 Syllabus Tworzenie stron w HTML Pakiet OpenOffice.org Writer, Impress, Drawing, Calc Zaliczenie: Strona internetowa z elementami HTML zaprezentowanymi