Web 01

林聿儒 Samantha
2010 - 2014
2015 - now
2016
2014 - 2015 RD
2015 - 2016
2014 - 2017

靜態網頁動態網頁
...
...

Firefox,
Chrome, Safari… Notepad
Sublime…
HTML,CSS,JavaScript

https://packagecontrol.io/installation
Sublime —Emmet
1. package control
2. package control Emmet

骨架肉
魔王般的存在，可以任意調動html與css，
能用html/css解決的就不要js

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href=“css 案位置名稱”>
</head>
<body>
</body>
</html>
HTML
宣告文件是HTML
html開始
html結束
一種基本設定…
也是基本設定…
會出現在瀏覽器分頁上面的字
連結到css 案
不會出現在網頁上，但網頁的基本設定都在這裡
會出現在網頁上的東西都在這裡面

HTML
<img src="圖片的網址或是本地位置" alt="" width="200px" height="auto">
<h1></h1>
<h2></h2>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
最大的標題
第二大的標題，h3就是第三大, h4就是第四大...以此類推
Order List 有順序的單, 單前面會出現1,2,3,4...
單內容

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.
Pellentesque pulvinar tempus diam, vitae scelerisque urna ornare ut.
Vivamus quis ex varius risus <span>tristique</span> pulvinar. Fusce nec
enim odio. Sed eget sem at erat feugiat malesuada.
</p>
<a href="網址或是別的html 案位置" target=“_blank"> </a>
Unordered List 沒有順序的單，單前面只會出現點點，而不是數字
單內容
Paragraph 段落，用來寫文字段落
Span標籤是一種特別的存在，內容多少，就有多大，不會滿網頁整個寬度
超連結！
在新標籤開頁面

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
table 表格
table row 表格的一列
table head 表頭，通常第一列是表格的標題
table detail 表格的一欄
table 表格結束，這是一個3x3的表格

<div>
</div>
Division 是最常用的標籤，一個群組的念，排版用
裡面要放什都可以，文字、圖片或是更多div

由左而右，又上而下
除了Span之外的元素，寬度都是滿版

<body>
<header>
<nav></nav>
</header>
<section></section>
<footer></footer>
</body>
HTML5

HTML Style
<h1 style=“font-size: 48px; font-weight: bolder; color: blue;”> </h1>
<h2 style=“font-size: 24px; font-weight: bolder; text-decoration: underline;”>
</h2>
<p style=“font-size: 14px;”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</h2>
</p>

<h1 style=“font-size: 48px; font-weight: bolder; color: blue;”> </h1>
</h2>
</p>
</h2>
</p>
要不停地重複寫style, HTML變得又臭又長...

將HTML與CSS分開成兩個案

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href=“css 案位置名稱”>
</head>
<body>
</body>
</html>
在head標籤裡面加上link
一條，連結至css

<body>
<audio src=""></audio>

<header>
<nav></nav>
</header>
<section>
<div class="title"></div>
<div class="title special"></div>
</section>
<footer></footer>
</body>
</html>
給標籤一個class
一樣的class 可以用在多個標籤上，
也可以一個標籤給多個class

*{
font-size: 14px;
color: black;
background-color: grey;
}
header{
width: 100%;
background-color: white;
height: 50px;
}
.title{
font-size: 48px;
color: white;
}
.special{
color: blue;
text-decoration: underline;
}
在CSS 案裡面
輸入標籤、class、id等的style
css的形式 —
標籤 (例如:header, nav…)
或是 .class名稱
或是 #id名稱 {
style特性：style的
}
* 代表整文件
可以直接打標籤，例如：header, span, h1…
.title代表名 title的class

瀏覽器通常都會有預設的一
些style, 了避免排版不照預
期，通常會在css 裡面最前
面有一段reset, 把瀏覽器預設
的style給重設
可以直接打在最前面，也可
以使用
@import url(reset.css);

挑戰題
https://samanthalin.ddns.net/web101/practice/01/
提示：
• html <br>
• css text-align: center;
• px

Web 01

Recommended

Recommended

More Related Content

Similar to Web 01

Similar to Web 01 (20)

Web 01