Web Development Presentation
Parent: fa01a452 | Patch | Commit | ignore whitespace
Sascha Schulz
2023-01-19 9c34f5aca697a50daa148e34d5f4699e0b943c25 
finish HTML section and start CSS section
1 Dateien geändert
6 Dateien hinzugefügt
206 ■■■■■ Geänderte Dateien
assets/html/alternative-css.html 12 ●●●●● Patch | Ansicht | Raw | Blame | Historie
assets/html/dark.css 5 ●●●●● Patch | Ansicht | Raw | Blame | Historie
assets/html/main.css 5 ●●●●● Patch | Ansicht | Raw | Blame | Historie
assets/html/simple.html 23 ●●●●● Patch | Ansicht | Raw | Blame | Historie
assets/html/simple2.html 23 ●●●●● Patch | Ansicht | Raw | Blame | Historie
assets/images/css-sucks.png Patch | Ansicht | Raw | Blame | Historie
index.html 138 ●●●●● Patch | Ansicht | Raw | Blame | Historie 
 assets/html/alternative-css.html


Neue Datei


@@ -0,0 +1,12 @@


<!DOCTYPE html>



<html lang="en">



    <head>



        <meta charset="UTF-8">



        <title>Alternative Css</title>



        <link href="main.css" rel="stylesheet" title="default">



        <link href="dark.css" rel="alternate stylesheet" title="dark">



    </head>



    <body>



        <p>Dies ist ein Text</p>



    </body>



</html>





 assets/html/dark.css


Neue Datei


@@ -0,0 +1,5 @@


html {



    font-size: 40px;



    color: white;



    background-color: darkslategrey;



}





 assets/html/main.css


Neue Datei


@@ -0,0 +1,5 @@


html {



    font-size: 40px;



    color: black;



    background-color: lightgray;



}





 assets/html/simple.html


Neue Datei


@@ -0,0 +1,23 @@


<!DOCTYPE html>



<html lang="en">



    <head>



        <meta charset="UTF-8">



        <title>Title</title>



        <style>



            html {



                color: white;



            }







            a {



                color: lightblue;



            }



        </style>



    </head>



    <body>



        <h1>Lorem Ipsum</h1>



        <div>



            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>



            <a href="/assets/html/simple2.html">Weitere Infos</a>



        </div>



    </body>



</html>





 assets/html/simple2.html


Neue Datei


@@ -0,0 +1,23 @@


<!DOCTYPE html>



<html lang="en">



    <head>



        <meta charset="UTF-8">



        <title>Title</title>



        <style>



            html {



                color: white;



            }







            a {



                color: lightblue;



            }



        </style>



    </head>



    <body>



        <h1>Li Europan lingues</h1>



        <div>



            <p>Li Europan lingues es membres del sam familie.</p>



            <a href="/assets/html/simple.html">Zurück</a>



        </div>



    </body>



</html>





 assets/images/css-sucks.png




 index.html


@@ -90,9 +90,11 @@


                    </section>


                    <section>


                        <ul>


                            <li>HyperText Markup Language</li>


                            <li>Erste Version 1993 von Tim Berners-Lee</li>


                            <li>Dokumentationsmedium</li>


                            <li>Ursprünglich rein akademische Verwendung</li>


                            <li>Verlinkungen der Dokumente macht sie "hyper"</li>


                        </ul>


                    </section>


                    <section>


@@ -129,30 +131,21 @@


                        </pre>


                    </section>


                    <section>


                        <h3>Grundgerüst</h3>


                        <pre>


                            <code data-trim data-line-numbers>


                                <script type="text/template">


                                    <div>Inhalt</div>


                                </script>


                            </code>


                        </pre>


                    </section>


                    <section>


                        <h3>Beispiel</h3>


                        <pre>


                            <code data-trim data-line-numbers>


                                <script type="text/template">


                                    <!DOCTYPE html>


                                    <html lang="de">


                                    <html lang="en">


                                        <head>


                                            <meta charset="UTF-8">


                                            <title>Title</title>


                                        </head>


                                        <body>


                                            <h1>Überschrift</h1>


                                            <h1>Lorem Ipsum</h1>


                                            <div>


                                                <p>Dies ist ein Paragraph</p>


                                                <p>Dies ist noch ein Paragraph mit einem längeren Text</p>


                                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>


                                                <a href="/assets/html/simple2.html">Weitere Infos</a>


                                            </div>


                                        </body>


                                    </html>


@@ -162,13 +155,118 @@


                    </section>


                    <section>


                        <h3>Beispiel</h3>


                        <iframe data-src="/assets/html/simple.html"></iframe>


                    </section>


                    <section>


                        <h3>Aufbau eines Elements</h3>


                        <pre>


                            <code>


                                <h1>Überschrift</h1>


                                <div>


                                    <p>Dies ist ein Paragraph</p>


                                    <p>Dies ist noch ein Paragraph mit einem längeren Text</p>


                                </div>


                            <code data-trim data-line-numbers>


                                <script type="text/template">


                                    <span id="my-id" class="super important">Inhalt</span>


                                </script>


                            </code>


                        </pre>


                        <pre>


                            <code data-trim data-line-numbers>


                                <script type="text/template">


                                    <input id="input" class="super important" disabled="disabled"/>


                                    <input id="input2" class="super important" disabled>


                                </script>


                            </code>


                        </pre>


                    </section>


                </section>


                <section>


                    <section>


                        <h2>CSS</h2>


                    </section>


                    <section>


                        <ul>


                            <li>Cascading Style Sheet</li>


                            <li>Nach größerer Verbreitung von HTML</li>


                            <li>Webseiten ansprechend gestalten</li>


                        </ul>


                    </section>


                    <section>


                        <img data-src="/assets/images/css-sucks.png">


                    </section>


                    <section>


                        <h3>Beispiel</h3>


                        <pre>


                            <code data-trim data-line-numbers>


                                <script type="text/template">


                                    selector [, selector, selector, ...] {


                                        property: value;


                                    }


                                </script>


                            </code>


                        </pre>


                    </section>


                    <section>


                        <h3>Beispiel</h3>


                        <pre>


                            <code data-trim data-line-numbers>


                                <script type="text/template">


                                    html {


                                        background-color: red;


                                        font-size: 30px;


                                    }


                                </script>


                            </code>


                        </pre>


                    </section>


                    <section>


                        <h3>Beispiel</h3>


                        <pre>


                            <code data-trim data-line-numbers>


                                <script type="text/template">


                                    <html lang="en">


                                        <head>


                                            ...


                                            <style>


                                                html {


                                                    background-color: red;


                                                    font-size: 30px;


                                                }


                                            </style>


                                        </head>


                                        <body>


                                            ...


                                        </body>


                                    </html>


                                </script>


                            </code>


                        </pre>


                    </section>


                    <section>


                        <h3>Beispielhafte CSS-Eigenschaften</h3>


                        <ul>


                            <li>background-color: red</li>


                            <li>font-family: Georgia, serif, Arial</li>


                            <li>text-decoration: line-through underline</li>


                        </ul>


                    </section>


                    <section>


                        <h3>Selektoren</h3>


                        <ul>


                            <li>Umfangreiche Element-Selektoren zur Anwendung der Styles</li>


                            <li>Kinder, Enkel...</li>


                            <li>Geschwister, direkte Nachfolger</li>


                            <li>Attribute</li>


                            <li>Pseudoklassen</li>


                        </ul>


                    </section>


                    <section>


                        <h3>Selektoren</h3>


                        <pre>


                            <code data-trim data-line-numbers>


                                <script type="text/template">


                                    #my-id // Id


                                    html, body // Mehrfachselektion


                                    div > p // p die direkt unterhalb eines div sind


                                    a:visited // besuchte Links


                                    span.important // span mit der Klasse "important"


                                </script>


                            </code>


                        </pre>


                    </section>