Search Header Logo
Tworzenie strony internetowej

Tworzenie strony internetowej

Assessment

Presentation

•

Computers

•

KG

•

Hard

Created by

Ewa Mudlaw

Used 291+ times

FREE Resource

15 Slides • 0 Questions

1

Tworzenie strony internetowej

2

​​Strona internetowa

Jest dokumentem komputerowym zapisanym w pliku z rozszerzeniem htm lub html. Jest to plik tekstowy, w którym umieszcza się specjalne znaczniki języka HTML.

Inne elementy strony, takie jak grafika, dźwięki, filmy, są zapisane w oddzielnych plikach.

​

​HTML (ang. HyperText Markup Language) – hipertekstowy język znaczników, wykorzystywany do tworzenia dokumentów hipertekstowych.

3

​Do utworzenia prostej strony internetowej możemy zastosować:

​

  1. edytory plików tekstowych np. Notatnik,

  2. edytory plików tekstowych kolorujące znaczniki języka HTML np. Notepad++,

  3. edytory tekstu pozwalające na tworzenie strony bez znajomości języka HTML(w oknie edytora widzimy stronę tak, jak będzie wyglądać w przeglądarce) oraz umożliwiające zapis dokumentu w formacie HTML;

4

​Trochę prościej:

​Narzędziem umożliwiającym szybkie i łatwe utworzenie strony internetowej(nawet rozbudowanej) przeznaczonym dla użytkowników, którzy nie mają szczegółowej wiedzy technicznej, są systemy zarządzania treścią(CMS- Content Management System) np. WordPress , Joomla, Drupal.

5

​​Struktura dokumentu HTML

  • <html>

  • <head>

    (nagłówek dokumentu)

    </head>

  • <body>

    (część główna dokumentu)

    </body>

  • </html>

media

6

​Przykład:

Przykład:

<head>

<title>Tytuł strony</title>

<meta name="author" content="Imię Nazwisko"/>

<meta name="description" content="Opis strony"/>

<meta name="keywords" content="słowa kluczowe " />

<link rel="stylesheet" href="style.css" type="text/css"/>

<script type="text/javascript" src="skrypt.js"> </script>

</head>

7

​Dokument HTML

​Dokument HTML składa się z dwóch części: nagłówka HEAD i części głównej BODY. Nagłówek zawarty jest pomiędzy <head> ... </head> i zawiera ogólne informacje o dokumencie, takie jak tytuł, metainformacje. W części nagłówkowej można również umieszczać kod Javascript za pomocą tagu <script>.

8

https://wordwall.net/play/23487/103/832

9

​Znaczniki języka HTML

​Znaczniki to ciągi znaków zapisane w nawiasach kątowych.

-Można je zapisywać małymi lub wielkimi literami

-Występują zwykle parami: znacznik otwierający i zamykający

-Nie wszystkie znaczniki mają znacznik zamykający - nie posiada go np. <br> - przejście do nowego wiersza.

10

​Podstawowe znaczniki:

​ <br> - enter

  • <hr> - linia pozioma

  • <h1> ...</h1> - nagłówek pierwszego poziomu

  • <h2> ...</h2> - nagłówek drugiego poziomu

  • <p> tekst akapitu </p> - akapit

  • <b> tekst pogrubiony </b>

  • <i> tekst pochylony </i>

11

​Podstawowe znaczniki:

​<u> tekst podkreslony </u>

  • <s> tekst przekreślony </s>

  • <sup> indeks górny </sup>

  • <sub> indeks dolny </sub>

  • <a href="adres_strony">Tekst</a> - hiperłącze

  • <body bgcolor="red"> - kolor tła

12

​Ogólny sposób stosowania znaczników:

​<znacznikotwierajacy> tekst </znacznikzamykajacy>

Tekst zostanie wyświetlony w przeglądarce

Np.

<b> Dzień dobry </b> - w przeglądarce zostanie wyświetlony pogrubiony napis "Dzień dobry" ponieważ znacznik <b> pogrubia tekst.

13

​Znaczniki mogą występować z atrybutami

​<znacznik atrybut="wartość atrybutu"> tekst </znacznik>

Np. <p align="center"> Programowanie jest fajne. </p> - Wyświetli się akapit z wyśrodkowanym tekstem

​

p - oznacza akapit

align="center" - oznacza wyrównanie do środka

14

​Jak tworzymy tabelę?

​<table>

<tr>

<td> wiersz1, komórka1</td><td> wiersz1, komórka2</td>

</tr>

</table>

15

​Jak wstawić obraz?

​<img src="nazwa_pliku">

nazwa_pliku - określa nazwę pliku z grafiką wraz z rozszerzeniem nazwy pliku lub adres internetowy pliku z grafiką(w ten sposób można na swojej stronie umieszczać obrazy z innych witryn)

np. <img src="rysunek.jpg"> na stronie WWW wyświetli się rysunek zapisany w pliku rysunek.jpg pod warunkiem, że jest on zapisany w tym samym folderze co plik HTML.

UWAGA! Znacznik <img> nie posiada w jezyku HTML znacznika zamykającego!

Tworzenie strony internetowej

Show answer

Auto Play

Slide 1 / 15

SLIDE

Similar Resources on Wayground

Growth vs Fixed Minset

10 questions

Growth vs Fixed Minset

lesson

Lesson

•

7th - 8th Grade

Word Problem Practice

10 questions

Word Problem Practice

lesson

Lesson

•

3rd Grade

7.7A Solving Two-Step Inequalities

10 questions

7.7A Solving Two-Step Inequalities

lesson

Lesson

•

7th Grade

Cellular Respiration

10 questions

Cellular Respiration

lesson

Lesson

•

9th - 10th Grade

Nitrogen cycle

10 questions

Nitrogen cycle

lesson

Lesson

•

5th Grade

Pronoun Case

10 questions

Pronoun Case

lesson

Lesson

•

6th Grade

For Loop

13 questions

For Loop

lesson

Lesson

•

8th - 12th Grade

Website Design

10 questions

Website Design

lesson

Lesson

•

8th - 9th Grade

Popular Resources on Wayground

Fractions on a Number Line

15 questions

Fractions on a Number Line

quiz

Quiz

•

3rd Grade

Probability Practice

10 questions

Probability Practice

quiz

Quiz

•

4th Grade

Probability on Number LIne

15 questions

Probability on Number LIne

quiz

Quiz

•

4th Grade

Equivalent Fractions

20 questions

Equivalent Fractions

quiz

Quiz

•

3rd Grade

Multiplication Facts

25 questions

Multiplication Facts

quiz

Quiz

•

5th Grade

fractions

22 questions

fractions

quiz

Quiz

•

3rd Grade

Appropriate Chromebook Usage

6 questions

Appropriate Chromebook Usage

lesson

Lesson

•

7th Grade

Greek Bases tele and phon

10 questions

Greek Bases tele and phon

quiz

Quiz

•

6th - 8th Grade

Discover more resources for Computers

Presidents' Day

12 questions

Presidents' Day

quiz

Quiz

•

KG - 5th Grade

Place Value

20 questions

Place Value

quiz

Quiz

•

KG - 3rd Grade

CKLA Unit 6 Comprehension Assessment K

12 questions

CKLA Unit 6 Comprehension Assessment K

quiz

Quiz

•

KG

CKLA Unit 6 Assessment K

23 questions

CKLA Unit 6 Assessment K

quiz

Quiz

•

KG

Blends and Digraphs

16 questions

Blends and Digraphs

quiz

Quiz

•

KG - 1st Grade

Direct and Indirect Characterization

10 questions

Direct and Indirect Characterization

quiz

Quiz

•

KG

Waves

22 questions

Waves

quiz

Quiz

•

KG - University

Copy of G5_U5_L14_22-23

7 questions

Copy of G5_U5_L14_22-23

lesson

Lesson

•

KG - Professional Dev...

Environmental Science
Understanding why the rectangular and polar forms of a complex number represent the same number
Division word problems
Argumentative
Applying and analysing exponential and logarithmic functions
Contributing relevant information
Recombinant DNA technology
Health policy
Atomic radius
Interest Groups

© 2026 Quizizz Inc. (DBA Wayground)