Shadowing-Übung: HTML Links and Navigation Explained | HTML for Beginners #5 - Englisch Sprechen Lernen mit Video
Übungsmodus wählen
Jeder Modus öffnet einen Übungsraum im Vollbild.
86 Sätze
Wenn Sätze zu kurz oder zu lang sind, klicke auf Edit, um sie anzupassen.
1
Welcome back to TechAura!
2
Imagine visiting a website and finding absolutely no clickable links.
3
You couldn't visit another page, open an article, or navigate to another website.
4
That would make browsing the internet pretty difficult, right?
5
Luckily, HTML gives us something called hyperlinks.
6
They're what make it possible to connect web pages together.
7
Today, you'll learn how to create clickable links, navigate between pages, and even build your first navigation menu.
8
Let's get started.
9
Let's start with the basics.
10
A HTML link, also called a hyperlink, connects one web page to another resource.
11
That resource could be another web page, a website, a document, or even a specific section of the current page.
12
When you click a link, your browser follows its destination.
13
This is one of the most important features of the World Wide Web.
14
But how do we create one?
15
Let's find out!
16
To create a link in HTML, we use the A element.
17
A stands for anchor.
18
Here's a simple example.
19
We start with the opening A tag.
20
Inside it, we have something called an attribute.
21
It's called href.
22
href specifies where the link should take the user.
23
In this example, the destination is Google's website.
24
Then, between the opening and closing tags, we write the text that users can click.
25
Here, it's visit Google.
26
Finally, we close the A element.
27
Now, let's see the result.
28
And that's it, you've just created your first HTML hyperlink.
29
Let's take a closer look at href.
30
href is short for hypertext reference.
31
It tells the browser the destination of the link.
32
There are different ways to use it.
33
First, we have external links links.
34
These take users to another website.
35
For example, when someone clicks this link, the browser navigates to YouTube.
36
Next, we have internal links.
37
These take users to another page within your own website.
38
For example, this link points to a page called About HTML.
39
Notice that we don't need to write the complete website address when linking to a page in the same website.
40
The browser uses the relative path to find the destination.
41
Now, what if you want a link to open in a new browser tab instead of replacing the current page?
42
HTML provides an attribute called target.
43
When we use target with the value blank, the browser opens the destination in a new tab or window.
44
Here's an example.
45
We add target equals blank inside our anchor tag.
46
And that's all.
47
But there's one more detail worth knowing.
48
For external links that open in a new tab, adding rel equals no opener is a good security practice.
49
It prevents the newly opened page from accessing the original page through the browser's opener property.
50
So remember, href defines the destination, target controls where the link opens, and no opener adds an important security protection.
51
Now, let's use everything we've learned to create something practical.
52
A navigation menu.
53
Most websites have a navigation menu at the top.
54
It helps visitors move between different sections or pages.
55
To create one, we use the nav element.
56
Nav represents a section of a web page containing navigation links.
57
Inside it, we add our anchor elements.
58
Let's create four links.
59
The home link, the about link, the services link, and the contact link.
60
Each link has its own destination.
61
And just like that, we've created a simple HTML navigation menu.
62
Now, you might be wondering why the menu doesn't look very beautiful.
63
That's because we're only using HTML.
64
We'll learn how to style navigation menus using CSS in a future lesson.
65
Here's another useful trick.
66
You can create a link that takes visitors directly to a specific section of the same web page.
67
We call this an anchor link.
68
First, we give an element a unique ID.
69
In this example, our heading has an ID called contact.
70
Then, we create a link using href with a hashtag followed by that ID.
71
When someone clicks the link, the browser navigates to the element with the matching ID.
72
This is especially useful for long articles, frequently asked questions, and table of contents sections.
73
Now it's your turn, let's test what you learned.
74
Your challenge is to create a simple navigation menu for your own website.
75
It must contain a home link, an about link, a contact link, one external link to Google,
76
and one link that takes visitors to a specific section of your web page.
77
Pause the video and try writing the code yourself.
78
Excellent!
79
You've just created your first navigation menu and learned how to connect different pages and sections.
80
You're making great progress!
81
And that's everything for Episode 5!
82
Today, you learned how to create hyperlinks, use the href attribute, open links in new tabs, and build a simple navigation menu.
83
In our next episode, we'll discover how to add images to web pages using HTML.
84
Don't forget to subscribe to TechHora.
85
Keep learning, keep building, and stay curious.
86
See you in episode 6!
App herunterladen
Alles, was du zum fließenden Sprechen brauchst
KI-AussprachebewertungJeder Satz bewertet
IPA-TrainingJeden Laut meistern
WortschatzBaue deinen Wortschatz auf
VokabelspielSpielend lernen
FOR YOU
Empfohlenes Video
B12
291 Sätze
HTML Tag Text Basics | HTML5 Element Text Tutorial
Daily ConversationUniversity Students
A28
103 Sätze
English Podcast - Level A1 - A2 | Your Future With English
Travel EnglishTeensDaily Conversation
B21
103 Sätze
you will never ask about pointers again after watching this video
Daily ConversationUniversity Students
B11
347 Sätze
React Native for Beginners tutorial
Daily ConversationUniversity Students
B11
92 Sätze
Understanding the Elements of Design | Graphic Design Basic
Daily ConversationUniversity Students
B11
371 Sätze
Learn 97% of Harvard's CS50 in 25 minutes
Daily ConversationUniversity Students
B26
24 Sätze
Usability Heuristic 3: User Control & Freedom
Daily ConversationUniversity StudentsWorking Adults
B21
22 Sätze
Introduction To Networking - Different Types Of Networks | Networking Fundamentals Part 2 (revised)
Daily ConversationUniversity Students
B2120 Sätze
LINUX isn't Hard Once You Understand This (File Directories)
Daily ConversationUniversity Students
B22
341 Sätze
How to Use WaniKani to Learn Kanji | Tutorial for Beginners
Daily ConversationUniversity Students
C11
466 Sätze
DejaVue #E001 - The Need for Server-Side Rendering (SSR)
Daily ConversationUniversity Students
B1119 Sätze
Links | HTML | Tutorial 8
Daily ConversationUniversity Students
Wortschatz und Sprechhinweise zu dieser Lektion
Diese Sprechübung basiert auf dem Video „HTML Links and Navigation Explained“. Diese Wörter kommen am häufigsten vor: link, page, create, website, Html. Dieses Video enthält 86 Sätze und 824 Wörter zum Nachsprechen. Der gesprochene Teil dauert 5:20. Der Sprecher spricht in natürlichem Tempo, etwa 154 Wörter pro Minute, ähnlich wie im Alltagsgespräch. Nur 79 % der Wörter gehören zu den 3.000 häufigsten im Englischen, der Wortschatz ist also anspruchsvoll.
Wichtiger Wortschatz in diesem Video
15 lernenswerte Wörter aus dem Video, mit Aussprache und Bedeutung:
| Wort | Aussprache | Bedeutung |
|---|---|---|
| menu Substantiv | /ˈmɛn.juː/ | Menü |
| navigation Substantiv | /nævɪˈɡeɪʃən/ | Navigation |
| destination Substantiv | /dɛstɪˈneɪʃən/ | Reiseziel, Bestimmungsort |
| element Substantiv | /ˈɛləmənt/ | Element |
| anchor Substantiv | /ˈæŋ.kəː/ | Anker |
| navigate Verb | /ˈnæv.ɪ.ɡeɪt/ | die Richtung vorgeben, steuern |
| connect Verb | /kəˈnɛkt/ | verbinden |
| visitor Substantiv | /ˈvɪzɪtɚ/ | Besucher, Besucherin |
| attribute Substantiv | /ˈæt.ɹɪˌbjut/ | Eigenschaft, Merkmal |
| resource Substantiv | /ɹɪˈzɔːs/ | Ressource, Mittel |
| blank Substantiv | /ˈblæŋk/ | Rohling |
| practical Adjektiv | /ˈpɹæk.tɪ.kəl/ | praktisch |
| relative Substantiv | /ˈɹɛl.ə.tɪv/ | Verwandter, Blutsverwandter |
| trick Substantiv | /ˈtɹɪk/ | List, Falle |
| lesson Substantiv | /ˈlɛs.ən/ | Lehrstunde, Stunde |
Phrasal Verbs, die du hören wirst
| Wort | Bedeutung |
|---|---|
| find out Verb | herausfinden, erfahren |
Grammatik in diesem Video
Die Strukturen, die der Sprecher am häufigsten verwendet, mit den genauen Worten aus dem Video:
| Struktur | Im Video |
|---|---|
| Present Perfect have/has + Partizip Perfekt – eine vergangene Handlung, die jetzt noch wichtig ist | you've just created · we've learned · we've created |
| Zukunft mit „will“ will + Verb – eine Entscheidung, ein Versprechen oder eine Vorhersage | you'll learn · We'll learn · we'll discover |
| Present Continuous am/is/are + -ing – etwas, das gerade jetzt oder zurzeit passiert | we're only using · You're making |
| Verpflichtung: must / have to / need to sagen, dass etwas notwendig ist | need to write · must contain |
Aussprache, auf die du achten solltest
Der Sprecher verwendet 14 Kurzformen und abgeschwächte Formen, zum Beispiel don't, we'll, we've. Sprich sie in der kurzen Form, so wie du sie hörst.
- Die Laute „sh“ und „zh“: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/, hashtag /ˈhæʃˌtæɡ/
- Lange Wörter – auf die Betonung achten: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/
Laute, die Deutschsprachigen schwerfallen:
- Stimmhafter Auslaut — /b/, /d/, /g/, /z/, /v/ am Wortende nicht verhärten: relative /ˈɹɛl.ə.tɪv/, tag /tæɡ/, subscribe /səbˈskɹaɪb/, pause /pɔːz/, tab /tæb/
- /æ/ — offener als „ä“: navigation /nævɪˈɡeɪʃən/, anchor /ˈæŋ.kəː/, navigate /ˈnæv.ɪ.ɡeɪt/, attribute /ˈæt.ɹɪˌbjut/, blank /ˈblæŋk/
So übst du mit diesem Video
- Höre dir das ganze Video einmal an, ohne zu sprechen, und notiere die Wörter, die du nicht kennst.
- Beginne mit 0,75-facher Geschwindigkeit, sprich Satz für Satz nach und wechsle zur normalen Geschwindigkeit, sobald es leichtfällt.
- Nimm dich auf und vergleiche mit dem Original; achte dabei auf Wörter wie menu, navigation, destination.
Was ist die Shadowing-Technik?
Shadowing ist eine wissenschaftlich fundierte Sprachlerntechnik, die ursprünglich für die professionelle Dolmetscherausbildung entwickelt und durch den Polyglotten Dr. Alexander Arguelles populär gemacht wurde. Die Methode ist einfach aber wirkungsvoll: Du hörst englisches Audio von Muttersprachlern und wiederholst es sofort laut — wie ein Schatten, der dem Sprecher mit nur 1–2 Sekunden Verzögerung folgt. Anders als passives Hören oder Grammatikübungen zwingt Shadowing dein Gehirn und deine Mundmuskulatur, gleichzeitig echte Sprachmuster zu verarbeiten und zu reproduzieren. Studien zeigen, dass es Aussprachegenauigkeit, Intonation, Rhythmus, verbundene Sprache, Hörverständnis und Sprechflüssigkeit signifikant verbessert — was es zu einer der effektivsten Methoden für die IELTS Speaking-Vorbereitung und reale englische Kommunikation macht.