So geht es immer los beim Programmieren: Hallo Welt!

HTML5 & CSS3 − Elemente-Logik

In Bearbeitung

Grundsätzlich

Elemente haben ein Anfangs-Tag, meist ein End-Tag und werden mit dem "kleiner als"- Zeichen < eröffnet und mit dem "größer als"- Zeichen > geschlossen.
Die meisten Elemente besitzen ein Anfangs-Tag und ein End-Tag. Dieses sieht im Beispiel für das Element Absatz beginnend so <p> und endend so <⁄p> aus. Zwischen dem Anfans- und End-Tag eines Elementes steht der Inhalt.

HTML5 Elemente - Index

Die Dokumenttyp-Bezeichnung
<!doctype html>

Die Dokumenttyp-Bezeichnung ist die erste Angabe in einer HTML-Datei und definiert für den Browser die Anzeige als HTML-Dokumenttyp. Mit dieser Angabe kann der Browser den Inhalt interpretieren und stellt diesen dar.

Beispiel

<!doctype html>

Das Element html

Das den Quelltext umschliessende Element html wird mit dem Attribut für die Sprachinterpretation lang als erstes Element in den Quelltext geschrieben.

Beispiel

<!doctype html> <html lang="de"> <⁄html>

Innerhalb des Elementes html werden alle weiteren Elemente geschrieben.

Das Element head

Im Element head werden Informationen zum Inhalt und für die Darstellung des Inhaltes zur Verfügung gestellt.

Beispiel

<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Erste Schritte<⁄title> <⁄head> <⁄html>

Innerhalb des Elementes html werden alle weiteren Elemente geschrieben. Im Beispiel das meta-Tag und title-Tag als Angabe für die Zeichensatz-Codierung bei der Darstelung der Webseite und deren Titels.

Das Element body

Das Element body erzeugt den sichtbaren Bereich der Webseite.

Beispiel

<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Erste Schritte<⁄title> <⁄head> <body> ...hier befindet sich der sichtbare Teil der Webseite <⁄body> <⁄html>

Das Element header

Das Element header unterteilt die webseite in einen Kopfbereich. Hier findet meist das Logo, ein Slogan und auch oft die Navigation

Beispiel

<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Erste Schritte<⁄title> <⁄head> <body> <header> ...hier werden Element für den Kopfbereich der Webseite hinterlegt. <⁄header> <⁄body> <⁄html>

Das Element main

main

Das Element main unterteilt die Webseite in einen Hauptbereich.

Beispiel

<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Erste Schritte<⁄title> <⁄head> <body> <header> <⁄header> <main> ...hier werden die Elemente für den Hauptteil der Webseite hinterlegt. <⁄main> <⁄body> <⁄html>

Die Elemente section & article

Den Inhalt der Webseite mit dem Element section in Abschnitte und dem Element article in Blöcke gliedern.

Definition and Usage laut W3School

The <section> tag defines a section in a document

The <article> tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

Potential sources for the <article> element:

Forum post
Blog post
News story

Note: The <article> element does not render as anything special in a browser. However, you can use CSS to style the <article> element (see example below.

Das Element section unterteilt die Webseite nach dem Inhalt ausgrichtet in Abschnitte. Das Element section darf keine semantischen Elemente enthalten.

Das Element article unterteilt die Webseite nach dem Inhalt oder Funktion ausgrichtet in Blöcke und darf das Abschnittselement section und andere symantische Elemente enthalten.

Das Element hr

hr

Das Element hr erzeugt eine horizontale Linie

Das Element li

li

Item 1
Item 2
Item 3
Item 4

Item 1
Item 2
Item 3
Item 4

Beispiel

Beitrag 1

li

Item 1
Item 2
Item 3
Item 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Google Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Aenean vulputate eleifend Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.

Beitrag 2

li

Liste

Item 1
Item 2
Item 3
Item 4

Beitrag 2

Aenean vulputate eleifend Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,

Eine architektonische Struktur – vermutlich ein Dach – mit etwas Himmel.

Beitrag 3

li

Beitrag 3

Item 1
Item 2
Item 3
Item 4

li content

Aenean vulputate eleifend Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,

Das Element p (paragraph)

p

Das Element p ist für Absätze bei der Textgliederung gedacht. Besonders gut fühlt es sich umrahmt durch die Elemente section und article. Das Element p hat einen Aussenabstand nach unten von 16px (Attribut margin-bottom: 16px).

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.

CSS3 Cascading Style Sheets

CSS in HTML5

Das erste eigene Stylesheet style.css

style.css

Responsive Web Design

Responsive Web Design in HTML5

RWD

Feste Layouts

Flex- Boxen

Flexboxen

Flexbox 1

Flexbox 2

Flexbox 3

Flexbox 4

Flexbox 5

Flexbox 6

Flexbox 7

Content ein-/ ausblenden, hier klicken!

Spielwiese für HTML/ CSS
_{Aus einem Weiterbildungs- Projekt zum Full Stack Web Developer entstanden.}

Vorstellung

Entwicklung und Umsetzung eines Internetauftrittes mittels einer Client-Server-Architektur. Diese Webseite wird jeweils mit purem HTML/ CSS , PHP, Javascript und mit einem selbst erstellten Themes mit WordPress umgesetzt.

Architektur: XAMPP Apache + MariaDB + PHP + Perl
Software(Server): PHP , MySQL , Sass , Less
Software(Client): HTML , CSS/SCSS , JavaScript , jQuery , HTML_DOM , XML
CMS(Frontend/Backend): Wordpress

Thema der Webseite ist die Dokumentation des Lehrinhaltes dieser Weiterbildung.

Lehrbücher zur Weiterbildung:

Vorstellung Lehrbücher

Titel: Einstieg in HTML und CSS
Author: Peter Müller
Verlag: Rheinwerk_Computing
Leseprobe (PDF)
Titel: Responsive Webdesign_{konzepte, Techniken, Praxisbeispiele}
Author: Andrea Ertel, Kai Laborenz
Verlag: Rheinwerk_Computing
Leseprobe (PDF)
Titel: Einstieg in PHP 8 und MySQL
Author: Thoma Theis
Verlag: Rheinwerk_Computing
Leseprobe (PDF)
Titel: Einstieg in JavaScript
Author: Thoma Theis
Verlag: Rheinwerk_Computing
Leseprobe (PDF)
Titel: Wordpress für Entwickler_Chrashkurs
Author: David Remer
Verlag: BoD_{Books on Demand} Leseprobe(Internet)

Kurs-Daten

Kursanbieter

indisoft GmbH
Hauptsitz

Bayerischer Platz 1
10779 Berlin

Tel: 030 236230-0

indisoft GmbH

Stromstraße 3 b
10555 Berlin

Tel: 030 390491-0

Kursdauer

Kursbeginn: 09. Juni 2023
Kursende: 11. Januar 2024

Kursablauf

HTML5 und CSS3
Von Mo., 12.06.23 bis Di., 18.07.23 im Schulungsplan.

Responsive Webdesign mit HTML5 und CSS3
Von Mi., 19.07.23 bis Do., 24.08.23 im Schulungsplan.

Skriptsprachen - JavaScript
Von Fr., 25.08.23 bis Mo., 02.10.23 im Schulungsplan.

JavaScript Development mit jQuery und AJAX
Von Mi., 04.10.23 bis Do., 09.11.233 im Schulungsplan.

Content Management für Programmierer
Von Fr., 10.11.23 bis Mo., 18.12.23 im Schulungsplan.

Optionen für Suchende

Projektrealisierung

Für notwendige Hilfe bei der Planung, Vorbereitung und Umsetzung von Webauftritten einfach mittels des folgenden Kontaktformulares eine Anfrage an mich versenden. Von der Anfrage bis zur Kontaktaufnahme können bis zu 36 Stunden vergehen, mit der Bitte um Geduld. Vielen Dank für das Interesse an meiner hier präsentierten Arbeit. Do it!

So geht es immer los beim Programmieren: Hallo Welt!

Liste

Beitrag 2

Beitrag 3

li content

Spielwiese für HTML/ CSS
_{Aus einem Weiterbildungs- Projekt zum Full Stack Web Developer entstanden.}

Vorstellung

Vorstellung Lehrbücher

Kurs-Daten

Kursanbieter

Kursdauer

Kursablauf

Optionen für Suchende

Projektrealisierung

Kontakt

PHP

Projektvorstellung PHP

WORDPRESS

Projektvorstellung WordPress

JAVASCRIPT

Projektvorstellung JavaScript

WERBUNG I

WERBUNG II

WERBUNG III

WERBUNG IV

WERBUNG V

WERBUNG VI

Spielwiese für HTML/ CSS Aus einem Weiterbildungs- Projekt zum Full Stack Web Developer entstanden.

Vorstellung

Vorstellung Lehrbücher

Kurs-Daten

Kursanbieter

Kursdauer

Kursablauf

Optionen für Suchende

Projektrealisierung

Kontakt

PHP

Projektvorstellung PHP

WORDPRESS

Projektvorstellung WordPress

JAVASCRIPT

Projektvorstellung JavaScript

WERBUNG I

WERBUNG II

WERBUNG III

WERBUNG IV

WERBUNG V

WERBUNG VI

Spielwiese für HTML/ CSS
_{Aus einem Weiterbildungs- Projekt zum Full Stack Web Developer entstanden.}