DAY3-HTML一定要配CSS

前言：

就像吃药一定要配温开水一样，html一定要配CSS！

(贴心提醒：有些药如果配温开水其实是会造成反效果的！可以点进下方报导看一下~ https://today.line.me/tw/v2/article/0P38pD，来学程序还被你学到生活知识，真是赚翻了。)

那先欢迎各位来到第三天，今天我打算从html和css这两个网页开发基本工具开始介绍，并带大家做一个个人简单的小网页。

教学资源：

这里我首推Coursera上密西根大学开的Web Applications for Everybody:

https://www.coursera.org/specializations/web-applications

Dr. Chuck把这些东西都教的很简单，而且教授本人也满幽默的，整个课程分为四个部分，但其实每个部分内容都不长，如果跟我一样拚的话应该是可以在coursera七天免费试用期里看完的，同时还有作业区可以练习，最後还有结业证书可以拿，唯一缺点应该是有些课没有中文字幕，但教授讲的真的很慢，也没有什麽高深的单字，我相信学习上不会有太大困难。

我都念HTML：

所谓HTML就是超文本标记语言(Hyper Text Markup Language)，可以想像成是专门写给浏览器看的语言，而浏览器在解读这些档案时，就是透过一个一个被Tag(</>)框起来的内容来转换成我们现在看到的网页。所以我们接下来要做的事就是知道这些Tag的用法以及什麽时候用该用哪一个Tag，那就让我们开始吧！

要开始练习首先需要先打开我们昨天介绍到的xampp安装的资料夹，在打开安装的资料夹後，找出htdocs这个资料夹，在里面随便新增一个新的资料夹，我这里是取叫30days，之後在这个资料夹中新增一个笔记本档案，改名为index.html就大功告成啦！

这里如果你是使用sublime的话，先以sublime打开，从view→syntax中选取html，之後在空白的第一行打html再按tab，这时候应该就会出现基本的html框架了，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>

</body>
</html>

那我们今天的目标是先做出一个个人页面，通常我们会把内容家在这个标签里，所以我先把上面的html扩充成：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人网页</title>
</head>
<body>
		<div class="wrapper">
    <div class="left">
        <img src="./pic/cat.jpg" 
        alt="user" width="100">
        <h4>Sen Chao</h4>
    </div>
    <div class="right">

        <div class="intro">
            <h3>个人简介</h3>
            <ul>
        <li>
						<p>我是阿森，目前就读台湾大学工程科学与海洋工程学系大三。<br/>
						听到这里，你可能会好奇，工程科学乾写网页什麽事？嗯......的确是完全没有关联！
						<strike>那我们30天就到此结束~谢谢各位~~</strike><br/>
            没有啦！正因为我也不是本科出身的，我相信我可以透过更大众的说法来和各位分享我的所学，
						也希望大家可以真正学到一些技能，</br>
						并在这30天後有能创作出自己网页的能力！
						</p>
				</li>

        </ul>
      </div>

        <div class="info">
            <h3>个人资讯</h3>
            <div class="info_data">
                 <div class="data">
                    <h4>Email</h4>
                    <p>[email protected]</p>
                 </div>
                 <div class="data">
                   <h4>手机</h4>
                    <p>09--------</p>
                </div>
                <div class="data">
                   <h4>github</h4>
                    <p>Cooksuhr</p>
                </div>
            </div>
        </div>

      
        <div class="social_media">
            <h3>社交媒体</h3>
            <ul>
              <li><a href="#">Facebook</a></li>

              <li><a href="#">Instgram</a></li>

              <li><a href="#">My Blog</a></li>
          </ul>
      </div>
    </div>
</div>
</body>
</html>

那这里阿森大致说明一下上面用到的tag吧！

：全名为anchor tag，是用来放一些超连结的tag，在开发的时候可以先用 href="#" 来带过，等开发近尾声时再嵌入真正的网址。

接下来需要打开昨天安装好的xampp control panel，我通常是用左下角的搜寻直接打开。接着把Apache和mysql旁边的start按下去！应该会长这样：

再来只需要打开随便一个浏览器，在网址的部分输入 http://localhost/你htdocs里面的资料夹名/他就会自动导到你刚刚写好的index.html了！

现在网页应该还只长这样：

有没有发现多了一只可爱的猫咪，那是透过这个标签引入的，这也是HTML引入图片的方法，其语法为这样：

<img src="./pic/cat.jpg" 
        alt="user" width="100">

其中

./

代表现在这个html档案所在的资料夹，pic代表这个资料夹中还有一个pic资料夹

pic/cat.jpg

就是这个pic资料夹中的cat.jpg档的意思。

那html的部分就到此完成罗。

小结：

结束今天的进度後，大家应该都有写出基本的自我介绍网站的能力了吧！但各位应该也有发现这个网页不前还有很多不完善的地方，这些地方会用到接下来要介绍的几个工具，像是php, css等。

明天我们就从最主要的外观下手吧！也就是今天标题提到的CSS，那今天就到这，明天见！

<<: 01 | 为什麽需要推广 WordPress 区块编辑器的延伸应用？

>>: 资料流程图 Data Flow Diagram

DAY3-HTML一定要配CSS

前言：

我都念HTML：

小结：

G Suite 教育版更名为 Google Workspace for Education，并取消无限制储存空间限制至 100 TB

[Day 25] 专案执行(上)

[Day 20] Reactive Programming - Spring WebFlux

Day 16 - 卷积神经网络 CNN (1)-壹页AI战国史

Day5｜【Git】动手建立、初始储存库（Repository）！

[区块链&DAPP介绍 Day6] Solidity 教学 - reference types

Day 11. 来学习如何切换场景！2

Day 10 Git

软件保证成熟度模型（SAMM）-安全冠军(Security Champion)

[职涯]工程师选择公司要考虑哪些细节？常见迷思分享