{"id":14,"date":"2023-10-20T09:09:59","date_gmt":"2023-10-20T07:09:59","guid":{"rendered":"https:\/\/22mosers.bplaced.net\/?page_id=14"},"modified":"2025-06-03T16:00:15","modified_gmt":"2025-06-03T14:00:15","slug":"programmierung","status":"publish","type":"page","link":"https:\/\/22mosers.bplaced.net\/?page_id=14","title":{"rendered":"Programmierung"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14\" class=\"elementor elementor-14\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2ade016 elementor-section-height-min-height elementor-section-items-bottom elementor-section-boxed elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no elementor-invisible\" data-id=\"2ade016\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;shape_divider_bottom&quot;:&quot;waves&quot;,&quot;shape_divider_bottom_negative&quot;:&quot;yes&quot;,&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t\t<div class=\"elementor-shape elementor-shape-bottom\" data-negative=\"true\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 100\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M790.5,93.1c-59.3-5.3-116.8-18-192.6-50c-29.6-12.7-76.9-31-100.5-35.9c-23.6-4.9-52.6-7.8-75.5-5.3\n\tc-10.2,1.1-22.6,1.4-50.1,7.4c-27.2,6.3-58.2,16.6-79.4,24.7c-41.3,15.9-94.9,21.9-134,22.6C72,58.2,0,25.8,0,25.8V100h1000V65.3\n\tc0,0-51.5,19.4-106.2,25.7C839.5,97,814.1,95.2,790.5,93.1z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ae336a4\" data-id=\"ae336a4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ceca889 animated-fast elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"ceca889\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:400}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.16.0 - 20-09-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h1 class=\"elementor-heading-title elementor-size-default\">Programmierung<\/h1>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-50845d5 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"50845d5\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.16.0 - 20-09-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>\u00a0<\/p><p>\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-17b048ed elementor-section-height-min-height elementor-section-items-stretch elementor-section-content-middle elementor-section-boxed elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"17b048ed\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-2c41117d\" data-id=\"2c41117d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a3d14ef elementor-widget elementor-widget-spacer\" data-id=\"a3d14ef\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.16.0 - 20-09-2023 *\/\n.elementor-column .elementor-spacer-inner{height:var(--spacer-size)}.e-con{--container-widget-width:100%}.e-con-inner>.elementor-widget-spacer,.e-con>.elementor-widget-spacer{width:var(--container-widget-width,var(--spacer-size));--align-self:var(--container-widget-align-self,initial);--flex-shrink:0}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container,.e-con>.elementor-widget-spacer>.elementor-widget-container{height:100%;width:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer{height:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner{height:var(--container-widget-height,var(--spacer-size))}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty,.e-con>.elementor-widget-spacer.elementor-widget-empty{position:relative;min-height:22px;min-width:22px}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon,.e-con>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;padding:0;width:22px;height:22px}<\/style>\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4067da25 animated-fast elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"4067da25\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:400}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">HTML, CSS und JavaScript mit VSC<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-3c247e3c\" data-id=\"3c247e3c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-281c5771 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"281c5771\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:600}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-size: 14pt;\">HTML und JavaScript &#8211;\u00a0 damit habe ich gelernt, im Programm VSC kleine <a href=\"https:\/\/22mosers.bplaced.net\/?page_id=72\">Spiele <\/a>und <a href=\"https:\/\/22mosers.bplaced.net\/?page_id=75\">Apps <\/a>zu programmieren. Dabei handelte es sich unter anderem um einen Space Shooter, ein Pflanzen-Clicker-Game oder auch um n\u00fctzliche Apps wie eine Eieruhr oder eine ToDo-Liste.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f644fa8 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"2f644fa8\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:500}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bb9a419 elementor-section-height-min-height elementor-section-items-stretch elementor-section-content-middle elementor-section-boxed elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"bb9a419\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-daea217\" data-id=\"daea217\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c08f5d9 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"c08f5d9\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:600}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-size: 14pt;\">Auch mit AppGyver habe ich in der Schule Erfahrungen sammeln d\u00fcrfen &#8211; zuerst Grundlagen im Aufbau einer App, wie zum Beispiel das Verkn\u00fcpfen verschiedener Seiten der App.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-977d051 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"977d051\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:500}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-size: 14pt;\">Abschlie\u00dfend habe ich auch eine eigene App entwickelt, in die ich viel Zeit (wirklich sehr, sehr viel Zeit) gesteckt habe. Dabei handelt es sich um eine Liste aller Errungenschaften in einem Videospiel, die man nach Beispiel einer ToDo-Liste abarbeiten kann. Wie genau <a href=\"https:\/\/22mosers.bplaced.net\/?page_id=75\">diese App ausschaut, ist auf dieser Seite zu finden<\/a>.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-8dcd545\" data-id=\"8dcd545\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9fc6b75 elementor-widget elementor-widget-spacer\" data-id=\"9fc6b75\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d69eedf animated-fast elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"d69eedf\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:400}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Apps mit Appgyver<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4b0fc51 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"4b0fc51\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-26aad8e0\" data-id=\"26aad8e0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3dccc917 animated-fast elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"3dccc917\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Woraus besteht eine HTML-Datei?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41ee1a9f animated-fast elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"41ee1a9f\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Ein\u00a0HTML-Grundger\u00fcst\u00a0umfasst die minimalen Komponenten, die notwendig sind, um Inhalte in einem Browser anzuzeigen. Hierzu geh\u00f6ren Doctype, Head und Body.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-36f2afbb elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"36f2afbb\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-643e9a11 animated-fast elementor-invisible\" data-id=\"643e9a11\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:300}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2e0c4819 elementor-vertical-align-middle animated-fast elementor-invisible elementor-widget elementor-widget-image-box\" data-id=\"2e0c4819\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.16.0 - 20-09-2023 *\/\n.elementor-widget-image-box .elementor-image-box-content{width:100%}@media (min-width:768px){.elementor-widget-image-box.elementor-position-left .elementor-image-box-wrapper,.elementor-widget-image-box.elementor-position-right .elementor-image-box-wrapper{display:flex}.elementor-widget-image-box.elementor-position-right .elementor-image-box-wrapper{text-align:right;flex-direction:row-reverse}.elementor-widget-image-box.elementor-position-left .elementor-image-box-wrapper{text-align:left;flex-direction:row}.elementor-widget-image-box.elementor-position-top .elementor-image-box-img{margin:auto}.elementor-widget-image-box.elementor-vertical-align-top .elementor-image-box-wrapper{align-items:flex-start}.elementor-widget-image-box.elementor-vertical-align-middle .elementor-image-box-wrapper{align-items:center}.elementor-widget-image-box.elementor-vertical-align-bottom .elementor-image-box-wrapper{align-items:flex-end}}@media (max-width:767px){.elementor-widget-image-box .elementor-image-box-img{margin-left:auto!important;margin-right:auto!important;margin-bottom:15px}}.elementor-widget-image-box .elementor-image-box-img{display:inline-block}.elementor-widget-image-box .elementor-image-box-title a{color:inherit}.elementor-widget-image-box .elementor-image-box-wrapper{text-align:center}.elementor-widget-image-box .elementor-image-box-description{margin:0}<\/style><div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">Doctype<\/h3><p class=\"elementor-image-box-description\"><b>Damit ein Browser in der Lage ist, die entsprechenden Inhalte korrekt darzustellen, muss er die Information bekommen, um welchen Dokumententyp es sich handelt. Das erledigt Doctype.<\/b><\/p><\/div><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-723d562b animated-fast elementor-invisible\" data-id=\"723d562b\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:400}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3db81e1a elementor-vertical-align-middle animated-fast elementor-invisible elementor-widget elementor-widget-image-box\" data-id=\"3db81e1a\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">Head<\/h3><p class=\"elementor-image-box-description\"><b>Der Head  ist f\u00fcr die Nutzer unsichtbar, erf\u00fcllt aber dennoch unverzichtbare Aufgaben f\u00fcr eine Webseite. So ist im Head der Title der Webseite zu finden. Auch Informationen zum Autor &amp; Copyright sind zu finden.<\/b><\/p><\/div><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-34ece90e animated-fast elementor-invisible\" data-id=\"34ece90e\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:300}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-56e386a7 elementor-vertical-align-middle animated-fast elementor-invisible elementor-widget elementor-widget-image-box\" data-id=\"56e386a7\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">Body<\/h3><p class=\"elementor-image-box-description\"><b>Im Body bringt man die eigentlichen Inhalte unter. Hier k\u00f6nnen unter anderem Texte, Fotos und Videos pr\u00e4sentiert werden, die den Besuchern und Besucherinnen einen echten Mehrwert bieten.<\/b><\/p><\/div><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2ffcc97 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"2ffcc97\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b266051\" data-id=\"b266051\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-49f284e animated-fast elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"49f284e\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Woraus besteht eine CSS-Datei?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39b7d3f animated-fast elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"39b7d3f\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Das Grundger\u00fcst einer CSS Datei kann nicht so leicht beschrieben werden wie bei HTML. Um eine CSS Datei verwenden zu k\u00f6nnen braucht es zuerst eine HTML Datei. Deshalb hier die drei Schritte:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a2b79a5 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"a2b79a5\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-71ea4f6 animated-fast elementor-invisible\" data-id=\"71ea4f6\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:300}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f5a9f84 elementor-vertical-align-middle animated-fast elementor-invisible elementor-widget elementor-widget-image-box\" data-id=\"f5a9f84\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">HTML erstellen<\/h3><p class=\"elementor-image-box-description\"><b>Bevor man mit CSS starten kann, braucht man eine ganz normale HTML Datei.<\/b><\/p><\/div><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-7ec821f animated-fast elementor-invisible\" data-id=\"7ec821f\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:400}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6cf18dc elementor-vertical-align-middle animated-fast elementor-invisible elementor-widget elementor-widget-image-box\" data-id=\"6cf18dc\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">CSS<\/h3><p class=\"elementor-image-box-description\"><b>Hat man die HTML Datei erstellt, so kann man jetzt die CSS Datei erstellen und diese mit der HTML verbinden.<\/b><\/p><\/div><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-652f5ee animated-fast elementor-invisible\" data-id=\"652f5ee\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:300}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ecbc23c elementor-vertical-align-middle animated-fast elementor-invisible elementor-widget elementor-widget-image-box\" data-id=\"ecbc23c\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">Tags<\/h3><p class=\"elementor-image-box-description\"><b>Jetzt erstellt man in der HTML Tags wie z.B. &lt;section&gt;, welche man in der CSS Datei designlich anpassen kann.\n<\/b>\n<\/p><\/div><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6e625cc elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"6e625cc\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-983d6f8\" data-id=\"983d6f8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-69d53c9 animated-fast elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"69d53c9\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Woraus besteht eine Javascript-Datei?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db53fc1 animated-fast elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"db53fc1\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Vereinfacht gesagt besteht ein JavaScript-Programm aus einer Abfolge von Anweisungen. Bei der Ausf\u00fchrung des JavaScripts werden die Anweisungen zun\u00e4chst nacheinander abgearbeitet.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-112cb5f elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"112cb5f\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-617f39d animated-fast elementor-invisible\" data-id=\"617f39d\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:300}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c5ca196 elementor-vertical-align-middle animated-fast elementor-invisible elementor-widget elementor-widget-image-box\" data-id=\"c5ca196\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">Variable: let ... <\/h3><p class=\"elementor-image-box-description\"><b>Mit einer Variablen-Deklaration wird eine Variable erzeugt. Eine Variable kann man sich als eine Schachtel mit einem Namen vorstellen, in die ein Wert gelegt wird. <\/b><\/p><\/div><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-b3507a2 animated-fast elementor-invisible\" data-id=\"b3507a2\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:400}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a2d3fba elementor-vertical-align-middle animated-fast elementor-invisible elementor-widget elementor-widget-image-box\" data-id=\"a2d3fba\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">Kontrollstrukturen<\/h3><p class=\"elementor-image-box-description\"><b>Kontrollstrukturen sind Anweisungen, die wiederum Bl\u00f6cke mit Anweisungen enthalten. Man unterscheidet zwei Arten von Kontrollstrukturen: Verzweigungen und Schleifen.\n<\/b>\n<\/p><\/div><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-65ae86e animated-fast elementor-invisible\" data-id=\"65ae86e\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeInUp&quot;,&quot;animation_delay&quot;:300}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3a2f9bf elementor-vertical-align-middle animated-fast elementor-invisible elementor-widget elementor-widget-image-box\" data-id=\"3a2f9bf\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"image-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"elementor-image-box-wrapper\"><div class=\"elementor-image-box-content\"><h3 class=\"elementor-image-box-title\">Funktionen<\/h3><p class=\"elementor-image-box-description\"><b>Mit Funktionen kann man flexible Teilprogramme notieren, die wiederholt aufgeruft werden k\u00f6nnen. Funktionen sind ein einfaches Mittel, ein JavaScript-Programm zu strukturieren.\n<\/b>\n<\/p><\/div><\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Programmierung \u00a0 \u00a0 HTML, CSS und JavaScript mit VSC HTML und JavaScript &#8211;\u00a0 damit habe ich gelernt, im Programm VSC kleine Spiele und Apps zu programmieren. Dabei handelte es sich unter anderem um einen Space Shooter, ein Pflanzen-Clicker-Game oder auch um n\u00fctzliche Apps wie eine Eieruhr oder eine ToDo-Liste. Auch mit AppGyver habe ich in der Schule Erfahrungen sammeln d\u00fcrfen &#8211; zuerst Grundlagen im Aufbau einer App, wie zum Beispiel das Verkn\u00fcpfen verschiedener Seiten der App. Abschlie\u00dfend habe ich auch eine eigene App entwickelt, in die ich viel Zeit (wirklich sehr, sehr viel Zeit) gesteckt habe. Dabei handelt es sich um eine Liste aller Errungenschaften in einem Videospiel, die man nach Beispiel einer ToDo-Liste abarbeiten kann. Wie genau diese App ausschaut, ist auf dieser Seite zu finden. Apps mit Appgyver Woraus besteht eine HTML-Datei? Ein\u00a0HTML-Grundger\u00fcst\u00a0umfasst die minimalen Komponenten, die notwendig sind, um Inhalte in einem Browser anzuzeigen. Hierzu geh\u00f6ren Doctype, Head und Body. Doctype Damit ein Browser in der Lage ist, die entsprechenden Inhalte korrekt darzustellen, muss er die Information bekommen, um welchen Dokumententyp es sich handelt. Das erledigt Doctype. Head Der Head ist f\u00fcr die Nutzer unsichtbar, erf\u00fcllt aber dennoch unverzichtbare Aufgaben f\u00fcr eine Webseite. So ist im Head der Title der Webseite zu finden. Auch Informationen zum Autor &amp; Copyright sind zu finden. Body Im Body bringt man die eigentlichen Inhalte unter. Hier k\u00f6nnen unter anderem Texte, Fotos und Videos pr\u00e4sentiert werden, die den Besuchern und Besucherinnen einen echten Mehrwert bieten. Woraus besteht eine CSS-Datei? Das Grundger\u00fcst einer CSS Datei kann nicht so leicht beschrieben werden wie bei HTML. Um eine CSS Datei verwenden zu k\u00f6nnen braucht es zuerst eine HTML Datei. Deshalb hier die drei Schritte: HTML erstellen Bevor man mit CSS starten kann, braucht man eine ganz normale HTML Datei. CSS Hat man die HTML Datei erstellt, so kann man jetzt die CSS Datei erstellen und diese mit der HTML verbinden. Tags Jetzt erstellt man in der HTML Tags wie z.B. &lt;section&gt;, welche man in der CSS Datei designlich anpassen kann. Woraus besteht eine Javascript-Datei? Vereinfacht gesagt besteht ein JavaScript-Programm aus einer Abfolge von Anweisungen. Bei der Ausf\u00fchrung des JavaScripts werden die Anweisungen zun\u00e4chst nacheinander abgearbeitet. Variable: let &#8230; Mit einer Variablen-Deklaration wird eine Variable erzeugt. Eine Variable kann man sich als eine Schachtel mit einem Namen vorstellen, in die ein Wert gelegt wird. Kontrollstrukturen Kontrollstrukturen sind Anweisungen, die wiederum Bl\u00f6cke mit Anweisungen enthalten. Man unterscheidet zwei Arten von Kontrollstrukturen: Verzweigungen und Schleifen. Funktionen Mit Funktionen kann man flexible Teilprogramme notieren, die wiederholt aufgeruft werden k\u00f6nnen. Funktionen sind ein einfaches Mittel, ein JavaScript-Programm zu strukturieren.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":43,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":3226,"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/3226"}],"wp:attachment":[{"href":"https:\/\/22mosers.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}