Zasady tworzenia stron internetowych
Presentation
•
Computers
•
7th Grade
•
Practice Problem
•
Medium
Ewelina Świerkowska
Used 15+ times
FREE Resource
17 Slides • 10 Questions
1
Zasady tworzenia stron internetowych.
2
Czym jest strona www (internetowa)?
Podstawowa strona www jest dokumentem komputerowym, zapisanym w pliku z rozszerzeniem HTML lub HTM. Jest to plik tekstowy, w którym umieszcza się specjalne znaczniki języka HTML. Inne elementy strony www takie jak: grafika, dźwięki, filmy...zapisywane są w oddzielnych plikach.
3
Edytor HTML
4
Efektem tworzenia strony www jest zestaw plików HTML (połączonych ze sobą za pomocą hiperłączy) i towarzyszących im plików pomocniczych (graficznych, multimedialnych). Taki zestaw plików nazywamy witryną internetową lub serwisem internetowym.
5
Multiple Choice
Czym jest strona www (internetowa)?
miejscem, w którym się ściąga prace domowe
dokumentem komputerowym
plikiem dźwiękowym
wytworem wyobraźni
6
Multiple Choice
Zestaw plików HTML połączony jest....
za pomocą hiperłączy
przez znaki specjalne
za pomocą fal radiowych
7
Przykładowy schemat witryny internetowej
8
Do tworzenia prostej strony www można zastosować:
edytor plików tekstowych, takie jak: Notatnik,
edytor plików tekstowych kolorujące znaczniki języka HTML, np., Notepad++, Programmer's Notepad, Notepad3 (dostępne bezpłatnie w internecie),
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; w edytorze Microsoft Word taki zapis umożliwia opcja Zapisz jako/Strona sieci Web.
9
Notepad++
10
Multiple Choice
W Notatniku mogę utworzyć prostą stronę www.
Prawda
Fałsz
11
Multiple Choice
Na lekcjach informatyki do tworzenia strony www będziemy używać....
Notepad3
Programmer's Notepad
Notepad+++
Notatnika
12
Multiple Choice
Mogę utworzyć stronę www bez znajomości języka HTML.
Prawda
Fałsz
13
Znaczniki języka HTML
Znaczniki HTML składają się głównie z:
• nawiasów ostrych („ < ” i „ > ”),
• ukośnika („/”),
• tekstu:
• • – nazwa znacznika
• • – atrybutu:
• • • • nazwy (przed znakiem równa się =)
• • • • wartości atrybutu (po znaku równa się = oznaczonym cudzysłowem „”)
14
Jak to wygląda w HTML, a jak w przeglądarce internetowej?
15
Znaczniki HTML dzielą się na:
• znaczniki pojedyncze (np. < img … >),
• znaczniki podwójne (np. < p > … < /p >) składają się z:
• • – znaczniki otwierające (np. < p >, < title >),
• • – znaczniki zamykające (np. < /p >, </ title >).
16
Multiple Choice
Znaczniki HTML składają się głownie z ...
zbioru liter
symboli liczbowych
nawiasów ostrych („ < ” i „ > ”) i ukośnika („/”),
wartości algebraicznych
17
Multiple Choice
HTML składa się ze znaczników...
otwierających i zatwierdzających
otwierających i zamykających
rozpoczynających i zakończeniowych
rozpoczynających i zamykających
18
Przykłady
<p>Witaj!</p>
wyświetli napis "Witaj!"
<p align="center">Warszawa jest stolicą Polski</p>
wyświetli akapit z wyśrodkowanym tekstem "Warszawa jest stolicą Polski"
nazwa atrybutu znacznika
wartość atrybutu
znacznik otwierający
znacznik zamykający
19
Ułożenie znaczników w podstawowej strukturze strony
20
Uwaga!
Opis całej strony www zawiera ZAWSZE początek struktury <html> i ZAWSZE koniec struktury </html>
21
Multiple Select
Znacznik otwierający to.... (może jest więcej prawidłowych odpowiedzi :))
<p>
</p>
<alignt>
<p align="center">
22
Multiple Choice
Znacznik zamykający to....
<turtal>
<p>
</p>
23
Multiple Choice
Każda strona www tworzona HTML zawiera znaczniki <html> i </html>.
Prawda
Fałsz
24
Poniżej lista podstawowych znaczników dokumentu HTML:
< !doctype html > - określa z jakim typem dokumentów mamy do czynienia. Jest to jeden z dwóch znaczników, który po znaku mniejszości ma wykrzyknik,
< html > ... < /html > - między tym znacznikiem umieszczana jest cała treść dokumentu,
< head > ... < /head > - zawiera podstawowe informacje o dokumencie, takie jak tytuł, opis, linki do arkuszy stylów i skryptów,
< title > ... < /title > - tytuł strony, który pojawia się na pasku przeglądarki oraz w wynikach wyszukiwania. Uznawany za jeden z czynników rankingowych.
< meta ... > - znacznik opisujący szczegółowo opisujący zawartość strony. W zależności od użytych argumentów może on zawierać opis strony (description - widoczne pod tytułem w wynikach wyszukiwania), słowa kluczowe (keywords - meta tag uznany za przestarzały, z którego największe wyszukiwarki już nie korzystają), kodowanie dokumentu czy autora strony.
25
< link ... > - element określający relację między dokumentem a zewnętrznym zasobem.
< style > ... < /style > - wewnętrzny arkusz stylów.
< script > ... < /script > - umożliwia umieszczenie skryptu w kodzie HTML.
< body > ... < /body > - znacznik zawierający główną treść dokumentu.
< div > ... < /div > - blok wykorzystywany do budowy szkieletu dokumentu.
< hx > ... < /hx > - nagłówek określonego przez x stopnia (od 1 do 6).
< p > ... < /p > - paragraf tekstu.
< img ... > - element graficzny.
< a > ... < /a > - odnośnik, link do innej witryny lub zasobu, wewnętrzny lub zewnętrzny.
26
< ul > ... < /ul > - lista nieuporządkowana.
< ol > ... < /ol > - lista uporządkowana.
< li > ... < /li > - element listy.
< table > ... < /table > - tabela.
< tr > ... < /tr > - wiersz w tabeli.
< td > ... < /td > - komórka, będąca elementem wiersza.
< th > ... < /th > - komórka będąca nagłówkiem dla kolumny.
< form > ... < /form > - formularz. Wewnątrz tych znaczników umieszcza się elementy takie jak pola tekstowe, etykiety, checkboxy, pola wyboru, przyciski.
< strong >...< /strong > - znacznik semantyczny informujący o ważności tekstu.
< em > ... < /em > - znacznik semantyczny, wyróżnienie tekstu definiujące emfazę.
< span >...< /span > - znacznik liniowy używany głównie do stylowania fragmentu tekstu.
< !-- ... -- > - komentarz, niewidoczny dla użytkownika tekst
27
Wszystko co nowe może początkowo wydawać się straszne. Proszę się nie zniechęcać.
Damy radę! :)
Zasady tworzenia stron internetowych.
Show answer
Auto Play
Slide 1 / 27
SLIDE
Similar Resources on Wayground
20 questions
Review for Test- Food Chains, Webs, & Energy Pyramids
Lesson
•
7th Grade
22 questions
HTML
Lesson
•
7th Grade
23 questions
Mengaktfikan MIcrosoft Exel
Lesson
•
7th Grade
24 questions
TIK Part 01
Lesson
•
7th Grade
20 questions
Graph and Solve Inequalities
Lesson
•
6th Grade
21 questions
Ordering and Absolute Value
Lesson
•
6th Grade
20 questions
Sắp xếp và lọc dữ liệu
Lesson
•
7th Grade
21 questions
internet concepts 1st prep
Lesson
•
7th Grade
Popular Resources on Wayground
8 questions
Spartan Way - Classroom Responsible
Quiz
•
9th - 12th Grade
15 questions
Fractions on a Number Line
Quiz
•
3rd Grade
14 questions
Boundaries & Healthy Relationships
Lesson
•
6th - 8th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
3 questions
Integrity and Your Health
Lesson
•
6th - 8th Grade
25 questions
Multiplication Facts
Quiz
•
5th Grade
9 questions
FOREST Perception
Lesson
•
KG
20 questions
Main Idea and Details
Quiz
•
5th Grade
