log inhelp

 | 

  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Webpage in HTML5

Page history last edited by Perino 5 years, 11 months ago

Webseitengestaltung mit HTML5 Studienwoche Juli 2017

 

Wochenplan.xlsx

 

Schnell-Navigation: S1 S2 S3 S4 S5

 

 

Last Session: Projekt mittels ftp-client aufs Internet laden

 

 

1 Link "Kursseite" auf der Hauptseite des Projekts ergänzen / Projektordner genau so bezeichnen wie auf Webseite www.ksm-17.net  geschrieben / 

 

Alles ausser Projektseiten, Bilder, Medien aus dem Ordner entfernen:

 

2 Filezilla ftp-client bei uns vorhanden (herunterladen: https://filezilla-project.org/)

 

3 Filezilla starten und folgende Eingaben machen.

 

 

(siehe Projektion)

 

4 Unsere URL: ksm-17.net ---> in Browser eingeben und Deine Seite kontrollieren.  

 

ganz nach oben   

 

Session 4: 

 

Projekt erstellen

 

Projekt im Grundgerüst erstellen: Hauptseite plus mindestens 3 Unterseiten erstellen.
Navigation zwischen index Seite und Unterseiten erstellen. 
Die Seiten mit Inhalt zum Thema füllen: 

 

- Minimal Requirements: Text, Bilder, Links, Sound, Video, Tabellen oder "div" 
oder Listen (siehe: http://www.w3schools.com/html/html_lists.asp)

 

Tutorials und Links unter Sessions 1-3" als Hilfe für Code verwenden.

 

Mögliche "Goodies": Counters: http://www.freecounterstat.com/step_1.php / aktuelles Datum: https://wiki.selfhtml.org/wiki/HTML/Skripte/script

  

ganz nach oben

   

Nicht vergessen:

   

Im "head":   

<!DOCTYPE html>   

 

<html>   

<head>

   

<meta charset='utf-8'>   

 

<style type="text/css">   

 

body

 {  

margin-left:10px;
}

</style>

 

 

 

<title> Dein Titel </title>

 

</head>

 

Im "body":

 

<body>

 

<!-- This webpage displays in standards mode -->

 

 

Dein Inhalt!

 

</body>

 

 

</html>

 

 

ganz nach oben 

 

Session 3: Navigation zwischen den einzelnen Seiten: Model page see:

 

Voraussetzung: Thema "Links": https://www.w3schools.com/css/css_link.asp

 

Springen INNERHALB der Seite: https://www.w3schools.com/tags/att_global_id.asp  ---> scroll down to "More Examples / Example 1 / 

Use the id attribute to link to an element with a specified id within a page:

 

Example:

<h2><a id="top">Some heading</a></h2>  // Ziel!

<p>Lots of text....</p>
<p>Lots of text....</p>
<p>Lots of text....</p>

<a href="#top">Go to top</a> // Link!

 

 

1     Mit "nav" div + "id"-tag: 

          http://ksm-17.net/ (open in firefox --->Anzeigen--->Seitenquellentext: lesen, verstehen, anwenden)

 

 

 

2     (Alternative mit "Floating Menu": http://www.ictkfr2015.net/index1.html (Quelltext anschauen, studieren,

           imitieren: "learn how to steal..."))

  

Modellseiten: http://perino.org/ICT/Perino/   

   

http://www.perino.org/ Quelltext.jpg/Perino/Bilder/ 

 

    

 

CSS Style, für alle möglichen Konfigurationen der verschiedenen Elemente einer Web Seite:

 

http://www.w3schools.com/css/css_examples.asp

 

 

ganz nach oben

 

 

Session 2: Webseite mit Tabelle, Bild (√), Ton und Links (√) in HTML5 / CSS erstellen, Rahmen (von "divs" und Tabellen) Eigenschaften ausprobieren

 

CSS allgemein: https://www.w3schools.com/css/default.asp 

 

1. Tabellen: siehe hier: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables2

 

 

(Für "gestylte" Tabellen mit Farbe und abgerundeten Ecken siehe Handout und Beispielseite "Tagebuch": http://homepage.swissonline.ch/pattyfit/NewZealand/tagebuch.html)

 

 

Erklärungen zu "border" Eigenschaften: http://www.css4you.de/borderproperty.html / Runde Ecken: http://www.w3schools.com/cssref/css3_pr_border-radius.asp

  

Einbinden von Audio und Video mit HTML 5 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all 

 

<audio controls>
<source src="sound/yourmusic.mp3" type="audio/mpeg">
</audio>

 

Video: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all

Video autoplay: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_autoplay

 

 

Einbinden von Video: http://www.w3schools.com/html/html5_video.asp (Wie beim sound muss das video file vorhanden sein und mit dem richigen "Pfad" beschrieben sein)

   

ganz nach oben

 

   

3. Arbeiten mit dem "div" tag (Blöcke / Absätze kreieren): https://www.w3schools.com/html/tryit.asp?filename=tryhtml_div_capitals 

 

Das Blatt "Example_Styles" findet Ihr hier: http://www.ictkfr2015.net/example_styles.html    

 

ausprobieren, kopieren, abändern... monkey see, monkey do heisst das auf Englisch smile

 

 

Webseite mit Header, Navigation, Text (section) und Footer:

 

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float 

 

Formen:

circle: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_svg_circle

Viereck: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_svg_rect / https://www.w3schools.com/html/tryit.asp?filename=tryhtml_svg_rect_round

Stern: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_svg_star

Logo: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_svg_logo 

 

ganz nach oben

 

 

Session 1: Einführung in HTML5 / CSS

 

Layout options: https://www.w3schools.com/html/html_layout.asp 

 

Wochenplan.xlsx

 

Benötigte Programme: Text Editor (Notepad++)  und Browser (Explorer, Safari, Firefox, Chrom, etc.)

 

Ordnerstruktur für eine Internet SITE:

 

   

 

struktur.PNG 

 

HTML Tutorial:

 

Grund-Aufbau einer Webseite: http://www.w3schools.com/html/default.asp

 

HTML Basics: https://www.w3schools.com/html/html_examples.asp 

 

 

<!--   Dokumenttyp, Schriftsatz:   -->

 

<!DOCTYPE html> 

 

<html>

 

<!--  Im "head":   -->


 

<head>

 

<meta charset='utf-8'>

 

<style type="text/css">

 

body

 

{


margin-left:10px;

}

 

</style>

 

<title> Dein Titel </title>

 

</head>

 

 

<!--   Im "body":  -->

 

<body>

 

<!-- This webpage displays in standards mode -->

 

Dein Inhalt!

 

</body>

 

</html>

   

ganz nach oben

   

 

Erste Elemente HTML5: http://www.w3schools.com/html/html_basic.asp

 

Weitere Elemente einer HTML5 Seite ausprobieren (HTML CSS, scroll down a bit): http://www.w3schools.com/html/html_examples.asp

 

Farbcodes: http://www.quackit.com/css/css_color_codes.cfm

 

 

 

Sonderzeichen: http://wiki.selfhtml.org/wiki/Referenz:HTML/Zeichenreferenz

 

 

 

CSS Syntax: http://www.w3schools.com/css/css_syntax.asp

 

 

 

CSS Elemente im "HEAD" ausprobieren: http://www.w3schools.com/css/default.asp

 

 

 

Vergleich CSS im "HEAD" oder im "BODY": http://www.w3schools.com/html/html_css.asp

 

 

 

Inline (=nur ein Element im BODY):

 

 

 

<h1 style="color:blue;">This is a Blue Heading</h1>

 

 

 

Internal (Definition im HEAD ---> für ALLE "h1" in diesem Dokument):

 

<style type="text/css"> 

h1 

{ 

color:blue; 

} 

</style>

  

HTML5 Tags für Style INNERHALB DES "BODY" TAGS ergänzen, also nur für ein bestimmtes Element der Seite, nicht für alle, hier ausprobieren: http://www.quackit.com/css/tutorial/css_font.cfm

 

Masseinheiten in CSS: http://de.selfhtml.org/css/formate/wertzuweisung.htm

  

ganz nach oben

 

   

Comments (0)

You don't have permission to comment on this page.

Printable version