HTML + CSS(1)
Let's have a glance!
Presentor: Flower, Yo-Yo
Date: 2016/11/17
Link: https://goo.gl/pu8V81
What are they?
● A skeleton of webpages.
● Basically a markup and a style language,
not really a program language.
● A super easy thing.
HTML(1)
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Text encoding -->
<meta charset="UTF-8">
<!-- Website title -->
<title>Some title</title>
</head>
<body>
<!-- Visible Content -->
</body>
</html>HTML document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
HTML(2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Homepage</title>
</head>
<body>
<div>
<h1>HTML is a markup language</h1>
<h3>And CSS decorates it!</h3>
<p>Shall we go?<span> No!</span></p>
<a href="http://nchuit.cc/" target="_blank">Our official Website</a>
</div>
</body>
</html>An HTML element usually consists of a start tag and end tag, with the content inserted in between.
HTML(3)
However, some tags are self-closing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pusheen</title>
</head>
<body>
<input type="text"> <!-- recommend this -->
<input type="text" /> <!-- both are accepted -->
<img src="https://goo.gl/lr477z" alt="image not found">
<br>
<hr>
</body>
</html>BASIC(1)
Headers
<h1>PPAP</h1>
<h2>PPAP</h2>
<h3>PPAP</h3>
<h4>PPAP</h4>
<h5>PPAP</h5>
<h6>PPAP</h6><p>I have a pen</p>
<p>I have an apple</p>
<p>Unh, apple-pen</p>Paragraph
<p><span style="color: red">Pine</span>apple</p>
Span
Pineapple
PPAP
PPAP
PPAP
PPAP
PPAP
PPAP
I have a pen
I have an apple
Unh, apple-pen
CSS
BASIC(2)
Anchor
<a href="https://www.google.com">let's google</a>
<a href="https://www.google.com" target="_self">let's google</a>
<a href="https://www.google.com" target="_blank">let's google(new window)</a>
<a href="#someParagraph">go to X paragraph</a><img src="https://goo.gl/6nEBX8">Image
BASIC(3)
Container
<div>
<h1>It's Thursday</h1>
<p>I'm thirsty</p>
<p>I want to <a href="">play a game</a>
</div>BASIC(4)
Ordered list
<ol>
<li>87</li>
<li>65</li>
<li>33</li>
<li>10</li>
</ol><ul>
<li>LadyGaga</li>
<li>Jessie J</li>
<li>Ariana Grande</li>
<li>The Weeknd</li>
</ul>Unordered list
- 87
- 65
- 33
- 10
- LadyGaga
- Jessie J
- Ariana Grande
- The Weeknd
BASIC(5)
Table
<table>
<thead>
<tr>
<th>姓名</th>
<th>Pusheen</th>
</tr>
</thead>
<tbody>
<tr>
<td>物種</td>
<td>花貓</td>
</tr>
<tr>
<td>性別</td>
<td>母的</td>
</tr>
<tr>
<td>興趣</td>
<td>吃</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">窩揪4iPusheen</td>
</tr>
</tfoot>
</table>| 姓名 | Pusheen |
|---|---|
| 物種 | 花貓 |
| 性別 | 母的 |
| 興趣 | 吃 |
| 窩揪4iPusheen | |
Text Control
Small
<p>ABCD<small>E</small>FG</p><p>Someone <strong>cheats</strong></p>Strong
<p>Bellybutton is also called <em>umbilicus</em>.</p>
em
Bellybutton is also called umbilicus.
ABCDEFG
Someone cheats
<p><ins>I am the bone of my sword</ins></p>ins
I am the bone of my sword
<p>Party Rock for <del>yee</del></p>del
Party Rock for yee
<p>This is a <mark>banana</mark></p>mark
This is a banana
Text Control
br
<p>I walk down the <br>street</p><p>Today</p><hr><p>Tomorrow</p>hr
I walk down the
street
Today
Tomorrow
Let's practice
Use what you've just learned
But where?
Online Editor
Codepen: https://codepen.io/
jsfiddle: https://jsfiddle.net/
JS bin: https://jsbin.com
code cademy: https://www.codecademy.com/
freecode camp: https://www.freecodecamp.com/
Sublime Text Editor
There are lots of powerful plugins.
Powerful hotkey
Easy to use
Sublime Text Editor
Sublime Text 3 新手上路：必要的安裝、設定與基本使用教學
HOTKEY
| Ctrl + ` | Open the console |
|---|---|
| Ctrl + Shift + P | Open the package manager |
| Ctrl + S | Save file |
| In package manager | |
| sshtml | Set Syntax to html |
| pi | Install packages |
Online Demo
A template of name card: