Want to make creations as awesome as this one?
Reuse this genially
Report content

More creations to inspire you

WOLF ACADEMY

Presentation

STAGE2- LEVEL1-MISSION 2: ANIMATION

Presentation

TANGRAM PRESENTATION

Presentation

VALENTINE'S DAY PRESENTATION

Presentation

HUMAN RIGHTS

Presentation

LIBRARIES LIBRARIANS

Presentation

IAU@HLPF2019

Presentation

Discover more incredible creations here

Transcript

HTML

STRONA INTERNETOWA

LEKCJA INFOTRMATYKI

NA DZISIEJSZEJ LEKCJI

JAK STWORZYĆ SZKIELET STRONY INTERNETOWEJ?

  • Strona internetowa jest dokumentem tekstowym zapisanym w języku HTML
  • HTML to hipertekstowy język znaczników (ang. HyperText Markup Language)
  • Hipertekst to po prostu łącze, przedstawione jako tekst, obraz, film, odsyłające do innego obiektu, będącego tekstem, obrazem, dźwiękiem, filmem czy inną stroną.
  • akualnym standardem w projektowaniu w tym jeżyku jest wersja HTML5

STRONA INTERNETOWA

  • Dokumenty HTML zapisywane są na potężnych komputerach (serwery) na stałe podłączonych do sieci internetowej
  • Użytkownik internetu może korzystać z tych dokumentów przy pomocy przeglądarek internetowych

STRONA INTERNETOWA

PODSTAWY HTML

JAK STWORZYĆ STRONĘ INTERNETOWĄ?

Znaczniki to polecenia języka HTML, pomiędzy którymi umieszczamy poszczególne elementy strony internetowej. To one decydują o kształcie strony..

W nim będziemy pisali tekst w postaci znaczników i informacji o stronie, a przeglądarki będą go odczytywać i wyświetlać na ekranie.

Do stworzenia prostej strony internetowej wystarczy zwykły notatnik zainstalowny z systemem Windows

<body>

i część główną, tzw. ciało <body>.

</html>

Na samym końcu znajduje się znacznik </html>, który wskazuje jego koniec.

<head>

Pomiędzy tymi znacznikami znajduje się treść dokumentu, która podzielona jest na dwie części: nagłówek <head>

Z kolei znacznik <html> występujący zaraz za definicją typu wskazuje początek właściwego dokumentu i jednocześnie deklaruje język, w którym dokument zostanie napisany.

<html>

ZNACZNIKI

<!doctype html>

Na początku dokumentu powinien znajdować się znacznik <!doctype html>. Nazywany jest definicją typu i może być użyty tylko raz, na samym początku pliku. Mówi on przeglądarce, ze nie jest to zwykły plik tekstowy, ale dokument HTML.

<!doctype html> <html> <head>…</head> <body>…</body> </html>

Podstawowa struktura dokumentu, która odpowiada pustej stronie jest następująca:

SRTUKTURA DOKUMENTU

Kolorem zółtym zaznaczyłem tekst który wpisujecie Wy. Reszta jest schematem, który znajduje się w każdym projrkcie strony internetowej.

<title>Tytuł dokumentu</title>Zmodyfikowany nagłówek będzie wyglądał następująco: <head> <title>Moja pierwsza strona</title> </head>

Nagłówek wyznacza początek strony i zawiera informacje o tytule dokumentu i jego autorze, rodzaju języka, którym będzie się posługiwał oraz odwołania, do innych powiązanych z nim tym dokumentem, stron i zasobów. Jedynym jego widocznym elementem na stronie jest tytuł wyświetlany na górnym pasku okna przeglądarki. Zawartość tytułu jest ponadto wykorzystywana przez wyszukiwarki przy poszukiwaniu dokumentów w sieci. Umieszcza się go w nagłówku, posługując się znacznikiem <title>:

NAGŁÓWEK

author – autor strony; <meta name=”author” content=”dane autora” /> description – opis strony do wykorzystania przez katalogi lub wyszukiwarki; <meta name=”description” content=”opis strony” /> generator – nazwa programu, przy pomocy którego powstała strona; <meta name=”Generator” content=”nazwa edytora” /> keywords – lista słów kluczowych (informujących wyszukiwarki o treściach strony) oddzielonych przecinkami; <meta name=”keywords” content=”wyraz1, wyraz2, wyraz3” /> charset – określa kodowanie dokumentu HTML. W html5 używając polskich znaków korzystamy z kodowania domyślnego UTF‑8, będącego kodowaniem uniwersalnym pozwalającym na zapisanie niemal dowolnych symboli. <meta charset=”UTF‑8” />

Oprócz tytułu w nagłówku strony znajdują się wspomniane informacje, umieszczane w pojedynczym znaczniku <meta>, z wykorzystaniem tzw. atrybutów oraz ich wartości, podawanych w cudzysłowach, np. <meta name=”nazwa” content=”treść” /> gdzie name to nazwa atrybutu, a nazwa jest wartością tego atrybutu.Przykłady znajdują się obok:NaNa

NAGŁÓWEK

zawartość strony - to zobaczysz na stronie

słowa kluczowe

imię i nazwisko

tytuł Twojej strony pojawi się na zakładce przeglądarki

<!doctype html> <html> <head> <title>Strona o prehistorii Podlasia</title> <meta charset=”utf‑8”/> <meta name=”author” content=”Sylwester Vox”/> <meta name=”keywords” content=”, geografia, prehistoria”/> </head> <body>Na stronie znajdziecie informacje o prehistorii Podlasia.</body></html>

Obok znajduje się przykład stosowanego kodu.

Przykładowy kodźródłowy

<!doctype html> <html> <head> <title>...</title> <meta charset=”utf‑8”/> <meta name=”author” content=”...”/> <meta name=”keywords” content=”, ...”/> </head> <body>...</body></html>

  • otwórz notatnik
  • skopiuj kod źródłowy (ten obok)
  • wklej skopiowaną zawartość do notatnika
  • uzupełnij brakujące informacje w miejscach kropek (...)
  • (tytuł swojej strony, imię i nazwisko, słowa kluczowe, informacje o czym jest strona)
  • stwórz folder o nazwie np. www
  • zapisz w nim plik pod nazwą index.html
  • odszukaj ten plik i otwórz go
  • ciesz się swoją pierwszą stroną internetową

Zadanie.

TAK W PODGLĄDZIE STRONY

TAK WYGLĄDA TO W NOTATNIKU

WYGLĄD STRONY

Do zobaczenia!