Curso Básico de HTML desde 0 - Introducción
Summary
TLDRCarlos Arturo presenta un curso básico de HTML, enseñando desde lo más sencillo para crear sitios web. Explica que HTML es un lenguaje de marcado, no de programación, y lo usa para estructurar contenido como texto e imágenes. Destaca la importancia de navegadores modernos y editores de código, y desaconseja el uso de Internet Explorer. Aborda conceptos básicos como etiquetas, atributos y comentarios, y muestra cómo crear un documento HTML simple con títulos y saltos de línea. Al final, invita a suscriptores y a visitar su sitio web para más recursos.
Takeaways
- 😀 Carlos Arturo presenta el primer capítulo de un curso básico de HTML.
- 🌐 HTML no es un lenguaje de programación, sino un lenguaje de marcado para crear estructuras de sitios web.
- 📚 Se recomienda seguir el curso y tomar otros para aprender a crear sitios web desde cero.
- 🛠️ El curso es fácil de aprender, con capítulos cortos y sencillos.
- 💻 Se necesita un navegador web moderno, como Mozilla Firefox o Google Chrome, y un editor de código para escribir el código HTML.
- 🚫 No se recomienda usar Internet Explorer para trabajar con HTML.
- 📝 Se debe guardar el código HTML con la extensión '.html' para que los navegadores lo reconozcan.
- 🔑 Etiquetas y atributos son fundamentales en HTML; las etiquetas representan elementos y los atributos especifican características.
- 📖 El 'Head' y el 'Body' son las dos secciones principales de un documento HTML; el 'Head' contiene información para el navegador y el 'Body' todo el contenido visible.
- 🔍 Los comentarios en el código HTML permiten añadir notas que no aparecerán en la página web.
- 🖼️ Algunas etiquetas HTML, como 'br', no requieren un cierre y se usan para elementos como saltos de línea.
Q & A
¿Qué es el HTML y para qué sirve?
-HTML, o HyperText Markup Language, es un lenguaje de marcado que permite crear estructuras de sitios web. Es la base para el contenido de una página web, incluyendo texto, imágenes, formularios y botones, entre otros elementos.
¿Por qué el instructor recomienda usar Mozilla Firefox para este curso de HTML básico?
-El instructor recomienda Mozilla Firefox por su modernidad y porque es el navegador que él mismo utiliza. Aunque también menciona que se pueden usar otros navegadores como Google Chrome o Safari, desaconseja el uso de Internet Explorer.
¿Qué es un editor de código y por qué es necesario para crear sitios web?
-Un editor de código es un programa diseñado para escribir, editar y visualizar código de manera eficiente. Es necesario para crear sitios web porque permite trabajar con el código de manera clara y organizada, evitando problemas que pueden surgir al utilizar procesadores de texto como Microsoft Word.
¿Qué es una etiqueta en HTML y cómo se utiliza?
-Una etiqueta en HTML es un fragmento de código que representa un elemento en una página web, como un botón, un campo de texto o un texto. Las etiquetas tienen un inicio y un fin, y dentro de ellas se puede incluir contenido o atributos que definen características específicas del elemento.
¿Qué es un atributo en una etiqueta HTML y cómo afecta al elemento que representa?
-Un atributo en una etiqueta HTML es una variación que corresponde a un valor y que modifica las características de ese elemento. Por ejemplo, un atributo podría definir el color o el tamaño del texto dentro de un elemento específico.
¿Cuál es la diferencia entre HTML, XHTML y HTML5 según el script?
-Según el script, XHTML es una derivada de HTML que busca corregir malas prácticas de codificación. HTML5, por su parte, es una versión más reciente de HTML que implementa nuevas características, pero no cambia la forma en que se escribe el código HTML básico.
¿Cómo se guarda y abre un archivo HTML para que se visualice en un navegador?
-Para guardar un archivo HTML, se debe darle un nombre con la extensión '.html' y ubicarlo en la carpeta deseada. Para abrirlo, se puede hacer doble clic en el archivo o, desde el navegador, hacer clic derecho y seleccionar 'Abrir con' el navegador deseado.
¿Qué es la etiqueta 'head' en HTML y qué contiene?
-La etiqueta 'head' en HTML contiene información que no es visible para el usuario final pero es importante para el navegador y para los buscadores. Por ejemplo, contiene el 'title' que define el título de la página web.
¿Qué es la etiqueta 'body' en HTML y qué se incluye en ella?
-La etiqueta 'body' en HTML contiene todo el contenido visible de la página web. Cualquier elemento que se desee que el usuario vea, como texto, imágenes, enlaces, etc., se incluye dentro de esta etiqueta.
¿Cómo se escriben los comentarios en el código HTML y por qué son útiles?
-Los comentarios en el código HTML se escriben entre la etiqueta '<!--' y '-->'. Son útiles porque permiten agregar notas o explicaciones que no aparecerán en la página web final, facilitando la comprensión y mantenimiento del código.
¿Qué son las etiquetas de auto-cierre en HTML y cómo se diferencian de las demás?
-Las etiquetas de auto-cierre en HTML son aquellas que no requieren una etiqueta de cierre separada, como 'br' para insertar un salto de línea. Se diferencian de las demás etiquetas que necesitan un par de etiquetas de apertura y cierre para contener el contenido.
Outlines
😀 Introducción al Curso de HTML Básico
Carlos Arturo presenta el primer capítulo de un curso de HTML básico, enfocado en enseñar cómo crear estructuras de sitios web desde lo más sencillo. Destaca que HTML no es un lenguaje de programación, sino de marcado, y menciona la importancia de aprender a crear estructuras antes de aplicar estilos con CSS. Recomienda navegadores modernos y editores de código como Sublime Text o Notepad++, y desaconseja el uso de Internet Explorer. Finalmente, sugiere crear una carpeta para los archivos del sitio web y se menciona que el curso será sencillo y breve.
📚 Conceptos Básicos de HTML y Sintaxis
Se profundiza en las nociones fundamentales de HTML, como el significado de etiquetas y atributos, y cómo se representan en un sitio web. Se ilustra con ejemplos de etiquetas de encabezado (h1 a h6) y se explica cómo se cierran las etiquetas, con atributos y contenido. Además, se muestra cómo guardar y abrir un archivo HTML, y cómo los navegadores interpretan la sintaxis HTML para mostrar contenido en la pantalla. Se toca la importancia de actualizar la página con F5 para ver los cambios y cómo copiar y pegar código para modificarlo.
🌐 Estructura de una Página Web HTML
Se describe la estructura de una página web HTML, compuesta por la etiqueta html, head y body. Se explica que el head contiene información invisible para el usuario, como el título de la página, mientras que el body es donde se escribe el contenido visible. Se menciona la importancia de cerrar las etiquetas y se da un ejemplo de cómo se ve el código fuente en un navegador. Además, se habla sobre las etiquetas que no se cierran, como 'br' para saltos de línea, y se introduce el concepto de comentarios en el código HTML.
📘 Conclusión del Capítulo y Recursos Adicionales
Carlos Arturo concluye el capítulo resumiendo lo aprendido y animando al espectador a seguir explorando HTML. Ofrece un artículo en la descripción del video para entender los requisitos adicionales para tener un sitio web en línea, como el registro de un dominio. Invita a suscriptores a seguirlo en Twitter y a visitar su sitio web, donde encontrarán más tutoriales y recursos sobre desarrollo y diseño web.
Mindmap
Keywords
💡HTML
💡Estructura de sitio web
💡Lenguaje de programación
💡CSS
💡Etiquetas HTML
💡Atributos
💡Navegador web
💡Editor de código
💡Archivo HTML
💡Estructura de documento HTML
💡Comentarios en HTML
Highlights
Bienvenida al primer capítulo del curso de HTML básico por Carlos Arturo.
El curso comienza desde lo más básico, sin conocimiento previo de HTML.
HTML es un lenguaje de marcado, no un lenguaje de programación.
HTML permite crear estructuras de sitios web, incluyendo texto, imágenes y formularios.
CSS se utiliza para dar estilo a las estructuras creadas con HTML.
El curso es breve y los capítulos cortos para facilitar el aprendizaje de HTML.
Se recomienda usar navegadores modernos como Mozilla Firefox o Google Chrome.
Se desaconseja el uso de Internet Explorer para el desarrollo web.
Es necesario un editor de código para escribir el código HTML.
Se sugiere evitar Microsoft Word para escribir código por la inserción de código oculto.
Se puede usar el Bloc de Notas o editores de código como Sublime Text o Notepad++.
Se crea una carpeta en el escritorio para guardar los archivos del sitio web.
HTML, XHTML y HTML5 son mencionados, con XHTML siendo una derivada y HTML5 una versión actualizada.
Las etiquetas HTML tienen una sintaxis específica y pueden incluir atributos.
Las etiquetas de encabezado (h1 a h6) se utilizan para titulares y cambian de tamaño.
Se describe cómo guardar y abrir un archivo HTML con un navegador.
Se explica la estructura básica de un documento HTML con las etiquetas head y body.
La etiqueta head contiene información invisible para el usuario, como el título de la página.
La etiqueta body contiene todo el contenido visible de la página web.
Se mencionan las etiquetas de comentario para anotar el código y no afectar la visualización.
Se destacan etiquetas que no se cierran, como 'br' para saltos de línea.
Se ofrece un artículo adicional sobre cómo tener un sitio web en internet.
Carlos Arturo invita a los espectadores a seguirlo en Twitter y visitar su sitio web.
Transcripts
[Música]
[Música]
Hola Qué tal amigos bienvenidos sean
este nuestro primer capítulo del curso
de html básico Mi nombre es Carlos
Arturo y bien pues yo te voy a estar
enseñando lo básico para poder crear
sitios web vamos a estar comenzando
desde lo más más básico desde cero desde
no saber nada que es html vamos a estar
comenzando con lo que es Este lenguaje
para crear estructuras de sitios web si
tu ideas es crear sitios web vas por el
camino correcto tomando este curso Eh
Vas muy bien lo que tienes que hacer es
seguir este curso y tomar algunos otros
el curso es muy pequeño la verdad porque
es muy fácil aprender html no es tan
complicado como parece eh también es muy
es muy sencillo y los capítulos van a
ser muy cortos y a menos para que los
puedas entender así que bien pues vamos
a empezar con lo que es html html es un
lenguaje no es un lenguaje de
programación vale es un lenguaje marcado
que nos permite crear como ya te dije
estructuras de nuestros sitios web una
estructura le llamamos lo que es un
contenido supongamos lo que es nuestro
texto las imágenes los formularios los
botones etcétera esto es una estructura
ya más adelante le estaremos dando
colores formas tamaños todo eso con otro
lenguaje que se llama css pero en este
curso vamos a estar Aprendiendo a crear
estas estructuras básicas con html eh Y
bueno pues es prácticamente la
definición a a cortas palabras de lo que
es html tiene una definición un poco más
larga como hypertext Language markup que
Mark of Language eh que nos permite
Bueno pues es más que nada identificar
Qué es realmente no nos interesa tanto
sino crear sitios qué es lo que vamos a
estar haciendo Así que bien pues para
comenzar con este curso vas a necesitar
varias cosas vas a necesitar un
navegador web de preferencia una moderno
te recomiendo mozilla firefox que bueno
es el que yo estoy utilizando pero si no
también puedes usar Google Chrome o
incluso Safari opera eh no te recomiendo
que utilices Internet Explorer Vete
haciendo la idea de que Internet
Explorer no sirve eh Te lo digo por
experiencia propia trata de olvidarlo
por un mundo mejor así que utiliza
cualquiera de estos menos Internet
Explorer lo puedes utilizar para este
curso Pero que sea el último de los
casos preferencia que no lo utilices
también vamos a necesitar algo donde
escribir nuestro código para ello tú vas
a necesitar de un editor de código que
es lo que yo te recomiendo o incluso
puedes hacerlo en el blog de notas
cualquier programa en el cual tú puedas
escribir lo que sea te sirve eh no
cualquiera Como por ejemplo eh Microsoft
Word no te sirve Microsoft Word no sirve
para crear código porque es un
procesador de textos y te agrega código
oculto lo cual te va a ensuciar tu
código y va a quedar mal no lo uses para
nada utiliza en últimas instancias el
blog de notas o si no las
recomendaciones que yo te doy es
utilizar un editor de código en este
caso hay muchos como por por ejemplo
Sublime text Sublime text es de paga
tiene una versión de prueba que la
puedes utilizar y es el que yo estoy
utilizando en mi computadora o también
puedes utilizar notepad más más que es
gratuito soporta muchos lenguajes y
Bueno es muy ligero la verdad te lo
recomiendo si estás empezando
simplemente descárgalo aquí en el botón
lo instalas y bueno vamos a comenzar con
lo demás una vez que ya tengamos estos
tres yo en este caso ya los voy a cerrar
porque no me interesa lo que vamos a
hacer es en este caso yo voy a crear una
carpeta en el escritorio Tú la puedes
guardar donde tú quieras Yo le voy a
poner mi primer sitio web y dentro vamos
a ir guardando todos nuestros archivos
Así que bien Vamos a comenzar primero
que nada Qué es html html es el lenguaje
de marcado como ya te dije que nos
permite crear estructuras así de simple
html es digamos la estructura más básica
y de la cual siempre prácticamente en
estos días se usa va de la mano con css
y javascript que son otros lenguajes que
nos permiten hacer otras cosas eh Ya los
vamos a ir viendo más delante No te
preocupes vamos a empezar con lo más
básico para que vayas entendiendo Cómo
es que se crean sitios web eh
normalmente cuando estés navegando por
internet vas a escuchar muchas veces Eh
html xhtml html5 Así que ahí te va un
poquito la definición de Qué son xhtml
es prácticamente el html que yo te voy a
enseñar xhtml digamos que es una
derivada porque antes se escribe html de
una forma muy fea y horrible eh la cual
afectaba a la lectura del código se
escribía a veces con mayúscula se
escribían con con diferentes cosas
escribía css dentro del html y bueno
todas esas malas prácticas ya se dejaron
atrás prácticamente ya nadie hace eso
así que si escuchas xhtml o html hoy en
nuestros días es prácticamente lo mismo
eh Por eso no tienes que preocuparte
también se escuchas html5 No tienes por
qué preocuparte mucho html5 digamos es
la versión número C de lo que es html no
significa que sean cosas diferentes son
Exactamente lo mismo html 5 lo que hace
es que implementa nuevas cosas pero no
cambia las anteriores Así que
simplemente eh Te V a aprender unas
nuevas cositas pero no cambia nada de
Cómo se escribe o cosas así yo te las
voy a ir enseñando va a haber un
capítulo dedicado a html 5 Ya verás que
es prácticamente lo mismo así que bien
Vamos a comenzar en este caso voy a
abrir mi editor de código y vamos a
empezar explicándote lo más básico Qué
es una etiqueta y Qué es un atributo una
etiqueta es este pedazo de código el
cual tú puedes encontrar así etiqueta
una etiqueta es
esto una etiqueta es un fragmento de
código que representa algo en un sitio
web por ejemplo una etiqueta puede
representar un botón puede representar
un campo de texto puede representar un
texto incluso las etiquetas las
encuentras y cada una tiene sus
diferentes nombres por ejemplo está esta
etiqueta que he creado no existe
obviamente pero bueno cada etiqueta
tiene un lo que es un contenido y y este
contenido puede ser un texto o cualquier
otra cosa ya los iremos viendo más
adelante Primero quiero adentrarte
quiero adentrarte en lo que es la
sintaxis encontrar las etiquetas de esta
forma y también las encontrarás con
atributos cada atributo tendrá un valor
lo que es un atributo digamos que es una
variación Y corresponde a un valor por
ejemplo si queremos que el contenido sea
de color azul por ejemplo aquí le
pondríamos color y aquí le pondríamos en
valor azul no es así como funciona la
verdad no es no es exactamente lo mismo
pero es un ejemplo sobre Cómo se haría
ya en el siguiente capítulo vamos a
estar viendo etiquetas ya reales con
atributos reales eh todas las etiquetas
se encierran de la siguiente manera si
tienes aquí tú una etiqueta con tus
atributos y valor Aquí tienes lo que es
el inicio de tu etiqueta y aquí tienes
el fin de tu etiqueta siempre va a haber
estos inicios y fin de etiqueta etiqueta
te voy a poner un ejemplo real de una
etiqueta supongamos que escribimos la
etiqueta
h1 h1 y la cerramos obligatoriamente h1
y dentro vamos a tener lo que es el
título de nuestro
documento Ahí está te voy a mostrar Cómo
es que funciona esto así que lo que
vamos a hacer es que a nuestro documento
lo vamos a guardar vamos a ir a file
save as en este caso o guardar como vas
a buscar tu carpeta que creaste en este
caso la tengo en el escritorio bueno se
llam mi primer sitio web y dentro de
ella vas a guardarlo bajo el nombre de
Index html es importante que le pongas
punto html para que el navegador te lo
pueda reconocer le das en guardar y en
tu carpeta ya vas a tener el archivo en
el cual si le das un doble clic te va a
abrir en el navegador si no le das
simplemente clic derecho abrir con y
seleccionas el programa firefox o Google
Chrome lo abres con firefox Y si te
fijas aquí tenemos lo siguiente tenía
teníamos una etiqueta Ah y si te fijas
si tienes un editor de código eh los
colores cambian esto nos permite leer el
código mucho más fácil si te fijas
teníamos una etiqueta con un valor un
atributo y un valor aquí y dentro
tenemos un contenido como esta etiqueta
no existe eh lo que es el intérprete que
es nuestro navegador web no la detecta y
simplemente escribe contenido pero en
esta etiqueta h1 que significa header un
o encabezado número uno nos agrega un
texto con un tamaño más grande est una
etiqueta y bueno esta no tiene ningún
valor Así es como se manejan y así es
como se utilizan eh las los atributos
más usados siempre suelen ser por
ejemplo los de ID le pones un ID los de
clase que bueno los veremos más adelante
porque estos suelen ser eh referencias
para otros lenguajes para poder
combinarse y hacer cosas muy complejas y
geniales de momento lo vamos a dejar
hasta aquí si te fijas ya tenemos lo que
es nuestro titular y Bueno voy a borrar
esta para que no te confundas ahí
tenemos lo que es el el título de
nuestro documento es importante que si
quieres ver los cambios en tu en tu
documento lo actualices con f5 o en este
botón y si te fijas ahí tenemos los
cambios si tú copias tu código con
control c y lo pegas con control B
control V Perdón algunos se quejan y le
cambias por h2 en las dos etiquetas te
fijas tanto aquí como en el inicio vas a
ver que al guardarlo yo en este caso lo
guardo con control S al guardarlo y
actualizar en nuestro navegador tenemos
lo que es un un un nuevo título pero más
pequeño Y podemos hacer esto cuantas
veces nosotros queramos en este caso lo
podemos hacer hasta el número seis que
es el titular más pequeño en este caso
el h3 aquí le pondremos el
h4 el
h5 h5 Y por último el h6 estos son los
titulares más comú son bueno son los
todos los titulares que hay si te fijas
va cambiando el el título dependiendo
del número que tenemos Y esto es una
etiqueta con nuestro contenido ahora así
no es como se escribe html este
simplemente es el ejemplo de cómo es la
sintaxis de una etiqueta una etiqueta
representa un un documento un un
elemento perdón de nuestra página Así
que voy a copiar esto lo voy a borrar y
vamos a comenzar por ver cómo es que se
escribe realmente un código html Porque
nuestro documento se consta de varias
partes consta tanto de la cabecera así
se lo conoce con también como Head en
inglés y de nuestro cuerpo O Nuestro
Body entonces para escribir nuestra
página web siempre absolutamente Siempre
vas a escribir lo siguiente html ahí
está la etiqueta html que indica que es
un documento de html la vas a vas dar
varios espacios y dentro vas a escribir
la etiqueta
Head ahí está la etiqueta
Head es importante cerrarla dentro de
esta etiqueta va información que el
usuario no no puede ver a primera vista
la mayoría de las veces en esta etiqueta
Head dentro va por ejemplo lo que es el
título aquí si te fijas tenemos un
título muy feo y otras páginas sí tien
un título bonito para cambiar el título
le vamos a poner title la etiqueta title
como ves aquí y le vas a poner título de
nuestra primera web que está muy grande
el título Ahí está si guardamos Y
actualizamos si te fijas aquí ya dice
título en nuestra primera web Pero si te
fijas Como es dentro de nuestra etiqueta
Head no se ve nada en nuestro nuestro
documento html Ahora como si queremos
que se vean tenemos que escribir la
etiqueta Body esta etiqueta Body va a
contener todo lo que es el cuerpo de
nuestro documento html Por lo cual todo
lo que escribamos aquí sí que se va a
ver por ejemplo yo voy a agregar todo el
contenido que habíamos
agregado Ahí está si te fijas agrego
todo el texto que habíamos agregado del
h1 al h6 Y si actualizamos Aquí sí que
se va a visualizar Ahí está ahora si por
ejemplo quieres ver que esto va correcto
y todo lo demás parte un día cómo
funciona puedes irte en tu navegador y
darle clic derecho ver código fuente de
esta página y si te fijas te abre el
código de lo que es tu documento tal y
como nosotros lo estamos escribiendo Así
es como funcionan todas las páginas web
tú puedes meterte a Google a Youtube a
Facebook darle clic derecho ver el
código fuente de la página y vas a ver
el código html vas a ver otros códigos
también un poquito más extraños pero
poco a poco te vas a ir adentrando y vas
a ir conociendo queé son Ahí está eh qué
más Vamos a ver eh dentro de Head
tenemos más etiquetas no solo la
etiqueta title pero son un poco más
complejas las vamos a ir viendo después
y sirven para otras cosas toda la
información que va dentro de Head es
información que nunca se suele ver por
el usuario pero es importante para
algunas cosas por ejemplo importante
para el navegador importante para los
buscadores como Google para que tu
página pueda ser buscada y bueno algunas
otras cosas eh prácticamente Esto es lo
lo que se hace con html dentro de Body
AC que puedes escribir todo tu contenido
fuera no dentro de G escribes
información solo para el navegador y es
así como se utiliza si quieres escribir
un poco de información sobre por ejemplo
h1 se
utiliza para eh Para headers o titulares
si quieres escribir información Así que
te va a servir a ti de guía escribes lo
que se llaman comentarios un comentario
se escribe de la siguiente manera se
escribe una etiqueta normal
das dos guiones das otros dos y en medio
escribes el el código este código no lo
no va a ser visible si actualizamos aquí
si te fijas no hay ningún cambio este
código solo va a ser visible para ti
para que tú puedas darte una idea de
cómo estás escribiendo tu código Así que
lo puedes escribir de esa manera e por
último comentarte que hay otras
etiquetas que no se cierran así no se
cierran de esta manera algunas etiquetas
como para agregar una imagen para dar un
salto de línea supongamos que queremos
agregar un espaciado entre este y este
otro titular Entonces vamos a nuestro
titular y escribimos la siguiente
etiqueta
br esta etiqueta si te fijas no tenemos
que escribirla de la siguiente manera no
se escribe así porque aquí no va ningún
contenido Entonces se abrevia y la
dejamos de esta
manera de esta manera tú la escribes y
si actualizamos si te fijas ya tenemos
un espaciado algunas etiquetas son muy
pocas pero sí hay algunas que escriben
así para que no te vayas a confundir con
ellas y bien pues eso ha sido todo por
este primer capítulo sobre html eh
Espero que te haya gustado servido y vas
entendiendo Cómo es que se utiliza todo
esto de las sitios web eh Te voy a dejar
en la descripción un artículo muy
interesante que escribí sobre cómo qué
necesitas para tener tu sitio web en
internet es decir tun nombre.com tun
nombre.net etcétera te recomiendo que lo
leas si no entiendes muchas cosas no te
preocupes que ahora las iremos viendo
Así que bien pues eso ha sido todo por
este capítulo Mi nombre es Carlos Arturo
y nos vemos hasta la próxima si te ha
gustado el video por favor No olvides
suscribirte al Canal así como también
seguirme en Twitter en @fc conmas por
último te invito a que pases por mi
sitio
www.falconmasters.com en donde
encontrarás tutoriales y recursos sobre
desarrollo y diseño web
Ver Más Videos Relacionados
Tutorial básico de HTML desde cero - Video 2: Vistazo inicial a las etiquetas.
Tutorial básico de HTML desde cero - Video 1: Introducción.
HTML Tutorial: What Is HTML?
Curso Basico de CSS - 5. Modelo de Caja
Curso de HTML. 2.3. Introducción a las Hojas de Estilo CSS
CURSO DE CSS 2021 rapido y facil | 💻 Presentación
5.0 / 5 (0 votes)