czwartek, 2024-02-15

Jakie języki można osadzać w HTML?

W HTML można osadzać niektóre inne języki i technologie, które znacznie poszerzają możliwości twórców stron internetowych. Są one podstawą interaktywnych i wizualnie atrakcyjnych stron internetowych oraz aplikacji webowych.

Główne języki i technologie

Poniższa lista obejmuje obecnie stosowane popularne rozwiązania.

JavaScript

Jest to najbardziej rozpowszechniony język skryptowy używany do tworzenia interaktywnych funkcji na stronach internetowych. JavaScript umożliwia manipulację elementami DOM, obsługę zdarzeń, animacje, walidację danych formularzy i wiele innych.

CSS (Cascading Style Sheets, kaskadowe arkusze stylów)

Chociaż CSS sam w sobie nie jest językiem programowania, jest niezbędny do stylizacji stron internetowych. Pozwala na kontrolę układu, kolorów, czcionek i innych aspektów wizualnych strony.

SVG (Scalable Vector Graphics)

SVG to język oparty na XML do opisywania grafiki wektorowej. Może być osadzony bezpośrednio w HTML i jest często używany do tworzenia grafik, które mogą być skalowane bez utraty jakości.

WebAssembly

Jest to stosunkowo nowa technologia, która pozwala na uruchamianie kodu niskiego poziomu (np. C, C++ czy Rust) w przeglądarce, co umożliwia tworzenie wydajnych aplikacji webowych.

MathML (Mathematical Markup Language)

Umożliwia wyświetlanie złożonych wzorów matematycznych w przeglądarkach internetowych, chociaż jego obsługa w różnych przeglądarkach może się różnić.

Przykłady

Scalable Vector Graphics

Osadzanie kodu SVG (Scalable Vector Graphics) bezpośrednio w HTML jest dość proste i daje możliwość tworzenia grafik wektorowych, które są dobrze skalowalne i nie tracą na jakości przy powiększaniu. Język SVG jest szczególnie przydatny przy tworzeniu ikon, diagramów, ilustracji oraz interaktywnych elementów graficznych.

Kod HTML z osadzonym SVG:

<!DOCTYPE html>
<html>
<body>

<h1>Przykład SVG w HTML</h1>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  Niestety, Twoja przeglądarka nie obsługuje SVG.
</svg>

</body>
</html>

W tym przykładzie:

Znacznik <svg> definiuje przestrzeń, w której znajdować się będzie grafika SVG.
Atrybuty width i height określają szerokość i wysokość obszaru SVG.
W środku znacznika <svg>, mamy znacznik <circle>, który tworzy koło.
- cx i cy określają współrzędne środka koła.
- r to promień koła.
- stroke określa kolor obramowania koła.
- stroke-width określa szerokość obwódki.
- fill definiuje kolor wypełnienia koła.

Tekst „Niestety, Twoja przeglądarka nie obsługuje SVG.” jest wyświetlany tylko wtedy, gdy przeglądarka nie obsługuje SVG. Jest to przykład prostej grafiki SVG, ale możliwości są znacznie szersze i obejmują bardziej złożone figury, teksty, ścieżki, gradienty itp.

Mathematical Markup Language

MathML (Mathematical Markup Language) to język znaczników służący do wyświetlania złożonych wzorów matematycznych w przeglądarkach internetowych. MathML jest częścią specyfikacji HTML5 i może być bezpośrednio osadzony w dokumentach HTML.

Przykład kodu HTML z osadzonym MathML:

<!DOCTYPE html>
<html>
<head>
    <title>Przykład MathML</title>
</head>
<body>

<h1>Przykład wzoru matematycznego w MathML</h1>

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mrow>
    <msup>
      <mi>a</mi>
      <mn>2</mn>
    </msup>
    <mo>+</mo>
    <msup>
      <mi>b</mi>
      <mn>2</mn>
    </msup>
    <mo>=</mo>
    <msup>
      <mi>c</mi>
      <mn>2</mn>
    </msup>
  </mrow>
</math>

</body>
</html>

W tym przykładzie:

<math> jest głównym znacznikiem używanym do zawarcia kodu MathML.
Wewnątrz <math>, używamy różnych znaczników MathML do określenia struktury wzoru:
- <mrow> grupuje elementy wiersza.
- <mi> reprezentuje zmienną matematyczną (np. a, b, c).
- <mn> oznacza liczbę (np. 2).
- <msup> tworzy wyrażenie z indeksem górnym, używane tutaj do przedstawienia potęgi.
- <mo> to operator (tutaj użyty dla znaków plus + i równości =).

Pokazany wzór reprezentuje znane równanie Pitagorasa w notacji matematycznej. Należy zauważyć, że wsparcie dla MathML w przeglądarkach internetowych może być różne i nie wszystkie przeglądarki mogą poprawnie interpretować i wyświetlać MathML.