Thu Sep. 28

Hyperlinks / Lists

9 – 12h Teaching

Teacher:

  • Monorom

Goals

  • I understand the semantic meaning of HTML lists. I use lists in my HTML Template.
  • I understand the concept of hyperlinks. I can build a HTML structure.
  • I work mobile first.

Content

  • List
  • Viewport Meta-Tag
  • Links (external, local, anchor, e-mail, block-element)

RECAP – 26.09. HTML & FTP

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

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.

Viewport Meta-Tag – We work mobile first

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Mobile first

mediaqueri.es

Exercise – Portfolio #1– Navigation

  1. Create a subfolder in your website folder, name it portfolio.
  2. The first file must be index.html
  3. Don't forget the Viewport Meta-Tag. It's part of the basic structure,
  4. Now create the basic HTML structure for the index.html (header, footer, main, nav etc.)
  5. Use default content and HTML elements to structure the text.

solution | solution.zip

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>

Exercise – Portfolio #2 – subpages

Create Subpages for your Portfolio

  1. Create a folder for each sub-page. (About / Projects / Contact). Each folder contains an index.html.
  2. Add the navigation links in all index.html pages.
  3. Change some content on each page.
  4. Upload all files to the webserver.
  5. Test it in your browser.

solution | solution.zip

Anchor Links

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

Block-element links

<a href="xyz.html">
       <h1>Nice</h1>
       <p>Lore ipsum</p>
</a>

Links inside Block-element links

 <a href="xyz.html">
       <h1>Nice</h1>
       <p><object><a href="#">Lore ipsum</a></object></p>
</a>

Your HTML must be valid

Please use Markup Validation Service to make you HTML valid.

12 – 13.30h Lunch (Restaurant Paprika)

13.30 – 16h Coaching

Coaches:

  • Hussam
  • Matthias

Goals

  • The basic portfolio structure is on the webserver.

Exercises

  • Finish the basic portfolio template.
  • Keep on working with freeCodeCamp or codecademy.
  • Find content for the portfolio.
  • Prepare an image for the about section.
  • Update your FileZilla settings

Filezilla Settings Update

We will configure FileZilla further so you don't overwrite the main index.html file anymore.

  1. Open FileZilla: open menu "File > Site Manager"
    1. Select your site (Powercoders 002)
  2. Select the Advanced tab
    1. Select your project folder on the Desktop as your Default local directory
    2. Define /students/[your-name] as your Default remote directory
    3. Check Use synchronized browsing checkbox
    4. Check Directory comparison checkbox
  3. Select the Transfer Settings tab
    1. Check Limit number of simultaneous connections checkbox
    2. Make sure that the maximum number of connections is 1
  4. Press OK to save your settings!

IN valid Code we trust

Please use Markup Validation Service to make you HTML valid.

16 – 18h Community Meet-Up

Community Meetup

Everybody who is interested to get to know our Powercoders is invited to join!