Módulo 2

Prévia do material em texto

CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 1 
 
HTML 5 RESPONSIVO PASSO A PASSO 
 
 
 
 
 
 
 
HTML 5 Responsivo 
 
 
 
Criando Sites Responsivos Com HTML5 do Zero 
MóduloMóduloMóduloMódulo 2 2 2 2 –––– Começando com HTML 5Começando com HTML 5Começando com HTML 5Começando com HTML 5 
 
 
 
 
Autores: 
Caique Zaneti Kirilo 
Luiz Carlos Machi Lozano 
 
 
 
 
 
SÃO PAULO, 2020 
 
 
CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 2 
 
HTML 5 RESPONSIVO PASSO A PASSO 
Agora que já conhecemos um pouco da história que engloba a tecnologia que 
estamos trabalhando, temos propriedade suficiente para aprender os primeiros 
passos no desenvolvimento web. 
Abaixo existe um passo a passo de como ter seu primeiro contato com a 
linguagem de forma didática e eficaz para o aprendizado, acomode-se 
confortavelmente em frente ao seu computador e siga os passos tomando nota 
das explicações se necessário. 
 
Passo 1 – Editores de Texto 
É fundamental escolhermos a IDE que iremos trabalhar no desenvolvimento de 
nossas habilidades, por mais que seja possível utilizar apenas o bloco de notas 
do Windows não é recomendável, pois existe uma grande possibilidade de erros 
inadvertidos aparecerem e passarem despercebidos. 
Existe uma gama enorme de IDEs (interfaces de desenvolvimento), mas vamos 
listar abaixo as mais utilizadas no mercado e você se enquadrará na que melhor 
se adaptar 
1 – Notepad++ 
O Notepad++ é um ótimo editor de código, simples e leve, cumpre o que promete 
de maneira rápida e o melhor de tudo... é uma ferramenta gratuita! 
 
 
 
CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 3 
 
HTML 5 RESPONSIVO PASSO A PASSO 
 
 
2 – Sublime 
O sublime é outro editor de texto muito utilizado no mercado, é completíssima e 
cheia de recursos que facilitam na hora de codar, a sua única “desvantagem” é 
que sua licença custa $80, um preço justo comparado com sua potência. 
 
 
 
 
CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 4 
 
HTML 5 RESPONSIVO PASSO A PASSO 
 
 
3 – VS Code 
O Vs code é uma versão mais leve do Visual Studio da Microsoft voltado para o 
desenvolvimento web, rápido e eficiente, tem conexão direta com o Github que 
é outra ferramenta muito poderosa de desenvolvimento e de versionamento. 
 
 
 
CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 5 
 
HTML 5 RESPONSIVO PASSO A PASSO 
 
 
Passo 2 – Personalizando o Editor 
Agora que você já escolheu sua IDE, vamos começar a trabalhar em cima de sua 
configuração, aqui usaremos o Notepad++, se for de sua preferência você pode mudar o 
tema de claro para escuro com o tema de edição “deep black” que pode ser encontrado na 
aba de configuração. 
 
 
 
 
CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 6 
 
HTML 5 RESPONSIVO PASSO A PASSO 
 
Passo 3 – Criando Novo Arquivo 
Com sua IDE configurada e pronta para o trabalho, chegou a hora de entender o básico 
da estrutura do HTML, para isso vamos detalhadamente acrescentando seus recursos 
principais e explicando sua função, vamos começar com um novo projeto então vamos 
na aba “arquivo” e selecionar a opção “novo” (ou apenas CRTL + N) 
 
 
Passo 4 – Modificando Linguagem de Análise 
Logo após criar um arquivo, vamos dizer a IDE que vamos trabalhar com HTML, para 
isso vamos na aba “linguagem” e vamos selecionar a opção “H” e dentro dela clicar na 
opção HTML. 
 
 
 
CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 7 
 
HTML 5 RESPONSIVO PASSO A PASSO 
 
Passo 5 - DOCTYPE 
Agora já estamos prontos para começar a estruturar nosso código (lembrando que você 
nunca verá nesse livro a palavra “programando” enquanto estivermos falando de HTML 
pois não se trata de uma linguagem de programação e sim uma linguagem de marcação, 
ou seja, não executa comandos lógicos, mas sim apenas alterações visuais sem 
complexidade). Vamos começar com o DOCTYPE, então digite o seguinte comando: 
 
O doctype se trata de uma marcação para o navegador e para outras ferramentas (google, 
por exemplo) entenderem qual tipo de código está sendo usado, no caso ele está dizendo 
“navegador meu consagrado! Escreverei em HTML neste arquivo, suave?” 
 
Passo 6 – TAG 
O HTML é estruturado de maneira hierárquica onde um elemento vai sendo inserido 
dentro de outro elemento e assim sucessivamente, dividindo as tags (as tags são o 
equivalente aos comandos de uma linguagem de programação, mas no html, como dito 
anteriormente, não existem comandos mas pontos de marcação, e esses pontos recebem 
o nome de tag) em blocos de fácil visualização, sendo assim, para efetivamente começar 
a escrever as tags dentro do nosso arquivo nós precisaremos abrir a tag principal, que no 
caso é a 
 
Praticamente todas as tags utilizadas no HTML precisam ser abertas e fechadas, ou seja, 
 e , para diferenciar início de fim é simples, é o mesmo nome da tag só 
que adicionando o “/”. 
Dentro da tag HTML virá todo o resto da estrutura de nosso site, outras tags e elementos, 
mas todas serão “filhas” da tag HTML. 
 
Passo 7 – User-Agents e Atributo lang 
 
 
CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 8 
 
HTML 5 RESPONSIVO PASSO A PASSO 
Para auxiliarmos ainda mais os user-agents (são usuários “robôs” do seu navegador ou 
ferramenta de busca que faz a varredura do conteúdo do seu site, quanto mais aderente 
a eles você estiver, maior é a chance do seu site ser recomendado por eles) nós diremos 
a eles qual a linguagem nativa do documento, ou seja, em qual idioma os leitores desse 
site encontram o conteúdo que nele está disposto, para isso utilizamos o elemento LANG 
dentro da tag HTML, mas é preciso salientar que não é um elemento restrito a tag HTML, 
ou seja, pode ser usado a qualquer momento para indicar trechos do site em outro idioma, 
por exemplo. 
 
 
Passo 8 – TAG 
O HTML pode ser comparado ao corpo humano, pois seus elementos base são cabeça e 
corpo: 
 
imagem 1 - foto de tatuagem baseada em HTML (Housecent, s.d.) 
Ou seja, dentro da cabeça temos vários elementos inteligentes da página, assim como no 
corpo humano, em HTML esses elementos são chamados de Metadados. 
Mas para inserirmos esses dados inteligentes na nossa página precisamos, primeiramente, 
ter uma cabeça, então colocaremos a tag HEAD na nossa página. 
 
 
 
CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 9 
 
HTML 5 RESPONSIVO PASSO A PASSO 
 
 
Passo 9 – METATAG CHARSET 
Agora com uma cabeça nós conseguiremos colocar nossos metadados necessários na 
página com o que chamamos em HTML de Metatag, ou seja, são tags que possuem 
metadados, elas se diferenciam das demais tags pois não necessitam ser fechadas. 
Começaremos com a Metatag Charset. 
 
Essa metatag é responsável por dizer ao navegador quais os tipos da caracteres que a 
página utiliza, ou seja, acentos e pontuação necessária para escrever corretamente em 
português. 
 
Passo 10 – TAG e Salvar Arquivo 
Ainda tratando de elementos especiais da nossa página, vamos agora dar um título para 
nossa página (aquele nome que aparece na aba do navegador) para isso utilizaremos a 
tag TITLE. 
 
 
CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 10 
 
HTML 5 RESPONSIVO PASSO A PASSO 
 
 
Agora para vermos a alteração feita na nossa página, precisamos salvar o arquivo, então 
vá na aba “arquivo” e selecione a opção “salvar como”. 
 
 
Abrirá uma tela onde iremos escolher o local onde o arquivo será salvo, além disso, 
iremos nomeá-lo de “index.html” e selecionar o tipo de arquivo como “Hyper Têxt. 
Markup Language file” 
 
 
 
Note que aparecerá um arquivo que será lido automaticamente pelo seu navegador 
principal que no caso desta máquina é o Chrome. Iremos clicar 2 vezes para abrir o 
arquivo. 
 
 
CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 11 
 
HTML 5 RESPONSIVO PASSO A PASSO 
 
Ao clicarmos descobrimos uma linda página em branco com vários nadas dispostos em 
locais diferentes, mas algo chama a atenção de seus olhos... 
 
Exatamente!Agora sua página tem um título! Além disso, a nível apenas de 
conhecimento para aqueles que estão utilizando Notepad++, note que o disketinho que 
antes era vermelho agora está azul e com o nome do nosso arquivo, sempre que ele estiver 
azul significa que o arquivo está salvo 
 
 E quando estiver vermelho significa que suas alterações não foram salvas 
 
 
Passo 11 – TAG 
Já estamos bem da cabeça por enquanto, vamos partir então para o corpo, utilizando a tag 
BODY. 
 
 
CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 12 
 
HTML 5 RESPONSIVO PASSO A PASSO 
 
Dentro da tag BODY entrarão todos os elementos que o usuário do site 
efetivamente vai visualizar na sua página, como por exemplo textos, tabelas, 
artigos, imagens e etc. 
 
Passo 12 – TAG 
Vamos adicionar nosso primeiro parágrafo, já que estamos fazendo nosso 
primeiro site podemos escrever sobre um assunto interessante. Para isso 
utilizamos a tag p 
 
A tag p é utilizada na criação de parágrafos, ajuda o navegador a entender do 
que se trata exatamente aquele trecho de texto, note que abrimos e fechamos a 
tag na mesma linha, no final das contas o efeito é o mesmo. 
 
Passo 13 –TAG 
O próximo elemento que podemos colocar em nosso site, pensando no futuro, é 
mais um parágrafo associado a um container (um container seria um bloco 
isolado do resto das coisas, assim como em um navio cargueiro existem vários 
containers que levam produtos diferentes) pois quando formos trabalhar com o 
CSS podemos fazer com que cada SPAN tenha sua própria identidade visual. 
 
 
Passo 14 –TAG 
 
 
CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 13 
 
HTML 5 RESPONSIVO PASSO A PASSO 
Se por um acaso for necessário deixar alguma parte do texto em negrito, existe 
a tag STRONG, que faz nada mais, nada menos do que deixar o texto em negrito! 
 
Note que no seu navegador, ao atualizar (ou apertar F5), a palavra “paragrafo” aparece 
em negrito 
 
Passo 15 – TAG 
Caso você precise utilizar do recurso itálico no texto, existe a Tag para 
cumprir essa função. 
 
Note agora no seu navegador que a palavra “primeiro” ficou em itálico! 
 
Note também que durante a produção do código é necessário tomar cuidado com a 
indentação, ou seja, com os espaços que antecedem o código, para que sua visualização 
seja mais bem identificada. 
 
Passo 16 –TAG 
Agora, se tratando de títulos e subtítulos, existe a tag h, ela vai de h1 até h6, 
sendo que o h1 é o título com maior nível hierárquico e o h6 é o menor subtítulo, 
como demonstra o código a seguir (sempre dentro do body). 
 
 
CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 14 
 
HTML 5 RESPONSIVO PASSO A PASSO 
 
 
Ao atualizar seu site no navegador você, provavelmente, terá algo parecido com isso: 
 
 
Passo 17 –TAG 
Por enquanto nosso site ainda não é bonito e muito menos responsivo, mas 
tenha paciência pequeno gafanhoto. 
Um recurso que você pode estar se perguntando é se existe a tecla “Enter” no 
texto, ou seja, pular linhas, e eu fui incumbido da tarefa de dizer a você que sim! 
Temos! E além de tudo é uma tag que não precisa ser fechada!!! Estamos 
falando do BR. 
 
Note a diferença no navegador em comparação com o passo 16. 
 
 
CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 15 
 
HTML 5 RESPONSIVO PASSO A PASSO 
 
Obviamente que quanto mais BRs mais espaço daremos. 
Passo 18 –TAG 
Para melhorar a visualização de nosso texto, podemos utilizar a tag HEADER, 
que por sua vez não deve ser confundida com o HEAD, pois sua função é 
completamente diferente. O HEADER nada mais é do que um cabeçalho que 
antecede um texto, formulário etc. Utiliza-lo deixa o código limpo e eficiente, 
lembrando que ele se situa dentro do . 
 
 
Passo 19 –TAG 
Para dividir nosso texto em seções bem definidas existe o elemento SECTION que 
representa uma seção dentro de um documento. Por exemplo, uma parte de um texto que 
irá ter outras etapas posteriormente. Comumente é colocado um título dentro da seção 
para diferencia-la das outras. 
 
Ele é mais um elemento que visualmente não tem efeitos palpáveis, mas que dentro do 
código serve para organização e auxilia os user-agents com relação ao conteúdo. 
 
Passo 20 –TAG 
 
 
CAIQUE ZANETI KIRILO & LUIZ MACHI LOZANO 16 
 
HTML 5 RESPONSIVO PASSO A PASSO 
Utilizamos o elemento ARTICLE na hora de elaborar algum conteúdo que não 
precisa ter ligação direta com outro para fazer sentido em um documento HTML, 
como por exemplo um artigo de blog, uma postagem em rede social etc. 
 
Vamos agora comentar sobre as alterações que fizemos em nosso navegador 
 
Visivelmente não conseguimos notar a diferença entre o que é um artigo, o que é uma 
seção ou um cabeçalho... por enquanto. No nosso primeiro site estamos experimentando 
elementos que são fundamentais na hora que estivermos mais aprofundados na 
linguagem.