SlideShare una empresa de Scribd logo
1 de 10
Descargar para leer sin conexión
Karina Noguera 11ºA
Dreamweaver     CS5   es   un   software   fácil   de   usar   que   permite   crear páginas

web profesionales.
Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente diseño
y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos
JavaScript, etc.., de una forma muy sencilla y visual.
Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar
con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del
programa.
Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la
página de adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a
entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa.
Nota: Esta versión estará disponible hasta que Adobe lance la nueva versión del programa.
Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas registradas
Dreamweaver y Adobe. aulaClic no tiene ninguna relación con Adobe.
Las páginas web están escritas en HTML.
Vamos a ver cuáles son los elementos básicos de Dreamweaver CS5, la
pantalla, las barras, los paneles, etc..., para saber diferenciar entre cada
uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué
sirven. También veremos cómo obtener ayuda, por si en algún momento
no sabemos cómo seguir trabajando. Cuando conozcamos todo esto
estaremos en disposición de empezar a crear páginas web.
Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes
fundamentales. Así conoceremos losnombres de los diferentes elementos y será más fácil entender el
resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso)
puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir
qué elementos quiere que se vean en cada momento y dónde, como veremos más adelante.
A lo largo de este tema vamos a aprender a cambiar las propiedades del
  texto y a crear estilos CSS, que permiten asignar al texto clases y estilos
  creados por nosotros mismos, no predefinidos.


  Características del texto
  Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a
través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través
del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS.
    Comenzamos viendo las propiedades HTML
•Comenzamos viendo las propiedades HTML




  Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el
  navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente
  como queramos.
Formato:

Permite seleccionar un formato de párrafo ya definido para
HTML, que puede ser encabezado, párrafo o formato
predeterminado. Los encabezados se utilizan para establecer
títulos dentro de un documento. El formato predeterminado
sirve para que el texto aparezca tal cual ha sido escrito, por
ejemplo, si entre dos palabras se introducen varios espacios
solo se considera uno, pero al establecer el formato
predeterminado se respetará que hayan varios espacios en
lugar de solo uno. El texto normal, debería ir siempre en
párrafos, salvo que esté en otros elementos, como tablas o
listas.
Es importante emplear correctamente los encabezados, ya que
se organizará mejor el contenido de nuestra web, y es
importante de cara a buscadores y visitantes. No te preocupes
por cómo se muestran esos encabezados, recuerda que
siempre podremos personalizarlo.
•Estilo: 
   •El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se 
   muestra en negrita. El botón I, lo encierra entre<em></em>, que por defecto se ve en 
   cursiva.
   •Estas son las etiquetas de resaltado más habituales, pero existen otras que 
   encontramos a través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no 
   aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que 
   los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario 
   pensara que se trata de un vínculo. Además, emplea etiquetas que están en desuso.
    •Lista:    

     
    Estos botones permiten crear listas con viñetas o listas numeradas. 
    Veremos qué son las listas en el siguiente apartado.

    •Sangría:

•Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de 
margen que se establece a ambos lados del texto. En este caso los botones se refieren a 
sangría a la izquierda del texto.
•Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>, 
que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, 
creará una sublista dentro de ésta.
En este tema vamos a ver algunas de las facilidades que proporciona 
Dreamweaver para trabajar sobre el propio código HTML, y no 
únicamente sobre el editor gráfico de la vista diseño.
En este tema no se pretende enseñaros el lenguaje HTML sino cómo 
poder realizar algunos reajustes directamente en el código estando dentro 
de Dreamweaver.
En muchas ocasiones veremos que para hacer pequeñas correcciones, 
nos resultará más cómodo y rápido si lo hacemos directamente desde el 
código que recurriendo a asistentes.
 Etiquetas

  Ya sabes que el lenguaje HTML está basado en etiquetas que marcan el inicio y fin de cada
elemento de la página Web.
  En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el código HTML
de una página para darle un título. Consistía simplemente en escribir el título deseado entre
las etiquetas <title> y </title>.
  Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera
etiqueta indica inicio, y la segunda, que incluye el símbolo /, indica final y se suele denominar
etiqueta de cierre.
  Las etiquetas disponen de atributos que permiten definir características del elemento sobre
el que actúan, incluyendo cierto código dentro de la etiqueta.
  Por ejemplo, un párrafo se inserta entre las etiquetas <p> y </p>, pero es posible cambiar
sus características predeterminadas, como puede ser asignarle una clase de estilo CSS. Para
ello, a la etiqueta de apertura anterior habría que añadir el atributo y su valor, quedando<p
class="miclase"> y </p>. 
  También hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo,
un May + INTRO dentro del código HTML equivale a la etiqueta <br>. Realmente estas
etiquetas si tienen cierre, y se pone en la etiqueta de apertura para seguir el estándar XHTML
que obliga a que todas las etiquetas se cierren. Por tanto el salto de línea anterior se
escribiría <br />. Otras etiquetas que se cierran sobre sí mismas son las imágenes <img />,
reglas horizontales <hr /> o elementos de formulario <input />. 
  Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con
la apariencia y contenido definidos en el editor gráfico, pero también ofrece otras
posibilidades para trabajar directamente sobre el código.
 Etiquetas

  Ya sabes que el lenguaje HTML está basado en etiquetas que marcan el inicio y fin de cada
elemento de la página Web.
  En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el código HTML
de una página para darle un título. Consistía simplemente en escribir el título deseado entre
las etiquetas <title> y </title>.
  Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera
etiqueta indica inicio, y la segunda, que incluye el símbolo /, indica final y se suele denominar
etiqueta de cierre.
  Las etiquetas disponen de atributos que permiten definir características del elemento sobre
el que actúan, incluyendo cierto código dentro de la etiqueta.
  Por ejemplo, un párrafo se inserta entre las etiquetas <p> y </p>, pero es posible cambiar
sus características predeterminadas, como puede ser asignarle una clase de estilo CSS. Para
ello, a la etiqueta de apertura anterior habría que añadir el atributo y su valor, quedando<p
class="miclase"> y </p>. 
  También hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo,
un May + INTRO dentro del código HTML equivale a la etiqueta <br>. Realmente estas
etiquetas si tienen cierre, y se pone en la etiqueta de apertura para seguir el estándar XHTML
que obliga a que todas las etiquetas se cierren. Por tanto el salto de línea anterior se
escribiría <br />. Otras etiquetas que se cierran sobre sí mismas son las imágenes <img />,
reglas horizontales <hr /> o elementos de formulario <input />. 
  Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con
la apariencia y contenido definidos en el editor gráfico, pero también ofrece otras
posibilidades para trabajar directamente sobre el código.

Más contenido relacionado

La actualidad más candente (20)

Presentación alanis
Presentación alanisPresentación alanis
Presentación alanis
 
Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4
 
Modulo paginas
Modulo paginasModulo paginas
Modulo paginas
 
Xhtml
XhtmlXhtml
Xhtml
 
Manual de html
Manual de htmlManual de html
Manual de html
 
HTML
HTMLHTML
HTML
 
Programación para web
Programación para webProgramación para web
Programación para web
 
Karol cortez normas apa
Karol cortez normas apaKarol cortez normas apa
Karol cortez normas apa
 
Inicio al HTML
Inicio al HTMLInicio al HTML
Inicio al HTML
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
 
Html
HtmlHtml
Html
 
05 Introduccion a HTML
05 Introduccion a HTML05 Introduccion a HTML
05 Introduccion a HTML
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
El lenguaje html
El lenguaje htmlEl lenguaje html
El lenguaje html
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Html presentacion
Html presentacionHtml presentacion
Html presentacion
 

Destacado

Go Green White Paper GERMAN
Go Green White Paper GERMANGo Green White Paper GERMAN
Go Green White Paper GERMANNamirial GmbH
 
Usability Reifegrad in Deuschland
Usability Reifegrad in DeuschlandUsability Reifegrad in Deuschland
Usability Reifegrad in Deuschlandabublitz
 
Morschwiller fröschli
Morschwiller fröschliMorschwiller fröschli
Morschwiller fröschligirodat edy
 
La verdad en unamuno
La verdad en unamunoLa verdad en unamuno
La verdad en unamunosalecuster
 
Herzensbrecher 85
Herzensbrecher 85Herzensbrecher 85
Herzensbrecher 85girodat edy
 
IT Projekte beherrschbar machen
IT Projekte beherrschbar machenIT Projekte beherrschbar machen
IT Projekte beherrschbar machenm.schneider
 
Tarea del seminaro vii
Tarea del seminaro viiTarea del seminaro vii
Tarea del seminaro viiLdlsantostej
 
Tvm eventmanagement jubiläum150_jahre
Tvm eventmanagement jubiläum150_jahreTvm eventmanagement jubiläum150_jahre
Tvm eventmanagement jubiläum150_jahreVolker Moeckel
 
Weird Pictures
Weird PicturesWeird Pictures
Weird PicturesWinson Ng
 
SEMINARIO 4 Irene Rodríguez Ramos
SEMINARIO 4 Irene Rodríguez Ramos SEMINARIO 4 Irene Rodríguez Ramos
SEMINARIO 4 Irene Rodríguez Ramos irerodram
 
Métodos de Conservación y Enlatados
Métodos de Conservación y EnlatadosMétodos de Conservación y Enlatados
Métodos de Conservación y EnlatadosArienis
 
Periféricos de un ordenador
Periféricos de un ordenadorPeriféricos de un ordenador
Periféricos de un ordenadorEliza9202
 
Cómo y por qué se produce una unión química
Cómo y por qué se produce una unión químicaCómo y por qué se produce una unión química
Cómo y por qué se produce una unión químicaflorenciaservera
 
Temporada+primavera verano+2013
Temporada+primavera verano+2013Temporada+primavera verano+2013
Temporada+primavera verano+2013albamateos
 

Destacado (20)

Go Green White Paper GERMAN
Go Green White Paper GERMANGo Green White Paper GERMAN
Go Green White Paper GERMAN
 
Vale trabajo
Vale trabajoVale trabajo
Vale trabajo
 
Usability Reifegrad in Deuschland
Usability Reifegrad in DeuschlandUsability Reifegrad in Deuschland
Usability Reifegrad in Deuschland
 
Morschwiller fröschli
Morschwiller fröschliMorschwiller fröschli
Morschwiller fröschli
 
La verdad en unamuno
La verdad en unamunoLa verdad en unamuno
La verdad en unamuno
 
E Government Recht
E Government Recht E Government Recht
E Government Recht
 
Herzensbrecher 85
Herzensbrecher 85Herzensbrecher 85
Herzensbrecher 85
 
Es la evolución un hecho o una
Es la evolución un hecho o unaEs la evolución un hecho o una
Es la evolución un hecho o una
 
IT Projekte beherrschbar machen
IT Projekte beherrschbar machenIT Projekte beherrschbar machen
IT Projekte beherrschbar machen
 
Ord.3024 entericas 2013
Ord.3024  entericas 2013Ord.3024  entericas 2013
Ord.3024 entericas 2013
 
Tarea del seminaro vii
Tarea del seminaro viiTarea del seminaro vii
Tarea del seminaro vii
 
10152 fn open data
10152 fn open data10152 fn open data
10152 fn open data
 
Folder MBA Corporate Governance und Management Upgrade
Folder MBA Corporate Governance und Management UpgradeFolder MBA Corporate Governance und Management Upgrade
Folder MBA Corporate Governance und Management Upgrade
 
Tvm eventmanagement jubiläum150_jahre
Tvm eventmanagement jubiläum150_jahreTvm eventmanagement jubiläum150_jahre
Tvm eventmanagement jubiläum150_jahre
 
Weird Pictures
Weird PicturesWeird Pictures
Weird Pictures
 
SEMINARIO 4 Irene Rodríguez Ramos
SEMINARIO 4 Irene Rodríguez Ramos SEMINARIO 4 Irene Rodríguez Ramos
SEMINARIO 4 Irene Rodríguez Ramos
 
Métodos de Conservación y Enlatados
Métodos de Conservación y EnlatadosMétodos de Conservación y Enlatados
Métodos de Conservación y Enlatados
 
Periféricos de un ordenador
Periféricos de un ordenadorPeriféricos de un ordenador
Periféricos de un ordenador
 
Cómo y por qué se produce una unión química
Cómo y por qué se produce una unión químicaCómo y por qué se produce una unión química
Cómo y por qué se produce una unión química
 
Temporada+primavera verano+2013
Temporada+primavera verano+2013Temporada+primavera verano+2013
Temporada+primavera verano+2013
 

Similar a Karina (20)

Dreamweaver gisselle noguera
Dreamweaver gisselle nogueraDreamweaver gisselle noguera
Dreamweaver gisselle noguera
 
Presentación html
Presentación htmlPresentación html
Presentación html
 
Presentación1
Presentación1Presentación1
Presentación1
 
Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1Curso HTML desde Cero - Capítulo 1
Curso HTML desde Cero - Capítulo 1
 
Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1 Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1
 
Capas en HTML
Capas en HTMLCapas en HTML
Capas en HTML
 
Html geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldanaHtml geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldana
 
Html
HtmlHtml
Html
 
Html doc. descargado (reparado)
Html doc. descargado (reparado)Html doc. descargado (reparado)
Html doc. descargado (reparado)
 
Deber de htmly xml
Deber de htmly xmlDeber de htmly xml
Deber de htmly xml
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
10 etiquetas basicas de html
10 etiquetas basicas de html10 etiquetas basicas de html
10 etiquetas basicas de html
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 
Informatica
InformaticaInformatica
Informatica
 
Informatica
InformaticaInformatica
Informatica
 
Informatica
InformaticaInformatica
Informatica
 
Informatica
InformaticaInformatica
Informatica
 
Curso de html
Curso de htmlCurso de html
Curso de html
 
Html
HtmlHtml
Html
 

Karina

  • 2. Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual. Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa. Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa. Nota: Esta versión estará disponible hasta que Adobe lance la nueva versión del programa. Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas registradas Dreamweaver y Adobe. aulaClic no tiene ninguna relación con Adobe. Las páginas web están escritas en HTML.
  • 3. Vamos a ver cuáles son los elementos básicos de Dreamweaver CS5, la pantalla, las barras, los paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web.
  • 4. Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos losnombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento y dónde, como veremos más adelante.
  • 5. A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten asignar al texto clases y estilos creados por nosotros mismos, no predefinidos. Características del texto Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS. Comenzamos viendo las propiedades HTML •Comenzamos viendo las propiedades HTML Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos.
  • 6. Formato: Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato predeterminado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato predeterminado se respetará que hayan varios espacios en lugar de solo uno. El texto normal, debería ir siempre en párrafos, salvo que esté en otros elementos, como tablas o listas. Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cómo se muestran esos encabezados, recuerda que siempre podremos personalizarlo.
  • 7. •Estilo:  •El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se  muestra en negrita. El botón I, lo encierra entre<em></em>, que por defecto se ve en  cursiva. •Estas son las etiquetas de resaltado más habituales, pero existen otras que  encontramos a través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no  aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que  los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario  pensara que se trata de un vínculo. Además, emplea etiquetas que están en desuso. •Lista:       Estos botones permiten crear listas con viñetas o listas numeradas.  Veremos qué son las listas en el siguiente apartado. •Sangría: •Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de  margen que se establece a ambos lados del texto. En este caso los botones se refieren a  sangría a la izquierda del texto. •Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>,  que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista,  creará una sublista dentro de ésta.
  • 9.  Etiquetas Ya sabes que el lenguaje HTML está basado en etiquetas que marcan el inicio y fin de cada elemento de la página Web. En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el código HTML de una página para darle un título. Consistía simplemente en escribir el título deseado entre las etiquetas <title> y </title>. Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye el símbolo /, indica final y se suele denominar etiqueta de cierre. Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que actúan, incluyendo cierto código dentro de la etiqueta. Por ejemplo, un párrafo se inserta entre las etiquetas <p> y </p>, pero es posible cambiar sus características predeterminadas, como puede ser asignarle una clase de estilo CSS. Para ello, a la etiqueta de apertura anterior habría que añadir el atributo y su valor, quedando<p class="miclase"> y </p>.  También hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May + INTRO dentro del código HTML equivale a la etiqueta <br>. Realmente estas etiquetas si tienen cierre, y se pone en la etiqueta de apertura para seguir el estándar XHTML que obliga a que todas las etiquetas se cierren. Por tanto el salto de línea anterior se escribiría <br />. Otras etiquetas que se cierran sobre sí mismas son las imágenes <img />, reglas horizontales <hr /> o elementos de formulario <input />.  Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico, pero también ofrece otras posibilidades para trabajar directamente sobre el código.
  • 10.  Etiquetas Ya sabes que el lenguaje HTML está basado en etiquetas que marcan el inicio y fin de cada elemento de la página Web. En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el código HTML de una página para darle un título. Consistía simplemente en escribir el título deseado entre las etiquetas <title> y </title>. Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye el símbolo /, indica final y se suele denominar etiqueta de cierre. Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que actúan, incluyendo cierto código dentro de la etiqueta. Por ejemplo, un párrafo se inserta entre las etiquetas <p> y </p>, pero es posible cambiar sus características predeterminadas, como puede ser asignarle una clase de estilo CSS. Para ello, a la etiqueta de apertura anterior habría que añadir el atributo y su valor, quedando<p class="miclase"> y </p>.  También hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May + INTRO dentro del código HTML equivale a la etiqueta <br>. Realmente estas etiquetas si tienen cierre, y se pone en la etiqueta de apertura para seguir el estándar XHTML que obliga a que todas las etiquetas se cierren. Por tanto el salto de línea anterior se escribiría <br />. Otras etiquetas que se cierran sobre sí mismas son las imágenes <img />, reglas horizontales <hr /> o elementos de formulario <input />.  Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico, pero también ofrece otras posibilidades para trabajar directamente sobre el código.