원본 텍스트
HTML - Entities
Hello there, future web developers! As your friendly neighborhood computer teacher, I'm excited to take you on a journey through the fascinating world of HTML entities. Don't worry if you're new to programming – we'll start from the basics and work our way up. By the end of this tutorial, you'll be an HTML entity expert!
What are HTML Entities?
Before we dive in, let's understand what HTML entities are. Think of them as special codes that represent characters that might otherwise be difficult to display in HTML. It's like having a secret language for your web pages!
Why do we need HTML entities?
Imagine you want to display the less than symbol (<) in your HTML. If you just type it directly, your browser might think it's the start of a new HTML tag! That's where entities come to the rescue. They allow us to display these special characters without confusing the browser.
HTML Character Entities Name and Code
Let's start with some of the most common HTML entities. We'll look at both their names and their numeric codes.
| Character | Entity Name | Numeric Code |
|---|---|---|
| < | < | < |
| > | > | > |
| & | & | & |
| " | " | " |
| ' | ' | ' |
Let's see these in action:
<p>I love to use <strong> tags to make text <strong>bold</strong>!</p>
<p>The ampersand symbol (&) is used for HTML entities.</p>In this example, we're using < and > to display the actual tags, and & to show the ampersand. Try removing these entities and see what happens!
HTML Non Breaking Spaces Name and Code
Now, let's talk about a special entity that's incredibly useful: the non-breaking space.
| Character | Entity Name | Numeric Code |
|---|---|---|
| (space) |
The non-breaking space is like a superhero space – it prevents line breaks where you don't want them. For example:
<p>I love HTML entities!</p>This ensures "HTML" and "entities" always stay on the same line.
Example of HTML Entities
Let's put our knowledge to the test with a fun example:
<p>I'm learning HTML & it's <em>amazing</em>!</p>
<p>Copyright © 2023 by John Doe</p>In this example, we're using & for the ampersand, < and > to display the <em> tags, © for the copyright symbol, and to keep "John" and "Doe" together.
ISO 8859-1 Symbol Entities Name and Code
HTML also provides entities for various symbols. Here are some common ones:
| Symbol | Entity Name | Numeric Code |
|---|---|---|
| © | © | © |
| ® | ® | ® |
| ™ | ™ | ™ |
| € | € | € |
| £ | £ | £ |
Let's use these in a practical example:
<p>Our company, Web Wizards™, accepts payments in € and £.</p>
<p>All content is © 2023 Web Wizards®.</p>ISO 8859-1 Character Entities Name and Code
Sometimes, you might need to display characters with accents or other diacritical marks. HTML entities come to the rescue again:
| Character | Entity Name | Numeric Code |
|---|---|---|
| à | à | à |
| é | é | é |
| ñ | ñ | ñ |
| ü | ü | ü |
Here's how you might use these:
<p>In Spanish, "hello" is "hola" and "goodbye" is "adiós".</p>
<p>The French word for "beach" is "plage" (pronounced "plâzh").</p>Other Entities Supported by Browsers
Modern browsers support a wide range of entities, including mathematical symbols, arrows, and even emojis! Here are a few fun ones:
| Symbol | Entity Name | Numeric Code |
|---|---|---|
| ∞ | ∞ | ∞ |
| ♥ | ♥ | ♥ |
| → | → | → |
| ☺ | ⌣ | ☺ |
Let's use these to create a playful message:
<p>I have ∞ love for HTML! ♥</p>
<p>Let's move forward → and keep learning! ⌣</p>Remember, while these entities are fun, it's important to use them judiciously. Overusing entities can make your HTML harder to read and maintain.
Conclusion
Congratulations! You've just taken a deep dive into the world of HTML entities. From displaying special characters to adding fun symbols, you now have a powerful tool in your web development toolkit.
As we wrap up, here's a little story from my teaching experience: I once had a student who was frustrated because his ampersands kept disappearing from his web page. When I showed him HTML entities, his face lit up like he'd discovered a hidden treasure. That's the magic of learning – there's always a solution waiting to be uncovered!
Remember, practice makes perfect. Try incorporating these entities into your HTML projects, and soon they'll become second nature. Happy coding, and may your web pages be filled with perfectly rendered characters and symbols!
한글 번역
HTML - 엔티티
안녕하세요, 미래의 웹 개발자 여러분! 여러분의 친절한 이웃 컴퓨터 교사로서, HTML 엔티티의 fascineting 세계로 여러분을 안내하게 되어 기쁩니다. 프로그래밍에 처음이라면 걱정하지 마세요 - 기본부터 차근차근 설명해 나갈 테니까요. 이 튜토리얼을 마치면, 여러분은 HTML 엔티티 전문가가 될 것입니다!
HTML 엔티티는 무엇인가요?
들어보기 전에, HTML 엔티티가 무엇인지 이해해 보겠습니다. HTML에서 표시하기 어려운 문자를 나타내는 특별한 코드라고 생각해 보세요. 마치 웹 페이지에 사용할 수 있는 비밀 언어似的입니다!
왜 HTML 엔티티가 필요한가요?
HTML에서 '<' 기호를 표시하고 싶다고 가정해 봅시다. 그냥 그대로 타이핑하면 브라우저가 새로운 HTML 태그의 시작으로 간주할 수 있습니다! 여기서 엔티티가 구원자로 나타납니다. 이를 통해 브라우저를 혼동시키지 않고 특별한 문자를 표시할 수 있습니다.
HTML 문자 엔티티 이름과 코드
가장 일반적인 HTML 엔티티 몇 가지를 시작해 보겠습니다. 이름과 수치 코드 모두 살펴보겠습니다.
| 문자 | 엔티티 이름 | 수치 코드 |
|---|---|---|
| < | < | < |
| > | > | > |
| & | & | & |
| " | " | " |
| ' | ' | ' |
이제 이들을 실제로 사용해 보겠습니다:
<p>I love to use <strong> tags to make text <strong>bold</strong>!</p>
<p>The ampersand symbol (&) is used for HTML entities.</p>이 예제에서, 우리는 <와 >를 실제 태그로 표시하고, &를 사용하여 앰퍼샌드를 표시하고 있습니다. 이 엔티티를 제거해 보세요!
HTML 비연속 공백 이름과 코드
이제 특별한 엔티티에 대해 이야기해 보겠습니다: 비연속 공백.
| 문자 | 엔티티 이름 | 수치 코드 |
|---|---|---|
| (공백) |
비연속 공백은 슈퍼 히어로 공백처럼 - 원치 않는 행 간격을 방지합니다. 예를 들어:
<p>I love HTML entities!</p>이렇게 하면 "HTML"과 "entities"가 항상 같은 줄에 남습니다.
HTML 엔티티 예제
지식을 테스트해 보는 재미있는 예제를 만들어 보겠습니다:
<p>I'm learning HTML & it's <em>amazing</em>!</p>
<p>Copyright © 2023 by John Doe</p>이 예제에서, 우리는 &를 사용하여 앰퍼샌드를 표시하고, <와 >를 사용하여 <em> 태그를 표시하며, ©를 사용하여 저작권 기호를 표시하고, 를 사용하여 "John"과 "Doe"를 함께 유지합니다.
ISO 8859-1 기호 엔티티 이름과 코드
HTML은 다양한 기호에 대한 엔티티를 제공합니다. 여기 몇 가지 일반적인 것을 소개합니다:
| 기호 | 엔티티 이름 | 수치 코드 |
|---|---|---|
| © | © | © |
| ® | ® | ® |
| ™ | ™ | ™ |
| € | € | € |
| £ | £ | £ |
이를 실제 예제에서 사용해 보겠습니다:
<p>Our company, Web Wizards™, accepts payments in € and £.</p>
<p>All content is © 2023 Web Wizards®.</p>ISO 8859-1 문자 엔티티 이름과 코드
때로는 이중음표나 기타 이음 부호가 필요할 수 있습니다. HTML 엔티티가 다시 구원자로 나타납니다:
| 문자 | 엔티티 이름 | 수치 코드 |
|---|---|---|
| à | à | à |
| é | é | é |
| ñ | ñ | ñ |
| ü | ü | ü |
이렇게 사용할 수 있습니다:
<p>In Spanish, "hello" is "hola" and "goodbye" is "adiós".</p>
<p>The French word for "beach" is "plage" (pronounced "plâzh").</p>브라우저에서 지원되는 다른 엔티티
모던 브라우저는 수학 기호, 화살표, 그리고 심지어 이모지까지 다양한 엔티티를 지원합니다! 몇 가지 재미있는 것을 소개합니다:
| 기호 | 엔티티 이름 | 수치 코드 |
|---|---|---|
| ∞ | ∞ | ∞ |
| ♥ | ♥ | ♥ |
| → | → | → |
| ☺ | ⌣ | ☺ |
이를 사용하여 재미있는 메시지를 만들어 보겠습니다:
<p>I have ∞ love for HTML! ♥</p>
<p>Let's move forward → and keep learning! ⌣</p>이 엔티티들은 재미있지만, 적절히 사용하는 것이 중요합니다. 과도한 사용은 HTML을 읽고 유지하기 어렵게 만들 수 있습니다.
결론
축하합니다! 지금까지 HTML 엔티티의 세계로 깊이 다가갔습니다. 특별한 문자를 표시하는 것에서 재미있는 기호를 추가하는 것까지, 여러분은 웹 개발 도구 상자에 강력한 도구를 얻었습니다.
마무리하면서, 제 교육 경험에서的小故事를 이야기해 보겠습니다: 한 학생이 웹 페이지에서 앰퍼샌드가 사라지는 것에 화가 났습니다. HTML 엔티티를 보여주자 그의 얼굴이 보석을 발견한 것처럼 밝아졌습니다. 배우는 것의 마법은 항상 해결책이 기다리고 있다는 것입니다!
기억하세요, 연습은 완벽을 만듭니다. 이 엔티티들을 HTML 프로젝트에 포함해 보세요, 그러면 곧 이들이 두 번째 자연스러운 것으로 느껴질 것입니다. 행복하게 코딩하세요, 그리고 여러분의 웹 페이지가 완벽하게 표시된 문자와 기호로 가득 차기를 바랍니다!
Credits: Image by storyset