Strona internetowa l.3
bkolcz
Created on May 3, 2020
Over 30 million people create interactive content in Genially.
Check out what others have designed:
PROMOTING ACADEMIC INTEGRITY
Presentation
ARTICLES
Presentation
AGRICULTURE DATA
Presentation
THE OCEAN'S DEPTHS
Presentation
C2C VOLUNTEER ORIENTATION
Presentation
LAYOUT ORGANIZATION
Presentation
TALK ABOUT DYS TEACHER-TEACHER
Presentation
Transcript
Strona internetowawprowadzamy zmiany
Barbara Kołcz
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> Przyroda Podlasia<title> Strona Kasi Leckiej </title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <meta charset="utf-8"></head> <body> Na stronie przedstawię uroki Podlasia</body> </html>
Szkilet strony www
Tekst na stronie www
Wyrównanie tekstu do lewej strony (domyślnie) <p align="left">Treść akapitu</p> lub po prostu <p>Treść akapitu</p> Wyrównanie tekstu do prawej <p align="right">Treść akapitu</p> Wyśrodkowanie tekstu <p align="center">Treść akapitu</p> Justowanie tekstu (wyrównanie do obu marginesów jednocześnie) <p align="justify">Treść akapitu</p>
Obrazy na stronie www
< Do umieszczenia elementu graficznego na stronie służy znacznik <IMG> (ang. Image), który posiada atrybuty SRC (ang. Sourse) oraz ALT.SRC określa źródło - tu wskazujemy obrazek, który chcemy wstawić, ALT natomiast wprawadza tekst w przypadku, gdyby wskazany obrazek nie wyświetlał się z jakieś przyczyny u naszego użytkownika.Przykład<IMG SRC="obrazek.jpg" ALT="To jest obrazek">Na stronę wstawiono grafikę o nazwie obrazek.jpg, zaś tekst, który pojawi się w przypadku kłopotów z obrazkiem brzmi: To jest obrazek.Zwróć uwagę, że zarówno nazwę pliku jak i tekst alternatywny piszemy w " ".
Obrazy na stronie www i nowe elementy
Za pomocą kolejnych atrybutów WIDTH i HEIGHT możemy określić wielkość naszego obrazka (szerokość i wysokość). Można jako jednostkę wybrać np. piksele. <IMG SRC="obrazek.jpg" ALT="To jest obrazek" WIDTH="100" HEIGHT="80"> - to znaczek html – spacja <center></center> - jeżeli chcemy kilka elementów wycentrować to wstawiamy to między znaczniki center<hr> - znacznik lini poziomej na stronie<hr style="height: 5px; color: yellow">
nowe elementy
<p></p> - oznaczenie akapit<br/> - Tekst na stronie internetowej będzie przenoszony do następnej linii, kiedy na jej końcu zabraknie miejsca.
Kod strony www do nowych elementów
<body style="background-color: green"><h1 style="text-align: center;color: white">Moje zainteresowania</h1> <hr style="height: 5px; color: yellow"> <center> <strong>Kilka zdań o mnie</strong> <strong>To co lubię</strong> <strong>Moi znajomi</strong> <p> <img src="lilia.jpg" alt="Przyroda" width="600" height="400" /> </center> </body>
Kod strony www po wprowadzeniu zmian
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <strong>imię i nazwisko</strong> <title> Strona „wpisz swoje imię i nazwisko”</title> <meta charset="utf-8"></head> <body style="background-color: green"> <h1 style="text-align: center;color: white">Moje zainteresowania</h1> <hr style="height: 5px; color: yellow"> <center> <strong>Kilka zdań o mnie</strong> <strong>To co lubię</strong> <strong>Moi znajomi</strong> <p> <img src="lilia.jpg" alt="Przyroda" width="600" height="400" /> </center> </body> </html>
Praca własna - instrukcja
- Załóż na swoim komputerze, np. w Dokumentach - katalog - strona www
- znajdź w sieci zdjęcie na licencji CC
- zapisz go w utworzonym katalogu (zapamiętaj ejgo nazwę i rozszerzenie)
- otwórz Notatnik
- skopiuj kody do strony z ostatniej strony prezentacji w Genially
- zmień tekst i kolory na własne i nazwę pliku graficznego na swój
- zapisz plik w utworzonym katalogu - zapisz jako - index.html (zapisz jako typ plików - wszystkie pliki)
- wejdź do swojego katalogu - uruchom plik - pokaże się Twoja strona www - zrób screena (shift+okienko windows+s) i wstaw do konwersacji zespołu - ctrl+v