Presentacion HTML

Diseño
Digital
Avanzado
HTML
Comenzando con lo más básico.

Es una línea de comando que se usa en HTML, se coloca entre < estos símbolos >. Sin los TAGS, el
código HTML no funcionaría. La mayoría de los tags necesitan tener uno de apertura y uno de cierre.
Se diferencian con el símbolo / que se coloca antes del titulo.
Sintaxis: <tag attribute=''value''>content</tag keyword>
TAG: Identifica cada elemento del código dentro de una estructura HTML.
Hay tags específicos como BODY, HTML, SCRIPT, DIV, etc.
ATTRIBUTE: Un ATRIBUTO o propiedad específica de un TAG.
VALUE: Valor del atributo del TAG.
CONTENT: Contenido de la parte que se despliega visualmente.
TAG

<html></html> Este tag indica en dónde inicia y en dónde termina un documento HTML. Es el TAG
principal del documento. Sin él no existiría una página WEB.
<head></head> Este tag se usa inmediatamente después de haber abierto el tag <html>. Contiene
METADATA e información importante, tal como el tíulo de la página.
<title></title> Se coloca desntro del tag <header> le da el nombre a la página.
<body></body> Se le llama BODY al TAG que contiene TODA la parte visual de la página.
TAG

<a></a> Este tag indica que hay un LINK hacia otro lado, hacia una página, hacia un lugar del código,
o está haciendo referencia a otro archivo fuera del HTML.
<a href=’’http://www.google.com’’>TEXTO CON LINK</a> Así escribimos un texto con LINK
ABSOLUTO. Se le llama LINK ABSOLUTO al que contiene una URL COMPLETA
(URL: Uniform Resource Locator o más conocida como la DIRECCIÓN WEB).
LINK RELATIVO: Se le llama LINK RELATIVO al que contiene una referencia a un archivo local o sea
en el mismo lugar en donde se encuentra el HTML. Ejemplo:
<a href=’quienes_somos.html’’>TEXTO CON LINK</a>
*IMPORTANTE: Nombrar archivos sin espacios y sin caracteres especiales.
HyperlinksTags

La propiedad TARGET designa a la ventana o dónde se abrirá el link, puede ser de los siguientes
tipos:
• _blank Abre el contenido en una nueva ventana.
• _self Abre el contenido en el mismo frame (cuadro) que cargó el contenido.
• _parent Abre el contenido en la misma ventana, en la misma posición. Es muy útil cuando hay
contenido externo en espacios específicos o frames.
• _top Abre el contenido, reemplazando la actual dirección en el browser.
TARGET

Funciona junto al HTML. No funciona de forma individual. Se debe incluír en el HTML como un LINK
dentro del HEAD del HTML: (Se incluyen los atributos REL y TYPE).
<link href="estilo.css" rel="stylesheet" type="text/css" />
*IMPORTANTE: Esta etiqueta no se cierra como <link></link> Esta etiqueta se cierra al final de la
misma con el símbolo / antes del cierre >.
Hoja de ESTILOS
Podemos incluír comentarios para documentar lo que estamos haciendo para futuras referencias. Los
comentarios se pueden agregar en cualquier parte de esta forma:
<!– ESTO ES UN COMENTARIO EN HTML, no es visible solo en el código. -->
COMENTARIOS

Cómo nosotros escribamos la estructura, es invisible al usuario, pero será de importancia para los
browsers y para las normas de SEO, además para llevar un mejor orden:
<html>
<head>  Se le llama «Children» a un elemento listado dentro de otro.
. . .
</head>
<body>
. . .
</body>
</html>
ESTRUCTURADELHTML(sintaxis)

El body tiene ciertas propiedades que se pueden manipular desde el CSS:
background-color: #000000; Se usa con un color en código hexadecimal.
background-image:url(imagen.jpg); Se usa para usar una imágen de fondo en el BG.
background-position:center top; Se usa para posicionar el bachground en el fondo.
background-repeat:no-repeat; Se usa para decirle al fondo si queremos que se repita.
margin:0 0 0 0; Se usa para establecer los márgenes, se usa en coordenadas de cuatro números
separados por espacio: TOP RIGHT BOTTOM LEFT (Orientación a las agujas del reloj). Cuando es
CERO (0) se puede quedar así, ahora si se usa un número, hay que especificar «px» que significa
pixeles.
color:#000000; Se usa para establecer el color de los TEXTOS a nivel GENERAL.
BODY

El div es un bloque de contenido. No hay una definición semántica. Siempre tendrá cuadro lados y
cuatro vértices. Para poder modificar su apariencia, necesitamos que en la hoja de estilos lo
definamos por medio de una CLASE o un ID.
class: Propiedad en la hoja de estilos que se puede usar más de una vez sobre diferentes
elementos. Por ejemplo, varios divs pueden tener la misma clase.
ID: Se diferencia a CLASS porque el ID solo sebería afectar a un elemento. Por ejemplo, solo
debería existir un ID con un nombre específico.
<div> </div>
Para llamar el estilo del div, generalmente lo definimos con CLASS, aunque puede ser ID:
<div class="ejemplo_de_class"> </div>
DIV

Por ejemplo, un div puede tener propiedades de CLASS, ID o AMBOS.
<div id='myID' class='myClass'> . . . </div>
<div class='myClass'> . . . </div>
<div id='myID'> . . . </div>
DIV

Para definir la clase en la hoja de estilos, usamos un PUNTO antes del nombre y siempre lleva
CORCHETES de inicio y cierre para definir sus propiedades: { }
Por ejemplo:
. ejemplo_de_class{
color:#63F; OJO: cada línea o propiedad del CSS va cerrada por un ;
}
CLASS
La diferencia con el CLASS es que en el CSS lleva # y no . (punto).
Por ejemplo:
#ejemplo_de_id{
color:#63F; OJO: cada línea o propiedad del CSS va cerrada por un ;
}
ID

Otras propiedades:
.ejemplo{
color:#63F;  Color del texto en esa clase específica.
width:50px;  Ancho de esa clase específica.
height:50px;  Alto de esa clase específica.
background-color:#06C;  Color de fondo de esa clase específica.
margin:10px 20px 30px 40px;  Márgen externo (TOP RIGHT BOTTOM LEFT)
padding: 10px 20px 30px 40px;  Márgen interno de la clase específica.
}
CLASS

Otros tags que se usan en el HTML:
<p> </p>  Marca el inicio y final de un párrafo. Se pueden modificar sus propiedades por medio del
CSS, llamándolo igual que llamamos al BODY, sin PUNTO, ya que no es una clase, es un TAG
específico del código. Por ejemplo:
p {
color:#63F;
}
TAGS de FORMATO

El TAG «SPAN» permite dar estilo a elementos de un mismo bloque, por ejemplo, un texto específico
en un párrafo. Podemos declarar un TAG general para todo el HTML que se llame «SPAN» o
podemos crear clases dentro del SPAN. Por ejemplo:
“Este es un texto demo que debe llevar la palabra ROJO en el color que dice.”
HTML: <p>Este es un texto demo que debe llevar la palabra <span>ROJO </span>en el color que
dice.</p>
span{
color:#F00;  Color del texto de esa área específica.
}
HTML: <p>Este es un texto demo que debe llevar la palabra <span class=“colorfinal”>ROJO
</span>en el color que dice.</p>
Span.colorfinal{
color:#F00;  Color del texto de esa área específica.
}
SPAN

Otros tags que se usan en el HTML:
<br />  Marca un «LINE BREAK» o un salto de línea en un grupo de texto.
<h1> </h1>  Se le llama así al estilo de heading, se puede elegir entre varios tamaños, desde 6
(pequeño) hasta 1 (grande).
Para hacer listados:
<ul>  Un UL es «UNORDERED LIST» o sea, BULLETS.
<li>bullets</li>  LI – Un LI es un «list ITEM»
<li>bullets</li>
<li>bullets</li>
</ul>
<ol>  Un OL, es un «ORDERED LIST» o sea un listado en orden (NÚMEROS).
<li>numeros</li>
<li>numeros</li>
<li>numeros</li>
</ol>
TAGS de FORMATO

Las imágenes se insertan directamente en el HTML (según se requera) y se hace a través del TAG
«IMG», que se usa con el atributo «SRC» o SOURCE, que indica la fuente de la imagen, esta imagen
siempre estará fuera del archivo, no quiere decir que la imagen se agregará al HTML, solamente hace
un «LINK» con la referencia de dónde econtrarla:
<img src="interstitial.jpg" width="320" height="416" />
Atributos más usados con las imágenes:
width  Ancho de la imagen, en pixels.
height  Alto de la imagen, en pixels.
alt  Texto alternativo que aparece con el MOUSE OVER sobre esa imagen.
INSERTANDO IMÁGENES

Presentacion HTML

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Destacado

Destacado (20)

Similar a Presentacion HTML

Similar a Presentacion HTML (20)

Último

Último (20)

Presentacion HTML