From 7925170926b2aabb73625786206fa90d9656f8c9 Mon Sep 17 00:00:00 2001 From: InKolev Date: Thu, 19 May 2016 11:43:28 +0300 Subject: [PATCH] Changed folder structure --- Topics/01. Web-Basics/README.md | 360 +++++++++++- .../{slides => }/imgs/3-tier.png | Bin .../{slides => }/imgs/client-server.png | Bin .../{slides => }/imgs/middle-tier.png | Bin .../{slides => }/imgs/pic00.png | Bin .../{slides => }/imgs/pic01.png | Bin .../{slides => }/imgs/pic02.png | Bin .../{slides => }/imgs/pic03.png | Bin .../{slides => }/imgs/pic04.png | Bin .../{slides => }/imgs/pic05.png | Bin .../{slides => }/imgs/pic06.png | Bin .../{slides => }/imgs/pic07.png | Bin .../{slides => }/imgs/pic08.png | Bin .../{slides => }/imgs/pic09.png | Bin .../{slides => }/imgs/pic10.png | Bin .../{slides => }/imgs/pic11.png | Bin .../{slides => }/imgs/pic12.png | Bin .../{slides => }/imgs/pic13.png | Bin .../{slides => }/imgs/pic14.png | Bin .../{slides => }/imgs/pic15.png | Bin .../{slides => }/imgs/pic16.png | Bin .../{slides => }/imgs/pic17.png | Bin .../{slides => }/imgs/pic18.png | Bin .../{slides => }/imgs/pic19.png | Bin .../{slides => }/imgs/pic20.png | Bin .../{slides => }/imgs/pic21.png | Bin .../{slides => }/imgs/pic22.png | Bin .../{slides => }/imgs/pic23.png | Bin .../{slides => }/imgs/pic24.png | Bin .../{slides => }/imgs/pic25.png | Bin .../{slides => }/imgs/pic26.png | Bin .../{slides => }/imgs/pic27.png | Bin .../{slides => }/imgs/pic28.png | Bin .../{slides => }/imgs/pic29.png | Bin .../{slides => }/imgs/pic30.png | Bin .../{slides => }/imgs/pic31.png | Bin .../{slides => }/imgs/pic32.png | Bin .../{slides => }/imgs/pic33.png | Bin .../{slides => }/imgs/pic34.png | Bin .../{slides => }/imgs/pic35.png | Bin .../{slides => }/imgs/pic36.png | Bin .../{slides => }/imgs/pic37.png | Bin .../{slides => }/imgs/pic38.png | Bin .../{slides => }/imgs/pic39.png | Bin .../{slides => }/imgs/pic40.png | Bin .../{slides => }/imgs/pic41.png | Bin .../{slides => }/imgs/pic42.png | Bin .../{slides => }/imgs/pic43.png | Bin .../{slides => }/imgs/pic44.png | Bin .../{slides => }/imgs/pic45.png | Bin .../{slides => }/imgs/pic46.png | Bin .../{slides => }/imgs/pic47.png | Bin .../{slides => }/imgs/pic48.png | Bin .../{slides => }/imgs/pic49.png | Bin .../{slides => }/imgs/pic50.png | Bin .../{slides => }/imgs/pic51.png | Bin .../{slides => }/imgs/pic52.png | Bin Topics/01. Web-Basics/slides/README.md | 351 ------------ Topics/01. Web-Basics/slides/index.html | 56 -- Topics/01. Web-Basics/slides/open.js | 1 - Topics/01. Web-Basics/slides/package.json | 30 - Topics/02. HTML-Fundamentals/README.md | 521 +++++++++++++++++- .../{slides => }/imgs/bullets-ul.png | Bin .../{slides => }/imgs/bullets.png | Bin .../{slides => }/imgs/cat-questions.png | Bin .../{slides => }/imgs/pic00.png | Bin .../{slides => }/imgs/pic01.png | Bin .../{slides => }/imgs/pic02.png | Bin .../{slides => }/imgs/pic03.png | Bin .../{slides => }/imgs/pic04.png | Bin .../{slides => }/imgs/pic05.png | Bin .../{slides => }/imgs/pic06.png | Bin .../{slides => }/imgs/pic07.png | Bin .../{slides => }/imgs/pic08.png | Bin .../{slides => }/imgs/pic09.png | Bin .../{slides => }/imgs/pic10.png | Bin .../{slides => }/imgs/pic11.png | Bin .../{slides => }/imgs/pic12.png | Bin .../{slides => }/imgs/pic13.png | Bin .../{slides => }/imgs/pic14.png | Bin .../{slides => }/imgs/pic15.png | Bin .../{slides => }/imgs/pic16.png | Bin .../{slides => }/imgs/pic17.png | Bin .../{slides => }/imgs/pic18.png | Bin .../{slides => }/imgs/pic19.png | Bin .../{slides => }/imgs/pic21.png | Bin .../{slides => }/imgs/pic22.png | Bin .../{slides => }/imgs/pic23.png | Bin .../{slides => }/imgs/pic24.png | Bin .../{slides => }/imgs/pic25.png | Bin .../{slides => }/imgs/pic26.png | Bin Topics/02. HTML-Fundamentals/slides/README.md | 515 ----------------- .../02. HTML-Fundamentals/slides/index.html | 56 -- Topics/02. HTML-Fundamentals/slides/open.js | 1 - .../02. HTML-Fundamentals/slides/package.json | 30 - Topics/03. HTML-Tables/README.md | 375 ++++++++++++- .../imgs/cell-spacing-padding.png | Bin .../{slides => }/imgs/pic00.png | Bin .../{slides => }/imgs/pic01.png | Bin .../{slides => }/imgs/pic02.png | Bin .../{slides => }/imgs/pic03.png | Bin .../{slides => }/imgs/pic04.png | Bin .../{slides => }/imgs/pic05.png | Bin .../{slides => }/imgs/pic06.png | Bin .../{slides => }/imgs/pic07.png | Bin .../{slides => }/imgs/pic08.png | Bin .../{slides => }/imgs/pic09.png | Bin .../{slides => }/imgs/pic10.png | Bin .../{slides => }/imgs/pic11.png | Bin .../{slides => }/imgs/pic12.png | Bin .../{slides => }/imgs/pic13.png | Bin .../{slides => }/imgs/pic14.png | Bin .../{slides => }/imgs/pic15.png | Bin .../{slides => }/imgs/pic18.png | Bin .../{slides => }/imgs/pic19.png | Bin .../{slides => }/imgs/pic20.png | Bin .../{slides => }/imgs/pic21.png | Bin .../{slides => }/imgs/pic22.png | Bin .../{slides => }/imgs/pic23.png | Bin .../{slides => }/imgs/pic24.png | Bin .../{slides => }/imgs/pic25.png | Bin .../{slides => }/imgs/pic26.png | Bin .../{slides => }/imgs/pic27.png | Bin .../{slides => }/imgs/pic28.png | Bin .../{slides => }/imgs/pic29.png | Bin .../{slides => }/imgs/pic30.png | Bin .../{slides => }/imgs/pic31.png | Bin .../{slides => }/imgs/pic32.png | Bin .../{slides => }/imgs/pic33.png | Bin .../{slides => }/imgs/pic34.png | Bin .../{slides => }/imgs/pic35.png | Bin .../{slides => }/imgs/pic36.png | Bin .../imgs/rowspan-colspan-example.png | Bin .../{slides => }/imgs/rowspan-colspan.png | Bin Topics/03. HTML-Tables/slides/README.md | 365 ------------ Topics/03. HTML-Tables/slides/index.html | 67 --- Topics/03. HTML-Tables/slides/open.js | 1 - Topics/03. HTML-Tables/slides/package.json | 30 - Topics/04. HTML-Forms-and-Frames/README.md | 412 +++++++++++++- .../{slides => }/imgs/pic00.png | Bin .../{slides => }/imgs/pic01.png | Bin .../{slides => }/imgs/pic02.png | Bin .../{slides => }/imgs/pic03.png | Bin .../{slides => }/imgs/pic05.png | Bin .../{slides => }/imgs/pic06.png | Bin .../{slides => }/imgs/pic07.png | Bin .../{slides => }/imgs/pic08.png | Bin .../{slides => }/imgs/pic09.png | Bin .../{slides => }/imgs/pic10.png | Bin .../{slides => }/imgs/pic11.png | Bin .../{slides => }/imgs/pic12.png | Bin .../{slides => }/imgs/pic13.png | Bin .../{slides => }/imgs/pic14.png | Bin .../{slides => }/imgs/pic15.png | Bin .../{slides => }/imgs/pic16.png | Bin .../{slides => }/imgs/pic17.png | Bin .../{slides => }/imgs/pic18.png | Bin .../{slides => }/imgs/pic19.png | Bin .../{slides => }/imgs/pic20.png | Bin .../{slides => }/imgs/pic21.png | Bin .../{slides => }/imgs/pic22.png | Bin .../{slides => }/imgs/pic23.png | Bin .../{slides => }/imgs/pic24.png | Bin .../{slides => }/imgs/pic25.png | Bin .../{slides => }/imgs/pic26.png | Bin .../{slides => }/imgs/pic27.png | Bin .../{slides => }/imgs/pic28.png | Bin .../{slides => }/imgs/pic29.png | Bin .../{slides => }/imgs/pic30.png | Bin .../{slides => }/imgs/pic31.png | Bin .../{slides => }/imgs/pic32.png | Bin .../{slides => }/imgs/pic33.png | Bin .../{slides => }/imgs/pic34.png | Bin .../{slides => }/imgs/pic35.png | Bin .../slides/README.md | 402 -------------- .../slides/index.html | 56 -- .../04. HTML-Forms-and-Frames/slides/open.js | 1 - .../slides/package.json | 30 - Topics/05. Semantic-HTML/README.md | 398 ++++++++++++- .../{slides => }/imgs/pic00.png | Bin .../{slides => }/imgs/pic01.png | Bin .../{slides => }/imgs/pic02.png | Bin .../{slides => }/imgs/pic03.png | Bin .../{slides => }/imgs/pic04.png | Bin .../{slides => }/imgs/pic05.png | Bin .../{slides => }/imgs/pic06.png | Bin .../{slides => }/imgs/pic07.png | Bin .../{slides => }/imgs/pic08.png | Bin .../{slides => }/imgs/pic09.png | Bin .../{slides => }/imgs/pic10.png | Bin .../{slides => }/imgs/pic11.png | Bin .../{slides => }/imgs/pic12.png | Bin .../{slides => }/imgs/pic13.png | Bin .../{slides => }/imgs/pic14.png | Bin .../{slides => }/imgs/pic15.png | Bin .../{slides => }/imgs/pic16.png | Bin .../{slides => }/imgs/pic17.png | Bin .../{slides => }/imgs/pic18.png | Bin .../{slides => }/imgs/pic19.png | Bin .../{slides => }/imgs/pic20.png | Bin .../{slides => }/imgs/pic21.png | Bin .../{slides => }/imgs/pic22.png | Bin .../{slides => }/imgs/pic24.png | Bin .../{slides => }/imgs/pic25.png | Bin .../{slides => }/imgs/pic26.png | Bin .../{slides => }/imgs/pic27.png | Bin .../{slides => }/imgs/pic28.png | Bin .../{slides => }/imgs/pic29.png | Bin .../{slides => }/imgs/pic30.png | Bin .../{slides => }/imgs/pic31.png | Bin .../{slides => }/imgs/pic32.png | Bin Topics/05. Semantic-HTML/slides/README.md | 389 ------------- Topics/05. Semantic-HTML/slides/index.html | 56 -- Topics/05. Semantic-HTML/slides/open.js | 1 - Topics/05. Semantic-HTML/slides/package.json | 30 - 215 files changed, 1995 insertions(+), 2539 deletions(-) rename Topics/01. Web-Basics/{slides => }/imgs/3-tier.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/client-server.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/middle-tier.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic00.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic01.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic02.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic03.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic04.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic05.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic06.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic07.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic08.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic09.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic10.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic11.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic12.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic13.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic14.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic15.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic16.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic17.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic18.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic19.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic20.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic21.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic22.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic23.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic24.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic25.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic26.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic27.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic28.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic29.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic30.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic31.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic32.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic33.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic34.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic35.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic36.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic37.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic38.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic39.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic40.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic41.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic42.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic43.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic44.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic45.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic46.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic47.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic48.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic49.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic50.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic51.png (100%) rename Topics/01. Web-Basics/{slides => }/imgs/pic52.png (100%) delete mode 100644 Topics/01. Web-Basics/slides/README.md delete mode 100644 Topics/01. Web-Basics/slides/index.html delete mode 100644 Topics/01. Web-Basics/slides/open.js delete mode 100644 Topics/01. Web-Basics/slides/package.json rename Topics/02. HTML-Fundamentals/{slides => }/imgs/bullets-ul.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/bullets.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/cat-questions.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic00.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic01.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic02.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic03.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic04.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic05.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic06.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic07.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic08.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic09.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic10.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic11.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic12.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic13.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic14.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic15.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic16.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic17.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic18.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic19.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic21.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic22.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic23.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic24.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic25.png (100%) rename Topics/02. HTML-Fundamentals/{slides => }/imgs/pic26.png (100%) delete mode 100644 Topics/02. HTML-Fundamentals/slides/README.md delete mode 100644 Topics/02. HTML-Fundamentals/slides/index.html delete mode 100644 Topics/02. HTML-Fundamentals/slides/open.js delete mode 100644 Topics/02. HTML-Fundamentals/slides/package.json rename Topics/03. HTML-Tables/{slides => }/imgs/cell-spacing-padding.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic00.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic01.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic02.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic03.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic04.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic05.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic06.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic07.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic08.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic09.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic10.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic11.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic12.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic13.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic14.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic15.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic18.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic19.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic20.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic21.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic22.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic23.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic24.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic25.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic26.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic27.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic28.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic29.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic30.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic31.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic32.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic33.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic34.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic35.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/pic36.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/rowspan-colspan-example.png (100%) rename Topics/03. HTML-Tables/{slides => }/imgs/rowspan-colspan.png (100%) delete mode 100644 Topics/03. HTML-Tables/slides/README.md delete mode 100644 Topics/03. HTML-Tables/slides/index.html delete mode 100644 Topics/03. HTML-Tables/slides/open.js delete mode 100644 Topics/03. HTML-Tables/slides/package.json rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic00.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic01.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic02.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic03.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic05.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic06.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic07.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic08.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic09.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic10.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic11.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic12.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic13.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic14.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic15.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic16.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic17.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic18.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic19.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic20.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic21.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic22.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic23.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic24.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic25.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic26.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic27.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic28.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic29.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic30.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic31.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic32.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic33.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic34.png (100%) rename Topics/04. HTML-Forms-and-Frames/{slides => }/imgs/pic35.png (100%) delete mode 100644 Topics/04. HTML-Forms-and-Frames/slides/README.md delete mode 100644 Topics/04. HTML-Forms-and-Frames/slides/index.html delete mode 100644 Topics/04. HTML-Forms-and-Frames/slides/open.js delete mode 100644 Topics/04. HTML-Forms-and-Frames/slides/package.json rename Topics/05. Semantic-HTML/{slides => }/imgs/pic00.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic01.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic02.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic03.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic04.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic05.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic06.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic07.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic08.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic09.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic10.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic11.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic12.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic13.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic14.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic15.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic16.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic17.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic18.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic19.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic20.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic21.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic22.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic24.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic25.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic26.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic27.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic28.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic29.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic30.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic31.png (100%) rename Topics/05. Semantic-HTML/{slides => }/imgs/pic32.png (100%) delete mode 100644 Topics/05. Semantic-HTML/slides/README.md delete mode 100644 Topics/05. Semantic-HTML/slides/index.html delete mode 100644 Topics/05. Semantic-HTML/slides/open.js delete mode 100644 Topics/05. Semantic-HTML/slides/package.json diff --git a/Topics/01. Web-Basics/README.md b/Topics/01. Web-Basics/README.md index 6b6f517..dd46109 100644 --- a/Topics/01. Web-Basics/README.md +++ b/Topics/01. Web-Basics/README.md @@ -1,21 +1,351 @@ -## 02. Web basics + + +# Web Technologies Basics +## Concepts -Web sites, Web servers + -## Resources +
+

HTML Basics

+

Telerik Software Academy

+ https://telerikacademy.com +
-##### [Slides](https://rawgit.com/TelerikAcademy/HTML/master/Topics/01.%20Web-Basics/slides/index.html) / [ Demos](demos) / [Tasks](homework) / [ Videos](VIDEOS.md) -## Table of Contents + + +# Table of Contents +- [Web Sites and Web Applications](#/web) +- [Web Browsers](#/browsers) +- [Hardware Servers](#/hardwareserver) +- [Web Servers](#/webserver) +- [Client-Server Architecture](#/clientserver) +- [3-Tier / Multi-Tier Architectures](#/3tier) +- [Service-Oriented Architecture (SOA)](#/soa) +- [Cloud](#/cloud) -- [Web Sites and Web Applications](slides/README.md#/sites) -- [Web 1.0, 2.0, 3.0](slides/README.md#/web) -- [Web Browsers](slides/README.md#/browsers) -- [Hardware Servers](slides/README.md#/hardwareserver) -- [Web Servers](slides/README.md#/webserver) -- [Client-Server Architecture](slides/README.md#/clientserver) -- [3-Tier / Multi-Tier Architectures](slides/README.md#/3tier) -- [Service-Oriented Architecture (SOA)](slides/README.md#/soa) -- [Cloud](slides/README.md#/cloud) + -#### [ home](/README.md) + + + + + + + +# Web Page + +- Web Pages + - Are **documents** or **information resources** that are suitable for the World Wide Web + - Can be accessed through a **web browser** and displayed on a monitor or a mobile device + - This information is usually in `HTML` or `XHTML` format, and may provide navigation to other web pages via **hypertext links** + - Web pages frequently refer to other resources such as **style sheets** (`CSS`), **scripts** (`JavaScript`) and **images** into their final presentation + + + +# Web Site + +- Web Sites + - Are **collections** of related web pages containing web resources (web pages, images, videos, CSS files, JS files or other digital assets) + - Have **common navigation** between web pages + - Are **hosted** on at least one **web server** + - Are accessible via a network (such as the Internet) +- **All publicly accessible websites** collectively constitute the **World Wide Web** + + + +# Web Application + +- Web Application + - Next level web sites + - High interactivity + - High accessibility (Cloud) + - AJAX, Silverlight, Flash, Flex, etc. + - Applications are usually broken into logical chunks called "tiers", where every tier is assigned a role + - Desktop-like application in the web browser + + + + + + + + + + + + + + + + + +# Web Browsers +- A Web browser is a program designed to enable users to **access**, **retrieve** and **view** documents and other resources from the Web +- Main responsibilities: + - **Bring** information resources to the user (issuing requests to the web server and handling any results generated by the request) + - **Present** web content (render HTML, CSS, JS) + - **Capable of executing** applications within the same context as the document on view (Flash) + + + +# Layout Engines +- Layout Engines are software components that **displays the formatted content** on the screen combining: + - Marked up content (such as `HTML`, `XML`, image files, etc.) + - Formatting information (such as `CSS`, `XSL`, etc.) +- It "paints" on the content area of a window, which is displayed on a monitor or a printer +- Typically embedded in web browsers, e-mail clients, on-line help systems or other applications that require the displaying (and editing) of web content +- The layout engine is the "heart of a browser" + + +# Layout Engines and Web Browsers +- **Trident**-based + - Internet Explorer, Netscape, Maxthon, etc. +- **Gecko**-based + - Firefox, Netscape, SeaMonkey, etc. +- **Blink**-based + - Chrome, Opera +- **WebKit**-based + - Safari, iOS, Maxthon, Chrome (up to v27), etc. +- **EdgeHTML** (fork of Trident) + - Microsoft Edge + + +# User Agent Strings +- Identify web browsers and their version + - History of (in)compatibility attempts +- Can have some additional information like layout engine, user's operating system, etc... + +```javascript +Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36 +``` + + - **Mozilla/5.0** – a generic term which most modern browsers use (originally indicated Netscape) + - **Windows NT 6.3** – Windows 8.1 + - **WOW64** – Windows-On-Windows 64-bit + - **AppleWebKit/537.36** – Blink is a fork of WebKit + - KHTML is the previous name of WebKit + - **Chrome/41.0.2272.118** – real browser version + - **Safari/537.36** – artifact against scripts sniffing + + + + + + + + + +# Hardware Servers +- A hardware server is a **physical computer** dedicated to running one or more such services +- Servers are placed in colocation centers + - Colocation facilities provide space, power, cooling, and physical security for the server +- The server may be: + - Database server + - File server + - Mail server + - Print server + - VPS servers + + + + + + + + + + + + + + + + + +# What Do the Web Servers Do? +- All physical servers have hardware +- The hardware is controlled by the operating system +- **Web servers** are software products that use the operating system to **handle web requests** + - Web servers **serve Web content** +- These requests are redirected to other software products (ASP.NET, PHP, etc.), depending on the web server settings + + + +# Web Servers Market Share October 2015 +- Market share of the top million busiest sites + - **Apache** + - 47.18% (469,050) + - **nginx** + - 23.36% (236,650) + - **IIS** (by Microsoft) + - 11.64% (116,321) + - **GWS** (by Google) + - 2.25% (22,304) +- [Source](http://news.netcraft.com/archives/2015/10/16/october-2015-web-server-survey.html) + + + + + + + + + +# Client-Server Architecture +- The client-server model consists of: + - A **server** + - A single machine or cluster of machines that provides web applications (or services) to multiple clients + - _Examples_: + - Web server running PHP scripts or ASP.NET pages + - IIS-based Web server + - WCF-based service + - Services in the cloud + + + +# Client-Server Architecture +- The client-server model consists of: + - **Clients** + - Software applications that provide UI (front-end) to access the services at the server + - _Examples_: + - Web browsers + - Desktop applications + - HTML5 applications + - Silverlight applications + - ASP.NET consuming services + + + + + +# The Client-Server Model + + + + + + +# Client-Server Model: _Examples_ +- Web server (Apache, IIS) – Web browser +- FTP server (ftpd) – FTP client (FileZilla) +- EMail server (qmail) – email client (Outlook) +- SQL Server – SQL Server Management Studio +- BitTorrent Tracker – Torrent client (μTorrent) +- DNS server (bind) – DNS client (resolver) +- DHCP server (wireless router firmware) – DHCP client (mobile phone /Android DHCP client/) +- SMB server (Windows) – SMB client (Windows) + + + + + + + + + + +# The 3-Tier Architecture +- The **3-tier architecture** consists of the following tiers (layers): + - **Front-end** (client layer) + - Client software – provides the UI of the system + - **Middle tier**(business layer) + - Server software – provides the core system logic + - Implements the business processes / services + - **Back-end** (data layer) + - Manages the data of the system (database / cloud) + + + +# The 3-Tier Architecture Model + + + + + +# Typical Layers of the Middle Tier +- The middle tier usually has parts related to the front-end, business logic and back-end: + + + + + + + + + + +# What is a Service? +- In the real world a "**service**" is: + - A piece of work performed by a service provider + - Provides the client (consumer) some desired result by some input parameters + - The requirements and the result are known + - Easy to use + - Always available + - Has quality characteristics (price, execution time, constraints, etc.) + + + + + + + + + + + + + + + +# What is Cloud? +- **Cloud** ≈ multiple hardware machines combine their computing power and resources + - Share them between multiple applications + - To save costs and use resources more efficiently +- **Public clouds** + - Provide computing resources on demand + - Publicly in Internet + - Paid or free of charge (to some limit) + - Amazon AWS, Google App Engine, Microsoft Azure, Rackspace, PHPFog, Heroku, AppHarbor + + + +# Cloud Computing Models +- **Infrastructure as a Service (IaaS)** + - Virtual machines in the cloud on demand + - Users install the OS and software they need +- **Platform as a Service (PaaS)** + - Platform, services and APIs for developers + - E.g. Java + JBoss + JSF + JPA + MongoDB or JavaScript + Node.js + MongoDB + RabbitMQ +- **Software as a Service (SaaS)** + - Hosted application on demand (e.g. WordPress) + + + + +# Questions? +## Ask at [our forum](http://telerikacademy.com/Forum/Category/27/html-css) + + + +# Free Trainings @ Telerik Academy + +- **HTML Basics** course @ Telerik Academy + - [html5course.telerik.com](html5course.telerik.com) +- Telerik Software Academy + - [telerikacademy.com](https://telerikacademy.com) +- Telerik Academy @ Facebook + - [facebook.com/TelerikAcademy](facebook.com/TelerikAcademy) +- Telerik Software Academy Forums + - [telerikacademy.com](https://telerikacademy.com) + + + + diff --git a/Topics/01. Web-Basics/slides/imgs/3-tier.png b/Topics/01. Web-Basics/imgs/3-tier.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/3-tier.png rename to Topics/01. Web-Basics/imgs/3-tier.png diff --git a/Topics/01. Web-Basics/slides/imgs/client-server.png b/Topics/01. Web-Basics/imgs/client-server.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/client-server.png rename to Topics/01. Web-Basics/imgs/client-server.png diff --git a/Topics/01. Web-Basics/slides/imgs/middle-tier.png b/Topics/01. Web-Basics/imgs/middle-tier.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/middle-tier.png rename to Topics/01. Web-Basics/imgs/middle-tier.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic00.png b/Topics/01. Web-Basics/imgs/pic00.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic00.png rename to Topics/01. Web-Basics/imgs/pic00.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic01.png b/Topics/01. Web-Basics/imgs/pic01.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic01.png rename to Topics/01. Web-Basics/imgs/pic01.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic02.png b/Topics/01. Web-Basics/imgs/pic02.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic02.png rename to Topics/01. Web-Basics/imgs/pic02.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic03.png b/Topics/01. Web-Basics/imgs/pic03.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic03.png rename to Topics/01. Web-Basics/imgs/pic03.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic04.png b/Topics/01. Web-Basics/imgs/pic04.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic04.png rename to Topics/01. Web-Basics/imgs/pic04.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic05.png b/Topics/01. Web-Basics/imgs/pic05.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic05.png rename to Topics/01. Web-Basics/imgs/pic05.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic06.png b/Topics/01. Web-Basics/imgs/pic06.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic06.png rename to Topics/01. Web-Basics/imgs/pic06.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic07.png b/Topics/01. Web-Basics/imgs/pic07.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic07.png rename to Topics/01. Web-Basics/imgs/pic07.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic08.png b/Topics/01. Web-Basics/imgs/pic08.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic08.png rename to Topics/01. Web-Basics/imgs/pic08.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic09.png b/Topics/01. Web-Basics/imgs/pic09.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic09.png rename to Topics/01. Web-Basics/imgs/pic09.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic10.png b/Topics/01. Web-Basics/imgs/pic10.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic10.png rename to Topics/01. Web-Basics/imgs/pic10.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic11.png b/Topics/01. Web-Basics/imgs/pic11.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic11.png rename to Topics/01. Web-Basics/imgs/pic11.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic12.png b/Topics/01. Web-Basics/imgs/pic12.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic12.png rename to Topics/01. Web-Basics/imgs/pic12.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic13.png b/Topics/01. Web-Basics/imgs/pic13.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic13.png rename to Topics/01. Web-Basics/imgs/pic13.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic14.png b/Topics/01. Web-Basics/imgs/pic14.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic14.png rename to Topics/01. Web-Basics/imgs/pic14.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic15.png b/Topics/01. Web-Basics/imgs/pic15.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic15.png rename to Topics/01. Web-Basics/imgs/pic15.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic16.png b/Topics/01. Web-Basics/imgs/pic16.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic16.png rename to Topics/01. Web-Basics/imgs/pic16.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic17.png b/Topics/01. Web-Basics/imgs/pic17.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic17.png rename to Topics/01. Web-Basics/imgs/pic17.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic18.png b/Topics/01. Web-Basics/imgs/pic18.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic18.png rename to Topics/01. Web-Basics/imgs/pic18.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic19.png b/Topics/01. Web-Basics/imgs/pic19.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic19.png rename to Topics/01. Web-Basics/imgs/pic19.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic20.png b/Topics/01. Web-Basics/imgs/pic20.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic20.png rename to Topics/01. Web-Basics/imgs/pic20.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic21.png b/Topics/01. Web-Basics/imgs/pic21.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic21.png rename to Topics/01. Web-Basics/imgs/pic21.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic22.png b/Topics/01. Web-Basics/imgs/pic22.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic22.png rename to Topics/01. Web-Basics/imgs/pic22.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic23.png b/Topics/01. Web-Basics/imgs/pic23.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic23.png rename to Topics/01. Web-Basics/imgs/pic23.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic24.png b/Topics/01. Web-Basics/imgs/pic24.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic24.png rename to Topics/01. Web-Basics/imgs/pic24.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic25.png b/Topics/01. Web-Basics/imgs/pic25.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic25.png rename to Topics/01. Web-Basics/imgs/pic25.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic26.png b/Topics/01. Web-Basics/imgs/pic26.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic26.png rename to Topics/01. Web-Basics/imgs/pic26.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic27.png b/Topics/01. Web-Basics/imgs/pic27.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic27.png rename to Topics/01. Web-Basics/imgs/pic27.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic28.png b/Topics/01. Web-Basics/imgs/pic28.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic28.png rename to Topics/01. Web-Basics/imgs/pic28.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic29.png b/Topics/01. Web-Basics/imgs/pic29.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic29.png rename to Topics/01. Web-Basics/imgs/pic29.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic30.png b/Topics/01. Web-Basics/imgs/pic30.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic30.png rename to Topics/01. Web-Basics/imgs/pic30.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic31.png b/Topics/01. Web-Basics/imgs/pic31.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic31.png rename to Topics/01. Web-Basics/imgs/pic31.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic32.png b/Topics/01. Web-Basics/imgs/pic32.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic32.png rename to Topics/01. Web-Basics/imgs/pic32.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic33.png b/Topics/01. Web-Basics/imgs/pic33.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic33.png rename to Topics/01. Web-Basics/imgs/pic33.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic34.png b/Topics/01. Web-Basics/imgs/pic34.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic34.png rename to Topics/01. Web-Basics/imgs/pic34.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic35.png b/Topics/01. Web-Basics/imgs/pic35.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic35.png rename to Topics/01. Web-Basics/imgs/pic35.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic36.png b/Topics/01. Web-Basics/imgs/pic36.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic36.png rename to Topics/01. Web-Basics/imgs/pic36.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic37.png b/Topics/01. Web-Basics/imgs/pic37.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic37.png rename to Topics/01. Web-Basics/imgs/pic37.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic38.png b/Topics/01. Web-Basics/imgs/pic38.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic38.png rename to Topics/01. Web-Basics/imgs/pic38.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic39.png b/Topics/01. Web-Basics/imgs/pic39.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic39.png rename to Topics/01. Web-Basics/imgs/pic39.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic40.png b/Topics/01. Web-Basics/imgs/pic40.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic40.png rename to Topics/01. Web-Basics/imgs/pic40.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic41.png b/Topics/01. Web-Basics/imgs/pic41.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic41.png rename to Topics/01. Web-Basics/imgs/pic41.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic42.png b/Topics/01. Web-Basics/imgs/pic42.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic42.png rename to Topics/01. Web-Basics/imgs/pic42.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic43.png b/Topics/01. Web-Basics/imgs/pic43.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic43.png rename to Topics/01. Web-Basics/imgs/pic43.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic44.png b/Topics/01. Web-Basics/imgs/pic44.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic44.png rename to Topics/01. Web-Basics/imgs/pic44.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic45.png b/Topics/01. Web-Basics/imgs/pic45.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic45.png rename to Topics/01. Web-Basics/imgs/pic45.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic46.png b/Topics/01. Web-Basics/imgs/pic46.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic46.png rename to Topics/01. Web-Basics/imgs/pic46.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic47.png b/Topics/01. Web-Basics/imgs/pic47.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic47.png rename to Topics/01. Web-Basics/imgs/pic47.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic48.png b/Topics/01. Web-Basics/imgs/pic48.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic48.png rename to Topics/01. Web-Basics/imgs/pic48.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic49.png b/Topics/01. Web-Basics/imgs/pic49.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic49.png rename to Topics/01. Web-Basics/imgs/pic49.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic50.png b/Topics/01. Web-Basics/imgs/pic50.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic50.png rename to Topics/01. Web-Basics/imgs/pic50.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic51.png b/Topics/01. Web-Basics/imgs/pic51.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic51.png rename to Topics/01. Web-Basics/imgs/pic51.png diff --git a/Topics/01. Web-Basics/slides/imgs/pic52.png b/Topics/01. Web-Basics/imgs/pic52.png similarity index 100% rename from Topics/01. Web-Basics/slides/imgs/pic52.png rename to Topics/01. Web-Basics/imgs/pic52.png diff --git a/Topics/01. Web-Basics/slides/README.md b/Topics/01. Web-Basics/slides/README.md deleted file mode 100644 index dd46109..0000000 --- a/Topics/01. Web-Basics/slides/README.md +++ /dev/null @@ -1,351 +0,0 @@ - - -# Web Technologies Basics -## Concepts - - - -
-

HTML Basics

-

Telerik Software Academy

- https://telerikacademy.com -
- - - - -# Table of Contents -- [Web Sites and Web Applications](#/web) -- [Web Browsers](#/browsers) -- [Hardware Servers](#/hardwareserver) -- [Web Servers](#/webserver) -- [Client-Server Architecture](#/clientserver) -- [3-Tier / Multi-Tier Architectures](#/3tier) -- [Service-Oriented Architecture (SOA)](#/soa) -- [Cloud](#/cloud) - - - - - - - - - - -# Web Page - -- Web Pages - - Are **documents** or **information resources** that are suitable for the World Wide Web - - Can be accessed through a **web browser** and displayed on a monitor or a mobile device - - This information is usually in `HTML` or `XHTML` format, and may provide navigation to other web pages via **hypertext links** - - Web pages frequently refer to other resources such as **style sheets** (`CSS`), **scripts** (`JavaScript`) and **images** into their final presentation - - - -# Web Site - -- Web Sites - - Are **collections** of related web pages containing web resources (web pages, images, videos, CSS files, JS files or other digital assets) - - Have **common navigation** between web pages - - Are **hosted** on at least one **web server** - - Are accessible via a network (such as the Internet) -- **All publicly accessible websites** collectively constitute the **World Wide Web** - - - -# Web Application - -- Web Application - - Next level web sites - - High interactivity - - High accessibility (Cloud) - - AJAX, Silverlight, Flash, Flex, etc. - - Applications are usually broken into logical chunks called "tiers", where every tier is assigned a role - - Desktop-like application in the web browser - - - - - - - - - - - - - - - - - -# Web Browsers -- A Web browser is a program designed to enable users to **access**, **retrieve** and **view** documents and other resources from the Web -- Main responsibilities: - - **Bring** information resources to the user (issuing requests to the web server and handling any results generated by the request) - - **Present** web content (render HTML, CSS, JS) - - **Capable of executing** applications within the same context as the document on view (Flash) - - - -# Layout Engines -- Layout Engines are software components that **displays the formatted content** on the screen combining: - - Marked up content (such as `HTML`, `XML`, image files, etc.) - - Formatting information (such as `CSS`, `XSL`, etc.) -- It "paints" on the content area of a window, which is displayed on a monitor or a printer -- Typically embedded in web browsers, e-mail clients, on-line help systems or other applications that require the displaying (and editing) of web content -- The layout engine is the "heart of a browser" - - -# Layout Engines and Web Browsers -- **Trident**-based - - Internet Explorer, Netscape, Maxthon, etc. -- **Gecko**-based - - Firefox, Netscape, SeaMonkey, etc. -- **Blink**-based - - Chrome, Opera -- **WebKit**-based - - Safari, iOS, Maxthon, Chrome (up to v27), etc. -- **EdgeHTML** (fork of Trident) - - Microsoft Edge - - -# User Agent Strings -- Identify web browsers and their version - - History of (in)compatibility attempts -- Can have some additional information like layout engine, user's operating system, etc... - -```javascript -Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36 -``` - - - **Mozilla/5.0** – a generic term which most modern browsers use (originally indicated Netscape) - - **Windows NT 6.3** – Windows 8.1 - - **WOW64** – Windows-On-Windows 64-bit - - **AppleWebKit/537.36** – Blink is a fork of WebKit - - KHTML is the previous name of WebKit - - **Chrome/41.0.2272.118** – real browser version - - **Safari/537.36** – artifact against scripts sniffing - - - - - - - - - -# Hardware Servers -- A hardware server is a **physical computer** dedicated to running one or more such services -- Servers are placed in colocation centers - - Colocation facilities provide space, power, cooling, and physical security for the server -- The server may be: - - Database server - - File server - - Mail server - - Print server - - VPS servers - - - - - - - - - - - - - - - - - -# What Do the Web Servers Do? -- All physical servers have hardware -- The hardware is controlled by the operating system -- **Web servers** are software products that use the operating system to **handle web requests** - - Web servers **serve Web content** -- These requests are redirected to other software products (ASP.NET, PHP, etc.), depending on the web server settings - - - -# Web Servers Market Share October 2015 -- Market share of the top million busiest sites - - **Apache** - - 47.18% (469,050) - - **nginx** - - 23.36% (236,650) - - **IIS** (by Microsoft) - - 11.64% (116,321) - - **GWS** (by Google) - - 2.25% (22,304) -- [Source](http://news.netcraft.com/archives/2015/10/16/october-2015-web-server-survey.html) - - - - - - - - - -# Client-Server Architecture -- The client-server model consists of: - - A **server** - - A single machine or cluster of machines that provides web applications (or services) to multiple clients - - _Examples_: - - Web server running PHP scripts or ASP.NET pages - - IIS-based Web server - - WCF-based service - - Services in the cloud - - - -# Client-Server Architecture -- The client-server model consists of: - - **Clients** - - Software applications that provide UI (front-end) to access the services at the server - - _Examples_: - - Web browsers - - Desktop applications - - HTML5 applications - - Silverlight applications - - ASP.NET consuming services - - - - - -# The Client-Server Model - - - - - - -# Client-Server Model: _Examples_ -- Web server (Apache, IIS) – Web browser -- FTP server (ftpd) – FTP client (FileZilla) -- EMail server (qmail) – email client (Outlook) -- SQL Server – SQL Server Management Studio -- BitTorrent Tracker – Torrent client (μTorrent) -- DNS server (bind) – DNS client (resolver) -- DHCP server (wireless router firmware) – DHCP client (mobile phone /Android DHCP client/) -- SMB server (Windows) – SMB client (Windows) - - - - - - - - - - -# The 3-Tier Architecture -- The **3-tier architecture** consists of the following tiers (layers): - - **Front-end** (client layer) - - Client software – provides the UI of the system - - **Middle tier**(business layer) - - Server software – provides the core system logic - - Implements the business processes / services - - **Back-end** (data layer) - - Manages the data of the system (database / cloud) - - - -# The 3-Tier Architecture Model - - - - - -# Typical Layers of the Middle Tier -- The middle tier usually has parts related to the front-end, business logic and back-end: - - - - - - - - - - -# What is a Service? -- In the real world a "**service**" is: - - A piece of work performed by a service provider - - Provides the client (consumer) some desired result by some input parameters - - The requirements and the result are known - - Easy to use - - Always available - - Has quality characteristics (price, execution time, constraints, etc.) - - - - - - - - - - - - - - - -# What is Cloud? -- **Cloud** ≈ multiple hardware machines combine their computing power and resources - - Share them between multiple applications - - To save costs and use resources more efficiently -- **Public clouds** - - Provide computing resources on demand - - Publicly in Internet - - Paid or free of charge (to some limit) - - Amazon AWS, Google App Engine, Microsoft Azure, Rackspace, PHPFog, Heroku, AppHarbor - - - -# Cloud Computing Models -- **Infrastructure as a Service (IaaS)** - - Virtual machines in the cloud on demand - - Users install the OS and software they need -- **Platform as a Service (PaaS)** - - Platform, services and APIs for developers - - E.g. Java + JBoss + JSF + JPA + MongoDB or JavaScript + Node.js + MongoDB + RabbitMQ -- **Software as a Service (SaaS)** - - Hosted application on demand (e.g. WordPress) - - - - -# Questions? -## Ask at [our forum](http://telerikacademy.com/Forum/Category/27/html-css) - - - -# Free Trainings @ Telerik Academy - -- **HTML Basics** course @ Telerik Academy - - [html5course.telerik.com](html5course.telerik.com) -- Telerik Software Academy - - [telerikacademy.com](https://telerikacademy.com) -- Telerik Academy @ Facebook - - [facebook.com/TelerikAcademy](facebook.com/TelerikAcademy) -- Telerik Software Academy Forums - - [telerikacademy.com](https://telerikacademy.com) - - - - diff --git a/Topics/01. Web-Basics/slides/index.html b/Topics/01. Web-Basics/slides/index.html deleted file mode 100644 index ab25baa..0000000 --- a/Topics/01. Web-Basics/slides/index.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - - - - - - - - - - - - - - -
-
- - -
-
-
-
- - - - - - - - - - diff --git a/Topics/01. Web-Basics/slides/open.js b/Topics/01. Web-Basics/slides/open.js deleted file mode 100644 index b5ef080..0000000 --- a/Topics/01. Web-Basics/slides/open.js +++ /dev/null @@ -1 +0,0 @@ -require("openurl").open("http://localhost:10001/index.html"); diff --git a/Topics/01. Web-Basics/slides/package.json b/Topics/01. Web-Basics/slides/package.json deleted file mode 100644 index fef2b96..0000000 --- a/Topics/01. Web-Basics/slides/package.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "name": "", - "version": "1.0.0", - "description": "", - "main": "index.js", - "dependencies": { - "http-server": "^0.8.0", - "openurl": "^1.1.0" - }, - "devDependencies": {}, - "scripts": { - "start": "node ./node_modules/http-server/bin/http-server -p 10001 . & node open.js" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/TelerikAcademy/Web-Services-and-Cloud.git" - }, - "keywords": [ - "sammy.js", - "jquery", - "spa", - "single-page-applications" - ], - "author": "Doncho Minkov (DonchoMinkov@gmail.com)", - "license": "MIT", - "bugs": { - "url": "https://github.com/TelerikAcademy/JavaScript-Applications/issues" - }, - "homepage": "https://github.com/TelerikAcademy/JavaScript-Applications#readme" -} \ No newline at end of file diff --git a/Topics/02. HTML-Fundamentals/README.md b/Topics/02. HTML-Fundamentals/README.md index be2509e..08c1c4a 100644 --- a/Topics/02. HTML-Fundamentals/README.md +++ b/Topics/02. HTML-Fundamentals/README.md @@ -1,18 +1,515 @@ -## 02. HTML Fundamentals + + +# HTML 5 +## The past, the present, the future -HyperText Markup Language, tags, attributes +
+

HTML Basics

+

Telerik Software Academy

+ https://telerikacademy.com +
-## Resources + + + -##### [Slides](https://rawgit.com/TelerikAcademy/HTML/master/Topics/02.%20HTML-Fundamentals/slides/index.html) / [ Demos](demos) / [Tasks](homework) / [ Videos](VIDEOS.md) -## Table of Contents -- [Hypertext Markup Language](slides/README.md#/html) -- [HTML Terminology](slides/README.md#/terminology) -- [HTML Document Structure](slides/README.md#/structure) -- [HTML Common Elements](slides/README.md#/commonelements) -- [Section Elements](slides/README.md#/sectionelements) -- [Semantic Structural Tags](slides/README.md#/semantic) -#### [ home](/README.md) + + +# Table of Contents +- [Hypertext Markup Language](#/html) +- [HTML Terminology](#/terminology) +- [HTML Document Structure](#/structure) +- [HTML Common Elements](#/commonelements) +- [Section Elements](#/sectionelements) +- [Semantic Structural Tags](#/semantic) + + + + + + + + + + + + + +# Hypertext Markup Language +- **HTML** – **H**yper **T**ext **M**arkup **L**anguage + - A **notation for describing** + - document structure (semantic markup) + - formatting (presentation markup) + - Looks (looked?) like: + - A Microsoft Word document +- The markup tags **provide information** about the page content structure +- A **HTML** document **consists of many tags** + + + +# Creating HTML Pages +- An **HTML** document must have an **.htm** or **.html** file extension +- **HTML** files can be created with text editors: + - _Notepad_ + - _Notepad++_ + - _Sublime Text 2/3_ + - _Atom_ + - _Visual Studio Code_ +- Or **HTML** editors ([WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) Editors): + - Microsoft WebMatrix + - Microsoft Expression Web + - Microsoft Visual Studio + - Adobe Dreamweaver + + + +# HTML – Past, Present, Future +- 1991 – HTML first mentioned – Tim Berners-Lee – HTML tags +- 1993 – HTML (first public version, published at IETF) +- 1993 – HTML 2 draft +- 1995 – HTML 2 – W3C +- 1995 – HTML 3 draft +- 1997 – HTML 3.2 – “Wilbur” +- 1997 – HTML 4 – ”Cougar” – CSS +- 1999 – HTML 4.01 (final) +- 2000 – XHTML draft +- 2001 – XHTML (final) +- 2008 – HTML5 / XHTML5 draft +- 2011 – feature complete HTML5 +- http://en.wikipedia.org/wiki/HTML5#Plan_2014 + + + + + + + + + + + + + + +# HTML Terminology +- Concepts in **HTML** + - **Tags** + - Opening tag and closing tag + - The smallest piece in HTML + - **Attributes** + - Properties of the tag + - Size, color, etc… + - **Elements** + - Combination of opening, closing tag and attributes + + + +# HTML Tags +- **Tags** are the **smallest piece** in HTML Document + - Start with `<` and end with `>` +- Two kinds of **tags** + - **Opening** + - Mark the start of an HTML element + - **Closing** + - Mark the end of an HTML element + - Starts with ` + +

Hello Pesho!

+ + +``` + +
Opening tags
+ +
Closing tags
+ + + +# Attributes +- Attributes are **properties of HTML Elements** + - Used to **set** `size`, `color`, `border`, etc… + - Put **directly in the tags** + - Has value surrounded by **single** `' '` or **double** `" "` quotes + - The value is always a string + +```html + + go to Google + + +
+ + + +``` + +
Some tags don't have closing tag
+ + + +# Most Common Attributes +- There are some **attributes that are common** for every HTML element + - `id`, `class`, `name`, `style` +- Some attributes are **specific** + - For example the attribute `src` of the `img` element + - Shows the path to the image to be shown + + + +# HTML Elements +- HTML Elements are **combination of tags and attributes** + - Opening tag with some or none attributes and a closing tag + +```html + go to Google +``` + +```html +… +``` + + + + +## [Demo](https://github.com/TelerikAcademy/HTML/tree/master/Topics/02.%20HTML-Fundamentals/demos/01.HTML-concepts.html) + + + + + + + + + + + +# HTML Document Structure +- Some elements are **essential** to each HTML Document: + - `html`, `head`, `body`, `doctype` +- The `html` element + - Used to **mark the beginning** and ending of a HTML document + - All the content of the web page is inside this tag + +```html + + + +``` + + + + +# Head Element +- The `head` tag contains markup that is not visible to the user (i.e. the person using the browser) + - But **helps the browser** to render correctly the HTML document +- **What is in there**? + - Styles, scripts + - Declare encodings + - Etc.. + - The `title` tag - the text in the tab of a browser + + + + + +# Body Element and Doctype +- `body` element contains **all the visible to the user markup** + - Headings, text, hyperlinks, images, etc… + - Textboxes, sliders, buttons… +- `Doctype` is kind of the validator of the page + - **Tells the browser** in which version of HTML the page is written + - HTML 5 Doctype + +```html + +``` + + + + + +## [Demo](https://github.com/TelerikAcademy/HTML/tree/master/Topics/02.%20HTML-Fundamentals/demos/02.HTML-structure.html) + + + + + + + + + +# Text Formatting +- Text formatting tags modify the text between the opening tag and the closing tag + - Ex. <b>Hello</b> makes "Hello" bold + - Many of the formatting tags are deprecated + - **Use CSS instead** + + +# Text Formatting - Tags +| Tags | Meaning | +|:---------------------|:--------------------------------:| +| `` | bold | +| `` | italiazed | +| `` | underlined | +| `` | samplesuperscript | +| `` | samplebold | +| `` | strong | +| `` | emphasized | +| `
`        | 
preformatted text
     |
+
+
+# Some Simple Tags
+- Hyperlink Tags
+
+```html
+Link to Telerik Web site
+```
+- Image Tags
+
+```html
+logo
+```
+- Text formatting tags
+
+```html
+This text is emphasized.
+
new line

+This one is more emphasized.
+```
+
+
+
+
+# Headings and Paragraphs
+- Heading Tags (`h1` – `h6`)
+
+```html
+
Heading 1

+
Sub heading 2

+
Sub heading 3

+```
+
+- Paragraph Tags
+
+```html
+
This is my first paragraph

+
This is my second paragraph

+```
+
+- Sections: `div` and `span`
+
+```html
+

+   This is a div
+

+```
+
+
+
+
+# Ordered Lists: **<ol>** Tag
+- Create an **Ordered List** using `
    `:
+
+```html
+
      
+  
    1. Apple
      2. 
+  
    2. Orange
      3. 
+  
    3. Grapefruit
      4. 
+
    
+```
+- Attribute values for **type** are **1**, **A**, **a**, **I**, or **i**
+
+
+
+
+
+
+# Unordered Lists: **<ul>** Tag
+- Create an **Unordered List** using ``:
+- Attribute values for **type** are:
+
+
+
+
+
+
+# Definition lists: **<dl>** tag
+- Create **definition lists** using `
    `
+  - Pairs of text and associated definition; text is in `
    ` tag, definition in `
    ` tag
+
+```html
+
    
+
    HTML
    
+
    A markup language …
    
+
    CSS
    
+
    Language used to …
    
+
    
+```
+  - Renders **without bullets**
+  - Definition is **indented**
+
+
+
+
+
+## [Demo](https://github.com/TelerikAcademy/HTML/tree/master/Topics/02.%20HTML-Fundamentals/demos/03.Common-elements.html)
+
+
+
+
+
+
+
+
+# The <div> Tag
+- `
    ` creates logical
     divisions within a page 
     
    
+  - Block element 
     
    
+  - Used with CSS 
     
    
+- _Example_:
+
+```html
+
    DIV example
    
+
    This one is
+    only a test.
+
    
+```
+
+
+
+
+
+
+## [Demo](https://github.com/TelerikAcademy/HTML/tree/master/Topics/02.%20HTML-Fundamentals/demos/04.Section-elements-div.html)
+
+
+
+
+
+# The <span> Tag
+
+
+
+```html
+
    This one is
+    only a test.
+
    
+
    This one is another
+    TEST.
+
    
+```
+
+
+
+
+
+
+## [Demo](https://github.com/TelerikAcademy/HTML/tree/master/Topics/02.%20HTML-Fundamentals/demos/05.Section-elements-span.html)
+
+
+
+
+
+# Semantic Structural Tags
+
+
+# The Structure of a Web Page
+- A sample layout structure of a Web Page
+
+
+
+
+# The "HTML 4 and Before" Way
+- Using **divs with IDs**
+  - The **IDs are needed for styling**
+
+```html
+
+ … 
+
+    
+    
+    
+    
     … 
    
+    
+
+
+```
+
+
+
+## [Demo](https://github.com/TelerikAcademy/HTML/tree/master/Topics/02.%20HTML-Fundamentals/demos/06.Semantic-structural-tags-divs.html)
+
+
+# The HTML5 Way
+- In **HTML5** there are **semantic tags** for layout
+  - `