Scribd
Cargar
84 vistas

HTML 5

El documento explica los conceptos básicos de HTML5. HTML5 es un lenguaje de marcado semántico y multiplataforma que permite estructurar el contenido web de forma flexible. La estructura básica de un documento HTML5 incluye las etiquetas <!DOCTYPE html>, <html>, <head> y <body>. Dentro de <head> se incluyen metadatos y enlaces a hojas de estilo CSS, mientras que <body> contiene el contenido visible de la página.

Cargado por

Pablo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
84 vistas

HTML 5

El documento explica los conceptos básicos de HTML5. HTML5 es un lenguaje de marcado semántico y multiplataforma que permite estructurar el contenido web de forma flexible. La estructura básica de un documento HTML5 incluye las etiquetas <!DOCTYPE html>, <html>, <head> y <body>. Dentro de <head> se incluyen metadatos y enlaces a hojas de estilo CSS, mientras que <body> contiene el contenido visible de la página.

Cargado por

Pablo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 23

HTML5

LAS SIGLAS DE HTML

HYPERTEXT MARKUP LANGUAGE

“…texto que enlaza a otro


Traducción Tiene normas, estructuras
texto, a otros contenidos… de marcas o y convenciones para
etiqueta de nir contenido y
Esta es la base del funcionamiento estructura de una WEB
de la WEB donde hay contenidos y pero… NO ES UN
páginas interconectadas. <p>HOLA</P>
LENGUAJE DE
PROGRAMACIÓN
fi

HTML
HTML (HyperText Markup Language), es un
lenguaje de marcado, donde estructuramos
nuestro sitio o aplicación web, este es un
lenguaje base para comenzar un proyecto de
internet
REQUERIMIENTOS

Editor de código:

Un lugar donde escribir código HTML

Un Navegador:

El navegador será el lugar donde visualizar


nuestro código HTML

HTML5
Podemos de nir HTML5 es un lenguaje web
semántico, adaptable, exible, escalable y

multiplataforma. Permite de forma sencilla


que serán compatibles con sistemas de escritorio,

y .
fi
fl
¿ COMO ESCRIBIR LA
INFORMACIÓN PARA

?
QUE SE VISUALICE EN
NAVEGADOR
SINTAXIS HTML5
HTML es un lenguaje de marcado, donde estructuramos
toda la información que llevara nuestro sitio web, por
información nos referimos a párrafos, títulos, textos,
imágenes, videos y más.
En HTML todo se escribe en etiquetas, estas etiquetas
tiene un propósito y dentro de estas irán un contenido.
Hay etiquetas especiales para textos, para imágenes, para párrafos, para enlaces, entre otros.

<nombreEtiqueta>Contenido de la etiqueta</nombreEtiqueta>

RECURSOS

Visual studio code: https://code.visualstudio.com/Download


Biblioteca HTML: https://htmlreference.io/

1. Extensiones
- Live server

- vscode-icons
2 . Archivo
3
Abre etiqueta
Contenido de la etiqueta
Cierra etiqueta

3
ESTRUCTURA SEMÁNTICA HTML5
ESTRUCTURA SEMÁNTICA HTML5
HTML5, lo básico
HTML5  es la versión 5 del lenguaje de marcado HTML.
Un documento escrito en HTML tiene una estructura
básica como la siguiente:
ESTRUCTURA SEMÁNTICA HTML5
• <!DOCTYPE html>  Lo primero que nos encontramos es la declaración del tipo de documento que se está mostrando.
El  DOCTYPE  variará según el tipo de documento realizado, en nuestro ejemplo hemos utilizado el doctype del  HTML5  que es
maravillosamente sencillo.

• html Tras declarar el tipo de documento, indicamos que iniciamos nuestro documento HTML. Esta etiqueta se cierra cuando nalizamos
el documento. Vemos que lleva un atributo lang, esto sirve para indicar el idioma del documento (en nuestro caso español)

• head En un documento HTML tenemos una cabecera dónde colocaremos los metadatos de la página, el código JavaScript y el CSS que
utilizará el navegador para renderizar la página.

• meta charset  Obligatorio en HTML5, informa el juego de caracteres del documento, debería ser siempre  utf-8. Como todo metadato
debe ir dentro del head

• title Es un tipo de metadato especial que nos proporciona el título de la página. Por motivos de posicionamiento (SEO) se recomienda
que el meta title sea parecido al H1 del documento y a la URL de la página.

• body En su interior tendremos el contenido de la página.

fi
DOCTYPE
<!DOCTYPE html>

La etiqueta doctype declara el tipo de documento, por lo que esta está señalando que este es un
documento HTML.

HTML
<html></html> Delimita el documento HTML.

Atributo a destacar

LANG
<html lang="es"></html> Indica el lenguaje de contenido del código.

HEAD

<head></head> El elemento head delimita la cabecera del documento, entre sus etiquetas contiene
información como scripts, metadatos, estilos, ubicación de documentos de estilos, título de la página,
etc.

META

<meta name="description" content="Descripción de la WEB"> Las meta etiquetas se utilizan para


identi car propiedades del documento como por ejemplo el autor, el título y la descripción que mostrarán
los buscadores, etc.
fi
Usos a destacar

META CHARSET
<meta charset="UTF-8"> Establece el tipo de codi cación del documento.

META TITLE

<meta name="title" content="Título de la WEB"> Contiene el titulo que se mostrará en los buscadores.

META DESCRIPTION

<meta name="description" content="Descripción de la WEB"> Es el texto que se muestra bajo el título en


los motores de búsqueda.

LINK

<link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet" type="text/css"/> Esta etiqueta


contiene un link a una hoja de estilos externa, la cual se utilizará en este documento.

Atributo a destacar

HREF Especi ca la url donde se localiza la hoja de estilo.


fi
fi
BODY
<body></body> La etiqueta body delimita el cuerpo del documento y contiene todo aquello que
podremos ver en nuestro navegador. Imágenes, textos, enlaces, video, etc…

HEADER

<header></header> El contenido de esta etiqueta debe ser la cabecera de nuestra página donde se suele
encontrar el título, el logotipo y poco más.

NAV

<nav></nav> Esta etiqueta sirve para delimitar el menú de la página, donde colocaremos los enlaces
internos para movernos entre nuestras diferentes secciones del sitio web.

<a href=“http://dominio.com/seccion2.html">IR SECCIÓN </a> Representa un enlace o hipervínculo.

Visual studio code

También podría gustarte