Tue april 24

HTML / FTP

9 – 12h Teaching

Teacher:

  • Hélène

Goals

  • I know the structure of a basic HTML document and understand the concept of markup languages.
  • I can write HTML Tags.
  • I publish my first Website.

Content

  • HTML basic document structure, Tags
  • Client / Server, FTP
  • Data structure, filenames

HTML – Hypertext Markup Language

INPUT: History, Semantik, Struktur, Versionen & Syntax

  • HTML basics
  • World Wide Web Consortium (W3C)
  • Document Object Model (DOM)
  • DTD

Exercise - First HTML

  1. Create a folder on your desktop named with your full name, but only lowercase letters and dashes ("-") instead of spaces (e.g. hussam-allaham).
  2. Open your HTML Editor (Sublime Text).
  3. Create a new File and save it to your Folder as index.html
  4. Use Emmet to generate the basic HTML structure. (Type: html:5 and tab)
  5. Use HTML element reference to create your first HTML structure.
  6. Use Lorem ipsum as text placeholder.
  7. Create a text structure with at least 6 HTML Tags.

Exemple

URL – Uniform Resource Locator

URL - Anatomy

FILE NAMES

FTP – File Transfer Protocol

  • Client and Server

Exercise - Upload your first Site

  1. Open Filezilla
  2. Configure a new Site "Powercoders 003"
    1. Host: ftp.powercoders.org
    2. Username: powercoders003@powercoders.org
    3. Password: [we'll share the password with you in the classroom]
  3. Connect to the Powercoders 003 site
    1. Navigate to your local project folder in the left file system view
    2. Navigate to your your-name folder on the webserver in the right file system view
  4. Upload your folder to the root directory ("/") of your-name folder on the webserver
  5. Check out if it worked:

http://003.powercoders.org/[your-name]/index.html

12 – 13.30h Lunch (Catering @IHL)

13.30 – 17h Coaching

Coaches:

  • Jonathan
  • Lionel
  • Hussam

Goals

  • You have created your first website and uploaded it to the webserver.

Exercises

HTML Training 1

  • Choose a Wikipedia page of your choice. Ex. This page
  • Use the content of this page (Titles, text, list, images) to create a new index.html page
  • Feel free to select the content and information and reorganize it
  • Use at least 15 elements
  • Upload it to the webserver


HTML Training 2

  • From your index.html with Wikipedia content.
  • Find a way (use the internet!) to add an external CSS file
  • Add CSS instructions (Ex. width, height, color, margin, padding) to elements
  • Use class="" & id=""


HTML Training 3 - Personnal project

  • Choose a website inside this list: http://favoris.ch/ (Very bad design)
  • Start to imagine a new Wireframe layout and Webdesign
  • Work with paper to draw your wireframe
  • Imagine more than one possibility

Webdesign and Wireframe References