Presentación html

HTML, el significado de sus siglas en español es "lenguaje de marcas de
hipertexto". Consiste en una conjunto de etiquetas predefinidas que el navegador
interpreta a la hora de construir una página para su visualización, básicamente el
HTML es la estructura de la página web.
No es un lenguaje de programación ya que carece de ciertas características que
definen a un lenguaje. Al HTML se le define como una serie de instrucciones o
etiquetas que indican al navegador cómo debe estructurar el contenido.

Una etiqueta dentro del HTML aparece como un nombre encerrado por los
símbolos < y >. Existen diferentes tipos de etiquetas, unas pueden contener texto y
otras representan partes de una estructura. Por esto, las etiquetas con contenido
deben cerrarse par definir en que parte de la estructura de la página se encontrará.
<div>
<p>Contenido del bloque.</p>
</div>
Si una etiqueta contiene a otras, la más interna debe cerrarse antes de proceder a
cerrar la estructura que las contiene. Existen etiquetas que no se pueden cerrar,
como las imágenes o los saltos de línea.
<div>
<p><strong>Texto en negrita. </strong>Texto normal.</p>
</div>

Son valores adicionales que se agregan a una etiqueta para configurar o definir su
comportamiento. Existen varios tipos de atributos, como los atributos propios y
exclusivos de algunas etiquetas. Solo es necesario incluir los atributos que se
necesiten para modificar el comportamiento de la etiqueta según corresponda.
<img src="imagen.jpg" alt="Imagen de prueba">
La etiqueta es <img> y los atributos son src, que indica el nombre del archivo, y alt
que es para mostrar un texto alternativo.

El texto plano, únicamente está formado por texto, sin ningún formato, es decir, no
requieren ser interpretados para leerse aunque pueden ser procesados en algunos
casos.
Un ejemplo, de editor de texto plano es el "bloc de notas", con el que podemos
comenzar a realizar una página web. Se recomienda usar algún otro programa que
resalte el código html para facilitarnos su legibilidad, un ejemplo de estos es
"notepad++" o "brackets".
Bloc de notas Notepad ++

DOCTYPE, es la primera etiqueta que se escribe en el documento, indica al
navegador que se trata de un documento HTML.
<html>, indica el inicio del documento HTML.
<head>, se escribe dentro de <html>, únicamente nosotros vemos el título de la
página en nuestro navegador, la demás información es para el navegador o los
buscadores web.
<meta charset="UTF-8">, indica al navegador la codificación de caracteres que se
va a utilizar.
<body>, dentro de esta etiqueta se incluye toda la estructura de la página.

Elementos de bloque
• Ocupan todo el ancho disponible.
• Los elementos situados tras un
elemento de bloque siempre se
sitúan debajo de este.
• Pueden contener otros elementos
de bloque y de línea.
• Ejemplos de elementos de bloque:
<p>, <div>, <ul>, <table>, etc.
Elementos de línea
•Ocupan únicamente el ancho que
necesitan.
•Se sitúan uno junto al otro hasta
que ocupan todo el ancho.
•Solo pueden contener otros
elementos de línea.
•Ejemplos de elementos de línea:
<img>, <a>, <button> y <strong>

División: <div> Permite dividir la página en secciones, esto permite aplicar estilos con CSS
más fácilmente.
Párrafo: <p> Representa a un párrafo, solo puede englobar elementos en línea.
Agrupar elementos en línea: <span> Se usa para agrupar elementos de línea, para poder
aplicar estilos con CSS.
Subrayado: <u> El texto que englobe aparecerá subrayado.
Cursiva: <em> El texto aparecerá en cursiva.
Negrita: <strong> El texto englobado aparecerá en negrita.
Subíndice: <sub> El texto que englobe se representará como un subíndice.
Superíndice: <sup> El texto engloblado aparecerá como un superíndice.
Salto de línea: <br> Fuera un salto de línea.
Separación horizontal: <hr> Es un elemento de bloque que dibuja una línea de separación
horizontal.

División: <div> Permite dividir la página en secciones, esto permite aplicar estilos con CSS
más fácilmente.

La etiqueta para crear los enlaces es <a>, y este englobará a un texto o a una imagen que
tendrá una ruta específica. El atributo propio de esta etiqueta es href que nos permite incluir
la ruta hacia la página con la que será enlazada.
También existe otro atributo, llamado target que si le damos el valor _blank, que sirve para
que cuando le demos a un enlace este se nos abra en una pestaña nueva.

Es el lenguaje utilizado para definir el modo de presentar el código HTML de una
página web. Nos permite separar la estructura de un documento HTML de su
diseño o presentación (CSS).
Existen varias formas de colocación: en un atributo HTML con el atributo style; con
la etiqueta en style, y mediante un archivo independiente. Esta última es la mejor
forma de incluir el CSS.
<link rel=”stylesheet” href=“css/estilo.css” type=“text/css” />
Con esto incluiríamos el CSS en nuestro archivo HTML, indicando donde se
encuentra nuestro archivo .css. Esto se incluye dentro del atributo head.

Existen varios tipos:
• Selectores por tipo. Se escriben con la etiqueta HTML, esto afecta a todas
las etiquetas del mismo tipo de un mismo documento.
• Selectores de clase. El nombre de la clase tiene que ir precedido por un
punto, previamente debemos haber escrito en el HTML un atributo class con el
nombre que deseemos.
• Selectores de id: El nombre del id tiene que ir precedido por un “#”,
deberemos haber añadido con anterioridad un atributo id en nuestro archivo
HTML.
a {
color: green
}
.clase1 {
color: blue
}
#id1 {
color: red
}

Para modificar el color del texto, podemos usar la propiedad color. Podemos
utilizar varios métodos para establecer el color, el más usado es usar el RGB en
código hexadecimal o en decimal.
También podemos modificar el color de fondo de un elemento con la propiedad
background-color.
HTML
<div id=“div1”>Hola</div>
CSS
#id1 {
color: red;
}
HTML
<div id=“div1”>Hola</div>
CSS
#id1 {
background-color: rgb(255, 0, 0);
}

Para modificar el color del texto, podemos usar la propiedad color. Podemos
utilizar varios métodos para establecer el color, el más usado es usar el RGB en
código hexadecimal o en decimal

Presentación html

Más contenido relacionado

La actualidad más candente

Similar a Presentación html

Último

Presentación html