Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: fon en 4 Mayo 2023, 19:00 pm


Título: Curso Basico de HTML
Publicado por: fon 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.

Título: Re: Curso Basico de HTML
Publicado por: 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.

Título: Re: Curso Basico de HTML
Publicado por: fon 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

Título: Re: Curso Basico de HTML
Publicado por: fon 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.

Título: Re: Curso Basico de HTML
Publicado por: GerardoMunoz en 11 Mayo 2023, 22:26 pm
Muchas gracias por compartir tus conocimientos, son de mucha ayuda.

Título: Re: Curso Basico de HTML
Publicado por: fon 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.

Título: Re: Curso Basico de HTML
Publicado por: fon 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.

Título: Re: Curso Basico de HTML
Publicado por: Sadistski en 13 Febrero 2024, 23:46 pm
El post es un poco antiguo pero muchas gracias  :D... no conocia el placeholder ^^

Título: Re: Curso Basico de HTML
Publicado por: fon en 23 Febrero 2024, 23:12 pm
de nada. intentare seguir el curso en mi tiempo libre


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines