2. HTML hace referencia al lenguaje de marcado para la elaboración de páginas
web. Es un estándar que sirve de referencia del software que conecta con la
elaboración de páginas web en sus diferentes versiones, define una estructura
básica y un código (denominado código HTML) para la definición de contenido
de una página web, como texto, imágenes, videos, juegos, entre otros.
3. Podemos afirmar que HTML no es un lenguaje de programación por los
siguientes motivos:
HTML: HyperText Markup Language (Lenguaje de
Marcado de Hipertexto). ¿Vemos la palabra
“programación” por alguna parte?
HTML es una serie de tags o etiquetas que sirven
para distribuir un contenido específico en uno o
mas sitios web.
La gente lo llama “lenguaje”, porque la L de HTML
así lo indica… sin embargo HTML es un formato de
archivo que es interpretado por los conocidos
navegadores.
4. La Web se basa en el HTML, que está basado en el uso de etiquetas. Las
etiquetas le dicen al programa visualizador de páginas web en qué juego de
caracteres está la página, en qué tipo de letra está el texto ,si hay tablas, de
qué anchura son etc. Dicho de otro modo: las etiquetas dan al navegador las
instrucciones necesarias para que presente la página en pantalla.
Una etiqueta es una marca con clase que delimita
una región en los lenguajes basados en XML.
5. Son valores adicionales que configuran los elementos o ajustan su
comportamiento de diversas formas para cumplir los criterios de los usuarios.
6. Un editor de texto plano es un programa informático que permite crear y
modificar archivos compuestos únicamente por textos sin formato, conocidos
comúnmente como archivos de texto .
7. Un editor de páginas web es una aplicación diseñada con el fin de facilitar la
creación y edición de documentos HTML o XHTML. Su complejidad puede
variar desde la de un simple editor de texto plano, entornos WYSIWYG
hasta editores WYSIWYM.
8. ¿Cuál es la estructura de un documento HTML?
<html>
<head>
... Encabezamiento del documento
</head>
<body>
... Cuerpo del documento
</body>
</html>
9. ¿ Cuáles son los elementos más importantes del encabezamiento?
Sin duda los elementos principales del encabezamiento son TITLE y META,
un posible encabezado sería el siguiente:
< TITLE>Título de la página</TITLE>
< META NAME="description" CONTENT="Página web orientada al diseño
de páginas web de calidad para internet con lenguaje HTML y contenido
hipermedia">
<META NAME="keywords" CONTENT="Diseño paginas web HTML
internet">
< META HTTP-EQUIV="refresh" CONTENT="5;
URL=http://www.tudominio.com/eso.html">
< META name="robots" CONTENT="follow">
10. ¿Qué contenidos tiene el cuerpo o body?
El cuerpo lo ponemos dentro de la etiqueta <body>, viene a continuación
del encabezamiento, y contiene todo el texto e información del documento
que se va a mostrar.
<BODY>
...
</BODY>
11. Un elemento en bloque ocupa todo el espacio de su elemento padre creando así
un "bloque". Un elemento en línea ocupa sólo el espacio delimitado por las
etiquetas que definen el elemento en línea.
12. Las principales son las siguientes:
• <HTML>: indica el comienzo del documento HTML.
• <HEAD>: indica que empieza la cabecera de la página. En ella se
suele poner el título (<title>) de la web, una descripción y otras
informaciones relacionadas con el contenido de la página.
• <BODY>: es el cuerpo de la página, donde va lo que se ve en el
navegador al cargar una web. En el body van los textos, las imágenes
y todos los contenidos de la web.
• <H1>, <H2>, etc.: son los títulos o encabezados.
• <A>: define los enlaces.
• <TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y
celdas <TD>.
•<IMG>: imágenes.
• <BR>: salto de línea.
• <UL>: los textos dentro de esta etiqueta se estructuran en listas.
Mediante el uso de <LI> definimos cada guión dentro de la lista, y
usando <OL> en lugar de <UL> tendremos listas ordenadas.
• <B> y <STRONG>: se utilizan para resaltar el texto.
• <U>: texto subrayado.
• <I>: texto en cursiva.
13. ID
Es un identificador único, el cual no debe repetirse en todo el documento. Su
propósito es identificar el elemento al vincularlo, en scripts u hojas de estilo.
CLASS
Es una lista de las clases del elemento separada por espacios . Las clases
permiten a CSS y Java script seleccionar y acceder a elementos específicos a
través de los selectores de clase.
STYLE
El elemento style contiene a un bloque de declaraciones de estilo. El
elemento style solo puede ser declarado en el encabezado del documento
(head).
TITLE
Está definido como un elemento de contenido de cabecera. Puede contener:
texto y entidades de caracteres, pero no puede contener código.
14. Listas ordenadas: <ol>
Las listas ordenadas van enmarcadas dentro de las etiquetas <ol> </ol>.
Cada punto de la lista se escribe con la misma etiqueta que en las no
numeradas: <li>. Pero al ser listas ordenadas los símbolos serán números y
éstos se irán generando automáticamente por orden, conforme escribamos
nuevos puntos.
Listas no ordenadas: <ul>
Las listas no ordenadas van dentro de la etiqueta <ul> HTML y de su cierre
</ul>. Cada punto que queramos añadir a la lista, lo haremos dentro de la
etiqueta <li> y su cierre.
Si no le indicamos nada a la etiqueta <li> HTML, ésta se generará de forma
automática. Pero si queremos definir nosotros mismo el símbolo del punto,
podemos gracias al atributo “type”.
15. Listas de definiciones: <dl>, <dt> y <dd>
Si lo que vamos a hacer es un listado de definiciones, podemos usar las
etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas por partes:
1. La etiqueta <dl> viene de los términos ingleses “Definiton list” y nos indica
que dentro de ella, entre ella y su cierre, va a ir una definición.
2. La etiqueta <dt> viene de los términos “Definition term” y dentro de ella
irá el término que vamos a definir. Para entendernos mejor, dentro de <dt>
iría el título de la definición.
3. La etiqueta <dd> viene de los términos “Definition description” y nos dice
que dentro de ésta irá la definición.
16. Puede que queramos empezar nuestra web o
nuestro texto con un encabezado indicando el
título del artículo, categoría, etc. Pues bien, para
escribir encabezados disponemos de las etiquetas
<h>.
Esta etiqueta viene acompañada de un número,
desde el 1 hasta el 6, predefiniendo éstos el
tamaño del encabezado. Así, <h1> sería el
encabezado más grande mientras que <h6> sería
el más pequeño.
17.
18. • Elemento de bloque para estructurar una serie de datos alineados.
• No aconsejable para crear una estructura o un diseño de página.
• Las filas de una tabla se representa con la etiqueta <tr>, y estas solo
contienen celdas o <td>.
19. Las imágenes son elementos en línea, estas se representan con la etiqueta
<img> .La ruta a la imagen se establece desde el directorio , donde se
encuentra el documento HTML que está visualizando. Si se trata de una
imagen externa se debe añadir la URL completa.
• Son vínculos a otras páginas.
• La etiqueta utilizada para crearlos es <a>.
• Atributos propios:
- Href
- Target
20. • Lenguaje utilizado para definir el modo de presentar el código HTML de una
página web.
• Permite separar el diseño y presentación de un documento
21. • Con el atributo style
• Con la etiqueta <style>
• En un archivo independiente
Permite colocar código
CSS como valor de
dicho atributo
Establece un diseño
general que afecta a
todo el documento
HTML
Se incluye un código
CSS mediante un
archivo externo
23. Para modificar el color de texto se usa la propiedad “color” y para el de
fondo “backgroud-color”.
Para modificar el aspecto de un texto se usa e prefijo font o text ,algunas
de sus propiedades son:
- text-align, alineación del texto
- text-decoration, subrayado
24.
25. La altura y anchura de un elemento se pude modificar con propiedades
CSS. Algunas de estas son:
- display: block
- display: inline
- display: inline-block
26. Algunas de las propiedades CSS que permiten modificar el borde son:
Border-
width
Border -style
Boder-color
Border-
radius
28. El posicionamiento se realiza según la estructura HTML establecida.
Mediante la propiedad CSS position se obliga a l navegador a dibujar el
elemento en un lugar distinto al original :
- position: stactic;
- position: relative
- margin-top y margin-left
- position: fixed
29. Para colocar un imagen lo podemos hacer de tres maneras:
- background-image
- backgroud-position
- background-repeat
