Tworzenie stron internetowych
Presentation
•
Computers
•
1st Grade
•
Practice Problem
•
Easy
Ewelina Kamińska
Used 27+ times
FREE Resource
19 Slides • 1 Question
1
Tworzenie stron internetowych
2
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?
3
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.
4
HTML
HTML (ang. HyperText Markup Language) – hipertekstowy język znaczników, wykorzystywany do tworzenia dokumentów hipertekstowych.
5
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;
6
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.
7
Struktura dokumentu HTML
<html>
<head>
(nagłówek dokumentu)
</head>
<body>
(część główna dokumentu)
</body>
</html>
8
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>.
9
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>
10
Zadanie
Uporządkuj odpowiednio strukturę dokumentu HTML:
https://wordwall.net/play/16676/637/353
11
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.
12
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>
13
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
14
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.
15
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
16
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
17
Jak tworzymy tabelę?
<table>
<tr>
<td> wiersz1, komórka1</td><td> wiersz1, komórka2</td>
</tr>
</table>
18
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!
19
Wykonaj zadania z kartki
20
Dziękuję za uwagę
Kamińska Ewelina
Tworzenie stron internetowych
Show answer
Auto Play
Slide 1 / 20
SLIDE
Similar Resources on Wayground
18 questions
Refuerzo Calidad
Presentation
•
1st Grade
15 questions
Last Class
Presentation
•
1st Grade
18 questions
Greater than ,Less than ,Equal
Presentation
•
1st - 2nd Grade
19 questions
Systemowe operacje i szczotka. O systemach, programach i plikach
Presentation
•
KG - 1st Grade
13 questions
Silent "e"
Presentation
•
2nd Grade
14 questions
Comparing and Ordering Assignment
Presentation
•
1st Grade
16 questions
CSS (Cascading Style Sheet)
Presentation
•
1st Grade
15 questions
Tworzenie strony internetowej
Presentation
•
KG
Popular Resources on Wayground
20 questions
"What is the question asking??" Grades 3-5
Quiz
•
1st - 5th Grade
20 questions
“What is the question asking??” Grades 6-8
Quiz
•
6th - 8th Grade
10 questions
Fire Safety Quiz
Quiz
•
12th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
34 questions
STAAR Review 6th - 8th grade Reading Part 1
Quiz
•
6th - 8th Grade
20 questions
“What is the question asking??” English I-II
Quiz
•
9th - 12th Grade
20 questions
Main Idea and Details
Quiz
•
5th Grade
47 questions
8th Grade Reading STAAR Ultimate Review!
Quiz
•
8th Grade
Discover more resources for Computers
20 questions
"What is the question asking??" Grades 3-5
Quiz
•
1st - 5th Grade
10 questions
Odd and even numbers
Quiz
•
1st - 2nd Grade
20 questions
Telling Time to the Hour and Half hour
Quiz
•
1st Grade
16 questions
Counting Coins counting money
Quiz
•
1st - 2nd Grade
20 questions
Halves and Fourths
Quiz
•
1st Grade
19 questions
Fire Safety
Quiz
•
KG - 2nd Grade
10 questions
SCR + ECR Restate and Answer Practice
Quiz
•
1st - 5th Grade
20 questions
Addition and Subtraction facts
Quiz
•
1st - 3rd Grade