Tworzenie stron internetowych

Presentation

•

Computers

•

1st Grade

•

Practice Problem

•

Easy

Ewelina Kamińska

Used 27+ times

FREE Resource

19 Slides • 1 Question

Tworzenie stron internetowych

Zanim zaczniemy... porozmawiajmy :)

Jakie są wasze ulubione strony internetowe?
Dlaczego lubicie na nie wchodzić?
Na które strony najczęściej wchodzicie?
Jakie znacie edukacyjne strony internetowe?
Jaka powinna być strona internetowa?

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

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

Do utworzenia prostej strony internetowej możemy zastosować:

edytory plików tekstowych np. Notatnik,
edytory plików tekstowych kolorujące znaczniki języka HTML np. Notepad++,
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;

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.

Struktura dokumentu HTML

<html>
<head>
(nagłówek dokumentu)
</head>
<body>
(część główna dokumentu)
</body>
</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>.

Przykład:

<head>

<title>Tytuł strony</title>

</head>

Zadanie

Uporządkuj odpowiednio strukturę dokumentu HTML:

https://wordwall.net/play/16676/637/353

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.

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>

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

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.

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

Multiple Select

Co oznacza następujący znacznik:

<p align="left"> Tekst </p>

Tekst zostanie wyświetlony z prawej strony

Tekst zostanie wyświetlony z lewej strony

Tekst zostanie wyświetlony na środku

Ten znacznik jest źle napisany

Jak tworzymy tabelę?

<table>

<tr>

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

</tr>

</table>

Jak wstawić obraz?

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!

Wykonaj zadania z kartki

Dziękuję za uwagę

Kamińska Ewelina

Tworzenie stron internetowych

Show answer

Auto Play

Slide 1 / 20

SLIDE

Similar Resources on Wayground

20 questions

Encabezado y Pie de pagina

Lesson

•

1st Grade

16 questions

Normas APA

Lesson

•

1st Grade

16 questions

Algoritmos

Lesson

•

14 questions

PARTES DE LA COMPUTADORA

Lesson

•

1st Grade

14 questions

Уравнения

Lesson

•

1st Grade

11 questions

Comparing Numbers

Lesson

•

1st Grade

15 questions

Lesson

•

1st Grade

17 questions

Bahasa Melayu Tahun 1

Lesson

•

1st Grade

Popular Resources on Wayground

7 questions

History of Valentine's Day

Interactive video

•

4th Grade

15 questions

Fractions on a Number Line

Quiz

•

3rd Grade

20 questions

Equivalent Fractions

Quiz

•

3rd Grade

25 questions

Multiplication Facts

Quiz

•

5th Grade

$fractions$

22 questions

fractions

Quiz

•

3rd Grade

15 questions

Valentine's Day Trivia

Quiz

•

3rd Grade

20 questions

Main Idea and Details

Quiz

•

5th Grade

20 questions

Context Clues

Quiz

•

6th Grade

Discover more resources for Computers

12 questions

Presidents' Day

Quiz

•

KG - 5th Grade

20 questions

Telling Time to the Hour and Half hour

Quiz

•

1st Grade

10 questions

Exploring Rosa Parks and Black History Month

Interactive video

•

1st - 5th Grade

6 questions

President's Day

Lesson

•

1st Grade

10 questions

Identifying Physical and Chemical Changes

Interactive video

•

1st - 5th Grade

7 questions

Lunar and Chinese New Year for Kids | Bedtime History

Interactive video

•

1st - 12th Grade

10 questions

Presidents Day

Interactive video

•

1st - 5th Grade

15 questions

Making Inferences

Quiz

•

1st - 3rd Grade