owned this note   changed 7 months ago  
Published Linked with GitHub

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
        <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
Select a repo