Tags definindo parágrafo, espaço, bloco HTML e parágrafo
Vamos considerar em detalhes Blocos e parágrafos HTML como elementos de uma página da web.
- Parágrafo HTML definido por tags.
- Parágrafos HTML geralmente contêm texto, tags de formatação, imagens.
- Parágrafo HTML não pode conter elementos de bloco, como cabeçalhos
- , bloquear
e outros parágrafos. - Bloco HTML definido por tags .
- Bloco HTML pode conter qualquer elemento de uma página da web, em qualquer quantidade.
- Blocos de HTMLótimo para páginas da web e fácil de manipular.
Considere o código abaixo:
Resultado:
Nós podemos ver isso Parágrafos HTML são recuados verticalmente - esta é a peculiaridade das tags. Blocos de HTML
As tags não podem conter outros ou
Tags e, em princípio, a mesma coisa, mas o consórcio W3C recomendou o uso de letras minúsculas. V nova versão HTML como no XHTML moderno, o uso de letras maiúsculas ao escrever tags é proibido.
Bloquear
Espaço HTML da tabela de caracteres especiais
Espaço HTML permite aumentar o espaço entre palavras e caracteres.
Quanto aos espaços entre as palavras, não importa quantas delas existam no Bloco de Notas, ou seja, no código-fonte, apenas uma será exibida na página web. Se você precisar aumentar a distância, use o caractere de espaço da tabela de símbolos. Você pergunta: por que precisamos desses valores codificados de caracteres comuns? - Vou responder: São necessários para mostrar, por exemplo, esses colchetes< >... Em outras palavras, para exibir as tags, no meu editor escrevo: ... Tag: , como nos lembramos, converta o texto em monoespaçado (datilografado).
Maneiras de exibir um parágrafo HTML
Exemplos de saída de parágrafo.
Olá! Vamos continuar examinando os fundamentos da programação de sites. É difícil imaginar qualquer um deles sem uma tag de parágrafo em seu código. Hoje vamos considerar como escrevê-lo corretamente e uma descrição de várias ações adicionais com o texto.
Exemplo
Vamos dar um exemplo de como fazer um parágrafo em código HTML.
Uma ou mais frases.
Um pré-requisitoé a presença de uma tag de abertura e fechamento. Aliás, tudo pode ser feito diretamente no bloco de notas, só então será necessário salvar o arquivo no formato adequado.
Formatação
Freqüentemente, noto que as pessoas estão interessadas em como você pode fazer uma linha vermelha. É muito simples para um parágrafo específico.
Habilitar essas opções irá recuar a primeira linha 15 pixels da borda esquerda. Se tais mudanças forem aplicadas a todas as tags P, então em Arquivo CSS, que se conecta às páginas do site, você pode escrever o código mostrado abaixo.
Pessoalmente, geralmente não faço linhas vermelhas ao editar o código no bloco de notas ou outro editor.
Eu apenas incluo o preenchimento entre os blocos de texto. Para fazer isso, você precisa escrever no CSS parâmetros especiais.
p (margem inferior: 25px;)
Se você usar essa construção, após cada parágrafo haverá um recuo de 25 pixels.
Na verdade, existem muitas opções para trabalhar com HTML e vários estilos. Eu descrevi apenas alguns deles, é muito difícil cobrir tudo em um artigo.
Quer saber mais? Talvez minhas postagens anteriores sobre os seguintes tópicos sejam úteis:
Nesse ponto, vou encerrar o artigo e, creio eu, agora não será difícil fazer parágrafos em HTML e organizá-los perfeitamente com a ajuda de tags especiais.
Desejo a você muito sucesso no domínio da programação. A propósito, você já pensou em ganhar dinheiro com sites informativos não comerciais? Informações simplesmente lindas fornecidas especiais para seus leitores em.
Negócios e finanças online são os tópicos principais deste blog. Você pode se familiarizar com clientes em potencial individuais na rede agora mesmo com os materiais publicados. Eu continuo a preparar e publicar conteúdo novo e, o mais importante, realmente útil. Inscreva-se para receber atualizações do Workip em seu o email... Até a próxima vez.
- no processo de criação de um site, temos que trabalhar muito com blocos de texto ou frases de texto. Uma vez, precisei adicionar uma frase de texto, para que antes dessa frase de texto houvesse algum recuar o texto da borda do html o bloco ao qual o texto fornecido foi adicionado.
Portanto, o primeiro método é o mais natural e simples. Para recuar antes do texto, adicione antes do texto Código HTML espaços - você pode adicionar código de espaço html em qualquer editor de html.
Aqui está um exemplo de um código funcional para definir o recuo para o texto, usando o código de espaço:
Html recuar o texto para a esquerda, use o código de espaço
Neste exemplo, antes do texto que selecionamos, o código de espaço é -& nbsp; adicionado quatro vezes, como resultado, obtemos o recuo de que precisamos.
Sabemos que o código de espaço em branco é tratado por qualquer navegador. Portanto, ao adicionar o número necessário de espaços antes do texto, você pode obter o recuo necessário para o texto.
A vantagem desse método é que funcionará em qualquer navegador.
Mas tem este método há uma desvantagem significativa. Para fazer o recuo do texto grande o suficiente em comprimento, no código html, antes do texto você terá que adicionar um grande número de caracteres de espaço, que podem não parecer bonitos, pesados e não profissionais.
Uma das opções para resolver este problema é próxima maneira atribuições de recuo.
Recuo de texto HTML, método dois - este método é baseado nas propriedades da tag blockquote. Esta tag define um recuo de aproximadamente 40 pixels à esquerda e à direita, para o texto colocado nela. Além disso, o preenchimento é definido na parte superior e inferior. Exemplo de HTML o código para usar este método é fornecido abaixo:
à esquerda, use a tag bloco de citação
Como você pode ver, esse método de definição de recuo de texto é muito fácil de usar, mas também tem uma desvantagem significativa. O recuo que a tag define bloco de citação,é fixo e sempre igual ao mesmo valor - 40px.
Para remediar a situação, e ao adicionar html indent e para texto ser capaz de definir qualquer valor, usaremos o terceiro método.
Recuo de texto HTML, método três.
Aqui, usaremos a propriedade text-indent das CSS Cascading Style Sheets.
Se abrirmos a referência CSS, na página com a descrição das propriedades do text-indent, veremos que com a ajuda do text-indent, podemos definir a quantidade de indentação da primeira linha ou do primeiro parágrafo de qualquer bloco de texto.
Estamos considerando um exemplo com um bloco de texto curto, portanto, as propriedades de indentação de texto são adequadas para o nosso caso.
Abaixo está o código html que recua o texto usando o recuo de texto. No exemplo, você pode ver que, ao definir diferentes valores de argumento para text-indent, podemos alterar a quantidade de indentação do texto:
Htmlrecuartexto o estilo CSS funciona - text-indent
Na minha opinião, este método de definir o recuo para o texto é o mais ideal, mas, no entanto, considere outra forma de definir o recuo, usando imagens.
Recuo de texto HTML, o quarto método - aqui usaremos uma imagem para definir o recuo.
Como um exemplo prático, vamos considerar imediatamente o código html que demonstra como esse método funciona:
à esquerda, use a imagem
É claramente visto pelo exemplo dado que ao alterar a largura da imagem, podemos alterar a posição do texto, ou seja, definir o recuo necessário para o texto.
Como imagem, você pode usar uma imagem cuja largura e altura sejam iguais a um pixel. Para que a imagem que estamos usando não fique visível na página, defina a cor para ela exatamente igual ao fundo da página do site.
Na minha opinião, os métodos acima de definir recuos de texto são suficientes para organizar o recuo que você precisa em qualquer situação ao adicionar conteúdo à página de seus sites.
Qualquer texto tem sua própria estrutura única: os livros são divididos em partes, seções e capítulos, jornais e revistas têm títulos e subtítulos separados, que, por sua vez, incluem fragmentos de texto que também têm sua própria estrutura: parágrafos, travessões, etc.
O texto colocado em páginas da web não é exceção, mas também deve ter uma estrutura lógica que seja compreensível para todos os usuários. Afinal, muito depende de quão conveniente e simples o texto da página será percebido: em primeiro lugar, qual a impressão que o visitante terá do seu site.
Para criar unidades estruturais de texto, como parágrafos, os documentos HTML usam a tag
, que separa fragmentos de texto com recuo vertical (uma linha em branco é adicionada antes e depois do parágrafo).
Nota: por padrão, a distância entre os parágrafos é de 1em (em é uma unidade de medida igual à altura da fonte), ou seja, a distância entre os parágrafos depende diretamente do tamanho da fonte.
Para alterar os recuos entre os parágrafos sem alterar o tamanho da fonte, você pode usar Propriedade CSS margem.
Não se esqueça da tag final
A maioria dos navegadores renderizará o documento HTML corretamente, mesmo se você esquecer a tag final.
Parágrafo
Outro parágrafo
Este código funcionará na maioria dos navegadores, mas não confie nele. Uma tag final esquecida pode levar a resultados ou erros inesperados.
Linha Vermelha
Qual é a linha vermelha? Por definição, esta é a linha de abertura de um parágrafo que costumava ser destacado em vermelho (daí o título). Antes de a tipografia ser inventada, os livros eram escritos à mão - um capítulo ou parte de um texto, a primeira palavra ou letra era escrita em tinta vermelha. Foi assim que surgiu o conceito de "escrever a partir da linha vermelha" - significa o início de um novo pensamento, capítulo ou parte.
Porém, na hora de criar páginas web, o desenho da linha vermelha raramente é utilizado, apesar de permitir perceber o texto visualmente com muito mais comodidade, o que é muito importante para o leitor tradicional - nem todo mundo se sente confortável lendo o eletrônico versão do texto.
Para adicionar uma linha vermelha aos seus parágrafos, você precisa usar a propriedade CSS text-indent, que permite recuar a primeira frase:
Experimente "
No exemplo acima, a primeira linha de cada parágrafo da página começará com um recuo de 25px. O exemplo abaixo demonstra como você pode definir uma linha vermelha apenas para um parágrafo específico em uma página.
Como em qualquer arte real, não há ninharias nos bons textos, aos quais alguns incluem a linha vermelha, acreditando que seu uso não seja tão importante. No entanto, é preciso entender que qualquer vírgula carrega uma carga estética e semântica, e não é apenas uma homenagem às regras gramaticais - isso também se aplica à formatação.
Experimente "Nota: não é necessário definir o preenchimento para 25px, você pode escolher tamanho ideal próprios recuos, também com a ajuda da propriedade text-indent é possível fazer uma linha sobressaindo do resto do texto, para isso é necessário definir um valor negativo para a propriedade (por exemplo: -30px).
Tarefa
Recue a primeira linha de cada parágrafo.
Solução
Quando você precisa definir um recuo de parágrafo, que também é chamado de linha vermelha, é melhor usar a propriedade de estilo text-indent. Seu valor determina quanto deslocar o texto da primeira linha à direita de posicão inicial... Nesse caso, a largura do bloco de texto não muda e permanece definida inicialmente. A quantidade de indentação pode ser especificada em pixels, porcentagem ou outras unidades disponíveis (exemplo 1).
Exemplo 1. Recuando a primeira linha
HTML5 CSS 2.1 IE Cr Op Sa Fx
O pandemônio babilônico, de acordo com a tradição bíblica, é a tentativa fracassada do rei Nimrod de construir um pilar na Babilônia até o céu. Deus, zangado com as pessoas por seu desejo irresponsável, decidiu punir os construtores: ele misturou a linguagem deles para que eles deixassem de entender uns aos outros, foram obrigados a interromper a construção e, aos poucos, se espalharam pelo mundo. Conseqüentemente, como os antigos explicaram, a diferença nas línguas se originou.
No sentido usual, pandemônio babilônico significa desordem, confusão com uma grande multidão de pessoas.
O resultado deste exemplo é mostrado na Fig. 1
