Curso Basico de HTML

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]

Autor

Tema: Curso Basico de HTML (Leído 11,838 veces)

fon

Desconectado

Mensajes: 7

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

<html>
    <head>
        <title>Titulo</title>
    </head>
    <body>
        Contenido...
        <!-- Comentario -->
    </body>
</html>

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

Mensajes: 288

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

eradicate-malware.foroactivo.com

fon

Desconectado

Mensajes: 7

Re: Curso Basico de HTML

« Respuesta #2 en: 5 Mayo 2023, 18:52 pm »

Cita de: ehn@ en 5 Mayo 2023, 08:09 am

Gracias


	En línea

fon

Desconectado

Mensajes: 7

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

<html>
    <head>
        <title>Prueba 1</title>
        <meta name="description" content="Descripción...">
    </head>
    <body>
    </body>
</html>

Para poner keywords:

Código

<html>
    <head>
        <title>Prueba 1</title>
        <meta name="keywords" content="keyword, keyword2, otros">
    </head>
    <body>
    </body>
</html>

Para poner viewport (Que el tamaño de la pagina se ajuste al tamaño de pantalla):

Código

<html>
    <head>
        <title>Prueba 1</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    </body>
</html>

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.
Á ---- Á
á ---- á
É ---- É
é ---- é
Í ---- Í
í ---- í
Ó ---- Ó
ó ---- ó
Ú ---- Ú
ú ---- ú
Ñ ---- Ñ
ñ ---- ñ
& ---- &
¿ ---- ¿

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

Mensajes: 11

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

Mensajes: 7

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

Mensajes: 7

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

<html>
    <head>
        <title>Cajas DIV</title>
    </head>
    <body>
        <div>
            Texto dentro del DIV
        </div>
    Texto fuera del DIV
    </body>
</html>

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

div {
    text-align: center;
}

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

<link rel="stylesheet" href="ruta/a/el/archivo.css" />

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

<form action="archivo/de/procesamiento.php" method="post">
    Contenido del formulario
</form>

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

<button type="submit">Texto del boton</button>

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

<button type="reset">Texto del boton</button>

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

<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

Mensajes: 18

Re: Curso Basico de HTML

« Respuesta #7 en: 13 Febrero 2024, 23:46 pm »

El post es un poco antiguo pero muchas gracias

... 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

Mensajes: 7

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 a:

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	Curso PHP basico PHP	ninfas	2	3,930	7 Enero 2010, 15:59 pm por ~ Yoya ~
	Curso Visual Basic 6.0 Basico Programación Visual Basic	ninfas	4	7,194	31 Enero 2010, 21:52 pm por Gunit
	Curso básico lenguaje C Programación C/C++	maxotux	1	2,925	18 Mayo 2012, 05:24 am por exel
	Programacion en C++ Curso Basico Programación C/C++	sukokiin	0	2,421	22 Julio 2019, 22:15 pm por sukokiin
	Curso básico de Auditoría de Sistemas Tutoriales - Documentación	r32	9	6,423	13 Enero 2021, 19:36 pm por r32