Capitulo HTML CSS

MARCO TEÓRICO
Actualmente es importante reconocer la importancia de los Sitios Web para dar a

conocer y difundir los procesos pedagógicos aprendidos en la institución educativa
Técnico Humanístico José Luis Suarez Guzmán como también para realizar a través
de ellos intercambios educativos, culturales, entre otros.
Un sitio web es un sitio en la World Wide Web (red informática mundial) que
contiene documentos (páginas web) organizados en forma descendente. Cada
documento (página web) contiene textos y o gráficos que aparecen como
información digital en la pantalla de un ordenador. Un sitio puede contener una
combinación de gráficos, textos, audios, vídeos, y otros materiales dinámicos o
estáticos.
Nuestro sitio web contiene una página de inicio, que es el primer documento que ve
el usuario cuando entra en el sitio web poniendo el nombre del dominio de este sitio
web en un navegador.
Los sitios web están escritos en HTML (Hyper Text Markup Language), y se
acceden usando un software llamado navegador web, también conocido como un
cliente http.
Un sitio web está alojado en una computadora conocida como servidor web,
también llamada servidor HTTP, y estos términos también pueden referirse al
software que se ejecuta en esta computadora y que recupera y entrega las páginas
de un sitio web en respuesta a peticiones del usuario. Apache es el programa más
comúnmente usado como servidor web (según las estadísticas de Netcraft) y el
Internet Information Services (IIS) de Microsoft también se usa comúnmente.
Un sitio web estático es uno que tiene contenido que no se espera que cambie
frecuentemente y se mantiene manualmente por alguna persona o personas.
A través del sitio web se logra tener una comunicación dinámica e interactiva donde
el usuario puede tener acceso e informarse rápida y eficazmente acerca de los
procesos que suceden en el interior de una comunidad o mundo.
Concepto del HTML.-Es un lenguaje web, el HTML5 provee básicamente tres

características: la estructura, estilo y funcionamiento de ella. Esta nos dará los
elementos necesarios de donde se deben ubicar los contenidos estáticos y
dinámicos esta es como una base para aplicaciones. Cada una de estas tiene HTML
separados.
Los documentos HTML son archivos que acaban con .HTML. Un navegador lee el
archivo y muestra su contenido para los internautas de la red para que puedan
verlo.
Los elementos HTML suelen dividirse en tres partes. Esta combinación de las tres
crea un elemento HTML que usamos en nuestro proyecto pero primero debemos
saber cómo realizarlo y que etiquetas usar antes y como usarlos y para que
funcionan.
 Etiqueta de apertura: Se utiliza para indicar dónde empieza un elemento.

Está envuelta en corchete de apertura y cierre. Por ejemplo puedes usar la
etiqueta de inicio <p> para crear un párrafo.
 Contenido: El contenido es el resultado que ve la audiencia.
 Etiqueta de cierre: Es lo mismo que la etiqueta de apertura pero con una
barra inclinada delante del nombre del elemento. Es decir, </p> para finalizar
un párrafo.
Otra parte fundamental de un elemento HTML son los atributos. Estos tienen dos
secciones:
 Nombre: El nombre identifica la información adicional que un usuario quiere

agregar.
 Valor del atributo: Da más detalles que el anterior.
Hay una serie de etiquetas que son las más usadas para crear cualquier documento
HTML, a continuación las explicamos:
<body> </body>:Indica la parte del cuerpo del contenido de un documento HTML.

Es una etiqueta esencial para cualquier documento ya que indica donde empieza el
contenido visible del documento.
<head></head>:La parte superior del documento HTML, es donde podremos

indicar los metadatos: título del documento, formatos de codificación, hojas de
estilos, CSS.
<div> </div>:Un elemento que es usado mayormente para agrupar otros elementos
y actuar como plantilla de otros controles. La etiqueta <div> nos ayuda a estructurar
el documento en secciones.
<a> </a>:Es una etiqueta que nos ayuda a poder crear un enlace a una página web.
El atributo principal de la etiqueta HTML es href, donde pondremos el enlace al que
queremos conectar.
<strong> </strong>:Si tienes mucho texto, es importante poder dar énfasis a una
parte en concreto, con la etiqueta strong lo podemos hacer.
Ejemplo HTML:
Quiero cuidar <strong>a ese perrito</strong>.

<Br>:Con esta etiqueta HTML le podemos decir al navegador que viene un salto de
línea. Nos sirve para hacer el texto más leíble.
<H1> </H1><H2></H2>… <H6> </H6>: Hay diferentes niveles de títulos, del 1 al 6.

Las etiquetas <H + su número> nos permiten indicar la importancia del título y para
estructurar el contenido, de esta forma ayudamos a entender la importancia del
contenido.
<IMG> </IMG>:Usamos la etiqueta IMG para mostrar imágenes dentro del

contenido. Necesita el atributo src para funcionar, ya que será donde indicaremos
desde donde tiene que mostrar la imagen.
<ol> <li></li> </ol> | <ul> <li></li> </ul>:Las etiquetas OL y LI nos sirven para
crear listas, OL para listas ordenadas y UL para listas sin orden. Dentro de las listas,
los elementos se identifican con la etiqueta LI.
Ejemplo HTML:
<ul>
<li>Primera palabra</li>
<li>Segunda palabra</li>
</ul>
<p> </p>:Etiqueta que nos sirve para agrupar texto dentro de un párrafo. El
propósito es poder hacer el contenido más fácil de leer y organizado.
Concepto CSS.-(Cascading Style Sheet) tambien llamada Hoja estilo en cascada,

es la especificación de CSS es presentada en módulos que permiten a la tecnología
proveer una un aspecto único y hermoso en la presentación visual del documento.
Cuando la especificación de HTML5, fue escrita considerando CSS a cargo del
diseño, las especificaciones propuesta había sido ganada por el CSS.
Características del CSS
Font-family: Define la familia tipográfica. Esta opción es sólo recomendable si

tenemos la licencia de una fuente (como Word o bloc de notas) o necesitamos una
fuente que no se encuentre en el sitio de Google.
Font-size: Define el tamaño de la fuente y el valor se puede escribir en pixels, el

pixel es un valor relativo a la resolución de la pantalla.
Color y background-color: Define el color de la tipografía y background-
color, define el color de fondo.
Son 3 pares de caracteres que corresponden a RGB. La escala que se utiliza es la
siguiente: donde 0 es negro y F es blanco, por lo tanto: #000 es negro y #FFF es
blanco.
Width: Define el ancho de un elemento, el valor se puede escribir en pixels o

porcentaje. Las etiquetas de bloque tienen por defecto un width de 100%.
Height: Define el alto de un elemento, el valor se puede escribir en pixels o

porcentaje. Esta propiedad hay que usarla con cuidado porque es preferible dejar
las cajas con altura sin definir para que se estiren automáticamente cuando el
contenido se modifique o se acomode a otros dispositivos.
Padding: Es la distancia desde el borde de un elemento hasta su contenido. Si no

lo tiene, se vería igual usando margin para generar los espacios. Esta propiedad se
suele definir en una regla con selector universal para que todos los elementos del
sitio se comporten igual.
Margin: Es la distancia entre un elemento y otro (desde el borde de un elemento

hacia afuera). Muchas etiquetas HTML tienen margin por defecto por ejemplo: el
body, los encabezados, los párrafos y las listas.
Border: Define el borde de un elemento, su color, su estilo y grosor.

Capitulo HTML CSS

Cargado por

Copyright:

Formatos disponibles

Capitulo HTML CSS

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Capitulo HTML CSS

Cargado por

Copyright:

Formatos disponibles

MARCO TEÓRICO

Actualmente es importante reconocer la importancia de los Sitios Web para dar a

Concepto del HTML.-Es un lenguaje web, el HTML5 provee básicamente tres

 Etiqueta de apertura: Se utiliza para indicar dónde empieza un elemento.

 Nombre: El nombre identifica la información adicional que un usuario quiere

<body> </body>:Indica la parte del cuerpo del contenido de un documento HTML.

<head></head>:La parte superior del documento HTML, es donde podremos

Quiero cuidar <strong>a ese perrito</strong>.

<H1> </H1><H2></H2>… <H6> </H6>: Hay diferentes niveles de títulos, del 1 al 6.

<IMG> </IMG>:Usamos la etiqueta IMG para mostrar imágenes dentro del

Concepto CSS.-(Cascading Style Sheet) tambien llamada Hoja estilo en cascada,

Características del CSS

Font-family: Define la familia tipográfica. Esta opción es sólo recomendable si

Font-size: Define el tamaño de la fuente y el valor se puede escribir en pixels, el

Width: Define el ancho de un elemento, el valor se puede escribir en pixels o

Height: Define el alto de un elemento, el valor se puede escribir en pixels o

Padding: Es la distancia desde el borde de un elemento hasta su contenido. Si no

Margin: Es la distancia entre un elemento y otro (desde el borde de un elemento

Border: Define el borde de un elemento, su color, su estilo y grosor.

También podría gustarte