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
22 questions
Y8 T1W3 Lesson 1: Text Break, Heading, Paragraph
Presentation
•
8th Grade
22 questions
Y8 T1W4 Lesson 1: Text Alignment
Presentation
•
8th Grade
25 questions
Systems Of Linear Inequalities
Presentation
•
8th Grade
23 questions
Unsur, Senyawa, Campuran
Presentation
•
8th Grade
27 questions
Ecology Review
Presentation
•
9th Grade
23 questions
Solving One-Step, Two Step and Multistep Inequalities
Presentation
•
9th Grade
23 questions
Chapter 8, Lesson 2
Presentation
•
8th Grade
30 questions
RECUPERAÇÃO PENSAMENTO COMPUTACIONAL
Presentation
•
8th Grade
Popular Resources on Wayground
10 questions
Main Idea and Supporting Details
Quiz
•
3rd - 6th Grade
20 questions
Math Review
Quiz
•
3rd Grade
14 questions
25-26 SY 8th Grade EOY Benchmark
Quiz
•
8th Grade
15 questions
Fast food
Quiz
•
7th Grade
20 questions
Math Review
Quiz
•
6th Grade
20 questions
Context Clues
Quiz
•
6th Grade
21 questions
EOY Grade 6 Benchmark Assessment - Content Skills
Quiz
•
6th Grade
20 questions
Inferences
Quiz
•
4th Grade
Discover more resources for Computers
14 questions
25-26 SY 8th Grade EOY Benchmark
Quiz
•
8th Grade
26 questions
Declaration of Independence
Quiz
•
6th - 8th Grade
17 questions
guess the logo
Quiz
•
8th Grade
20 questions
Summer Trivia
Quiz
•
8th Grade
10 questions
Famous Brands and Their Logos
Interactive video
•
4th - 8th Grade
60 questions
FLACS Checkpoint A Review
Quiz
•
7th - 9th Grade
20 questions
summer trivia
Quiz
•
8th Grade
15 questions
8th Unit 8 : Unit Review Game
Quiz
•
8th Grade