Podstawy HTML

0.0(0)

Studied by 0 people

Call Kai

Learn

Practice Test

Spaced Repetition

Match

Flashcards

Knowt Play

Card Sorting

1/29

There's no tags or description

Looks like no tags are added yet.

Last updated 12:35 PM on 5/10/26

Name	Mastery	Learn	Test	Matching	Spaced	Call with Kai

No analytics yet

Send a link to your students to track their progress

30 Terms

New cards

Co to jest HTML?

HTML:

to skrót od HyperText Markup Language, czyli hipertekstowy język znaczników
to technologia służąca do tworzenia stron internetowych
określa strukturę, układ i zawartość strony internetowej (np. jej treść, nagłówki, obrazy)
strona HTML składa się z elementów, np. p, a, div, które informują przeglądarkę jak ma wyświetlać zawartość
nie jest typowym językiem programowania, nie zawiera logiki programowania

New cards

Co dokładnie oznaczają słowa HyperText, Markup i Language?

HyperText (hipertekst, hiperłącze) – tekst zawierający odniesienia do innego tekstu lub strony.
Markup (znacznik, tag) – używa się go do tworzenia elementów.
Language (język) – HTML składa się z unikalnej składni i alfabetu.

New cards

Czym różni się dokument HTML od strony HTML?

Dokument HTML to pojedynczy plik zapisany w formacie HTML, np. index.html. Zawiera kod z tagami jak <html>, <head>, <body> itd.
Strona HTML zwykle oznacza to, co widzisz w przeglądarce po wyrenderowaniu dokumentu HTML. Może być oparta na jednym dokumencie HTML albo być złożona dynamicznie z wielu źródeł (HTML + CSS + JavaScript + dane z serwera).

New cards

Co to są strony responsywne?

Strona responsywna to taka, która dostosowuje zawartość do wielkości okna przeglądarki lub urządzenia. Dzięki responsywności ta sama strona będzie wyglądać dobrze i czytelnie zarówno na małym ekranie smartfona i tabletu, jak i na dużym ekranie komputera i laptopa.

<p><strong>Strona responsywna</strong> to taka, która dostosowuje zawartość do wielkości okna przeglądarki lub urządzenia. Dzięki responsywności ta sama strona będzie wyglądać dobrze i czytelnie zarówno na małym ekranie smartfona i tabletu, jak i na dużym ekranie komputera i laptopa.</p>

New cards

Co to jest Responsive Web Design?

Responsive Web Design to technika tworzenia stron, które automatycznie dostosowują swoją zawartość (układ, rozmiar elementów i obrazy) do ekranu urządzenia.

New cards

Jaką rolę pełnią HTML, CSS i JavaScript na stronie internetowej?

HTML definiuje faktyczną zawartość strony.
CSS definiuje wygląd strony.
JavaScript dodaje funkcjonalność do strony, pozwala kontrolować i modyfikować kod HTML.

<ul><li><p>HTML definiuje faktyczną <strong>zawartość</strong> strony.</p></li><li><p>CSS definiuje <strong>wygląd</strong> strony.</p></li><li><p>JavaScript dodaje <strong>funkcjonalność</strong> do strony, pozwala kontrolować i <strong>modyfikować</strong> kod HTML.</p></li></ul><p></p>

New cards

Jak wygląda struktura dokumentu HTML?

Struktura strony internetowej w HTML składa się z deklaracji dokumentu <!DOCTYPE html>, elementu <html>, w którym znajdują się elementy <head> i <body>.

<p>Struktura strony internetowej w HTML składa się z deklaracji dokumentu <code><!DOCTYPE html></code>, elementu <code><html></code>, w którym znajdują się elementy <code><head></code> i <code><body></code>.</p>

New cards

Co umieszczamy w elementach <head> i <body>?

W elemencie <head> umieszczamy wszystkie metadane.
W elemencie <body> umieszczamy całą zawartość strony.

New cards

Co to jest <!DOCTYPE>?

<!DOCTYPE> to niezbędna deklaracja umieszczana w pierwszej linijce dokumentu HTML, która informuje przeglądarkę o wersji języka HTML, w jakiej napisana jest strona.

New cards

Z czego się składa element HTML?

Element HTML składa się ze znacznika otwierającego, zawartości i znacznika zamykającego.

New cards

Co to jest znacznik?

Znacznik to pojedyncza instrukcja w nawiasach ostrych <>, która mówi przeglądarce, jaki typ elementu zaczyna się lub kończy.

New cards

Co to są puste elementy? Wymień kilka.

Puste elementy to elementy, które nie mają zawartości. Puste elementy nie posiadają znacznika zamykającego.

<area>
<base>
<br>
<col>
<embed>
<hr>
<img>
<input>
<link>
<meta>
<source>
<track>
<wbr>

New cards

Wymień 4 cechy atrybutów. Podaj przykład ze znacznikiem <img>.

All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"

<a href="<https://www.w3schools.com>">Visit W3Schools</a>
<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">
<p style="">This is a red paragraph.</p>
<p title="I'm a tooltip">This is a paragraph.</p>

New cards

Co to są atrybuty globalne? Wymień kilka.

The global attributes are attributes that can be used with all HTML elements.

accesskey
class
contenteditable
data-*
dir
draggable
enterkeyhint
hidden
id
inert
inputmode
lang
popover
spellcheck
style
tabindex
title
translate

New cards

Wymień 10 elementów formatujących (pogrubienie, kursywa itp.).

New cards

Co to jest <q>, <blockquote>, <abbr>, <cite>, <bdo> i <address>?

<q> - krótki cytat
<blockquote> - cytat blokowy
<abbr> - skrót lub akronim
<cite> - tytuł dzieła twórczego
<bdo> - kierunek tekstu
<address> - adres

New cards

Jakie są 3 sposoby na dodanie styli do HTML?

CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
```
<link rel="stylesheet" href="style.css" />
```

New cards

Jaka jest hierarchia styli - co ma największy i najmniejszy priorytet?

An inline style has the highest priority, and will override external and internal styles and browser defaults.

New cards

Jakie są 3 stany linków?

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

<a href="<https://www.w3schools.com/>" target="_blank">Visit W3Schools!</a>

New cards

Jakie są 2 wymagane atrybuty elementu <img>? Do czego służą?

src - Specifies the path to the image
alt - Specifies an alternate text for the image

<img src="img_girl.jpg" alt="Girl in a jacket" />
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600" />
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;" />

New cards

Jakie są 3 rodzaje list?

<ul> - Defines an unordered (bulleted) list
<ol> - Defines an ordered list
<li> - Defines a list item
<dl> - Defines a description list
<dt> - Defines a term in a description list
<dd> - Describes the term in a description list

New cards

Jakie wartości może przyjąć atrybut type znacznika <ol>?

New cards

Wymień 10 znaczników związanych z tabelami.

<table>
<tr>
<th>
<td>
<caption>
<colgroup>
<col>
<thead>
<tbody>
<tfoot>

<ul><li><p><code><table></code></p></li><li><p><code><tr></code></p></li><li><p><code><th></code></p></li><li><p><code><td></code></p></li><li><p><code><caption></code></p></li><li><p><code><colgroup></code></p></li><li><p><code><col></code></p></li><li><p><code><thead></code></p></li><li><p><code><tbody></code></p></li><li><p><code><tfoot></code></p></li></ul><p></p>

New cards

Jaka jest główna różnica między elementami typu block a inline? Podaj po przykładzie.

Block

A block-level element always starts on a new line, and always takes up the full width available.
The <div> element is a block-level element, and is often used as a container for other HTML elements.

Inline

An inline element does not start on a new line, and only takes up as much width as necessary.
The <span> element is an inline container used to mark up a part of a text, or a part of a document.
An inline element cannot contain a block-level element!

<p><strong>Block</strong></p><ul><li><p>A block-level element always starts on a new line, and <strong>always takes up the full width available</strong>.</p></li><li><p>The <code><div></code> element is a block-level element, and is often used as a container for other HTML elements.</p></li></ul><p><strong>Inline</strong></p><ul><li><p>An inline element does not start on a new line, and <strong>only takes up as much width as necessary</strong>.</p></li><li><p>The <code><span></code> element is an inline container used to mark up a part of a text, or a part of a document.</p></li><li><p>An inline element cannot contain a block-level element!</p></li></ul><p></p>

New cards

Podaj 3 różnice między id a class.

New cards

Jakie wartości może przyjąć atrybut type znacznika <button>?

The type attribute defines what a button does when clicked. There are three button types:

type="button" - A normal clickable button (does nothing by default)
type="submit" - Submits a form
type="reset" - Resets all form fields

<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>

New cards

Jakie 6 znaczników możemy umieszczać w elemencie <head>? Czym się charakteryzują?

The <head> element is a container for metadata (data about data)

The <title> element is required and it defines the title of the document
The <style> element is used to define style information for a single document
The <link> tag is most often used to link to external style sheets
The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings
The <script> element is used to define client-side JavaScripts
The <base> element specifies the base URL and/or target for all relative URLs in a page

New cards

Co to są elementy semantyczne?

Elementy semantyczne to znaczniki, które jasno określają znaczenie zawartej w nich treści zarówno dla przeglądarki, jak i programisty.

New cards

Wymień 13 elementów semantycznych. Czym się charakteryzują?

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

New cards

Co to są encje? Jakie są 3 rodzaje encji i jak je zapisujemy?

Encje to specjalne kody, które służą do wstawiania znaków specjalnych (symboli, emoji). Wyróżniamy:

encje nazwane &nazwa_encji;
encje numeryczne w postaci dziesiętnej &#kod_znaku;
encje numeryczne w postaci szesnastkowej &#xkod_znaku;