Este documento presenta los conceptos básicos de HTML y CSS. Explica que HTML es un lenguaje de marcado para crear páginas web y no es un lenguaje de programación. Detalla las estructuras básicas de HTML como etiquetas, atributos, elementos de bloque y línea, y cómo crear párrafos, encabezados, listas, tablas e imágenes. También define CSS como una hoja de estilos que describe cómo se mostrará el contenido y permite separar la presentación del contenido.

1. CONCEPTOS BÁSICOS DEL HTML
Mario Lara López y Zayra Sánchez López

2. ÍNDICE
Lenguaje HTML
Significado de HTML y utilidad
¿Por qué HTML no es un lenguaje de programación?
Etiquetas
Atributos
Estructura básica de una página HTML
Editores de texto plano y editores de documentos web. Ejemplos
Elementos de bloque y de línea
Etiquetas básicas
Atributos globales aplicables a cualquier etiqueta: id, class, style, title
Listas y tipos
Tablas
Imágenes
Personalización del estilo: CSS
Significado de CSS y utilidad
Selectores básicos
Colores
Texto
Bordes
Márgenes
Imagen de fondo

3. LENGUAJE HTML
Significado de HTML
y utilidad
¿Por qué HTML no
es un lenguaje de
programación?
Etiquetas
Atributos

4. SIGNIFICADO DE HTML Y UTILIDAD
Html es un
lenguaje de marcado
que se utiliza para el
desarrollo de páginas de
internet.
Corresponde a las siglas
de hipertext markup
language, lenguaje de
formato para hipertexto
en Castellano.

5. ¿Por qué HTML no es un lenguaje de programación?
Este no puede definirse como
un lenguaje de programación ya
que es un lenguaje de
etiquetas, estas comunican al
navegador que información
mostrar en pantalla a demás del
formato de dicha información.
En resumen, podríamos decir
que HTML no es un lenguaje de
programación, es un lenguaje
de maquetación web o lenguaje
de etiquetas destinado a crear
estructuras de documentos
HTML.

6. ETIQUETAS
Una etiqueta consta de un
nombre que la define
encerrando por los
símbolos < y > , y escrito
en minúsculas.
Se pueden diferenciar en
etiquetas que contengan
texto y otras que
representan partes de una
estructura.
Ejemplos :
-Párrafo <p> , </p>
-Salto de página <br/>
-Párrafo con contenido en
negrita <p> textonormal
<strong> texto en negrita
</strong> </p>

7. OTROS EJEMPLOS
•<div>: es un elemento “contendedor” de otras cosas. Realmente es
lo que más se usa. Sabiendo manejar un <div
style=”loquenecesites”>contenido</div> puedes hacer casi todo.
Podrás ver un ejemplo práctico al final del post.
•<a>: para añadir enlaces. Dentro de ella tendremos dos atributos
importantes, que son: href=”indica_la_URL_o_RUTA” y target=”self o
_blank”, según quieras que el enlace se abra en la misma página o
en una pestaña nueva.
•<img> es la etiqueta con la que se insertan las imágenes. Este es
uno de los pocos casos que no necesita etiqueta de cierre, sino que
vale con: <img src=”rutadelaimagen” alt=”textoalternativo” />, sin
poner </img>
•<li>, <ol>, <ul>: son las etiquetas que controlan las listas ordenadas
y desordenadas.

8. ATRIBUTOS
•Los atributos son las características individuales que diferencian un
objeto de otro y determinan su apariencia, estado u otras
cualidades. Los atributos se guardan en variables denominadas de
instancia, y cada objeto particular puede tener valores distintos para
estas variables.
•Las variables de instancia también denominados miembros dato,
son declaradas en la clase pero sus valores son fijados y cambiados
en el objeto.
•Además de las variables de instancia hay variables de clase, las
cuales se aplican a la clase y a todas sus instancias. Por ejemplo, el
número de ruedas de un automóvil es el mismo cuatro, para todos
los automóviles.
Un
ejemplo:https://developer.mozilla.org/es/docs/Web/HTML/Atributos

9. TIPOS DE ATRIBUTOS
-Los atributos constituyen un medio apropiado para asociar información
declarativa con código de C# (tipos, métodos, propiedades, etc.).
-Después de asociar un atributo a una entidad del programa, éste se puede
consultar en tiempo de ejecución mediante una técnica denominada
reflexión.
-Existen dos formas de atributos:
•Atributos que se definen en (CLR).
•Atributos personalizados que se pueden crear para agregar información
adicional al código. Esta información se puede recuperar después mediante
programación.

10. OBJETIVOS
Profundizar en el
concepto de
atributo de una
clase e indicar los
tipos de atributos
en Java
Interpretar el código
fuente de una
aplicación
Java donde
aparecen distintos
tipos de atributos
Construir una
aplicación Java
sencilla,
convenientemente
especificada, que
emplee clases con
diferentes tipos de
atributos.

11. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML
Editores de texto plano y editores de documentos web.
Ejemplos
Elementos básicos de la estructura de un documento HTML
Elementos de bloque y de línea
Etiquetas básicas
Atributos globales aplicables a cualquier etiqueta: id, class,
style, title
Listas y tipos
Encabezados
Tablas
Imágenes
Enlaces

12. EDITORES DE TEXTO PLANO
-Permite crear y modificar archivos digitales compuestos únicamente
por textos sin formato, conocidos como archivos de texto o “texto
plano”. -El programa lee el archivo e interpreta los bytes leídos
según el código de caracteres que usa el editor.
•Sublime Text (Windows/Mac/Linux, 50€) ...
•Atom (Windows/Mac/Linux, MIT) ...
•Adobe Brackets (Windows/Mac/Linux, MIT) ...
•Light Table (Windows/Mac/Linux, GPL) ...
•VIM (Windows/Mac/Linux, GPL) ...
•Eclipse (Windows/Mac/Linux, EPL) ...

13. EDITORES DE DOCUMENTO WEB
-Facilita 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 hasta editores.
•Sublime Test
•Brackets
•Dreamweaver
•Notepad++
•Amaya
•Kompocer

14. ELEMENTOS DE BLOQUE Y DE LÍNEA
ELEMENTOS DE BLOQUE
Ocupan por defecto todo el
ancho disponible.
De forma predeterminada,
comienzan en una nueva
línea
Los párrafos <p>, las listas
<ul> o <ol> son ejemplos de
este tipo de elementos.
ELEMENTOS DE LÍNEA
Ocupan solo el ancho
necesario.
Pero los elementos en línea
pueden comenzar en
cualquier parte de una
línea.
Las imágenes <img>, los
enlaces <a> y los botones
<button> son ejemplos de
este tipo de elementos.

15. ETIQUETAS BÁSICAS
Estructuras de una página web.
Formato d párrafos.
Formato de textos.

16. ESTRUCTURA DE PÁGINA WEB
<HTML> …
</HTML>
Delimita y engloba
toda la página web,
que consta de
cabecera y cuerpo.
<HEAD> … </HEAD>
Delimita y engloba la
cabecera de una página,
que contiene un conjunto
de informaciones que no
se muestran en la
ventana
<TITLE> … </TITLE>
Dentro de la cabecera
(HEAD), lo que se incluye
aquí se muestra en la barra
del título de la ventana del
navegador.
<BODY> …
</BODY>
Delimita y engloba el
cuerpo de la página,
que son el conjunto
de informaciones
(texto e imágenes

17. FORMATO DE PÁRRAFOS
El texto de la página se puede estructurar
en encabezamientos de los diferentes
apartados de la página, que pueden tener
distintos niveles de 1 a 6 (siendo 1 el más
importante) y párrafos normales.
<H1> ... </H1> o <H2> ... </H2> (hasta 6)
Párrafos que son
encabezamientos (con
distintos niveles).
<P>... </P>
<P align="center">... </P>
El atributo align permite
alinear el texto del párrafo.
Se puede aplicar igual a las
etiquetas <H1>, <H2>, etc
...
<BR>
Permite partir un párrafo
empezando una línea nueva
pero sin dejar espacio.
<HR>
Pone una linea horizontal de
separación. (admite atributos)

18. FORMATO DE TEXTOS
Formatos Físicos:
Negrita: <B>…</B>
Cursiva: <I>…</I>
Subrayado: <U>…</U>
Teletipo: <TT>…</TT>
Tachado: <STRIKE>…</ST
RIKE>
Grande: <BIG>…</BIG>
Pequeña: <SMALL>…</SM
ALL>
Superíndice: <SUP>…</SU
P>
Subíndice: <SUB>…</SUB>
Formatos Lógicos:
Cita: <CITE>…</CITE>
Código: <CODE>…</CODE
>
Definición: <DFN>…</DFN>
Énfasis: <EM>…</EM>
Grueso: <STRONG>…</ST
RONG>
Palabras
clave: <KEY>…</KEY>
Ejemplos: <SAMP>…</SAM
P>
Usuario: <KBD>…</KBD>

19. 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”.
Así podemos hacer que la lista esté definida por puntos
negros (li type=”disc”), por puntos con el fondo blanco (li
type=”circle”) o por cuadrados (li type=”square”).

20. EJEMPLO
<ul>
<li type="circle">Esto es un tipo de punto.</li
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>

21. 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.
En las listas ordenadas podemos hacer que el primer punto
comience con el número que nosotros queramos. Lo
conseguiremos gracias al atributo “value”.

22. EJEMPLO
<ol>
<li value="20">Este será el número 20. </li>
<li>Este será el 21. </li>
<li> Este será el 22. Y así sucesivamente. </li>
</ol>

23. TABLAS
Es un medio de organizar datos en filas y columnas y ha
sido adoptado por HTML como una forma de transmitir
información que, de otro modo, no sería comprendida tan
fácilmente.
Es un grupo de filas donde cada una contiene a un grupo
de celdas.

24. TABLAS
Una tabla básica puede ser creada usando
tres elementos, a saber:
<table> (el contenedor principal).
<tr> (representando a las filas contenedoras de
las celdas).
<td> (representando a las celdas).

26. IMAGENES
Se utiliza el elemento <img> ,este es un
elemento que no necesita un cierre pero
requiere de por lo menos un atributo para ser
utilizado (src o source).
El atributo src contiene una ruta que apunta
a la imágen ,puede ser una URL relativa o
absoluta.

27. IMAGENES
Por ejemplo, si tu imagen se llama dinosaur.jpg, y está en el
mismo directorio que tu página HTML, deberás incrustar la
imagen de la siguiente manera:
Si la imagen estaba en el subdirectorio imagen, que estaba
en el mismo directorio que la página HTML entonces
deberías incrustar la imagen así:

28. PERSONALIZACIÓN DE ESTILO
Significado de CSS y utilidad
Formas de colocación del código CSS
Selectores básicos
Colores
Texto
Bordes
Imagen de fondo

29. Significado de CSS y utilidad
Siglas de Cascading Style Sheets – (Hojas de Estilo en
Cascada )
Describe como se va a mostrar un documento en
pantalla, por impresora, por voz o en dispositivos táctiles
basados en Braille.
Sirve para permitir la separación de los contenidos de los
documentos escritos en HTML, XML, XHTML, SVG, o
XUL

30. SELECTORES BÁSICOS
Se utiliza para seleccionar todos los elementos de la página.
Se indica mediante un asterisco (*), no se utiliza
habitualmente, ya que es difícil que un mismo estilo se
pueda aplicar a todos los elementos de una página.
Se suele combinar con otros selectores además, forma parte
de algunos hacks muy utilizados.

31. COLORES
Cada código HTML comprende el símbolo
«#» y 6 letras o números. Estos números se
expresan en el sistema de numeración
hexadecimal. Por ejemplo «FF» en
hexadecimal representa el número 255 en
Decimal.

32. SIGNIFICADO DE LOS SÍMBOLOS:
Los dos primeros símbolos del código de color
HTML representan la intensidad del color rojo.
00 es el menos intenso y FF es el más intenso.
El tercer y el cuarto número representan la
intensidad del verde y el quinto y el sexto
representan la intensidad del azul.
Así, con esta combinación de la intensidad del rojo,
verde y azul podemos mezclar cualquier color

33. EJEMPLOS
Ejemplos:
#FF0000 - Con este código HTML le decimos al navegador que
muestre la máxima cantidad de rojo y nada de verde ni de azul. El
resultado es evidentemente el color rojo puro:
#00FF00 - Este código HTML muestra solo el verde y nada de rojo
ni de azul. El resultado es:
#0000FF - Este código HTML muestra solo el azul y nada de rojo ni
de verde. El resultado es:
#FFFF00 - Con la combinación de color rojo y verde obtenemos el
amarillo:
#CCEEFF - Cogemos un poco de rojo, un poco más de verde y el
máximo de azul para obtener el color del cielo:

34. TEXTO
La tipografía es uno de los elementos más importantes.
Debes tener siempre en cuenta los múltiples problemas que
pueden surgir desde el momento que decide establecer las
diferentes tipografías.
A continuación verás algunos comandos y ejemplos de
cómo establecer aspectos indispensables dentro de un texto
en idioma HTML.

35. SANGRÍA: TEXT-INDENT
Esto es un párrafo <p> normal y
corriente cuya primera línea tiene sangría.
Esto es un párrafo <p>
normal y corriente cuya primera
línea tiene sangría
Esto es un párrafo <p>
normal y corriente con
margen izquierdo y
cuya primera línea tiene
sangría negativa

36. ESPACIADO DE LETRAS: LETTER-SPACING

37. BORDES
CSS permite modificar el aspecto de cada
uno de los cuatro bordes de la caja de un
elemento.
Para cada borde se puede establecer su
anchura o grosor, su color y su estilo, por lo
que en total CSS define 20 propiedades
relacionadas con los bordes.

38. ANCHURA
La anchura de los bordes se controla con las
cuatro propiedades siguientes:

39. IMAGEN DE FONDO
La propiedad background-image define la
imagen de fondo de un elemento.
Valor inicial: ninguna
Se aplica a: todos los elementos
herencia: no
Porcentajes: N/A
Medio: visual
Valor calculada: URI absoluta o ninguna

40. EJEMPLO

41. RESULTADO

42. Gracias por su atención.