Web Applications

Lab 02

special thanks to Jan Michelfeit & Martin Kruliš

Agenda

  • Assignments
  • Valid HTML
  • Forms
  • Semantic structuring
  • CSS introduction

Assignments

ReCodex

Exercise 1

Create a simple HTML page

Create a simple HTML page

Create a simple HTML page

Common HTML tags

  • <html>, <head>, <body>, <title>, <script>, <style>
  • <article>, <section>, <header>, <footer>, <nav>, <h1>, <h2>, …
  • <p>, <li>, <ul>, <ol>, <div>
  • <a>, <span>, <br>, <em>, <strong>, <u>, <sub>, <sup>
  • <table>, <tr>, <td>, <th>
  • <img>
  • <form>, <input>, <textarea>, <select>, <option>, <button>

Exercise 2

Validate HTML

Validate HTML

Shortest valid HTML document

  • Find the shortest valid HTML5 document
  • Use online HTML5 validator (select "Direct input" tab)

Common syntax pitfalls

  • Correctly nesting opening/closing tags
  • Some tags are optional, e.g. <p> is implicitly closed by <ul>
    • Is <p>ab <ul><li>cd</li></ul> ef</p> valid?
    • What is the corresponding DOM tree?
    • Tip: you can use a tool like Codepen for quick experimentation
  • Some tags must not have end tag (e.g. <img>)
  • Attribute alt is required for <img>

Hyperlink tips

  • Use relative links whenever possible
    • e.g. your web-application should work at different locations
  • Give links good description

Exercise 4

Simple HTML Form

Simple HTML Form

  • Create a new HTML page called form.html
  • The page must contain a form with an input for the user's name and a visible submit button
  • The element for name must be named full_name
  • The form must be submitted to address
    https://webik.ms.mff.cuni.cz/labs/documents/02-handle-form.php
  • Use the GET method

Exercise 5

HTML Form

GET vs. POST

  • Copy form.html to form-post.html and edit the copy
  • Add more input elements asking the user for:
    • Name
    • Email
    • Age
    • Address (as textarea)
    • Sex (choice of "male" and "female")
  • Form elements

GET vs. POST

  • Open, fill in, and submit the form; examine the output and HTTP request and content-type
  • Change the method to POST and examine again
  • What happens if you refresh the form?
  • Submit data to https://www.zen.nz/dev/httpdump

Validation with HTML5 Forms

  • Add validation to the elements using HTML5:
    • Make name a required value
    • Ensure name contains first name and surname separated with space
    • Ensure email address is valid
    • Ensure age is a number between 0 and 200
  • Dive into HTML Form

Structuring documents in HTML5

Why?

The old way The old way The old way

Structuring documents in HTML5

  • Outline
    • MSDN, Outliner, Dive into HTML5
    • Explicit sectioning elements - <body>, <section>, <article>, <aside> and <nav>
    • Elements <header> and <footer> do not create sections
    • Sectioning root elements (have its own outline but do not contribute to ancestor)
      <body> <blockquote>, <figure>, <details>, <fieldset>, and <td>

What Are CSS Good for?

  • Look at this presentation without CSS
  • Example of changing design completely CSS Zen Garden

How can you insert CSS to a web page?

<link rel="stylesheet" href="style.css"type="text/css">
<style type="text/css"> a { color: red; } </style>
<a href="#" style="color:red;">

Selector Specificity

Consider the following selectors:

  • li.sidebar a.external
  • div#navigation a[href^="http"]:hover

What is their specificity? Which one is more specific?

Common CSS Pitfalls - Alignment

  • text-align - alignment of inline content inside a block element
  • vertical-align - alignment of an inline or table-cell box
  • Use margin: auto; to center block elements
  • Vertical alignment is more complicated
    • margin:auto means 0px margin vertically

Common CSS Pitfalls - Space Collapsing

  • Margin between adjacent boxes can be collapsed:

    This paragraph has bottom margin 25px

    This paragraph has top margin 25px

    Yet the space between us is only 25px instead of 50px

    More info here and here.

  • Use border-collapse to avoid space between table cells:
    border-collapse: separate (default)

    border-collapse collapse

Common CSS Pitfalls - Miscellaneous

  • Syntax errors - missing semicolons, space between number end unit (e.g., 1 px vs. 1px)
  • Do not set width directly on <body>
  • Rules are somewhat complex and irregular
    • width/height doesn't apply to non-replaced inline elements (replaced elements are e.g. <img>, <input>, <textarea>, etc.)
    • inheritance for hyperlinks
    • lengths sometimes can, sometimes cannot be negative

Shorthand properties

  • Border can be controlled by several CSS properties, e.g.:
    • border-width: 1px;
    • border-style: solid;
    • border-color: black;
  • border can be used as shorthand:
    • border: 1px solid black;

Shorthand properties

  • A box has 4 borders; e.g., width can be controlled with
    • border-bottom-width: 3px;
    • border-left-width: 4px;
    • …
  • border-width can be used as shorthand:
    • border-width: 1px 2px 3px 4px;

Shorthand properties

What do these mean?


border-width: 1px;
border-width: 1px 2px;
border-width: 1px 2px 3px 4px;

Resources

Exercise 6

CSS Selectors

CSS Selectors

The end…

Questions?

Feedback