El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Dreamweaver CC 2017 esencial

Formateo con etiquetas HTML en Dreamweaver CC 2017

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Las etiquetas HTML son muy importantes no sólo para formatear el texto, cosa que también se podría hacer con estilos CSS, sino para dotar de importancia y dar más información a los textos que vamos añadiendo.

Transcripción

(hombre) Podemos editar el aspecto que va a tener un texto mediante etiquetas HTML. Solo que estas etiquetas van a tener ciertas limitaciones. En realidad, el aspecto no debería venir nunca controlado por el HTML, debería de venir controlado siempre con CSS. Que es preferible a que esté controlado por el HTML. Son las características que tienen que ver con la importancia de un texto. o sea, si es una etiqueta P o una etiqueta H, o si tiene que ser negrita o si tiene que ser cursiva, por ejemplo. Veamos como podemos hacer modificaciones sobre estas características. En principio, cuando yo hago clic sobre cualquier etiqueta de texto, como por ejemplo, esta etiqueta P, dentro de la vista en vivo, voy a tener la opción de abrir una pequeña ventanita donde puedo hacer pequeñas modificaciones sobre el HTML. En concreto, modificar la importancia de ese texto. O sea, yo desde aquí puedo sustituir la etiqueta P, por una etiqueta de encabezamiento del tipo que sea. En segundo lugar, puedo hacer que sea negrita o que sea cursiva, o por supuesto, ambas cosas a la vez. Si me vuelvo a la vista de código, veremos que lo que hace es añadirle etiquetas EM que son las de cursivas, y "Stroke", que son las de negritas. Estas dos etiquetas en realidad tienen significación dentro de la estructura HTML. Por ejemplo, pues efectivamente este "Stroke" viene a decir que ese texto en concreto es más importante que el texto normal. El que ponga esas etiquetas, o etiquetas BI, viene controlado desde las preferencias. Y dentro de las preferencias, en el apartado general, debemos utilizar "Stroke" y EM en el lugar de B e I. Es la forma moderna y correcta de hacerlo, así que en principio es bueno dejar esta preferencia marcada. Si yo quiero volverlos a quitar otra vez, pues es tan fácil como abrir otra vez esa misma ventana y deseleccionar ambas etiquetas. Y aquí tengo el texto normal. También le puedo aplicar la etiqueta "Quote", que sirve para hacer como una especie de enrtadilla, hacer así un texto que está resaltado de manera especial, podría servir, por ejemplo, para comentarios de personas. Y para volverlo a dejar como estaba, pulso en el botón contrario, en eliminar etiqueta. Esta es la forma de trabajar con HTML desde la vista en vivo, todo lo que hemos hecho ha sido hacer modificaciones sobre etiquetas HTML. Hay otra manera de hacerlo. Me voya pasar ahora a la vista de diseño. En la vista de diseño vemos que está cambiando nuestro aspecto, porque esto en realidad es una aproximación de más o menos, como podría quedar, y como podemos ver, pues no entiende que pueda caber ese texto dentro de estas dos columnas, con lo cual me lo ha cambiado un poco, pero para trabajar, me puede servir lo mismo, si yo hago una selección en cualquier punto, pincho en su etiqueta, me selecciona toda esa etiqueta, y ahora me puedo ir a la ventana Propiedades y dentro de propiedades voy a tener algunas de las características iguales a las de la vista en vivo y algunas a mayores. Por ejemplo, tengo dentro de Formato, un listado donde puedo, de nuevo, volver a cambiar otra vez el tipo de encabezamiento, o ponerlo de nuevo como estaba de párrafo, pero aquí además también voy a tener, bueno, a parte por supuesto, de los botones de negrita y cursiva y también de Quote, también tengo la posibilidad de crear listas, desde este punto con cualquier texto que tenga seleccionado. En cualquier caso, de todas formas, de lo que he hablado hasta ahora es solamente de la organización de estos textos, la organización con el HTML. Si lo que necesito es aplicar estilos concretos, por ejemplo, quiero controlar este texto en concreto, que salga remarcado de otro color por el motivo que fuese, pero si quiero que todos estos bloques de texto tengan un tipo de letra diferente, para eso vamos a necesitar los selectores CSS y la mejor forma de conseguir que se vean correctamente los textos y aplicarles esos selectores, es añadirles clases o identificadores, pulsando sobre el botón Más, añadiéndoles clases. En el caso de estos textos, por ejemplo, yo no lo necesito, por ejemplo, porque ya he creado sobe su contenedor la clase descripción y sobre esa puedo añadir las características que quiera. Pero supongamos que, por ejemplo, ahora yo quiero hacer una edición sobre este texto en concreto y no otro, sobre solo este trocito. Vemos que de entrada ya me permite, al haber hecho doble clic y seleccionarlo, aplicarle las etiquetas "Stroke" y EM, sobre solo esa palabra. Pero también podría hacer otra cosa, y es añadir, por ejemplo, una etiqueta "Span" y sobre esa etiqueta "Span" aplicarle una clase. Para eso tendría que venirme de nuevo a la vista de código y dentro de esa vista de código, añadir la etiqueta "Span", sobre ella añadir una clase, por ejemplo, resaltado meter la palabra que quería añadir dentro de esa clase resaltado, me voy a la vista en vivo, vemos que ahora aparece aquí con esa etiqueta y de hecho es una etiqueta que es seleccionable también desde el dom, y ahora con esa etiqueta resaltada desde el diseñador de CSS puedo añadir para esa clase, voy a quitar todo lo que me sobra, voy a poner "Resaltado", de hecho aquí me aparece, así que solamente tengo que seleccionarla y puedo ponerle, pues por ejemplo, que tenga una propiedad de color naranja, selecciono este naranja, hago clic en enter y aquí vemos como también puedo modificar las características del texto directamente con estilos CSS y solo a trocitos de texto, no solamente a todas las etiquetas que envuelve.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.