¿Cómo funciona HTML?

Clase 7 de 41 • Curso de HTML y CSS 2019

Clase anteriorSiguiente clase

Ronald Alexander Palacios Garrido

student•

Marcos ismael Caballero reyes

student•

jajajajaja te pasaste esta bueno

Ana Carolina Caicedo

student•

He tenido que decirlo porque confunde a los mortales.

JuanC M

student•

Estructura Basica HTML5

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <header>
            <h1>Titulos de h1 hasta h6</h1>
        </header>
        <nav>
            <a href="#">Link</a>
        </nav>
        <main>
            <aside>
                <h2>Titulo con tamaño menor que h1</h2>
                <p>Parrafo</p>
            </aside>
            <section>
                <article>
                    <p>parrafo</p>
                </article>
            </section>
        </main>
        <footer>
            <a href="#">otro Link</a>
            <p>parrafo</p>
            <img src="direccion-de-la-imagen.jpg" alt="si la imagen no aparece">
        </footer>
    </body>
</html>```

Luis Carlos Consuegra

student•

gracias por el aporte

Marcos ismael Caballero reyes

student•

gracias por el aporte

Luis Ricardo Moran Chozo

student•

Estructura

Diego Chuquiyauri

student•

no olviden comenzar su documento html con <!doctype html>

Christian David Sánchez

student•

Lo recomiendo: https://htmlreference.io Es de gran ayuda :)

Gustavo Choque

student•

muy bueno

Edylber Simancas

student•

Esta genial!

Rhonald Augusto Sánchez Gomez

student•

HTML = Hyper Text Markup Language (Lenguaje de marcado de hipertexto). Es un sistema de marcas de hipertexto. Se enfoca en la diferenciación y sintesis. Define la semantica de un website.

**Etiquetas comunes: **

<h1></h1> ... <h6></h6>

Definen distintos tamaños de encabezados

<div></div>

Define secciones del website

<p></p>

Define un parrafo

Estructura basica de un Documento HTML:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<header>
		<nav></nav>
	</header>
	<section>
		<article></article>
	</section>
	<section>
		<article></article>
	</section>
	<footer></footer>
</body>
</html>

Acotación importante: HTML no es un lenguaje de programación

Aldo Miguel Ortiz Parodi

student•

Es un lenguaje de marcado, que más bien ha evolucionado bastante, permitiendo cosas muy interesantes, como por ejemplo condicionar la carga de archivos CSS dependiendo del ancho de la pantalla (una especie de condicionales), indicar que cuando se de clic en un elemento se ejecute una función de javaScript ("onclick"), y muchas cosas más.

Abril Darynka Tapia Sosa

student•

<html>
<head>
	<title>Estructura de HTML</title>
</head>
<body> 
	<div>soy un contenedor</div>
	<div>
		<h1>Título</h1>
		<h2>Tema</h2>
		<h3>Subtema</h3>
		<p>Parrafo </p>
	</div>
	<footer>Pie de página</footer>
</body>
</html>

Kevin Alejandro Tovar Lamilla

student•

El uso de estas etiquetas puede parecer complejo al comienzo pero cuando uno empieza a usarlo no es tan difícil, hay que aprender como usar correctamente las etiquetas

Jorge Daniel Badillo Paz

student•

Opino igual que tú, ya después que uno las conoce y las utiliza es más fácil

Edwin Jorge Arroyo

student•

¡Concuerdo totalmente contigo Kev!

Ronald Alexander Palacios Garrido

student•

HTML: Las siglas corresponden a HyperText Markup Language, es decir, ++Lenguaje de Marcas de Hipertexto++ es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. HTML funciona haciendo uso de las siguientes etiquetas básicas: <html></html> contenedor principal. <head></head> Cabeza. <meta> funciona como motores de búsqueda. <body></body> Contiene todo el contenido que aparecerá en la Pág Web. <h1></h1> para títulos o encabezados va desde h1 hasta h6, los más usados h1 hasta h3. <p></p> incluye Párrafo <div> </div> Crea secciones <footer></footer> es la sección del pie de página.

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

Escribiendo html:5 y presionando Tab en el editor de texto te crea la parte de un documento.

John Alexander Chicaiza

student•

Gracias

Cristian Henao

student•

En VScode pueden simplemente usar el signo " ! " y tab, si no les funciona después de escribir ! dan control espacio (para que les salgan las opciones) y luego tab

Guillermo Moreno Lopez

student•

Que bueno que tome el curso de prog basica de freddy

Sebastian Lomas

student•

<!DOCTYPE html> <!--Le ayuda al navegador a saber que es HTML5-->
<html>
<head><!--La informacion usada aqui es para el motor de busqueda-->
	<meta>
	<title></title>
</head>
<body><!--Aqui empieza la estructura visible de nuestra pagina-->
	hola
	<h1>Hola</h1><!--Encabezado 1-->
	<h2>Hola h2</h2><!--Encabezado 2-->
	<p>asdajdkljajskdn</p><!--Este parrafo pertence al h2 de arriba-->
	<h3>Hola h3</h3><!--Encabezado 3-->
</body>
</html>

Nahuel Venencio

student•

Dejo un resumen de las etiquetas que se citaron hasta el momento por si a alguien le sirve:

<code>

<!DOCTYPE html> <html lang="es" dir="ltr">  <head> <meta charset="utf-8" name="Mi web con carrito" content="This is a website">  <title></title> </head> <body>

<!-- Titulos o encabezados
Sirven para jerarquizar la informacion, ademas sirven para calificar
tu sitio web por los navegadores.
-->
<h1>hola</h1>
<h2>hola soy un h2</h2>
<h3>hola soy un h3</h3>

<!-- Crear secciones o agrupar contenidos -->
<div class="">
</div>

<!-- Parrafos -->
<p></p>

<!-- Contenedor generico sin ninguna regla aplicada -->
<span></span>

<!-- Nos ayuda a incluir imagenes -->
<img src="" />

<!-- Hiperlink -->
<a href="www.google.com">LINK</a>

</body>  <footer> </footer> </html>

<code>

Bastian Besoain

student•

Muy buen resumen Nahuel, de hecho me pareció tan útil que copiaré tu formato y le agregaré etiquetas según vayan apareciendo.

Un saludo!

Juan Sebastian Muñoz Silva

student•

Por favor necesito ayuda, ya que en mi codigo no escribo algo pero se representa en el navegador y me he metido al zona de desarrollador en google y lo que no escribi... ayuda porfavor.

Agustin Torres Munguia

student•

Guardaste tu archivo despues de editarlo? CTRL + S para Windows o CMD + S para Mac.

Recuerda que cada vez que hagas una modificación a tu código, deberás de guardar el archivo y refrescar tu navegador

Enri Esquivel Junco

student•

hola, Lo que escribiste esta es lo que sale. intenta borrar algo y ve lo que pasa

Elkin Mauricio Bautista Rubiano

student•

HTML, mejor conocido como lenguaje de marcas de hipertexto, es un lenguaje de codificacón que nos permite organizar el contenido de una página web de la siguiente manera:

<h1></h1> - Serán las etiquetas que nos permitirán jerarquizar el contenido de la página web, siendo el H1 el título que llevará el tema central del contenido que queramos mostrar. <div></div> - Ayuda a organizar el contenido en bloques, es la base de que un contenido sea responsive o no. <p><p> - Párrafo principal, lorem ipsum por ejemplo.

<a href="http://duckduck.com">texto que se mostrará al usuario</a>

Meta: Permite organizar los caracteres en utf-8 o utf-16

<title> </title> el nombre de tu página que se muestra en las pestañas del navegador

<code>
<html>
<head>
  <title>
    Qué ####da, es el mejor nombre de la vida xdxdxdxdxdxd
    </title>
  </head>
<body>
  <div>

  <h1>
    Hola soy un H1
    </h1>
    <h2>
      Hola soy un h2
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h3>
      Hola soy un h3
    </h3>
  </div>
  <footer></footer>
</body>
</html>

PD: Encontré un truco de atom, cuando estás al final de una linea y aprietas control, puedes subir o bajar el código de esa línea. Es muy útil.

Israel Vasquez

student•

¿Cuál sería la diferencia entre usar div y section?

Cristian Blandon

student•

SEO y semántica. <div> es simplemente un contenedor sin significado. Para las personas que entren a tu página, no habrá diferencia, porque puedes lograr el mismo "efecto visual" usando <div> o <section> o <article>, pero para el posicionamiento o para los sistemas que "usen" tu página, habrá diferencia.

Aquí puedes encontrar una corta conversación al respecto.

¡Saludos!

John Cardenas

student•

Se podría decir que div es más genérico y section es más semántico. Section lo puedes usar, como su nombre lo dice, para dividir secciones de una página web (sección de contacto, sección de comentarios, sección de productos...). En cambio, un div es más como para poder trabajar con bloques y posicionar elementos más cómodamente. Div no es semántico, no significa algo.

Un ejemplo puede ser este:

<section class="productos">
	<div class="productos">
	</div>	
</section>

Francisco Javier Tulcán Rodríguez

student•

¡vamos que vamos!

Cristian Ramos

student•

Gogogo!

Francisco Javier Tulcán Rodríguez

student•

HTML funciona dando toda la estructura, lo que soporta la información que deseas publicar o compartir en Internet.

Laura Camila Pregonero

student•

++ESTRUCTURA HTML++

<html> <head> --------------- </head> <body> ---------------- </body> </html> :::::::::::::::::::::::

++ETIQUETAS COMUNES++ A

Titulos  y encabezados....
**<h2> </h2>**
**<h3> </h3>**
**<h4> </h4>**

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.

Crear secciones o agrupación de de contenidos.
<div> </div>

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Se utilizan para crear parrafos de texto. 
<p> </p>

Adrian Lima

student•

Gracias a div por existir xd

Caleb Ismael François

student•

Es muy bueno reforzar mis conocimientos

¿Cómo funciona HTML?

Internet

¿Dónde aprender HTML y CSS modernos?

Pasos para aprender HTML y CSS

¿Qué conocimientos necesito para tomar este curso?

¿Cómo se construye la tecnología web?

¿Cómo instalar ATOM?

Comprendamos Internet

Los básicos del web

¿Cómo funciona HTML?

Etiquetas y sus atributos

Reto 1: crea tu fiesta de gifs

¿Cómo funciona CSS?

¿Cómo funciona JavaScript?

Hola mundo y estructura del proyecto

Listado de las etiquetas más usadas

Construcción de un producto digital

Paper wireframe

¿Cómo instalar XD?

Diseño de interfaces

Maquetación de la NavBar

Maquetación de main_section y agregando estilos CSS

Maquetación de tarjetas de producto

Fuentes personalizadas y variables de CSS

Categorizando etiquetas según nuestra estructura en HTML

Reto 2: Maquetar el home del producto digital

Reglas responsive

Animaciones y transiciones

Integrando otras herramientas

Atributos especiales de las etiquetas para mejorar el funcionamiento de nuestros formularios

Librería vs Framework

Sistema de Grillas

Completando el Sistema de Grillas

Reto 3: implementación del sistema de grillas

Maquetación del formulario

Creación de formulario: inputs

Creación de formulario: botones

¿Cómo crear tu cuenta en Paypal?

Configuración del botón de pago con Paypal

Autofill del formulario de PayPal

Maquetación de pantalla de éxito y error

Deploy

Testing con el Navegador

Cómo crear tu cuenta en Github

Subiendo nuestro proyecto a Internet con Github

Conclusión

Conclusiones

Bonus

Librería vs Framework