Post on 03-Feb-2016
LENGUAJE DE HTML5CURSO DE TICS DON BOSCOCOLEGIO SALESIANO DON BOSCO DE
GUATEMALA2015
HTML??
Es un archivo delimitado por etiquetas que nos ayudan a crear páginas web por medio de estas por lo que hay multiples etiquetas que nos ayudan a la misma
Etiqueta….
Ejemplo de una etiqueta
<script> </script>
Las etiquetas poseen apertura y cierrre
Etiquetas (II)
Pero algunas etiquetas no tienen cierre por lo que son algunas excepciones en el lenguaje de html por lo que es necesario saberlo.
A dichas etiquetas se les llama vacias
Ejemplos:
<!DOCTYPE html> </br> <hr/>
Generando mi html5
Cuando yo creo el documento html5 lo voy a crear por medio de un software que lo edite que edite mi codigo por lo que lo puedo generar por medio de:
1. sublime text 2. bloc de notas 3. NotePad ++ 4. Otro cual generador como droitedit
Al momento de guardar…
Cuando yo guardo mi html5 en cualquier editor de texto se debe de guardar en el debido formato por lo que es necesario guardarlo bien.
Es VITAL guardarlo con el formato Ejemplo: segundobasico.html
Después…
Luego de haberlo guardado con el debido formato debemos de ver nuestra página generada es decir el ejecutable el resultado de nuestra programación
Podemos verlo por medio del navegador web ya sea Safari, Internet Explorer, Google Chrome pero recordemos guardar cambios siempre
Nota importante
Recordemos que estamos usando la versión mas actual de html que es html5 o bien esta estamos trabajando por lo que siempre hay que usar un buen navegador
Mi primer paso con html
Por ejemplo lo primero que se coloca (usando html5) siempre es:
<!DOCTYPE html> Luego sigue la siguiente
estructura Por favor revise las tareas y
cuaderno y el libro…
Sigue la estructura
Mi primer ejemplo Guardado: ejemplo.html Ubicación: escritorio Codigo:
<!DOCTYPE html> <html>…..
Vea este ejemplo por favor
<!DOCTYPE html> <html> <head> <title> hola mundo </title> </head> </html>
Explicacion….
La estructura anterior solamente muestra lo que es el encabezado de la pagina
Es decir solamente muestra la pestaña del navegador
CUANDO USTED ESTA EN SU NAVEGADOR MIRE LA PESTAÑA Y ESO ES LO QUE APARECERA
Continua….
Entonces al momento de que usted abre su archivo este codigo solo genera en la pestaña la frase “hola mundo”
Aparte es el cuerpo de la pagina
Luego…
Vamos con la estructura del cuerpo de la pagina!!!!
… … <body> </body> </html> Tres etiquetas piense y analice
STOPPLEASE!!! OK??
RECUERDE JOVEN ESTUDIANTE EL LENGUAJE DE HTML5 ES EL INGLES
POR FAVOR ASI QUE MAS QUE REPASE DICHO LENGUAJE PARA NO TENER PROBLEMAS EN LA COMPRENSIÓN DE ETIQUETAS
BODY= CUERPO HTML= LENGUAJE DE MARCADO DE
HIPERTEXTO
BUENO… PERO…
CONTINUAMOS… <body> <h1 style=“background-color: red”> sean todos bienvenidos </h1> </body>
Continua… gracias..
Esta estructura se referia a mostrar un texto en mi pagina web sobre como mostrar…
Sean todos bienvenidos. (de color rojo marcado)
Veamos!!
<!DOCTYPE html> <html> <head> <title> hola </title> </head> <body> <h1> bienvenidos </h1> </body> </html>
Pruebe el ejemplo!
Ademas… LEA CUADERNO Y LIBRO!!!
ESTRUCTURACABECERA!!!
<h1> ¿Pero que me faltó????<h2><h3><h4><h5><h6>
PONGA ATENCIION!!
Ah ya…. Cerrar la etiqueta Si quiero mi titulo mayor (es decir
mayor tamaño)
<h1> Mi pagina web </h1> Esta es para el titulo del cuerpo de la
pagina
Pero recuerde
RecuerdeAunque el el encabezado lleve la etiqueta title no se refiere al titulo del cuerpo de la pagina
<title> no es igual a <h1>STOP!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Etiquetas!!
<p></p> Es para colocar parrafo puede llevar
atributos los cuales aprenderemos poco a poco
<p> gerardo bosco </p>
Imagen!!
Coloca una imagen en mi pagina es una de las mas sencillas de usar
Ejemplo:
<img src=“direccion de la ubicación de la imagen”>
ETIQUETA CENTER
NOS AYUDA A CENTRAR EL TEXTO Y POR LO TANTO FORMA PARTE DE JUSTIFICAR EL TEXTO
<center></center>
Color de fondo
Simple y sencillo por supuesto que en la segunda unidad ya no aplicaremos esta etiqueta sino que solamente css!!
<body bgcolor=“#f00000”>
Color de letra..
Es la etiqueta font color es <font color=“blue”> </font
mmm…
Pero en que me equivoque… Ahh ya..
<font </font>
Etiquetas para subrayar
<ins></ins>
Etiqueta para enfatizar
Enfatiza un texto al momento de colocarlo en la pagina
<em></em> Si quiero colocar un texto fuerte
enfatizado <strong><em> Mi texto enfatizad </em></strong>
Texto grande y pequeño
<big></big> <small></small> Ponga atención y estudie cada etiqueta
puede practicarla en cada parte de su pagina
Para variantes del parrafo
Italica: <i> </i> Negrita: <b></b> Parrafo: <p> </p> Tachado: <del></del> Parrafo tachado: ????
Simple….
Combine la etiqueta del parrafo y del tachado..
Superindice
Cuando leemos cualquier texto aparece un superindice o subindice es decir aquella que nos indica un pie de pagina
Superindice <p> <sup> 1 </sup> este es mi
ejemplo </p>
Subíndice
Es lo mismo Solo que con <sub></sub>
Tabla.
<table border=“10” width=“17”> <tr> <td> celda 1 </td> <td> celda 2 </td> </tr> </table>
Recuerde que la tabla
Se compone de tr, td, th, table Entonces debe de usar cada parte de la
tabla para que lo pueda destacar Recuerde no hay una etiqueta para
tabla
Etiqueta <tr>
¿Para que es tr¡? Es para fila en tabla es decir si hay un
<tr></tr> nos va a generar una fila en la tabla
Etiqueta td
Esta nos va a generar una celda en la tabla <td></td> es decir aca va el contenido de la tabla
Etiqueta ins
Para subrayar <ins></ins>
Etiqueta del
Para tachar <del></del>
Etiqueta bloquote
Para un bloque de citas <bloquote></bloquote>
Etiqueta para enfatizar
Recuerdela por favor Para enfatizar <em> </em>
Etiqueta color de fondo
<body bgcolor=“red”> <body bgcolor=“#F0000”>
Puede usar en inglés o paleta de colores
Etiqueta para texto fuerte
<strong></strong>
NO LO CONFUNDA POR FAVOR
Etiqueta para texto pequeño
<small></small>
Etiqueta texto grande
<big></big>
Etiqueta para color de tipo de letra
<font color=“magenta”> </font>
Vea el ejemplo
<p> <font color=“blue”> Hoy es un buen dia </font> </p>
Etiqueta que estructura el cuerpo de la pagina
<body> ---- ---- …. ---- --- </body> ES DECIR CUERPO DE LA PAGINA
AVISO!
EL ENCABEZADO ES LA PESTAÑA QUE ESTA EN EL NAVEGADOR QUE USE ES DECIR SAFARI, INTERNET EXPLORER, GOOGLE CHROME, ETC..
AUNQUE DIGA ETIQUETA TITLE NO ES PARA EL TITULO
PARA TITULO Y SUBTITULO
USE <h1></h1>
Hasta el…
<h6></h6>
NOTA IMPORTANTE:
JOVENES ESTUDIEN Y REPASEN Y SOBRE TODO PRACTIQUEN EN
CASA
BENDICIONES.