# Web Basics
---
## Requirements
For starters, all you need is a <font color="red">text editor</font> and <font color="red">browser</font>!
----
### Text-editing Tools
- vscode (推薦)
- vim (for強者)
- sublime
- ...
----
### Browser
偶爾會有相容性的問題，不要只有一個瀏覽器
- Chrome
- Firefox
- Safari
- ...
---
## Prepare
創資料夾跟檔案，結構如下：
```
myFirstWeb
├── images/ # For placing *.jpg
├── styles/ # For placing *.css
├── scripts/ # For placing *.js
└── index.html
```
----
在index.html中貼入以下code:
```
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
---
## How Web flow works
----
### IP Address
- Each device connected to Internet will have an IP address
- Identify who you are
- IPv4 (32 bit), IPv6 (128 bit)
- Ex. `140.112.24.249`(IPv4), `2001:0db8:86a3:08d3:1319:8a2e:0370:7344` (IPv6)
----
### DNS Server
- Domain name system
- Map domain name to IP Address
- Domain name registration:
- Google Domains
- GoDaddy
- Omnis (ntuee.org)
- ...
----
### Server
- Static IP Address
- Where you serve your web
- Response Html, CSS, JS, Files ... to your browser
---
## Frontend / Backend
----
### Frontend
- What you can see on browser
- Html, CSS, JS
- Frontend Framework
- React
- Angular
- Vue
----
### Backend
- Running on server
- Serving your web
- Ex. JS, Ruby, PHP, JAVA, .NET, C ...
----
### Database
- Storing your data
- Ex. MySQL, MongoDB, PostgreSQL
---
# HTML
HTML is a *markup language* that defines the structure of your content. HTML consists of a series of elements, which you can make it appear a certain way, or act a certain way.
---
## Anatomy of an HTML element
---
## Anatomy of an HTML document
----
### Take a look at your `index.html`
- `<html>` — the root element
- `<head>` — a container for things like keywords and a page description that you want to appear in search results
- `<title>` — sets the title that appears on the browser tab
- `<body>` — contains all the content you want to show
---
## Commonly Used Tags
---
### Text
#### Heading
----
#### Paragraph
```
<p>This is a single paragraph</p>
```
----
#### Lists
```
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
```
---
### Image
```
<img src="images/cat.png" alt="A cute cat." />
```
- src: source of the picture
- alt: alternative description if image cannot load
---
## Link
```
<a href="https://ntuee.org/">NTUEE</a>
```
- href: hypertext reference
---
## Practice!!
Try to use what you've learned from above and build a web page about yourself. It should contain
- a title for your web page
- some photos of you
- a list of your hobbies
- a link to your FB page
{"metaMigratedAt":"2023-06-15T12:42:29.733Z","metaMigratedFrom":"YAML","title":"Web Basics","breaks":true,"slideOptions":"{\"theme\":\"night\",\"transition\":\"slide\"}","description":"For starters, all you need is a <font color=\"red\">text editor</font> and <font color=\"red\">browser</font>!","contributors":"[{\"id\":\"6481d9e0-6e73-40e2-a4a1-176b5f31f0bf\",\"add\":50,\"del\":160},{\"id\":\"3283cada-956a-4fe4-adfc-dbde9b910191\",\"add\":3028,\"del\":1496},{\"id\":\"7092aa1b-8b34-4092-b91b-a2aa74b2e662\",\"add\":3189,\"del\":1477},{\"id\":\"a4f7cec5-0d48-4d7e-bc83-4dfab3030445\",\"add\":30,\"del\":0}]"}