#2 HTML x Lovely Auntie

2021 iThome 鐵人賽

DAY 2

Modern Web

Learn & Play JavaScript -- Entry-Level Front-End Web Development系列第 2 篇

13th鐵人賽 front-end html

Vida Lin

2021-09-02 18:22:30

1008 瀏覽

分享至

What is HTML?

English: Wiki - HTML
Mandarin: HTML 基礎 - 學習該如何開發 Web

HTML Markup Language Elements

opening/closing tags: e.g. <head> </head>
content: e.g. Lovely Auntie XD
attribute
- <img src="file name.file type"> → an “empty element” contains no context
- Inserting a hyperlink <li><a href="URL">context</a></li> → a “nesting element” with multiple tags

Commonly used

Set font size <h3>context</h3> → from h1~h6
Insert a hyperlink <li><a href="URL">context</a></li> → href =hypertext reference
Insert a picture <img src="file name.file type"/> → src = source. If it’s an “empty element,” you can also skip the latter tag.
Item List <li>
Designing a table

<tr>
    <td>context</td> => a column
    <td>context</td>
</tr>

Adjust the border/width/height of a table <table border="1" width="600" cellpadding="5">

Notice

Store the picture at the same place as your html file, and insert the name of the picture into your code.
If you want to edit in Chinese, you’ll have to set “Encoding” as “UTF-8,” and add as below blue mark to avoid garbled context.

Final Design

*Resource: https://icdaniels.wordpress.com/tag/understanding-html-attribute/

Music of Today: laugh now cry later covered/same drugs by Joseph Solomon

Like/Share/Follow

If you guys find this article helpful, please kindly do the writer a favor — LIKE this article.
Feel free to comment and share your ideas below to learn together!