Wed april 25

HTML5

9 – 12h Teaching

Teacher:

  • Hélène

Goals

  • I can build a HTML structure
  • I understand the elements of HTML
  • I know how to use lists in my HTML page
  • I understand the concept of hyperlinks.

Content

  • HTML elements
  • List
  • Links (external, local, anchor, e-mail)

RECAP – 24.04 HTML & FTP

  1. HTML Syntax
  2. FTP
  3. Q&A

HTML Block-level & Inline Elements


HTML4 vs HTML5

HTML lists

Lists are used to group related pieces of information. Lists are frequently used for navigation as well as general content. For semantic correctness, HTML has the ability to express lists of things, and it helps the Google robot and most important it helps screen readers.

Exercise – Portfolio #1– Navigation

  1. Create a subfolder in your website folder in the server, name it portfolio.
  2. The first file must be index.html
  3. Now create the basic HTML structure for the index.html (header, footer, nav, main, etc.)
  4. Use default content and HTML elements to structure the text.

HTML Links - Hyperlinks

You can click on a link and jump to another document, image or site. A link can be an image or any other HTML element, it does not have to be text.

Hyperlink Syntax <a>

<a href="url">link text</a>

external links

<a href="http://powercoders.org/">Impacting lives by teaching to code</a>

local Links

<a href="portfolio.html">Portfolio</a>
<a href="portfolio/index.html">Portfolio</a>
<a href="../index.html">Portfolio</a>

target

Does it make sense to open a new window?

<a href="portfolio/index.html" target="_blank">Portfolio</a>

Anchor Links

"Normal" links always point to the top of a page. Anchors point to a place within a page. html anchor link

"Normal" links

<a href="project.html">
       <h1>My beautiful project</h1>
       <p>the description of my project</p>
</a>

Anchor links

<a href="#project">
       <h1>Link to my beautiful project</h1>
</a> 
<a id="project">
       <h1>My beautiful project</h1>
</a>

Exercise #2 – subpages

Create Subpages for your Portfolio

  1. Create a HTML file for each sub-page. (About / Projects / Contact).
  2. Add the navigation links in index.html page
  3. Change some content on each sub-page
  4. Test it in your browser.

Your HTML must be valid

Please use Markup Validation Service to make you HTML valid.

13h – 14.30h Lunch (Sexy Pasta @Impact Hub)

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

14.30 – 16h

  • Hélène


Social activity

  • Ice cream at Ouchy (near the lake in Lausanne)

Reminder: Speak in English with everybody ;)