HTML 不是程式語言！
What is HTML?
- Hyper Text Markup Language（超文字標記語言）
- NOT a programming language（程式語言要有邏輯性）
- Markup Language for creating webpages/documents
- Building blocks of the Web
Creating an HTML file
- Dose NOT need a server
- Files must end with the .html extension
- index.html is the root/home page of a website
- http://www.something.com → Load the index.html file
- http://www.something.com/about.html → Load the about.html file
Tag Syntax
- Elements name surrounded by angle brackets (尖括號)
- Normally come in pairs (start tag and end tag)
- End tag is usually the same but with a forward slash
- Some tags close themselves
<br> (line break tag)
HTML Page Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My First Paragraph.</p>
</body>
</html>
- An HTML element is defined by a start tag, some content, and an end tag.
- Use lowercase tag names
- Double quotes around attribute values are the most common in HTML, but single quotes can also be used.
Inline vs. Block Level Elements
Inline Elements:
- Do not start on a new line
- Take only the necessary width
<span>, <img>, <a>
Block Elements:
- Start on a new line
- Take full width available
<div>, <h1>-<h6>, <p>, <form>
Tag Attributes
- All tags can have attributes
- Provide information about an element
- Placed within the start tag
- Key/value pairs (id=“someId”)
<tagname attributename="attributevalue">content</tagname>
HTML5 Semantic Tags
A semantic element clearly describes its meaning to both the browser and the developer.