INTRODUCTION TO HTML

  1. HTML stands for HyperText Markup Language and is used to create the structure and content of a webpage.

  2. Most HTML elements contain opening and closing tags with raw text or other HTML tags between them.

  3. Single-closing tags cannot enclose raw text or other elements.

  4. Comments are written in HTML using the following syntax: .

  5. HTML elements can be nested inside other elements. The enclosed element is the child of the enclosing parent element.

  6. Whitespace between HTML elements helps make code easier to read while not changing how elements appear in the browser.

  7. Indentation also helps make code easier to read. It makes parent-child relationships visible.

  8. The <!DOCTYPE html> declaration should always be the first line of code in your HTML files.

  9. The element will contain all of your HTML code.

  10. Information about the web page, like the title, belongs within the of the page.

  11. You can add a title to your web page by using the element, inside of the head.

  12. A webpage's title appears in a browser's tab. Code for visible HTML content is placed inside of the element.

    All HTML Attributes:

    https://www.w3schools.com/tags/ref_attributes.asp

    Paragraphs

    (<p> </p>) simply contain a block of plain text.

    <p title="tool-tip">contents</p> Floats a "tool-tip" on contents when mouse hovering on it.

    Basic formatting

    This text is <b>bold</b>, <i>italicized</i>, and <u>underlined</u>.

    Divide

    <div>s can contain any text or other HTML elements. They are primarily used to divide HTML documents into sections.

    Span

    <span>s contain short pieces of text or other HTML. They are primarily used to wrap small pieces of content that are on the same line as other content and do not break text into different sections.

    List

    Ordered lists:

    <!DOCTYPE html>
<ol>
<li>elements</li>
</ol>

    Unordered lists:

    <ul>
<li>elements</li>
</ul>

    Image

    <img src="image's URL" alt="description of the image."/>

    Video

<video src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" width="320" height="240" controls>
      Video not supported
</video>

Linking out

<a href="https://www.wikipedia.org/" target="_blank">This Is A Link To Wikipedia</a>

  • The target="_blank" attribute specifies that the link should open in a new window.

  • Relative path: A relative path is a filename that shows the path to a local file. <a href="./contact.html">Contact</a> The ./in ./contact.html tells the browser to look the file in current folder.

  • Some of the tags we have used, such as <div>, are called non-semantic tags（非語意標記）. This means that they do not describe the content that is inside of them. However, many tags are used to describe the content that they surround, which helps us modify and style our content later.

Table

  <table>
    <tr> <!-- Row 1 -->
      <th></th>
      <th>Saturday</th>
      <th>Sunday</th>
    </tr>
    <tr> <!-- Row 2 -->
      <th>Morning</th>
      <td rowspan="2">Work</td>
      <td rowspan="3">Relax</td>
    </tr>
    <tr> <!-- Row 3 -->
      <th>Afternoon</th>
    </tr>
    <tr> <!-- Row 4 -->
      <th>Evening</th>
      <td>Dinner</td>
    </tr>
  </table>

註解的寫法：

開始符號

<!--這邊會被當作註解 -->

結束符號

Indentation:

Indentation is used to easily visualize which elements are nested within other elements.

World Wide Web Consortium recommends 2 spaces of indentation when writing HTML code.

HTML Formatting Elements

Note: Browsers display as , and as . However, there is a difference in the meaning of these tags: and defines bold and italic text, but and means that the text is "important".

results matching ""

    No results matching ""