Linguagens de marcação para a web: HTML (HTMl) – visão geral da aula
1. Explicação detalhada de cada tópico apresentado na aula
1.1 Introdução às linguagens de marcação
Definição: linguagens de marcação são conjuntos de comandos (tags) usados para estruturar informações em documentos, como textos, imagens e multimídia. Na web, a HTML é a mais conhecida para formatar conteúdo e indicar onde cada elemento deve aparecer na página.
Exemplo prático: um documento HTML simples pode ter tags que definem cabeçalho, parágrafo e link, como neste pequeno trecho:
<html>
<head>
<title>Exemplo de Página</title>
</head>
<body>
<h1>Bem-vindo</h1>
<p>Este é um exemplo básico de HTML.</p>
</body>
</html>1.2 Estrutura de navegação na web
URL é formada por um protocolo (http/https), um domínio que identifica o servidor e, frequentemente, um caminho que aponta para o recurso desejado no servidor. Exemplo: http://universip.br/curso/index.html
1.3 Páginas da web e HTML
HTML é a linguagem de marcação que define a estrutura da página web. O desenvolvedor decide onde cada elemento fica na tela, por exemplo, onde colocar o botão de “mais informações” ou como alinhar uma imagem ao lado de outra.
1.4 Estrutura de uma página HTML básica
Uma página HTML é dividida entre o head (cabeçalho) e o body (corpo). O head contém metadados como o título e a codificação, enquanto o body contém o conteúdo mostrado ao usuário, organizado por tags de título, parágrafo, links, imagens, etc.
1.5 Codificação de caracteres
O meta charset define a codificação de caracteres usada pela página (ex.: UTF-8, ISO-8859-1). Sem a codificação correta, acentos e símbolos podem aparecer como caracteres estranhos.
Exemplo: <meta charset="UTF-8">
1.6 Ferramentas de edição
Existem editores simples (Notepad, Gedit) e mais sofisticados (Sublime Text, Visual Studio Code) que ajudam com destaque de sintaxe, formatação automática (indentação) e visualização rápida de resultados.
1.7 Conteúdo comum de páginas: textos, imagens, áudio, links e tabelas
Elementos básicos:
- Texto com formatação básica (títulos, parágrafos, ênfase).
- Imagens com a tag <img src="caminho" alt="descrição">.
- Áudio com a tag <audio src="caminho.mp3" controls>.
- Links com a tag <a href="destino">Texto</a>.
- Tabelas com <table>, <tr>, <td> e <th>.
1.8 Prática de criação de página simples
Em atividades, você pode criar um arquivo HTML simples, abri-lo em um navegador e observar a renderização. Experimentar com título, parágrafo, link, imagem e um áudio pode ajudar a entender a relação entre a marcação e a formatação visual.
1.9 Observações rápidas
Para começar, escolha um editor, crie um arquivo com extensão .html, escreva o código HTML básico, salve e abra com o navegador. Não se preocupe com técnicas avançadas nesta primeira prática; concentre-se na estrutura e na ket localizada das tags.
2. Resumo dos tópicos e sub-tópicos
1.1 Introdução às linguagens de marcação
- Conceito: linguagem de marcação usa tags para estruturar conteúdo.
- Exemplo básico: HTML com html, head e body.
1.2 Estrutura de navegação na web
- URL composta por protocolo, domínio e caminho/recurso.
- Mapeamento via DNS para o domínio.
1.3 Páginas da web e HTML
- HTML define a estrutura de conteúdo na página.
- Arquitetura da página determina posicionamento de elementos (ex.: onde fica o botão).
1.4 Estrutura de uma página HTML
- Head: metadados (charset, título).
- Body: conteúdo visível ao usuário (texto, links, imagens, etc.).
1.5 Codificação de caracteres
- Codificação correta evita problemas com acentos e símbolos.
- Ex.: meta charset UTF-8.
1.6 Ferramentas de edição
- Notepad/Gedit (básico); Sublime, VSCode (avançado).
- Recursos como destaque de sintaxe ajudam a identificar tags.
1.7 Conteúdo comum
- Títulos, parágrafos, links, imagens, áudio, tabelas.
- Exemplos de uso de tags correspondentes.
1.8 Prática de criação de página simples
- Criar um arquivo .html, salvar e visualizar no navegador.
1.9 Observações rápidas
- Iniciar com estrutura básica e ir incrementando.
3. Mapa mental em Mermaid
4. Questões de múltipla escolha
Resposta correta: B) Incluir metadados como título e codificação
O elemento head armazena informações sobre a página, como o título (title), conjunto de caracteres (meta charset) e links para estilos ou scripts.
Resposta correta: B) Definir a codificação de caracteres usada pela página
Meta charset informa ao navegador como interpretar os caracteres, evitando distorções de acentos e símbolos.
Resposta correta: B) Criar um link para outra página ou recurso
A tag de âncora (a) com href define a localização de destino de um link.
Resposta correta: A) src
O atributo src aponta para o caminho do arquivo da imagem. O alt também é recomendado para acessibilidade, mas a ideia essencial é o src.
Texto original
O texto original pode conter falhas de gramática ou de concordância, isso ocorre porque ele foi obtido por um processo de extração de texto automático.
Texto extraído do video Fundamentos de Internet e Web - Linguagens de marcação para a WWW
O pessoal, tudo bem? D'un início a parte de semana, o assunto que nós vamos abordar aqui é sobre as linguagens de marcação para a DABWDAP, em uma forma mais específica sobre o HTMI.
O roteiro dessa semana, da aula da semana em volume, uma introdução sobre as linguagens de marcação, contei as suas movimentos de linguagem, em especial da DABWDAP, como funciona a estrutura de navegação na web.
A gente vai abordar sobre o tema de páginas, a linguagem da DABWDAP, e mostrar aqui os exemplos de páginas da TMI, os teamentos para a cação dessas páginas, uma primeira página da TMI, falar das tecmas básicas, tem de parar, por que o anticabesalho, como que a gente for matar uma tabela, como a gente coloca uma imagem de uma página, áudio, rinques para outras páginas.
Entrando no conteúdo da aula, o que vai ser uma página, já que a gente está tratando de uma linguagem de marcação.
Uma página vai ser uma coleção de informações que são felicidas por um site, um sítio, e esse bídeo vamos usuário numa navega do Web.
Se não é uma navega do Web, ele vai responsável por formatar toda a informação que é a orientada que o bídeo do ser do dezoé.
Essas informações, essas páginas, as asas servidores, eções de vidas na tela para usuário pelo broco.
Cada página Web possui uma indiristo, um localizador.
Por exemplo, tomar uma exemplo aqui, a página da Universip, Universip.
br, a gente vai ter acesso a essa página aqui.
A gente vai ter apenas fazer uma parada, um partido de slide, e para uma navega do Web.
Pois bem, porque nós temos aqui, tem um navegado com uma navegador, uma página da Universip, que a gente possa visualizar todo o conteúdo de esta página.
É que ela está formatada, para ser mostrada desta maneira, quem define como a página é formatada desta maneira, quem desenvolve, quem é arquitetta a página, arquiteto de contigo, que define, por exemplo, onde fica o botão mais informações, porque ele está no meio da página, e não no tanto o superior esquerdo, ele não está no tanto superior direito, porque ele não está no ronda-p da página.
Então, para vocês terem uma ideia de como é que é a formatação.
Daqui a pouco, vou voltar e falar sobre esta página, e como é que eu conteúdo, e html dela.
Esse foi bastante interessante.
Voltamos para a nossa apresentação, em que a gente vai retornar para o conteúdo.
Então dando sequência, então a gente viu a página inicial da Universip, e como ela parece para nós os usuários.
Então, vejando, como a gente quebra a URL da página da Universip, e se a gente comentou um pouco na semana anterior, ela é basicamente constituída por um protocolo, em casa que é o HTTP, que é um hypertest transfer protocolo, pelo domínio que indicam o nome do servidor, muitas vezes não aparece na área anterior ao nome do servidor, só o nome do servidor, esse nome que já é mapado pelo DNS, do próprio domínio do Universip, então, se inderez, ele está mapado no serviço de registro dentro do Brasil, dentro do domínio com a BR, e o recurso, então, no caso, aqui, se você quiser se está pagando cursos, então, dentro da estrutura desse servidor, aqui, o BS com BR, com o conjunto de recursos, paginas, vídeos, arquivos, dentro do diretório protegido, o processo desejado, só obtido via conversa com o servidor do Universip, através de uma barra, a nossa barra que serve para separar o nome do servidor, do nome e diretório da página da web.
As páginas são construídas usando o linguagem marcação, a mais conhecida é da TMI, a linguagem marcação para o aparelho da web.
Então, o que é a linguagem da TMI? Um conjunto de vários comandos que identificam elementos de uma página, por exemplo, um texto, uma imagem, uma arquivos de multimídio, então, no contexto da web, texto, uma imagem, uma arquivos de um elemento, como a gente formata esse elemento? Eu que permiti ao BR, corretamente a página, pois trata-se de uma linguagem marcação.
Para a marca, onde deve ser exibida, tal conteúdo ou todo conteúdo, mas, em parte, de forma seccionada, nós podemos determinar como que o BR vai exibir esse conteúdo, a arquitetando a página, a arquitetando o posicionamento dos elementos.
Então, o texto, um conjunto de texto deve ficar separado e outro com um texto, uma imagem deve ficar lado a lado de uma outra imagem, e por aí vai.
Uma marcação, a HTML, separada por um outro, um tratég, que é chamada de red, que é o cabeçalho, que identifica o informação da página, então, uma informação de metadados, as informações do dono da página, onde está o atualitarizada, formado a quantificação da página, e aqui o corpo da página, não é de a gente encerre, a gente trabalha com toda a formatação da página, que é indenlo do Bóri.
Veja que assim, assim, começa uma tag, termina ela com barra, que isso identifica a derimitação do final dessa tag, HTML, HTML, HTML, red, até que bote, ela sempre terminando com um barra que, de forma patronizada.
Então, o primeiro exemplo de uma parte da HTML, vai envolver, que é mandatório, a abertura daquele elemento HTML, e o fechamento dele também, de um geral, uma página simples, qualquer página tem estas características, essa cada, tem dentro do elemento red, dentro da tag red, a gente define com outras tags, o título da página, e dentro do corpo dela, a gente define os conteúdos, no caso eu estou descrevendo que essa é minha primeira página, estou referenciando um link aqui, que é outra página de teste.
Então, se eu clicar nesse link aqui, e você direcionado para uma página de teste, supondo que esta página existe de nada de se ouvir.
Lá na semana 7, eu vou tratar de falar mais, para saber com vocês a construção de uma aplicação Web simples, mas que envolva todos os conteúdos, para passar passo, que a gente deve desenvolver, vocês terem uma prática, para quem nunca trabalhou com uma linguagem da HTML, a construção de uma página, uma aplicação dela, e possivelmente acesso a um servidor Web remoto, que foi simular a estrutura do servidor Web, através da estalação e configuração do servidor para vocês.
Testarem e me ficar, como se você não é na página.
Bom, o elemento red, a gente usa para inserir informações para ajudar o navegador a entender, informações de formatação da página.
Por exemplo, qual é o caracter que é utilizado? Então, tem uma forma de codificação, o caracter, o codificação do teste 8, o ISO 89, o ISO 89, o ISO 98, que define, por exemplo, nem todas as linguagens utilizam o cidil, ou usam os acentos que nós temos no português.
Então, preciso definir alguns esquemas de codificação para que esses caracteres não sejam modificados, quando a gente acessa uma página, você não consegue ver um acento silhouto no flex, por exemplo, você vê todo um cara especial que não tem nenhuma, digamos assim, ser vinte.
Então, dentro desse elemento aqui, a gente consegue ter algumas informações, é uma meta-informação sobre o conteúdo, sobre a parte, onde é aqui, está na armazenado, dentro de outras informações.
As tegras básicas da linguagem daquele L, só o HTML que marca início e o fim do documento, a barra que marca o corpo da página, está aí todo tipo da página, que sempre aparece lá na nossa marinha, mas é fininha de navegador.
E o até guiaque de limita límita mais, geralmente, quando usamos até guiaque, a gente quer fazer referência a um novo documento que não faz parte daquela página.
É um link do documento external.
Pode ser local, o servidor pode ser remoto, o servidor que é armazenado o conteúdo de manter nada à página.
A palavra é dentro dessa.
.
.
A gente usa a palavra da Ref, que significa interesse da página que a gente quer reverenciar, o WazeB, quando eu clico em cima do link.
Se a parte ver no mesmo diretório da atual, basta ter que colocar o nome do arquivo.
Se ela tiver fora, pode passar referência com completa para ela.
No caso de ver fora do Sergo de WazeB local, tem que passar o endereço do e-air completo para achar.
Aquela parte.
E o TegP para fazer ferramata-sal.
Como é que a gente faz para começar a desenvolver uma parte de não-éfico? Uma várias maneiras de fazer isso.
Tanto em um ambiente, o Windows, para quem usa Windows, para quem usa Linux.
Não for mais simples rápida.
Não estamos práticas, especialmente por conta, e dependendo da quantidade de formação que você pode colocar na página ou formatar.
Mas não for mais simples possível usar um outpad do Linux.
Ou o gdit do Linux.
Existe editores mais sofisticados, como um outpad mais mais, o sublime text, que cuja deixou os links aqui, e o Visual Studio.
No caso o múlti-pad mais mais, ele é bastante interessante, como o sublime, que consegue fazer a distinção de cores entre as tegas.
Você pode ter baixo o sublime, no sublime mais, mais.
O cream-artil da TML usando as tegas, e ele vai fazer ferramata-sal.
Ferramentas para fazer identação das tegas.
Então você consegue desenvolver um código e fica mais bonito.
Na hora de visualizar o código, não resultado mais desvado da porção de encode, mas encode em 5.
3 de está programando.
Tem bastante interessante que esse aqui, que é o NW3-School, que é um line, você pode desenvolver um código de uma página de TML e ver o resultado online.
Fele online.
Veja, por enquanto, nós não vamos tratar disso aqui nessa aula, mas na próxima aula, essa aqui é uma tag que indica o uso de uma versão mais nova da TML, que eu já tem, que nós vamos tratar na próxima aula.
Eu vi aqui que eu tenho essa altura base de uma página da TML, e eu já tenho ele aqui, o conteúdo eu posso modificar, o conteúdo.
E mandar executar, ele vai mostrar o conteúdo aqui.
Veja, acho que não tem nenhuma formatação, aqui, está nessa página.
Então eu posso colocar, por exemplo, o título na página, peço de fechar, ocupar, aqui, aqui, e fazer execução.
Então, no caso aqui, ele não mostra, porque, se fosse execução dessa página, num servidor, ele ia mostrar o título aqui, na barra, ele mostrar aqui, o título, assim como a gente tem, por exemplo, aqui, no site da Universipilent, então, a gente tem um nome aqui, no título da página, no Homepage, no Universipilent, aqui, esse aqui é uma aplicação web, que permite a gente interagir com, no documento da TML, então, posso, desenvolver qualquer código da TML, aqui, desde que essa aplicação, que executa no servidor, com a web da nave 3xC, permite trabalhar com todas as terras da TML, ok? Então, uma boa recomendação, por exemplo, tratar e aprender de um recorde com a TML, com os ensaucionamentos online, ok? Como eu vi comentado, há outros como, não te pede mais mais, ok? Que é nada nesse link aqui, ok? Também, o Sublime, ok? SublimeTest, então, veja aqui, você não vai me ler uma fermedação de poderosa, aqui permite fazer, um momento de código, não só em lugar da TML, mas em outros linguagens, como se, Java, Python, Perdi, ok? E, também, o visual, é, o visual estúdio coto, ok? Eu particularmente, para desenvolver código da TML, ou o Sublime, ou o do loadpad, mais, e dar um bastante conta do recap, ok? É, então, para uma primeira capagem, vocês podem criar um arquivo chamado 10 para a TML, ok? Me diz que os exemplos seguimos são apresentados, você pode mostrar o conteúdo, ok? Vou salvar, cad exemplo, com outro nome, a tercieta, 2, 3, 3, 3, então, eu vou deixar disponível aqui, para essa aula, ok? Juntos com material de sal, esses arquivos, é a TML, para vocês baixarem e modificar, ok? Enquanto do tempo da aula, não sei, nós tratávamos de desenvolvimento aqui, ok? Então, você vai abrir isso aí, com algum desses ferramentos que eu distemeteriamente, inserir o conjunto de comandos, que vão ser mostrados os próximos slides, ok? Então, eu utilizei a ferramenta online, da 3-esculpa, o que acho lá mais simples, né? Mas, se vocês tiveram uns, por exemplo, eles vão te pedir, eu não te pedir mais, ok? Então, o que vocês vão fazer, utilizar, nesse conteúdo aqui, e salvar esse conteúdo na página, com os arquivos da semana 4, um daqueles editores, e começar a fazer modificações, então, vamos onde ficar o título, vamos onde ficar o conteúdo do bore, e por aí vai, ok? Então, você quer inserir um texto, então, aí está acabado aqui, pela.
.
.
pela.
.
.
que tem vermelho, você quer inserir, por exemplo, um audio, ok? Então, uma música em MP3, ok? Então, vocês, ok? Me consigo.
.
.
é essa.
.
.
aqui, via MP3, não precisa estar no mesmo diretor do arquivo, da pádio, ok? na Ptm, então, se conta que isso aqui seja o arquivo teste 3, né? Dentro do diretor, é difícil que o arquivo teste 3, conta da ptm, ele tem que ter essa música em MP3, ok? Pra ele ir pro braço, é conseguir fazer referência, ao arquivo, está dentro do mesmo diretor da.
.
.
da.
.
.
onde está a pádio, ok? Se eu quiser inserir uma imagem, né? Tenho comando específico com o.
.
.
a tag, e MPG, passando o source, né? É uma imagem, ok? Então, supondo também que era esteja o mesmo diretor do.
.
.
da pádio da ptm, ok? E se eu quiser fazer uma referência, há um link externo, né? há o conteúdo daquela pádio, basta utilizar o.
.
.
o atergiana, né? com o.
.
.
o.
.
.
hf, né? passando o caminho completo, ok? indicando que, é uma home page, por exemplo, tá? para o visit, é nossa, home page, né? é, quando eu clicar em home page, ele vai, vai nos levar para o site da.
.
.
universidade, ok? Tem outros comandos, né? que permitem ter gente de inserir informações, por exemplo, é construir uma tabela, né? através de.
.
.
das terres, terres, e.
.
.
que vão te trabalhar com linhas e colunas, ok? é, também isso que disponível para vocês, tá? quando você é quando te controlar com tabelas, a gente tem que lembrar o elemento table, com os seus.
.
.
as suas areas antes das suas tags, né? é.
.
.
terres, e.
.
.
alguns componentes para a formatação de texto envolvem, colocam texto negrito, estitálico, né? ter sido sublinhado, tamanho da fonte, não é ficar cor do texto, né? então, no caso da tag font, é uma tag que necessita que ela tenha início e fim, envolver num texto, né? é.
.
.
ela também recebe alguns attributes com o tamanho cor, então, não é possível que você mantica a fonte, não fica com a tamanho dela, não fica cor, tudo isso para formatar melhor, que aparece no.
.
.
na página, né? Então, aqui a gente tem um exemplo, né? como seria a formatação desse.
.
.
um texto que vai nessa parte da primeira, né? um título aqui, isso aqui, eu deixo você estreino na área, né? e gratificar como é que ficaria isso? então, é um inclui isso, um daqueles editores, você pode multiplicar o texto, ser negrito, colocar texto e estitálico, insublinhado, alterar fonte, né? então, a recomendação você estreina com base de sezema, faça uma modificação de inserções com base de sezema, né? então, um resultado, por exemplo, é.
.
.
desse.
.
.
dessa página, né? é esta aqui, né? então, seu código da página, esse é o processamento da página processado, né? é.
.
.
com os que nós temos aqui, com uma página de texto, tá? então, o que eu utilizei para abordar nessa aula, tá? para disponibilistir links, tá? então, é.
.
.
a gente aprendi bastante de implementos de código, da termina dela, né? treinando, testando e modificando, tá? bom, era isso que eu queria abordar nessa semana, espero que todos consigam desenvolver as atividades prevísimas semana, tá? treinar e utilizando o material que é apresentado aqui nos slides, tá? que eu vou deixar de disponível para semana também, tá? e espero que vocês façam um bolso ainda que foi abordado aqui, tá? então, muito obrigado a todos a gente se vê para semana assim, abraço!
