Bitácora HTML5 CSS

Diseñar las diapositivas con mucho
estilo y organización
Colegio….
Estudiante:
Curso:
Emprendimiento:
Introducción al HTML5 - CSS
● Ideas -usar viñetas para cada una de las ideas.

● No se vale copiar y pegar, ni mucho menos que tenga este aspecto:
● TML (Hyper Text Markup Lenguage) es un leguaje de marcado de texto, lo cual nos indica que no es un
lenguaje de programación como Java, PHP, C o VisualBasic. HTML es el lenguaje para escribir páginas web.
Las marcas, conocidas como etiquetas, describen la forma en la que se estructura el contenido de una
página web.
● Explica de forma clara que és, para qué se usa, qué son los estilos en HTML
● La información la encuentra: en https://www.aulaclic.es/html/t_1_1.htm
● na página web debe estar escrita en HTML pero también suele incorporar otros elementos como hojas de
estilo CSS y programación con el lenguaje Javascript. Con CSS se define el aspecto estético de la página y
con Javascript se pueden realizar tareas adicionales cómo abrir y cerrar ventanas, validar los datos
introducidos por los usuarios, y otras tareas que requieren ser programadas. El conjunto de HTML, CSS y
Javascript es lo que se conoce como front-end o capa de presentación. Esta capa se ejecuta en el
navegador, mientras que con back-end o capa de datos se hace referencia a la programación realizada en
Crear un infografía HTML 5 - CSS
Puede usar la herramienta canva para
realizar este es producto, para lo cual es
necesario leer la unidad 1
https://www.aulaclic.es/html/t_1_1.htm
lectura del capítulo 1 del curso html 5 y
sacar muchas ideas
● Etiquetas
● Mi primera pagina web
● Editores html
cómo hacerla: (140) CÓMO HACER UNA
INFOGRAFÍA EN WORD ✅ EN 5 MINUTOS✨ -
YouTube
Curso de HTML con Estilos
Curso de Html5 CSS, en aulaclic

Explicación en sus palabras de cada
Bloc de notas diapositivas
Mi primera página web
Estructura básica HTML
<html>
<head>
<title>TEKNONICOLAS</title>
</head>
<body>
Bienvenidos a su campus virtual CNNE
Emprendedor: John Alexander Caraballo
</body>
</html>
explica en tus palabras lo que realizamos

Guardar nuestra página web - index.html

diapositivas
Archivo html Explicación en sus palabras de cada
diapositivas
Esta es mi primera página web

Nuestra primera página web
Título <title>

<Body> diapositivas
Unidad 2. Etiquetas de Texto
<!DOCTYPE html> Esta etiqueta hace la declaración la versión de HTML 5
<!DOCTYPE html> Declara instrucciones al navegador sobre la versión de HTML que utilizará la
página
<head> La etiqueta <head> contiene información sobre la página.

Después de haber leido la unidad 2
https://www.aulaclic.es/html/t_2_1.htm
debe construir esta tabla con las etiquetas y su respectiva
Unidad 2. Etiquetas de Texto descripción puede usar varias diapositivas
<!DOCTYPE html> Declaración o instrucción al navegador sobre la versión de HTML
<head> <title> <style> <base> <link> <meta> <script> <noscript>.
<body> Crea el contenido de la página, lo que se ve a través del navegador: texto,

imágenes, enlaces, tablas, etc…
<h1> a <h6> con Títulos o rótulos

</h#>
&nbsp Código html para el espacio
<p></p> Crear párrafos con un salto de línea implicito
<div> y <span> Etiquetas neutras dentro de la semántica de HTML

Etiquetas section para secciones, article para artículos, header para cabeceras, nav para menús,
semánticas footer para pies de página y aside para contenido en el latera
< > explica HTML
< > explica HTML

Completa la tabla
< > explica HTML con todas las
etiquetas de la
< > explica HTML unidad 2.
< > explica HTML
<> explica HTML
ver los videos:

https://www.youtube.com/watch?list=PLomN84AdULICu_qPQr-lg1VJCt_px8xd0&v=xbYl8fdZ3Xg
https://www.youtube.com/watch?v=35gk89zx6hM&list=PLomN84AdULICu_qPQr-lg1VJCt_px8xd0
Etiquetas section para secciones, article para artículos, header para cabeceras, nav para menús,
semánticas footer para pies de página y aside para contenido en el latera
< > explica HTML
< > explica HTML

Completa la tabla
< > explica HTML con todas las
etiquetas de la
< > explica HTML unidad 2.
< > explica HTML
<> explica HTML
ver los videos:

https://www.youtube.com/watch?list=PLomN84AdULICu_qPQr-lg1VJCt_px8xd0&v=xbYl8fdZ3Xg
https://www.youtube.com/watch?v=35gk89zx6hM&list=PLomN84AdULICu_qPQr-lg1VJCt_px8xd0
Introducción a las hojas de estilo CSS
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Tekno 1 - texto</title>
<style type="text/css">
h1 { text-align: center; }
p { font-family: arial;
font-size: 16px; }
.resaltado {color: green;}
</style>
</head>
<body>
<h1>BIENVENIDOS</h1>
<p>Teknonicolas es un campus virtual que
busca desarrollar habilidades digitales</p>
<h2>QUIENES SOMOS</h2>
<p class="resaltado">Edificamos futuro.</p>
</body>
</html>
Introducción a las hojas de estilo CSS
<html lang="es">
<head>
<meta charset="utf-8" />
<title>AQUI COLOQUE EL NOMBRE DE SU EMPRESA</title>
<style type="text/css">
h1 { text-align: center; }
p { font-family: arial;
font-size: 16px; }
.resaltado {color: RED;}
</style>
</head>
<body>
<h1>BIENVENIDOS A NOMNRE CORTO DE SU EMPRESA</h1>
<p>AQUÍ HAGA UNA DESCRIPCION DE LO QUE HACE SU EMPRESA - PRODUTOS O
SERVICIO</p>
<h2>QUIENES SOMOS</h2>
<p class="resaltado">ESCRIBA UNA FRASE DE LO HACE SU EMPRESA.</p>
<h2>VISION</h2>
<p class="resaltado">QUE SEREMOS EN EL FUTURO.</p>
<h2>MISION</h2>
<p class="resaltado">SOMOS FUNDADOS CON EL OBJETIVO DE....</p>
<h2>VALORES INSTITUCIONALES </h2>
<p class="resaltado">SOMO LOS MEJORES EN EL MERCADO PQ TENEMOS VOCACIÓN
DE SERVICIO.... TALENTO HUMANO.</p>
</body>
</html>
Sitio web

Bitácora HTML5 CSS

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Bitácora HTML5 CSS

Cargado por

Copyright:

Formatos disponibles

Diseñar las diapositivas con mucho

● Ideas -usar viñetas para cada una de las ideas.

Curso de Html5 CSS, en aulaclic

explica en tus palabras lo que realizamos

Explicación en sus palabras de cada

Esta es mi primera página web

Explicación en sus palabras de cada

<head> La etiqueta <head> contiene información sobre la página.

<!DOCTYPE html> Declaración o instrucción al navegador sobre la versión de HTML

<head> <title> <style> <base> <link> <meta> <script> <noscript>.

<body> Crea el contenido de la página, lo que se ve a través del navegador: texto,

<h1> a <h6> con Títulos o rótulos

&nbsp Código html para el espacio

<p></p> Crear párrafos con un salto de línea implicito

<div> y <span> Etiquetas neutras dentro de la semántica de HTML

< > explica HTML

< > explica HTML

< > explica HTML

<> explica HTML

ver los videos:

< > explica HTML

< > explica HTML

< > explica HTML

<> explica HTML

ver los videos:

También podría gustarte