HTML para Iniciantes | Fundamentos da Programação - Ep 001

Oi e aí quem topa estudar comigo as bases da programação começando hoje no primeiro episódio tratando sobre HTML para iniciantes vai ser uma série incrível nós vamos falar de html CSS lógica de programação JavaScript frameworks banco de dados conceitos essenciais a programação tudo isso de uma forma sequencial que faça sentido que você possa ver na playlist daqui a um ano e essa série ser extremamente relevante daqui há dois anos também a gente vai colocando novos episódios e colocando numa sequência que te ajude a entender as bases da programação por isso por favor deixa o like

interage aqui no vídeo para o YouTube o like significa que esse conteúdo é relevante e vai atingir mais pessoas coloca o comentário compartilha esse vídeo Porque sem dúvida e isso vai fazer um grande diferença para o nosso canal a sua forma de retribuir o trabalho que a gente está disponibilizando aqui para vocês eu tenho certeza que a série vai impactar demais a tua carreira vai impactar demais a tua jornada aquelas pessoas que estão iniciando na programação que estou na faculdade às vezes estão perdidas que estão no processo de transição de carreira Sem dúvida essa série

de vídeos vai te ajudar e outros vídeos que eu vou colocar aqui durante a aula mostrando para vocês alguns vídeos nossos que pode sem dúvida te ajudar bastante e eu só nós vamos agora iniciar a nossa aula HTML para iniciantes se você nunca viu na vida pode ficar nesse vídeo que eu tenho certeza que você vai aprender bastante sobre html no final vou dar a dica de um outro vídeo nosso para você continuar os seus estudos na parte prática Então vamos lá eu vou começar colocando a sigla HTML eu não vou falar o que eu

H nem o que é o m nem o que é o l mais o te de html de text ou seja de texto Então nós vamos começar o nosso estudo aprendendo o que seria construir um documento através do HTML Eu quero fazer uma analogia com você então para isso nós vamos escrever um documento que documento imagina que você está aí no Google Docs ou no colder Docs e dentro dela e você vai querer por exemplo escrever um artigo Então você começa a escrever no seu artigo colocando lá um determinado o título seu e por exemplo

meu artigo quando você coloca simplesmente um texto você escreve você é eventualmente quer colocar algum tipo de estilo lá eu quero que esse texto represente um título do meu artigo ou eu quero que esse texto fica em Então nesse caso nós temos um título e se você olhar na barra de menu Você tem o tipo de fonte usada você tem Itálico sublinhado E você tem os títulos né eu coloquei H1 como se fosse o header um é o cabeçalho um título aí h21 de segunda a importância um de terceiro em importância e tem outras coisas

como alinhamento à esquerda Centralizado a direita justificado e você tem aí listas então eu coloquei aí de propósito alguns ícones do nosso Google Docs falsificado aqui para a gente entender um pouquinho que esses elementos estão presentes mesmo quando você digitar um texto no Word ou por exemplo no Google Docs estão se eu quero marcar esse e como título eu vou lá Aperta o botão e ele vai ter por exemplo uma caracterização de um título vai ficar maior vai ficar com letra mais forte para ficar claro que isso se trata de algo extremamente importante dentro do

seu documento continuando o próximo passo é você por exemplo colocar lá uma sessão um subtítulo um título de segunda a importância é você pode ir lá marcar que aquele título é um título por exemplo é secundário ele vai ficar com uma cor ligeiramente diferente vai ficar com o tamanho também diferente mostrando que ele tem digamos assim uma importância secundária dentro do seu documento se você continuar você pode estar parágrafos outras sessões e você vai escrevendo o seu documento e aplicando esses estilos isso acontece dentro de uma ferramenta como o Google Docs dentro de uma ferramenta

como o Word Mas isso também tem muita relação com que a gente vai encontrar dentro do HTML se a gente analisar esse documento você vai perceber que nós temos um título principal nós temos um título secundário nós temos um parágrafo nós podemos ter potencialmente no nosso documento listas por exemplo a lista que não a ordem não importa o lista não-ordenada ou uma lista ordenada Você pode ter potencialmente uma tabela no seu documento Você pode ter um link Você pode marcar palavras com Você pode ter citação tudo isso que eu tô falando Tem uma relação muito

próxima com aquilo que a gente vai encontrar também no HTML Como assim Léo HTML serve para o construir documentos também ele serve para construir documentos mas ele vai servir para você construir suas páginas e nas suas páginas você vai ter potencialmente parágrafos títulos Lins e outras coisas que a gente vai mencionar então esses elementos essa analogia de elementos que você encontra dentro do Google Docs por exemplo você também vai encontrar esses elementos dentro do nosso HTML lembra que da sigla HTML ou e agora com a letra T que a letra do texto né E aí

depois eu não vou dizer por enquanto Quais são as outras letras Mas então a letra T que representa um documento textual e essa sigla também tem muito a ver de como a internet começou há décadas atrás então inicialmente os documentos escritos em HTML eram documentos prioritariamente textuais a gente vai falar um pouquinho mais sobre isso durante a aula certo tem uma pergunta que vem na sequência exatamente essa que eu coloquei na tela como é que eu posso representar um documento usando HTML já que eu comecei a aula e dizendo que a letra T de html

representa um texto e eu fiz um paralelo por exemplo com o Google Docs que você tem títulos parágrafos subtítulos você tem listas tabelas como é que eu posso representar isso em HTML para que a gente possa representar isso usando HTML a gente precisa de mais duas letras da em HTML que a letra m e a letra L que é exatamente markup que quer dizer marcação e vou já mostrar para vocês e o l de linguagem de lenguas marcar language O que é esse marcado o que é que significa isso marcar aqui quer dizer marcação a

gente também usa como sinônimo de marcação a palavra tag é muito comum a gente usar tag a Escreva aí uma tag que representa um cabeçalho uma tag que representa um parágrafo e a gente vai construindo um documento usando essas marcações ou essas tags por isso que o nome da linguagem HTML e uma linguagem é uma forma de você representar um documento não só um documento eu vou mostrar para vocês que HTML é super poderoso juntamente com outras tecnologias como é o caso do CSS e do Java script que nós veremos em aulas futuras mas é

um linguagem sim a linguagem HTML e uma linguagem de marcação e a gente usa a tag vamos entender como é que eu faço para pegar por exemplo o meu título título do meu documento que eu comecei mostrando para vocês e eu quero representar esse título em HTML e para isso nós vamos usar essa representação Olha o que tá escrito aí né você tem menor que em amarelinho essas cores eu coloquei mais para facilitar seus cores não necessariamente não sei exatamente essas dependendo de onde você colocar e se você usar alguma ferramenta muito simples como é

um multipad você tiver no Windows que abriu no outro pede e digitar essas coisas você consegue digitar tranquilamente embora vai ficar sem nenhuma culpa certo então você tem um símbolo de menor que H1 e o símbolo de maior que aí eu coloquei o título meu título em português né meu artigo e no final eu coloquei menor que uma barrinha H1 e maior que esse H1 pegando especificamente a letra h representa um header quer dizer um o ou em outras palavras em pode traduzir para um título por exemplo Então você tem um cabeçalho um header é

um título dentro da sua página que tem uma importância um ou seja uma importância primária por isso que eu coloquei o título principal o título primário seria o H1 Então essa é uma forma de representar um título dentro da linguagem de marcação e você vai ver no futuro que esse H1 aqui ó ele representa uma tag então isso a gente também chama de tag que é uma marcação dentro da linguagem continuando eu também posso representar o mesmo título só que em linha separados eu coloco o h um em cima o título no meio e o

outro H1 embaixo nós que tem apenas 1 única diferença da parte superior para a parte inferior que é o fato que tem uma barra adicional isso é proposital e isso faz parte da forma como você escreve a linguagem HTML Então quando você definir o marcação a marcação é uma das formas e vou mostrar para vocês e outras formas você tem aqui no início da marcação e um final e a diferença do início para o final Exatamente Essa Barrinha e um outra coisa curiosa sobre HTML é o fato de que se você coloca vários espaços o

HTML vai desconsiderar esses espaços porque para que você coloque espaços você tem que colocar alguma marcação para isso tudo é feito em cima de marcação ou seja para você dizer que o determinado trecho a você usa o marcação para dizer que um trecho ele representa um título você usa uma marcação para dizer que você quer por exemplo acrescentar um espaço você usa marcações então para isso você vai usando sempre marcações o resto é ignorado tão por exemplo quebras de linha espaços tem algumas pequenas exceções mas na grande maioria os espaços serão ignorados a não ser

os espaços entre as palavras mas se você colocar os passos por exemplo eles vão ser ignorados A não ser que você coloca alguma marcação para indicar que você quer por exemplo tem um espaço maior entre duas palavras então continuando nós temos aí um título secundário ou seja o título primário era o H1 E Agora Nós temos O H2 a forma de escrever igual tão menor que H2 maior que Aí você coloca o conteúdo escrito lá do seu do seu título secundário E aí depois você fecha da mesma forma você tem aqui ó o menor que

uma barrinha oh2 e o maior que você já mesma forma que você usou para escrever o H1 você escreve H2 a diferença aí apenas o número 2 e o conteúdo obviamente colocando o número dois Deixa claro para o documento que se trata de um título de segunda ordem menos importante do teu título H1 uma coisa que vale a pena mencionar mas não vale a pena me aprofundar muito é a forma com que esses títulos São os resultados de forma visual não significa que sempre que você colocar um H1 ele vai ter uma letra de um

tamanho específico de uma cor específica com uma força específica né vai estar mais forte um ou não essa representação visual ela pode mudar bastante o que vai dizer que o título é mais importante do teu outro não é se ele é maior ou menor se ele tem uma cor vermelha ou se ele tem uma cor verde o que Vai representar isso é o tipo de marcação que você vai usar se você usa uma marcação h11 h11 é um título mais importante porque vagadores se você usa uma marcação H3 que existe existe até uma Garcez então

H1 H2 H3 H4 h5 eh6 ou seja esses seis níveis de títulos representam do mais prioritário que eu H1 até o menos prioritário que eu h-6 a forma de representar e por exemplo inclusive igual eles podem ter o mesmo tamanho de fonte até a mesma coisa é a mesma estrutura normalmente isso não acontece a gente tenta visualmente mostrar um título mais importante do que o outro mas não é a representação visual que vai definir que um título ele tem o maior importância ou menor o que vai definir é exatamente a marcação já que o HTML

é uma linguagem de marcação você vai ter o seu texto escrito e você vai colocar a marca ações e de acordo com essas marcações o texto será interpretado falando interpretação ou seja Alguém precisa ler um documento HTML por exemplo se você tem um documento. DOC o ponto docges você vai abrir esse documento dentro do Word na Microsoft e se você tem por exemplo uma extensão. HTML significa que esse documento precisa se aberto por algum tipo de aplicação Quais são os o que vão interpretar o arquivo HTML todos os navegadores né os browsers Como por exemplo

o Chrome O Firefox e Internet Explorer wedge qualquer ou se você usa a Apple né Você tem um safári todas essas aplicações entendem de um documento HTML então se você vai lá no Notepad cria um texto escrevendo HTML salva o arquivo com extensão. HTML e abri ele dentro do browser do Cromo e por exemplo você vai ver o seu documento HTML sendo impresso inclusive com tudo aquilo que você colocar títulos tabelas e listas e vai funcionar super bem continuando aqui na nossa jornada com relação as marcações Agora Eu Tô mostrando para vocês usando a mesma

estrutura menor que o nome da marcação o nome da tag e o símbolo de maior que e o conteúdo interno e o fechamento né Você tem um abertura eo fechamento isso pode ir é a única linha ou em várias linhas Aqui nós temos uma tag que representa um parágrafo ou seja enquanto o H1 representa um título mais importante ou seja o título principal a tag P representa um parágrafo se a gente continuar você vai ver por exemplo como a gente pode representar uma lista dentro do HTML eu coloquei só a lista não os itens por

enquanto Coloquei até as interrogações Então você tem uma tag de abertura menor que o l o que é esse Suelen a letra L representa lista e a letra um representa um Order Ou seja é uma lista não-ordenada e a gente vai ver que existe um outro lista ordenada eu vou já mostrar para vocês Então primeiramente o definir uma tag que representa uma lista coloquei a abertura eo fechamento da lista como é que eu vou representar os itens agora vou mostrar para vocês no outro slide a gente vai usar o l i que seria list item

o item da lista E aí vocês percebem que é possível eu colocar uma tag dentro da outra quando a gente pensa num documento HTML um documento que usa essa linguagem de marcação que tem a ver com um texto eu vou já depois falar lá no finalzinho que a letra h mas o fato é que nós podemos ter uma pegue dentro da outra montando a estrutura do documento Então nesse caso nós temos uma tag o Hélio que representa uma lista não-ordenada e temos as tags helix né que são várias tags aí nós temos cinco tags já

que nós temos cinco itens na lista e aí você percebe quando eu uso por padrão a tag alinir automaticamente ele coloca uma bolinha do lado do nome então bolinha arroz bolinha feijão de novo essa representação de colocar uma bolinha é a forma padrão Mas a gente pode mudar e customizar isso fazer de uma forma completamente diferente então aí é uma forma a mostrar uma lista no HTML e aí uma das Diferenças aqui Desse exemplo é o fato de ter uma tag dentro da outra se a gente mudar para uma lista ordenada basta mudar apenas a

tag de fora ou seja em vez de U L nós temos o Hélio que representa o l continua representando lista e o agora representa ordenado né ordem lixão lista ordenada Então dentro dessa lista ordenada nós temos de novo elementos do tipo l i ou marcações do tipo ali ou tags do tipo ali você pode chamar qualquer uma das três formas elemento tag ou marcação E aí o que vai mudar na representação é que ele vai colocar automaticamente os números né primeiro Pedro 2º ano 3º Rafael quarto Bianca quinto Alberto uma observação aqui no lista não-ordenada

por exemplo lista de compra você não tem necessariamente que seguir aquela ordem por isso que você usa o Wesley e no caso de uma lista ordenada se você quer mostrar por exemplo o ranking dos melhores alunos da sala faz sentido você usar uma lista ordenada então perceberam que sempre tem por trás da Escolha das marcações um significado ou seja algo que você quer representar então é melhor você usar a representação correta para cada tipo de representação de dados que você queira é dar por exemplo aí você também tem uma tag tabela que representam tabela não

vou mostrar agora o corpo de uma tabela mas você tem uma tag para representar uma tabela para representar a coluna de uma tabela a linha de uma tabela tudo isso você tem dentro do HTML e aí nesse ponto você pode estar se perguntando Léo e o HTML Só serve para texto porque eu acredito que não porque a gente acessa muitas aplicações a incríveis na web que usam HTML talvez se você não saiba mas essas grandes aplicações que você usa YouTube e-book Twitter os grandes sites portais todos eles usam HTML mas a gente sabe que esse

site tem muito mais do que apenas texto tem mídias tem outras coisas que a gente vai comentar aqui então HTML só suporta texto não embora o nome da linguagem seja HTML né text markup language devagar vou falar depois o HTML ele foi evoluindo com o tempo você seja essa linguagem é a linguagem que foi criada lá nos primórdios da web E aí essa linguagem vem sendo evoluída e ela suporta mídias por exemplo se você vai encontrar uma marcação uma tag que representa uma imagem você vai encontrar uma tag que representa um áudio uma tag que

representa um vídeo ou seja todas essas marcações estão disponíveis para que a gente possa usar tem uma marcação inclusive que você consegue fazer um desenho da forma que você queira ou seja o HTML ele tem se desenvolvido para a ganhar as demandas da web se você for observador você vai perceber que a forma como eu escrevi essas tags é um pouco diferente da forma anterior enquanto na forma anterior a gente tinha a tag de abertura e a tag de fechamento aqui eu criei apenas uma única tag colocando aqui ó em Barra no final dessa tag

e a gente vai ver isso com mais calma logo na sequência Mas além de você ter essas tags textuais te tags para você exibir mídias imagens áudio vídeo você também tem tags para representar formulários botões Campos de entrada para você representar uma data para você selecionar uma cor para você colocar um e-mail você colocar uma senha que tem aquelas bolinhas né que não aparece o texto digitado tudo isso está à sua disposição dentro do HTML então por exemplo pegando e sim formulário aí que eu coloquei você tem eu vou começar de baixo para cima você

tem lá embaixo botões Você tem o salvar e o sair mas Léo esses botões estão diferentes ele tem uma cor o debaixo não tem uma cor de fundo tudo isso você consegue personalizar a gente vai falar um pouco mais sobre isso na próxima aula com a gente vou falar sobre CSS que é uma outra linguagem que a gente usa juntamente com HTML você tem aí uma área de texto chamada text here e esses nomes que eu tô colocando Button text here impulsão nomes de tags que você vai usar dentro do seu documento HTML você tem

Label por exemplo E você tem o H1 que a gente viu que é o título E você tem por último lá em cima uma tag especial chamada div uma das características dessa tag div quer dizer de virgem ou divisão ela não é visual Ela não acrescenta absolutamente nada visual mas ela serve para criar como se a caixa uma caixa invisível e para você colocar elementos dentro dela e o legal de você criar uma caixa invisível colocar elementos dentro dela é que se você quiser mover todos os elementos de um lugar para outro como você tá

dentro de uma caixa basta mover a caixa que todos os elementos aqui dentro serão ouvidas então a gente usa demais para construir as nossas páginas essas divisões essas seções dentro de uma página aqui a sessão do meu cabeçalho aqui a seção do menu da aplicação aqui a a sessão do rodapé Então você usa muito Advil por exemplo tem outras tags que servem também para isso propósito mas a gente vai por enquanto deixar apenas a devia aí como uma referência importante Ou seja é uma caixa quadrada a priori quadrada você pode mexer na forma dela e

dentro você pode colocar elementos e mexer tudo isso juntamente Então se tudo isso aí representa uma div toda essa parte a e como os elementos representam uma div se eu quiser mover essa caixa da esquerda para a direita eu posso simplesmente mexer ela que ela vai todos os elementos vão juntos porque está dentro de uma única área no caso aqui uma diva então é uma tag uma marcação especial extremamente importante dentro HTML que é para agrupar outros elementos então só mostrando para vocês Que esse conceito demarcação continua exatamente o mesmo se você sair do âmbito

do texto se você for por exemplo pare de formulários para você definir um botão basta colocar batom dentro das tags das marcações você coloca o texto que você quer que seja inscrito no botão e finalmente fecha ele colocando menor que o barra e o mesmo nome da abertura você coloca no fechamento Então você tem aí a definição de um botão a eu quero definir uma entrada de dados ou seja um input uma entrada Vou colocar uma entrada de texto uma entrada de senha a ata e várias formas que você tem para criar vários elementos dentro

do HTML para gente conseguir agora entender um pouco mais essas marcações percebam que nem esse exemplo aqui no input eu simplesmente coloquei input sem o fechamento Será que eu errei ou será que eu coloquei de propósito porque o botão tem abertura e o fechamento e um texto no meio já o input ou simplesmente coloquei isso isso está certo e a gente vai ver um pouquinho dessas características nessa parte chamada Anatomia da tag ou Anatomia da marcação Anatomia de um elemento HTML Então vamos lá a primeira anatomia que eu quero mostrar para vocês é essa anatomia

que a gente viu lá desde o começo desde H um que você tem uma tag de abertura eu tô colocando o nome tag que é o nome genérico você substitui onde tem pegue por H1 H2 batom é input e outras tags está algumas tags não precisam ter essa forma de escrever porque o corpo mais alguma assim por exemplo nessa forma que eu escrevi aqui se eu voltar alguns slides você vai ver que o botão segue essa lógica Você tem uma tag de abertura uma tag de fechamento e uma parte dentro da tag que é o

corpo da tag no caso e o corpo da tag apenas o nome do botão que eu quero salvar mas se eu quisesse um botão por exemplo com o ícone então eu colocaria dentro do corpo da pegue o ícone uma imagem por exemplo então voltando aqui então nós temos a tag de abertura e a tag de fechamento então é exatamente isso que eu estou mostrando aí ó fechamento em baixo com a Barrinha em cima até de abertura E no meio Eu tenho um corpo da tag continuando nós temos uma tag que fecha automaticamente que não tem

abertura e fechamento Ela tanto abre como fecha na própria tag a gente chama isso né no termo em inglês seria o céu florzinha ou seja ela se alto fecha então você não precisa nesse tipo de tag ter é pura e o fechamento e uma outra representação para esse tipo de tag é você simplesmente colocar a tag assim você coloca a tag sem a Barrinha ela é uma self-closing ou seja ela fecha automaticamente as Você pode perguntar porque que eu usaria uma tag dessa forma quando você não precisa colocar nada dentro do corpo da tag existe

alguns exemplos que você não precisa colocar nada dentro do corpo da tag então basta você colocar a tag assim que o browser não é o Chrome eo Firefox Safari todos esses braços vão entender que é uma tag que se alto fecha beleza chegou até aqui moleza aprendi tudo finalizando HTML ainda não tem mais algumas coisas relacionadas a sintaxe e anatomia da tag que são muito importantes por exemplo o fato de que a tag pode ter atributos né ou seja as tags podem ter atributos então a forma de escrever é o seguinte você se apegue tá

então o símbolo de menor que o nome da tag espaço não pode colocar junto então espaço aí eu coloquei de forma genérico atributo igual a valor então você tem algum atributo daquela tag e a gente vai mostrar alguns exemplos reais daqui a pouco Então essa é a forma que você pode ter então além de ter a estrutura básica da tag que a gente viu até aqui as tags podem ter atributos Então essa é uma tag que se alto fecha né selfie close e você tem os atributos dentro dela você pode eventualmente quebrar isso e mais

de mainha não tem problema então tag aí atributo igual a valor e na linha de baixo coloca o barra e o símbolo de maior que para fechar a tag não tem problema você é quebrar uma tag em várias linhas Isso não é um problema não sei que você quebre no meio então por exemplo eu não posso quebrar linha no meio entre a letra t e a letra A da palavra tag não posso quebrar no meio então se eu colocar por exemplo uma tag e eu não posso colocar um h espaço um tem que colocar H1

juntos já que se trata de um nome próprio dentro da linguagem que precisa ser respeitado Você pode ter uma tag com vários atributos então eu coloquei aí de forma genérica não é o nome tag e forma genérica atributo um igual a valor um atributo dois igual a valor do atributo três era para ser um três aí o repetiu dois né valor três no caso as "duplas elas podem ser" duplas para representar um valor textual ou "simples não tem problema mas o texto eu preciso estar dentro de" seja "simples o" duplas continuando aqui você também pode

ter atributos e uma tag que tem corpo Lembrando que os atributos sempre estarão na tag de abertura e nunca estarão na tag de fechamento certo então isso é importante então tag Você tem os atributos o corpo da tag e o fechamento da tag embaixo então mostrando para vocês exemplos práticos de atributos de uma tag quando você cria uma tag input e você vai lá e coloca o atributo Type quer dizer tipo igual a date automaticamente você vai ter um impulso e transformado para um calendário como é isso que eu mostrei para vocês essa foto eu

tirei do Chrome eu não fiz absolutamente nada fui lá e coloquei input type date automaticamente ele já criou esse calendário aí tá em inglês porque eu acho que o idioma do meu computador está em inglês mas ele cria automaticamente por exemplo se você quiser mudar para um impulso do tipo color Olha como mudou absolutamente tudo a parte da mudança de um único atributo eu tenho a mesma tag-input que é uma tag soft close e não seja ela tá se alto fechando eu não tenho corpo nessa tag e eu coloquei um atributo tipo e não tipo

eu coloquei color ou seja eu quero que seja uma entrada de dados de um Oi e aí ele queria esse botão aqui eu já cliquei e já apertei no mesma coisa do exemplo passado ele cria só essa parte Zinho aqui desse moço essa parte que tem dia mês e ano e aí quando você clica aí ele abre essa janela para você selecionar aqui o dia a mesma coisa em relação a cor ele cria somente essa parte Zinho aqui de cima com a cor selecionada quando você clica ele automaticamente abre aqui para você selecionar a cor

e você inclusive selecionar uma cor fora da página A partir dessa desse conta-gotas aqui então é muito importante você ter essa consciência da anatomia de uma tag e que tanto a tag é importante como as suas propriedades seus atributos também são importantes como eu digo propriedade eu tô falando Que atributos é as propriedades de uma tag os atributos de uma pega exatamente isso que nós estamos vendo nesses dois slides então para a gente finalizar eu queria falar um pouquinho da anatomia de um do em HTML a gente falou Anatomia de uma tag específica e agora

eu quero focar no documento como um todo para que a gente possa entender o relacionamento a relação que existe entre as tags quando a gente olha por exemplo para esse exemplo super básico nós temos aí três pares e tags então nós temos o primeiro Parque é o par x então se eu colocar aqui um slide jamais você vai ver que tem uma setinha apontando abertura dele lá em cima e o fechamento em baixo dentro do corpo de sipar de tags no caso a tag x nós temos outras tags aninhadas uma dentro da outra então nós

temos um segundo par de tags que é o par Y que tem abertura aí na linha 2 e ele termina lá na penúltima linha e você também tem um outro par de tags que é o par Z Note que sempre um passar a dentro do outro não tem como haver uma interseção o que tenha um par dentro do outro certo então sem o elemento estará dentro de outro elemento Essa é a forma como você organiza um documento mais complexo aqui eu coloquei uma tatuagem super clássico no mundo da tecnologia não é programação que é são

duas tags HTML que a tag head na cabeça e a tag corpo bari e as pessoas botam aqui ó aqui é o fechamento da tag você vê o símbolo de menor que o Barrinha nome Red aqui de cabeçalho E você tem que o fechamento da tag aqui a tag final porque tá acabando a cabeça da pessoa e aqui vai começando o corpo e isso representa um documento HTML se a gente olhar um pouquinho aqui de um documento real aqui eu já não coloquei no slide peguei uma foto que eu escrevi para vocês antes você tem

aqui na parte de cima abertura da tag no caso que o nome da tag HTML que envolve todo o documento HTML e você tem embaixo o fechamento do HTML e nós e o resto que está dentro do HTML está dentro do corpo dessa tag Então você tem uma tag que tem aqui é um corpo que tem mais outras duas tags dentro dela que a tag Head e a tag bar Então você tem a cabeça do seu documento com informações genéricas como título do documento e outras questões e você tem um corpo do documento por isso

que o pessoal usa isso aqui né ó terminou o remédio começou o Bari e você consegue ver ó terminou o remédio começou o bar exatamente nesse ponto aqui do documento Ou seja a cabeça e o corpo do documento nesse caso eu coloquei um input do tipo texto usei um outro a propriedade eu posso ter múltiplas propriedades que eu chamei aqui de placeholder e eu vou já mostrar para vocês aqui o resultado que esse placeholder causa dentro do input e nós temos aqui um batom também uma tag que tem abertura e fechamento com o texto aqui

que representa o corpo desse botão seu avançar vocês vão perceber que isso aqui e esse documento bem simples olha aqui ó meu primeiro HTML que está no título da página é exatamente o que eu coloquei aqui dentro do Red e eu coloquei tython Então esse título Meu primeiro HTML ele ficou exatamente aqui ó na água do browser que eu estou usando o Chrome ele colocou aqui meu primeiro HTML a mesma forma como eu coloquei aqui o placeholder que essa propriedade do input Ele simplesmente colocou aqui um texto Dentro do impulso para dizer para você digitar

o seu nome por exemplo então para ajudar o usuário a escrever e saber que ele ia ele deve colocar o nome e finalmente se a gente voltar aqui né E se salvar que eu coloquei dentro de batom foi exatamente o texto que ficou dentro do botão Então esse documento HTML foi criado a partir desse trecho de código aqui e para a gente finalizar nossa aula agora eu quero explicar para vocês porque que tem a letra h de onde vem e essa palavra Reipert ou seja o nome completo do HTML hypertext markup language ou linguagem de

marcação de hipertexto ou um textão né um hipertexto é um texto digamos assim um tem um super texto em algo nesse sentido a ideia do rapper hypertext não é para seguir o Hype não tem nada a ver com isso tem a ver com o fato de que dentro do HTML você tem a capacidade de linkar os conteúdos diferente de um texto pré-internet que você tem uma um livro e dentro desse livro Você tem uma citação para alguma outra obra e você vai citando fulano de tal escreveu essa obra na década de 15 no livro tal

na página tal e falou tal e tal coisa dentro da internet você tem a capacidade de linkar as fontes daí a ideia de você ter um texto e Encantado um texto conectado Olá seja um raiper text então o nome ficou né Reipert text markup language linguagem de marcação de hipertexto mas a gente sabe que o HTML continua sendo uma linguagem moderna é a linguagem se tirar o HTML absolutamente tudo da ueli vai parar certo então HTML é essencial para qualquer coisa que você usa na web e continua a sigla repete mais a linguagem evoluiu e

hoje suporta vídeo áudio streams ao vivo tudo aí que você curte navegando na internet a Twitch em as Lajes as extremos YouTube tudo isso é movido pelo HTML que é uma linguagem de marcação simples de entender as marcações não são complicados e o que você precisa aprender a ganhar vocabulário entender as marcações que estão disponíveis e a partir daí começar a integrar com outras tecnologias como é o caso do CS o que vai dar toda a estilização deixar o seu HTML bonito e também aprender a usar juntamente com HTML e java script que vai levar

o seu HTML para um outro para tomar vai trazer comportamentos ao seu HTML para que você possa realmente escrever não apenas páginas paradas páginas que estão ali sem fazer muita coisa simplesmente mostrando um texto mas criar aplicações reais uma coisa você tem uma página HTML que mostra um artigo que tem título que tem parágrafo que tem listas e tabelas outra coisa é você transformar uma página HTML em uma aplicação como é o caso do YouTube do Twitter e outras ferramentas o próprio médium que é uma ferramenta de mostrar artigos também é uma aplicação que usa

muito além da HTML outras tecnologias né como CSS java script e várias outras que nós vamos navegar é durante essa nossa série de bases da programação e para finalizar eu quero dar a dica de um vídeo dentro do canal da Kodak é o vídeo curso intensivo de desenvolvimento web já tem duas aulas lá e Em breve vou gravar a terceira e mais aulas que a parte prática daquilo que a gente entendeu hoje e formam mais teórica importante até a Teoria é importante você ter esse racional de como funciona as tecnologias para ir você partir para

a prática de uma forma muito mais consciente Então essa aula vai te levar desde o básico até os seus primeiros experimentos com a linguagem HTML é uma aula muito legal já tem muitas visualizações eu tenho certeza que você vai aprender muito e o link da sala está na descrição da uma olhada clica em um link assistir o resto que eu tenho certeza que essa mudança para se tornar um programador está muito mais perto do que você imagina se você chegou até aqui curte e compartilha deixa o like eu pedi No começo eu pedi agora no

fim deixa o like porque isso ajuda bastante o canal a esse conteúdo se espalhado para mais pessoas e mais pessoas conhecerem as tecnologias que são extremamente demandadas pelo mercado então fico por aqui e até o próximo vídeo [Música] E aí [Música] E aí [Música]