Arquivo de HTML - Fazendo Web Sites

O que um desenvolvedor web precisa saber?

Como se tornar um webdeveloper

A tecnologia desempenha um papel importante em nossas vidas diárias, desde os aplicativos mais simples até as invenções mais inovadoras. Cada site ou software que encontramos foi construído por um desenvolvedor da web – mas o que exatamente é desenvolvimento da web (desenvolvedor web) e o que eles fazem?

Esta é a resposta simples para esta pergunta: eles constroem e mantêm sites.

Em outras palavras – eles literalmente criam como você experimenta a web. Os sites que desejam que os usuários desfrutem de sua experiência precisam de grandes desenvolvedores da web – e geralmente estão dispostos a desembolsar muito dinheiro para conseguir esses grandes desenvolvedores da web.

Responsabilidades de um desenvolvedor web :

Escrever páginas da web com uma combinação de linguagens de marcação.
Criar maquetes e protótipos de qualidade.
Dominar o WordPress.
Compreenda HTML e CMS .
Dominar o JavaScript e sua usabilidade.
Desenvolver sites e aplicativos baseados na web funcionais e atraentes.
Fornece manutenção e melhorias do site.

Os computadores não entendem as linguagens humanas e é por isso que você precisa falar com o seu sistema com as linguagens de programação. No desenvolvimento web, as linguagens de programação são obrigatórias para aprender e todas as lógicas que você pode aplicar usando uma ampla gama de linguagens de programação. Os desenvolvedores da Web usam uma variedade de linguagens como PHP, Python, Java, Ruby e recentemente Javascript também dando concorrência se apresentando para lidar com a parte de back-end. Como desenvolvedor da web, você deve ter conhecimento de pelo menos uma linguagem de programação para construir seu aplicativo da web.

Qual é a perspectiva de carreira para desenvolvedores da web?

Se você aprender o que os desenvolvedores da web fazem o deixa animado com a ideia de se tornar um, você ficará feliz em saber que as posições para esses profissionais estão crescendo. Os empregos de desenvolvimento web devem aumentar 13% até 2030.

Algumas excelentes razões para você se tornar um Web Designer

O número de pessoas com acesso à internet só cresce a cada ano em todo mundo e principalmente aqui no Brasil, por isso as empresas necessitam marcar presença online, as empresas precisam ter um site, uma página no facebook, uma conta no instagram, etc.

O relacionamento com o cliente mudou graças à internet e das redes sociais devido a isso nenhuma empresa pode se dar o luxo de não marcar presença online, logo as oportunidades para quem trabalha com design web e com internet em geral aumentaram bastante.

Então hoje em dia você pode trabalhar de diversas formas, você pode trabalhar para alguma empresa de tecnologia, você pode trabalhar para agências, pode trabalhar em casa, ou até mesmo numa empresa que não seja necessariamente de tecnologia, mas que precisa ter um site e os canais nas redes sociais.

O mercado para desenvolvedores web e webdesigners não para de crescer.

A facilidade de estudar é muito grande, você encontra muito material na web, vídeos, blogs, vídeo-aulas gratuitas e bons cursos pagos.

As vendas online também aumentam a cada dia, as pessoas estão se acostumando cada dia mais a comprar pela internet, então isso é mais um motivo para as empresas precisarem de um profissional especialista em web, para desenvolver e manter uma plataforma de comércio eletrônico na internet.

O marketing digital é um método de marketing da era moderna e tem várias razões por trás de seu rápido crescimento.

O marketing digital passou de uma opção incerta para servir como plataforma principal para a maioria das empresas e organizações. O crescimento da promoção digital continua crescendo em dois dígitos todos os anos.

Se você for um bom webdesigner e tiver conhecimentos na área de marketing digital, você terá emprego garantido.

O marketing digital tem modernas técnicas promocionais, efeitos e benefícios.

Técnicas básicas de marketing digital: marketing de conteúdo, marketing de mídia social, otimização de mecanismos de pesquisa, marketing móvel, otimização de página de destino, pagamento por clique, criação de comunidades e foco no redirecionamento.

Ser um web designer permite que você não apenas trabalhe com sites todos os dias, mas também para moldar a forma como as pessoas interagem com a web. Além disso, nos dias de hoje, a primeira impressão de um cliente de uma empresa é muitas vezes através de seu site, em vez de materiais impressos, como cartões de visita ou correspondências de marketing por correio.

Se você é criativo, preste atenção aos detalhes e tenha um olho para o design, bem como uma aptidão para desenvolver ótimas experiências de usuário, não há limite para o que você pode fazer. Cada cliente tem suas necessidades específicas e seus negócios são diferentes, portanto, cada site é um site.

Como um web designer, os recursos que você pode criar para seus clientes normalmente são limitados apenas por sua própria capacidade e imaginação, oferecendo excelentes oportunidades para constantemente criar algo novo e pouco ou nenhum tempo para ficar entediado.

Você pode ser seu próprio patrão, além de cumprir os prazos do cliente e trabalhar dentro dos parâmetros do projeto que você e seus clientes estabelecem juntos, o resto é com você. Embora alguns web designers trabalhem para empresas maiores, que muitas vezes fornecem marketing e outras soluções de negócios relacionadas, muitos são autônomos ou terceirizados.

Aqueles que voam sozinhos amam a flexibilidade e o potencial de ganhos que oferece. Embora ser seu chefe exija disciplina, consistência e esforço significativos, ele também pode ser muito gratificante. Para aqueles que não gostam de trabalhar de segunda a sexta-feira em um ambiente tradicional de escritório, o design de sites freelance oferece flexibilidade e adaptabilidade que não são encontradas em outras carreiras.

As principais tags do HTML 5 e suas definições

<article> Define um artigo em um documento

<aside> Define conteúdo além do conteúdo da página

<bdi> Isola uma parte do texto que pode ser formatado em uma direção diferente de outro texto fora dele

<details> Define detalhes adicionais que o usuário pode ver ou ocultar

<dialog> Define uma caixa de diálogo ou janela

<figcaption> Define uma legenda para um elemento

<figure> Define conteúdo auto-contido

<footer> Define um rodapé para um documento ou seção

<header> Define um cabeçalho para um documento ou seção

<main> Define o conteúdo principal de um documento

<mark> Define texto marcado / realçado

<meter> Define uma medida escalar dentro de um intervalo conhecido (um
medidor)

<nav> Define os links de navegação

<progress> Representa o progresso de uma tarefa

<rp> Define o que mostrar em navegadores que não suportam anotações em ruby

<rt> Define uma explicação / pronúncia de caracteres (para tipografia do leste asiático)

<ruby> Define uma anotação rubi (para tipografia do leste asiático)

<section> Define uma seção em um documento

<summary> Define um título visível para um elemento <details>

<time> Define uma data / hora

<wbr> Define uma possível quebra de linha

Anatomia de uma página HTML

WordPress

WordPress é um sistema livre e aberto de gestão de conteúdo para internet (do inglês: Content Management System – CMS), baseado em PHP com banco de dados MySQL, executado em um servidor interpretador, voltado principalmente para a criação de páginas eletrônicas (sites) e blogs online. Criado a partir do extinto b2/cafelog, por Ryan Boren e Matthew Mullenweg, e distribuído gratuitamente sob a GNU General Public License.

É uma das ferramentas mais utilizadas para conteúdo na web, disputando com o serviço do Google, chamado Blogger. No entanto, o WordPress é adotado por aqueles que queiram uma página com maior personalização e recursos diferenciais.

A popularização deste sistema é devido, entre outras, seu tipo de licença (de código aberto), facilidade de uso e, a versatilidade. Também é possível desenvolver sites de tipo comércio eletrônico, revistas, portfólio, gerenciador de projeto, agregador de eventos e, outros conteúdos devido a sua capacidade de extensão através de plugins, temas e programação PHP.

Vantagens do WordPress

As vantagens em utilizar o WordPress como plataforma para o seu site ou blog são muitas e é possível que pessoas diferentes apontem vantagens distintas. Isso acontece porque a ferramenta é extremamente versátil e pode ser adaptada para uma infinidade de propósitos, desde um simples blog até uma loja online com muitos produtos.

Recursos do WordPress

Como veremos daqui a pouco, os recursos do WordPress podem ser (bastante) ampliados através da instalação de plugins e temas. Apesar disso, os recursos básicos da plataforma, aqueles que vêm instalados por padrão, já são suficientes para se fazer muita coisa. Dentre os recursos nativos da ferramenta, podemos destacar: Editor

Biblioteca de mídia com recursos para edição simples de imagens (ex.: recorte e giro);
Gerenciador de comentários com moderação incluída por padrão;
Editor de aparência do site, onde é possível editar diversos itens do template, como cores, marca e menus*;
Editor de widgets;
Editor de páginas e posts com recursos avançados de formatação de textos;

O que é HTML?

HTML é um acrônimo para HyperText Markup Language, que em português quer dizer linguagem de marcação de hipertexto. Se trata de uma linguagem de marcação que usamos para publicarmos conteúdo (texto, imagem, vídeo, áudio e etc) na Web.

Serve para que o navegador o interprete, informando-o como estruturar a página web, e exiba seu conteúdo quando você acessa essa página pela internet.

O HTML integra as linguagens que formam as camadas de desenvolvimento web

Quando acessamos uma página web a interface resultante, em grande parte dos casos, é obtida através de 3 camadas com funções diferenciadas. Cada camada é representada por uma linguagem específica.

É importante que você saiba da existência dessas camadas para entender que o HTML não trabalha sozinho. As outras linguagens que formam a camada de desenvolvimento são o CSS e o Javascript. Grande parte das páginas web são formadas por códigos das 3 linguagens.

HTML – A camada que apresenta o conteúdo

Podemos dizer que o HTML é a primeira camada. É nesta camada que atribuímos semântica ao conteúdo. É onde podemos dizer que determinada informação é um parágrafo, que determinado texto é um artigo, etc.

O HTML é responsável por exibir o conteúdo dando-lhe significado.

O HTML é a linguagem base e a primeira que deve ser aprendida.

Ela é tão importante que tanto o CSS quanto o Javascript vinculam em seus códigos elementos, classes ou identificadores HTML para que uma ação seja executa dentro do arquivo HTML.

Entender as camadas de desenvolvimento web te ajudará na compreensão de como as linguagens se relacionam e também como a área de desenvolvimento atribuem as funções entre seus colaboradores.

Quer aprender HTML? Então baixe nosso ebook gratuito clicando aqui.

Formatação de texto com CSS

O texto pode ter características alteradas em CSS que não poderiam ser alteradas em HTML. Podemos citar como exemplo, o espaçamento entre as linhas.
Com o uso do CSS e de suas propriedades, podemos caracterizar textos em qualquer elemento do HTML.

color – Define a cor do texto.
text-ident – Define a distância de recuo do texto no início do parágrafo.
line-height – Define o espaçamento entre as linhas.
text-align – Define o alinhamento do texto, que pode ser ao centro, à direita, à esquerda ou no estilo justificado.
text-decoration – Define a decoraçãao de um texto e é feita com os seguintes valores:
underline (sublinhado), overline (sobrelinhado), line-through (uma linha em cima do texto) e blink (faz piscar o texto).
text-transform – Define uma transformação ao texto, que podem ser as seguintes:
– torná-las todas maiúsculas – uppercase;
– todas minúsculas – lowercase;
– todas as primeiras letras maiúsculas – capitalize.

Vamos criar um exemplo, abre seu editorde texto favoritoe digite o código abaixo, salve como estilos.css.

h1 {
color: #DDA0DD;
text-decoration: underline;
text-transform: uppercase
}
h2 {
color: #3366FF;
text-decoration: line-through;
text-transform: none
}
p {
text-ident: 1cm;
line-height: 2px;
text-align: center
}

Vamos agora criar a página HTML que vai chamar o arquivo CSS, não esqueça de salvar os dois arquivos no mesmo diretório.

<html>
<head>
<title> Bem-vindo! </title>
<link rel= “stylesheet” type= “text/css” href= “estilo.css” />
</head>
<body>
<h1> Textos </h1>
<h2> Formatando textos em CSS</h2>
<p>Exemplos de formatação de texto em CSS e HTML</p>
</body>
</html>

Estrutura básica de uma página HTML para iniciantes

Iniciando o código básico de HTML

O documento HTML sempre inicia com o que chamamos de estrutura básica. Esta estrutura é quase que imutável. Sempre será dessa forma e você sempre, sempre começará seu HTML começando por esse código. Geralmente os editores como o Sublime Text já tem atalhos para iniciar os documentos HTMLs com essa estrutura, logo, você não precisa se preocupar em decorá-la, mas é bom que faça. Veja abaixo como ela se inicia:

<!DOCTYPE html>
<html lang=“pt-br”>
<head>
<title>Título da página</title>
<meta charset=“utf-8”>
</head>
<body>
Aqui vai o código HTML que fará seu site aparecer.
</body>
</html>

É possível compreender o documento em HTML de uma maneira muito simples, através de uma divisão de blocos das tags essenciais, conforme a a seguinte estrutura:

Definição do documento (doctype)
Cabeça (head)
Corpo (body)

Doctype – Definindo o documento

Uma coisa importante: SEMPRE deve existir o doctype, que é este código <!DOCTYPE html>.

O doctype não é uma tag HTML, mas uma instrução para o navegador e outros programas que podem ler seu site, que o código encontrado ali é um código HTML. Assim eles sabem o que fazer para mostrar seu site da melhor forma possível. Lembre-se: o doctype é OBRIGATÓRIO e deve ser sempre a PRIMEIRA LINHA do seu documento.

HEAD

Contém informações que não são transpostas visivelmente para o usuário/leitor do documento. São dados implícitos, de uso e controle do documento: vinculação com outros arquivos, aplicação de lógica de programação de scripts e metadados. Na prática, todo o conteúdo do cabeçalho fica delimitado entre a abertura e fechamento tag head.

BODY

Trata-se do documento em si, ou seja, a informação legível para o usuário/leitor do documento. É todo e qualquer texto que se deseja apresentar, assim como toda e qualquer forma de mídia de saída (imagens, sons, miniaplicativos embutidos, conteúdo multimídia, etc). Além disso, toda a apresentação de entrada de dados (formulários) também se aplica neste seção do documento. Na prática, o corpo do documento é delimitado pelo par de tags <body> e </body>.

Este é o preceito básico que deve estar muito bem claro para você: onde as marcações se aplicam, e quais são os resultados deste modelo. Por exemplo: se vocês deseja informar conteúdo textual para saída legível ao usuário do seu sistema web, esta marcação deverá obrigatoriamente estar no bloco do corpo da página. Ainda: para definir qual o tipo de codificação da página (uma meta informação do documento), esta deve obrigatoriamente estar marcada no cabeçalho do mesmo documento.

Dentro do elemento BODY sua estrutura de página terá os elementos semânticos da construção da sua página, onde serão declarados e identificados cabeçalhos, rodapé, conteúdo principal, etc.