Codigo y Css

1
ADOBE
DREAMWEAVER CS4
CODIGO HTML
ENTENDIENDO EL CODIGO
GERALDO AGUILERA
PREPARADO POR: GERALDO AGUILERA
sábado, 14 de abril de 2018

2
OBJETIVOS
• Dada las explicaciones el participante estara en
capacidad de:
▫ Saber que es HTML
▫ Conocer las etiquetas
▫ Entender el codigo de una pagina web
▫ Entender la propiedades de una etiqueta
▫ Conocer la estructura de los colores web
▫ Crear colores web
GERALDO AGUILERA sábado, 14 de abril de 2018

3
QUE ES EL HTML?
• HTML ES LAS INICIALES DE HYPERTEXT
MARK-UP LANGUAGES
• ES EL CODIGO BASE DE TODA PAGINA
WEB.
• ES UN CODIGO FACIL DE APRENDER Y
MANIPULAR.
• CON EL DREAMWEAVER PUEDE
DESARROLLAR PAGINAS WEB SIN
ESCRIBIR UNA SOLA LINEA DE CODIGO
HTML.
4
ETIQUETAS (TAGS)
• EL HTML ESTA BASADO EN LO QUE
CONOCEMOS COMO ETIQUETAS (TAGS)
• LOS TAGS TIENEN LA SIGUIENTE
ESTRUCTURA BASICA, ENTRE LOS
SIMBOLOS MAYOR QUE Y MENOR QUE
< > EJEMPLO:
 ESTE TAG MUESTRA EL TEXTO EN

NEGRITA

5
SINTAXIS DE LOS TAGS
• LAS ETIQUETAS TIENEN

DOS ESTADOS: ABIERTA Y
CERRADA
• ABIERTA: 
• CERRADA: 

6

TODO LO QUE SE ENCUENTRE DENTRO DE
UNA ETIQUETA ABIERTA HASTA QUE SE
CIERRA ESTA AFECTADO POR LAS
PROPIEDADES DE ESA ETIQUETA.
EJEMPLO:
CURSO DE DREAMWEAVER CS4 
TIENE EL SIGUIENTE RESULTADO:
CURSO DE DREAMWEAVER CS4

7

• HAY CIENTOS DE ETIQUETAS
• TODA ETIQUETA SE ABRE Y LUEGO SE
CIERRA
• LAS ETIQUETAS TIENEN PROPIEDADES.
• EJEMPLO:
DREAMWEAVER
TIENE EL SIGUIENTE RESULTADO

8
CIERRE DIFERENTE
ESTAS SON ALGUNAS ETIQUETAS QUE
SE CIERRAN DE FORMA DIFERENTE
• <HR /> LINEA HORIZONTAL

• SALTO DE LINEA
• <IMG /> CARGA UNA IMAGEN

9
ESTRUCTURA BASICA DE UNA

PAGINA WEB
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

10
PRIMERA PAGINA
<HTML>
<HEAD>
<TITLE>
MI PRIMERA PAGINA EN HTML
</TITLE>
</HEAD>
<BODY>
HOLA MUNDO! ESTA ES MI PRIMERA PAGINA WEB
UTILIZANDO HTML
</BODY>
</HTML>
VER RESULTADO
11
ADOBE
DREAMWEAVER CS4
COLORES WEB
ESTRUCTURA DEL COLOR
GERALDO AGUILERA

12
COLORES EN HTML
LOS COLORES ESTAN FORMADOS EN UNA
BASE HEXADECIMAL, LO QUE INDICA QUE
TIENEN UNA BASE 16.
LOS NUMEROS EN HEXADECIMAL TIENEN 16

DIGITOS QUE SON 0 1 2 3 4 5 6 7 8 9 A B C D E F
ESTOS COLORES SE FORMAN CON EL ROJO, VERDE

Y AZUL (RGB).
EL 00 ES LA AUSENCIA DE COLOR EL FF ES LA MAYOR
CANTIDAD DE COLOR
13
COLORES EN HTML
LOS COLORES SE FORMAN DE LA
SIGUIENTE MANERA: #RRVVAA
RR ES LA CANTIDAD DE ROJO
VV ES LA CANTIDAD DE VERDE
AA ES LA CANTIDAD DE AZUL
ESTA ES LA ESTRUCTURA BASICA DEL COLOR

#RRVVAA

14
ALGUNOS COLORES
#FFFFFF
#FF0000
#00FF00
#0000FF
#FFFF00
#FF00FF
#000000

15
ADOBE
DREAMWEAVER CS4
Cascading Style Sheets ( CSS )

Hojas de Estilo en Cascada
GERALDO AGUILERA

Que es Css?
• CSS es el acrónicmo de Cascading Style
Sheets (hojas de estilo en cascada).
• CSS es un lenguaje de estilo que define la
presentación de los documentos HTML.
¿Cual es la diferencia entre CSS y
HTML?
• HTML se usa para estructurar el contenido; CSS
se usa para formatear el contenido previamente
estructurado.
¿Cual es la diferencia entre CSS y
HTML?
¿Qué beneficios me ofrece CSS?
CSS fue toda una revolución en el mundo del diseño

web. Entre los beneficios concretos de CSS
encontramos:
• control de la presentación de muchos documentos
desde una única hoja de estilo;
• control más preciso de la presentación;
• aplicación de diferentes presentaciones a diferentes
tipos de medios (pantalla, impresión, etc.);
• numerosas técnicas avanzadas y sofisticadas.
La sintaxis básica de CSS
Digamos que queremos un bonito color rojo como
fondo de nuestra página web:
• Usando HTML podríamos haberlo conseguido
así:
▫ <body bgcolor="#FF0000">
• Con CSS el mismo resultado puede lograrse
así:
▫ body {background-color: #FF0000;}
21
SUMARIO
• REVISION DE TEMAS
•DISCUSION DE CONTENIDO
•PREGUNTAS Y RESPUESTAS
•ASIGNACION DE PRACTICA

Codigo y Css

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Codigo y Css

Caricato da

Copyright:

Formati disponibili

1

PREPARADO POR: GERALDO AGUILERA

sábado, 14 de abril de 2018

GERALDO AGUILERA sábado, 14 de abril de 2018

<strong> ESTE TAG MUESTRA EL TEXTO EN

GERALDO AGUILERA sábado, 14 de abril de 2018

SINTAXIS DE LOS TAGS

• LAS ETIQUETAS TIENEN

GERALDO AGUILERA sábado, 14 de abril de 2018

SINTAXIS DE LOS TAGS

TIENE EL SIGUIENTE RESULTADO:

CURSO DE DREAMWEAVER CS4

GERALDO AGUILERA sábado, 14 de abril de 2018

SINTAXIS DE LOS TAGS

TIENE EL SIGUIENTE RESULTADO

GERALDO AGUILERA sábado, 14 de abril de 2018

• <HR /> LINEA HORIZONTAL

GERALDO AGUILERA sábado, 14 de abril de 2018

ESTRUCTURA BASICA DE UNA

GERALDO AGUILERA sábado, 14 de abril de 2018

PREPARADO POR: GERALDO AGUILERA

sábado, 14 de abril de 2018

LOS NUMEROS EN HEXADECIMAL TIENEN 16

ESTOS COLORES SE FORMAN CON EL ROJO, VERDE

ESTA ES LA ESTRUCTURA BASICA DEL COLOR

GERALDO AGUILERA sábado, 14 de abril de 2018

GERALDO AGUILERA sábado, 14 de abril de 2018

Cascading Style Sheets ( CSS )

PREPARADO POR: GERALDO AGUILERA

sábado, 14 de abril de 2018

CSS fue toda una revolución en el mundo del diseño

GERALDO AGUILERA sábado, 14 de abril de 2018

Potrebbero piacerti anche