Curso Basico de HTML
fon:
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.
ehn@:
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.
fon:
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
fon:
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.
GerardoMunoz:
Muchas gracias por compartir tus conocimientos, son de mucha ayuda.
Navegación
[#] Página Siguiente