HTML é a base de praticamente tudo na internet. É a pedra angular sobre a qual se constrói o conteúdo da internet, e foi-o durante décadas. Sem uma compreensão sólida de HTML, tudo o que você faz com WordPress ou qualquer outro web design e desenvolvimento será atrofiado. Sorte para você, há uma série de códigos HTML básicos que todos os usuários WordPress de iniciante para veterano usa em uma base quase diária. Vamos deitá-los abaixo e pôr-te ao corrente.
Subscreva o nosso canal do Youtube
o que é HTML?
aqui está a versão rápida: HTML significa Linguagem de marcação de hipertexto, o que significa que não é bem uma linguagem de programação. HTML não ordena ao seu computador para executar as coisas através do script. Em vez disso, ele pega o texto que você tem em sua página,e marca-lo. Itálico, negrito, alinhamento, tamanho, e assim por diante. HTML também lhe dá a capacidade de incluir imagens e links, e com HTML5, a versão mais recente os manipula e o texto de novas maneiras emocionantes.
o código HTML está contido dentro das bandeiras e é muito fácil de ler. Uma página HTML simples pode parecer algo assim:
quando renderizado em um navegador, que seria parecido com este:
como podem ver, HTML não é assim tão confuso. De fato, mesmo que você nunca tenha visto nenhum código HTML antes, eu aposto que você pode descobrir o que cada uma dessas tags significa apenas pelo contexto. Com isso fora do caminho, vamos olhar para os códigos HTML mais comuns, básicos que você vai usar ao longo de sua carreira na web.
Bold
quando você embrulha o seu texto nas etiquetas <strong >, você está a dizer ao navegador para negrito o texto. Você pode também usar simplesmente <b>, também, porém, com o Google e outros motores de busca, tendo uma preferência por semântico de codificação, você está mais seguro com <forte>
You can make <strong>text bold</strong> by using this tag.
Itálico
<Em> representa a ênfase, e é a semântica maneira de usar itálico no HTML. Você também pode usar < i > para fazê-lo.
You can put <em>text in italics<em> by using this tag.
Sublinhado
O mesmo vale para <u> e sublinhado. Em geral, este tem muito pouco uso, porque os links são sublinhados e texto sublinhado que você não pode clicar dá uma má experiência de usuário.
You can <u>underline</u> by using this tag.
posições
não se esqueça de os utilizar por ordem hierárquica. O Google quer que você anote títulos, então certifique-se de usar <h2> apenas abaixo <h1>, Não abaixo <h3>.
embora a maioria das páginas tenha apenas um único <h1>, o Google já não o penaliza por ter mais. Apenas tenha em mente que usando um <h1 > reinicia o seu ninho para a página (ou pelo menos essa seção da página).
<h2>H2 is the most commonly used header tag.</h2>
todos os cabeçalhos para elementos HTML nesta página são h2.
imagem
inserir imagens é uma das coisas mais úteis que o HTML faz. Ele quebrou a internet de seus estilos brutalistas e na estrada para onde está hoje. Tudo o que você precisa fazer é ter o URL da imagem que você deseja, e colocar um único <img src> (em pé para a tag fonte da imagem. Assim.:
<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">
Note que você não precisa fechar a marca da imagem, e as aspas não são necessárias para que a imagem seja exibida. Muitas pessoas ainda as usam para tornar o código mais legível.
o atributo<alt > é o texto que aparece para fins de acessibilidade, e também é indexado por motores de busca. Para pessoas com leitores de tela e outros dispositivos, o texto alt é absolutamente necessário para usar a internet. É sempre uma boa prática ter texto alternativo para suas imagens.
Links
Ok. Link. Há muita coisa a acontecer com os links. Ou melhor, há muito que se pode fazer com links. No seu mais básico, você vai colocá-lo junto com um <uma href> tag. O <a > indica que é uma ligação, e o <href> é literalmente a referência hipertexto (a URL) para onde você está ligando.
<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>
você vai fechar o código de ligação com simplesmente um </a>, e você pode usar qualquer texto que quiser entre lá. Esse será o link clicável em si e é chamado texto âncora.
aparece na página assim: um link para a nossa página Divi, e este é o texto âncora.
adicionalmente, Você também pode aninhar o código HTML. Você pode tornar uma imagem clicável inserindo uma etiqueta <img src > entre as bandeiras do link.
<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>
Você pode ver como uma imagem clicável do link processa aqui:
Link Mais Atributos de
Você pode também incluir-se bastante alguns atributos diferentes para links para que eles se comportam de determinadas maneiras (tal como esconder seus URL de ser uma referência ou para abrir o link em uma nova janela). Alguns dos mais úteis para você serão
- rel indica algum tipo de relação para o link e seu alvo. Como noreferrer para evitar que o tráfego de encaminhamento seja rastreado até você.
- o alvo diz ao navegador onde abrir a ligação: O _blank irá abri-lo numa página em branco, por exemplo.
- nofollow vai junto com rel e diz aos motores de busca que você não quer passar qualquer suco link para o site alvo. Isto é bom quando se liga a conteúdos controversos e assim por diante. Ele também impede as pessoas de spamming links em seus comentários, e faz com que o seu conteúdo possa ser visto como imparcial, uma vez que você não está fornecendo nenhum bônus para ser destaque, além de exposição e descobertas click.
existem mais, mas estes são os que você provavelmente verá mais frequentemente.
Strikethrough Text
If you’re like me, sometimes you need to make a joke using stricken-out words. Ou talvez você precise marcar as coisas de uma lista (ou excluir, como o próprio código diz). Ou qualquer outra coisa para a qual precisasse de ter uma linha a correr através de texto.
é quando você usa <del > em torno do texto que você quer atingir. Para algumas pessoas, este é um código incrivelmente comum, enquanto outros podem nunca usá-lo. Seja como for, é fácil de lembrar.
You can use <del>this code</del> for strikethrough text in HTML.
Lists
Lists are another major part of web content these days. Não só lhe dão toneladas de espaço branco e quebram paredes de texto, mas também o deixam organizar seus pensamentos em pedaços digeríveis.
existem dois tipos de listas que você pode fazer com códigos HTML básicos. Listas ordenadas que são numeradas 1, 2, 3 e assim por diante. Listas não ordenadas usam balas ou símbolos (dependendo do design do seu site) em vez de números.
enrola cada lista com <ul > ou <ol > para listas não ordenadas ou não respectivamente. E cada item da lista deve ser embrulhado em < li >.
e estes códigos mostram a diferença:
- isto faz parte de uma lista não ordenada.
- isto também é.
- e foi assim que montou uma lista ordenada.
- este é um link em uma lista.
- e este texto de ligação é negrito, mas esta parte não é.
Você também pode aninhar outros códigos nas listas. Então você pode negrito texto, inserir links, e assim por diante.
citações em bloco
você vai, em algum momento da sua carreira WordPress, precisa citar o site de outra pessoa. É aí que entra o bloco “blockquote” <de 1884. Basta rodear qualquer texto que copie / cole (e atributo) com <blockquote> abrir e fechar etiquetas, e você está pronto para ir.
<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>
isto é o que ele vai parecer em uma página:
este texto irá aparecer com estilo especial para indicar que é uma citação.
parágrafos
o parágrafo HTML é um pouco estranho. Dependendo do CMS e do construtor que estiver a usar, poderá tornar automaticamente cada quebra de linha como um parágrafo separado. WordPress faz isso quando você digita em HTML. No entanto, nem tudo faz isso. Assim, se você precisar manter seus parágrafos separados e não ter uma parede de texto, enrole cada um em <p >. O navegador saberá então mostrar cada bloco de texto como um parágrafo separado em vez de um bloco contínuo. Por padrão, os navegadores ignoram quebras de linha, a menos que seja dito o contrário.
<p>This is my first paragraph.</p><p>This is my second paragraph.</p>
linhas e quebras de linha
pode querer outras separações entre os seus parágrafos e secções. É quando você pode usar as etiquetas <hr> e <br/>.
<hr > insere uma linha separadora onde quer que esteja. Muitas pessoas usam isso para separar widgets em uma barra lateral ou grandes seções de uma página web.
a etiqueta<br/ > é uma quebra de linha. Você pode usar o < br / >no meio de um < p> para quebrar uma linha sem entrar em um novo parágrafo (para o estilo de bloco e pela organização). < br / > é uma tag de self-closing, o que significa que nenhum conteúdo pode estar dentro dela. Isto é indicado pela barra no final do Código.
enquanto você pode usá-lo para quebrar o texto e parágrafos, inserindo-os onde você quer pausas, isso não é uma boa prática para entrar, e como você ficar mais avançado com HTML, CSS e JavaScript, você terá que direcionar o elemento parágrafo para fazer certas coisas. Você pode ler mais sobre a distinção aqui.
encerrar
HTML é absolutamente necessário para interagir com a internet. Todos os usam da mesma forma, quer você esteja começando no desenvolvimento e design da web ou um veterano dos dias antes do JavaScript ser uma coisa. Ainda estamos usando os códigos HTML básicos para executar as fundações de todos os nossos sites. Não importa o quão extravagante o site é ou quão avançadas suas características, quando um link quebra ou as coisas são ousadas que não deveria ser, você ainda vai estar cavando ao redor para ver se o <a href> ou <forte> tags estão fazendo bem.
quais são os seus códigos HTML básicos mais usados hoje em dia?
artigo apresentado imagem por enterlinedesign /. com