TSG 初心者分科会 Web編 #1

1. hideo54
TSG web
#sig-beginners for web
#1

2. • hideo54
• B2
• Web
• ( !)
•

3. •
•
• Zoom ( )
• ( & )
•
•
• TSGer YouTube upload
• public

4. Agenda
• ( )
• Path ( ) (←NEW!)
• Website
•
• ( )
• HTML, CSS, JavaScript

5. • : TCP/UDP, TLS (https)
• : IP address, DNS, HTTP
• : Developer Tools > Network
• ?: Wireshark, Burp Suite

6. Path
• Absolute path ( )

7. Path
• Relative path ( )

8. HTML
• HyperText Markup Language
• XML markup
•
• HTML (MDN)

9. body tag
• h1, h2, h3, h4, … (header)
• p (paragraph)
• a (anchor)
• img (image)
• ul (Unordered List)
• li (List Item)
• div (division), span
• form, input, button, select, …

10. class,id
<h2 class=“red”>Important: read carefully!</h2>
<p>
This paragraph is for educational use. Understand that
<span class=“red” id=“fact”>
hideo54 is a fox.
</span>
</p>

11. CSS
• Cascading Style Sheets
• HTML style ( )
• CSS Selector
• CSS JS DOM
• HTML :
• CSS :
<style>
.red {
color: red;
}
span#fact {
font-size: 1.2em;
}
</style>
<link href=“/style.css” rel=“stylesheet” />

12. JavaScript
• HTML, CSS
( ) website
• Website
• …
• ECMAScript modern browser

13. : website
• download
• https://github.com/hideo54/sig-beginners-web
• ! ( )
:
•
• TSG
•

14. websites
• MDN Web Docs (Mozilla Developer Network)
• Wikipedia wiki
wiki
•
•
• Can I use…
•

15. • JavaScript webpack, pollyfill
• AltJS (Alt = Alternative)
• TypeScript ( ), CoffeeScript ( ), …
• Template Engine
• Pug, EJS, …
• CSS
• Sass, Stylus, styled-components, …

16. • Frontend framework
• React ( ), Vue.js ( ), Angular, jQuery, …
• Non-responsive design
• responsive design
• Web server
• nginx, Apache ( ), …
• 3 web ( )
• nginx, TLS 1ch

17. Planned agenda for the next time
• git, GitHub
• GitHub account
• repository clone, add, commit, push
• hideo54 repository fork hideo54 Pull Request
• website GitHub Pages hosting
internet !
• domain ( )