Web Basics
Requirements
For starters, all you need is a text editor and browser!
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
Web Basics
{"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}]"}