Introduction to HTML

The Complete 2020 Web Development Bootcamp

The Complete 2020 Web Development Bootcamp

---

Making italic font in html

**Recommended: use <em> instead of <i>

<i> vs. <em>

New developers are often confused at seeing multiple elements that produce similar results.

<em> and <i> are a common example, since they both italicize text.

What's the difference? Which should you use?

 

By default, the visual result is the same. However, the semantic meaning is different.

The <em> element represents stress emphasis of its contents, while the <i> element represents text that is set off from the normal prose, such a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning.

(The title of a work, such as the name of a book or movie, should use <cite>.)

This means the right one to use depends on the situation. Neither is for purely decorational purposes, that's what CSS styling is for.

 

An example for <em> could be: "Just do it already!", or: "We had to do something about it". A person or software reading the text would pronounce the words in italics with an emphasis, using verbal stress.

An example for <i> could be: "The Queen Mary sailed last night". Here, there is no added emphasis or importance on the word "Queen Mary". It is merely indicated that the object in question is not a queen named Mary, but a ship named Queen Mary. Another example for <i> could be: "The word the is an article".

 

In short, <em> is used to emphasize a word or words. On the contrary, <i> is used to show it's Proper noun. Another words, <em> has an purpose of emphasizing. But <i> is just style no emphasis for something.

**Another similar case: Bold

**Recommended: use <strong> instead of <b>

<b> vs. <strong>

It is often confusing to new developers why there are so many ways to express the same thing on a rendered website. <b> and <strong> are perhaps one of the most common sources of confusion, causing developers to ask "Should I use <b> or <strong>? Don't they both do the same thing?"

Not exactly. The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important.

It may help to realize that both are valid and semantic elements in HTML5 and that it's a coincidence that they both have the same default styling (boldface) in most browsers (although some older browsers actually underline <strong>). Each element is meant to be used in certain types of scenarios, and if you want to bold text simply for decoration, you should instead actually use the CSS font-weight property.

The intended meaning or purpose of the enclosed text should be what determines which element you use. Communicating meaning is what semantics are all about.

<em> vs. <strong>

Adding to the confusion is the fact that while HTML 4 defined <strong> as simply indicating a stronger emphasis, HTML 5 defines <strong> as representing "strong importance for its contents." This is an important distinction to make.

While <em> is used to change the meaning of a sentence as spoken emphasis does ("I love carrots" vs. "I love carrots"), <strong> is used to give portions of a sentence added importance (e.g., "Warning! This is very dangerous.") Both <strong> and <em> can be nested to increase the relative degree of importance or stress emphasis, respectively.

---

Bullet list html

The HTML <ul> element represents an unordered list of items, typically rendered as a bulleted list.

<ul>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ul>

Ordered list html

The HTML <ol> element represents an ordered list of items — typically rendered as a numbered list.

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

---

Insert Image

<img src=src="/media/cc0-images/grapefruit-slice-332-332.jpg" alt="ygseo profile picture">

 

• The src attribute is required, and contains the path to the image you want to embed.
• The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means.
• Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.

developer.mozilla.org/en-US/docs/Web/HTML/Element/img

---

Hyberlink(to external web or another html files)

<a>: The Anchor element

 

<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

or

<a href='hobbies.html'>My hobbies</a>
<br>
<a href='contact.html'>Contact Me</a>

---

Table

table element로 만드는데

기본적인 구성은 <thead>, <tbody>, <tfoot>으로 되어있다.

보편적으로 <thead>, <tbody>를 주로 사용한다.

만약에 <thead>를 사용하지 않고

그냥 <th>로만 테이블을 만들어도 헤더로 인식하기 때문에 작동은 하지만

추후에 styling할때 따로하는데 있어서 불편함을 초래할 수 있기 때문에

<thead>, <tbody>를 만들어서 사용하는 습관을 들이는 것을 추천한다.

 

**Recommended: HTML's role is making structures not styling.

Thumb down emoji shows deprecated.

The reason why if the element has thumb-down emoji right side of it is that html is a structure of web not styling.

Thus, it's recommend not to use any attribute that has thumb-down emoji in documention.

 

        <table>
            <thead>
                <tr>
                    <th>Dates</th>
                    <th>/tCompetition</th>
                </tr>

            </thead>
            <tbody>
                <tr>
                    <td>2020</td>
                    <td>Bengali Handwritten Classification</td>
                </tr>
                <tr>
                    <td>2019</td>
                    <td>Big contest: Lineage User Survival Prediction </td>
            </tbody>
        </table>

---

Table in Table

위 테이블은 하나의 테이블안에 2개의 테이블이 border 를 가지고 있는 것이다.

왼쪽 테이블과 오른쪽 테이블은 각각 2x2 로 구성되어있고 border는 없다.

따라서 최 상위 테이블에만 border를 주고 나머지는 border를 안주면 만들수 있다.

최 상위 테이블 안에서 tr은 1개이고 td는 2개이다.

각 td안에 table을 삽입하면 된다.

        <table border="1">
            <tr>
                <td>
                    <table >
                        <tr>
                            <td>Machine Learning</td>
                            <td>⭐⭐⭐⭐</td>
                        </tr>
                        <tr>
                            <td>Deep Learning</td>
                            <td>⭐⭐⭐⭐</td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table>
                        <tr>
                            <td>Python</td>
                            <td>⭐⭐⭐⭐</td>
                        </tr>
                        <tr>
                            <td>html 5</td>
                            <td>⭐</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>