Se você é novo em web design e desenvolvimento front-end (HTML, CSS, Javascript), pode optar por começar com um WYSIWYG editor. Este acrônimo significa "o que você vê é o que você obtém" e basicamente se refere a um software que permite que você crie uma página da web usando ferramentas visuais enquanto o software escreve algum código nos bastidores com base no que você é criando. A ferramenta WYSIWYG mais popular disponível é indiscutivelmente Dreamweaver da Adobe.
Uma boa opção para quem está começando
Enquanto muitos profissionais da web experientes com mais habilidades refinadas olhar para baixo no Dreamweaver e sua tendência de produzir marcação HTML inchada e Estilos CSS, a verdade é que a plataforma continua sendo uma boa opção para quem está começando a criar sites. Conforme você começa a usar a opção de "visualização de design" do Dreamweaver para construir uma página da Web, uma das perguntas que você provavelmente terá é como criar uma única quebra de linha para o conteúdo dessa visualização.
Quando você adiciona texto HTML a uma página da web, o navegador da web exibe esse texto como uma linha longa até que alcance a borda da janela do navegador ou seu elemento de contêiner. Nesse ponto, o texto será quebrado na próxima linha. Isso é semelhante ao que acontece em qualquer software de processamento de texto, como Microsoft Word ou Google Docs. Quando uma linha de texto não tiver mais espaço em uma linha horizontal, ela será quebrada para começar outra linha. Então, o que acontece se você quiser ditar onde uma linha é quebrada?
Quando você pressiona ENTER na Visualização de design do Dreamweaver
Quando você bate ENTRAR na visualização de design do Dreamweaver, o parágrafo atual é fechado e um novo parágrafo é iniciado. Visualmente, isso significa que essas duas linhas estão separadas com um pouco de espaçamento vertical. Isso ocorre porque, por padrão, HTML os parágrafos têm preenchimento ou margens (qual depende do próprio navegador) aplicado na parte inferior do parágrafo que adiciona esse espaçamento.
Isso pode ser ajustado com CSS, mas a verdade é que você deseja que haja espaçamento entre os parágrafos para permitir a legibilidade do site. Se você deseja uma única linha e nenhum espaçamento vertical largo entre as linhas, você não deseja usar a tecla ENTER porque não deseja que essas linhas sejam parágrafos individuais.
Quando você não deseja que um novo parágrafo comece
Para esses momentos em que você não deseja que um novo parágrafo comece, você adicionaria o
tag em HTML. Isso às vezes também é escrito como
. especificamente para versões de XHTML que exigiam que todos os elementos fossem fechados. O / final nessa sintaxe fecha o elemento automaticamente, uma vez que o
tag não tem sua própria tag de fechamento. Tudo isso é muito bom, mas você está trabalhando na Visualização de design do Dreamweaver. Você pode não querer pular para o código e adicionar essas quebras. Isso é bom, porque você pode, de fato, adicionar uma quebra de linha no Dreamweaver sem recorrer à visualização do código.
Adicione uma quebra de linha na visualização do projeto do Dreamweaver:
- Posicione o cursor onde deseja que a nova linha comece.
- Segure o tecla Shift e pressione Entrar.
É isso! A simples adição da tecla "shift" junto com o [ENTER] adicionará um
em vez de um novo parágrafo. Portanto, agora que você sabe como é, deve considerar onde usá-lo e onde evitá-lo. Lembrar, HTML destina-se a criar a estrutura de um site, não a aparência visual. Você não deve usar vários
tags para criar espaçamento vertical abaixo dos elementos em seu design.
É para isso que servem as propriedades CSS para preenchimento e margens. Onde você usaria um
tag é quando você precisa apenas de uma única quebra de linha. Por exemplo, se você está codificando um endereço de correspondência e decidiu usar um parágrafo, você pode adicionar
tags como esta:
nome da empresa
Linha de endereço
Cidade, estado, CEP.
Este código para o endereço é um único parágrafo, mas visualmente exibiria as três linhas em linhas individuais com um pequeno espaço entre elas.