LÍNEAS HORIZONTALES CON EL LENGUAJE HTML
Para dividir las secciones de nuestra web podemos utilizar líneas
horizontales mediante la etiqueta <hr/> que es a la vez de apertura
y cierre. Podemos indicar el ancho de estas líneas con el atributo
width que puede estar expresado en píxeles o en porcentaje de la
ventana del navegador:
<html>
<body>
<hr width="200px"/>Esta linia ocupara 200 pixeles
</body>
<html>
Está etiquetas y atributos se mostra como aquí abajo.
También admite el atributo align , pudiendo tomar por valores left,
right o center o el (valor por defecto):
<hr width="50% alingn="left"/> <!-- Esta línia estará
alineada a la izquierda --> veras como ésta a la izquierda.
Está etiquetas y atributos se mostrara como aqui ahajo.
Así como el grosor de la línea con el atributo size expresado en
píxeles y alinear con alingn="left. center,right"> Esta línia estará
que se vera de ésta forma:
<hr width="70% size="13"/>
Está etiquetas y atributos se mostrara como aqui ahajo.
Para desactivar la sombra en la línea usaremos el atributo noshade
al que no se le asigna ningún valor se vera de ésta forma:
<hr width="70%" size="13" noshade/>
Está etiquetas y atributos se mostrara como aqui ahajo.
O colorearla con el atributo de color y se vera de ésta forma:
<hr width="70%" size="13" noshade color="#FC0101">
Está etiquetas y atributos se mostrara como aqui ahajo.
Slaider de imagenes
COMO APRENDER HTML CON NOTEPAD ++ Y DREAMWEAVER CS5
VIDIOSTUTORIALES CHUSCO36
DISEÑO DE PÁGINAS WEB CON WORPRESS Y BLOGGER
TUTORIALES DE PROGRAMAS
7 UNIDAD DE MEDIDAD EN HTML
UNIDADES DE MEDIDA DE LOS VALORES DE LOS ESTILOS EN CSS EN EL LENGUAJE HTML
Muchas propiedades de los estilos reciben como valor una cifra que
expresa una cantidad que puede expresarse en diferentes unidades
de medida:
- Centímetros (cm)
- Milímetros (mm)
- Pulgadas (in): Una pulgada equivale a 2,54 centímetros.
- Puntos (pt): Una pulgada equivale a 72 puntos.
- Píxeles (px)
- Picas (pc): Una pica son 12 puntos.
- El tamaño relativo con respecto al de la fuente actual (em):
Por ejemplo si escogemos como valor "2em" significa que el será
dos veces el tamaño del establecido por defecto.
- Tamaño relativo con respecto a la altura de la letra "x" en
minúscula (ex).
- Porcentaje (%): Con respecto al tamaño actual. Por ejemplo un valor
igual a 50% indicaría que el tamaño será la mitad del establecido.
<html>
<head>
<style type="text/css">
p
{
font-size:1in;
}
</style>
</head>
<body>
<p>Este es el contenido del</br> párrafo </p>
</body>
</html>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Este es
el
contenido
del
párrafo
Muchas propiedades de los estilos reciben como valor una cifra que
expresa una cantidad que puede expresarse en diferentes unidades
de medida:
- Centímetros (cm)
- Milímetros (mm)
- Pulgadas (in): Una pulgada equivale a 2,54 centímetros.
- Puntos (pt): Una pulgada equivale a 72 puntos.
- Píxeles (px)
- Picas (pc): Una pica son 12 puntos.
- El tamaño relativo con respecto al de la fuente actual (em):
Por ejemplo si escogemos como valor "2em" significa que el será
dos veces el tamaño del establecido por defecto.
- Tamaño relativo con respecto a la altura de la letra "x" en
minúscula (ex).
- Porcentaje (%): Con respecto al tamaño actual. Por ejemplo un valor
igual a 50% indicaría que el tamaño será la mitad del establecido.
<html>
<head>
<style type="text/css">
p
{
font-size:1in;
}
</style>
</head>
<body>
<p>Este es el contenido del</br> párrafo </p>
</body>
</html>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Este es
el
contenido
del
párrafo
6 LOS COMENTARIOS EN HTML
LOS
COMENTARIOS EN EL CÓDICO DENTRO DEL LENGUAJE HTML
A medida que crece el tamaño de un fichero HTML se
puede hacer muy
difícil seguir el código escrito hasta para la persona que lo está
diseñando. Para facilitar su seguimiento se pueden añadir
comentarios a modo de “notas” por medio de la etiqueta de apertura
estas notas no se mostrarán en el navegador.
difícil seguir el código escrito hasta para la persona que lo está
diseñando. Para facilitar su seguimiento se pueden añadir
comentarios a modo de “notas” por medio de la etiqueta de apertura
estas notas no se mostrarán en el navegador.
<!– y la de cierre –>
<html>
<head>
<title>Estadisticas</title>
</head>
<!–Aquí empieza el cuerpo de la pagina–>
<body>
</body>
</html>
<html>
<head>
<title>Estadisticas</title>
</head>
<!–Aquí empieza el cuerpo de la pagina–>
<body>
</body>
</html>
Estas etiquetas y atributos se mostrarán como aquí.
Como ves no se muestra en el navegador lo veras en blanco, pero si en tu página
COMO HACER UN BUEN VIDIOTUTORIAL
Como hacer un buen vidiotutorial para YouTube
Aquí explicare los primeros pasos como hacer un buen VIDIOTUTORIAL
los primeros pasos para crear un buen vidiotutorial para YouTube.
Para crear un buen vídeo tutorial donde la planificación las herramientas necesarias el contenido y la conclusión de tus publicaciones de los
videotutoriales harán uno de los más vistos en internet primeros pasos para
crear un buen vídeo tutorial para youtube o proyecto personal y profesional
los videotutoriales pueden parecer una tarea simple pero sin embargo debe ser
una guía paso a paso que busca enseñar una tarea y debe tener en cuenta que va
dirigido a que el usuario encuentre lo que busca una solución a su problema
inquietud o necesidades y como la práctica hizo al maestro debe de buscar
información en internet y vídeos de otros usuarios para ver cómo hacen sus vídeos eso te hará cada vez mejor tus videotutoriales 1 la planificación piensa y planifica tu proyecto de tu videotutorial con ello ahorrarás mucho trabajo y frustraciones debes de tener muy clara las ideas de lo que quieres enseñar al usuario para ello lo primero que debes es buscar información en internet y escribirlo en un archivo de texto las ideas del videotutorial dos herramientas antes de comenzar asegúrate de tener todas las herramientas necesarias para la realización de los videotutoriales
por ejemplo necesitas hacer un guión debes grabar los audios con tu voz con
un micrófono conectado a tu pc o con un programa que le de texto y los guardar en mp3 que es lo más recomendable parece una tontería lo de hacer un bien pero todo buen proyecto tiene uno esto hará que tardes más en realizar el vídeo tutorial pero a la hora de realizar tu proyecto esto al final ahorra tiempo
evitando frustraciones y que te precipites en tu obra teniendo errores
que te frustrarán bueno ahora que tenemos las herramientas veamos el
procedimiento para escribir nuestro tutorial 1 títulos y saludos el título
del vídeo tutorial debe ser claro y breve desde el principio para que el
usuario determine si desea o no seguir viéndolo el vídeo ejemplo de título de
un vídeo tutorial tutorial de cómo hacer un avión de papel saludo puedes saludar
a las personas que van a ver este vídeo y puedes hacer un breve resumen del
vídeo tutorial 2 contenido del vídeo tutorial debes de tener en cuenta en
todo momento que el usuario puede ser un principiante en los conocimientos de un
ordenador se trata de hacer todo paso a paso claro y conciso sin desviar la atención del usuario y sin palabras demasiado técnicas ni pulgares que haga que el usuario busque otro vídeo tutorial debes seguir una guía como una receta de cocina que el usuario está siguiendo paso a paso con todos sus
ingredientes para que la receta le salga bien y no se le queme por eso debes ser
claro y conciso sin desviar la atención del usuario 3 conclusión del vídeo tutorial puedes despedir el vídeo tutorial dando tus datos para comentar dudas del mismo email y página web blog etcétera conclusión revisa el vídeo tutorial para ver los
errores y fallos en los vídeos como enfoque fallos al cortar montar el vídeo
textos con falta de ortografía es importante que tengan una buena presentación sin faltas de ortografía para ello utiliza procesadores de texto que después podrás copiar en tu proyecto y los sonidos de audio que encajen bien con los texto del que se esté tratando en ese momento atención el que mucho abarca poco aprieta
nunca intentes enseñar más de una cosa por vídeo tutorial para realizar un
vídeo tutorial con éxito el usuario necesita realizar tareas previas para lo
que el usuario también requiere tener conocimiento y práctica en diferentes
videotutoriales
planificación del proyecto del videotutorial piensa y planifica tu presentación
En pantalla de tus proyectos de tus videotutoriales con ello ahorrarás mucho tiempo trabajo y frustraciones debes de tener muy claras las ideas de lo que quieres enseñar al usuario para ello lo primero que debes es buscar información en internet y escribirlo en un archivo de texto las ideas de los videotutoriales cuál es el tema a utilizar cuál es objetivo del vídeo tutorial será de esta manera más
fácil el aprendizaje para el usuario aportar algo a los usuarios 2 el guión
estructurar un elaborado guión con el cual nos permitirá la estructura lo que
queremos hacer el guión es la parte vertebral para la elaboración del vídeo
tutorial desde el inicio del tránsito del todo el vídeo y conclusión del mismo
recuerda no colocar textos demasiado chillones o fondos que no se pueda ver
bien los textos recuerda que estos videotutoriales también van dirigidos a
personas que no escuchan por eso es importante colocar texto título y saludo el del título del vídeotutorial debe ser claro y breve desde el principio para que el usuario determine si desea o no seguir viéndolo el vídeo
ejemplo de título de un vídeo tutorial.
tutorial de cómo hace un guion de papel
Saludo puedes saludar a las personas que van a ver este vídeo y puedes hacer un
breve resumen del vídeo tutorial 4 contenido del vídeo tutorial debes de tener en cuenta en todo momento que el usuario puede ser un principiante en los conocimientos de un ordenador se trata de hacer todo paso a paso claro y
conciso sin desviar la atención del usuario y sin palabras demasiado técnicas ni pulgares que haga que el usuario busque otro vídeo tutorial debes seguir una guía como una receta de cocina que el usuario está siguiendo paso a paso con todos sus ingredientes para que la receta le salga bien y no se le queme por eso debes ser claro y conciso sin desviar la atención del usuario 5 conclusión y datos puedes despedir el vídeo tutorial dando tus datos para comentar dudas del mismo email página web blog etcétera conclusión revisa el vídeo tutorial para ver los errores y fallos en los vídeos como enfoque fallos al cortar montar el vídeo textos con falta de ortografía es importante que tengan una buena presentación sin faltas de ortografía para ello utiliza procesadores de texto lee atentamente los textos y después podrás copiar en tu proyecto y los sonidos de audio que encajen bien con
los textos que se esté tratando en ese momento 6 grabación ya tienes tú bien
realizado los vídeos las imágenes los audios ahora utilizarás una herramienta
para grabar de pago screencast estudian son pre castró etcétera gratis windows
movie maker windows live movie maker vídeo path video editor capturador de
pantalla caucasia estudio gratis en a hits de audio de pago testa load gratis
bala volcán en algunos podrás grabar la
pantalla y en otros sólo él.
los vídeos etcétera y grabarla tu voz o con el programa que le de texto como balabolka
Los graba en archivos de audio 7 edición ejemplo cantas ya estudios tiene herramientas que te permiten las que son comerciales te permiten poder editar sus grabaciones pudiendo añadir textos flechas imágenes editar el audio hacer zoom entre otras cosas 8 publicación una vez hemos grabado y editado la grabación comenzarás con la última etapa donde subirás el videotutorial a youtube a una red social un blogs o sitio web donde podrán verlo los usuarios podrán ver este vídeo tutorial en el momento que quieran es decir las 24 horas del día
y los 365 días del año bien ya tienes casi todas las herramientas para desarrollar tus videotutoriales recuerda que el límite está en tu imaginación sigue viendo los
vídeos y aprenderás los trucos de los diferentes programas que aparecen aquí
fin del vídeo tutorial gracias por ver mis vídeos tutoriales iré haciendo más próximamente si te gustó compártelo con tus amigos este link del vídeo pincha en la parte superior del navegador pincha dos veces se marcará todo el nombre del vídeo que es el link del vídeo con el secundario del ratón pincha en él una vez en la parte que se ha señalado se desplegará unas opciones pincha en
copiar y después en tu messenger solo lo tienes que pegar con el secundario del
ratón en la opción pegar en el portapapeles del mensaje gracias y sigue
disfrutando aprendiendo fácil con misvídeos
COMO CREAR UN MENÚ DESPLEGABLE EN BLOGGER
En este vidiostutoriales veras los pasos de blogger de como crear un Menú desplegable en YOUTUBE
INTRODUCCIÓN AL TECLADO
En este vidiostutoriales veras los pasos de INTRODUCCIÓN AL TECLADO en YOUTUBE
aquí explicare los primeros pasos INTRODUCCIÓN AL TECLADO los primeros pasos que iré subiendo poco a poco.
DREAMWEAVER CS5
En este vidiostutoriales veras los pasos de DREAMWEAVER CS5 en YOUTUBE
aquí explicare los primeros pasos DREAMWEAVER CS5 los primeros pasos que iré subiendo poco a poco.
Como instalar y configurar ALLSHARE para tu smart tv
Instalar y configurar ALLSHARE para tu smart tv
aquí explicare los primeros pasos ALLSHARE los primeros pasos que iré subiendo poco a poco.
NERO START SMART 7.9.6.0 PARA DVD
En este vidiostutoriales veras los pasos de Nero Sstart Smart 7.9.6.0 DVD en YOUTUBE
aquí explicare los primeros pasos Nero Start Smart 7.9.6.0 los primeros pasos que iré subiendo poco a poco.
aquí explicare los primeros pasos Nero Start Smart 7.9.6.0 los primeros pasos que iré subiendo poco a poco.
NERO START SMART 7.9.6.0 CD
En este vidiostutoriales veras los pasos de Nero Sstart Smart 7.9.6.0 CD en YOUTUBE
aquí explicare los primeros pasos Nero Start Smart 7.9.6.0 los primeros pasos que iré subiendo poco a poco.
aquí explicare los primeros pasos Nero Start Smart 7.9.6.0 los primeros pasos que iré subiendo poco a poco.
WORPRESS
En este vidiostutoriales veras los pasos de Worpress en YOUTUBE
aquí explicare los primeros pasos Worpress los primeros pasos que iré subiendo poco a poco.
aquí explicare los primeros pasos Worpress los primeros pasos que iré subiendo poco a poco.
ZARARADIO
En este vidiostutoriales veras los pasos de Zararadio en YOUTUBE
aquí explicare los primeros pasos Zararadio los primeros pasos que iré subiendo poco a poco.
aquí explicare los primeros pasos Zararadio los primeros pasos que iré subiendo poco a poco.
NOTEPAD ++
En este vidiostutoriales veras los pasos de Notepad ++ en YOUTUBE
aquí explicare los primeros pasos Notepad ++ los primeros pasos que iré subiendo poco a poco.
VIDEOSTUTORIALES
Aquí veras mis vidiostutoriales de mi pagina web calificados por categorías
En este vidiotutorial veras la presentación de mi canal de YOUTUBE
En este vidiostutoriales veras los pasos de Nero Start Smart 7.9.6.0 CD en YOUTUBE
En este vidiostutoriales veras los pasos de Allshare en YOUTUBE
En este vidiostutoriales veras los pasos de Dreamweaver CS5 en YOUTUBE
En este vidiotutoriales veras los pasos de App inventor en YOUTUBE
En este vidiotutoriales veras los pasos de Crear un buen vidiotutorial en YOUTUBE
En este vidiostutoriales veras los pasos de Nero Start Smart 7.9.6.0 DVD en YOUTUBE
5 COMO DAR FORMATO AL TEXTO DE UNA WEB
COMO DAR FORMATO AL TEXTO EN UNA WEB
El formato del texto dentro del cuerpo de la página puede modificarse
aplicando los siguientes formatos: Negrita (bold):
Se encierra el texto entre las etiquetas <b> y </b>.
Esta <b>palabra</b> aparecerá en negrita.
Estas etiquetas y atributos se mostraran como esta aquí abajo.
Esta palabra aparecerá en negrita.
-Itálica o cursiva (italic): Se encierra el texto entre las
etiquetas <i> y </i>.
Esta <i> palabra </i> aparecerá en cursiva.
Estas etiquetas y atributos se mostraran como esta aqui abajo
Esta palabra aparecerá en cursiva.
-Subrayado (underline): Se encierra el texto entre las etiquetas
<u> y </u>.
Esta <u> palabra </u> aparecerá en subrayado.
Estas etiquetas y atributos se mostraran como esta aquí abajo.
Esta palabra aparecerá en cursiva.
-Subíndice: Se encierra el texto entre las etiquetas
<sub> y </sub>.
La formula del agua es H <sub>2</sub>O
Estas etiquetas y atributos se mostraran como esta aqui abajo.
H20
-Superíndice: Se encierra el texto entre las etiquetas
<sup> y </sup>.
El resultado de 2 <sup>3</sup> es 8
Estas etiquetas y atributos se mostraran como esta aqui abajo.
23 es 8
Podemos combinar varios formatos anidando sus etiquetas, por ejemplo
si queremos escribir un texto en negrita y cursiva, podremos
hacerlo de las siguientes formas siempre y cuando se aniden
correctamente:
<u><i>Texto</i></u>
Estas etiquetas y atributos se mostraran como esta aqui abajo
Texto
No sólo se puede modificar el aspecto del texto, también se puede
cambiar su tamaño, tipo o color mediante la etiqueta <font>.
Dicha etiqueta utiliza el atributo size para cambiar el tamaño
aceptando valores desde el 1 (muy pequeño) hasta el 7 (muy grande).
Si no se indica nada el valor por defecto es el 3:
El texto puede cambiar de <font size=”6?>tamaño</Font>
Aquí abajo veremos como se muestra las etiquetas y atributos.
El texto puede cambiar de tamaño
Se puede cambiar de igual manera el color del texto mediante el
atributo color con colores predeterminados o en hexadecimal:
<font color=”#FF0000?>Este texto está en color rojo</font>
Aquí abajo veremos como se muestra las etiquetas y atributos.
Este texto ésta de color rojo
Otro atributo de <font> es face que permite cambiar el tipo de
fuente usado por defecto indicándolo como valor:
Este texto esta en la fuente por defecto <font face=”impact”>Este
texto está en otro tipo de fuente</font>
Este texto esta en la fuente por defecto <font face=”impact”>Caminante no hay camino.</font>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Este texto ésta en la fuente por defecto Caminante no hay camino.
El tipo de fuente deberá de estar instalado en el ordenador del
cliente, si no , el navegador emplerán el tipo de letra por defecto
(Times New Roman), haciendo que el aspecto de la página sea
imprevisible, por esa razón debemos
de usar tipos de fuente estándar. Para evitar esto podemos secuenciar
varios tipos de letra separados con comas para en caso de no
encontrar uno pruebe con el siguiente:
<font face=”impact, arial”>Caminante no hay camino</font>
Estas etiquetas y atributos se mostraran como esta aqui abajo
Caminante no hay camino.
Aquí abajo veremos como se muestra las etiquetas y atributos.Caminante no hay caminoCuando diseñamos una web se debe organizar la información por temas, capítulos , secciones o cualquier otra divisián
que nos permita hacerla más legible. Para ello se pueden utilizar las etiquetas de encabezado donde “x” es un valor del 1 al 6 segán la importancia en nuestra web:
<h1> Encabezado de nivel 1</h1>
<h2> Encabezado de nivel 2</h2>
<h3> Encabezado de nivel 3</h3>
<h4> Encabezado de nivel 4</h4>
<h5> Encabezado de nivel 5</h5>
<h6> Encabezado de nivel 6</h6>
Aquí abajo veremos como se muestra las etiquetas y atributos.
Además estos encabezados admiten el atributo align para alinearlos
en la izquierda (left), derecha (right) o centrados (center):
<h1 align=”left”>EL QUIJOTE: Prólogo</h1>
<h1 align=”justify”>EL QUIJOTE: Prólogo</h1>
<h1 align=”right”>EL QUIJOTE: Prólogo</h1>
<h1 align=”center”>EL QUIJOTE: Prólogo</h1>
Aquí abajo veremos como se muestra las etiquetas y atributos.
EL QUIJOTE: Prólogo
El formato del texto dentro del cuerpo de la página puede modificarse
aplicando los siguientes formatos: Negrita (bold):
Se encierra el texto entre las etiquetas <b> y </b>.
Esta <b>palabra</b> aparecerá en negrita.
Estas etiquetas y atributos se mostraran como esta aquí abajo.
Esta palabra aparecerá en negrita.
-Itálica o cursiva (italic): Se encierra el texto entre las
etiquetas <i> y </i>.
Esta <i> palabra </i> aparecerá en cursiva.
Estas etiquetas y atributos se mostraran como esta aqui abajo
Esta palabra aparecerá en cursiva.
-Subrayado (underline): Se encierra el texto entre las etiquetas
<u> y </u>.
Esta <u> palabra </u> aparecerá en subrayado.
Estas etiquetas y atributos se mostraran como esta aquí abajo.
Esta palabra aparecerá en cursiva.
-Subíndice: Se encierra el texto entre las etiquetas
<sub> y </sub>.
La formula del agua es H <sub>2</sub>O
Estas etiquetas y atributos se mostraran como esta aqui abajo.
H20
-Superíndice: Se encierra el texto entre las etiquetas
<sup> y </sup>.
El resultado de 2 <sup>3</sup> es 8
Estas etiquetas y atributos se mostraran como esta aqui abajo.
23 es 8
Podemos combinar varios formatos anidando sus etiquetas, por ejemplo
si queremos escribir un texto en negrita y cursiva, podremos
hacerlo de las siguientes formas siempre y cuando se aniden
correctamente:
<u><i>Texto</i></u>
Estas etiquetas y atributos se mostraran como esta aqui abajo
Texto
No sólo se puede modificar el aspecto del texto, también se puede
cambiar su tamaño, tipo o color mediante la etiqueta <font>.
Dicha etiqueta utiliza el atributo size para cambiar el tamaño
aceptando valores desde el 1 (muy pequeño) hasta el 7 (muy grande).
Si no se indica nada el valor por defecto es el 3:
El texto puede cambiar de <font size=”6?>tamaño</Font>
Aquí abajo veremos como se muestra las etiquetas y atributos.
El texto puede cambiar de tamaño
Se puede cambiar de igual manera el color del texto mediante el
atributo color con colores predeterminados o en hexadecimal:
<font color=”#FF0000?>Este texto está en color rojo</font>
Aquí abajo veremos como se muestra las etiquetas y atributos.
Este texto ésta de color rojo
Otro atributo de <font> es face que permite cambiar el tipo de
fuente usado por defecto indicándolo como valor:
Este texto esta en la fuente por defecto <font face=”impact”>Este
texto está en otro tipo de fuente</font>
Este texto esta en la fuente por defecto <font face=”impact”>Caminante no hay camino.</font>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Este texto ésta en la fuente por defecto Caminante no hay camino.
El tipo de fuente deberá de estar instalado en el ordenador del
cliente, si no , el navegador emplerán el tipo de letra por defecto
(Times New Roman), haciendo que el aspecto de la página sea
imprevisible, por esa razón debemos
de usar tipos de fuente estándar. Para evitar esto podemos secuenciar
varios tipos de letra separados con comas para en caso de no
encontrar uno pruebe con el siguiente:
<font face=”impact, arial”>Caminante no hay camino</font>
Estas etiquetas y atributos se mostraran como esta aqui abajo
Caminante no hay camino.
Aquí abajo veremos como se muestra las etiquetas y atributos.Caminante no hay caminoCuando diseñamos una web se debe organizar la información por temas, capítulos , secciones o cualquier otra divisián
que nos permita hacerla más legible. Para ello se pueden utilizar las etiquetas de encabezado donde “x” es un valor del 1 al 6 segán la importancia en nuestra web:
<h1> Encabezado de nivel 1</h1>
<h2> Encabezado de nivel 2</h2>
<h3> Encabezado de nivel 3</h3>
<h4> Encabezado de nivel 4</h4>
<h5> Encabezado de nivel 5</h5>
<h6> Encabezado de nivel 6</h6>
Aquí abajo veremos como se muestra las etiquetas y atributos.
Encabezado de nivel 1
Encabezado de nivel 2
Encabezado de nivel 3
Encabezado de nivel 4
Encabezado de nivel 5
Encabezado de nivel 6
Además estos encabezados admiten el atributo align para alinearlos
en la izquierda (left), derecha (right) o centrados (center):
<h1 align=”left”>EL QUIJOTE: Prólogo</h1>
<h1 align=”justify”>EL QUIJOTE: Prólogo</h1>
<h1 align=”right”>EL QUIJOTE: Prólogo</h1>
<h1 align=”center”>EL QUIJOTE: Prólogo</h1>
Aquí abajo veremos como se muestra las etiquetas y atributos.
EL QUIJOTE: Prólogo
EL QUIJOTE: Prólogo
EL QUIJOTE: Prólogo
EL QUIJOTE: Prólogo
COMO EDITAR SALTOS DE LINEA Y CARACTERES ESPECIALES EN HTML
COMO EDITAR SALTOS DE LINEA Y CARACTERES ESPECIALES EN HTML
Como editar los saltos de línea, párrafos y caracteres especiales
Todos los saltos de línea que realicemos dentro del código html son ignorados
por el navegador a la hora de interpretar la página.
Es decir aunque escribamos el siguiente código:
<html>
<body>
Este texto Aparece en una sola línea.
</body>
</html>
Aquí debajo veremos como se representa en el navegador.
Estas etiquetas y atributos se mostrarán como aquí abajo.
Este texto Aparece en una sola línea.
El resultado aparecerán una sola línea. Si queremos forzar a que el navegador
inserte un salto de línea debemos utilizar la etiqueta <br/>. Esta etiqueta
originalmente en HTML no tenía cierre, pero en XHTML es a la vez de
apertura y cierre:
<html>
<body>
Este texto <br/>
aparece <br/>
en varias líneas.<br/>
</body>
</html>
Estas etiquetas y atributos se mostrarán como aquí abajo.
aparece
en varias líneas.
Párrafos y salto de línea àrea la etiqueta del párrafo
Para evitar tener que poner estos saltos de línea, usamos <p> , la etiqueta
de párrafo y su cierre </p>. Todo lo que encerremos entre estas etiquetas
constituye un único párrafo que el navegador interpretará como tal. Además
podemos usar el atributo aling para alinear el párrafo a la izquierda
(left, valor por defecto), derecha (right), centro (center) o
justificado (justify):
<html>
<body>
<p align=”left”>Esto es un párrafo justificado a la izquierda</p>
<p align=”center”>Esto es un párrafo justificado al centro</p>
<p align=”right”>Esto es un párrafo justificado a la derecha</p>
</body>
</html>
Estas etiquetas y atributos se mostrarán como aquí abajo.
Esto es un párrafo justificado al centro
Esto es un párrafo justificado a la derecha
El navegador, al igual que no reconoce los saltos de línea, tampoco reconoce
los espacios en blanco. Veámoslo en el siguiente ejemplo:
<html>
<body>
Este texto estará contiguo.
</body>
</html>
Estas etiquetas y atributos se mostrarán como aquí abajo.
El espacio en blanco es un carácter especial y la única forma de introducirlo
es mediante el código de su carácter especial correspondiente ( ).
<html>
<body>
Este texto no estará contiguo.
</body>
</html>
Estas etiquetas y atributos se mostrarán como aquí abajo.
Algunos de los caracteres especiales que podemos usar en html son:
| Símbolo | Carácter especial |
| | Espacio en blanco |
| á | &(a)acute; á é í ó |
| Á | &(A)acute; Á É Í Ó |
| " | “ |
| < | < |
| > | > |
| € | € |
| ñ | Ñ |
| ¡ | ¡ |
| ¿ | ¿ |
| & | & |
Y por tanto si queremos que en una página web se visualice correctamente
una palabra con tilde deberíamos de usar caracteres especiales en lugar de
escribirlo directamente con tilde en el código HTML:
<html>
<body>
Web de Educación
</body>
</html>
Estas etiquetas y atributos se mostrarán como aquí abajo.
Web de Educación
En muchas ocasiones nos puede interesar que el navegador no modifique
el aspecto de un párrafo porque ya tiene el deseado, de esta manera respetará
todos los espacios y saltos de línea que pongamos. En ese caso usaremos la
etiqueta <pre> y su cierre </pre> para encerrar el texto preformateado:
<html>
<body>
<pre>Este texto
se verá
tal cual aparece
</pre>
</body>
</html>
Estas etiquetas y atributos se mostrarán como aquí abajo.
Este texto
se verá
tal cual aparece
3 FORMAS DE APLICAR ESTILOS
FORMAS DE APLICAR UN ESTILO CSS EN UNA PAGINA HTML
Estilo aplicado a una etiqueta en concreto: Si queremos modificar
solo el estilo de unas determinadas etiquetas de nuestra página
HTML debemos incluir el atributo style en ellas tomando como valor
las propiedades CSS deseadas seguidas de ":" y su valor,
reparándolas unas de otras con ";" .De esta forma podemos aplicar
diferentes estilos a varias etiquetas. En el siguiente ejemplo se
ve como se aplica a un párrafo el color verde para el texto y
tamaño 20, mientras que a otro se le asigna el rojo y tamaño 15:
solo el estilo de unas determinadas etiquetas de nuestra página
HTML debemos incluir el atributo style en ellas tomando como valor
las propiedades CSS deseadas seguidas de ":" y su valor,
reparándolas unas de otras con ";" .De esta forma podemos aplicar
diferentes estilos a varias etiquetas. En el siguiente ejemplo se
ve como se aplica a un párrafo el color verde para el texto y
tamaño 20, mientras que a otro se le asigna el rojo y tamaño 15:
Vídeo en la parte final pincha aqui para ir al video tutorial
<html>
<body>
<p style="color:green;font-size:20px">Este es el primer párrafo</P>
<p style="color:red;font-size:15px">Este es el segundo párrafo
con otro estilo</p>
<p style="color:red;font-size:15px">Este es el segundo párrafo
con otro estilo</p>
</body>
</html>
Estas etiquetas y atributos se mostraran como esta aqui abajo
Este es el primer párrafo
Este es el segundo párrafo con otro estilo
Se puede utilizar la etiqueta <div> y su cierre </div> para englobar aquella una sección de la página con un estilo determinado:
<div> style=”color:green;font-size:14px”> Esta sección de la web tendrá el estilo definido en div
</div>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Esta sección de la web tendrá el estilo definido en div
Estilo aplicado de forma global a una página HTML: La definición de estilos vista anteriormente es solamente útil cuando queremós hacer algún cambio puntual en nuestra web, pero sin embargo sigue haciendo que la página sea difícil de mantener en caso de necesitar realizar cambios en ella. Para resolver este problema podemos hacer uso de la etiqueta <style> y su cierre </style> definida dentro de la etiqueta <head> de la página. Dentro de <style> definiremos el estilo que queramos modificar para cada una de las etiquetas (o también llamados selectores): <style> etiqueta1 { propiedad1:valor1; propiedad2: valor2; …. ; propiedadN:valorN } etiqueta2 { propiedad1:valor1 ; propiedad2: valor2 ;…. ; propiedadM:valorM } … </style> Supongamos que queremos definir un estilo para todos los párrafos de una web escribiéndolos todos en cursiva y de color rojo y además queremos redefinir el estilo de las cabeceras de nivel 1 siendo todas ellas de color azul:
<html>
<head>
<style type=”text/css”>
p {font-style:italic; color:red; }
h1 { color:yellow; }
</style>
</head>
<body>
<h1>Canción del Pirata</h1>
<p> Con cien cañones por banda</p>
<p> Viento en popa a toda vela</p>
</body>
</html>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Canción del Pirata
Con cien cañones por banda
Viento en popa a toda vela
Algunos navegadores antiguos que no soporten hojas de estilo pueden hacer que tengamos problemas para mostrar la página. Por ello se han de tomar ciertas precauciones como encerrar el código CSS entre comentarios HTML de esta manera hará que los navegadores modernós ignoren los símbolos <!– y –> ya que saben que el códigó encerrado en la etiqueta <style> es CSS gracias a la inclusión del atributo type=”text/css” .Al mismo tiempo los navegadores antiguos interpretarán el código CSS como un comentario y no mostrarán nada.
<html>
<head>
<style type=”text/css”>
p { font-size:25; color:red;}
</style>
</head>
<body>
<P>texto rojo</p>
</body>
</html>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
texto rojo
Estilo aplicado a una etiqueta en particular mediante clases: Hasta ahora hemos visto como redefinir el estilo para una etiqueta determinada pero en muchas ocasiones nos puede interesar definir más de un estilo para una misma etiqueta y usar uno u otro cuando nos interese. Para solucionarlo se introducen las clases que son variantes del estilo para una misma etiqueta. Las clases se definen con la siguiente sintaxis: <style> etiqueta1.clase1 { propiedad1:valor1 ; propiedad2: valor2; …. ; propiedadN:valorN } etiqueta1.clase2 { propiedad1:valor1 ; propiedad2: valor2 ;…. ; propiedadM:valorM } … </style> En el momento que queramos usar cada una de ellas, bastará con incluir el atributo class dándole como valor el nombre asignado a la clase. Veámoslo más claramente con el siguiente ejemplo: Imagina que quieres definir dos estilos diferentes para la etiqueta <p> uno de color verde y tamaño 10 y otro de color gris y tamaño 15. En ese caso crearemos dos clases diferentes llamadas “parrafo_verde” y “parrafo_gris”:
<html>
<head>
<style type=”text/css”> p.parrafo_verde { font-size:15; color:green; } p.parrafo_gris { font-size:20; color:gray; }
</style>
</head>
<body>
<p class=”parrafo_verde”> Párrafo con el primer estilo </p>
<p class=”parrafo_gris”> Párrafo con el segundo estilo</p>
</body>
</html>
Estas etiquetas y atributos se mostraran como esta aquí abajo.
Párrafo con el primer estilo
Párrafo con el segundo estilo
Mismo estilo para varias etiquetas determinadas: Cuando queremos aplicar un estilo a etiquetas HTML diferentes basta con separar con “,” dichas etiquetas y posteriormente definir el estilo:
<html>
<head> <style type=”text/css”>
h1, h2, p { color:orange;}
</style>
</head>
<body>
<h1>Título</h1>
<h2>Subtítulo</h2>
<p> Párrafo </p>
</body>
</html>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Título
Subtítulo
Párrafo
Estilo aplicado a cualquier etiqueta: Podemos crear un estilo y aplicarlo a cualquier etiqueta que lo acepte. La sintaxis es la siguiente: style> #estilo1 { propiedad1:valor1 ; propiedad2: valor2; …. ; propiedadN:valorN } #estilo2 { propiedad1:valor1 ; propiedad2: valor2 ;…. ; propiedadM:valorM } … </style> Cuando queramos usarlo debemos añadir el atributo id a la etiqueta escribiendo como valor el nombre dado al estilo. En el siguiente ejemplo se muestra como dos etiquetas diferentes como <p> y <h1> utilizan el mismo estilo.
<html>
<head>
<style type=”text/css”>
#estilo_azul { color:blue;}
</style>
</head>
<body>
<h1 id=”estilo_azul”>Título del párrafo</h1>
<p id=”estilo_azul”>Este es el contenido del párrafo </p>
</body>
</html>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Título del párrafo
Este es el contenido del párrafo
Estilo aplicado según el contexto : Muchas veces nos puede interesar aplicar un estilo a una etiqueta solamente si se encuentra dentro de otra etiqueta en concreto. Por ejemplo imaginemos que queremos mostrar los enlaces en rojo únicamente cuando éstos aparezcan dentro de un párrafo, en ese caso definiremos el estilo separando las etiquetas con espacios de izquierda a derecha según el anidamiento:
<html>
<head>
<style type=”text/css”>
p { color:red; }
a { color:green; }
</style>
</head>
<body>
<a href=”http://www.google.es”><P>Este enlace aparece en rojo</P></a>
<a href=”http://www.google.es”>Este enlace aparece en azul</a> </body>
</html>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Este enlace aparece en rojo google
Este enlace aparece en verde google
Estilo aplicado mediante una hoja de estilo aparte: Se puede definir el estilo de una web en un fichero CSS aparte para luego incluirlo en nuestro archivo HTML. Esto es sobre todo conveniente cuando tenemos varias web que hacen uso del mismo estilo, de manera que si queremos cambiar su aspecto bastará con cambiar solamente el archivo CSS donde está definido. El código que antes incluíamos en la etiqueta <style> lo salvamos en un fichero aparte, por ejemplo en uno llamado “miestilo.css”: p,h1.miestilo { color:red; font-size:25; } h2 { color:gray; } Ahora bastará con enlazar en nuestro archivo HTML el fichero CSS creado mediante la etiqueta <link/> incluida dentro del <head>.Esta etiqueta acepta el atributo hre en el que le indicaremos la URL del archivo CSS, el aributo rel que indica la relación entre los dos documentos (en nuestro caso le daremos el valor “stylesheet” ya que el documento será la hoja de estilo del fichero HTML) y el atributo type que indica el tipo de contenido al que se enlaza (en nuestro caso asignamos el valor “text/css”). En el siguiente ejemplo usaremos el estilo creado anteriormente en el fichero HTML:
<html>
<head>
<link href=”miestilo.css” rel=”stylesheet” type=”text/css”/>
</head>
<body>
<h1>Título del párrafo</h1>
<p>Este es el contenido del párrafo </p>
</body>
</html>
Este es documento de CSS del archivo “miestilo.css”.
@charset “utf-8”;
p,h1.miestilo
{
color:blue;
p,h1.miestilo
{
color:blue;
font-size:25;
}
h1
{
color:gray;
}
}
h1
{
color:gray;
}
Estas etiquetas y atributos se mostraran como esta aquí abajo.
Título del párrafo
Este es el contenido del párrafo
Estilo aplicado en caso de ambigüedad : En el caso que tengamos definido un estilo para una misma etiqueta en varios lugares, se aplicará el estilo que tenga más prioridad, siendo éste el orden:
1º) Estilos definidos con el atributo “style” en la propia etiqueta.
2º) Estilos definidos con la etiqueta <style> en la cabecera de la página.
3º) Estilos definidos en un archivo CSS.
video tutorial
Suscribirse a:
Entradas (Atom)