Cualquiera
puede
desarrollar
en la web
Taller de
HTML, CSS, JS
y Bootstrap
Primer ejemplo de html!!
Utilizando su editor de
confianza crearemos un
archivo llamado:
1_primer_ejemplo.html
No olvides la
extensión .html!!
Nuestras dos primeras etiquetas
¿Qué es html?
HTML, sigla en inglés de HyperText
Markup Language (lenguaje de marcas
de hipertexto)
<etiquetas> </etiquetas>
Etiquetas de encabezado
Archivo: 2_encabezados.html
Apertura y cierre
"Enseñar a los niños el uso del software
libre (en las escuelas), formará individuos
con sentido de libertad. (Richard Stallman")
"Enseñar a los niños el uso del software
libre (en las escuelas,) formará individuos
con sentido de libertad.(“Richard Stallman)
"Enseñar a los niños el uso del software
libre (en las escuelas), formará individuos
con sentido de libertad."(Richard Stallman)
Más etiquetas... Archivo: 3_etiquetas.html
¿Los espacios en blanco?
¿Los saltos de línea?
¿Cuantas etiquetas tengo que
aprender?
¿Las tildes?
¿Cómo sabe el navegador en qué
idioma está mi página web?
Continua…
https://developer.mozilla.org/es/doc
s/HTML/HTML5/HTML5_lista_elem
entos
Metadatos del documento, Scripting, Secciones,
Agrupación de Contenido, Semántica a nivel de
Texto, Contenido incrustado, Datos tabulares,
Formularios
<br>
Permite saltos de línea.
No necesita cerrarse
Estructura formal de un documento HTML5
Archivo: 4_estructura_formal_documento.html
HTML5? HTML4? XHTML? HTML2?
Español (es) Ingles (en) Frances (fr)
Aquí se coloca el título de la página (el
que aparece en las pestañas del
navegador)
Juego de caracteres que nos permite las
tildes
Contenido de la página dentro de la
etiqueta body
La etiqueta meta se usa para
especificar más información sobre la
página
¿Qué es un atributo?
Todos elementos en HTML tienen atributos;
estos son valores adicionales que configuran los
elementos.
<etiqueta atributo1 = “valor” > ... </etiqueta>
<etiqueta atributo1 = “valor” atributo2 = “valor2”> </etiqueta>
<img src="ubicacion/archivo.png" />
Etiqueta meta
<head>
<meta charset="UTF-8">
<meta name="description" content="La descripción de la página, es la que
se ve en los buscadores como google">
<meta name="keywords" content="Palabras claves del docuemento, ejemplo:
HTML,CSS,XML,JavaScript">
<meta name="author" content="Usimte">
</head>
Ejercicios
https://www.w3schools.com/html/exercise.asp?filename=exercise_paragraphs
2
https://www.w3schools.com/html/exercise.asp?filename=exercise_paragraphs
3
Estructura de archivos
Crearemos una carpeta llamada “mi_proyecto”
Dentro de esta crearemos tres carpetas llamadas: “css”, “js” e “imagenes”
Crearemos un archivo llamada “index.html”
Proyecto
Crear una página web sobre un tema del gusto del diseñador. Como deportes,
hobbies, su carrera...
Esta debe tener
1. Un juego de caracteres e idioma
2. Una hoja de estilo
3. Listas ordenadas
4. Listas no ordenadas
5. Tablas
6.
7. Links a otras páginas
8. Uso de bootstrap
Imágenes
1.
Recuerda añadir las imágenes que
quieras usar en la carpeta
“imagenes”, no olvides la extensión
de la imagen.
Añadamos
contenido
¿Cómo cambiamos el color de los
h2, el tamaño de la letra de los
párrafos?
¿Que pasa si quiero que la imagen
sea de otro tamaño?
Gracias
Preguntas del grupo
¿Que les ha parecido el curso?
¿Qué aspectos deberían mejorarse?
¿Algún comentario?
Crear cuenta
Comentarios de: Taller de HTML, CSS, JS y Bootstrap (0)
No hay comentarios