HTML Intermediate

Tables

<table>
    <!-- Content -->
</table>    

Filas

<table>    
    <tr>
        <!-- contenido de la fila -->
    </tr>
    .
    .    
    .
</table>

Celdas

<table>    
    <tr>
        <td> Contenido </td>
    </tr>
    .
    .    
    .
</table>

Example 1

One row and three columns

Example 2

Two rows and three columns

border attribute

Example 3

Header cell

Example 4

thead and tbody.

semantic ?

cellpadding and cellspacing attribute

Exercise 1

Cartelera de vuelos

Exercise 2

Pokedex

Forms

<form action="url" method="get">
    <!-- Content -->
</form>

Input

<form action="url" method="get">
    <input type="text">
</form>
<!-- Example 5 -->

Login  Form

labels, submit

Placeholder

Input Type

example 8

Validaciones

Required

How to validate 

the min and max length in a input?

Semántica

Etiquetas HTML 5

Secciones

Etiquetas HTML 5

<section></section>
<nav></nav>
<article></article>
<aside></aside>
<header></header>
<footer></footer>
<main></main>

Contenido

Etiquetas HTML 5

<figure></figure>
<figcaption></figcaption>

Texto

Etiquetas HTML 5

<data></data>
<time></time>
<mark></mark>
<wbr>

Contenido incrustado

Etiquetas HTML 5

<embed></embed>
<video></video>
<audio></audio>
<source></source>
<canvas></canvas>
<svg></svg>

Open Graph protocol

<html xmlns:og="http://ogp.me/ns#">
<head>
	<title>The Rock (1996)</title>
	<meta property="og:title" 
          	content="Cheat Sheet" />
	<meta property="og:type" 
          	content="website" />
	<meta property="og:url" 
          	content="https://htmlcheatsheet.com/" />
	<meta property="og:image" 
          content="https://htmlcheatsheet.com/demo.jpg" />
 	...
</head>

03 [PW] [Clase] HTML Intermediate

By Néstor Aldana

03 [PW] [Clase] HTML Intermediate

Uso de tablas y formularios con diferentes elementos de entrada

  • 558