HTML
Con el lenguaje html se define estructura y contenido de la página web como texto
imágenes videos y otros componentes de la página web. No se define la presentación
visual de las páginas web. Una página web esta formada por un conjunto de elementos
escritos en un orden concreto.
La etiqueta inicial puede llevar atributos pero la final no.
Los atributos pueden llevar un valor
Las etiquetas pueden tener contenido y puede estar formado por otras etiquetas de html
como por texto.
Los elementos se pueden anidar es decir escribir uno dentro de otros pero en base a unas
reglas.
HTML son las siglas de Hyper Text Markup Language
HTML es el lenguaje de marcado estándar para crear páginas web
HTML describe la estructura de una página web
HTML consta de una serie de elementos
Los elementos HTML le dicen al navegador cómo mostrar el contenido.
Los elementos HTML etiquetatan partes de contenido como "esto es un
encabezado", "esto es un párrafo", "esto es un enlace", etc.
Estructura global
1. indicar el tipo de documento que estamos creando. la primera línea del archivo,
sin espacios o líneas que la precedan.
<!DOCTYPE html>
2. declarar el tipo de documento, debemos comenzar a construir la estructura
HTML. <html lang=”es”>
</html>
El atributo lang en la etiqueta de apertura <html> es el único atributo que
necesitamos especificar en HTML5. Este atributo define el idioma humano del
contenido del documento que estamos creando, en este caso es por español.
Compare las etiquetas de apertura y cierre y verá que la de cierre se distingue
por una barra invertida antes de la palabra clave (por ejemplo, </html>).
3. El código HTML insertado entre las etiquetas <html> tiene que ser dividido
entre dos secciones principales.
La primera sección es la cabecera y la segunda el cuerpo. El siguiente paso, por
lo tanto, será crear estas dos secciones en el código usando los elementos<head>
y <body> ya conocidos.
Head
En la etiqueta <head> se definirá:
Se declara el set de caracteres correspondientes. Con la etiqueta <meta>.
Las metaetiquetas, etiquetas meta o elementos meta (también conocidas
por su nombre en inglés, metatags o meta tags) son etiquetas HTML que
se incorporan en el encabezado de una página web y que resultan
invisibles para un visitante normal, pero de gran utilidad para
navegadores u otros programas que puedan valerse de esta información.
<meta charset="UTF-8"/>
Se provee de información general acerca del documento
<meta name=”description” content=”Ejemplo de HTML5”/>
Se detallan palabras claves y contenido de la página web
<meta name=”keywords” content=”HTML5, CSS3, Javascript”/>
Título de nuestra página web. Normalmente este texto es mostrado en la
barra superior dela ventana del navegador.
<title>Este texto es el título del documento</title>
Se incorporan archivos con estilos de código java script o imágenes si se
requiere. <link>. Este elemento es usado para incorporar estilos, códigos
Javascript, imágenes o iconos desde archivos externos. Uno de los usos
más comunes para <link> es la incorporación de archivos con estilos
CSS
<link rel=”stylesheet” href=”misestilos.css”>
Rel es un atributo (es acerca de la relación entre el documento y el archivo que
estamos incorporando por medio de href.)
Cargar las reglas CSS desde un documento externo (otro archivo) nos permitirá
organizar el documento principal, incrementar la velocidad de carga y
aprovechar las nuevas características de HTML5.
Excepto por el título y algunos íconos, el resto de la información incorporada en
el documento entre estas etiquetas es invisible para el usuario.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<meta name=”description” content=”Ejemplo de HTML5”/>
<meta name=”keywords” content=”HTML5, CSS3, Javascript”/>
<title>Este texto es el título del documento</title>
<link rel=”stylesheet” href=”misestilos.css”>
</head>
<body>
</body>
</html>
Body
Se definirá la parte visible de nuestra página web. la palabra clave <div> solo
especifica una división en el cuerpo, como la celda de una tabla, pero no ofrece
indicio alguno sobre qué clase de división es, cuál es su propósito o qué
contiene. Para los usuarios estas claves o indicios no son importantes, pero para
los navegadores la correcta interpretación de qué hay dentro del documento que
se está procesando puede ser crucial en muchos casos.
En la etiqueta <body>
1. Mientras que el elemento <head> tiene el propósito de proveer información
acerca de todo el documento, <header> es usado solo para el cuerpo o
secciones específicas dentro del cuerpo:
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
2. Fdvfd
Tag Description
<!--...--> Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation or an acronym
Not supported in HTML5. Use <abbr> instead.
<acronym>
Defines an acronym
<address> Defines contact information for the author/owner of a document
Not supported in HTML5. Use <embed> or <object> instead.
<applet>
Defines an embedded applet
<area> Defines an area inside an image map
<article> Defines an article
<aside> Defines content aside from the page content
<audio> Defines embedded sound content
<b> Defines bold text
Specifies the base URL/target for all relative URLs in a
<base>
document
Not supported in HTML5. Use CSS instead.
<basefont>
Specifies a default color, size, and font for all text in a document
Isolates a part of text that might be formatted in a different
<bdi>
direction from other text outside it
<bdo> Overrides the current text direction
Not supported in HTML5. Use CSS instead.
<big>
Defines big text
<blockquote> Defines a section that is quoted from another source
<body> Defines the document's body
<br> Defines a single line break
<button> Defines a clickable button
Used to draw graphics, on the fly, via scripting (usually
<canvas>
JavaScript)
<caption> Defines a table caption
Not supported in HTML5. Use CSS instead.
<center>
Defines centered text
<cite> Defines the title of a work
<code> Defines a piece of computer code
Specifies column properties for each column within a <colgroup>
<col>
element
Specifies a group of one or more columns in a table for
<colgroup>
formatting
<data> Adds a machine-readable translation of a given content
<datalist> Specifies a list of pre-defined options for input controls
<dd> Defines a description/value of a term in a description list
<del> Defines text that has been deleted from a document
<details> Defines additional details that the user can view or hide
<dfn> Specifies a term that is going to be defined within the content
<dialog> Defines a dialog box or window
Not supported in HTML5. Use <ul> instead.
<dir>
Defines a directory list
<div> Defines a section in a document
<dl> Defines a description list
<dt> Defines a term/name in a description list
<em> Defines emphasized text
<embed> Defines a container for an external application
<fieldset> Groups related elements in a form
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
Not supported in HTML5. Use CSS instead.
<font>
Defines font, color, and size for text
<footer> Defines a footer for a document or section
<form> Defines an HTML form for user input
Not supported in HTML5.
<frame>
Defines a window (a frame) in a frameset
Not supported in HTML5.
<frameset>
Defines a set of frames
<h1> to <h6> Defines HTML headings
<head> Contains metadata/information for the document
<header> Defines a header for a document or section
<hr> Defines a thematic change in the content
<html> Defines the root of an HTML document
<i> Defines a part of text in an alternate voice or mood
<iframe> Defines an inline frame
<img> Defines an image
<input> Defines an input control
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<label> Defines a label for an <input> element
<legend> Defines a caption for a <fieldset> element
<li> Defines a list item
Defines the relationship between a document and an external
<link>
resource (most used to link to style sheets)
<main> Specifies the main content of a document
<map> Defines an image map
<mark> Defines marked/highlighted text
<meta> Defines metadata about an HTML document
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
Not supported in HTML5.
<noframes>
Defines an alternate content for users that do not support frames
Defines an alternate content for users that do not support client-
<noscript>
side scripts
<object> Defines a container for an external application
<ol> Defines an ordered list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<output> Defines the result of a calculation
<p> Defines a paragraph
<param> Defines a parameter for an object
<picture> Defines a container for multiple image resources
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
Defines what to show in browsers that do not support ruby
<rp>
annotations
Defines an explanation/pronunciation of characters (for East
<rt>
Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<script> Defines a client-side script
<section> Defines a section in a document
<select> Defines a drop-down list
<small> Defines smaller text
Defines multiple media resources for media elements (<video>
<source>
and <audio>)
<span> Defines a section in a document
Not supported in HTML5. Use <del> or <s> instead.
<strike>
Defines strikethrough text
<strong> Defines important text
<style> Defines style information for a document
<sub> Defines subscripted text
<summary> Defines a visible heading for a <details> element
<sup> Defines superscripted text
<svg> Defines a container for SVG graphics
<table> Defines a table
<tbody> Groups the body content in a table
<td> Defines a cell in a table
Defines a container for content that should be hidden when the
<template>
page loads
<textarea> Defines a multiline input control (text area)
<tfoot> Groups the footer content in a table
<th> Defines a header cell in a table
<thead> Groups the header content in a table
<time> Defines a specific time (or datetime)
<title> Defines a title for the document
<tr> Defines a row in a table
<track> Defines text tracks for media elements (<video> and <audio>)
Not supported in HTML5. Use CSS instead.
<tt>
Defines teletype text
Defines some text that is unarticulated and styled differently from
<u>
normal text
<ul> Defines an unordered list
<var> Defines a variable
<video> Defines embedded video content
<wbr> Defines a possible line-break
