elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Arreglado, de nuevo, el registro del warzone (wargame) de EHN


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Curso Basico de HTML		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Curso Basico de HTML  (Leído 12,394 veces)
fon

Desconectado Desconectado

Mensajes: 7


Ver Perfil
Curso Basico de HTML
« en: 4 Mayo 2023, 19:00 pm »
En este curso voy a enseñar HTML 5.

1ra Entrega

¿Que es HTML?
HTML es HyperText Markup Language, o "Lenguaje de Marcado de Hipertexto".
Se usa para hacer la estructura de una web. También se le puede dar estilos gráficos con CSS.

¿Que necesito para hacer mi web HTML?
Lo primero, un editor de codigo. Cualquiera, el que tu prefieras, incluso puede ser el bloc de notas de Windows.
Lo segundo, un servidor web donde alojar la web cuando la termines.

¿Como previsualizo o ejecuto mi HTML?
Para ejecutarlo, no necesitas ningun programa especial, solo con un navegador basta.

Y ahora, ¿Por donde empiezo?
Empezaremos creando un archivo llamado "index.html", el cual sera la pagina de "inicio" cuando este en el servidor web.
Luego, abrimos ese archivo con algun editor de codigo o el bloc de notas, y empezamos.

¿Como es una etiqueta?
<ETIQUETA> Texto afectado por la misma </ETIQUETA>

Etiquetas basicas
<HTML> - Todo el documento debe incluirse dentro de esta etiqueta.
<HEAD> - La cabecera y metadatos del documento.
<BODY> - Todo el cuerpo, visible en pantalla, esta aqui.
Ejemplo:
Código
  2.     <head>
  3.         <title>Titulo</title>
  4.     </head>
  5.     <body>
  6.         Contenido...
  7.         <!-- Comentario -->
  8.     </body>
  9. </html>
  10.  
En el ejemplo vemos 3 cosas, un titulo, un texto, y un comentario, se explican a continuacion:

Titulo: Sera visible cuando añadimos a favoritos (bookmarks) la pagina o miramos el titulo de la pestaña.

Texto: Al igual que cualquier otra etiqueta situada en el body, sera visible en pantalla.

Comentario: Es un texto que no se ve en pantalla ni en ningun otro sitio, ya que el navegador no lo interpreta. Puede servir para hacer referencias en nuestro codigo, u otros.

Veremos mas en la proxima entrega, esten atentos.
« Última modificación: 5 Mayo 2023, 19:05 pm por fon » En línea
ehn@
Ninja y
Colaborador
***
Desconectado Desconectado

Mensajes: 288



Ver Perfil
Re: Curso Basico de HTML
« Respuesta #1 en: 5 Mayo 2023, 08:09 am »
No es por chafarte la idea, pero @creature se curró un buen tutorial sobre html.
Por lo que he leido el tuyo será sobre html5, intenta no repetir lo que puso creature en su post:

https://foro.elhacker.net/tutoriales_documentacion/aprender_html_completo_a_un_par_de_horas_de_distancia-t8565.0.html

y ciñete a los que son mejoras y diferéncias entre html y html5, te quedara mejor.
En línea

fon

Desconectado Desconectado

Mensajes: 7


Ver Perfil
Re: Curso Basico de HTML
« Respuesta #2 en: 5 Mayo 2023, 18:52 pm »
Cita de: ehn@ en  5 Mayo 2023, 08:09 am
No es por chafarte la idea, pero @creature se curró un buen tutorial sobre html.
Por lo que he leido el tuyo será sobre html5, intenta no repetir lo que puso creature en su post:

https://foro.elhacker.net/tutoriales_documentacion/aprender_html_completo_a_un_par_de_horas_de_distancia-t8565.0.html

y ciñete a los que son mejoras y diferéncias entre html y html5, te quedara mejor.


Gracias
En línea
fon

Desconectado Desconectado

Mensajes: 7


Ver Perfil
Re: Curso Basico de HTML
« Respuesta #3 en: 6 Mayo 2023, 18:03 pm »
2da Entrega

Etiquetas basicas para una buena estructura
Vamos a ver algunas etiquetas básicas, las cuales probablemente usaremos casi siempre, independientemente de lo que hagamos.

BR - Salto de linea
       HTML: Hola<br>Hola
Resultado: Hola
                   Hola
Si usasemos "enter" en vez de BR:
HTML: Hola
            Hola
Salida: HolaHola

P - Párrafo o salto de párrafo
HTML: texto 1 <p>texto 2</p> Texto 3
Salida: texto 1

            texto 2
            
            Texto 3

H1, H2, H3, H4, H5, y H6:
Tamaños de titulo
Todo texto entre apertura y cierre de una de estas tendra las siguientes características:
· Estilo de fuente Bold
· Tamaño Mayor (Siendo 1 el mas grande y 6 el mas pequeño)

META: Añade metadatos
Atributos:
name / content
Usos:
Agregar descripción a tu sitio web, agregar keywords (Palabras clave por las que se lo buscara en Google u otros buscadores), configurar Viewport, entre otros, siempre se agrega dentro del head o encabezado.
Veremos los ejemplos anteriores
Para que la pagina tenga descripción:
Código
  2.     <head>
  3.         <title>Prueba 1</title>
  4.         <meta name="description" content="Descripción...">
  5.     </head>
  6.     <body>
  7.     </body>
  8. </html>
  9.  

Para poner keywords:
Código
  2.     <head>
  3.         <title>Prueba 1</title>
  4.         <meta name="keywords" content="keyword, keyword2, otros">
  5.     </head>
  6.     <body>
  7.     </body>
  8. </html>
  9.  

Para poner viewport (Que el tamaño de la pagina se ajuste al tamaño de pantalla):
Código
  2.     <head>
  3.         <title>Prueba 1</title>
  4.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     </head>
  6.     <body>
  7.     </body>
  8. </html>
  9.  

Acentos y caracteres especiales
En el ejemplo de la descripción, vimos el acento, el cual, algunos navegadores lo interpretarán correctamente, pero la mayoria interpretara mal. (Por ej.: ð) Para esto existe una solución, y es, en lugar de poner el caracter en texto plano, ponemos su código de entidad HTML, aqui pongo algunos ejemplos, y abajo una tabla completa.
Á ---- &Aacute;
á ---- &aacute;
É ---- &Eacute;
é ---- &eacute;
Í ---- &Iacute;
í ---- &iacute;
Ó ---- &Oacute;
ó ---- &oacute;
Ú ---- &Uacute;
ú ---- &uacute;
Ñ ---- &Ntilde;
ñ ---- &ntilde;
& ---- &amp;
¿ ---- &iquest;

Tabla completa (No la hice yo): https://ascii.cl/es/codigos-html.htm


Veremos mas en la proxima entrega, esten atentos.
En línea
GerardoMunoz

Desconectado Desconectado

Mensajes: 11



Ver Perfil WWW
Re: Curso Basico de HTML
« Respuesta #4 en: 11 Mayo 2023, 22:26 pm »
Muchas gracias por compartir tus conocimientos, son de mucha ayuda.
En línea
fon

Desconectado Desconectado

Mensajes: 7


Ver Perfil
Re: Curso Basico de HTML
« Respuesta #5 en: 12 Mayo 2023, 17:34 pm »
Cita de: GerardoMunoz en 11 Mayo 2023, 22:26 pm
Muchas gracias por compartir tus conocimientos, son de mucha ayuda.
De nada. Perdon por no subir las entregas tan seguido, es que últimamente ando medio ocupado.
En línea
fon

Desconectado Desconectado

Mensajes: 7


Ver Perfil
Re: Curso Basico de HTML
« Respuesta #6 en: 26 Noviembre 2023, 05:05 am »
3ra Entrega

Hace mucho que no subo mas nada en este curso, decidi seguir subiendo cosas en mi tiempo libre.
En esta entrega veremos:

  • Cajas DIV
  • Vinculando Hoja De Estilos CSS
  • Creando un formulario

Cajas DIV
Las cajas div son como espacios en nuestra pagina, los cuales pueden tener propiedades especificas, por ejemplo, que todo el texto de la misma se vea mas grande, o con una fuente especifica, o simplemente que se muestre de un color especifico. Para darle estilos, podemos usar CSS.
Código
  2.     <head>
  3.         <title>Cajas DIV</title>
  4.     </head>
  5.     <body>
  6.         <div>
  7.             Texto dentro del DIV
  8.         </div>
  9.     Texto fuera del DIV
  10.     </body>
  11. </html>
  12.  

Sin estilo, deberia verse asi:

Texto dentro del DIV
Texto fuera del DIV

Agregamos alineado center en una hoja CSS (Mas abajo ensenaré a vincular hojas CSS)
Código
  1. div {
  2.     text-align: center;
  3. }
  4.  
Deberia verse:
Texto dentro del DIV
Texto fuera del DIV

Vinculando CSS
Vincular una hoja de estilos CSS es muy sencillo, solo debes incluir lo siguiente dentro del head:
Código
  1. <link rel="stylesheet" href="ruta/a/el/archivo.css" />
  2.  
Por cada carpeta, agrega una "/", eso indica que el texto de antes de la barra, es el nombre de la carpeta a la que entrara, en ese caso:
ruta
   a
      el
         archivo.css
archivo.html
El archivo CSS puede tener cualquier nombre, pero debe tener la extension .css


Creando Formularios

Para crear formularios, usa la etiqueta <form>.
La etiqueta form es como una etiqueta div, pero que puede contener dos (2) botones con acciones predeterminadas:
  • Reiniciar el formulario
  • Enviar los datos del formulario a un archivo de procesamiento de datos (Por ej. PHP)
Código
  1. <form action="archivo/de/procesamiento.php" method="post">
  2.     Contenido del formulario
  3. </form>
  4.  
Action: A donde enviara los datos (y sera redirigido el usuario) cuando pulse el boton "submit"
Method: Metodo de envio de datos al archivo de procesamiento
Creando los botones
Código
  1. <button type="submit">Texto del boton</button>
  2.  
Este codigo renderizara un boton, que al pulsarlo, el usuario sera redirigido a el archivo que pusimos en action, y enviara los datos con el metodo que pusimos en method.
Código
  1. <button type="reset">Texto del boton</button>
  2.  
Este codigo renderizara un boton, que al pulsarlo reiniciara el formulario.

Poniendo Campos en el Formulario
Por ahora solo veremos campos de texto, mas adelante pondre campos de color, seleccion, seleccion multiple, fecha, etc.
Código
  1. <input type="tipo-de-input" name="nombre" id="id" placeholder="Placeholder..." />
Type: Tipo de input, existen:
  • text : Input normal
  • password : Cada vez que escribes, se convierte en * o en puntos
  • email : No dejara enviar el formulario si el email no es valido
Placeholder: Muestra un texto que desaparece al escribir.
Value (no se muestra en el ejemplo): El texto que aparece por defecto al cargar la pagina
Id y Name son campos para identificar el input, para obtener los datos desde archivos de procesamiento.

Eso seria todo por la entrega de hoy.
En línea
Sadistski

Desconectado Desconectado

Mensajes: 18



Ver Perfil WWW
Re: Curso Basico de HTML
« Respuesta #7 en: 13 Febrero 2024, 23:46 pm »
El post es un poco antiguo pero muchas gracias  :D... no conocia el placeholder ^^
En línea
La gente inteligente aprende de sus errores, la gente sabia aprende de los errores de los demás.
fon

Desconectado Desconectado

Mensajes: 7


Ver Perfil
Re: Curso Basico de HTML
« Respuesta #8 en: 23 Febrero 2024, 23:12 pm »
de nada. intentare seguir el curso en mi tiempo libre
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Curso PHP basico
PHP 		ninfas 2 3,946 Último mensaje 7 Enero 2010, 15:59 pm
por ~ Yoya ~
Curso Visual Basic 6.0 Basico
Programación Visual Basic 		ninfas 4 7,220 Último mensaje 31 Enero 2010, 21:52 pm
por Gunit
Curso básico lenguaje C
Programación C/C++ 		maxotux 1 2,960 Último mensaje 18 Mayo 2012, 05:24 am
por exel
Programacion en C++ Curso Basico
Programación C/C++ 		sukokiin 0 2,464 Último mensaje 22 Julio 2019, 22:15 pm
por sukokiin
Curso básico de Auditoría de Sistemas
Tutoriales - Documentación 		r32 9 6,479 Último mensaje 13 Enero 2021, 19:36 pm
por r32
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines