Lekcja 6

Lekcja 6: Tekst naukowy na stronie www
W tej lekcji zostaną pokazane przykłady wprowadzania tekstu naukowego na stronę www. Ta
umiejętność jest bardzo przydatna dla każdego nauczyciela, który zechce publikować na stronie
zadania dla uczniów czy artykuły popularno – naukowe.
Tekst „humanistyczny”
Czcionka wyróżniona (emfaza)
Zwykła, napisana pismem pochyłym <em> </em>
Mocna, pogrubiony tekst <strong> </strong>
Podkreślenie
Pozwala podkreślić fragment tekstu. <u>...</u>
Stosując styl, można nadać inny kolor linii podkreślenia niż kolor tekstu
<span style="color: red"><u>< span style="color: black">To jest czarny tekst
podkreślony niebieską linią</span></u></span>
Tekst pomniejszony i powiększony
<small> </small.
<big> </big>
Skrót i akronim
Polecenia oznaczają obecność skrótów (np. dyr., prof.) i akronimów (np. WWW)
<abbr lang="pl">Prof.</abbr>
<acronym lang="en">WWW</acronym>
Czcionka przekreślona
Pozwala przekreślić część tekstu.
<s>...</s> lub <strike>...</strike>
Stosując styl, można nadać inny kolor linii przekreślenia niż kolor tekstu
<span style="color: red"><s><span style="color: black">Czarny tekst przekreślony
czerwoną linią</span></s></span>
Definicja
Zapisuje definicję jakiegoś terminu pojawiającego się po raz pierwszy, wyświetlana jest kursywą
<dfn>...</dfn>
Cytat
Oznacza cytowany tekst, napisany pismem pochyłym
<cite>...</cite>
Blok cytowany
Ma podobne znaczenie do cytatu, ale tekst wyświetlany jest w osobnych liniach. Można go używać
do zacytowania jakiegoś większego fragmentu utworu np. wiersza. Dodając znacznik <pre>
uzyskujemy taki efekt jaki wprowadzimy z klawiatury.
<blockquote><pre> </pre> </blockquote>
Adres
<address>...</address>
Zmiany w tekście
Pozwala wpisać informację o wprowadzonych na stronie zmianach w treści.
Treść wstawiona: <ins>tekst wstawiony</ins>
Treść usunięta: <del>tekst usunięty i już niedostępny</del>
Wcięcie tekstu
Pozwala dodać dowolnej wielkości wcięcie dla pierwszej linii akapitu. <text-indent>
Do znacznika akapitu dodajemy styl:
p{
text-indent: 30px;
}
Tytuł
Wyróżnia wielkość tytułów (6 najmniejszy, 1 największy)
<hn>...</hn>
(n = 1...6)
Słownik
Polecenie tworzy listę definicyjną , gdy piszemy jakieś polecenia lub np. dialogi.
<dl>
<dt><b>Pierwsza nazwa</b><br>
<dd>Definicja pierwszej nazwy<br>
<dt><b>Druga nazwa</b><br>
<dd>Definicja drugiej nazwy<br>
</dl>
gdy zapisujemy dialogi
<dt><b>Imię</b><br>
<dd>Treść wypowiedzi<br>
Tekst „matematyczno - przyrodniczy”
Indeks
Wprowadzanie indeksów górnych lub dolnych przy cyfrach i literach.
Indeks górny: <sup>...</sup>
Indeks dolny: <sub>...</sub>
Zmienna
Wprowadzanie zmiennej matematycznej lub języka programowania, która zostaje wyróżniona.
<var>...</var>
Tablica znaków
Gdy zachodzi potrzeba użycia znaków specjalnych np. § czy liter greckiego alfabetu - π lub
niemieckiego - Ü, to należy wykorzystać tablicę znaków. Wpisujemy je na dwa sposoby: podając
numer &#960; lub nazwę &pi; (przykład dla litery π – pi).
Ten sam sposób wykorzystujemy do pisania wzorów matematycznych, fizycznych, reakcji
chemicznych.
-przyspieszenie liniowe w ruchu po okręgu a=ωo*t+ε*t2/2 zapiszemy w postaci takiego kodu
&#945; = &#969;<sub>0 </sub>t +(&#949; t<sup>2</sup> /2)
-promil ‰ - &#8240; &permil; np. 2‰
-strzałka w prawo →- &#8594; &rarr; np.C+O2→CO2
-stopień ° - &#176; &deg; np.18°C
Wzory możemy wpisywać na stronie także jako grafikę. Należy je przygotować w dowolnym
edytorze wzorów np. Equation 2.0 , MathCast czy darmowym OpenOffice Math i każdy zapisać
sobie w folderze Wzory i wykorzystywać do pracy. Szybki sposób zapisu duże ilości wzorów w
formacie gif zrealizujemy w OpeenOfiice:
-piszemy w Math wszystkie potrzebne wzory
-kreujemy z tego stronę www Plik-Kreatory-Strona www (klikamy dalej, dalej bez ustawiania)
-zostanie automatycznie utworzony folder o nazwie content, w którym będzie każdy wzór zapisany
jako osobny gif. I gotowe.
Inne elementy w tekście
Pozioma linia
<hr>
Rysowanie poziomej linii. Może ona np. rozdzielać kolejne przykłady na naszej stronie.
Atrybuty linii:
bez cienia - noshade
grubość - size=”x”
długość - width=”x” lub width=”x%” (długość w procentach względem ekranu)
kolor - color=”red”
położenia na stronie - align=”rodzaj”
Obramowanie
Wprowadzanie obramowanie wokół wybranego fragmentu tekstu.
<fieldset>...</fieldset>
Zwykle polecenie to stosuje się wraz z: <legend>...</legend>, które dodaje tytuł do ramki:
<fieldset><legend>tytuł ramki</legend>zawartość ramki</fieldset>
Komentarz
Gdy chcemy umieścić na stronie pewien tekst, który nie musi być wyświetlony na stronie.
<code> </code>
Wykresy
Wykresy i schematy umieszczamy na stronie jako grafikę. Wykresy funkcji matematycznych
możemy rysować w programie typu edytor tekstu, arkusz kalkulacyjny czy np. w darmowym
programie Wykresy, Graph czy Geometria.
Porada:
Adres strony na której znajduje się lista darmowego oprogramowania do wykorzystania w różnych
dziedzinach nauki
http://www.searchengines.pl/index.php?s=3f9089e77ea1474fac11bcfbd50f5a9d&showforum=72
Zadanie zaliczeniowe nr 6:
Wykorzystując informacje podane w wykładzie oraz tablice znaków przygotuj jedną lub dwie
strony ze swojej dziedziny wprowadzając na nie treści dydaktyczne, które wykorzystasz np. na
lekcji czy kółku przedmiotowym. Wyślij plik jako html.
Przykład 20 zadanie z fizyki
Fragment kodu do zadania z fizyki:
<b>zadanie 1</b><br>
Samochód porusza się z prędkością 20 m/s. Oblicz jaką drogę przejedzie w ciągu
30 minut.
<p>
<b>Dane:</b><br>
v=20 m/s<br>
t=30 min.=1800 s<br>
s=?<br></p>
<b>s=v<sup> . </sup>t</b><br>
s=20 m/s <sup>.</sup>1800 s=36 000 m = 36 km<br>
Odp.: Samochód przejedzie 36 km