From 8d582c0799b70cbb4e64c3dee643533c079f5c3a Mon Sep 17 00:00:00 2001 From: Marcel Donges Date: Wed, 18 Oct 2023 11:38:00 +0200 Subject: [PATCH] first Web1.0 update --- README.md | 27 +++ Web4university/Web1/localhost/browser | 1 + .../localhost/terminal/executable/interpreter | 0 .../Web1/localhost/terminal/shell/sh/first.sh | 1 + .../localhost/terminal/shell/sh/second.sh | 56 +++++++ .../Web1/localhost/terminal/shell/sh/third.sh | 42 +++++ .../static/01.elements/01.media/index.htm | 36 ++++ .../static/01.elements/02.forms/index.htm | 40 +++++ .../Web1/static/01.elements/index.htm | 1 + .../static/02.semanticStructure/index.htm | 86 ++++++++++ Web4university/Web1/static/index.htm | 12 +- Web4university/Web1/static/learn.htm | 156 ++++++++++++++++++ .../Web2/00.InTheBeginning/static/index.htm | 3 +- Web4university/index.htm | 21 +++ 14 files changed, 476 insertions(+), 6 deletions(-) create mode 120000 Web4university/Web1/localhost/browser create mode 100644 Web4university/Web1/localhost/terminal/executable/interpreter create mode 100755 Web4university/Web1/localhost/terminal/shell/sh/first.sh create mode 100755 Web4university/Web1/localhost/terminal/shell/sh/second.sh create mode 100755 Web4university/Web1/localhost/terminal/shell/sh/third.sh create mode 100644 Web4university/Web1/static/01.elements/01.media/index.htm create mode 100644 Web4university/Web1/static/01.elements/02.forms/index.htm create mode 120000 Web4university/Web1/static/01.elements/index.htm create mode 100644 Web4university/Web1/static/02.semanticStructure/index.htm create mode 100644 Web4university/Web1/static/learn.htm create mode 100644 Web4university/index.htm diff --git a/README.md b/README.md index 701138e..8205686 100644 --- a/README.md +++ b/README.md @@ -7,5 +7,32 @@ Start reading on the [Web4.x Wiki](https://github.com/web4x/codingWeb4/wiki/Web- ## GitHub Pages +* [Configuring a publishing source for your GitHub Pages site](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) +* GitHub Pages [REST API](https://docs.github.com/en/free-pro-team@latest/rest/pages/pages?apiVersion=2022-11-28#get-a-github-pages-site) + + +### Web 1.0 * [See your first Web 1.0 static web page](https://web4x.github.io/codingWeb4/Web1/static/) + * [Open the code](https://github.com/web4x/codingWeb4/blob/main/Web4university/Web1/static/index.htm) * See the deployment process under [Actions](https://github.com/web4x/codingWeb4/actions/) +* See the [deployment process](https://github.com/web4x/codingWeb4/deployments/) + +### Web 2.0 +* [See your first Web 2.0 dynamic web page](https://web4x.github.io/codingWeb4/Web2/00.InTheBeginning/static) + * Inspect the page + * Chrome Devtools + * Elements Tab + * Source Tab + * [The HTML Page](https://web4x.github.io/codingWeb4/Web2/00.InTheBeginning/static/) + * [The JavaScriptCode](https://web4x.github.io/codingWeb4/Web2/00.InTheBeginning/js/jhwhScript.js) + * Add Breakpoints + * debugger; statement in Line 12 + * Line 18 + + +## The magic of GitHub: press the "."-key + +and open "Visual Studio Code" just here in the your browser... +opening this repository for editing. + +Looks already like Web4.x bu is still Web 2.x \ No newline at end of file diff --git a/Web4university/Web1/localhost/browser b/Web4university/Web1/localhost/browser new file mode 120000 index 0000000..d9bc54d --- /dev/null +++ b/Web4university/Web1/localhost/browser @@ -0,0 +1 @@ +../static/ \ No newline at end of file diff --git a/Web4university/Web1/localhost/terminal/executable/interpreter b/Web4university/Web1/localhost/terminal/executable/interpreter new file mode 100644 index 0000000..e69de29 diff --git a/Web4university/Web1/localhost/terminal/shell/sh/first.sh b/Web4university/Web1/localhost/terminal/shell/sh/first.sh new file mode 100755 index 0000000..f8fe17b --- /dev/null +++ b/Web4university/Web1/localhost/terminal/shell/sh/first.sh @@ -0,0 +1 @@ +echo "a terminal message from your first.sh script" \ No newline at end of file diff --git a/Web4university/Web1/localhost/terminal/shell/sh/second.sh b/Web4university/Web1/localhost/terminal/shell/sh/second.sh new file mode 100755 index 0000000..2ac290b --- /dev/null +++ b/Web4university/Web1/localhost/terminal/shell/sh/second.sh @@ -0,0 +1,56 @@ +#!/bin/sh + +echo "the so called shebang line assures that the script is run by the sh shell" +echo " +this is a multiline comment: +it only ends with the next \"-charackter +to prevent the comment to end above you need to quote the \"-character with a \-character + +otherwise the multilen terminal message will end" +echo " + +that makes the terminal output much more readable. +" + +echo " + +to print the current SETTINGS we have to check the shells ENVIONMENT VARIABLES. + +this can be done with the command: env + +it will printout all environment variables, that are currently set in the shell. +================================================================================ +" + +env + +echo " +================================================================================ +As you see they are not sorted and therefroe hard to read. + +to sort the variables we can use the command: sort + +and we have to PIPE the output of the env command to the sort command. +This is done like this: + + env | sort +================================================================================ +" + +env | sort + +echo " +================================================================================ +The script: third.sh + +will ensure that the script is run in a clean environment withouth any environment variables set in the current shell. +to call the script you have to type: + + ./th [TAB]-key + +then it should be completed to: + + ./third.sh + +================================================================================ +" \ No newline at end of file diff --git a/Web4university/Web1/localhost/terminal/shell/sh/third.sh b/Web4university/Web1/localhost/terminal/shell/sh/third.sh new file mode 100755 index 0000000..762e6f6 --- /dev/null +++ b/Web4university/Web1/localhost/terminal/shell/sh/third.sh @@ -0,0 +1,42 @@ +#!/usr/bin/env -i /bin/sh + +echo "the so called shebang line assures that the script is run by the sh shell" +echo " the env -i ensures that the script is run in a clean environment" +echo " whatever environment variables are set in the current shell are not passed to this script" +echo " +this is a multiline comment: +it only ends with the next \"-charackter +to prevent the comment to end above you need to quote the \"-character with a \-character + +otherwise the multilen terminal message will end" +echo " + +that makes the terminal output much more readable. +" + +echo " + +to print the current SETTINGS we have to check the shells ENVIONMENT VARIABLES. + +this can be done with the command: env + +it will printout all environment variables, that are currently set in the shell. +================================================================================ +" + +env + +echo " +================================================================================ +As you see they are not sorted and therefroe hard to read. + +to sort the variables we can use the command: sort + +and we have to PIPE the output of the env command to the sort command. +This is done like this: + + env | sort +================================================================================ +" + +env | sort diff --git a/Web4university/Web1/static/01.elements/01.media/index.htm b/Web4university/Web1/static/01.elements/01.media/index.htm new file mode 100644 index 0000000..b4f0fc6 --- /dev/null +++ b/Web4university/Web1/static/01.elements/01.media/index.htm @@ -0,0 +1,36 @@ + + + + + learn HTML media usage + + + + + + + + +

This section will show you multimedia

+

HTML5 introduced a number of new elements for multimedia. + The audio element is used for audio content. + The video element is used for video content. + The source element is used to specify the URL of the audio or video file. + The track element is used to specify subtitles for the audio or video file.

+ + +

This section will show you iframes

+ + + + \ No newline at end of file diff --git a/Web4university/Web1/static/01.elements/02.forms/index.htm b/Web4university/Web1/static/01.elements/02.forms/index.htm new file mode 100644 index 0000000..ac101b2 --- /dev/null +++ b/Web4university/Web1/static/01.elements/02.forms/index.htm @@ -0,0 +1,40 @@ + + + + + learn HTML Forms + + + + + + + + +

This section will show you forms

+

Forms are created with the form element. + The action attribute is the URL of the page that will process the form. + The method attribute is either get or post. + The get method is used for forms that don't change anything on the server, + for example a search form. + The post method is used for forms that do change something on the server, + for example a login form.

+
+ + +
+ +

This section will show you forms with post method

+ The post method is used for forms that do change something on the server, + but in this case we will produce an error 405 because + the server does not accept post requests. +
+ + +
+ + + + \ No newline at end of file diff --git a/Web4university/Web1/static/01.elements/index.htm b/Web4university/Web1/static/01.elements/index.htm new file mode 120000 index 0000000..11ff947 --- /dev/null +++ b/Web4university/Web1/static/01.elements/index.htm @@ -0,0 +1 @@ +../learn.htm \ No newline at end of file diff --git a/Web4university/Web1/static/02.semanticStructure/index.htm b/Web4university/Web1/static/02.semanticStructure/index.htm new file mode 100644 index 0000000..92db9b7 --- /dev/null +++ b/Web4university/Web1/static/02.semanticStructure/index.htm @@ -0,0 +1,86 @@ + + + + + learn HTML semantics + + + + + + + + +

This section will show you semantic elements

+

HTML5 introduced a number of new elements that have a semantic meaning. + Semantic elements are elements that have a meaning to the browser, + and to screen readers for blind users. + They are also useful for search engines to understand the structure of a page.

+

The header element is used for the header of a page or section. + The nav element is used for the navigation menu of a page. + The main element is used for the main content of a page. + The section element is used for a section of a page. + The article element is used for an article on a page. + The aside element is used for content that is not directly related to the main content of a page. + The footer element is used for the footer of a page or section.

+
+

Header

+
+ +
+

Main content

+

Without the appropiate styling, + the semantic elements will not look any different from the headline elements. +

+
+
+

Section

+
+
+

Article

+ write some nice story here +
+ + + + + + + + + + \ No newline at end of file diff --git a/Web4university/Web1/static/index.htm b/Web4university/Web1/static/index.htm index 1eba622..03a30cd 100644 --- a/Web4university/Web1/static/index.htm +++ b/Web4university/Web1/static/index.htm @@ -1,6 +1,5 @@ - - + Your first Web 1.0 static page @@ -13,9 +12,12 @@

Hello my Friend!

Nice to have you here... - + +

+ Here you can learn more HTML +

+ + \ No newline at end of file diff --git a/Web4university/Web1/static/learn.htm b/Web4university/Web1/static/learn.htm new file mode 100644 index 0000000..f66dac6 --- /dev/null +++ b/Web4university/Web1/static/learn.htm @@ -0,0 +1,156 @@ + + + + + learn HTML + + + + + + + +

This is a main heading

+ And this is a normal text. +

This is a paragraph...

+ +

This is a subheading

+

This is a paragraph in a subheading...

+ +

This is a heading level 3

+

This is a heading level 4

+ +

Headings give an outline structure to a page

+

Headings are important for search engines to understand the structure and content of a page. + They are also important for screen reader users.

+ +

Headings should be used in order

+ HTML is like a skeleton for a web page. The default style of headings is not very pretty. + We will cover how to style headings in a later chapter. + +

Headings should be used in order

+

Headings should be used in order. + This is the most important heading, + and should be used for the main heading of the page. + This is a subheading, and should be used for the main sections of the page. + You can see that the source code formating + is not reflected in the HTML page. + To really enforec a line break
+ you need to use the br tag.
+

+ With the pre tag you can format the text in the source code and it will be reflected in the HTML page. + 
+        This is now
+
+        exactly formated
+        as you
+        type it here...
+
+

This section will show you lists

+

Lists are important for structuring content. + There are two types of lists in HTML: unordered lists and ordered lists. + Unordered lists are for lists where the order of the items doesn't matter, + for example a shopping list. + Ordered lists are for lists where the order of the items does matter, + for example a recipe.

+

Unordered lists

+

Unordered lists are created with the ul element. + Each item in the list is placed inside a li element. + The list items are marked with bullets (typically small black circles).

+ +

Ordered lists

+

Ordered lists are created with the ol element. + Each item in the list is placed inside a li element. + The list items are marked with numbers by default.

+
    +
  1. Item 1
    2. +
  2. Item 2
    3. +
  3. Item 3
    4. +
+

Definition lists

+

Definition lists are created with the dl element. + Each item in the list is placed inside a dt element (for the term being defined) or a dd element (for the definition).

+
+
Term 1
+
Definition 1
+
Term 2
+
Definition 2
+
Term 3
+
Definition 3
+
+

Lists can be nested

+

Lists can be nested inside each other. + This is useful for lists of related items. + For example, a list of ingredients for a recipe could be nested inside an ordered list.

+
    +
  1. Item 1
    2. +
  2. Item 2 +
      +
    • Item 2.1
      • +
    • Item 2.2
      • +
    • Item 2.3
      • +
    +
    3. +
  3. Item 3
    4. +
+

This section will show you links

+

Links are created with the a element. + The text between the opening and closing a tags is the link text. + The value of the href attribute is the URL of the link.

+

This is a link to Google

+

Links can also be created to other pages on the same site. + This is called an internal link. + Internal links are useful for creating a navigation menu for a website.

+

This is an internal link to the index page

+

Links can also be created to other parts of the same page. + This is called an anchor link. + Anchor links are useful for creating a table of contents for a long page.

+

This is an anchor link to the section 1 heading

+

This section will show you images

+

Images are created with the img element. + The value of the src attribute is the URL of the image. + The value of the alt attribute is the alternative text for the image. + The alternative text is used by screen readers for blind users, + and is also displayed if the image fails to load.

+

Google logo

+

This section will show you tables

+

Tables are created with the table element. + Each row in the table is created with the tr element. + Each cell in the table is created with the td element. + The th element is used for the table header.

+ + + + + + + + + + + + + +
Column 1Column 2
Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2
+

This section will show you forms

+

Forms are created with the form element.

+ +

This section will show you semantic elements

+ +

HTML5 introduced a number of new elements that have a semantic meaning. +

+

This section will show you multimedia

+

HTML5 introduced a number of new elements for multimedia. +

+ +

This section will show you iframes

+ + + + \ No newline at end of file diff --git a/Web4university/Web2/00.InTheBeginning/static/index.htm b/Web4university/Web2/00.InTheBeginning/static/index.htm index 999a500..b14d7c2 100644 --- a/Web4university/Web2/00.InTheBeginning/static/index.htm +++ b/Web4university/Web2/00.InTheBeginning/static/index.htm @@ -17,7 +17,8 @@

Hello my Friend!

Nice to have you here...
The script will cause quite heavy calculation and make the browser nearly hang.

- It operates its first universe.... + It operates its first universe....
+ J = diff --git a/Web4university/index.htm b/Web4university/index.htm new file mode 100644 index 0000000..1eba622 --- /dev/null +++ b/Web4university/index.htm @@ -0,0 +1,21 @@ + + + + + + Your first Web 1.0 static page + + + + + + + +

Hello my Friend!

+ Nice to have you here... + + + + \ No newline at end of file