Presentación HTML

HTML
Trabajo realizado por:
-Gregorio Blázquez Martínez
-Manuel López Jiménez

HTML
HTML es la abreviatura de “HyperText Mark-up Language”, es
decir, “Lenguaje de marcado hipertextual”.
Básicamente se trata de un conjunto de etiquetas
predefinidas que el navegador interpreta a la hora de
construir una página para su visualización.
Por lo que HTML hace posible presentar información en
Internet (páginas web).

HTML no se considera un lenguaje de programación, pues
carece de ciertas características para serlo. Como pueden ser
la estructura de control y la toma de decisiones.
HTML indica al navegador como debe estructurar el contenido
junto con CSS, que le aporta el diseño y estilo, y JavaScript,
que le aporta interacción de la página con el usuario.
HTML

Las etiquetas son marcas que se usan para señalar el inicio y
el fin de un elemento.
Para indicar el final de las etiquetas se utiliza la misma que en la
apertura con el símbolo “/” ante el nombre. En el caso de aquellas
etiquetas que no necesitan cierre es aconsejable colocar la barra.
HTML
ETIQUETAS
Están encerradas por los
símbolos < > y escritas en
minúsculas
Etiquetas que pueden
contener texto u otras
etiquetas (las más
internas deben
cerrarse antes)
Etiquetas que no
pueden contener nada
en su interior y no se
pueden cerrar

Los atributos son valores adicionales que se agregan a las
etiquetas para definirlas o configurarlas.
HTML
Los atributos se incluyen siempre dentro de la etiqueta de inicio y llevan inmediatamente
detrás el signo de igual ("=") con los valores de dichos atributos entre comillas (""). El
punto y coma que sigue al atributo se usa para separar los diferentes comandos de estilo.
Ej: <img src=“imagen.jpg”
alt=“Cargando imagen” />

Estructura básica
de una página
HTML

Editores de texto
¿Qué son?
Programas que nos
pueden ayudar a la
hora de construir
una página web.
Técnicamente es un
software para editar
y crear código HTML.
Editores de texto plano
Permiten crear y modificar archivos
digitales compuestos únicamente
por textos sin formato, por lo que
necesitas conocer sus etiquetas y su
funcionamiento. Es aconsejable utilizar un
editor de texto plano que resalte las
etiquetas y atributos, para evitar errores.
Editores WYSIWYG
Significa “lo que ves es lo que obtienes”.
El editor convierte todas las entradas
directamente en HTML o CSS, por lo
que puedes editar el código HTML en el
diseño del sitio web correspondiente.

Editores basados en texto
• Notepad++; Microsoft
Visual Studio Express for
Web
Editores WYSIWYG
• WordPress; Joomla
Editores de texto

DOCTYPE
Es la primera etiqueta y la única que va en mayúsculas. Informa del tipo de archivo
que es.
<html> Se define justo después de DOCTYPE y contiene todo el documento.
<head>
Es la primera parte del <html>, indica la información general sobre la página web
(contiene a la etiqueta <tittle>).
<meta
charset=“UTF-8”>
Va incluido en <head> e indica el tipo de codificación de los caracteres que va a utilizar
el editor (es recomendable usar la codificación UTF-8).
<body> Va a continuación de <head> y es el contenido que mostrará la página.
Elementos básicos de su estructura
DOCTYPE

Una etiqueta de línea es aquella que ocupa el espacio
mínimo necesario en horizontal, y permite que otro
elemento se coloque a su lado.
En cambio una etiqueta de bloque, ocupa todo el ancho
disponible y no permite que otro elemento se coloque a
su lado (aunque aparentemente tenga lugar suficiente).
Editores de texto plano y de documentos
web
Delínea
<a>, <span>, <strong>, <img>,
<input>, <code>
Debloque <h1>, <h2>, <h3>, <p>, <ul>,
<li>, <div>, <header>, <nav>,
<section>, <article>, <footer>,
<form>, <table>

Etiquetas básicas
Dentro de la sección del cuerpo (<body> ... </body>) utilizaremos etiquetas HTML para
crear el contenido visual de la web. Estas etiquetas nos permitirán ir añadiendo textos,
imágenes, encabezados, tablas, etc. para componer el diseño de la web.

Atributos globales: id, class, style, title
Los atributos globales son atributos comunes a todos los
elementos HTML; pueden usarse en todos los elementos,
aunque pueden no tener efecto en algunos.
• id: define un identificador único (ID) el cual debe ser único en todo
el documento.
• class: especifica uno o más nombres de clases de un elemento (se
refiere a una clase en una hoja de estilo).
• style: especifica una línea de estilo CSS de un elemento.
• tittle: especifica información adicional acerca de un elemento. Será
mostrada por un globo al poner el puntero encima.
<element id="id">
<p class="important">Este es un párrafo importante</p>
<p sytle="color: green">Párrafo verde</p>
<p title="mensaje">Este texto tiene un tooltip</p>

Listas no
ordenadas
•Etiqueta <ul> y </ul>
•Sin orden
•Cada elemento de la lista va dentro de la
etiqueta <li> y su cierre.
•Podemos elegir el tipo de símbolos
“type”Listas
ordenadas
•Etiqueta <ol> y </ol>
•Ordenados:
-“Value”
Tipos de listas

• Crean títulos para diferentes secciones y subsecciones.
• Hay desde <h1> hasta <h6>, y necesitan un cierre.
Encabezados

• Es un elemento de bloque que estructura datos en filas y
columnas.
Tablas
Elemento
dentro de la fila
(columna)
Etiqueta de tabla y atributo de borde (1px)
Fila de la tabla

Imágenes
•<img> elemento (en línea) básico.
Atributos
•src = “x” indica la dirección de la imagen.
•border, señala los píxeles del borde.
•alt, ofrece un texto en caso de que no se cargue la foto.
•width y height, indican el ancho y alto en píxeles.

<a>, es la etiqueta básica.
Páginas externas
Pueden ser referencias
Páginas locales
Atributos
href es indispensable e indica la dirección de la página.
target es opcional y permite abrir el enlace en otra pestaña.
Enlaces
<a href=“https://gregorioymanueltic.blogspot.com/”> Blog de Goyo </a>
<a href=“https://manuelygregoriotic.wordpress.com/”> Blog de Manu </a>

Personalización del
estilo: CSS

Significado de CSS y utilidad
CSS Lenguaje usado para la presentación de html.
(Cascading Style Sheets)
Nos permite personalizar el texto, el fondo y
muchos elementos más relacionados con el
diseño de la página.

Formas de colocación del código CSS
Dentro
de html
Atributo style
•Inserta el código html directamente como un atributo.
•Implica tener que repetir el código cada vez que se quiera usar
por lo que es desaconsejable para aspectos generales.
Etiqueta <style>
•Afecta a todo el documento.
•Suele incluirse dentro del <head>
•Solo afecta al documento actual.
Archivo independiente
•Es un archivo .css
•Se relaciona con el archivo html mediante una etiqueta <link> en
la cabecera.

Selectores básicos
Definen sobre qué elementos se aplicará un conjunto de
reglas.
Selectores
Selectores de tipo: afecta a todos los elementos del
mismo tipo, como puede ser los enlaces <a>.
Selectores de clase: mediante el atributo class en
HTML se modifican todos los elementos a los que les
apliquemos este atributo. En css el selector debe ir
precedido por un .
Selectores id: se le asigna a un único elemento al que
le asignamos un identificador. En css el selector debe
ir precedido por un #

Colores
Para cambiar el color del texto utilizamos color
Para cambiar el color del fondo background-color
Podemos elegir el color por el nombre o mediante
valores RGB

Alineación de texto Text-align Valores más comunes: left, right, center y justify
Subrayado Text-decoration Valores más comunes: underline, overline, none
(quita el subrayado) y line-throught (tachado)
Mayúsculas y minúsculas Text-transform Valores más comunes: uppercase, lowercase y
capitalize
Tamaño del texto Font-size Podemos darle valores por píxeles, puntos,
porcentajes o mediante valores relativos
Tipo de fuente Font-family El programa busca en una lista y si no encuentra
el valor dado da uno predeterminado. Los
nombres compuestos van entre “”
Cursiva Font-style italic aplica cursiva y normal retira esta propiedad
Grosor del texto Font-weight Pocas fuentes lo permiten, generalmente se
utiliza bold que transforma el texto a negrita
Sombreado text-shadow Podemos personalizar el sombreado
Texto

Bordes
Podemos poner un borde con border
Sus principales usos son: border-width, border-style, border, border-color,…

Bordes
Podemos elegir el tamaño de los elementos
con width y height.
Para algunps elementos tenemos que utilizar:
Max-width y max-height
Min-width y min-height
Valores máximos y
mínimos.

Márgenes
Margin: margen exterior.
Padding: margen interior.
Aceptan porcentajes y píxeles.

Posicionamiento
Position:static •Por defecto.
•Añade un salto de línea tras el elemento anterior.
Position:relative •Mediante las propiedades top, bottom, left y right podemos cambiar su
posición sin que influya al resto de elementos.
Position:absolute •Esquina superior izquierda del elemento.
•En una capa superior (su espacio queda libre).
Position:margin-top
Position:margin-left
•Permiten mover los elementos.
•Si le damos valores dejan de tener como referencia el elemento
anterior y les damos una posición referente a toda la página.
Position:fixed •Similar a absolute.
•Siempre visible (barras de herramientas).

Imágenes de fondo
Background-image Para insertar una imagen de fondo introducimos el url de la imagen
en background-image.
Background-position Si la imagen es demasiado pequeña podemos elegir su situación
con: left, right, top, center o bottom.
Background-repeat Si la foto es más pequeña que el elemento, podemos controlar si se
repite y la manera de hacerlo con: no-repeat, x-repeat, y-repeat.
Por defecto si la imagen es más
pequeña que el elemento esta se
repite

Presentación HTML

Más contenido relacionado

La actualidad más candente

Similar a Presentación HTML

Último

Presentación HTML