DEV Community

Cover image for Apuntes de HTML y HTML5 Básico (FreeCodeCamp/Diseño Web Responsivo)
Nestor Plasencia
Nestor Plasencia

Posted on • Updated on

Apuntes de HTML y HTML5 Básico (FreeCodeCamp/Diseño Web Responsivo)

freeCodeCamp.org/responsive-web-design/#basic-html-and-html5

Etiquetas Básicas

Di hola a los elementos HTML

<h1>Hello</h1>
Enter fullscreen mode Exit fullscreen mode

Título con el elemento h2

<h2>CatPhotoApp</h2>
Enter fullscreen mode Exit fullscreen mode

Informa con el elemento párrafo

<p>I'm a p tag!</p>
Enter fullscreen mode Exit fullscreen mode

Rellena el espacio en blanco con texto provisional

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your
Enter fullscreen mode Exit fullscreen mode

Descomenta código HTML

<!-- some_coment -->
Enter fullscreen mode Exit fullscreen mode

Comenta HTML

<!-- some_coment -->
Enter fullscreen mode Exit fullscreen mode

Elimina elementos HTML

Introducción a los elementos HTML5

<main>
    <h1>Hello World</h1>
    <p>Hello Paragraph</p>
</main>
Enter fullscreen mode Exit fullscreen mode

mainheaderfooternavvideoarticlesection

Agrega imágenes a tu sitio web

<img src="..">
Enter fullscreen mode Exit fullscreen mode

Enlaza hacia páginas externas con los elementos anchor

<a href=" ... ">link</a>
<a href=" ... " target="_blank">link</a>
Enter fullscreen mode Exit fullscreen mode

Enlaza hacia secciones internas de una página con los elementos anchor

<a href="#..id">link</a>
Enter fullscreen mode Exit fullscreen mode

Anida un elemento anchor dentro de un párrafo

<p>...<a href=" ... ">link</a> ...</p>
Enter fullscreen mode Exit fullscreen mode

Crea enlaces muertos utilizando el símbolo hash

<a href="#"></a>
Enter fullscreen mode Exit fullscreen mode

Convierte una imagen en un enlace

<a href="..."><img src=".."></a>
Enter fullscreen mode Exit fullscreen mode

Crea una lista no ordenada

<ul>
    <li>Garfield</li>
    <li>Sylvester</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Crea una lista ordenada

<ol>
    <li>Garfield</li>
    <li>Sylvester</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

Declara el Doctype de un documento HTML

<!DOCTYPE html>
<html>

</html>
Enter fullscreen mode Exit fullscreen mode

Define el encabezado y el cuerpo de un Documento HTML

<!DOCTYPE html>
<html>
    <head>
        <meta />
    </head>
    <body>
        <div>
        </div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Anida muchos elementos dentro de un solo elemento div

<div>
    <p>Things cats love:</p>
    <ul>
        <li>cat nip</li>
        <li>laser pointers</li>
        <li>lasagna</li>
    </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

Formularios

Crea un campo de texto

<input type="text">
Enter fullscreen mode Exit fullscreen mode

Agrega texto provisional a un campo de texto

<input type="text" placeholder="some_placeholder">
Enter fullscreen mode Exit fullscreen mode

Crea un elemento de formulario

<form action="/some_url">
    <input type="text">
</form>
Enter fullscreen mode Exit fullscreen mode

Agrega un botón de envío a un formulario

<button type="submit">some_buton_text</button>
Enter fullscreen mode Exit fullscreen mode

Usa HTML5 para requerir un campo

<input type="text" required>
Enter fullscreen mode Exit fullscreen mode

Crea un conjunto de botones de radio

<label for="input_id_1">    
    <input id="input_id_1" type="radio" name="input_name">some_text_1
</label>
<label for="input_id_2">    
    <input id="input_id_2" type="radio" name="input_name">some_text_2
</label>
Enter fullscreen mode Exit fullscreen mode

Crea un conjunto de casillas de verificación

<label for="input_id_1">    
    <input id="input_id_1" type="checkbox" name="input_name">some_text_1
</label>
<label for="input_id_2">      
    <input id="input_id_2" type="checkbox" name="input_name">some_text_2
</label>
Enter fullscreen mode Exit fullscreen mode

Equivale a

<label for="input_id_1"></label>
<input id="input_id_1" type="checkbox" name="input_name">some_text_1
<label for="input_id_2"></label>
<input id="input_id_2" type="checkbox" name="input_name">some_text_2
Enter fullscreen mode Exit fullscreen mode

Usa el atributo value con botones de radio y casillas de verificación

<label for="input_id_1"></label>
<input id="input_id_1" type="checkbox" name="input_name" value="value_1">some_text_1
<label for="input_id_2"></label>
<input id="input_id_2" type="checkbox" name="input_name" value="value_2">some_text_2
Enter fullscreen mode Exit fullscreen mode

Marca botones de radio y casillas de verificación por defecto

<label for="input_id_1"></label>
<input id="input_id_1" type="radio" name="input_name" value="value_1" checked>some_text_1
<label for="input_id_2"></label>
<input id="input_id_2" type="radio" name="input_name" value="value_2">some_text_2
Enter fullscreen mode Exit fullscreen mode

Discussion (0)