The Week2 Recap Note for ITC6355

week2_recap.md

Part 1: HTML Tags

1. Heading: h1 ~ h6

• https://www.w3schools.com/html/html_headings.asp

2. Paragraph: p

• https://www.w3schools.com/html/html_paragraphs.asp

3. Blocks: div, span

• https://www.w3schools.com/html/html_blocks.asp

4. Break Line: br

• https://www.w3schools.com/tags/tag_br.asp

5. Table: table, tr, th, td

• https://www.w3schools.com/html/html_tables.asp

6. List: ul, ol, li

• https://www.w3schools.com/html/html_lists.asp

7. Link: a

• https://www.w3schools.com/html/html_links.asp

8. Media: img, video, audio,

• https://www.w3schools.com/html/html_images.asp
• https://www.w3schools.com/html/html5_video.asp
• https://www.w3schools.com/html/html5_audio.asp
• https://www.w3schools.com/html/html_youtube.asp

9. Form: form, input, select, options

• https://www.w3schools.com/html/html_forms.asp

10. Comment: <!-- -->

• https://www.w3schools.com/html/html_comments.asp

Part 2: UNIX Command

1. ls

$ ls          # list directory contents
$ ls -l       # list directory contents with detail information, including the time
$ ls -a       # list 'ALL' directory contents, includeing 'hidden' content
              # The UNIX hidden file name is begin with a dot (.)
$ ls -al      # Equal to "ls -a" + "ls -l"

2. cd

$ cd web_project/  # goto "web_project/" directory
$ cd ..            # goto parent directory. Double dots (..) means the parent directory, which is the upper folder
$ cd .             # goto current directory. Single dot (.) means the current directory
$ cd ~             # goto "HOME" directory. Tilde (~) means the HOME directory, which is the default directory when you open a terminal

3. touch

$ touch index.html              # create file "index.html"

4. mkdir

$ mkdir web_project             # create a folder called "web_project" under current directory

5. mv

$ mv index.html web_project     # move file "index.html" into folder "web_project"
$ mv index.html ..              # move file "index.html" to parent folder
$ mv index.html default.html    # rename file "index.html" to "default.html"

6. rm

$ rm index.html                 # remove file "index.html"
$ rm -p web_project             # remove folder "web_project"

Part 3: Create Public Web Server on Vocareum

Demo Video: https://youtu.be/pYXKbCeP2LE (it's no sound)

1. Create index.html and package.json in the same folder

Please copy the content below and paste into package.json:

{
  "scripts": {
    "start":" http-server . -p $(voc_get_proxied_server_port)"
  },
  "devDependencies": {
    "http-server": "^0.11.1"
  }
}

2. Install the dependency packages via NPM (Node Package Manager)

$ npm install

• According to the configuration file package.json, NPM will automatically generate a folder node_modules/ and put the packages in it
• You don't have to modify the contents in node_modules/
• If you want to re-install the dependency packages, please remove the folder node_modules/ and execute this command again

3. Launch a web server

$ npm start

• You cannot run other commands after launching the web server
• You can press Ctrl + C to stop the server

4. View the public website

• open "https://myserver.vocareum.com" in a new browser window to view your public website.
• The IP address you see in the terminal are the internal IP on Vocareum, so you cannot access those IP directly.
• According to your login account, Vocareum will redirect this page to another URL which is the true address of your public website.