Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Editando HTML

3/22
Recursos

Aportes 43

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

No sabia que pod铆a mover los nodos de esa forma 馃槂

  1. Control + F: Buscar palabras especificas dentro del documento HTML. (Se debe estar en la secci贸n de elementos)
  2. Los tres puntos al lado izquierdo de cada elemento HTML nos ayudan a mover estos a otras posiciones. Por ejemplo: cambiar de posici贸n los elementos de una lista del nav.
  3. Settings -> Shorcouts: Te permiten ver los atajos de teclado que puedes utilizar en las dev tools dependiendo de tu sistema operativo.

Para los que quieran profundizar Chrome DevTools
Elements

<h1>HTML</h1>

Podemos ver la estructura HTML de cualquier p谩gina en la pesta帽a Elements. Desde ah铆 podr茅mos cambiar el contenido de todas las etiquetas, remover y a帽adir m谩s, cambiar la posici贸n de los nodos, y m谩s.

  • Podemos ver la estructura de cada elemento en pantalla con el inspector ubicado en la esquina superior izquierda o click derecho en 茅ste e inspeccionar elemento.
  • Para hacer busquedas por palabra damos click en cualquier nodo y presionamos control + f

En Firefox, el equivalente es la pesta帽a Inspector y tiene habilitado el buscador por defecto. Adem谩s te da sugerencias de qu茅 clases o elementos buscar

Esta pr谩ctica la recomiendo mucho cuando tienen 鈥渄udas鈥 sobre alg煤n estilo en Css, o en javascript; para que despu茅s, lo pasen a su c贸digo.

<h3>3. Editando HTML</h3>

0:43 Secci贸n Elementos.

1:23 Seleccionando un elemento en la p谩gina.

2:45 Modificando los nodos del HTML.

3:25 Moviendo los nodos.

5:21 Shorcuts para acceder a las funcionalidades del inspector con m谩s eficiencia.

<h3>- Les dejo este tutorial que resume todo el contenido del curso con marcadores para acceder rapidamente a los puntos claves que deseamos recordar.</h3>

Cu茅ntame si parece 煤til este formato de resumen, y dale 馃挌 si quieres m谩s de estos para la comunidad 馃榿馃檶

Manipulando el HTML


Podemos ver el HTML de una p谩gina web en la secci贸n de Elements del DevTools. Aqu铆 podremos manipular el HTML o usar el selector y al tocar en algo en espec铆fico dentro de la p谩gina en Elements se colocar谩 en la l铆nea de c贸digo html que sea ese elemento seleccionado.

Para modificar textos dentro de etiquetas das doble click, y tambi茅n en las etiquetas. Y en los tres puntos a la derecha nos dejan arrastrar todo ese bloque de c贸digo hacia otros lugares.


Shortcuts

Ctrl+shift+c, para activar el selector

Ctrl+f, para hacer b煤squedas dentro de Elements, este comando tambi茅n sirve para buscar palabras dentro de una p谩gina web

A mi me salio para buscar haciendo ctrl + F

En esta p谩gina van a poder encontrar la lista completa de shortcuts and gestures de Devtools. Viene la descrpci贸n tanto para Mac como para Windows y Linux 馃槂

ELEMENTS - HTML

  • Para hacer b煤squeda dentro de la pesta帽a de elementos (Windows) Ctrl + Shift + F
  • Doble click encima de la etiqueta para modificar texto.
  • Al dar click en el icono de 3 puntitos se pueden mover las etiquetas
    html.

Hay que tener en cuenta que los cambios que hagamos en DevTools no estar谩n en nuestro c贸digo local, as铆 que antes de emocionarnos y hacer much铆simos cambios es mejor trabajar progresivamente de a pocos esos cambios para solucionar errores

Con este comando en la consola puede editar cualquier sitio web

document.designMode = 'on'
Jam谩s hab铆a usado el de buscar una palabra de un elemento. Me encant贸 esa forma de encontrar un elemento a partir de su texto !!!

Todas las p谩gina tienen su propio DevTools, y todo lo que tu ves dentro de DevTools es exactamente el c贸digo de dicha p谩gina, es el c贸digo que el servidor de X p谩gina le est谩 mandando a tu navegador, y si, puedes ir a Facebook o Twitter y mirar sus devtools, juguetear con ella e incluso cambiar el layout de dichas p谩ginas, obviamente al refrescarla todo lo que hagas se ir谩, pero es divertido curiosear en su c贸digo ^^

Consejos para editar HTML

  • Para buscar cosas en el Dev Tools utilizamos 鈥渃omand + F鈥.
  • Para modificar el HTML solo es necesario dar doble click sobre el c贸digo.
  • Drag and drop de elementos.
  • Buscar mas comandos en el menu shortcuts.
DevTools馃洜 - Elements
Al abrir las DevTools. En la pesta帽a de Elements o Elementos, podremos ver ver la estructura HTML de toda p谩gina web y podremos hacer modificaciones en tiempo real sobre esta, pero, al recargar la p谩gina, todo volver谩 a su estado normal.

Gran herramienta de trabajo para desarrolladores,

Hoy aprend铆 a como mover los nodos del 谩rbol HTML. Yo intentando copiar y pegar todo el bloque de HTML.

Es muy 煤til para hacer cambios de los cuales no estamos muy seguros, o simplemente ir probando cosas nuevas para luego pasarlo a nuestro c贸digo!

DevTools me ha ayudado bastante en mis desarrollos 馃槃

Es increible la forma en que se utiliza la 鈥淒evTools鈥 para HTML en la parte de editar y mover los archivos, estoy impresionado. Saludos.

eso de mover los nodes鈥 super!!!

A seguir aprendiendo.

Excelente Diego

Genial!!!

Y Yo que pense que no aprenderia mucho en este curso, Y Pumm tres cosas que no sabia 馃槏馃槏馃槏

Empez贸 muy bien este curso. Genial 鈥

Desconoc铆a que los tres puntos era para mover los elementos HTML 馃槷

No inventes no sabia mucho de esto. Sobre todo lo de los nodos, me va a ahorrar mucho tiempo!

No sabia lo de Ctrl + F, y los atajos del teclado, eso me gusto.鉁旔煈

Generalmente usaba la consola de Firefox, pero vamos a probar con la de Chrome!!!

Muy buen inicio!

Super utiles las Devtools, yo las he usado para aprender desarrollo web y me han servido una barbarida鈥on de gran ayuda鈥 Cuando quiero ver como esta construida una web tambien uso el Inspector de elemento y eso da una idea de maquetaci贸n muy chevere

super bueno, par de cosas sencillas y 煤tiles que aprend铆 hoy

De mucha utilidad cuando trabajas maquetando el proyecto y mas aun cuando comienzas a darle estilos.

Cuando tienes un proyecto grande, para hacer una b煤squeda te puede llevar mucho tiempo, pero puedes hacer m谩s 贸ptimas tus b煤squedas, es decir, si necesitas ser s煤per espec铆fico en buscar un elemento, puedes ir a la barra de herramientas y hacer un filtro:

馃憣

No sab铆a que el Ctrl+F funcionaba en la consola ni que se pueden mover bloques de c贸digo, me este curso si que me est谩 encantando.

Dev tools! ser谩 tu mejor amigo de por vida en la programaci贸n web, es mejor buscar el error en dev tools que ir a tu Editor de c贸digo y tratar de ver que te quedo mal

Dejo un link de Google Developers que me ayudo mucho con este tema en particular. Espero que les sirva.
https://developers.google.com/web/tools/chrome-devtools/dom