{"id":2083,"date":"2015-06-19T14:24:58","date_gmt":"2015-06-19T14:24:58","guid":{"rendered":"http:\/\/katarzyna.klessa.pl\/?page_id=2083"},"modified":"2016-06-13T16:59:48","modified_gmt":"2016-06-13T16:59:48","slug":"wybrane-elementy-html-i-css","status":"publish","type":"page","link":"http:\/\/katarzyna.klessa.pl\/?page_id=2083","title":{"rendered":"Wybrane elementy HTML i CSS"},"content":{"rendered":"

Powr\u00f3t do: Informatyka. Edukacja informatyczna<\/a>\u00a0<\/small><\/p>\n

Id\u017a do: Publikacja wynik\u00f3w ankiety on-line w postaci dokumentu HTML<\/a>.<\/small><\/p>\n

 <\/p>\n

UWAGA:<\/strong>
\nW celu wykonania \u0107wicze\u0144 w tej cz\u0119\u015bci zaj\u0119\u0107, nale\u017cy u\u017cy\u0107 jednego z notatnik\u00f3w, w kt\u00f3rych dost\u0119pna jest opcja kolorowania sk\u0142adni dokument\u00f3w, np. Notepad2<\/a>, Notepad++<\/a>. Strony o HTML, np.: http:\/\/www.kurshtml.edu.pl\/<\/a> oraz\u00a0http:\/\/www.w3schools.com\/html\/DEFAULT.asp<\/a><\/p>\n

Cz\u0119\u015b\u0107 1. Struktura dokumentu HTML, podstawowe znaczniki<\/h1>\n

W dokumentach HTML odr\u00f3\u017cnia si\u0119 zwyk\u0142y tekst oraz znaczniki. Znaczniki s\u0105 uj\u0119te w nawiasy tr\u00f3jk\u0105tne: < … > Znacznik mo\u017ce dzia\u0142a\u0107 w punkcie (np. wstawia\u0107 koniec linii lub obrazek) lub dotyczy\u0107 wybranego fragmentu tekstu (np. zamienia\u0107 wybrany fragment tekstu w nag\u0142\u00f3wek).<\/p>\n

 <\/p>\n

1.1. Struktura dokumentu HTML<\/h2>\n

G\u0142\u00f3wne sk\u0142adowe struktury dokumentu HTML: Nag\u0142\u00f3wek strony (head) oraz tre\u015b\u0107 strony (body).<\/p>\n

W cz\u0119\u015bci nag\u0142\u00f3wkowej strony (head<\/strong>) znajd\u0105 si\u0119 informacje og\u00f3lne takie jak tytu\u0142 strony, informacja o tym, w jakim j\u0119zyku jest strona, jakie s\u0105 s\u0142owa kluczowe, jakie kodowanie znak\u00f3w jest u\u017cywane, gdzie znajduje si\u0119 informacja o stylach CSS itp.<\/p>\n

Cz\u0119\u015b\u0107\u00a0body<\/strong> – tre\u015b\u0107 strony, to ta cz\u0119\u015b\u0107 strony internetowej, kt\u00f3r\u0105 widzimy w oknie przegl\u0105darki, tekst strony, obrazki, linki dost\u0119pne dla uzytkownika, dzia\u0142y strony, menu itd.<\/p>\n

\"\"<\/a><\/p>\n

Ta sama tre\u015b\u0107, do skopiowania (i poprawek<\/span>):<\/p>\n

<html>
\n<head>
\n<title>Tutaj wpiszemy nasz tytu\u0142 strony<\/title>
\n<meta name=”description” content=”Tutaj wpisz opis swojej strony”\/>
\n<meta name=”keywords” content=”Nasze s\u0142owa kluczowe”\/>
\n<meta http-equiv=”Content-Language” content=”pl”\/>
\n<meta http-equiv=”Content-Type” content=”text\/html; charset=windows-1250″ \/><link rel=”stylesheet” type=”text\/css” href=”css\/style.css” \/>
\n<\/head>
\n<body>
\nTutaj wpiszemy ca\u0142\u0105 tre\u015b\u0107 naszej strony
\n<\/body><\/html><\/p>\n

1.2 Podstawowe znaczniki u\u017cywane w body – tre\u015bci strony<\/h2>\n

Wstawianie znaku ko\u0144ca linii:<\/strong><\/p>\n

<br\/><\/span><\/strong>\u00a0Nowa linia (odpowiednik ‘enter’ w dokumencie tekstowym)<\/span><\/span><\/p>\n

 <\/p>\n

Wstawianie obrazka:<\/strong><\/p>\n

<img src=”\u015bcie\u017cka dost\u0119pu do pliku z obrazkiem” alt=”Tekst alternatywny” \/><\/p>\n

\"\"<\/a><\/p>\n

Nag\u0142\u00f3wki tekstu i paragrafy tekstu:<\/strong><\/p>\n

<h1><\/strong><\/span>G\u0142\u00f3wny nag\u0142\u00f3wek tekstu<\/h1><\/strong><\/span><\/p>\n

<h2><\/strong><\/span>Nag\u0142\u00f3wek drugi<\/h2><\/strong><\/span><\/p>\n

<p><\/strong><\/span>Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. Paragraf tekstu. <\/p><\/strong><\/span><\/p>\n

 <\/p>\n

Odsy\u0142acze:<\/strong><\/p>\n

Odsy\u0142acz do strony, kt\u00f3ra ma otworzy\u0107 si\u0119 w tym samym oknie<\/span> (np. nasza podstrona):<\/p>\n

<a href=”http:\/\/pe\u0142ny adres strony”>tekst, kt\u00f3ry wy\u015bwietli si\u0119 na stronie<\/a><\/p>\n

 <\/p>\n

Odsy\u0142acz do strony, kt\u00f3ra ma otworzy\u0107 si\u0119 w nowym oknie<\/span> (linki do zewn\u0119trznych serwis\u00f3w):<\/p>\n

<a href=”http:\/\/pe\u0142ny adres strony” target=’_blank’>tekst, kt\u00f3ry wy\u015bwietli si\u0119 na stronie<\/a><\/p>\n

\"\"<\/a><\/p>\n

Listy:<\/strong><\/p>\n

Znaczniki stosowane do wypunktowania tekstu, a tak\u017ce do tworzenia menu stron www:<\/p>\n

<ul><\/span><\/strong><\/p>\n

<li><\/span><\/strong>jeden punkt na li\u015bcie<\/li><\/span><\/strong><\/p>\n

<li><\/strong><\/span>drugi punkt na li\u015bcie<\/li><\/span><\/strong><\/p>\n

<\/ul><\/span><\/strong><\/p>\n

 <\/p>\n

Warstwy:<\/strong><\/p>\n

Znaczniki u\u017cywane do wprowadzenia warstw w dokumentach HTML. Warstwy s\u0105 u\u017cywane w projektowaniu uk\u0142adu graficznego stron, za pomoc\u0105 warstw mo\u017cna np. przestawia\u0107 wybrany fragment tekstu w inne miejsce, ustawi\u0107 fragmenty strony (menu, tre\u015b\u0107 strony, g\u00f3rny baner\/nag\u0142\u00f3wek), stworzy\u0107 tzw. ‘promo box’ itp.<\/p>\n

<div> … <\/div><\/p>\n

1.3 \u0106wiczenia:<\/h2>\n

1. Prosz\u0119 uruchomi\u0107\/pobra\u0107 program Notepad2. Prosz\u0119 ustawi\u0107 w menu ‘Widok’ -> ‘Schemat kolorowania sk\u0142adni’ -> ‘Strona internetowa’<\/p>\n

2. W programie Notepad2 prosz\u0119 utworzy\u0107 nowy plik, zapisa\u0107 go w swoim katalogu pod nazw\u0105 index.html<\/strong><\/span> W tym pliku prosz\u0119 utworzy\u0107 podstawow\u0105 struktur\u0119 dokumentu HTML: cz\u0119\u015b\u0107 nag\u0142\u00f3wkow\u0105 (head) oraz cz\u0119\u015b\u0107 g\u0142\u00f3wn\u0105, z tre\u015bci\u0105 strony (body) (wg wzoru z punktu 1.1. wy\u017cej). Tre\u015b\u0107 strony b\u0119d\u0105 stanowi\u0107 informacje\u00a0zebrane w ramach ankiety\/sonda\u017cu internetowego, tematyka mo\u017ce by\u0107 dowolna, np. dotyczy\u0107 Pa\u0144stwa hobby, zainteresowa\u0144 itp., mo\u017cna te\u017c wykorzysta\u0107 jak punkt wyj\u015bcia ankiet\u0119 na temat u\u017cycia internetu i technik komputerowych (Ankieta PDF<\/a><\/strong>\u00a0, zob. Blok 4 Wsp\u00f3\u0142praca zdalna, cz\u0119\u015b\u0107 3).\u00a0Strona internetowa ma wi\u0119c by\u0107 raportem odno\u015bnie wynik\u00f3w ankiety\/sonda\u017cu.<\/p>\n

3. W cz\u0119\u015bci nag\u0142\u00f3wkowej <head><\/strong><\/span> strony prosz\u0119 zdefiniowa\u0107:<\/p>\n