Want to create interactive content? It’s easy in Genially!

Reuse this genially

Projektowanie stron w HTML

silviovox

Created on June 4, 2020

Start designing with a free template

Discover more than 1500 professional designs like these:

Women's Presentation

Vintage Photo Album

Geniaflix Presentation

Shadow Presentation

Newspaper Presentation

Memories Presentation

Zen Presentation

Explore all templates

Transcript

LEKCJA INFOTRMATYKI

STRONA INTERNETOWA

HTML

NA DZISIEJSZEJ LEKCJI

JAK STWORZYĆ SZKIELET STRONY INTERNETOWEJ?

STRONA INTERNETOWA

  • 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

PODSTAWY HTML

JAK STWORZYĆ STRONĘ INTERNETOWĄ?

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

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.

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

ZNACZNIKI

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>

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>

</html>

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

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

<head>

<body>

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

SRTUKTURA DOKUMENTU

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

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

NAGŁÓWEK

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>:

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

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

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” />

NAGŁÓWEK

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

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

Przykładowy kodźródłowy

<!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>

imię i nazwisko

Obok znajduje się przykład stosowanego kodu.

słowa kluczowe

zawartość strony - to zobaczysz na stronie

Zadanie.

  • 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ą

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

WYGLĄD STRONY

TAK W PODGLĄDZIE STRONY

TAK WYGLĄDA TO W NOTATNIKU

Do zobaczenia!