Scribd
Carica
8 visualizzazioni

HTML y CSS

Guía Metodología

Caricato da

anzoramateo17
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
8 visualizzazioni

HTML y CSS

Guía Metodología

Caricato da

anzoramateo17
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 6

HTML Y CSS

HTML: El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza


para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus
contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de
datos

CSS: CSS son las siglas de “Cascading Style Sheets” (hojas de


estilo en cascada). CSS es un lenguaje para la composición y
estructuración de páginas web.

Introducción HTML

• Elementos HTML: Los elementos son los bloques de construcción básicos de una
página web. Cada elemento comienza con una etiqueta de apertura <tag> y termina con
una etiqueta de cierre </tag>. Por ejemplo, <p> para párrafos, <h1> para encabezados de
nivel 1, <a> para enlaces, etc.

• Atributos: Los elementos HTML pueden contener atributos que proporcionan información
adicional sobre el elemento. Por ejemplo, el atributo href se utiliza con la etiqueta <a> para
especificar la URL de destino de un enlace.

•Anidamiento: Los elementos HTML pueden anidarse dentro de otros elementos, lo que
significa que puedes colocar un elemento dentro de otro. Por ejemplo, un párrafo <p> puede
contener un enlace <a>.

Para que nos sirve HTML:

HTML, o lenguaje de marcado de hipertexto, sirve como columna vertebral de la web. Es el


lenguaje de marcado estándar utilizado para crear páginas web y proporciona la estructura
para mostrar contenido en Internet. He aquí por qué HTML es esencial: 1. **Estructura**:
HTML define la estructura de una página web mediante el uso de varios elementos como
encabezados, párrafos, listas y más. Esta estructura es crucial para organizar el contenido de
manera lógica y hacerlo accesible a los usuarios y motores de búsqueda. 2. *

Ejemplo de HTML, estructura principal:

Introducción CSS
CSS funciona apuntando a elementos HTML y aplicándoles reglas de estilo. Estas reglas especifican
cómo deben aparecer los elementos, incluidos sus colores, fuentes, tamaños, espacios y diseño.
CSS se puede aplicar a documentos HTML de tres formas principales:

CSS en línea : las reglas CSS se aplican directamente a los elementos HTML mediante el style
atributo. Por ejemplo:

CSS interno : las reglas CSS se definen dentro del <style>elemento en la <head>sección de un
documento HTML. Por ejemplo:
CSS externo : las reglas CSS se escriben en un archivo .css separado y se vinculan al documento
HTML mediante el <link>elemento. Por ejemplo:

Este seria un ejemplo de como se aplica


CSS a un documento de HTML
Reglas de estilo: Las reglas de estilo consisten en un selector y un conjunto de declaraciones
de estilo. El selector apunta a los elementos HTML a los que se aplicarán los estilos, y las
declaraciones de estilo especifican cómo se verán esos elementos. Por ejemplo:

En este ejemplo, el selector p apunta a todos los elementos <p> (párrafos) y les da un color
azul y un tamaño de fuente de 16 píxeles.

• Selección de elementos: CSS ofrece diferentes formas de seleccionar elementos HTML,


incluyendo selección por etiqueta, clase, id y otros atributos.

A continuación, les mostrare como crear un archivo HTML


PASOS PRINCIPALES:

1. Instalar un editor de código


2. Instalar un servidor local
3. Crear una carpeta para los códigos
4. Dentro de esa carpeta crear otra carpeta, y dentro de ella crearemos tres carpetas mas
CSS: nos servirá para guardar las hojas de estilo
IMAGE: para contener las imágenes agregadas a nuestro documento HTML
JS: será para guardar el javascript

Luego de eso, entraremos a nuestro editor de código. En el siguiente apartado crearemos


el INDEX.HTML donde ira nuestro código, ejemplo:

Luego de eso en CSS crearemos el apartado de hoja de estilo “style.css”, ejemplo;


Ya luego de haber creado esto, podemos empezar a editar y crear nuestro código,
para ellos nos iremos al index.html y pondremos el signo de “!” para que nos
cargue la estructura principal, ejemplo:

Luego de tener nuestro código, y queremos decorar o agregar


estilo, tenemos que conectar index.html con style.css, ejemplo
de ello:

Luego de eso podemos agregar estilo, y decorar nuestra pagina


web o el index.html.

Potrebbero piacerti anche