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

• HTML Block and Inline Elements

HTML4 vs HTML5

• Migration from HTML4 to 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.

• List syntax

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?

• target Attribute

<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> 

Social activity

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

Reminder: Speak in English with everybody ;)