Lenguaje html

1. Lenguaje HTML
1. Significado de HTML y utilidad
2. ¿Por qué HTML no es un lenguaje de programación?
3. Etiquetas
4. Atributos
2. Estructura básica de una página HTML
1. Editores de texto plano y editores de documentos web. Ejemplos
2. Elementos básicos de la estructura de un documento HTML
3. Elementos de bloque y de línea
4. Etiquetas básicas
5. Atributos globales aplicables a cualquier etiqueta: id, class, style, title
6. Listas y tipos
7. Encabezados
8. Tablas
9. Imágenes
10. Enlaces
3. Personalización del estilo: CSS
1. Significado de CSS y utilidad
2. Formas de colocación del código CSS
3. Selectores básicos
4. Colores
5. Texto
6. Tamaño
7. Bordes
8. Márgenes
9. Posicionamiento
10. Imagen de fondo

1. LENGUAJE HTML
 1. Significado de HTML y utilidad
• Es un lenguaje de marcado que se utiliza
para el desarrollo de páginas de Internet. Se
trata de la sigla que corresponde a
HyperText Markup Language, es decir,
Lenguaje de Marcas de Hipertexto, que
podría ser traducido como Lenguaje de
Formato de Documentos para Hipertexto.

1. LENGUAJE HTML
 2. ¿Por qué HTML no es un lenguaje de
programación?
• HTML es un lenguaje utilizado para
describir una estructura (en este caso,
un documento o una página web), no
para describir computaciones.

1. LENGUAJE HTML
 3. Etiquetas
• Son fragmentos de texto rodeados por
corchetes angulares < >, que tienen
funciones y usos específicos y se utilizan
para escribir código HTML.
• La etiqueta de apertura y la de cierre son las
misma con la única diferencia de la diagonal
"/"

1. LENGUAJE HTML
 4. Atributos
• Los atributos son valores adicionales
que se agregan a una etiqueta para
configurarla o definir su comportamiento.
• Existen atributos propios y exclusivos de
algunas etiquetas.

ESTRUCTURA BÁSICA DE
UNA PÁGINA HTML

2. ESTRUCTURA BÁSICA DE UNA PÁGINA HTML
 1. Editores de texto plano y editores de
documentos web. Ejemplos.
 Lo único que necesitamos para crear
una web es un simple editor de texto
plano y nuestra imaginación.
 El propio bloc de notas , Brackets
Kompozer son ejemplos de ellos.

 2. Elementos básicos de la estructura de
un documento HTML.
DOCTYPE
• Tipo de
archivo
<html>
• Elemento
raíz
<head>
• Información
general
• <title> :
muestra
título
<meta
charset=“UTF-
8”/>
• Indica el tipo
de
codificación
de
caracteres
<body>
• Contenido
que se
mostrará al
usuario

 3. Elementos de bloque y de línea.
Bloque
Ocupan todo el ancho
disponible
Los elementos posteriores se
sitúan debajo de este
Pueden contener otros
elementos de bloque o línea
Párrafos :(<p>)
Listas :(<ul>,<ol>)
Bloques de división:(<div>)
Tablas:(<table>)
Línea
Ocupan solo el ancho necesario
Los elementos posteriores se
sitúan uno junto al otro
Solo pueden contener otros
elementos de línea, texto o
imágnes
Imágenes :(<img>)
Enlaces :(<a>)
Botones:(<button>)
Texto resaltado:(<strong>)

 4. Etiquetas básicas
• División:<div>
• Párrafo: <p>
• Agrupar elementos en línea: <span>
• Subrayado: <u>
• Cursiva: <em>
• Negrita: <strong>
• Superíndice: <sup>
• Subíndice: <sub>
• Salto de línea: <br>
• Separación horizontal: <hr>
o Todas llevan cierre

 5. Atributos globales aplicables a cualquier
etiqueta: id, class, style, title.
 id: para identificar un etiqueta de forma única en el documento
HTML.
 Class: para agrupar varias etiquetas bajo un estilo común cuando se
aplica código CSS a la página.
 Style: para aplicar un estilo mediante CSS directamente a un
elemento.
 Title: para elaborar una descripción corta de un elemento.

 6. Listas y tipos.
 Una lista es una estructura oba un conjunto de elementos que la componen.
Existen tres tipos de listas:
 ORDENADAS: se representa con la etiqueta <ol></ol>. Admite varios atributos
como reversed, start y type, que indica que numeral se va a utilizar
(1:números; a:letras minúsculas; A: letras mayúsculas; I:números romanos;
i:números romanos en minúsculas.
 DESORDENADAS: no siguen un orden correcto.
 ANIDADAS: listas internas en el interior de un elemento de otra lista principal.

 7. Encabezados
 Son párrafos especiales destinados a la creación de títulos para las
diferentes secciones y subsunciones de una página web.
 Están definidos por las etiquetas <h1> </h1>(mayor nivel) hasta <h6>
</h6> (menor nivel).

 8. Tablas
 Elemento de bloque empleado para estructurar datos alineadas según un
esquema de filas y columnas.
 Las filas se representan con <tr> </tr> que solo contienen celdas o <td>.
¿Cómo unir celdas?
 Utilizando atributos con la etiqueta <td>, como colspan y rowspan

 9. Imágenes.
 Elementos en línea.
 Etiqueta <img>, sin cierre.
 La ruta del archivo se establece con el atributo src.
 Si la imagen es externa se debe incluir la URL
completa.
 <img src=“../imágenes/img.jpg” alt=“Bosque” />
 El atributo alt incluye texto alternativo.

 10. Enlaces
 Vínculos a otras páginas (locales o externas).
 Etiqueta <a> y </a>
 Atributos href (incluir la ruta)
 Target, cuyo valor _blank (página o pestaña
nueva)
 <a href=https://google.com>Enlace a
Google</a>

PERSONALIZACIÓN DEL
ESTILO: CSS

3.PERSONALIZACIÓN DEL ESTILO: CSS
 1. Significado de CSS y utilidad.
 Lenguaje que define el modo de presentar el código
HTML.
 Permite separar la estructura de un documento (HTML) y a
su diseño o presentación (CSS).
 Un solo archivo CSS modifica el aspecto de varios HTML.

 2. Formas de colocación del código CSS
• Permite insertar código CSS
• Se debe de repetir para todos los valores
En un atributo
HTML, con
atributo style
• Establece diseño general y afecta a todo
el documento
• Se incluye en la cabecera , dentro de
<head>
Con la etiqueta
<style>
• Debe tener extensión .css
• Se inserta en la cabecera:
• <link rel=“stylesheet” href=css/estilo.css”
type=“text/css” />
En un archivo
independiente

 3. Selectores básicos
 Contienen una serie de reglas que modifican el aspecto de elementos
• Se escribe nombre de la etiqueta
• Afectan a todo elemento, como párrafos <p> o
enlaces <a>
Por tipo
• Va precedido de (.) .class
• Representa una clase añadida a uno o varios
elementos.
De clase
• Afecta solamente a un elemento
• Va precedido de (#) #id
• El selector de mayor prioridad será el que afecte al id
De id

 4. Colores
 Modifican el color del texto
 Métodos para establecer un valor cromático.
 Nombre del color: BLUE, RED
 RGB en código hexadecimal precedido de almohadilla: #FF0000
 RGB en decimales, de 0 a 255: rgb(255,0,0).
 RGB en porcentajes: rgb(100%, 0%, 0%).
 RGB, más un valor de 0 a 1 (transparencia): rgba(255, 0, 0, 0.5).

 5.Texto
 Alineación de texto: left, right, center y justify
 Subrayado: underline y line-through (tachado)
 Transformación mayus/minus: uppercase y lowercase; capitalize (1º
mayus)
 Tamaño : px, pt, %, x-small, small, medium, large o x-large
 Fuente: serif, sans-serif…
 Cursiva: valor italic la transforma y normal lo retira
 Grosor: valor bold lo transforma en negrita y normal lo elimina.
 Sombreado: text-shadow: -px

 6. Tamaño
 Viene definido por width (ancho) y height (alto).
 Pueden tener valor en pixeles o porcentaje.
 Se establecen las siguientes propiedades :
• Display: block. elemento de bloque, divisor (<div>) o párrafo.
• Display: incline. Elemento de línea.
• Display : incline-block. Elemento de bloque que se comporta como elemento en
línea.

 7. Bordes
 Border-width: añade grosor y se establece en píxeles (px). Se debe indicar cada lado
(border-left- width; right; top; bottom…)
 Border-style: tipo de trazo del borde
 Solid: continua
 Dashed: discontinua
 Dotted: punto
 Double: continua doble
 Border-color: color del borde. Se indica el lado que se desea modificar.
 Border: medida, estilo y color separados por espacio.
 Border-radius: radio de curvatura de las esquinas
 Para aplicar diferentes se establecen valores diferentes en cada esquina con sus
cuatro medidas.

 8. Márgenes
 CSS dispope de dos propiedades:
• Margin: espacio entre elementos o con el borde. Se utilizan px o
porcentaje.
• Padding. Espacio interno entre un elemento y su contenido. Usa los
mismos valores que margin.
• Para modificar de manera individual cada lado, se utilizan los sufijos –
left, -rigth, -top y –bottom.

 9. Posicionamiento
 Consiste en dibujar un elemento en un lugar distinto al original.
CSS position:
 Static: valor por defecto que después de cada elemento de bloque realiza
un salto de línea.
 Relative: igual que static pero utilizando las propiedades top, bottom, left y
right que desplazan un elemento una cantidad de píxeles: top:10px
 Absolute: se sitúa el elemento en la esquina superior izquierda.
 Margin-top y margin-left: se utilizan top, left, right, bottom, left: 0px;
bottom:20px
 Fixed: similar al absolute pero utiliza la ventana y no el documento.

 10. Imagen de fondo
 Background-image. Es la ruta a la imagen donde esta el
CSS. Debe incluirse entre comillas y paréntesis, precedida
de url, así: background- image: url(´../img.png´)
 Background-position. La imagen es más pequeña que el
elemento, establesce la alineación vertical y horizontal.
Puede ser left, center o right (horizontal) y top, center o
bottom (vertical)
 Background-repeat. La imagen es más pequeña que el
elemento, se repite por defecto hasta ocupar todo el
espadio. Se modifica con no-repeat, repeat-x y repeat-y.

Lenguaje html

Más contenido relacionado

La actualidad más candente (16)

Similar a Lenguaje html (20)

Último (20)

Lenguaje html