Html

Hecho por: Pedro López y Pablo Amorín.

 SIGNIFICADO HTML Y UTILIDAD
 ¿POR QUÉ HTML NO ES UN LENGUAJE DE
PROGRAMACIÓN?
 ETIQUETAS
 ATRIBUTOS

 HTML( hypertext markup languaje) se
trata de un lenguaje utilizado para
estructurar páginas web, aunque no se
concibe como un lenguaje de
programación como tal; se trata de un
conjunto de etiquetas predefinidas que el
navegador web interpreta a la hora de
construir la visualización de la página.

Dado a su carencia de elementos propios
del lenguaje tales como estructuras de
control y toma de decisiones, por lo que se
puede definir HTML como una serie de
instrucciones o etiquetas que indican al
navegador como estructurar su contenido.

Cada etiqueta tiene un nombre propio y está
encerrada entre los símbolos “<” y “>”, también
existen los que no están encerrados entre los
símbolos. Algunos ej:
• Párrafo: <p>Contenido del párrafo.</p>
• Salto de línea: <br/>
• Párrafo con contenido en negrita:<p>Texto
normal y <strong>texto en
negrita.</strong></p>

Son valores adicionales que se agregan a una
etiqueta para configurarla o definir su
comportamiento. Se usan únicamente en la
etiqueta de apertura.
 Ejemplo:
Imagen atributo src y alt.

 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

Para crear documentos HTML, su pueden usar
editores de texto plano, (No son
recomendables “microsoft Word” o
“LibreOfice Writer”)

 DOCTYPE. Información de archivo del
documento.
 <html>. Contiene todo el documento.
 <head>. Primer elemento en <html>
información general de la pagina web.
 <meta charset=“UTF-8”/>. Indicar el tipo
de codificación, se recomienda el UTF-8.
 <body>. Es el contenido del archivo

Elementos de bloque Elementos de línea
• Ocupan todo el ancho
del elemento que los
contiene.
• Los elementos que van
detrás del de bloque
siempre se sitúan
debajo.
• solo puede contener
algunos elementos en
bloque y elementos en
línea.
• Ej:(<p>), (<div>) y
(<table>)
• Ocupan solo el ancho
necesario.
• Se sitúan uno junto a
otro hasta ocupar el
ancho disponible.
• Solo pueden contener
otros elementos en
línea.
• Ej:(<img>), (<a>) y
(<strong>).

 División:<div> Divide la página en secciones.
 Párrafo:<p> Representa un párrafo y solo puede
englobar elementos en línea.
 Agrupar elementos en línea:<span> Se diferencia
de <div> en que no define un bloque.
 Subrayado:<u>
 Cursiva o énfasis:<em>
 Negrita o texto destacado:<strong>
 Subíndice:<sub>
 Superíndice:<sup>
 Salto de línea:<br>
 Separación horizontal:<hr> Dibuja una línea de
separación horizontal.

Etiqueta Atributo
Id Identifica una etiqueta de forma
única en el documento HTML.
Class Agrupa varias etiquetas bajo un
estilo común cuando se aplica
código CSS a la página.
Style Se usa para aplicar un estilo
mediante CSS directamente a un
elemento.
title Sirve para elaborar una
descripción corta.

Es una estructura que engloba un conjunto de
elementos que la componen. Existen dos
tipos, las ordenadas y las desordenadas.
Los elementos que componen la lista se
representan con la etiqueta <li>.
 La lista ordenada se representa con la
etiqueta <ol>.
 La lista desordenada se representa con la
etiqueta <ul>.

Son párrafos especiales destinados a la
creación de títulos para las diferentes
secciones y subsecciones de una página web.
Están definidos por las etiquetas <h1> hasta
<h6>, según importancia.

Se usa para estructurar una serie de datos
alineados según un esquema de filas y
columnas
Las filas se representan con la etiqueta <tr>, y
solo contienen celdas o <td>
Para fusionar celdas se usan los atributos
“colspan” (hacia la derecha) y “rowspan”
(hacia abajo).

Las imágenes se representan con la etiqueta
<img> que no va acompañada de etiqueta de
cierre. Algunos atributos son:
 Con el atributo src marcamos la ruta a seguir
para que la imagen sea encontrada entre
nuestros archivos
 El atributo alt nos permite añadir texto a esta
imagen.
 Los atributos width y height se pueden utilizar
para modificar el tamaño de la imagen.

Son vínculos a otras páginas, la etiqueta
utilizada par crear un enlace es <a>.
Los atributos de esta etiqueta son: href (para
incluir una ruta hacia la página con que
enlazará) y target, cuyo valor _blank (para
que el navegador la abra en una pestaña o
página nueva).

 SIGNIFICADO DE CSS Y UTILIDAD
 FORMAS DE COLOCACIÓN DEL CÓDIGO CSS
 SELECTORES BÁSICOS
 COLORES
 TEXTO
 TAMAÑO
 BORDES
 MÁRGENES
 POSICIONAMIENTO
 IMAGEN DE FONDO

Es el lenguaje usado para definir el modo de
presentar el código HTML de una página web.
Permite separar la estructura de un documento
de su diseño o presentación, así, para
realizar cambios en el documento general,
solo sería necesario modificar dicho archivo y
non cada uno de los documentos HTML.

Existen tres formas distintas de vincular código
CSS a una estructura HTLM:
 En un atributo HTML, con el atributo style
 Con la etiqueta <style>
 En un archivo independiente, este archivo
tendrá una extensión .css

Sirven para modificar propiedades y hay varios tipos:
 Selectores por tipo, afecta a todos los elementos del
mismo tipo en el documento HTML.
 Selectores de clase (debe ir precedido por un
punto), representa clases añadidas a elementos
HTML mediante el atributo class, afecta a los
elementos para los que se haya establecido dicha
clase
 Selectores de id corresponde al valor de un atributo
de un elemento, y afecta solo a ese elemento

Para modificar el color de texto se usa la
propiedad color, mientras que para el color de
fondo se emplea background-color.
Los métodos para establecer los valores cromáticos
son:
 Nombre del color.
 Proporción de cada valor RGB en código
hexadecimal precedido de almohadilla.
 Proporción de cada valor RGB en decimales, de 0
a 255.
 Proporción de cada valor RGB en porcentajes.
 Proporción de cada valor RGB, más un valor de 0
a 1 que indica la transparencia de dicho color.

Estas son algunas de las propiedades que modifican
el aspecto de un texto:
 Alineación del texto (text-align)
 Subrayado (text-decoration)
 Transformación mayúsculas/minúsculas (text-
transform)
 Tamaño del texto (font-size)
 Tipo de fuente (font-family)
 Cursiva (font-style)
 Grosor del texto (font-weight)
 Sombreado (text-shadow)

Por defecto los elementos de bloque ocupan
todo el tamaño disponible, pero mediante las
propiedades CSS se puede modificar su altura
y anchura, las propiedades son:
 Display.block el elemento se comporta como
un bloque <div>
 Dispay.inline el elemento se comportara
como un elemento en linea
 Display inline-block se comporta como un
elemento de liena pero se estable como
bloque.

Los bordes pueden ser completos o pueden ser
parciales. Algunas propiedades son:
 Border-width Añade grosor al borde de los cuatro
lados se mide en px.
 Border-style cambia el tipo de trazo que
delineará el borde (solid, dashed…).
 Border-color permite cambiar el color del borde.
 Border propiedad genérica que permite
modificar las tres anteriores a la vez
 Border-radius hace referencia la radio de
curvatura de la esquina de un elemento.

Es la manera de establecer un espacio entre
dos elementos:
 Margin. Representa el espacio entre un
elemento y los elementos que lo rodean.
 Padding.representa el margen interno de un
elemento y su contenido.
 Todos los tipos de márgenes se miden en px.

 Position static. Es el valor por defecto del
posicionamiento.
 Position relative. En su propiedad position
ocupara el mismo valor que si fuera static, pero
se puede modificar mediante bottom, top etc.
 Position absolute. Se sitúa en la esquina superior
izquierda
 Margin top y margin left. Es el posicionamiento
en pixeles respecto de otros elementos.
 Position fixed. Es la colocación del cuadro de
texto respecto de la ventana, de manera que al
moverte por ella su posición respecto a ti no
varie.

Se usan estas propiedades:
 Background-image. Su valor será la ruta a la
imagen desde el directorio donde se
encuentra el archivo.
 Background-position. En caso de que la
imagen sea más grande, se puede modificar
mediante los valores de alineación horizontal
y vertical.
 Background-repeat.En caso de que sea más
pequeña se pondrá por defecto del tamaño
del elemento.

Html

Más contenido relacionado

La actualidad más candente

Similar a Html

Último

Html