Tutorial HTML para principiantes



code editor colorHerramientas para trabajar con HTML

Si eres como yo en mis días de aprendizaje, tal vez no tengas idea de por dónde empezar, y aquí hay una breve lista de las herramientas que te recomiendo que obtengas. No hay necesidad de computadoras sofisticadas, y casi cualquiera hará el trabajo.

  1. Descargue e instale un software de edición de código fuente como Notepad ++. Es gratis y tiene muchas opciones.
  2. Descargue e instale un cliente FTP. Usamos WinSCP (solo disponible para Windows) pero hay otras opciones como Filezilla para otros sistemas Son gratis.
  3. Descargar e instalar Google Chrome navegador.

Si ya ha agregado estas herramientas a su arsenal, podemos pasar al siguiente paso.

Anatomía de un documento HTML.

Una página HTML está compuesta de elementos llamados "etiquetas", y estas etiquetas le dicen al navegador cómo mostrar el contenido. Cada etiqueta está representada por una abreviatura como p, h1, span, etc.

Breakdown of an HTML element or tags
Las etiquetas HTML están rodeadas por corchetes angulares, y generalmente vienen en pares, con una etiqueta inicial y final como esta:

el contenido va aquí ...

Aquí hay una lista de etiquetas alfabéticas que puedes usar como referencia.

Cómo se ve una página HTML

Así es como se ve el código fuente de una página HTML básica:

Y así es como lo muestra el navegador:

Este es un título

Este es un parrafo.

Si eres un principiante, no te preocupes por memorizar TODAS las etiquetas HTML, eso puede suceder con el tiempo. Encuentra y memoriza SOLO las etiquetas HTML más utilizadas. Por ejemplo, etiquetas para incrustar imágenes, para escribir títulos, párrafos, agregar espacios, etc.

Esto es lo que representan estas etiquetas:

  • los declaración define este documento como HTML5
  • los elemento es el elemento raíz de una página HTML
  • los El elemento contiene metainformación sobre el documento.
  • los El elemento especifica un título para el documento </html></li><li>los <body> el elemento contiene el contenido visible de la página</li><li>los <h1> El elemento define un encabezado grande</li><li>los <p> El elemento define un párrafo</li></ul><p>Hay dos etiquetas en particular que merecen atención:</p><ul><li>los <head> la etiqueta contiene metainformación sobre el documento</li><li>los <body> la etiqueta contiene el contenido visible de la página</li></ul><p>Las etiquetas principales generalmente solo son visibles para los motores de búsqueda, mientras que las etiquetas corporales para los visitantes, y nos concentraremos en la edición dentro de esta etiqueta.</p><h3>Edición de etiquetas HTML del cuerpo</h3><p>Entonces, digamos que le gustaría cambiar el texto dentro del <h1></h1> y <p></p> etiquetas en nuestro ejemplo de página.</p><link rel="stylesheet" type="text/css" href="https://thinkentrepreneurial.com/wp-content/cache/wmac/css/wmac_single_77861208c7d3e407c6ae68455b9dd342.css" /><link rel="stylesheet" type="text/css" href="https://thinkentrepreneurial.com/wp-content/cache/wmac/css/wmac_single_5a45e2995168322e4b29b4c3f0d2b274.css" /><div id="crayon-5dd3d39cc1c9f442824795" class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"><div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title">Edición de etiquetas HTML</span><div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><div class="crayon-button crayon-nums-button" title="Alternar números de línea" data-no-translation-title=""><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Alternar código simple" data-no-translation-title=""><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap" data-no-translation-title=""><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expandir código" data-no-translation-title=""><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Dupdo" data-no-translation-title=""><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Código abierto en una nueva ventana" data-no-translation-title=""><div class="crayon-button-icon"></div></div></div></div><div class="crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"></div><div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;"> <h1> Este es un título </h1><p> Este es un parrafo. </p></textarea></div><div class="crayon-main" style=""><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums" data-settings="show"><div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-5dd3d39cc1c9f442824795-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-5dd3d39cc1c9f442824795-2">2</div></div></td><td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-5dd3d39cc1c9f442824795-1"><span class="crayon-o"><</span><span class="crayon-v">h1</span><span class="crayon-o">></span><span class="crayon-r">Esta</span><span class="crayon-h"> </span><span class="crayon-st">es</span><span class="crayon-h"> </span><span class="crayon-i">una</span><span class="crayon-h"> </span><span class="crayon-v">Título</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">h1</span><span class="crayon-o">></span></div><div class="crayon-line crayon-striped-line" id="crayon-5dd3d39cc1c9f442824795-2"><span class="crayon-o"><</span><span class="crayon-v">pag</span><span class="crayon-o">></span><span class="crayon-r">Esta</span><span class="crayon-h"> </span><span class="crayon-st">es</span><span class="crayon-h"> </span><span class="crayon-i">una</span><span class="crayon-h"> </span><span class="crayon-v">párrafo</span><span class="crayon-sy">.</span><span class="crayon-o"><</span><span class="crayon-o">/</span><span class="crayon-v">pag</span><span class="crayon-o">></span></div></div></td></tr></table></div></div><p>Simplemente edite el texto dentro de las etiquetas de apertura y cierre y guarde el documento. Fácil verdad?</p><p>Puede cambiar el nombre de cualquier etiqueta para cambiar su tamaño y su importancia. Por ejemplo, una etiqueta h1 tendrá una fuente más grande de forma predeterminada, y se usa en la parte superior de una página para denotar importancia. Se mostrará una etiqueta h6 en una fuente más pequeña y denota una importancia secundaria para los motores de búsqueda.</p><p>Dicho esto, no cometa el error de pensar que solo puede usar etiquetas h1 para obtener mejores clasificaciones en los motores de búsqueda. Esto es algo que puedes aprender aprendiendo SEO en la página.</p><p>Nuestro objetivo no es cubrir todos los aspectos únicos de la creación de un sitio web completo desde cero, sino enseñarle cómo omitir todos estos obstáculos mediante el uso de un marco gratuito utilizado por miles de desarrolladores web. Este marco se conoce como <strong>Oreja</strong>, y aprender a usarlo demostrará ser una gran ventaja en lugar de codificar todo usted mismo.</p><h3>Introducción al framework Bootstrap</h3><p>Entonces que es <strong>Oreja</strong>?</p><ul><li>Bootstrap es un marco front-end gratuito para un desarrollo web más rápido y fácil. Usted puede <a href="http://getbootstrap.com/getting-started/" target="_blank" rel="noopener noreferrer">descarguelo aqui</a>, sin embargo, le recomendamos que utilice algo más desarrollado y descargue una plantilla HTML gratuita de <a href="https://tinysitebuilder.com/" target="_blank" rel="noopener noreferrer">tinysitebuilder.com</a>.</li><li>Bootstrap incluye plantillas de diseño basadas en HTML y CSS para tipografía, formularios, botones, tablas, navegación, modales, carruseles de imágenes y muchos otros, así como complementos de JavaScript opcionales.</li><li>Bootstrap también le brinda la capacidad de crear fácilmente diseños receptivos.</li></ul><p>Familiarizarse con el término <strong>Oreja</strong>, porque lo usaremos constantemente ya sea creando un sitio web HTML, WordPress o Joomla.</p><p>Aquí está lo básico <strong>Oreja</strong> la página se ve así:</p><link rel="stylesheet" type="text/css" href="https://thinkentrepreneurial.com/wp-content/cache/wmac/css/wmac_single_77861208c7d3e407c6ae68455b9dd342.css" /><link rel="stylesheet" type="text/css" href="https://thinkentrepreneurial.com/wp-content/cache/wmac/css/wmac_single_5a45e2995168322e4b29b4c3f0d2b274.css" /><div id="crayon-5dd3d39cc1cb5326304863" class="crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"><div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title">Ejemplo de página Bootstrap</span><div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-mixed-highlight" title="Contiene idiomas mixtos" data-no-translation-title=""></span><div class="crayon-button crayon-nums-button" title="Alternar números de línea" data-no-translation-title=""><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Alternar código simple" data-no-translation-title=""><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap" data-no-translation-title=""><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expandir código" data-no-translation-title=""><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Dupdo" data-no-translation-title=""><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Código abierto en una nueva ventana" data-no-translation-title=""><div class="crayon-button-icon"></div></div></div></div><div class="crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"></div><div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;"> <!DOCTYPE html><html lang="en"><head><title> Ejemplo de Bootstrap

    Mi primera página de Bootstrap

    ¡Cambie el tamaño de esta página receptiva para ver el efecto!

    Columna 1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit ...

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ...

    Columna 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit ...

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ...

    Columna 3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit ...

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<cabeza>
  <título>Oreja Ejemplo</título>
  <meta juego de caracteres="utf-8">
  <meta nombre="vista" contenido="ancho = ancho del dispositivo, escala inicial = 1">
  <enlazar rel="hoja de estilo" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  
  
</cabeza>
<cuerpo>
 
<div clase="centro de texto jumbotron">
  <h1>Mi primero Oreja Página</h1>
  <pag>Redimensionar esta sensible página a ver la efecto!</pag>
</div>
  
<div clase="envase">
  <div clase="fila">
    <div clase="col-sm-4">
      <h3>Columna 1</h3>
      <pag>Lorem ipsum dolor sentar amet, consectetur publicidad elit...</pag>
      <pag>Utah enim anuncio blanca veniam, quis nostrud ejercicio ullamco laboris...</pag>
    </div>
    <div clase="col-sm-4">
      <h3>Columna 2</h3>
      <pag>Lorem ipsum dolor sentar amet, consectetur publicidad elit...</pag>
      <pag>Utah enim anuncio blanca veniam, quis nostrud ejercicio ullamco laboris...</pag>
    </div>
    <div clase="col-sm-4">
      <h3>Columna 3</h3>        
      <pag>Lorem ipsum dolor sentar amet, consectetur publicidad elit...</pag>
      <pag>Utah enim anuncio blanca veniam, quis nostrud ejercicio ullamco laboris...</pag>
    </div>
  </div>
</div>
 
</cuerpo>
</html>

Y así es como la página es mostrado por el navegador.

Nuestro ejemplo Oreja El documento HTML está compuesto por una fuente css (línea 7) y dos scripts js (líneas 8 y 9).

Nuestro Oreja la página está más desarrollada que nuestra página HTML inicial, y la razón de esto es porque Oreja es una plataforma bien desarrollada lista para usar que incluye archivos css y js.

Diseño Bootstrap

El sistema de cuadrícula de Bootstrap permite hasta 12 columnas sensibles o aptas para dispositivos móviles en una página. Puede agregar cualquier tipo de contenido como video, imágenes y texto dentro de cualquiera de esas columnas individuales, solo asegúrese de que las columnas sean lo suficientemente anchas para mostrar su contenido de la mejor manera posible.
Si no desea utilizar las 12 columnas individualmente, puede agrupar las columnas para crear columnas más anchas.
Aquí hay algunos ejemplos posibles de combinación de columnas:

col 1col 1col 1col 1col 1col 1col 1col 1col 1col 1col 1col 1
col 4col 4col 4
col 4col 8
col 6col 6
col 12

Dado que estas columnas son receptivas, puede elegir cómo mostrarlas según el ancho del dispositivo.
Estos son OrejaOpciones de columna para diferentes dispositivos:

    • .col- (dispositivos extra pequeños - ancho de pantalla inferior a 576px)
    • .col-sm- (dispositivos pequeños - ancho de pantalla igual o mayor que 576px)
    • .col-md- (dispositivos medianos - ancho de pantalla igual o mayor a 768px)
    • .col-lg- (dispositivos grandes - ancho de pantalla igual o mayor que 992px)
    • .col-xl- (dispositivos xlarge - ancho de pantalla igual o mayor a 1200px)

Por ejemplo, la clase = "col-lg-4 col-sm-12" puede mostrar 3 secciones horizontales en pantallas grandes, mientras que muestra una sola en dispositivos pequeños.
Más sobre las opciones de columna:

Extra Pequeño
<768px
Pequeña
> = 768px
Medio
> = 992px
Grande
> = 1200px
Prefijo de clase.col-xs-.col-sm-.col-md-.col-lg-
Adecuado paraTeléfonosTabletasPortátiles PequeñosPortátiles y computadoras de escritorio
Comportamiento de la cuadrículaHorizontal en todo momentoContraído para comenzar, horizontal por encima de los puntos de interrupciónContraído para comenzar, horizontal por encima de los puntos de interrupciónContraído para comenzar, horizontal por encima de los puntos de interrupción
Ancho del contenedorNinguno (auto)750px970px1170px
# de columnas12121212
Ancho de columnaAuto~ 62px~ 81px~ 97px
Ancho de canal30px (15px a cada lado de una columna)30px (15px a cada lado de una columna)30px (15px a cada lado de una columna)30px (15px a cada lado de una columna)
Anidables
Compensaciones
Ordenamiento de columnas

Para implementar esta columna o sistema de cuadrícula, debe cumplir con las siguientes reglas:

  • Las filas deben colocarse dentro de un .container (ancho fijo) o .container-fluid (ancho completo) para una alineación y relleno adecuados.
  • Use filas para crear grupos horizontales de columnas
  • El contenido debe colocarse dentro de las columnas, y solo las columnas pueden ser elementos secundarios inmediatos de las filas.

Para crear el diseño que desea, cree un contenedor (

línea 1). A continuación, cree una fila (
línea 2). Luego, agregue el número deseado de columnas (etiquetas con las clases .col - * - * apropiadas). Tenga en cuenta que los números en .col - * - * siempre deben sumar 12 para cada fila.
Finalmente agregue su contenido con las etiquetas que lo definirán (Ej.

y

)
No te olvides de terminar cada

con su respectiva etiqueta de cierre o
.
Por ejemplo, nuestro
está cerrado en la línea 8, y
en la línea 7.

La siguiente es una estructura básica de una cuadrícula Bootstrap:

Puede crear cualquier sitio web que desee utilizando el marco Bootstrap, y miles de desarrolladores web confían en el marco para desarrollar un sitio web hermoso y profesional en todo el mundo.

Tenga en cuenta que aprender a editar HTML es solo un aspecto de lo que debe aprender, sin embargo, nuestro próximo tema, "Tutorial CSS para principiantes"Es tan fácil como HTML.





Buscar