Embedded Files
9 – 12h Teaching
Teacher:
- Hélène
Goals
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
Content
- HTML basic document structure, Tags
- Client / Server, FTP
- Data structure, filenames
HTML – Hypertext Markup Language
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
Exercise - First HTML
- Create a folder on your desktop named with your full name, but only lowercase letters and dashes ("-") instead of spaces (e.g.
hussam-allaham). - Open your HTML Editor (Sublime Text).
- Create a new File and save it to your Folder as
index.html - Use Emmet to generate the basic HTML structure. (Type: html:5 and tab)
- Use HTML element reference to create your first HTML structure.
- Use Lorem ipsum as text placeholder.
- Create a text structure with at least 6 HTML Tags.
HTML Attribute
HTML Attribute
URL – Uniform Resource Locator
URL – Uniform Resource Locator
URL - Anatomy
- SEO Cheat Sheet: Anatomy of A URL
- Keep a simple URL structure
FILE NAMES
FTP – File Transfer Protocol
FTP – File Transfer Protocol
- Client and Server
Exercise - Upload your first Site
Exercise - Upload your first Site
- Open Filezilla
- Configure a new Site "Powercoders 003"
- Host:
ftp.powercoders.org - Username:
powercoders003@powercoders.org - Password: [we'll share the password with you in the classroom]
- Host:
- Connect to the Powercoders 003 site
- Navigate to your local project folder in the left file system view
- Navigate to your
your-namefolder on the webserver in the right file system view
- Upload your folder to the root directory ("/") of
your-namefolder on the webserver - Check out if it worked:
12 – 13.30h Lunch (Catering @IHL)
13.30 – 17h Coaching
Coaches:
- Jonathan
- Lionel
- Hussam
Goals
Goals
- You have created your first website and uploaded it to the webserver.
Exercises
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
Report abuse