First

Web front-end

ROSEdu CDL 2011-fall

Plan

Markup: HTML

HTML

Markup: elemente inline

HTML

Elemente inline: a, strong, em, img, span.

Ana are <em>mere!</em>

Ana are mere!

Salut <img src="smiley.png" alt=":)">

Salut :)

Scrie pe <a href="http://www.wikipedia.org/"
  >Wikipedia</a>, trebuie să fie adevărat.

Scrie pe Wikipedia, trebuie să fie adevărat.

Markup: elemente block-level

HTML

Elemente block-level: p, ul, li, table, div.

<ul>
  <li>unu</li>
  <li>doi</li>
</ul>
  • unu
  • doi
 
<table>
  <tr>
    <td>a</td> <td>b</td>
  </tr>
  <tr>
    <td>c</td> <td>d</td>
  </tr>
</table>
ab
cd

Markup: exemplu de document

HTML – Document complet

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Exemplu CDL: Tenis</title>
    <link rel="stylesheet" url="style.css">
  </head>

  <body>
    <h1>Tenis</h1>
    <p>Jucători <em>de top</em></p>
    <ul>
      <li>Novak Djokovic</li>
      <li>Rafael Nadal</li>
      <li>Andy Murray</li>
      <li>Roger Federer</li>
    </ul>
  </body>
</html>

Design vizual: CSS

CSS

  
  div.menu a {
      color: red;
      text-decoration: italic;
  }

Design vizual: document simplu

CSS

Clasament

  • Novak Djokovic
  • Rafael Nadal
  • Andy Murray
  
<h3>Clasament</h3>
<ul><li class="first">Novak Djokovic</li>
    <li>Rafael Nadal</li>
    <li>Andy Murray</li></ul>

Design vizual: document cu stil

CSS

Clasament

  • Novak Djokovic
  • Rafael Nadal
  • Andy Murray
  
<h3>Clasament</h3>
<ul><li class="first">Novak Djokovic</li>
    <li>Rafael Nadal</li>
    <li>Andy Murray</li></ul>

h3 { text-decoration: underline; }
ul li { list-style: lower-roman; }
li.first { color: red; }

Interacțiune: JavaScript

JavaScript

Standarde

Standarde - Evoluție

Rich content

Standarde

Standarde - Evoluție

Încărcare de conținut

Standarde

Standarde

Plan

Take-aways

Links

Link-uri

Colorful shiny stuff

Ce e posibil cu web front-end

Last

Mulțumesc!