Scribd
Cargar
38 vistas

Programación Web (P1)

El documento describe varias herramientas de programación web como Adobe Dreamweaver, Brackets, Sublime Text y Aptana Studio. También explica conceptos básicos de HTML como la estructura de una página, etiquetas como <body>, <h1>, <p>, y atributos como color de fondo, color de texto y enlaces. Además, detalla formatos de texto, listas, imágenes y caracteres especiales.

Cargado por

Jose Luis Gonzalez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
38 vistas

Programación Web (P1)

El documento describe varias herramientas de programación web como Adobe Dreamweaver, Brackets, Sublime Text y Aptana Studio. También explica conceptos básicos de HTML como la estructura de una página, etiquetas como <body>, <h1>, <p>, y atributos como color de fondo, color de texto y enlaces. Además, detalla formatos de texto, listas, imágenes y caracteres especiales.

Cargado por

Jose Luis Gonzalez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 15

Programación web

H yper
Lenguaje
T ext
Marcado
de
M arkup
hipertexto
L enguage
Adobe Dreamweaver es una
Brackets aplicación de diseño
es un editor de código y desarrollo web para crear
Open source Adobe sitios web y aplicaciones para
tiene varias características únicas Dreamweaver múltiples objetivos,
como la Edición rápida y la Vista incluyendo navegadores,
previa dinámica  dispositivos y tabletas. 
está escrito en JavaScript, HTML y
CSS
Brackets
Sublime text
Editor es un editor de Texto para
•  Asistente de código para HTML y Editor
Javascript. escribir código en casi cualquier
de formato de archivo. Está
• Librerías ajax (jQuery, prototype,
scriptaculous, Ext JS, dojo, YUI y
Texto especialmente pensado para
Spry entre otras). Plano escribir sin distracciones. Esto
• Conexión vía FTP, SFTP, FTPS y quiere decir que visualmente
Aptana Cloud. ofrece un entorno oscuro donde
• Herramientas para trabajo con base las líneas de código que
de datos. escribas resaltarán para que
Blog de notas Aptana
• Marcado de sintaxis mediante puedas centrarte
colores. exclusivamente en ellas.
• Compatible con extensiones para
Eclipse (existen más de 1000).
Estructura básica de una pagina HTML

Cada página comienza con < HTML > < /HTML >

 Sigue la cabecera, delimitada por < HEAD >  < /HEAD >
<TITLE> Titulo de la página </TITLE>
Después, la etiqueta  < BODY > < /BODY >

Aquí iría el contenido de la pagina


Algunos atributos de la etiqueta >body>

BGCOLOR parámetro usado para especificar el color de fondo de la


página,  El color se define en base hexadecimal en el
orden rojo, verde, azul (Red, Green, Blue). 

<BODY BGCOLOR=#0000FF> o <BODY BGCOLOR=blue>

Los colores básicos son:


#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul

Paleta de colores
Algunos atributos de la etiqueta >body>

TEXT parámetro usado para definir el color del texto por


omisión. Su formato es el mismo que el de BGCOLOR. Si
no se pone nada es negro.  

<BODY TEXT=# FCF503 > o <BODY BGCOLOR=YELLOW>

LINK, VLINK, parámetros usados para especificar el color por omisión


ALINK de: texto con enlace, enlace ya visitado y enlace activo. 
Algunos atributos de la etiqueta >body>

BACKGROUND Permite incluir un fondo a una pagina, o de acuerdo a


que etiqueta se aplique.  

<BODY BACKGROUND=“fondo.gif”>
Etiquetas
<h1> , <h2> etc Títulos o encabezados que van dentro
de la pagina

<h1> Titulo de la pagina </h1>


<h2> Sub titulo de la pagina </h2>
<h3> Encabezado </h3>
<h4> Encabezado mas pequeño </h4>
Etiquetas
<p> </p> Párrafos

<p aling = “center” > </p> El atributo align permite alinear el


texto del párrafo. Se puede aplicar
igual a las etiquetas <H1>, <H2>, etc

center, right, left


Etiquetas
<br> Permite partir un párrafo empezando una línea
nueva pero sin dejar espacio.

<hr> Pone una linea horizontal de


separación.

<BLOCKQUOTE> </BLOCKQUOTE> Sangra el párrafo.


Formatos de Texto
El formato de caracteres permite cambiar tanto el tipo de fuente
como su tamaño y aspecto.
Se pueden utilizar varias etiquetas HTML para dar distintos formatos
a un grupo de caracteres:

•Negrita:        <B>…</B>


•Cursiva:        <I>…</I>
•Subrayado:        <U>…</U>
•Teletipo:        <TT>…</TT>
•Tachado:        <STRIKE>…</STRIKE>
•Grande:        <BIG>…</BIG>
•Pequeña:        <SMALL>…</SMALL>
•Superíndice:        <SUP>…</SUP>
•Subíndice:        <SUB>…</SUB>
<FONT COLOR="red"> ... </FONT>

Indicación expresa del tipo de letra a usar, en este caso el color

<FONT SIZE="+1"> ... </FONT>

Indicación expresa del tipo de letra a usar, en este caso el tamaño 

La etiqueta FONT permite combinaciones de


los atributos COLOR, SIZE y FACE
Caracteres Especiales
&aacute;        á
&eacute;        é
&iacute;        í
&oacute;        ó
&uacute;        ú
&agrave;        à
&ntilde;        ñ
&lt;            <
&gt;            >
&amp;            &
&ccedil;        ç
&quot;            “
&nbsp;            espacio en blanco
<UL> ... </UL> Listas
Lista numerada.

<OL> ... </OL>


Lista no numerada.

<LI> ... </LI>


Elementos de una lista.

Enlace
Sirven para acceder desde una página a otra página o a otro recurso
disponible

<a href="http://servidor/recurso.html">texto del enlace</a>


Imagen
< img src = “imagen.jpg”>

Alinear la imagen con el texto:

< img src = “imagen.jpg” align="right" > A la derecha

< img src = “imagen.jpg” align=“left" > A la izquierda

<div align = “Center”>< img src = “imagen.jpg”> </div> Centrado

Ancho y Alto
<img src = “imagen.jpg width="100" height="100"”>

También podría gustarte