Scribd
Cargar
8 vistas30 páginas

HTML

El documento proporciona una guía sobre HTML y CSS, detallando la estructura y las etiquetas más utilizadas en HTML, así como ejemplos de su uso. También se aborda la importancia de CSS en el diseño web, incluyendo cómo organizar y aplicar estilos a través de archivos externos. Se mencionan herramientas y formatos recomendados para iconos y la creación de formularios en HTML.

Cargado por

Leonardo Osorto
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
8 vistas30 páginas

HTML

El documento proporciona una guía sobre HTML y CSS, detallando la estructura y las etiquetas más utilizadas en HTML, así como ejemplos de su uso. También se aborda la importancia de CSS en el diseño web, incluyendo cómo organizar y aplicar estilos a través de archivos externos. Se mencionan herramientas y formatos recomendados para iconos y la creación de formularios en HTML.

Cargado por

Leonardo Osorto
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 30

HTML

Lo que está dentro del <header> </header> es lo que el navegador entiende. Los
usuarios verán únicamente lo que esta dentro de las etiquetas <body></body>.

Línea 1: Identifica que versión de HTML estamos utilizando, en este caso es la mas
nueva que es HTML 5.

Línea 2: Identificador de en que idioma se encuentra nuestro proyecto, en este caso


nosotros lo estaremos usando en español así que cambiaremos las siglas a es

Línea 3: Es la información que se le da al navegador

Línea 4: Es la codificación para que pueda representar caracteres especiales como


acentos esto depende el idioma en el cual se trabajara en el proyecto.

Línea 5: Es el que se encarga de controlar el tamaño de los textos y de las imágenes


dentro de la página web.

Línea 5: Es el CEO, es decir como los usuarios podrían llegar a identificar la página
web.

Activar opción para que se cambien las etiquetas de cierre automáticamente si


cambiamos el nombre de apertura de una etiqueta.
Etiquetas mayormente utilizadas en HTML
Nota: El h1 se utiliza una sola vez por pantalla

Lista de todas las etiquetas que se utilizan en HTML:

1. <!DOCTYPE> 13. <article> 25. <blockquote>

2. <html> 14. <section> 26. <q>

3. <head> 15. <aside> 27. <cite>

4. <title> 16. <footer> 28. <abbr>

5. <meta> 17. <h1> - <h6> 29. <address>

6. <link> 18. <p> 30. <bdo>

7. <style> 19. <a> 31. <br>

8. <script> 20. <img> 32. <hr>

9. <body> 21. <video> 33. <pre>

10. <header> 22. <audio> 34. <code>

11. <nav> 23. <source> 35. <em>

12. <main> 24. <iframe> 36. <strong>


37. <small> 49. <table> 61. <label>

38. <mark> 50. <caption> 62. <fieldset>

39. <del> 51. <tr> 63. <legend>

40. <ins> 52. <th> 64. <datalist>

41. <sub> 53. <td> 65. <details>

42. <sup> 54. <form> 66. <summary>

43. <ul> 55. <input> 67. <menu>

44. <ol> 56. <textarea> 68. <command>

45. <li> 57. <button> 69. <progress>

46. <dl> 58. <select> 70. <meter>

47. <dt> 59. <optgroup> 71. <canvas>

48. <dd> 60. <option> 72. <svg>

Descripción de etiquetas que se utilizan en HTML:

1. <!DOCTYPE>: Define el tipo de documento y la versión de HTML que se está


utilizando en la página web.

2. <html>: Define el comienzo y el final del documento HTML.

3. <head>: Contiene información sobre el documento, como títulos, metadatos y


enlaces a hojas de estilo y scripts.

4. <title>: Define el título de la página que se muestra en la pestaña del navegador


o en la barra de título.

5. <meta>: Proporciona metadatos sobre el documento HTML, como la


descripción, palabras clave y codificación de caracteres.

6. <link>: Enlaza la página web con recursos externos, como hojas de estilo CSS.

7. <style>: Define estilos CSS dentro del documento HTML.

8. <script>: Define scripts JavaScript dentro del documento HTML.


9. <body>: Contiene todo el contenido visible de la página web.

10. <header>: Define la cabecera de una sección o de todo el documento.

11. <nav>: Define una sección de navegación.

12. <main>: Define el contenido principal de la página.

13. <article>: Define un contenido independiente que tiene sentido por sí mismo.

14. <section>: Define una sección genérica en un documento.

15. <aside>: Define contenido que es tangencial o relacionado con el contenido


circundante.

16. <footer>: Define el pie de página de una sección o de todo el documento.

17. <h1> - <h6>: Define encabezados de diferentes niveles de importancia.

18. <p>: Define un párrafo de texto.

19. <a>: Define un enlace a otra página o recurso.

20. <img>: Define una imagen.

21. <video>: Define un elemento para reproducir videos o secuencias de video.

22. <audio>: Define un elemento para reproducir audio o secuencias de audio.

23. <source>: Define fuentes de medios para elementos multimedia, como <video>
y <audio>.

24. <iframe>: Define un marco en línea para incrustar otro documento HTML.

25. <blockquote>: Define una sección de contenido citado de otra fuente.

26. <q>: Define una cita corta en línea.

27. <cite>: Define el título de una obra citada.

28. <abbr>: Define una abreviatura o acrónimo.

29. <address>: Define información de contacto del autor/proprietario del


documento.

30. <bdo>: Define la dirección del texto.


31. <br>: Define un salto de línea.

32. <hr>: Define una regla horizontal.

33. <pre>: Define texto preformateado.

34. <code>: Define código de computadora.

35. <em>: Define texto enfatizado.

36. <strong>: Define texto importante.

37. <small>: Define texto más pequeño.

38. <mark>: Define texto resaltado.

39. <del>: Define texto eliminado.

40. <ins>: Define texto insertado.

41. <sub>: Define texto subíndice.

42. <sup>: Define texto superíndice.

43. <ul>: Define una lista desordenada.

44. <ol>: Define una lista ordenada.

45. <li>: Define un elemento de lista.

46. <dl>: Define una lista de definición.

47. <dt>: Define un término en una lista de definición.

48. <dd>: Define la descripción de un término en una lista de definición.

49. <table>: Define una tabla.

50. <caption>: Define el título de una tabla.

51. <tr>: Define una fila en una tabla.

52. <th>: Define una celda de encabezado en una tabla.

53. <td>: Define una celda de datos en una tabla.

54. <form>: Define un formulario HTML para la entrada de usuario.


55. <input>: Define un campo de entrada en un formulario.

56. <textarea>: Define un área de texto de varios renglones.

57. <button>: Define un botón clickeable.

58. <select>: Define una lista desplegable.

59. <optgroup>: Define un grupo de opciones en una lista desplegable.

60. <option>: Define una opción en una lista desplegable.

61. <label>: Define una etiqueta para un elemento de formulario.

62. <fieldset>: Define un grupo de campos de formulario.

63. <legend>: Define una leyenda para un grupo de campos de formulario.

64. <datalist>: Define una lista de opciones predefinidas para elementos <input>
con listas desplegables.

65. <details>: Define una sección de detalles que se puede mostrar u ocultar.

66. <summary>: Define un resumen visible para el elemento <details>.

67. <menu>: Define un menú contextual o de comandos.

68. <command>: Define un comando en un menú contextual.

69. <progress>: Define una barra de progreso.

70. <meter>: Define una medida escalar dentro de un rango conocido.

71. <canvas>: Define una zona gráfica en la que se pueden dibujar gráficos
utilizando JavaScript.

72. <svg>: Define un gráfico vectorial escalable.


Ejemplos de cómo se utilizan las etiquetas más importantes:

Link:

<head>

<link rel="stylesheet" href="estilos.css">

</head>

Style:

<style>

body {

background-color: lightblue;

</style>

p:

<p>Este es un párrafo de texto.</p>

a:

<a href="https://www.ejemplo.com">Enlace a Ejemplo</a>

img:

<img src="imagen.jpg" alt="Descripción de la imagen">

iframe:

<iframe src="https://www.google.com" width="600" height="400"


frameborder="0"></iframe>
q:

<p>Un famoso autor dijo: <q>La vida es lo que sucede mientras estás ocupado
haciendo otros planes.</q></p>

br:

<p>Este es un texto<br>partido en dos líneas.</p>

hr:

<p>Texto antes de la línea horizontal</p>

<hr>

<p>Texto después de la línea horizontal</p>

<em> y <strong>:

<p><em>Texto enfatizado</em> y <strong>texto importante</strong>.</p>

small:

<p><small>Texto en tamaño pequeño.</small></p>

<dl>, <dt>, <dd>:

<dl>

<dt>Término 1</dt>

<dd>Definición 1</dd>

<dt>Término 2</dt>

<dd>Definición 2</dd>

</dl>
<ul>, <ol>, <li>:

<ul>

<li>Elemento de lista no ordenada 1</li>

<li>Elemento de lista no ordenada 2</li>

<li>Elemento de lista no ordenada 3</li>

</ul>

<ol>

<li>Elemento de lista ordenada 1</li>

<li>Elemento de lista ordenada 2</li>

<li>Elemento de lista ordenada 3</li>

</ol>

<table>, <caption>, <tr>, <th>, <td>:

<table>

<caption>Ejemplo de tabla</caption>

<tr>

<th>Encabezado de columna 1</th>

<th>Encabezado de columna 2</th>

</tr>

<tr>

<td>Dato 1</td>

<td>Dato 2</td>

</tr> </table>
<datalist>:

<input list="opciones">

<datalist id="opciones">

<option value="Opción 1">

<option value="Opción 2">

<option value="Opción 3">

</datalist>

<b> y <i>:

<p>Este texto está en <b>negrita</b> y este está en <i>cursiva</i>.</p>

<div>:

<div style="background-color: lightgray; padding: 10px;">

<p>Este es un div con un fondo gris claro y un relleno de 10px.</p>

</div>

<nav>, <ul>, <li>:

<nav>

<ul>

<li><a href="#">Inicio</a></li>

<li><a href="#">Acerca de</a></li>

<li><a href="#">Contacto</a></li>

</ul>

</nav>
<header>, <footer>, <article>, <section>:

<header>

<h1>Encabezado de la Página</h1>

</header>

<article>

<header>

<h2>Artículo 1</h2>

</header>

<p>Contenido del artículo 1.</p>

</article>

<section>

<header>

<h2>Sección 1</h2>

</header>

<p>Contenido de la sección 1. </p>

</section>

<footer>

<p>Pie de Página</p>

</footer>

¿De dónde sacar texto genérico?

R:/ Podemos ver en la página web de lipsum.com, Esto sirve solamente para agregar
texto a la web si aun no sabemos que pondremos en los campos de texto y eso nos
servirá para saber como se vera nuestro diseño.
<section> para resaltas información importante

<main> se utiliza para la colocar la información principal de la página web

<ul> se utiliza para navegaciones de diversos niveles

<nav> se utiliza para navegaciones de un solo nivel

Para clase numero 4

Para buscar iconos en la web se utiliza un servicio que se llama tabler icons, para esto
podemos utilizar una página web llamada tablericons.com o heroicons.dev e incluso la
página web fontawesome.com estas herramientas se utilizan con el objetivo de aligerar
el trabajo en proyectos de desarrollo.

Formato recomendable de iconos para usar en paginas web es SVG. Este formato es el
que utilizan los diseñadores a menudo, esto es porque en este formato los vectores no
pierden calidad y no se distorsionan a la hora de hacer más grandes las imágenes,
además todos los navegadores lo soportan bastante bien.

Las herramientas digitales anteriormente mencionadas nos proporcionan el código SVG


de algunos iconos que lleguemos a requerir en nuestro proyecto.

Clase 5 crear un formulario.

Siempre que un formulario tiene varios elementos se debe de utilizar una etiqueta que se
llama <form></form> esto para darle a entender al código que todo lo que se encuentre
dentro de esta etiqueta pertenece al formulario.

Fieldset sirve para determinar un grupo de campo dentro del formulario.


Legend sirve para darle indicaciones a los usuarios o simplemente describir para qué es
el formulario.

Las indicaciones dentro de los formularios se les conoce como label

Para que el usuario ingrese datos se utiliza un elemento que se llama Input, hay diversos
tipos de inputs, hay unos que se dirigen a dispositivos móviles como teléfonos, también
cumplen la función que en ordenadores solo se puedan insertar cierto tipo de campos y
estos intups tienen validaciones automáticas.

Textarea se utiliza para que los usuarios puedan introducir textos grandes.

En ocasiones se puede utilizar un div para seccionar la información dentro de un


formulario ya que dentro de la etiqueta del formulario no se encuentran secciones.

Acá empieza el primer parcial del segundo Semestre

Css
¿Qué es CSS?
Estructura o anatomía de Css:

Primero elegimos un selector, todo el css va a estar delimitado por llaves con apertura y
cierre, dentro van todas las propiedades en la propiedad se definen los valores y no se
debe olvidar cerrarlo con punto y coma.

Cuando se tienen dos elementos de css con el mismo selector css va a elegir el ultimo
que se escriba es decir el de mas abajo por eso se dice que css funciona en método
cascada.

Clase numero 7:

¿Dónde colocar nuestro código CSS?

R:/ Se puede utilizar una etiqueta Style o se puede mandar a llamar de un archivo
externo. (Lo mas recomendable es crearlo en un archivo externo).

La etiqueta STYLE sirve para que lo reconozcan como CSS. Ojo; tenemos que
asegurarnos bien a que etiqueta le estamos proporcionando estilos, para saber esto es
fácil simplemente dentro de la etiqueta style y seleccionamos un elemento se marcara en
la parte inferior dicha etiqueta que a la que se le está haciendo referencia.
Css no te dice que elementos existe o que no, por eso se le sugiere al programador tener
mucho cuidado. A las variables mencionadas dentro de la etiqueta style se le llama
selector.

¿Como centrar texto?

R:/ Dentro del style se puede utilizar el código text-aling: center; esta es una propiedad
predefinida de CSS.

Css tiene valores por defecto. Si tenemos un error en las palabras de las
configuraciones, simplemente el estilo no se aplicará y el estilo no se mostrará en el
navegador. Si tenemos dos propiedades definidas des del mismo tipo para la misma
variable el navegador solo mostrara la ultima configuración.

Clase numero 8

Poner nuestro código Css en un archivo externo. Se recomienda utilizar una carpeta
llamada CSS para identificar nuestros archivos de estilos fácilmente.

Una vez teniendo el código css separado debemos cargar el estilo, este lo hacemos
dentro del head de la siguiente manera:
Para hacer que nuestros sitios web sean más rápidos podemos utilizar lo siguiente:

Esto lo hacemos para que la página web “Precargue nuestra hoja de estilos”

Con la etiqueta span se puede hacer énfasis en palabras dentro de las demás etiquetas
como ser el H1.

Investigación: diferencia entre px, em, rem y como darle uso.

Clase 9:

Diferentes formas de escribir etiquetas en CSS

Si en el Css solo declaramos un estilo para una etiqueta como tal, estos ajustes se nos
colocaran a todas las etiquetas que tengamos en nuestro documento de HTML, pero
para evitar esto podríamos tratar de ser un poco más específicos.

Clase 10:

Selectores en CSS

Si a un estilo le colocamos como tal el nombre de un elemento se le colocara ese mismo


formato o estilo a todos los elementos iguales. Un ejemplo claro de esto es que si ha un
H1 que lleva otro nombre se le aplicaran solamente a ese h1 como tal.
Selectores más comunes:

Selector de elemento (hasta este punto este es el que hemos estado viendo): en este tipo
de selectores solo pondremos una etiqueta y sus respectivas propiedades (esto quiere
decir que este estilo se les pondrá a todos los elementos que tengan la misma etiqueta).

Selector de clase: Una ventaja de las clases es que son reutilizables. Nota: este tipo de
selectores empiezan con un punto. Una clase se mira de la siguiente forma:
Selector de Id: Este tipo de selector tiene la función de que puede haber muchos id por
pagina, pero estos mismos no se pueden repetir por más de una vez en un documento.
Estos son únicos, quiere decir que solo puede haber uno con un nombre asignada por
página. Nota: Este tipo de selectores inician con un numeral, se mira de la siguiente
manera:

Selector de atributo: Este va a seleccionar elementos basados en el atributo que


contengan. Ejemplo de cómo se ve este código:
Los selectores pueden llegar a combinarse con algo llamando combinaciones de
descendentes.

Hay otro método que es llamado Todos los hijos, este aplica la regla a todos los párrafos
hijos (o a la etiqueta que se le esté dando las propiedades).
Recomendación en Css:

No se recomienda en Css dar estilo solamente a las etiquetas como tal. En cambio, se
recomienda utilizar clases en los elementos que requerimos estilos, ejemplo visual:

En Css se utilizaría de la siguiente forma:

Recordar que siempre que trabajemos con class en Css se debe de iniciar con un punto.
La ventaja de estas clases es que pueden ser reutilizables.

Hay otra alternativa de trabajar con “Clases” pero en este otro caso seria con id’s para
identificar los elementos como tal (Sin embargo esta manera no es muy recomendable
ya que esto afecta a algo que se le llama especificad en Css ) una desvetaja de usar id’s
es que se deben nombrar de forma diferente cada vez que lo mandemos a llamar.
Ejemplo visual:

Html

Css
Nota: Los selectores no pueden empezar con números.

Colores en Css

No se recomienda poner color negro o blanco en las letras porque es muy simple.
Custom propierty: Nos facilita trabajar ya que solo lo mandamos a llamar, no
contamos con la necesidad de estar proporcionando configuraciones a cada uno de los
elementos.

Se declara primer el valor que queremos preeditar, luego lo declaramos en el apartado


que queramos, pero antes debemos anteponer el código VAR para que este se valide.

Nota: Dentro de las custom propiertys se pueden almacenar más tipos de datos , no
solamente estilos de colores.
¿Como cambiar el tipo de letra en Css?

R/: con la propiedad Font-family: nombre de la fuente.

Para buscar fuentes también podemos seleccionarlas haciendo uso de herramientas en


línea Google Fonts.

En caso de utilizar Google fonts, copiamos y pegamos el link que nos genera, este lo
debeos pegar arriba de precargar los estilos, hay que recordar que debemos tener
cuidado con la especificad. Las librerías deben ir primero en el index.

Hay que recordar que ciertas fuentes ya vienen con ciertos estilos precargados.

Nota: Si colocamos un estilo de fuente dentro de el css del body este se va a colocar
dentro de toda la pagina web, es decir que no es necesario configurar cada uno de
los elementos por separado.

Enlace de Google fonts: https://fonts.google.com/


Normalize en Css

Cada navegador muestra los datos de forma diferente, esto aplica para cualquier tipo de
dispositivo, ya sea para teléfono o para computadora.

Para solucionar esto debemos descargar el normalice que se encuentra en el siguiente


link: https://necolas.github.io/normalize.css/

Lo abrimos y copiamos todo el código css y lo pegamos en nuestro archivo nuevo que
llamaremos normalize.css

Nota: Se recomienda poner cada una de las librerías que se utilicen en el proyecto
dentro de su archivo como tal. Esto se recomienda para futuras actualizaciones.

Aplicación de estilo Css a un stack de navegación

Para hacer esto debemos crear una clase dentro del stack de navegación, es decir dentro
de a etiqueta nav. Las ventajas de usar clases es que con simplemente hacer un espacio
dentro del código html, podemos llegar a nombrar varias.

Para centrar el contenido del stack de navegación se recomienda utilizar contenedores.


En vez de pasar las cuatro propiedades para una simple acción se puede utilizar la
propiedad margin:

Investigación sobre diferentes tipos de display.


Investigacion: Diferencia entre padding y margin

Margin: Es del limite del elemento hacia afuera

Padding: Es la modificacion del elemento, es desde donde termina el elemento hasta adentro.

Que es flexbox y que es Css grid

Con el felxbox tenemos mas control de nuestros diseños, para usar flexbox siempre
tenemos que dirigirnos al elemento padre que deseamos allinear.

La propiedad justify-center nos permite centrar el contenido de forma horizontal.

Nota: Para distribuir el contenido en toda la pagina web se debe utilizar elementos que
comienzan con la propiedad “space” ejemplo: justify-content: space-around;
Si se utiliza la propiedad flex-direction: colum; no sirve el justify-content,

En cambio, deberemos de utilizar aling-items: flex-start;

También podría gustarte