src/02_basics/webspider/website-url-extractor.qmd

---
title: "Webseiten-URL-Extraktor"
description: "Ein Tool zur Extraktion und Darstellung aller Links von einer angegebenen Webseite, einschließlich Filterung und übersichtlicher Darstellung."
image: _1fca0884-d58a-4271-b90f-90afcb2c4be9.jpeg
---

::: {.callout-tip}
## Lernziele

* Was ist eine URLs?
* Aus welchen Bestandteilen besteht eine URLs?
:::

## Funktionen  
- **Webseitenanalyse**: Automatische Extraktion aller URLs von einer Webseite.  
- **Filterung**: Nur vollständige Links (z. B. beginnend mit `http`) werden angezeigt.  
- **Einfaches Interface**: Eingabefeld für die URLs und eine klare Liste der extrahierten Links.

## Anleitung

### 1. Öffnen der Anwendung
   - Zur [Webseiten-URL-Extraktor-App](https://huggingface.co/spaces/datenwerkzeuge/Webseiten-URL-Extraktor) auf Hugging Face navigieren.

### 2. Eingabemethode wählen
   - Eingabemethode auswählen: **URLs** oder **HTML-Datei hochladen**.

### 3. URLs extrahieren

#### URL-Eingabemethode:
   - URL der Webseite in das Eingabefeld eingeben (z. B. `https://example.com`).
   - Auf die Schaltfläche **"URLs extrahieren"** klicken.
   - Die App extrahiert alle Links von der angegebenen Webseite und zeigt sie an. Nur vollständige Links, die mit `http` beginnen, werden angezeigt.

#### HTML-Datei hochladen:
   - HTML-Datei hochladen, indem auf **"HTML-Datei hochladen"** geklickt und die Datei ausgewählt wird.
   - Auf die Schaltfläche **"URLs extrahieren"** klicken.
   - Die App extrahiert alle Links aus der hochgeladenen HTML-Datei und zeigt sie an. Nur vollständige Links, die mit `http` beginnen, werden angezeigt.

**Blick in den Quelltext:**
```python
links = [a.get('href') for a in soup.find_all('a', href=True)]
```

Der Code extrahiert alle URLs aus den `<a>`-Tags eines HTML-Dokuments und speichert sie in der Liste links.

1. ```python
soup.find_all('a', href=True)
```
Diese Methode durchsucht das HTML-Dokument nach allen `<a>`-Tags, die ein href-Attribut besitzen. soup ist dabei ein BeautifulSoup-Objekt, das das HTML-Dokument repräsentiert.
2. ```python
a.get('href')
```
Für jedes gefundene `<a>`-Tag wird der Wert des href-Attributs extrahiert.
3. ```python
[a.get('href') for a in soup.find_all('a', href=True)]
```
Die Auflistungsfunktion wiederholt die Extraktion für jeden Link im Dokument und erstellt eine Liste aller href-Werte (URLs) der gefundenen `<a>`-Tags.

### 4. Ergebnisse anzeigen
   - Die extrahierten URLs werden in einer übersichtlichen Liste angezeigt. Die Links können direkt angeklickt werden, um sie zu öffnen.

## Fazit

Das Webseiten-URL-Extraktor-Tool bietet verdeutlicht das Filtern von Links auf Webseiten oder aus HTML-Dateien, indem es nur vollständige URLs darstellt.

::: {.callout-tip}
### Was ist eine URL?

Eine **URL** (Uniform Resource Locator) ist die Adresse eines bestimmten Dokuments oder Ressourcen im Internet. Sie dient dazu, Webanwendungen und -dienste eindeutig zu identifizieren und darauf zuzugreifen. 
:::

::: {.callout-tip collapse="true"}
### Bestandteile einer URL

Eine typische URL besteht aus mehreren Teilen:

- **Schema**: Gibt das Protokoll an, das verwendet wird, um die Ressource zu erreichen (z.B. `http`, `https`, `ftp`).

- **Host**: Der Name oder die IP-Adresse des Servers, auf dem die Ressource gespeichert ist (z.B. `example.com`).

- **Port**: Optional; spezifiziert den Port, über den die Verbindung hergestellt wird, wenn es nicht der Standardport ist (z.B. `80` für HTTP oder `443` für HTTPS).

- **Pfad**: Zeigt den spezifischen Ort der Ressource auf dem Server an (z.B. `/pfad/zur/ressource.html`).

- **Query-Parameter**: Optional; verwendet, um zusätzliche Daten an den Server zu übergeben, oft nach einem `?` (z.B. `?id=123&name=test`).

- **Fragment**: Optional; identifiziert einen bestimmten Teil der Ressource, häufig verwendet in HTML-Dokumenten für interne Navigation (z.B. `#abschnitt`).
:::

::: {.callout-tip collapse="true"}
### Beispiel einer vollständigen URL

```plaintext
https://www.example.com:443/pfad/zur/ressource.html?id=123&name=test#abschnitt
```

* Schema: `https`
* Host: `www.example.com`
* Port: `443`
* Pfad: `/pfad/zur/ressource.html`
* Query-Parameter: `id=123&name=test`
* Fragment: `abschnitt`

Mit dieser Struktur kann ein Browser oder ein anderes Netzwerkprogramm die genaue Adresse einer Ressource im Internet bestimmen und darauf zugreifen.
:::

## Anwendungsfall

[Dead Link Checker](https://www.deadlinkchecker.com/) ist ein Online-Tool das nicht funktionierende Links (Dead Links) auf Webseiten identifiziert. An diesem Fall ist erkennbar wie eine einfache Anwendung, wie der URL-Extraktor, als Bestandteil in einer Geschäftsanwendung eingesetzt werden kann.