introducciÓn · html es un lenguaje de programación marcas que sirve para define la estructura...
TRANSCRIPT
![Page 1: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/1.jpg)
CURSO <HTML>INTRODUCCIÓN
Autor: Jon Vadillo
www.jonvadillo.com
![Page 2: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/2.jpg)
Contenidos
■ Introducción
■ Elementos
■ Estructura
■ DOCTYPE
■ Cabecera
■ Texto
■ Listas
■ Imágenes
■ Tablas
■ Enlaces
■ Comentarios
■ <div> y <span>
![Page 3: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/3.jpg)
HTML es un lenguaje de programación marcas que sirve
para define la estructura del contenido
![Page 4: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/4.jpg)
El cliente (navegador web) es el encargado de interpretar
correctamente la página web escrita en HTML para que podamos visualizarla.
![Page 5: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/5.jpg)
Los documentos HTML utilizan <etiquetas> para indicar al navegador
cómo estructurar la página web.
![Page 6: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/6.jpg)
Etiquetas
<nombre_etiqueta> … </nombre_etiqueta>
Apertura Contenido Cierre
Algunos elementos no tienen contenido (p.ej imágenes). Se conocen como elementos vacíos.
![Page 7: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/7.jpg)
Atributos de etiquetas
<etiqueta atributo = “valor”> … </etiqueta>
El valor del atributo debe ir entre comillas (simples o dobles).
Listado oficial de elementos HTML: https://html.spec.whatwg.org/multipage/indices.html#elements-3
![Page 8: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/8.jpg)
Atributos booleanos
<input type = “text” disabled = “disabled”>
<input type = “text” disabled>
![Page 9: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/9.jpg)
Tipos de elementos
Block vs Inline
![Page 10: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/10.jpg)
Tipos de elementos
■ Se posicionan siempre en una nueva línea.
■ Puede contener otros elementos de tipo block o inline
■ No puede ir dentro de un elemento inline
Block
Inline
■ No generan una nueva línea en el documento.
■ Siempre van dentro de un elemento de tipo block.
■ Suelen ir dentro de párrafos, por ejemplo un enlace dentro de un texto o una palabra en negrita.
![Page 11: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/11.jpg)
![Page 12: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/12.jpg)
Elementos de tipo block
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
![Page 13: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/13.jpg)
Elementos de tipo inline
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
![Page 14: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/14.jpg)
Estructura HTML
<head>:Contiene lo que NO se ve(información de la página)
<!DOCTYPE html>
<html>
<head> </head> ... <body> ... </body>
</html>
<body>:Contiene lo que SÍ se ve(contenidos de la página)
![Page 15: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/15.jpg)
Estructura HTML
<!DOCTYPE html><html><head> <title>El primer documento HTML</title></head><body> <h1>¡Hola!</h1> <p>Mi primera página</p></body></html>
![Page 16: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/16.jpg)
Aviso importante
El contenido de este curso está diseñado para aprender con la metodología learn by example. Se recomienda probar por uno mismo todos los códigos de las diapositivas para tener un buen aprendizaje.
![Page 17: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/17.jpg)
DOCTYPE = Document Type= Declaración del tipo de documento
¿Qué es el DOCTYPE?
■ Sirve para indicar al navegador la versión de HTML que está utilizando el sitio web.
■ Siempre debemos escribirla al inicio de nuestros documentos
![Page 18: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/18.jpg)
Antes de HTML 5
¿Qué es el DOCTYPE?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://w3.org/html4/strict.dtd">
Después de HTML 5
<!DOCTYPE html>
![Page 19: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/19.jpg)
¿Qué hay en la cabecera?
■ El título de la página
■ Recursos que debe cargar la página: css, js,...
■ El favicon de la página
■ Metadatos: autor de la página, keywords que describen la página,...
![Page 20: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/20.jpg)
¿Qué hay en la cabecera?<head> <!-- Codificacion de caracteres utilizada --> <meta charset="utf-8"> <!-- Título de la página que aparecerá en la pestaña, al incluir en favoritos,... --> <title>MDN Web Docs</title> <!-- Descripción (utilizada por ejemplo en los resultados de Google) --> <meta name="description" content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps." > <!-- Favicon de la página --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" > <!-- Hoja de estilos CSS utilizada --> <link rel="stylesheet" href="my-css-file.css" > <!-- Fichero JavaScript utilizado --> <script src="my-js-file.js" ></script></head>
![Page 21: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/21.jpg)
Elementos de tipo texto
<h1>Títulos principal</h1>
<h2>Título secundario</h2>
<h3>Título de tercer nivel</h3>
<h4>Título de cuarto nivel</h4>
<h5>Título de quinto nivel</h5>
<h6>Título de sexto nivel</h6>
<p>
Lorem ipsum dolor sit ...
</p>
![Page 22: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/22.jpg)
Intenta utilizar un único elemento de tipo <h1> y respeta las jerarquías (no utilices <h3> después de <h1>)
Es importante estructurar tu contenido de forma legible para el usuario. Ten en cuenta que el uso de los títulos es también importante para el posicionamiento SEO de tu página.
![Page 23: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/23.jpg)
Saltos de línea
<p>Morbi euismod ipsum ...</p>
<br/>
<p>Lorem ipsum ...</p>
<hr/>
<p>Lorem ipsum dolor ...</p>
![Page 24: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/24.jpg)
Elementos inline
<p>Lorem ipsum dolor
<strong>amet </strong>,
consectetur adipiscing elit.
<em>Suspendisse auctor</em>
gravida.Integer dictum vel leo
eget euismod.</p>
<strong>:Resaltar texto importante
<em>:Para poner énfasis en el texto
![Page 25: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/25.jpg)
Listas<ul>
<li>Pasta</li>
<li>Arroz</li>
<li>Pan</li>
<li>Lechuga</li>
<li>Tomate</li>
</ul>
<ul>:Lista no ordenada
<ol>:Lista ordenada (numerada)
<li>:Elemento de una lista
![Page 26: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/26.jpg)
Listas<ul>
<li>Pasta</li>
<li>Arroz</li>
<li>Pan</li>
<li>Lechuga</li>
<li>Tomate</li>
</ul>
![Page 27: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/27.jpg)
Listas<ol>
<li>Pasta</li>
<li>Arroz</li>
<li>Pan</li>
<li>Lechuga</li>
<li>Tomate</li>
</ol>
![Page 28: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/28.jpg)
Listas<ul>
<li>Pasta
<ul>
<li>Gallo</li>
<li>Eroski</li>
</ul>
</li>
<li>Arroz
<ul>
<li>SOS</li>
<li>Meal</li>
<li>Eroski</li>
</ul>
</li>
</ul>
![Page 29: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/29.jpg)
Imágenes
<img src = “logo.png”>
img:Etiqueta de imagen
src:URL (dirección) de la imagen
![Page 30: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/30.jpg)
Imágenes
<img src = “logo.png” alt = “Logo” width=”400px” height = “200px”>
alt:Descripción breve de la imagen
width y height:Anchura y altura de la imagen
![Page 31: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/31.jpg)
Tablas<table>
<tr>
<th>...</th>
<th>...</th>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
</table>
<table>:Etiqueta de tabla
<tr>:Fila de datos
<td>:Elemento de una lista
<th>:Cabecera de datos (opcional)
![Page 32: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/32.jpg)
Tablas
![Page 33: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/33.jpg)
Fusionar filas y columnas
colspan:Número de columnas que ocupa
rowspanNúmero de filas que ocupa
![Page 34: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/34.jpg)
Agrupamiento de secciones
thead:Agrupa las filas y celdas de la cabecera
tbodyAgrupa las filas y celdas del contenido
tfooterAgrupa las filas y celdas del pie
Solo puede haber una cabecera y un pie.
![Page 35: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/35.jpg)
![Page 36: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/36.jpg)
Hipervínculos (enlaces)
<a href = “www.google.com”>Click aquí</a>
La URL puede hacer referencia a un recurso de cualquier tipo: imagen, web, pdf, email,...
El enlace puede ser interno ("logo.jpg") o externo (http://www.miweb.com/logo.jpg)
![Page 37: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/37.jpg)
Hipervínculos (enlaces)
<a href = “inicio.html” target = “_blank”>Link</a>
targetEspecifica donde abrir el recurso (_blank, _self)
<p class="bold-text">You are using an <strong>outdated</strong> browser and this is not allow.Please <a href="https://google.com/" >upgrade your browser </a> to improve your experience and security.</p><a href="inicio.html"><img href="milogo.png"></a>
![Page 38: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/38.jpg)
Directorios
<a href = “inicio.html” target = “_blank”>Link</a>
Mismo directorioSimplemente escribir el nombre del recurso.
Otro directorioEl nombre del directorio seguido de una '/'
Directorio superiorEscribimos '.. /' seguido del nombre del archivo
<a href = “paginas/contacto.html” target = “_blank”>Link</a>
<a href = “.. /nicio.html” target = “_blank”>Link</a>
![Page 39: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/39.jpg)
Enlaces a secciones internas
<a href = “#id-seccion”>Portfolio</a>
Sintaxis del enlaceDebe comenzar con # seguido del ID de la sección
Sintaxis de la secciónEl atributo id debe coincidir con el indicado en el enlace
<h2 id = “id-seccion”>Mi Portfolio</h2>
![Page 40: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/40.jpg)
Comentarios
<!-- A continuación mi código -->
Apertura Comentario Cierre
Se pueden comentar tantas líneas como queramos.
![Page 41: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/41.jpg)
<!-- Tabla sobre productos --><table> <!-- Cabecera de dos columnas: Producto y precio --> <tr> <th>Producto</th> <th>Precio</th> </tr> <!-- Datos de la tabla --> <tr> <td>Pasta</td> <td>3.10 €</td> </tr> <!-- <tr> <td>Lechuga</td> <td>1.40 €</td> </tr> --></table>
![Page 42: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/42.jpg)
Elementos genéricos
<div>Para elementos block, actúa generalmente como contenedor.
<span>Agrupa elementos en línea y nos permite aplicar estilo al texto
Cuando no encontremos un elemento semántico que se ajuste a nuestras necesidades (o necesitemos agrupar elementos o añadir estilo) podremos utilizar los siguientes elementos genéricos:
![Page 43: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/43.jpg)
Práctica 1
■ Desarrolla una página web sobre tu centro educativo utilizando los
siguientes elementos:
○ Elementos de texto: títulos, párrafos, saltos de línea, etc.
○ Al menos una lista anidada (nested list)
○ Al menos una tabla con cabecera y 3 columnas.
○ 1 imágen del centro
■ Podéis elegir la estructura y el contenido ha utilizar a vuestro criterio,
siempre y cuando tenga un mínimo de 4 secciones (descripción del
centro, cursos ofertados, datos de contacto, etc.).
![Page 44: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/44.jpg)
Práctica 2
■ Desarrolla una página web sobre HTML5
utilizando los siguientes elementos:
○ Elementos de texto: títulos,
párrafos, saltos de línea
○ Al menos una lista anidada
○ Al menos una tabla con cabecera y
3 columnas.
○ 1 imágen del centro
○ Hipervínculos
■ Puedes utilizar el ejemplo de la imagen.
![Page 45: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/45.jpg)
Práctica 3■ Desarrolla una página web personal que sirva para mostrar los proyectos que
has realizado. La página web tendrá distintas secciones (mínimo 3), como por
ejemplo:
○ Sobre mí (About me)
○ Mis Proyectos: debe contener información sobre las prácticas realizadas
(web del centro educativa y web sobre HTML5): nombre, breve
descripción y enlace (hipervínculo) al proyecto.
○ Información de contacto
■ Trata de utilizar distintos elementos utilizados en clase (listas, tablas,
elementos de texto, etc.).
![Page 46: INTRODUCCIÓN · HTML es un lenguaje de programación marcas que sirve para define la estructura del contenido. El cliente (navegador web) es el encargado de interpretar ... diapositivas](https://reader034.vdocuments.mx/reader034/viewer/2022052007/601bcab0e492e2464d4ed1b6/html5/thumbnails/46.jpg)
Sources
■ Mozilla MDN Web Docs: https://developer.mozilla.org/
■ HTML Dog: http://htmldog.com
■ Free Code Camp: http://freecodecamp.com