Códigos HTML Básicos para Páginas Web
Códigos HTML Básicos para Páginas Web
Durante o processo de criação do seu site, você pode ter se deparado com termos na Internet, como
editor HTML, código HTML ou tags HTML.
Embora a maioria das plataformas de construção de sites (como WordPress) sejam bastante fáceis de
usar e não exijam amplo conhecimento técnico, aprender mais sobre HTML ajudará você a entender os
conceitos de programação e a prepará-lo para quando chegar a hora de modificar ou melhorar a
aparência de sua plataforma. site.
Por isso, nesta ocasião partilhamos consigo algumas noções básicas sobre o assunto, bem como os 10
códigos HTML que deve conhecer, acompanhados de exemplos para que aprenda a utilizá-los.
O que é HTML?
A sigla HTML vem de “Hyper Text Markup Language”.
Os códigos HTML são a linguagem universal usada para criar e formatar sites. Funcionam em qualquer
sistema operacional (Windows, Mac, Linux, etc.) e com qualquer navegador (Chrome, Explorer ou
Mozilla).
Embora não seja uma linguagem de programação muito sofisticada, saber lidar com HTML permite
inserir outros códigos mais poderosos, como Javascript, por exemplo. Agora vamos dar uma olhada no
elemento básico da sintaxe HTML: tags.
Etiquetas HTML
A linguagem HTML é composta por um sistema de tags seriais ou tags, que incluem instruções que
os navegadores traduzem como:
Imagens
Texto
Hiperlinks
Listas de palavras
Tabelas, etc.
Assim, para que um elemento deste tipo seja lido, a tag deve ter duas partes: uma tag inicial
(<etiqueta> ) e um de fechamento (</etiqueta> ) entre hífens (< >).
Por exemplo, rótulos <strong>e</strong> defina texto em negrito. Se em nosso documento HTML
escrevermos uma frase com o seguinte código:
O resultado será:
Como você certamente já percebeu, a tag inicial serve para definir o comportamento do conteúdo (por
exemplo, se um texto ficará em negrito ou se terá um tamanho específico), e a tag de fechamento
informa ao navegador até que ponto esse comportamento deve ir. Para construir os “fechamentos”
basta adicionar uma barra (/) no início da tag.
Quando você tiver que criar um site completo, o uso de documentos HTML permitirá que você tenha
todos os códigos que vai usar em cada página organizados em um só lugar. Você pode preparar este
documento no editor de texto de sua preferência (Microsoft Word ou o mesmo bloco de notas),
bastando apenas salvá-lo como .html ou outro formato web (é um documento para cada página).
Agora, um documento HTML bem elaborado possui quatro tags essenciais para que o conteúdo seja
distribuído corretamente. Estes são:
1. HTML
<html>está no início de um documento HTML e informa aos navegadores que a página possui código
HTML para que possa ser lida dessa forma. Seguindo a sintaxe da linguagem, a tag de
fechamento</html> Será o último elemento do documento.
2. Cabeçalho
<head>é a tag usada para o cabeçalho da página. Sua principal função é conter todas as informações
sobre o funcionamento do site. Por isso, é um código criptografado que as pessoas que entram na
página não conseguem ver.
3. Título da página
<title>é a tag que dá um nome ao seu site para que os usuários possam identificá-lo. É o título que você
pode ver nas abas do navegador.
4. Corpo
<body>é a tag que contém todos os elementos individuais do site. Ou dito de outra forma, inclui todo o
conteúdo visível do site. Aqui você pode inserir textos, imagens, vídeos ou qualquer outra
funcionalidade que queira exibir.
<html>
<head>
</head>
<body>
</body>
</html>
Se você criar um documento .html com este código e abri-lo em seu navegador, verá algo assim:
Com as quatro tags anteriores você já tem o “esqueleto” do seu site. A próxima tarefa seria inserir
texto (entre as tags<body> e</body> ) e controle seus rótulos. Vejamos os mais básicos.
5. Títulos e legendas
<h1><h2>…<h6> São tags que funcionam para adicionar títulos e subtítulos no corpo do texto, o que
ajuda a priorizar as informações. A propósito, recomendamos usar a tag H1 apenas uma vez no
conteúdo.
Exemplo:
<h4>Esta é uma tag H4. Eles não são usados com muita frequência.</h4>
Resultado:
6. Parágrafos
Os rótulos<p> e<br> Eles o ajudarão a organizar o texto em parágrafos e quebras de linha.
Exemplo:
<p>Seu primeiro parágrafo.</p>
<p>Uma declaração.<br>
Resultado:
7. Imagens
<img>Com esta tag você pode adicionar imagens ao corpo da sua página. Combiná-lo com o atributo
src permitirá que você especifique o local onde a imagem está localizada, e o atributo alt ajudará você a
dar um título a essa imagem para que mecanismos de pesquisa como o Google possam lê-la.
A estrutura dos atributos é a seguinte: primeiro vem a palavra ou abreviatura que o define (neste caso
src é uma abreviatura de “fonte”), depois o sinal de igual (=) e por último o modificador de atributo entre
aspas duplas (. “_”) ou simples ('_').
Exemplo:
<img src="https://images.unsplash.com/photo-1535378917042-10a22c95931a">
Resultado:
8. Hiperlinks
<a>permite inserir um hiperlink para a página.</a> Por exemplo, o link para suas redes sociais ou para
outro site com o qual deseja conectar sua página.
Exemplo:
Resultado:
Como você deve ter notado, o atributo usado aqui foi href.
9. Listas e índices
<ol>Usado para adicionar listas numeradas e<ul> para adicionar marcadores, que melhoram a
legibilidade dos seus textos.
Exemplo:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
Resultado:
10. Estilo
Embora geralmente esteja localizado dentro da etiqueta<head> , com o atributo<style> puedes definir el
estilo de tu contenido en términos de:
Cor
Tamanho da fonte
Tipografia, etc
Exemplo:
Resultado:
Dica bônus: confiar em códigos HTML de outros sites pode ajudá-lo a entender mais sobre web
design. Eles estão disponíveis a qualquer momento clicando com o botão direito em algum lugar em
branco e selecionando “Exibir código-fonte da página”.
Esperamos que este artigo tenha despertado sua curiosidade para experimentar mais o funcionamento
desses códigos, para que você não perca nenhum detalhe ao começar a formatar suas páginas web.
Lembre-se de que a prática leva à perfeição.
Se linguagem de computador não é sua praia… não se preocupe! Para isso, existem ferramentas como
o construtor de sites GoDaddy, onde você pode fazer seu site do zero e sem a necessidade de ter
conhecimentos prévios de programação.
Ações
Fechar
O problema é saber por onde começar. Qualquer um pode saber escrever uma
linha simples de HTML, mas criar um site funcional que as pessoas usem é mais
complexo. As inúmeras regras de desenvolvimento web também são um pouco
mais desafiadoras.
Índice
É preciso muito trabalho, mas tudo se junta peça por peça para criar um site
funcional.
Você quer trabalhar com desenvolvimento web... mas não sabe por
onde começar? 😅 Este post contém as melhores plataformas de
aprendizagem online, ferramentas de desenvolvimento web e
informações profissionais que você precisa ⬇️CLIQUE PARA TWEET
Mas, em geral, essas são as tarefas mais básicas pelas quais você será
responsável.
Isso não quer dizer que o trabalho nem sempre seja desafiador, mas os
fundamentos são aprendidos muito rapidamente (e muitos desenvolvedores
gostam do desafio!).
Você pode verificar o que escrevemos sobre o salário médio do desenvolvedor web,
salário do desenvolvedor front-end, salário do desenvolvedor back-end, bem como
desenvolvedores PHP e desenvolvedores WordPress.
Mas o consenso é que o desenvolvedor médio ganha entre US$ 60.000 e US$
75.000 por ano.
Quanto à procura, o Bureau of Labor dos Estados Unidos prevê que a procura por
web designers e desenvolvedores crescerá 8% entre 2019 e 2029. Para referência,
isso é o dobro do que a maioria das ocupações deverá crescer em média.
Bureau of Labor Statistics dos EUA sobre aumento de oportunidades de emprego
para desenvolvedores da Web
Por se tratar de uma área muito técnica e com muito espaço para auto-estudo, é
mais importante que você saiba fazer o trabalho do que estar certificado para
fazê-lo. Dito isto, um diploma tornará tudo mais fácil para você desde o início.
Informações
Esses são os três principais, mas você pode se especializar ainda mais se
tornando um engenheiro web, especialista em segurança, desenvolvedor
WordPress, desenvolvedor web móvel, desenvolvedor de aplicativos web, etc.
Se você não for para a faculdade, tentará obter uma certificação? Com ou sem
certificação, você vai fazer um curso online pago ou gratuito? Ou você vai
aprender sozinho usando apenas recursos online?
Assine agora
Uma vez decidido, você terá que escolher uma especialização (frontend,
backend, full-stack, etc.). Você pode adiar isso enquanto experimenta diferentes
aspectos do desenvolvimento web, mas precisa escolher antes de prosseguir
com um estudo limitado.
Tudo isso pode vir em uma ordem diferente. Você pode optar por se especializar
ou já saber quais idiomas deseja aprender e então selecionar um curso
adequado.
1. StackOverflow
StackOverflow
2. Escolas W3
Escolas W3
W3Schools é um ótimo recurso para iniciantes que irá guiá-lo através dos
fundamentos de várias linguagens e padrões da web. É super fácil de entender,
mesmo se você não estiver acostumado com codificação.
3. Codecademia
Codecademia
Se você precisa de um curso para iniciantes que ofereça mais de uma dezena de
linguagens e tecnologias, Codecademy é o lugar certo. E melhor ainda, a maior
parte do conteúdo é gratuita. Embora existam recursos premium, os cursos em si
são totalmente gratuitos.
4.Udemy
Udemy
6. DevKinsta
DevKinsta
7. FreeCodeCamp
FreeCodeCamp
Quer aprender como codificar e obter um certificado ao fazê-lo? Ao contrário da
Codecademy, o FreeCodeCamp é 100% gratuito, pois é uma organização sem fins
lucrativos. Estima-se que cada caminho de certificação leve cerca de 300 horas e
você pode escolher entre uma variedade de habilidades diferentes para
aprender.
8. DevDocs
DevDocs
Treehouse é um recurso útil para iniciantes que visa ensinar desenvolvimento web
e outros fundamentos do zero. A plataforma de aprendizagem baseada em vídeo
também inclui desafios interativos. Embora seja um serviço premium, é um
excelente ponto de partida para desenvolvedores.
10. Curso
Curso
11. Egghead.io
Egghead.io
Embora não seja uma série de cursos, CSS-Tricks oferece artigos de alta qualidade
sobre desenvolvimento web frontend. Se você deseja dominar Javascript ou CSS,
há muito material de leitura e artigos de instruções aqui.
13. Udacidade
Udacidade
Udacity é um provedor de cursos online pagos com foco em tecnologia. Junto com
o desenvolvimento web, você pode fazer aulas altamente especializadas, como
segurança cibernética, ciência de dados, negócios e muito mais.
Existem muitos bootcamps de codificação online, mas você pode começar com
HackReactor, FullstackAcademy e
CodeSmithhttps://codesmith.io/https://www.fullstackacademy.com/online-coding-
bootcamp.
E se você optou por trabalhar por conta própria? Seu primeiro passo deve ser criar
um site que servirá como seu portfólio online. Mas os clientes não virão até você,
você terá que procurá-los.
Sites como o Upwork podem ser um bom ponto de partida quando você precisa
ganhar algum dinheiro, mas o salário geralmente não é alto.
Resumo
O desenvolvimento web é uma ótima opção para pessoas que gostam de
experimentar novas habilidades e estão preparadas para aprender com as
próprias mãos. Esses recursos de desenvolvimento web são tudo que você
precisa para começar, e muitos deles continuarão a ajudá-lo à medida que você
se torna um desenvolvedor mais proficiente.
Tudo isto e muito mais, num plano sem contratos de longo prazo, migrações
assistidas e garantia de devolução do dinheiro em 30 dias. Conheça nossos planos
ou fale com o departamento comercial para encontrar o plano mais adequado para
você.