html-intro.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "39a519b6-dc4b-48a4-9e25-6f74077f3a87",
   "metadata": {},
   "source": [
    "# Inleiding HTML"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e38191c9-7809-4b65-97a3-415e6ec7f42d",
   "metadata": {},
   "source": [
    "HTML is de taal waarin webpagina's beschreven worden. De browser zet HTML om in een weergave op het scherm, of op papier, in het geval van een afdruk.\n",
    "\n",
    "De browser past de vorm (weergave) aan aan de eigenschappen van het scherm. Dezelfde inhoud ziet er op een computerscherm anders uit dan op het scherm van een smartphone. Je kunt een webpagina repsonsive maken, dit betekent dat deze er zowel op een smartphone als op een groter scherm goed uitziet.\n",
    "\n",
    "In HTML beschrijf je de inhoud en de structuur; de opmaak beschrijf je apart, in CSS. Dit betekent dat je dezelfde inhoud op verschillende manieren kunt weergeven: niet alleen met een andere verdeling van de tekst en andere elementen, maar ook met heel andere kleuren, lettertypes, enzovoorts.\n",
    "\n",
    "Dit betekent dat je de \"huisstijl\" van een website kunt veranderen, zonder de inhoud (de HTML-bestanden) aan te passen."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "35b709f2-2b01-422a-a34d-0d4d59ef7f7a",
   "metadata": {},
   "source": [
    ":::{admonition} Direct aan de slag\n",
    "Met [Glitch](https://glitch.com/) kun je snel werken met HTML, CSS en JavaScript, om je eigen website te maken. Je kunt het [voorbeeld](https://glitch.com/~openleermaterialen) *remixen* met je eigen smaak en je eigen uitbreidingen (zie de knop: \"Remix your own\"). Glitch beschrijft zichzelf als de vriendelijke plek waar iedereen met het web bouwt. Wij gebruiken het als online editor.\n",
    ":::"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9b33a98e-3513-44dd-abcd-87ef0557d363",
   "metadata": {},
   "source": [
    "## Tags"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3332437c-66dc-4f1b-a3e6-139257505b95",
   "metadata": {},
   "source": [
    "Een HTML-element begint met een open-tag en eindigt met de bijbehorende sluit-tag. Een open-tag bestaat uit de tag-naam tussen `<` en `>`. De sluit-tag is dezelfde naam tussen  met `</` en `>`. Bijvoorbeeld: `<h1>` is de open-tag voor een kopje (header) op het hoogste niveau. De bijbehorende sluit-tag is dan `</h1>`.\n",
    "\n",
    "In de code-cellen hieronder geeft `%%HTML` aan dat er HTML-tekst volgt. Dit is geen onderdeel van de HTML-code zelf."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "e6f75b08-7363-4dc3-8f78-572f37356876",
   "metadata": {
    "jp-MarkdownHeadingCollapsed": true,
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<h1>Dit is een kopje</h1>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "\n",
    "<h1>Dit is een kopje</h1>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "5e83425b-9f1b-4448-a2fd-7e411b56611d",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<p>\n",
       "    Dit is een paragraaf.\n",
       "    Deze kan uit meerdere regels bestaan.\n",
       "    In het resultaat wordt dat één aaneensluitende tekst.\n",
       "</p>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "\n",
    "<p>\n",
    "    Dit is een paragraaf.\n",
    "    Deze kan uit meerdere regels bestaan.\n",
    "    In het resultaat wordt dat één aaneensluitende tekst.\n",
    "</p>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f3c5b77a-05e7-4d3c-a3dc-f2302b184ca8",
   "metadata": {},
   "source": [
    "Je kunt ook tags hebben binnen een regel, bijvoorbeeld om aan te geven dat een woord met nadruk weergegeven moet worden. Hiervoor gebruik je de tag `<em>`. De browser maakt er dan meestal cursieve tekst van.\n",
    "\n",
    "Met de tag `<strong>` geef je een sterke nadruk aan; de browser maakt daar meestal vette tekst (bold) van."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "6eaedc78-da27-41b7-9009-e4d24ae97d27",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<p>\n",
       "    Dit is een paragraaf.\n",
       "    Deze kan uit <em>meerdere regels</em> bestaan.\n",
       "    In het resultaat wordt dat <strong>één aaneensluitende tekst</strong>.\n",
       "</p>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "\n",
    "<p>\n",
    "    Dit is een paragraaf.\n",
    "    Deze kan uit <em>meerdere regels</em> bestaan.\n",
    "    In het resultaat wordt dat <strong>één aaneensluitende tekst</strong>.\n",
    "</p>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "629c5b9a-e75e-44e8-9d7b-dcdb5ce41674",
   "metadata": {},
   "source": [
    ":::{exercise} Maak je eigen tekst\n",
    "\n",
    "Je kunt de elementen die hierboven beschreven zijn combineren in je eigen tekst.\n",
    "Let er op dat elk open-tag afgesloten wordt met de bijbehorende sluit-tag.\n",
    "\n",
    ":::"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0784adef-5955-490f-adcb-ffeaf148806c",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "id": "719cb55c-0e31-40b4-9603-c6ce944f07b1",
   "metadata": {},
   "source": [
    "## Links"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "450b9f9d-6811-428f-a3f4-45a8e47254eb",
   "metadata": {
    "jupyter": {
     "source_hidden": true
    },
    "tags": []
   },
   "source": [
    "HTML staat voor \"hypertext markup language\". *Hypertext* is tekst die *hyperlinks* bevat, of kortweg *links*: verwijzingen naar andere documenten. Door middel van deze links kun je allerlei documenten wereldwijd met elkaar verbinden. Vandaar dat we spreken over het \"World Wide Web\", of tegenwoordig gewoon het *web*."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5bea7549-5a4c-4d47-abc3-d321e8cd778c",
   "metadata": {},
   "source": [
    "Een link geef je in HTML aan via de `<a>` tag, met als inhoud de tekst die de browser leesbaar weergeeft. Als *attribuut* binnen de tag geef je de URL aan van het document waarnaar je verwijst. \n",
    "\n",
    "Deze URL is meestal van de vorm `http://dom.tld/pad`.  Hierin is `dom` de domeinnaam; `tld` het \"top level domain\", bijvoorbeeld `nl` of `com` ; en `pad` het pad naar het betreffende document: een reeks namen gescheiden door `/`\n",
    "\n",
    "Voorbeeld:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "d5dd2064-0c04-41f3-9a32-a8fa684f55c4",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "De <a href=\"https://ieni.org\">website van i&i</a>.\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "\n",
    "De <a href=\"https://ieni.org\">website van i&i</a>."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d6adf7f8-8efb-47e6-b694-87c2e3acaa9f",
   "metadata": {},
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.13"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}