2. Abre VSCode → Archivo → Abrir carpeta.
HTML 3. Localiza la nueva carpeta y haz clic en Seleccionar carpeta.
4. Selecciona Archivo -> Nuevo archivo. Nombra el archivo [Link] y pulsa Intro.
1. Elige un editor de código HTML 5. Haz clic en Crear archivo nuevo para confirmar.
Un editor de código es un software que se utiliza para escribir tu sitio web. Aunque puedes 6. Cuando aparezca la pestaña del editor [Link], introduce la siguiente estructura
crear una página HTML con un editor de texto predeterminado como el Bloc de notas, este básica de documento HTML:
carece de funciones que ayudan a simplificar el proceso de desarrollo. <html>
En un bloc de notas básico hay que asegurarse de guardar el archivo con la extensión <head>
<title>
.html, o sea el nombre del archivo mas la extensión (ej: [Link]). y la característica </title>
de TIPO seleccionada en “todos los Archivos”: </head>
<body>
</body>
</html>
<html>: la etiqueta de apertura del documento HTML que indica dónde comienza el
código.
<head>: etiqueta que contiene los metadatos del sitio.
<title>: define el texto que se muestra en la pestaña del navegador al visitar la
página web.
2. Planifica el diseño del sitio <body>: contiene todo el contenido visible de la página web.
Crear un plan de diseño te permite visualizar mejor el aspecto de tu sitio web. También <header>: contenedor para el contenido introductorio o la navegación.
puedes utilizarlo como lista de control para saber qué elementos incluir en tu sitio. <main>: representa el contenido principal de una página web.
<div>: define una sección en un documento HTML.
3. Escribe el código HTML <footer>: contiene el contenido que aparece en la parte inferior de tu página web.
Una vez que la herramienta y el plan de diseño estén listos, puedes empezar a escribir el <h1> y <p>: contienen texto de encabezamiento y de párrafo. Usa la etiqueta <br>
código de tu sitio. Los pasos pueden variar dependiendo de tu editor de código, pero la para crear un salto de línea si el texto es demasiado largo.
idea general es similar. <nav> y <a>: especifican la barra de navegación y su elemento de anclaje. Utiliza el
te mostraremos cómo hacerlo utilizando VSCode: atributo href para especificar la URL enlazada del ancla. <a href=”[Link]”> ir
</a> Hipervínculo, es el elemento principal para navegar
1. Crea una nueva carpeta en tu ordenador. Será el directorio para todos los archivos
de tu sitio.
<img src=”[Link]” > contenedor para el elemento imagen. Contiene el atributo
img src, que especifica el enlace o el nombre del archivo de imagen. body
{
Tablas: permite crear una tabla con filas y columnas, es un elemento combinado de background:yellow;
TAGS donde<Table> indica la creación de la estructura <TR> define una fila <TD> }
define la celda de una columna. Por ejemplo si queremos una tabla de 3 filas y 2
h1
columnas: {
Color:red;
<Table border=”1” Width=”100%”> Font-family:Arial;
<TR><TD> fila1col1</TD> <TD>fila1col2 </TD> </TR> }
<TR><TD> fila2col1</TD> <TD>fila2col2 </TD> </TR> p
<TR><TD> fila3col1</TD> <TD>fila3col2 </TD> </TR> {
</Table> Color:blue;
Font-family:Times;
}
4. Incluye CSS de diseño
Una forma de poner Estilo es incrustando dentro de los TAGS un bloque denominado style,
donde colocamos CSS. Esta técnica ya no se utiliza mas pero funciona:
<p style=”color:red;font-family:Arial;font-size:18”>
La forma actual de utilizarlo es mediante las Hojas de Estilo en Cascada (CSS) para cambiar
su diseño. CSS es un lenguaje que define el estilo de tu documento HTML.
Para ello, crea un archivo [Link] y enlaza la hoja de estilos al documento HTML
añadiendo el siguiente código entre las etiquetas de apertura y
cierre <head> de [Link]:
<link rel="hoja de estilo" href="[Link]">
<html>
<head>
<link rel="hoja de estilo" href="[Link]">
<title>
</title>
</head>
<body>
<h1>hola mundo</h1>
<p>hola mundo</p>
</body>
</html>