(Frontend_1) Basic Explanation

HTML, CSS, The Concept of Area Size in Layout

HTML

Introduction

Markups (How & What)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>主標題</h1>
<h2>副標題</h2>
<h3>小標題</h3>
<p>內文內文內文<strong>粗體內文</strong><em>斜體內文</em>內文內文內文內文內文內文內文內文內文內文內文</p>
<ul>
<li>無序清單</li>
<li>無序清單</li>
<li>無序清單</li>
<li>無序清單</li>
<li>無序清單</li>
</ul>
<ol>
<li>有序清單</li>
<li>有序清單</li>
<li>有序清單</li>
<li>有序清單</li>
<li>有序清單</li>
</ol>
<nav>這是導覽列</nav>
<a href="https://www.google.com.tw/">這是超連結</a>
<figure>
<img src="./example.png" alt="要是圖片失效會出現的一段文字">
<figcaption>這是這個圖片的註解</figcaption>
</figure>
<table border="2"> <!-- border 代表邊框的寬度 -->
<!-- table 會先從橫列開始寫,在開始寫直欄 -->
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
</body>
</html>

CSS

Introduction

How CSS works & What’s the effect of CSS

<p style="color:green;">  </p>
<style>
p {
color: green;
}
</style>
selector {
property: value;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
p {
color: green;
}
</style>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi molestiae laborum delectus, quis temporibus necessitatibus? Ullam optio, adipisci fugit nostrum eligendi. Ullam numquam officia, optio ut illum ex aliquam assumenda?</p>
</body>
</html>

The Concept of Area Size in Layout

The concept of visible size

...
<style>

div{
background-color: #aaa;
width: 300px;
}</style>
...
<div>情節網路制度首頁辛苦歡迎您還沒,豪華投訴才會兩個台北新聞高級足球實施業績成就為你老婆好像,轉帖先進。</div>

The concept of border

...
<style>

div{
background-color: #aaa;
width: 300px;
border: 10px solid #666;
}</style>
...
<div>情節網路制度首頁辛苦歡迎您還沒,豪華投訴才會兩個台北新聞高級足球實施業績成就為你老婆好像,轉帖先進。</div>

The concept of padding

...
<style>

div{
background-color: #aaa;
width: 300px;
border: 10px solid #666;
padding: 10px;
}</style>
...
<div>情節網路制度首頁辛苦歡迎您還沒,豪華投訴才會兩個台北新聞高級足球實施業績成就為你老婆好像,轉帖先進。</div>

Key Take Away

Reference