跟讀練習: HTML Links and Navigation Explained | HTML for Beginners #5 - 通過影片學習英語口語

選擇練習模式

每種模式都會開啟全屏練習室。

86 句

如果句子過短或過長，請點選 Edit 進行調整。

Welcome back to TechAura!

Imagine visiting a website and finding absolutely no clickable links.

You couldn't visit another page, open an article, or navigate to another website.

That would make browsing the internet pretty difficult, right?

Luckily, HTML gives us something called hyperlinks.

They're what make it possible to connect web pages together.

Today, you'll learn how to create clickable links, navigate between pages, and even build your first navigation menu.

Let's get started.

Let's start with the basics.

A HTML link, also called a hyperlink, connects one web page to another resource.

That resource could be another web page, a website, a document, or even a specific section of the current page.

When you click a link, your browser follows its destination.

This is one of the most important features of the World Wide Web.

But how do we create one?

Let's find out!

To create a link in HTML, we use the A element.

A stands for anchor.

Here's a simple example.

We start with the opening A tag.

Inside it, we have something called an attribute.

It's called href.

href specifies where the link should take the user.

In this example, the destination is Google's website.

Then, between the opening and closing tags, we write the text that users can click.

Here, it's visit Google.

Finally, we close the A element.

Now, let's see the result.

And that's it, you've just created your first HTML hyperlink.

Let's take a closer look at href.

href is short for hypertext reference.

It tells the browser the destination of the link.

There are different ways to use it.

First, we have external links links.

These take users to another website.

For example, when someone clicks this link, the browser navigates to YouTube.

Next, we have internal links.

These take users to another page within your own website.

For example, this link points to a page called About HTML.

Notice that we don't need to write the complete website address when linking to a page in the same website.

The browser uses the relative path to find the destination.

Now, what if you want a link to open in a new browser tab instead of replacing the current page?

HTML provides an attribute called target.

When we use target with the value blank, the browser opens the destination in a new tab or window.

Here's an example.

We add target equals blank inside our anchor tag.

And that's all.

But there's one more detail worth knowing.

For external links that open in a new tab, adding rel equals no opener is a good security practice.

It prevents the newly opened page from accessing the original page through the browser's opener property.

So remember, href defines the destination, target controls where the link opens, and no opener adds an important security protection.

Now, let's use everything we've learned to create something practical.

A navigation menu.

Most websites have a navigation menu at the top.

It helps visitors move between different sections or pages.

To create one, we use the nav element.

Nav represents a section of a web page containing navigation links.

Inside it, we add our anchor elements.

Let's create four links.

The home link, the about link, the services link, and the contact link.

Each link has its own destination.

And just like that, we've created a simple HTML navigation menu.

Now, you might be wondering why the menu doesn't look very beautiful.

That's because we're only using HTML.

We'll learn how to style navigation menus using CSS in a future lesson.

Here's another useful trick.

You can create a link that takes visitors directly to a specific section of the same web page.

We call this an anchor link.

First, we give an element a unique ID.

In this example, our heading has an ID called contact.

Then, we create a link using href with a hashtag followed by that ID.

When someone clicks the link, the browser navigates to the element with the matching ID.

This is especially useful for long articles, frequently asked questions, and table of contents sections.

Now it's your turn, let's test what you learned.

Your challenge is to create a simple navigation menu for your own website.

It must contain a home link, an about link, a contact link, one external link to Google,

and one link that takes visitors to a specific section of your web page.

Pause the video and try writing the code yourself.

Excellent!

You've just created your first navigation menu and learned how to connect different pages and sections.

You're making great progress!

And that's everything for Episode 5!

Today, you learned how to create hyperlinks, use the href attribute, open links in new tabs, and build a simple navigation menu.

In our next episode, we'll discover how to add images to web pages using HTML.

Don't forget to subscribe to TechHora.

Keep learning, keep building, and stay curious.

See you in episode 6!

下載應用

流利口語所需的一切

AI 發音評分逐句打分

音標練習掌握每個音

詞彙學習建立你的詞庫

詞彙遊戲邊玩邊學

掃碼

Download on theApp Store Get it onGoogle Play

FOR YOU

本課的詞彙與口語要點

這節口語課以影片“HTML Links and Navigation Explained”為素材。影片中反覆出現的詞有：link, page, create, website, Html。這段影片共有 86 個句子、824 個單詞可供跟讀。講話部分時長為 5:20。說話人語速自然，每分鐘約 154 個詞，接近日常對話。只有 79% 的單詞屬於英語最常用的 3,000 詞，詞彙難度較高。

影片中的重點詞彙

影片中 15 個值得學習的單詞，附發音和釋義：

單詞	發音	釋義
menu 名詞	/ˈmɛn.juː/	選單 /選單
navigation 名詞	/nævɪˈɡeɪʃən/	導航 /導航
destination 名詞	/dɛstɪˈneɪʃən/	目的地
element 名詞	/ˈɛləmənt/	要素
anchor 名詞	/ˈæŋ.kəː/	錨 /錨
connect 動詞	/kəˈnɛkt/	連線 /連線
visitor 名詞	/ˈvɪzɪtɚ/	訪客 /訪客, 客人
attribute 名詞	/ˈæt.ɹɪˌbjut/	屬性 /屬性
resource 名詞	/ɹɪˈzɔːs/	資源 /資源
practical 形容詞	/ˈpɹæk.tɪ.kəl/	使用的, 實用 /實用
relative 名詞	/ˈɹɛl.ə.tɪv/	親戚 /親戚
trick 名詞	/ˈtɹɪk/	詭計 /詭計, 騙術 /騙術
lesson 名詞	/ˈlɛs.ən/	課業 /課業, -課 /-課
curious 形容詞	/ˈkjʊɹ.i.əs/	好奇, 有好奇心
tag 名詞	/tæɡ/	標簽 /標籤

影片中出現的短語動詞

單詞	釋義
find out 動詞	找出, 查明

影片中的語法

說話人最常用的結構，並附上影片中的原話：

結構	影片中的用法
現在完成時 have/has + 過去分詞 — 過去發生但與現在仍有關聯的事	you've just created · we've learned · we've created
“will” 表將來 will + 動詞 — 決定、承諾或預測	you'll learn · We'll learn · we'll discover
現在進行時 am/is/are + -ing — 此刻或近期正在發生的事	we're only using · You're making
義務：must / have to / need to 表示某事是必要的	need to write · must contain

需要注意的發音

說話人用了 14 次縮略和弱讀形式，例如 don't, we'll, we've。請按聽到的簡短形式來說。

“sh” 和 “zh” 音: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/, hashtag /ˈhæʃˌtæɡ/
長單詞——注意重音位置: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/

中文母語者容易讀錯的音：

/v/ — 不要讀成 /w/，上齒輕觸下唇: navigation /nævɪˈɡeɪʃən/, navigate /ˈnæv.ɪ.ɡeɪt/, visitor /ˈvɪzɪtɚ/, relative /ˈɹɛl.ə.tɪv/, discover /dɪˈskʌvə/
詞尾子音 — 要讀清楚，後面不要加母音: element /ˈɛləmənt/, navigate /ˈnæv.ɪ.ɡeɪt/, connect /kəˈnɛkt/, attribute /ˈæt.ɹɪˌbjut/, resource /ɹɪˈzɔːs/
/r/ 和 /l/ 的區別: practical /ˈpɹæk.tɪ.kəl/, relative /ˈɹɛl.ə.tɪv/, hyperlink /ˈhaɪpə(ɹ)ˌlɪŋk/

如何用這段影片練習

先完整聽一遍影片，不要開口，記下不認識的單詞。
先用 0.75 倍速逐句跟讀，熟練之後再回到正常速度。
錄下自己的聲音並與原聲對比，特別注意 menu, navigation, destination 這類單詞。

什麼是跟讀法？

跟讀法 (Shadowing) 是一種有科學依據的語言學習技巧，最初開發用於專業口譯員的培訓，並由多語言者Alexander Arguelles博士普及。這個方法簡單而強大：您在聽英語母語原聲的同時立即大聲重複——就像是一個延遲1-2秒緊跟說話者的影子。與被動聽力或語法練習不同，跟讀法強迫您的大腦和口腔肌肉同時處理並模模擬實的講話模式。研究表明它能顯著提高發音準確性，語調，節奏，連讀，聽力理解和口語流利度——使其成為雅思口語備考和真實英語交流最有效的方法之一。

影子跟讀法: 閱讀完整分步指南 →

跟讀練習: HTML Links and Navigation Explained | HTML for Beginners #5 - 通過影片學習英語口語

選擇練習模式

下載應用

推薦影片

HTML Tag Text Basics | HTML5 Element Text Tutorial

A1 English Listening Practice - The Internet

you will never ask about pointers again after watching this video

React Native for Beginners tutorial

Understanding the Elements of Design | Graphic Design Basic

Learn 97% of Harvard's CS50 in 25 minutes

Usability Heuristic 3: User Control & Freedom

Introduction To Networking - Different Types Of Networks | Networking Fundamentals Part 2 (revised)

LINUX isn't Hard Once You Understand This (File Directories)

DejaVue #E001 - The Need for Server-Side Rendering (SSR)

Links | HTML | Tutorial 8

Anatomy & Physiology: The Ultimate Beginner's Guide | Dr. Bee's Tutorials