YT YouTube2Text

YouTube2Text → Transcripts → [UFMS Digital] Fundamentos de Web - Módulo 1 - Unidade 2

[UFMS Digital] Fundamentos de Web - Módulo 1 - Unidade 2 — Transcript

by AGEAD UFMS · 4,848 words · 809 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00Olá,
0:04eu sou o professor Leonardo Silva,
0:06professor da disciplina de fundamentos
0:08de web e essa é a unidade dois do
0:11primeiro módulo da nossa disciplina.
0:14Nessa unidade vamos falar um pouquinho
0:16mais da linguagem HTML.
0:19Até este momento, no curso, você teve a
0:22oportunidade de conhecer um pouco mais
0:24sobre como chegamos a esse cenário que
0:27atualmente vivemos.
0:30Eh, entendemos como a internet evoluiu
0:33até chegar ao que chamamos hoje por web
0:36e compreendemos o papel que as
0:38linguagens de marcação e em especial
0:41HTML
0:43tem nesse contexto,
0:45a necessidade que ocorreu de
0:48trabalharmos a estruturação do texto e,
0:51posteriormente a sua eh visualização, a
0:55sua aparência. Dessa forma, ao final dos
0:58anos 80, início dos anos 90, tínhamos um
1:02cenário onde passamos a ter uma
1:05linguagem que nos permitia estruturar um
1:07determinado conteúdo e passamos a ter
1:10uma aplicação que hoje chamamos de
1:13navegadores ou browsers que eram
1:16responsáveis por apresentar essa esse
1:19conteúdo
1:20para os seus usuários, permitindo que as
1:23pessoas acessassem esse conteúdo de uma
1:25maneira muito muito mais interessante,
1:28agradável e amigável. Nós vimos que
1:32muito dessa interação que acontecia
1:35antes entre as instituições se baseava
1:37em comunicações e comandos de texto, o
1:40que demanda, na verdade, um maior
1:43conhecimento, a memorização de comandos,
1:47e linhas de código para que determinadas
1:50funções pudessem ser executadas.
1:54Hoje, ao usarmos a internet, ao usarmos
1:57a web, conseguimos interagir com
2:00sistemas, com os aplicativos, com as
2:03aplicações, sem a necessidade de
2:05estarmos memorizando comandos ou
2:09sabermos detalhes técnicos a respeito
2:12dessas tecnologias.
2:15Nessa unidade, vamos focar um pouco mais
2:18sobre a linguagem HTML. Nós já sabemos
2:21que ela deriva, que ela é uma uma
2:24linguagem criada a partir da linguagem
2:28SGML, que era uma metalinguagem
2:32que permite nos que nos permite criar
2:34linguagens de marcação.
2:37Ela é baseada eh num conceito chamado
2:40hipertexto.
2:42O hipertexto nada mais é do que uma
2:45informação ou um bloco de informação que
2:50nos permite eh fazer a ligação com
2:53outros blocos. Ah, o exemplo mais eh
2:57claro que podemos citar de hipertextos é
3:00o link que todos nós estamos acostumados
3:02a usar dentro das nossas páginas da
3:05internet.
3:06A partir de uma de uma palavra, a partir
3:09de uma frase, a partir de um bloco de
3:12textos, temos a possibilidade de
3:14vincular,
3:16dar um salto no espaço pro um para um
3:19documento que aprofunde aquele
3:22conhecimento ou que faça aquela ligação.
3:25Então, poderíamos traduzir HTML como
3:29sendo uma linguagem de marcação de
3:31impertextos.
3:33Eh, e neste caso, o texto pode ser tanto
3:36uma palavra quanto uma imagem. Ao final
3:40da aula da última unidade, nós vimos um
3:43pequeno exemplo de código em linguagem
3:46HTML. E naquela ocasião eu comentava com
3:49vocês que já sabíamos bastante para
3:52criar qualquer página em HTML. Eu
3:56recupero aqui partes daquela imagem para
3:59apresentar agora mais detalhadamente
4:02alguns daqueles detalhes.
4:05Existem pequenas diferenças entre aquele
4:07código que está no final da unidade um
4:10para esse que vocês visualizam neste
4:13momento. Talvez o primeiro elemento que
4:17eu chamem a atenção de vocês é o uso. é
4:20a primeira linha desse código onde está
4:23escrito doc type HTML.
4:27Essa palavra reservada do type, ela está
4:30indicando pro nosso navegador qual é a
4:33versão da linguagem HTML que estamos
4:36utilizando.
4:38Veja, a linguagem HTML nasceu em 1990,
4:43no início dos anos 90. E de 1990 para
4:47cá, algumas evoluções foram acontecendo,
4:51que fazem com que estejamos hoje na
4:54quinta versão da linguagem HTML ou como
4:58comumente chamamos, o HTML 5.
5:02Ah, ao longo deste curso, estaremos
5:04usando o HTML 5 em nossa aula ou nas
5:08nossos nos elementos HTML que estaremos
5:11utilizando. Então, a primeira linha de
5:14um documento recomenda-se que seja a
5:16indicação da versão do HTML que estamos
5:19usando.
5:21A partir daí, o código é semelhante ao
5:24código que foi anteriormente
5:26apresentado. Temos a área principal da
5:29página que vai ser marcada ou demarcada
5:32pela marcação HTML.
5:36HTML no início/html
5:38no final.
5:40Já memorize, já se acostume com a ideia
5:43que toda marcação ela tem um início e
5:46ela terá um final. Nós precisamos
5:49sinalizar onde aquela marcação começa e
5:52até onde ela é pertinente.
5:56A seguir, temos dois blocos importantes
6:00que sempre vão estar presentes em todas
6:02as páginas. a área de cabeçalho, onde
6:06teremos informações sobre a página que
6:09será exibida e a área de conteúdo ou a
6:12área de corpo, onde efetivamente
6:15colocaremos o conteúdo, o as informações
6:19do nosso documento que será apresentado
6:22posteriormente para o usuário por meio
6:24do navegador. Sabendo disso, você já
6:27está apto a criar sua primeira página em
6:29HTML. Você pode abrir o bloco de notas,
6:32caso use Windows,
6:35ou outro editor de texto puro dentro do
6:39sistema operacional que você tenha
6:40costume de utilizar. E você pode copiar
6:43essa estrutura. Não se esqueça de salvar
6:46com a extensão p hhtml
6:50e depois basta dentro do seu navegador
6:54usar a opção arquivo abrir e procurar e
6:58selecionar a página que você acabou de
7:00criar. Neste momento, como este código
7:04está descrito aqui, nada será
7:06apresentado.
7:07Mas agora vamos entender um pouco mais
7:09como podemos colocar as nossas primeiras
7:12informações. Bom, o HTML hoje ainda é a
7:16principal maneira que usamos para
7:18construir as nossas páginas e os nossos
7:20sites. Eh, mudou-se a maneira como
7:24utilizamos. Então, se você fosse um
7:27estagiário, se você começasse a
7:28trabalhar na área de tecnologia no
7:30início dos anos 90, você muito
7:33provavelmente teria como ferramentas de
7:36trabalho apenas um editor de texto puro.
7:40E nós precisávamos ter guias de
7:42referência, eh, onde estavam descritos
7:46os elementos HTML para que poss eh para
7:49que tivéssemos a oportunidade de usar.
7:52Hoje temos vários editores. Nosso
7:55próprio eh editor, o Word, que é um
7:59editor bastante utilizado por todo mundo
8:01e que está disponível em vários
8:03computadores. Ele salva a página já em
8:06formato HTML,
8:09mas no passado não era assim. Então, no
8:12passado, nós tínhamos que conhecer essas
8:14marcações
8:16e planejar a aparência desse documento,
8:19uma vez que as o as informações do
8:21documento estivessem lá presentes. Todo
8:24elemento em HTML, ele é composto por
8:28alguns eh atributos que fazem parte
8:31dele. E conforme eu já mencionei na
8:34nossa última aula, ele é chamado de
8:37marcação ou tag.
8:40Eh, comumente nos tutoriais, nas
8:44revistas especializadas
8:46ou na nossa conversa entre colegas, você
8:49verá as pessoas se referindo às
8:50marcações
8:52ou tags. É a mesma coisa. Aqui eu trago
8:56um exemplo genérico do que seria essa
8:58tag. Você tem um nome, normalmente entre
9:03os sinais de maior e menor. Você terá o
9:06conteúdo aqui representado pela cor
9:08azul. E posteriormente você terá o
9:12fechamento dessa marcação ou dessa tag.
9:16O que diferencia a tag de abertura e a
9:18tag de fechamento é essa barra na tag de
9:22fechamento. Neste caso aqui, eu chamo
9:25sua atenção para uma marcação que pode
9:28parecer confusa num primeiro momento,
9:31mas ela é bem simples e com o tempo
9:33todos nós nos acostumamos a usar.
9:36Essa marcação IMG é responsável pela
9:39inserção de uma imagem dentro de um
9:42documento HTML.
9:44Se você deseja mostrar a sua foto,
9:47mostrar a foto de uma paisagem dentro de
9:50um documento HTML, a marcação que vamos
9:53utilizar é a IMG.
9:56A marcação IMG, ela tem alguns atributos
10:00para que ela funcione adequadamente.
10:03O principal deles é o atributo SRC,
10:08que vem do inglês source, que é a fonte,
10:12qual o arquivo que devemos mostrar, qual
10:15o arquivo que será apresentado.
10:17Então, nessa imagem eu gostaria de
10:19chamar a atenção de vocês para os
10:22seguintes elementos. Temos a marcação
10:26e temos alguns atributos representados
10:28na cor vermelha. Para cada atributo,
10:32temos um valor atribuído a ele, correto?
10:36Então, neste caso, temos uma tag de
10:39imagem, o atributo de origem, o atributo
10:43src, informa que vamos disponibilizar ou
10:46vamos apresentar o arquivo img_girl.jpg.
10:52JPG.
10:55O atributo de alternativo, de texto
10:58alternativo, é um atributo bastante
11:01importante, porque ele permite colocar
11:03uma descrição para essa imagem. Isso é
11:07particularmente importante quando
11:09pensamos na questão de acessibilidade.
11:12Então, pessoas com baixa visão, pessoas
11:15cegas, quando acessam a internet fazem
11:18uso de um dispositivo ou de um
11:21aplicativo de leitura de tela.
11:25E ao acessar uma página HTML, esses
11:29aplicativos eles procuram o texto
11:31presente
11:33eh presente dentro da do atributo Alt
11:37para poder então descrever a imagem que
11:39tá sendo apresentada.
11:42Podemos deixar este atributo em branco
11:44ou nem colocá-lo, mas neste caso, uma
11:48pessoa nessas condições que eu mencionei
11:51não ouviria nenhuma descrição, não
11:53saberia que está acessando uma imagem.
11:56Os dois próximos atributos dizem
11:58respeito à largura e a altura que essa
12:00imagem terá. Veja, ao carregar o arquivo
12:04da imagem, ela virá no seu tamanho
12:06original, que pode ser bastante grande.
12:09Então, pode ser da minha vontade
12:13redimensionar essa imagem. E como por
12:16meio desses dois atributos, eu posso
12:18estabelecer os valores que eu desejo ter
12:22de largura e de altura. Aqui, novamente
12:25temos a estrutura básica de um arquivo
12:28HTML. Neste momento já coloco alguns
12:31elementos a mais para apresentar a
12:34vocês. Então, temos o doc type na
12:36primeira linha, sinalizando que é um
12:39documento HTML na versão 5 e junto da
12:43marcação HTML apareceu o atributo lang
12:47de language e tem o valor PT traço BR,
12:54ou seja, estamos sinalizando.
12:57Então aqui o tipo, né, o a versão do
13:01HTML que nós estamos utilizando aqui.
13:04Como eu ia dizendo, nós estamos
13:06sinalizando qual é o idioma que aquela
13:09página está sendo construído. A página
13:12está sendo construída em qual idioma? No
13:15nosso caso, estamos usando o português
13:18do Brasil, PT traço BR. Não podemos
13:22esquecer que temos o português de
13:24Portugal, que tem algumas diferenças em
13:26relação ao nosso português.
13:29Eh, sou obrigado a colocar isso toda
13:33vez? Não. Algumas vezes, muitos exemplos
13:37aqui ao longo do curso eu vou apresentar
13:39para vocês e não vai aparecer o atributo
13:42Lang, não tem problema. Há situações em
13:46que nem mesmo o Doc Type irá aparecer,
13:48mas eventualmente é interessante que
13:51você use ou no seu trabalho pode ser
13:54necessário que você use
13:57esse ou desenvolva este arquivo da
13:59maneira mais completa.
14:01Nós vimos já que eu tenho a área de
14:04cabeçalho delimitada pela marcação red e
14:08nesse caso eu tenho duas marcações
14:11dentro dessa área de cabeçalho. a
14:14primeira chamada meta e a segunda
14:16chamada title.
14:18Esse title, como eu mencionei
14:20anteriormente, se trata daquela
14:22informação que aparece na janela
14:25de título do seu navegador, por exemplo.
14:29fazendo um paralelo para tentar ajudá-lo
14:31a entender. Quando abrimos um documento
14:34do Word, é como enxergarmos em cima, na
14:37parte superior da janela, algo do tipo
14:40documento um, até o momento em que
14:43aquele documento seja salvo no seu HD,
14:46no seu disco rígido ou em algum
14:49dispositivo.
14:50A partir daquele momento, ele mostra o
14:53nome do documento. Neste caso aqui, a
14:56informação que estiverem entre as
14:58marcações chamadas title é a informação
15:02que irá aparecer na janela do seu
15:04navegador. Mas e essa outra marcação
15:07chamada meta?
15:09Ela especifica a codificação de
15:12caracteres que serão utilizadas na
15:14página. Muito provavelmente todos vocês,
15:17todos os que assistem essa aula, em
15:20algum momento viram uma página ou
15:23acessaram alguma página onde caracteres
15:27estranhos, por assim dizer, aparecem em
15:30meio às palavras, normalmente
15:33eh, no lugar de acentos ou caracteres
15:37especiais, um símbolo, uma vírgula, um
15:40ponto
15:42que utilizamos ao longo do nosso texto.
15:45Isso pode sinalizar uma dificuldade para
15:49que aquele navegador entenda qual é a
15:51linguagem que está sendo usada.
15:54Então, ao inserir aqui esse char UTF
15:59traço 8, nós estamos sinalizando
16:02qual é o mapa de caracteres, qual é o
16:05conjunto de caracteres que iremos
16:07utilizar dentro daquela página que
16:10estamos construindo. E dessa maneira o
16:13navegador tem mais informações para
16:15poder entender e apresentar aquele
16:18conteúdo.
16:20O TF traço oito é o padrão da web e ele
16:24vai abranger um conjunto enorme de
16:27idiomas, como português, como o inglês e
16:30várias outras línguas.
16:33Eh, acho que podemos mencionar aqui que
16:37teremos línguas ou temos línguas eh que
16:41exigem caracteres especiais. Nestes
16:44casos, muito provavelmente o
16:46desenvolvedor daquele país utiliza um
16:49outro conjunto de caracteres sinalizado
16:53aqui nessas páginas. E gostaria também
16:57de apresentar para vocês alguns
16:58elementos em HTML.
17:01Ao final dessa apresentação, o meu
17:03objetivo é que você já consiga começar a
17:06criar as suas páginas em HTML, que você
17:09seja capaz de abrir o bloco de notas,
17:12escrever o seu documento HTML e
17:15visualizar o resultado no seu navegador.
17:19E a primeiro elemento que eu gostaria de
17:22mostrar para vocês, eh, bom, antes de
17:25mostrar o primeiro elemento, eu vou
17:27sempre utilizar como base este documento
17:30que está aqui. Então, nós temos ali, eh,
17:35a linguagem que vai ser utilizada, o
17:37português, estou sinalizando que estou
17:40usando os caracteres, o mapa de
17:42caracteres do TF traço oito.
17:45essa janela, quando você abrir esse
17:47arquivo no seu navegador, você verá na
17:50barra de título o HTML5, estrutura
17:54básica. E neste momento não há nenhuma
17:57indicação de texto, não tem nenhuma
18:00informação ainda nessa página. Sua
18:02página carregará completamente em
18:04branco.
18:06Todas as marcações que nós apresentarmos
18:09aqui, todos os elementos HTML que foram
18:12apresentados aqui, eles vão deverão ser
18:15inseridos entre essas duas marcações que
18:19delimitam a área de corpo ou de conteúdo
18:22da nossa página. para fins didáticos e
18:25para facilitar o seu entendimento e até
18:27a visualização aqui na apresentação, eu
18:30nem sempre apresentarei o código como um
18:32todo, mas basta você inserir aquele
18:36trecho de código apresentado
18:38entre essas duas marcações que o código
18:40funcionará. Tudo bem?
18:44Primeiro exemplo que eu gostaria de
18:46trazer para vocês é quando desejamos
18:49eh marcar um elemento como sendo um
18:52título, um subtítulo.
18:55Por exemplo, é muito comum que num
18:58trabalho de uma disciplina ou num TCC ou
19:02num documento mais formal, tenhamos a
19:05necessidade de usar uma hierarquia entre
19:09elementos para denotar qual o elemento
19:12mais importante,
19:14uma subcessão no documento
19:17ou ainda destacar um trecho desse
19:20documento.
19:22A marcação que nos permite trabalhar com
19:24títulos é a marcação H. Essa marcação,
19:29ela é composta pela letra H, normalmente
19:32em minúscula, indicado por um número de
19:361 a seis, sendo que cada número
19:39representa um nível
19:41para esse título. Ah, e esse nível ele é
19:45crescente de um até seis. Então você vê
19:49à direita aí exatamente o exemplo
19:52produzido pela marcação H.
19:56Chamo sua atenção também eh pra primeira
20:00linha desse trecho de código, onde
20:02aparece a observação
20:05inserindo títulos.
20:08Veja que do lado direito eu não tenho
20:10essa informação sendo apresentada
20:12na tela.
20:14Isso significa que aquela marcação ou
20:17aquele trecho está comentado no meu
20:20código. Para fazer um comentário, eu
20:24simplesmente uso este elemento.
20:27Colocarei o sinal de menor, exclamação,
20:32ifen, ifen, posso escrever meu
20:36comentário e faço o fechamento, o
20:39respectivo fechamento no final. ifen
20:42ifen sinal de maior.
20:45Tudo que estiver entre essas duas
20:47marcações que aparece em verde ali no
20:50caso, vai ser entendido pelo navegador
20:53como um comentário, uma informação que
20:55não deve ser disponibilizada quando
20:58aquela página for visualizada no
21:01navegador. Então, a partir de agora,
21:04fica combinado que em todo trecho de
21:06código que eu apresentar, tudo que
21:09estiver em verde é sempre um comentário.
21:12Não se preocupe se, aliás, não é que não
21:14se preocupe, ela não deve aparecer no
21:17seu na sua página no resultado final,
21:19quando você visualizar no navegador.
21:21Então, ali eu tenho a marcação H1 como
21:25um exemplo de título de nível um.
21:27Observe a diferença de tamanho existente
21:31pro H3, que representa um título de
21:34nível 3.
21:36A própria marcação se encarrega de fazer
21:40determinar qual o tamanho da fonte,
21:43qual a apresentação que essa informação
21:47tem que ter. Isso se conecta com aquilo
21:50que mencionamos anteriormente.
21:53No momento que eu escrevi o código, eu
21:55só sinalizei que aquele título ou que
21:57aquela palavra que estava entre as
22:00marcações H3 deveria ser um subtítulo ou
22:04aparecer com menor relevância do que as
22:07palavras que eu apresentei com a
22:10marcação H1, tá? Outro exemplo de
22:13marcação que eu aproveito para mostrar
22:15para vocês é a marcação de parágrafo.
22:18Mas eu preciso sinalizar um parágrafo. É
22:21interessante sinalizar um parágrafo.
22:24Ainda que eu não colocasse a marcação P
22:27ali no início, essa informação
22:30apareceria na minha página. Mas ao
22:32sinalizar que é um parágrafo, o seu
22:35navegador vai entender qual a aparência
22:39que essa, aquele pedaço, aquele trecho
22:42de texto deve ter em relação a todo o
22:45documento que está sendo criado. Outro
22:49exemplo de elemento HTML que eu trago
22:51para vocês é uma tabela. Podemos
22:54construir tabela.
22:57A construção da tabela, ela não é tão
22:59simples como estamos acostumados nos
23:02editores tradicionais, por assim dizer.
23:05Neste caso, nós desenhamos
23:08eh textualmente essa tabela. Observe ali
23:12que o elemento começa com a palavra
23:14table, que é de tabela em inglês. E eu
23:17estou usando o valor um pro atributo
23:20border. Isso significa que eu quero que
23:24a minha tabela, quando apresentada no
23:26navegador tem uma borda de tamanho um.
23:31Se eu aumentar esse valor, essa borda, a
23:34espessura dessa borda vai ser maior. Se
23:38eu tirar esse atributo ou colocar o
23:40valor zero, as informações serão
23:43apresentadas na forma de uma tabela sem
23:46bordas.
23:47Quando construímos uma tabela,
23:50temos que sinalizar pro nosso navegador
23:53onde começa a linha, onde começa uma
23:56célula, aonde essa célula termina e
23:59aonde aquela linha termina.
24:02Observe nesse caso que eu tenho a
24:05marcação da linha como por meio da do
24:09elemento HTML chamado TR de table row,
24:14linha de tabela em inglês.
24:17Se você fizer o mapeamento das
24:20informações que estão no código pro
24:21posicionamento delas dentro da tabela,
24:25você verá que módulo, as palavras módulo
24:28e conteúdo nada mais são do que o
24:30título. a linha de título dessa tabela,
24:33o cabeçalho dessa tabela. E para isso eu
24:36uso a marcação. Para sinalizar que essas
24:39palavras são essa marcação, são esse
24:42cabeçalho da minha coluna, eu uso a
24:45marcação
24:47th de table header. As demais, os demais
24:51dados da tabela serão sinalizados pela
24:54marcação TD, table data, dados de
24:59tabela. Então, observe ali naquele
25:02código que eu tenho.
25:04Abro uma marcação TR, abro uma marcação
25:08th,
25:10informo o nome e o título daquela
25:12coluna, faço o fechamento daquela
25:15coluna, daquela coluna, daquela célula,
25:20abro uma nova célula dentro daquela
25:23linha, ou seja, estou construindo uma
25:26segunda coluna dentro daquela tabela e
25:29fecho também essa célula.
25:33Posteriormente faço o fechamento daquela
25:36linha. Então, se eu executar só aquele
25:39primeiro bloquinho, apareceria aquela
25:42parte da minha tabela, onde aparece
25:43módulo e conteúdo. Para que eu construa
25:46a linha de baixo, novamente, eu começo
25:50com TR. Dessa vez vou usar o TD, porque
25:54agora são os dados da tabela.
25:57Coloco a informação que está presente
26:00nessa nessa célula. Faço o fechamento da
26:04célula com barra TD, abro a próxima
26:07célula, faço o fechamento e faço o
26:11fechamento da linha. E isso eu vou
26:13repetir indefinidamente enquanto tiver
26:16informações para preencher na minha
26:18tabela. Ao final, é importante que você
26:22faça o fechamento da tabela, colocando a
26:25marcação barra table para sinalizar que
26:28a sua tabela foi concluída. Tudo bem?
26:31Experimente digitar esse código,
26:34experimente ver eh as alterações no seu
26:38navegador e mais que isso, insira a
26:42célula, mude o conteúdo, veja o que que
26:45acontece. É muito importante que a
26:47partir de agora você explore essas
26:50marcações, esses elementos, para que
26:52você possa se apropriar deles.
26:56Voltamos aqui à questão da nossa imagem.
26:59Imagine que eu queira colocar a logo da
27:02UFMS em um documento HTML. Então,
27:06colocaria um parágrafo dizendo logo da
27:08UFMS e a imagem logo abaixo. O código
27:12correspondente é esse que você vê à
27:14esquerda no slide.
27:16Marcação P para sinalizar que é um
27:18parágrafo. Logo da UFMS,
27:22marcação IMG,
27:25para sinalizar qual é a imagem que eu
27:28quero inserir. Neste caso, estou
27:31colocando o arquivo fms.presentação
27:37e como texto pro atributo out estou
27:41falando que é identificação da UFMS.
27:45Se você está prestando atenção nesta
27:47aula, você deve estar se perguntando:
27:50"Cadê a tag de fechamento, cadê a
27:52marcação de fechamento da marcação IMG?"
27:57Eh, ainda que eu tenha dito para você
27:59que toda marcação tem o início e tem o
28:01fim, algumas marcações especiais, em
28:05algumas alguns casos especiais, essa a
28:08martação não tem uma tag de fechamento.
28:12Isso ocorre, por exemplo, com a tag IMG.
28:15É por isso que ela não aparece aqui um
28:18barra img logo após eh a inserção da
28:23imagem, correto?
28:26aqui reforçando novamente aquilo que eu
28:28mencionei anteriormente. Então, para
28:31essa marcação IMG, nós temos a indicação
28:34do arquivo que vamos colocar. E aqui
28:38gostaria de fazer uma observação que eu
28:41tanto posso sinalizar o arquivo físico
28:46imagem.jpg, JPG, PNG e outros formatos.
28:51Como eu poderia, por exemplo, sinalizar
28:53um endereço na internet que contém essa
28:56imagem, o endereço da imagem, correto?
29:00Então, eu tenho, eu quero mostrar
29:02naquele ponto do meu documento uma
29:04imagem que está no site da GAD. Então,
29:09aad.fms.jpg, fms.br/logodagad.jpg.
29:15Ela será apresentada aqui. Novamente tô
29:19destacando aqui os atributos
29:23do texto alternativo e de largura e
29:26altura. Conforme a evolução da HTML, é
29:30muito provável que você encontre
29:32diferentes maneiras de utilizar esses
29:34atributos. Não se preocupe quanto a
29:37isso. Eh, é importante que você tenha um
29:40bom guia de referência e vamos falar
29:43sobre isso daqui a pouco, mas você pode
29:46usar as duas maneiras, correto? Outro
29:50elemento que gostaria de mostrar,
29:52apresentar para vocês neste momento são
29:54as chamadas listas não ordenadas. O que
29:57que é uma lista não ordenada? é uma
30:00lista com marcadores,
30:02um igual o exemplo que aparece aqui à
30:04direita no nosso slide, onde eu tenho,
30:07por exemplo, uma lista de tarefas.
30:11À minha esquerda, à esquerda do slide,
30:13eu tenho o código correspondente a essa
30:15lista de tarefas.
30:17Novamente eu tenho, estou usando para
30:21sinalizar o título da lista a marcação
30:24H3, ou seja, um título de nível três. E
30:29para sinalizar o início da minha lista,
30:32eu uso a marcação
30:34L. o L eh muito das marcações, dos
30:38elementos HTML que você irá conhecer,
30:43eles derivam das palavras em inglês.
30:47Então o L nada mais é unordered list,
30:50lista não ordenada.
30:53E para sinalizar quais são os elementos
30:56dessa lista, nós usamos a marcação li de
31:00list item ou item da lista. Então, o L
31:05marca o início da minha lista e cada um
31:08dos itens dessa lista será apresentado
31:11entre as marcações
31:13li/lii.
31:17Você deve estar se perguntando agora, e
31:18se eu quisesse fazer uma lista ordenada?
31:23A diferença entre uma lista não ordenada
31:25para uma lista ordenada é que em vez de
31:28marcadores,
31:29eu tenho uma numeração ou letras que
31:32indicam uma sequência.
31:35O exemplo é o mesmo e nesse caso, a
31:38única alteração é o elemento HTML que
31:41vamos utilizar. Se anteriormente
31:43usávamos a marcação UL, agora vamos
31:48utilizar a marcação OL de ordened list
31:53ou lista ordenada.
31:55Isso é o suficiente para que possamos
31:58mudar uma lista de lista não ordenada
32:01para uma lista ordenada. Uma pergunta
32:04que você poderia me fazer neste momento
32:07é a seguinte: e se eu quiser começar a
32:11minha lista no item cinco ao invés do
32:14item um?
32:16ou se eu quiser usar um quadrado ao
32:20invés de um marcador redondo. Existem
32:23atributos que você pode utilizar
32:26associar aos elementos e o L para
32:30definir quando a lista ordenada começa
32:35ou qual o valor de início da lista
32:37ordenada ou qual elemento você deseja
32:40utilizar como marcador de uma lista não
32:44ordenada.
32:46Ainda uma outra pergunta.
32:49E se eu quiser fazer uma lista alinhada,
32:52uma lista dentro de outras listas? Por
32:56exemplo, se entre as minhas tarefas eu
32:58quiser detalhar quais são as tarefas que
33:00eu tenho que fazer, basta combinar os
33:03elementos. E essa combinação dos
33:05elementos ou essa combinação de
33:07elementos HTML é basicamente o processo
33:10de construir uma uma página paraa web,
33:14um site dentro de uma página, dentro de
33:17um de um site. Boa parte do nosso
33:20trabalho é ir combinando elementos para
33:22alcançar o resultado desejado. Posso ter
33:26tabela com imagens
33:29dentro da célula, posso usar eh uma
33:33imagem eh
33:36como um elemento do meu texto, eh posso
33:40querer ter um título seguido de uma
33:44imagem. Então essa a combinação que
33:46vamos fazer a partir de agora.
33:49Chamo atenção para você que assim como
33:52na matemática, onde tínhamos a ordem dos
33:55elementos numa expressão, aqui também
33:57devemos seguir essa mesma ordem no
33:59processo de abrir as marcações e
34:01posteriormente fechar.
34:04Observe no código apresentado que eu
34:06tenho OL,
34:09tenho o Li para sinalizar os itens e no
34:13momento, no ponto onde eu desejo abrir o
34:16o alinhamento, construir uma sublista
34:19dentro dessa primeira lista, novamente
34:22eu faço abertura dessa lista usando o
34:24ol. Você já deve ter percebido que eu
34:28poderia fazer uma lista ordenada com uma
34:32lista não ordenada dentro dela. E o
34:35inverso também é verdade. Se ao invés
34:39desse segundo OL eu substituir por um
34:42ul, pelo elemento UL, ao invés de
34:47encontrar, continuar ou fazer uma
34:49numeração ali dentro, eu vou ter uma
34:53lista com marcadores. Tudo bem?
34:58Bom, eh, como fazemos o vínculo de uma
35:02página com a outra? Lembra do hipertexto
35:05que comentamos lá no início da da nossa
35:08aula? é o elemento HTML chamado a que
35:13permite criar um link, que permite criar
35:17um vínculo com outra página ou com outro
35:21site. O uso eh dessa marcação A é
35:26bastante simples. Você vai colocar a
35:29marcação A e os atributos HF.
35:34Nesse HF você vai sinalizar outro
35:37arquivo HTML. que, por exemplo, esteja
35:41no mesmo diretório que o arquivo que
35:43você está editando, ou você vai
35:45sinalizar um endereço, o um endereço na
35:50web, uma
35:53por exemplo, http/
35:58aad.fms. fms.br.
36:02Este é o endereço da web eh
36:05http2/wwwfms.br.
36:09Esse é o endereço da nossa página da
36:12nossa universidade.
36:14Eu sempre recomendo, se for necessário,
36:17que você coloque o atributo target. O
36:20atributo target sinaliza aonde essa nova
36:24página vai ser aberta. E neste caso do
36:27exemplo com o_blank,
36:30ele sinaliza que essa página será aberta
36:33em uma nova janela. Sabe quando você
36:36clica com o botão direito do seu mouse
36:38sobre um link e pede para abrir numa
36:40nova janela?
36:41É exatamente isso que vai acontecer
36:44quando alguém clicar nesse link que tá
36:47disponível aqui. Neste caso, ao clicar
36:51no link, uma nova janela será aberta e a
36:54página da Universidade Federal de Mato
36:56Grosso do Sul será carregada nessa nova
36:58janela aberta. Como eu falei
37:01anteriormente, eu poderia, ao invés de
37:03colocar o texto o Universidade Federal
37:06de Mato Grosso do Sul, entre parênteses,
37:08o FMS, como texto para esse link, eu
37:12poderia ter feito o uso do img para
37:15sinalizar uma imagem como sendo a
37:18referência desse link. Aqui outros
37:21exemplos. Então, eu tenho ali o nome do
37:24arquivo ou a URL de destino.
37:28Eu posso colocar um texto, uma imagem ou
37:31até mesmo outro elemento como sendo eh
37:35como compondo esse vínculo para essa
37:38outra página. Isso é muito útil quando
37:41desejamos criar, por exemplo, um menu
37:43simples, como tá representado aqui neste
37:48no nosso slide. Eu tenho ali home,
37:52notícias, contato e eu tô sinalizando
37:55quais são as páginas que serão
37:59eh visitadas caso eu clique numa dessas
38:01opções.
38:05Aqui eu trago outros exemplos de
38:08formatação de textos para vocês
38:11e vocês vão poder explorar essas
38:14formatações,
38:15brincar com essas formatações para poder
38:18aprimorar esse conhecimento de vocês. É
38:21importante que você pratique, que você
38:24se aproprie desses elementos.
38:27Ah,
38:30estamos chegando ao final da nossa da
38:32aula da nossa segunda unidade do
38:34primeiro módulo. Como eu disse, é
38:37importante que a partir deste momento
38:39você se aventure com a linguagem HTML.
38:44Assim como qualquer outra linguagem,
38:46esta é uma linguagem que precisa ser
38:48praticada, a gente precisa ganhar
38:50fluência com ela. E a melhor maneira de
38:53praticarmos é usarmos a linguagem,
38:57brincarmos com essa linguagem, como eu
38:59costumo dizer, criando, entendendo como
39:03é que os elementos funcionam, alterando
39:05esses exemplos que foram passados e que
39:07estão disponíveis para vocês, para que
39:10vocês possam entender o que que cada
39:12elemento tá fazendo, como cada atributo
39:15funciona, o que acontece ao alterar um
39:17atributo, o valor de um atributo. Uma
39:21dica que eu deixo para vocês neste final
39:23de aula é visitar a página do W3 School.
39:27Ele funciona como um excelente guia de
39:29referência, trazendo exemplos e
39:31mostrando como utilizar esses elementos.
39:35Como vocês viram, parte desse conteúdo
39:38tem uma forte relação com a língua
39:40inglesa. Então, recomendo que vocês usem
39:42os as ferramentas disponíveis nos
39:45navegadores para traduzir a página, caso
39:48tenham dificuldade com o idioma. Eu
39:50deixo aqui no slide eh a dica de como
39:53você pode traduzir automaticamente essa
39:56página e facilitar a sua compreensão.
39:59Chegamos ao final da nossa aula. Eu
40:01espero que você tenha se sentido
40:03estimulado a se aventurar no HTML. Eu
40:06espero que você pratique e tenha
40:10condições de absorver este este
40:13conhecimento. Ele vai ser importante
40:15para os demais módulos do curso e ele é
40:19utilizado até hoje na no processo de
40:22construção de páginas. Então é
40:24importante que você se fortaleça, que
40:26você absorva este conteúdo.
40:30Agradeço a sua atenção e desejo a todos
40:33bons estudos.

About this transcript

This page contains the full transcript of [UFMS Digital] Fundamentos de Web - Módulo 1 - Unidade 2 by AGEAD UFMS, generated from the public captions YouTube serves with the video. The transcript has 4,848 words across 809 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.