Html power

 Es un conjunto de etiquetas predefinidas
que el navegador interpreta a la hora de
construir una página web.
 También se puede definir como una
serie de instrucciones o etiquetas que
indican al navegador cómo debe
estructurar el contenido.
¿QUÉ ES?
ETIQUETAS
Una etiqueta HTML consta de un nombre que la define encerrado por los símbolos
< y >, y escrito en minúsculas. Unas contienen texto y otras representan partes de
una estructura. Las etiquetas con contenido se deben cerrar para definir con
precisión qué engloban.
Hay etiquetas que no se pueden cerrar como las imagenes o los saltos de línea.
Párrafo
<p>
Salto de
línea <br />
Párrafo con
contenido en
negrita
<strong>

ATRIBUTOS
Son valores adicionales que se agregan a una etiqueta para configurarla o definir
su comportamiento. Existen atributos propios y exclusivos de algunas etiquetas,
como atributos globales aplicables a cualquier etiqueta.
Cada atributo tiene un nombre que define la propiedad que modifican y un valor
encerrado entre comillas dobles. Los atributos se agregan después del nombre de
la etiqueta, separados por un espacio de dicho nombre y del resto de atributos.
El atributo ‘src’ indica cuál es el archivo que contiene la imagen que se debe
mostrar, mientras que el atributo ‘alt’ se utiliza para mostrar un texto alternativo.

Editores de texto plano y editores de documentos web
Un editor de texto es un programa informático que permite crear y
modificar archivos digitales compuestos únicamente por textos sin formato, El
programa lee el archivo e interpreta los bytes leídos según el código de caracteres
que usa el editor.
Los editores de texto son incluidos en el sistema operativo , y se usan para crear o
modificar archivos de texto como archivos de configuración, lenguaje de
programación interpretado (scripts) o el código fuente de algún programa.
ELEMENTOS BÁSICO
HTML
DOCTYPE
<HTML>
<HEAD>
<META CHARSET=“UTF-8”
/>
<BODY>

De bloque
 Ocupan todo el ancho
disponible dentro del
elemento que los
contiene.
 Los elementos situados
tras un elemento de
bloque siempre se
sitúan debajo de este,
aunque se modifique
su ancho.
 Pueden contener otros
elementos de bloque.
 Los párrafos, los
bloques de división, las
listas y las tablas
constituyen ejemplos
de este tipo de
elementos.
De línea
 Ocupan tan solo el
ancho necesario que
viene definido por la
cantidad de texto
incluido.
 Se sitúan en línea
hasta ocupar todo el
ancho.
 Pueden contener otros
elementos de línea.
 Las imágenes, los
enlaces, los botones y
el texto resaltado
constituyen ejemplos
de este tipo de
elementos.

Etiquetas básicas
División<div>
Párrafo<p>
Agrupar elementos en línea<span>
Subrayado<u>
Cursiva<em>
Negrita<strong>
Subíndice<sub>
Superíndice<sup>
Salto de línea<br>
Separación horintontal<hr>

Atributos globales aplicables a cualquier etiqueta
Id: es útil para definir un estilo único con CSS o para manipular dicho elemento
con JavaScript.
Style: se emplea para aplicar un estilo mediante CSS directamente a un elemento
Class: se usa para agrupar varias etiquetas bajo un estilo común cuando se
aplica código CSS a la página
Title: sirve para elaborar una descripción corta de un elemento.
Encabezados:
Son párrafos especiales que se encargan de crear títulos para
las diferentes secciones y subsecciones de una página web.
<h1> representa al encabezado de mayor nivel
y por lo tanto el de mayor tamaño de letra.
<h2> será un poco más pequeño.
<h2,3,4,……….> y así sucesivamente

Son una estructura que engloba un conjunto de elementos que la
componen.
Existen dos tipos de listas:
• Las listas desordenadas.
• Las listas ordenadas.
Los elementos que componen la lista se representan con la
etiqueta <li> en ambos casos.
La lista ordenada se representa con la etiqueta <ol>.
Esta etiqueta, además de los globales,
admite varios atributos, como reversed
start y type.

 (<table>) es un elemento de bloque que se
emplea para estructurar una serie de datos
alineados según un esquema de filas y
columnas.
 Las filas de una tabla se representan con la
etiqueta <tr>, y estas solo contienen celdas
<td>
( deben de tener las mismas celdas y filas).
 El atributo border se utiliza para dibujar
bordes de separación entre celdas.¿Cómo unir celdas?
Para que una celda ocupe dos o más filas o columnas se
utilizan atributos aplicados directamente en la etiqueta <td>,
<colspan> o <rowspan>

Al insertar una imagen en un documento, si no se incluye en un elemento de
bloque
aparte, se alineará con el texto del resto.
Las imágenes se representan con la etiqueta <img> y el archivo
correspondiente a la
imagen se referencia estableciendo la ruta al mismo con el atributo src.
Para localizar una imagen externa hay que incluir una URL:
o Imagen en el subdirectorio img: img/imagen.jpg
o Imagen en el directorio anterior: /imagen.jpg
o Imagen en un servidor externo: http://dominio.com/ruta/imagen.jpg
ENLACES
Son vínculos a otras páginas tanto locales como externas y su etiqueta es <a> .
Sus atributos son:
 href: permite incluir la ruta hacia la página con la que se enlazará.
 target: cuyo valor _blank indica al navegador que deberá abrir el enlace en
una
pestaña nueva para evitar salirse de la que se esta visualizando.

• CSS es el lenguaje utilizado para definir el modo de
presentar el código HTML de una página web. Permite
separar la estructura de un documento (HTML) de su
diseño o presentación (CSS).
• Un solo archivo CSS puede modificar el aspecto de
varios documentos HTML.
• La utilización de CSS es muy práctica, ya que permite
separar la estructura de un documento (HTML) de su
diseño o presentación (CSS).

Formas de colocación del código CSS
Existen tres formas distintas de vincular código CSS a una
estructura HTML:
 El atributo style: se puede incluir en cualquier etiqueta y permite
insertar directamente código CSS como valor de dicho atributo.
 Con la etiqueta <style>: permite establecer un diseño general que
afectará a todo el documento HTML en el que se encuentre dicha
etiqueta. Se suele incluir en la cabecera del documento, dentro del
elemento <head>.
 En un archivo independiente: un archivo externo que tendrá una
extensión .css, se situará en un directorio diferente al de los
documentos HTML.

Selectores básicos
Una serie de reglas o propiedades con las que se
modificará el
aspecto de dichos elementos.
Existen varias selectores: Selector genérico
POR
TIPO
DE CLASE DE ID

Colores
Los valores de un color se pueden definir en diferentes formatos,
indican las proporciones de los tres colores básicos utilizados
para representar toda la gama de colores en las pantallas: rojo,
verde y azul (RGB).
Métodos que permiten establecer un valor cromático son los
siguientes:
o Nombre del color(blue,red…)
o Proporción de cada valor RGB en código hexadecimal
precedido de almohadilla: #FFOOOO.
o Proporción de cada valor RGB en decimales, de O a 255:
rgb(255, O, O).
o Proporción de cada valor RGB en porcentajes: rgb(100%,
0%, 0%).
o Proporción de cada valor RGB, más un valor de O a 1
(alpha) que indica la transparencia de dicho color: rgba(255, 0,
0, 0.5).

Texto
Subrayado (text-decoration)
Tamaño del texto (font-size).
Tipo de fuente (font-family).
Cursiva (font-style).
Los textos tienen muchas otras propiedades que pueden modificarse,
como el tamaño, el grosor o la tipografía, algunos son:

• El tamaño de un elemento viene definido por sus propiedades width
y height que pueden tener un valor en píxeles.
Display
block
Display
inline
Display inline-
block
El elemento afectado
se comporta como un
elemento de bloque
El elemento se
comporta como un
elemento en línea
El elemento se
establece como un
bloque, pero se
comporta como un
elemento en línea

En un elemento HTML se puede añadir un borde al- rededor del mismo. El
borde no tiene por qué rodear completamente al elemento, ya que se puede
optar por establecer un borde independiente en la parte superior, inferior,
derecha o izquierda del mismo.
Border-width Añade grosor al borde de los cuatro lados (border-left-
width, border-right-width, border-top-width y border-
bottom-width).
Border -style Tipo de trazo con el que se dibuja el borde (solid (línea
continua), dashed (línea discontinua), dotted (con pun-
tos) o double (línea continua doble)).
Border-color Permite definir el color del borde.
Border Permite establecer las tres propiedades anteriores a la
vez.
Border-
radious
Hace referencia al radio de curvatura de las esquinas
de un elemento.

Para establecer un espacio de separación entre un elemento y los otros elementos
que lo rodean, o entre el borde del elemento y su contenido, CSS dispone de dos
propiedades:
 Margin: Representa el espacio entre un elemento y los elementos que lo rodean.
Se utiliza una unidad de medida en pixeles(px).
 Padding: Representa el espacio interno entre un elemento y su contenido. Acepta
los mismos valores que la propiedad margin.
Para modificar de manera individual cada uno de los lados, se pueden utilizar los
sufijos –left, -right, -top y –bottom.

Posicionamiento
POSITION: STATIC  Es el valor por defecto que realiza un salto de línea
para añadir debajo el siguiente elemento, según el orden establecido en la
estructura HTML.
POSITION: RELATIVE Un elemento con este valor en su propiedad position
ocupará el mismo espacio que si su valor fuera static.
POSITION: ABSOLUTE El elemento se sitúa en la esquina superior
izquierda del elemento que lo contiene
MARGIN-TOP Y MARGIN-LEFTPermiten mover un elemento. Se utilizan las
propiedades top, left, right o bottom.
POSITION: FIXED Este valor es muy similar a absolute, con la excepción de
que utiliza la ventana, y no el documento, como referencia para posicionarse

Para establecer una imagen de fondo en un elemento, se
utilizan
estas propiedades:
background-image. Su valor será la ruta a la imagen desde el
directorio donde se encuentra el archivo CSS.
background-position. En el caso de que la imagen sea más
pequeña que el elemento, esta propiedad establece la
alineación vertical y horizontal de la misma.
background-repeat. Si la imagen es más pequeña que el
elemento, se repetirá, por defecto, horizontal y verticalmente
hasta ocupar todo el espacio disponible

Html power

Más contenido relacionado

La actualidad más candente

Similar a Html power

Html power