HTML - tworzenie strony internetowej z wykorzystaniem znaczników
Presentation
•
Computers
•
8th Grade
•
Practice Problem
•
Easy
Used 8+ times
FREE Resource
15 Slides • 17 Questions
1
HTML - tworzenie strony internetowej z wykorzystaniem znaczników
By
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.
czyli tzw. hipertekstowy język programowania wykorzystywany do tworzenia stron internetowych.
HTML
3
Do utworzenia prostej strony internetowej możemy zastosować:
edytory plików tekstowych np. Notatnik, Notepad++, Brackets
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 np. WebWave;
4
CMS - systemy zarządzania treścią
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
<!DOCTYPE html>
<html>
<head>
<title> TYTUŁ STRONY </title>
</head>
<body>
treść strony (tekst, grafika, hiperłącze)
</body>
</html>
6
7
Multiple Choice
Podstawowa struktura dokumentu HTML (tzw.szkielet) musi zawierać następujące znaczniki:
a. <!doctype>
b. <html></html>
c. <head></head>
d. <body></body>
a. <html></html>
b. <body></body>
c. <p></p>
a. <html></html>
b. <body></body>
c. <title></title>
a. <html></html>
b. <head></head>
c. <meta charset="UTF-8">
8
Multiple Choice
Jakim znacznikiem rozpoczynamy tworzenie strony internetowej?
<font>
<head>
<html>
<body>
9
Znaczniki w sekcji <head> ..</head>
<head>
<title>Tytuł strony</title>
<meta charset="UTF-8" />
<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
Multiple Choice
Elementy języka html nazywamy:
zaczątkami
tajnymi słowami
znacznikami
parametrami
11
Multiple Choice
Znacznik <meta charset="UTF-8"> służy do:
tworzenia akapitów
wstawiania obrazka
poprawnego wyświetlania się polskich znaków
nie ma żadnego znaczenia
12
Multiple Choice
Znacznik <title> służy do wstawiania:
tytułu nagłówka
tytułu strony
poprawnie ustawia treść na stronie
pogrubia tekst
13
Multiple Choice
Który znacznik służy do wstawiania treści na stronę?:
<h1></h1>
<body></body>
<html></html>
<p></p>
14
Znaczniki języka HTML
- znaczniki to ciągi znaków zapisane w nawiasach ostrych,
- 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.
15
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>
<u> tekst podkreslony </u>
<s> tekst przekreślony </s>
<sup> indeks górny </sup>
<sub> indeks dolny </sub>
16
Multiple Choice
Za utworzenie akapitu odpowiada znacznik:
<b></b>
<i></i>
<h3></h3>
<p></p>
17
Multiple Choice
Za wstawianie indeksu górnego i dolnego odpowiadają znaczniki:
<sup> i <sub>
<sop> i <sob>
<spm> i <spn>
<sip> i <sib>
18
Multiple Choice
Za pogrubienie tekstu odpowiada znacznik;
<a href>
<u></u>
<p></p>
<b></b>
19
Multiple Choice
Linię poziomą tworzy znacznik:
<hr>
<br>
<a>
<h5>
20
Multiple Choice
Aby wstawić koniec linii (enter) należy użyć znacznika:
<hr>
<br>
<i>
<p>
21
Ogólny sposób stosowania znaczników:
Np.
<p><b> Dzień</b> dobry </p> - w przeglądarce zostanie wyświetlony pogrubiony napis "Dzień dobry" ponieważ znacznik <b> pogrubia tekst
<p> tekst tekst </p>
znacznik otwierający znacznik zamykający
22
Znaczniki mogą występować z atrybutami
Np.
<p align="center"> Programowanie jest fajne. </p> - wyświetli się akapit z wyśrodkowanym tekście:
<body background="red"> - wyświetli się strona w kolorze czerwonym
<table style="border: 1px solid black"> - obramowanie tabeli czarną liniom ciągłą o grubości 1px
23
Multiple Choice
Co oznacza następujący znacznik:
<p align="left"> Tekst </p>
Tekst zostanie wyświetlony z prawej strony
Tekst zostanie wyświetlony na środku
Tekst zostanie wyświetlony z lewej strony
Ten znacznik jest źle napisany
24
Multiple Choice
Kolor tła strony ustawiamy stosując znacznik:
żadna odpowiedź nie jest prawidlowa
<font color="kolor"> </font>
<a href="kolor"> </a>
<body background="kolor">...</body>
25
Multiple Choice
W jakie znaki ujmujemy znaczniki w html?
(...)
<...>
[...]
{...}
26
Jak tworzymy tabelę?
27
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ą
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!
28
Multiple Choice
Czego znacznikiem jest <table>....</table>?
wiersza tabeli
kolumny tabeli
zwykłej komórki tabeli
tabeli
29
Wypunktowania
<ul> wypunktowana lista </ul>
Elementy listy oznaczane są znaczni8kiem <li>.....</li>.
np.
<ul>
<li> tekst </li>
<li> tekst </li>
<li> tekst </li>
</ul>
tekst
tekst
tekst
30
Multiple Choice
Który znacznik należy do znaczników definiujących listy w języku HTML?
< tr >
< h2 >
< p >
< ul >
31
Hiperłącza do innych stron
32
Multiple Choice
Jak inaczej nazywamy hiperłącza?
linki
strony
ramki
klamry
HTML - tworzenie strony internetowej z wykorzystaniem znaczników
By
Show answer
Auto Play
Slide 1 / 32
SLIDE
Similar Resources on Wayground
23 questions
Dilations
Presentation
•
8th Grade
25 questions
Python - typy danych, zmienne
Presentation
•
9th Grade
26 questions
James Monroe & the Monroe Doctrine - 2026
Presentation
•
8th Grade
28 questions
Review Solving Linear Equations
Presentation
•
8th Grade
24 questions
Rigid Motions
Presentation
•
8th Grade
25 questions
Dilations
Presentation
•
8th Grade
24 questions
Grade 8 HTML
Presentation
•
8th Grade
22 questions
Dilation on Coordinate Plane Lesson
Presentation
•
8th Grade
Popular Resources on Wayground
28 questions
US History Regents Review
Quiz
•
11th Grade
36 questions
Biology Regents Review
Quiz
•
9th - 10th Grade
20 questions
Math Review
Quiz
•
3rd Grade
38 questions
Regents Life Science General Review
Quiz
•
9th Grade
20 questions
Math Review
Quiz
•
6th Grade
21 questions
EOY Grade 6 Benchmark Assessment - Content Skills
Quiz
•
6th Grade
20 questions
Inferences
Quiz
•
4th Grade
20 questions
Figurative Language Review
Quiz
•
6th Grade
Discover more resources for Computers
45 questions
Earth and Space Science Regents: Exam Cram
Presentation
•
7th - 12th Grade
16 questions
Summer school Trivia
Quiz
•
5th - 8th Grade
20 questions
summer trivia
Quiz
•
8th Grade
20 questions
logos
Quiz
•
8th Grade
15 questions
Middle School Fun Trivia Questions
Quiz
•
7th - 8th Grade
45 questions
Final Review 2
Quiz
•
8th Grade
20 questions
Adjacent, Vertical, Complementary, Supplementary Angles
Quiz
•
8th Grade
40 questions
Grade 7 - General Knowledge
Quiz
•
6th - 8th Grade