Home-theater-designers
HTML é uma parte vital da web como a conhecemos. E embora poucos web designers criem páginas digitando HTML manualmente, ainda é útil saber um pouco sobre isso.
Veremos alguns princípios básicos da linguagem, incluindo o que o HTML realmente é, alguns conceitos fundamentais e como ele interage com outras linguagens. Pense nisso como um curso intensivo de 'HTML para manequins'.
Noções básicas de HTML: o que é HTML?
HTML significa Linguagem de marcação de hipertexto . E embora às vezes seja mesclado com as linguagens de programação, isso não é preciso.
Como um linguagem de marcação , O HTML permite apenas criar o layout de exibição das páginas. Um verdadeiro linguagem de programação , como Java ou C ++, contém lógica e comandos que são executados.
Embora seja simples, o HTML é a espinha dorsal de todas as páginas da web. É responsável por qual texto aparece em negrito, adicionando imagens e criando links para outras páginas. Temos um FAQ de HTML que explica mais.
Você pode clicar com o botão direito na maioria das páginas da web em seu navegador e escolher Ver o código-fonte da página ou semelhante para ver o HTML por trás deles. Provavelmente, também conterá uma grande quantidade de código que não é HTML, mas você pode vasculhar isso.
Mesmo que você não tenha nenhuma experiência com linguagens de marcação ou programação, aprender um pouco sobre HTML o tornará um usuário da web mais informado. Vamos percorrer cinco etapas básicas para ajudá-lo a entender como o HTML funciona. Forneceremos exemplos ao longo do caminho.
Etapa 1: Compreendendo o conceito de tags
HTML usa um sistema de Tag para categorizar diferentes elementos do documento.
A maioria das tags vem em pares para envolver o texto afetado dentro delas. Aqui está um exemplo simples (o
tag faz texto negrito ; discutiremos isso mais em um momento.)
This is some bold text .Observe como a tag de fechamento começa com uma barra (/). Isso significa uma tag de fechamento, o que é importante. Se você não fechar uma tag, tudo desde o início terá esse atributo.
quanto custa o youtube red
No entanto, nem todas as tags têm um par. Alguns elementos HTML, chamados elementos vazios , não têm conteúdo e existem por conta própria. Um exemplo é o
tag, que é uma quebra de linha. Você pode 'fechar' essas tags adicionando uma barra (como
), mas não é estritamente necessário.
Etapa 2: o esqueleto do layout HTML
Um documento HTML adequado deve ter certas tags definidas para que seja organizado corretamente. Estas são as partes essenciais:
- Cada documento HTML deve começar com
para se declarar como tal. Assim, sua marca de fechamento,, é o último item em um arquivo HTML. - Em seguida, o
seção inclui informações como o título da página, vários scripts que são executados na página e semelhantes. Como o nome sugere, normalmente vem logo após a inicialmarcação. O usuário final não vê muito do conteúdo dessas tags. - Finalmente, o
tag contém o texto da página que o leitor vê (e muito mais). Aqui você encontrará imagens, links e muito mais.
Desde o
seção constitui a maior parte de um documento HTML, o resto de nosso passo a passo examina os elementos que pertencem a ela.
Etapa 3: Tags HTML básicas para formatação
A seguir, vamos examinar algumas tags comuns que constituem os documentos HTML. Obviamente, não é possível cobrir todos os elementos, portanto, revisaremos alguns dos mais importantes. Cobrimos muitos mais exemplos de HTML se isso não o satisfizer.
Se essas tags parecem muito básicas, lembre-se de que o HTML foi criado em 1993. A web era muito baseada em texto naquela época, em seus estágios iniciais.
Formatação de Texto Simples
HTML oferece suporte a estilos de texto básicos, como você encontraria no Microsoft Word:
HTML também suporta o antigo
tag para negrito e
para itálico. No entanto, é preferível usar os acima.
Resumidamente,
e
mostram como algo deve ser entendido, enquanto as últimas tags apenas informam como deve ser. Essas tags anteriores são mais acessíveis para leitores de tela usados por deficientes visuais.
Parágrafo e outras divisões
HTML's
tag permite definir uma seção do documento. Normalmente, isso é emparelhado com CSS (veja abaixo) para formatar uma seção de uma determinada maneira.
o
tag permite dividir o texto em parágrafos. Os navegadores colocarão automaticamente algum espaço antes e depois deles, permitindo que você divida o texto naturalmente.
Você pode adicionar cabeçalhos ao seu documento e torná-lo mais fácil de seguir usando o
Através dos
Tag. H1 é o cabeçalho mais importante, enquanto H6 é o menos importante. Quase todos os artigos do MakeUseOf usam os cabeçalhos H2 e H3 para organizar as informações.
Batendo Digitar adicionar quebras de linha em seu documento HTML não as exibirá de fato. Em vez disso, você pode usar
para adicionar uma quebra de linha.
Aqui está um exemplo que usa tudo isso:
Example Heading
This is one paragraph.
This is a second
paragraph split between two lines.
Etapa 4: inserir imagens
As imagens são uma parte vital da maioria das páginas da web. Você pode adicioná-los facilmente com HTML e até mesmo definir propriedades diferentes para eles.
Você insere uma imagem usando o
![]()
marcação. Combinando isso com o
encaminhar mensagens de texto para e-mail android
srcatributo permite que você especifique de onde deseja que a imagem seja carregada.
Outro atributo importante de
![]()
tags é
alt. O texto alternativo permite que você descreva a imagem para leitores de tela ou caso a imagem não carregue corretamente. Você pode passar o mouse sobre uma imagem para ver seu texto alternativo.
Use o
widthe
heightelementos para especificar o número de pixels em que a imagem aparece.
Junte tudo isso e uma tag de imagem terá a seguinte aparência:
Etapa 5: Adicionando Links
A World Wide Web não seria muito uma web sem links para outras páginas. Usando o
tag, você pode criar um link para outras páginas em qualquer texto.
Dentro de
tag, o
hrefatributo informa onde você está ligando. Simplesmente colar o URL funcionará bem. Você pode usar o
titleelemento para adicionar um pedaço de texto que aparece quando alguém passa o mouse sobre o link.
Um link básico se parece com este:
Visit Google o
tag tem muitos outros elementos possíveis, mas não vamos mergulhar neles aqui.
Como HTML se conecta com CSS e JavaScript
Vimos o básico do HTML e como ele estabelece uma página da web. Mas, como você pode imaginar, o HTML sozinho não é adequado para a web moderna. As páginas da web em HTML simples eram comuns nos dias da 'Web 1.0', quando a maioria dos sites nada mais era do que texto estático.
Mas agora, temos muito mais. CSS (Cascading Style Sheets) é uma linguagem usada para descrever a aparência do texto que você preparou em HTML. Lembre o
tag que discutimos? Dentro desta (e de outras tags), você pode definir um
classatributo. Então, no documento CSS que o acompanha, você pode escrever instruções sobre como
classdeve olhar.
Você pode definir esses elementos de estilo embutidos em seu código HTML, mas isso é considerado uma prática ruim, pois é muito mais difícil de manter. Aprenda mais com estes exemplos simples de CSS . Verifique também como otimizar seus arquivos CSS .
JavaScript
Vimos que o HTML define o conteúdo e o CSS determina a aparência. JavaScript, o último membro do trio vital para a web, permite que as páginas respondam às ações das pessoas sem carregar uma nova página a cada vez.
Por exemplo, o JavaScript permite que um site o avise que a senha inserida não atende aos requisitos antes de você tentar enviá-la. Um web designer pode usar JavaScript para percorrer as imagens em uma apresentação de slides ou solicitar a entrada do usuário.
Esses são apenas alguns exemplos elementares. JavaScript é uma linguagem de script capaz de fazer muita coisa e é comparativamente muito mais complicada do que HTML e CSS. Ver nossa visão geral do JavaScript por muito mais.
Analisar o escopo completo do web design está além do escopo deste artigo, mas basta dizer que o HTML interage com outras linguagens para criar as páginas da web que conhecemos hoje.
A Evolução do HTML
É importante observar que o HTML não é estático. O HTML passou por várias revisões, sendo a mais recente o HTML 5. Notavelmente, esse padrão suporta a incorporação de vídeo nativo em vez de depender de formatos proprietários como Adobe Flash.
Novas iterações de HTML também declaram certas tags arcaicas como obsoletas de tempos em tempos. Isso inclui tags horríveis, como
e
(aquele texto de rolagem e flash respectivamente) comumente visto no design de sites da década de 1990. Portanto, lembre-se de que os padrões mudam com o tempo.
Um pouco de conhecimento de HTML vale muito
Fizemos um breve tour de como funciona um documento HTML. Agora você conhece os fundamentos de como as páginas da web são estruturadas. Mesmo que você não construa páginas da web, está um pouco mais ciente da web que usa todos os dias.
por que meu disco roda a 100
Para saber mais, atualize suas habilidades de desenvolvimento web com ferramentas essenciais e, em seguida, dê uma olhada nosso guia sobre como projetar seu primeiro site .
Crédito da imagem: Belyaevskiy / Depositphotos
Compartilhado Compartilhado Tweet O email 5 dicas para turbinar suas máquinas Linux VirtualBoxCansado do fraco desempenho oferecido pelas máquinas virtuais? Aqui está o que você deve fazer para aumentar o desempenho do VirtualBox.
Leia a seguir Tópicos relacionados- Programação
- HTML
- Desenvolvimento web
- JavaScript
- Ferramentas para webmasters
- Programação
- HTML5
Ben é editor adjunto e gerente de integração da MakeUseOf. Ele deixou seu emprego de TI para escrever em tempo integral em 2016 e nunca olhou para trás. Ele vem cobrindo tutoriais de tecnologia, recomendações de videogames e muito mais como escritor profissional por mais de sete anos.
Mais de Ben StegnerAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever