SchultzGames
Para tirar dúvidas, crie um tópico especifico na área "Dúvidas em Geral" e aguarde ser respondido. Evite comentar em tópicos não relacionados a sua dúvida :D
TÓPICOS RECENTES:
Tópico:
Postado em:
Postado por:
Meu site de Modelos 3D
Dúvida sobre resoluções de tela
Duvida na AppleStore
Unity - "transform.SetParent()" em 2 objetos move outros objetos
DÚVIDA - ao pressionar andar, o player parece cancelar a gravidade (VÍDEO)
pressionando a tecla abaixar, o player continua andando abaixado (2D).
Fala Pessoal! Saiu mais um trailer do jogo que venho desenvolvendo
[RESOLVIDO] passar de uma animação para a outra rapidamente pelo animator
Unity - PlayerPrefs n são apagados no Celular mesmo Reiniciando o Aparelho
Modeloes 3D do Site Sketchfab
Blender - Modelos Importados transparentes
[PEDIDO]Cololar jogo na loja play store
Como pegar um objeto e fazer ele aparecer em forma de Estamina no Inspector
Procuro Pessoas para Projeto
Algum tutorial de como fazer um app que receba fotos e q fiqu armazenado no
Procuro um time para um jogo de corrida
[RESOLVIDO] Botões de Ataque e Pular carrega duas animações ao mesmo tempo
DEATH ISLAND 0.2.5 SURVIVAL GAME 4 ANOS EM DESENVOLVIMENTO
Player travando na colisão com o chão Unity 2D
Como resolver vazamento de memoria?
Instanciar uma classe nos atributos de outra classe é uma boa prática?
Jogo multiplayer com steam
Unity - Renderizção com Câmera Jogo Lento e travando. Alguém pfv?!
Mini Quarteirão com Texturas 3D VENDA
Controle do braço e cabeça no fps
PRECISO FAZER QUE MEU GAME FIQUE ONLINE
Ativar o objeto correto em Clones.
[TUTORIAL] Como fazer um interruptor simples (Unity 2018)
Preciso de 20 testadores jogo mobile
O Labirinto II - Trailer Oficial
Ue posso divulgar meu game que ainda esta em criaçao aqui no forum?
[RESOLVIDO] Inverter o sprite para a direçao que o personagem anda.
Set Active não a reabiilitado C#
Build APK VR Google Cardbord com video.
[PROGRAMADOR FREELA] $$
Mais Um jogo!
Collider (mesh?)
[TUTORIAL] Deformar mesh com batidas (para objetos, veículos, etc)
WW2 Low poly Pack (Free)
Procuro freelancer
Novo Teaser do jogo Dark Age
Unity Admob Erro
Sombras estão quadradas na build
nao consigo fazer o player sentar no sofa alguem me ajuda
Unity - Ao mudar de scene, todas as Lights são deletadas
210 Linhas de código para inimigo é muito grande?
modelar avatar e skins para um jogo web
ShapeKeys do Blender para a Unity altera áreas próximas
COMO EVITAR QUE UM OBJETO (PLAYER,ITEM ETC...) ATRAVESSE UMA PAREDE.
Ajuda em Script de Verificação de Ação e Reação
unity Failed to load PlayerSettings (internal index #0). Most likely data f
Materiais do Blander não aparecem no MeshRendere do Objeto na Unity
Repetiçoes de Textura no Terreno
SERVER IS DOWN - UNITY+MSQL
Procuro programadores - Novo jogo
Problema com o MS VEHICLES
Preciso de ajuda com a Unity
Problema com vídeo em 360° na Unity
Problemas no MS Vehicles
unity- eventos na Animação com Armature/Bones vinda do blender não funciona
ajuda exibir resultados simulados em uma liga Game Unity
Unity - ParticleSystem não é redirecionado no rawimage no canvas
Como resolver o problema de "face orientation" no Blender.
[DÚVIDA] Tive um problema com meu Canvas
erro na Directional Light
Problemas com o Directional Light da Unity 3D
Novo jogo da franquia Sphere game em desenvolvimento
malha da roda não girando com wheel collider unity
Problemas com ambiguidade
Touch mobile
INVALID TOKEN
Como acessar o "HD Render Pipeline" do HDRP por script?
CHAT GPT PRA JOGO DE TIRO? comentem
Tutorial script inimigo segue e foge do player
Ainda vale a pena lançar Asset na Asset Store?
Ajuda com tabela de historico de pontuaçao.
[TUTORIAL] Entrar no carro estilo GTA
Como derrapar um Whell Collider
Como altertar o valor do "Asymptote Value" do Whell Collider via Script
Preciso de ajuda para substituir valor de variavel em outro script
Ajuda com Top Down Shooter utilizando Photon
Duvida com Netcode
[RESOLVIDO] Unity - Movendo a Câmera na Horizontal/Vertical com Touch
Alguém me ajuda com os anúncios pfv
Segundo Trailer do jogo Dark Age, Feliz Natal a todos!
Unity - ScrollRect, Viewport, Content - O Conteúdo ñ inicia no topo
Coleta de itens
Unity - Cadastro do email do jogador
[GRATIS] PACK DE MODELOS 3D PARA JOGO DE TERROR
Onde Conseguir músicas para meu Jogo?
error CS0246 em Script
Alguem teve ja esse problema?
[Projeto em Andamento] Draug, um jogo de hordas
DISPONIVEL PARA FAZER MODELOS 3D
Unity-Loja.Como os Jogadores terão acesso aos ítens comprados na PlayStore?
Bugando depois do Build.
Primeiro Trailer do jogo Dark Age
Problema com sombra
Mesh e Material do objeto trocando para uma instancia no inicio do jogo
Ter Out 01, 2024 7:30 pm
Seg Set 30, 2024 9:25 am
Sáb Set 28, 2024 11:39 am
Dom Set 22, 2024 5:30 pm
Qui Set 12, 2024 7:23 pm
Seg Set 09, 2024 7:33 am
Dom Set 08, 2024 10:08 pm
Ter Set 03, 2024 11:59 am
Qua Ago 28, 2024 7:45 pm
Qua Ago 28, 2024 7:18 pm
Qua Ago 28, 2024 8:34 am
Dom Ago 25, 2024 8:37 pm
Sáb Ago 24, 2024 1:58 pm
Sex Ago 23, 2024 3:30 pm
Sex Ago 23, 2024 3:23 pm
Qua Ago 21, 2024 5:48 pm
Dom Ago 18, 2024 8:51 pm
Sex Ago 16, 2024 12:59 pm
Qua Ago 14, 2024 10:57 am
Sáb Ago 10, 2024 8:03 pm
Sex Ago 09, 2024 7:37 pm
Dom Ago 04, 2024 4:41 pm
Dom Ago 04, 2024 3:16 pm
Qui Jul 25, 2024 2:48 pm
Dom Jul 21, 2024 7:07 pm
Dom Jul 21, 2024 12:07 am
Sáb Jul 13, 2024 12:33 am
Qui Jun 27, 2024 5:49 pm
Qui Jun 20, 2024 12:30 pm
Dom Jun 09, 2024 7:43 pm
Dom Jun 09, 2024 2:16 pm
Seg Jun 03, 2024 11:39 am
Seg maio 27, 2024 12:45 pm
Seg maio 20, 2024 9:01 pm
Dom maio 19, 2024 3:08 pm
Sáb maio 18, 2024 11:46 am
Sáb maio 11, 2024 8:55 am
Qui maio 09, 2024 11:33 pm
Seg Abr 29, 2024 9:34 pm
Qui Abr 25, 2024 3:34 pm
Seg Abr 22, 2024 5:15 pm
Seg Abr 15, 2024 12:23 pm
Seg Abr 08, 2024 9:27 pm
Seg Abr 08, 2024 8:01 am
Sáb Abr 06, 2024 8:05 pm
Qui Abr 04, 2024 11:34 pm
Qui Abr 04, 2024 11:13 pm
Sex Mar 22, 2024 2:41 pm
Dom Mar 10, 2024 2:30 pm
Sex Mar 01, 2024 1:27 pm
Qui Fev 22, 2024 9:57 pm
Ter Fev 20, 2024 12:15 am
Seg Fev 19, 2024 1:06 pm
Seg Fev 12, 2024 1:56 pm
Seg Fev 12, 2024 1:17 pm
Dom Fev 11, 2024 8:55 pm
Dom Fev 11, 2024 11:16 am
Seg Fev 05, 2024 4:18 pm
Dom Fev 04, 2024 9:39 pm
Qua Jan 31, 2024 11:59 pm
Ter Jan 30, 2024 7:37 pm
Ter Jan 23, 2024 6:33 pm
Dom Jan 21, 2024 6:03 pm
Sáb Jan 20, 2024 7:03 pm
Sáb Jan 20, 2024 6:58 pm
Sáb Jan 20, 2024 6:39 pm
Sex Jan 19, 2024 8:40 am
Dom Jan 14, 2024 5:30 pm
Qua Jan 10, 2024 10:29 pm
Qua Jan 10, 2024 8:55 pm
Qua Jan 10, 2024 7:14 pm
Ter Jan 09, 2024 3:55 pm
Ter Jan 09, 2024 8:04 am
Sáb Jan 06, 2024 8:02 pm
Sex Jan 05, 2024 7:01 am
Sex Jan 05, 2024 12:12 am
Qui Jan 04, 2024 6:55 pm
Qui Jan 04, 2024 12:52 pm
Qui Jan 04, 2024 4:34 am
Ter Jan 02, 2024 11:48 pm
Dom Dez 31, 2023 7:25 pm
Qua Dez 27, 2023 5:44 pm
Qua Dez 27, 2023 3:08 pm
Sáb Dez 23, 2023 7:27 pm
Sáb Dez 23, 2023 5:06 pm
Qui Dez 21, 2023 8:10 pm
Seg Dez 18, 2023 2:04 pm
Sex Dez 15, 2023 5:11 pm
Qui Dez 14, 2023 9:13 pm
Qui Dez 14, 2023 2:47 pm
Qui Dez 14, 2023 1:48 pm
Qua Dez 13, 2023 8:58 pm
Ter Dez 12, 2023 2:32 pm
Seg Dez 11, 2023 1:53 pm
Qua Dez 06, 2023 8:13 pm
Sáb Dez 02, 2023 8:06 pm
Qui Nov 30, 2023 7:49 am
Seg Nov 27, 2023 1:35 am
Qua Nov 22, 2023 7:37 am



































































































[AULA] HTML - Aula 1: Introdução

2 participantes

Ir para baixo

TUTORIAL [AULA] HTML - Aula 1: Introdução

Mensagem por MayLeone Seg Out 08, 2018 3:52 pm

[AULA] HTML - Aula 1: Introdução 425px-HTML5_logo_resized.svg

Apresentação:
Bem vindos a nossa primeira aula de HTML5 para iniciantes aqui no blog! Nessa série de aulas você irá aprender os conceitos básicos da linguagem HTML em sua mais recente versão, além de aprender também sobre CSS3 e Javascript que trabalharão em conjunto com o HTML para desenvolvimento de paginas e aplicações web.
Ao final deste curso você estará apto a criar web páginas utilizando essas três linguagens e também saberá os conceitos básicos de cada uma para inicializar sua especialização em programação front-end. Vamos lá?

O que eu preciso para programar em HTML?
Você precisa basicamente de um navegador(browser) instalando em sua máquina, ex: Mozilla Firefox, Google Chrome, Internet Explorer, Edge, Opera, Safari e etc... E vai precisar também de um editor de textos (como o bloco de notas, por exemplo) para escrever os códigos.
Como dito, qualquer editor de textos está sendo válido para programar em HTML, mas aqui nas aulas iremos utilizar o sofware gratuito: NotePad++ que consiste num editor de texto para programadores. Ele suporta a linguagem HTML (e muitas outras, aliás), possui sistema de auto complete (escreve algumas palavras-chaves automaticamente para você), colore seu código para melhor visualização e permite trabalhar o código com mais de uma guia ao mesmo tempo (isso nos será útil quando entrarmos em CSS e Javascript), por isso estou recomendo esta ferramenta que além de tudo é de graça, mas você pode se sentir à vontade para editar seus códigos no editor de sua preferência.

[AULA] HTML - Aula 1: Introdução Icon[AULA] HTML - Aula 1: Introdução Icon



O que é HTML?
HTML é a sigla para a palavra em inglês: HyperText Markup Language ou em português: Linguagem de marcação de hipertexto, ou seja, o HTML é uma linguagem de marcação e não uma linguagem de programação como muitos podem se confundir no início!
Ela foi desenvolvida para ser lida por navegadores web, nos permitindo assim, criar estruturas para as páginas online, como blogs, sites, e etc.
Como é uma linguagem de marcação, o HTML se utiliza de marcações (o que chamaremos de tags daqui por diante) para determinar algum comportamento ou alguma aparência a um hipertexto.

O que é um hipertexto?
Se ficou com dúvidas sobre o que seria um hipertexto, eu irei explicar rapidamente: um hipertexto é um termo para o tipo de texto ou informação que possui conjuntos de blocos de outros textos/informações que podem ser lidos de forma dinâmica, não necessariamente como um texto comum onde temos normalmente uma leitura/visualização linear.
Os hipertextos estão presentes em nossa vida digital, como os textos que você lê em blogs (este aqui, por exemplo) e que podem conter hiperligações que levam a outros textos, como os tão famosos links, que podem desviar sua leitura para outro bloco de texto.
Um hipertexto não envolve somente textos, mas toda a hipermídia, como imagens, vídeos e sons também.
Abaixo você pode visualizar uma ilustração do que seria um hipertexto:


[AULA] HTML - Aula 1: Introdução Hipertexto-21

Um texto comum (como num livro, por exemplo) normalmente é lido linearmente, começando de cima para baixo, porém, um hipertexto desvia sua leitura para outros hipertextos, tornando sua leitura dinâmica (não-linear).
Você neste momento está lendo este trecho da aula, mas se clicar aqui poderá ser desviado para outro tipo de texto, ou seja, a leitura deixa de ser linear.

Marcações(Tags):
Pois bem, como dito mais acima, o HTML é uma linguagem de marcação, ou seja, vai consistir em marcar com tags determinados hipertextos. Esta tag poderá atribuir a um hipertexto uma aparência (mudar a cor da fonte, por exemplo) ou um comportamento específico.

Abra o seu NotePad++ (ou o editor de sua preferência) e crie um arquivo HTML indo a >> Language >> H >> HTML.
Agora o editor irá entender de que estaremos editando um arquivo HTML.
Após fazer isso, vá em File >> Save As >> >> Desktop >> E coloque o nome do arquivo como sendo "teste.html" (a extensão .html nos serve para podermos abrir o arquivo num navegador e podermos acompanhar as alterações feitas em tempo real).
Se você ir ao seu Desktop e clicar duas vezes sobre o arquivo "teste.html" você vai abrir uma página web em branco: essa página é seu arquivo HTML que vai conter a estrutura do seu "site" de testes.

Volte ao NotePad++ para que eu possa lhe explicar como funcionam as tags:
Apenas digite no arquivo a seguinte frase: "Olá mundo!!" Agora salve o arquivo (CTRL+S) e atualize a página web:

[AULA] HTML - Aula 1: Introdução Untitled%2B2


Perceba que temos aqui um texto qualquer em nossa página web, mas se eu quiser deixar esse texto em negrito?
Para fazer isto eu irei utilizar uma tag HTML que vai dar essa aparência ao meu texto.
Para usar tags basta escrever o símbolo do menor "<" colocar a tag específica e depois inserir o sinal do maior ">".
No caso para deixar a palavra em negrito, a tag é "b", ou seja "bold", que significa negrito em inglês.

E então depois definir a tag desejada, você vai colocar após a mesma o texto que deseja deixar com aquela formatação, no caso, "Olá mundo". Após o texto a ser formatado, é sempre importante fecharmos a tag que acabamos de abrir, pois dessa forma iremos delimitar quais textos irão ser influenciados por este comportamento.
Para fechar uma tag basta utilizar o sinal do menor novamente seguido da barra invertida para a direita "/" e colocar a tag com o sinal do maior, ficando assim:

[AULA] HTML - Aula 1: Introdução Untitled%2B3
Salve o documento (CTRL+S), atualize a página e veja o que acontece:


[AULA] HTML - Aula 1: Introdução Untitled%2B4



Perceba que o texto ficou mais forte, não é?
Agora veja como o fechamento de tags é importante: após " < /b>" digite "Seja bem vindo a primeira aula de HTML5", salve o arquivo e atualize novamente a página:

[AULA] HTML - Aula 1: Introdução Untitled%2B5


Note que a frase "Olá mundo" está em negrito, mas "Seja bem vindo a primeira aula de HTML5" não está. Isso acontece porque os textos só ficarão em negrito se estiverem entre a tag 'b', ou seja, entre < b> <  /b>, qualquer texto fora dessa tag não sofrerá influência da mesma.
Agora veja o que ocorre se tirarmos o fechamento da tag "< /b>" de onde ela está e colocarmos após o final da segunda frase:

[AULA] HTML - Aula 1: Introdução Untitled%2B6

Resultado ao salvar o aquivo e atualizar a página:

[AULA] HTML - Aula 1: Introdução Untitled%2B7

Neste momento, todo o texto da página está em negrito pois ele está entre a tag "b".
Com o fechamento de tags temos então um controle sobre quais hipertextos iremos influenciar com aquela determinada tag, mas saiba de antemão que temos tags em HTML que não possuem fechamento, pois não precisamos delimitar nada entre elas, mas isso veremos mais para frente, ok?

Outra informação que eu gostaria de dizer é que o HTML não é case sensitive, ou seja, diferente de C++ ou C#, ele não distingue letras maiúsculas das minúsculas, para o HTML você escrever < b> seria a mesma coisa que escrever < B>.

Estrutura básica de páginas web:
Agora que você entendeu o conceito de tags em HTML nós iremos nos aprofundar um pouco mais na linguagem, começando por criarmos a estrutura básica de qualquer página web atual.
Quando começar um arquivo HTML você deve primeiramente especificar qual versão do HTML está utilizando (em nossas aulas iremos usar o HTML 5 que é a versão mais recente da linguagem) então para especificar essa informação nós iremos digitar no início do documento o seguinte:

[AULA] HTML - Aula 1: Introdução Untitled%2B8

Ou seja, nós estamos deixando subentendido para o navegador que estamos trabalhando com a versão 5 do HTML (tipo de documento).
Atenção: Essa informação não é uma tag e sim uma especificação ao navegador! 

Após declarar a versão HTML você deve inserir outra tag muito importante:


[AULA] HTML - Aula 1: Introdução Untitled%2B9
A tag "html" vai informar ao navegador que o que teremos dentro dela se trata de um arquivo HTML, pois podemos ter outros tipos de documentos em nossas páginas web, como arquivos javascript ou em css, por isso, é importante explicitar a linguagem que está sendo utilizada naquela situação.

Depois teremos as tags para estruturação básica da página: o cabeçalho(head) e o corpo (body):


[AULA] HTML - Aula 1: Introdução Untitled%2B10

Dentro da tag de cabeçalho(head) nós iremos ter toda a parte visual e comportamental do nosso site, como estilos da página em CSS e códigos em Javascript, ambos assuntos que serão tratados mais pra frente em nossas aulas, por isso por enquanto, talvez coloquemos poucas coisas dentro dessa tag e ela fique um pouco vazia, mas com o passar das aulas você verá o que poderá ser colocado entre essa tag de cabeçalho.

Já no caso da tag "body", nós temos o corpo da página, ou seja, tudo o que será inteligível e visualizado pelo usuário, como textos, imagens, links, vídeos, menus, formulários, e etc.

Para facilitar a compreensão, imagine então a estrutura deste site: essa aula que você está lendo, as imagens, os botões e menus em volta estão compreendidos dentro da tag "body", pois é tudo o que pode ser visível ou acessado pelo usuário, enquanto plugins de comportamentos do site e até mesmo as definições de cores da página (por exemplo) estão inseridas dentro do cabeçalho(head). 
Portanto, é importante para qualquer web página a definição dessas duas tags estruturais! 

Podemos então, escrevermos novamente nossa frase "Olá mundo!" na página, mas agora de forma estruturada, dentro da tag body:


[AULA] HTML - Aula 1: Introdução Untitled%2B12
Ao salvar e atualizar a página, você pode ter a impressão de que nada mudou (e visualmente de fato nada mudou) mesmo com todas essas tags inseridas no arquivo, mas quando tornarmos nossa página mais completa e com mais informações, você irá perceber que a utilização dessas tags são muito importantes.

Finalização:
E chegamos ao final da nossa primeira aula de HTML! Creio que para uma aula de apresentação o conteúdo aqui passado foi suficiente para uma introdução à linguagem e seus conceitos iniciais! Mas não paramos por aqui, na próxima aula nós iremos estudar sobre algumas tags de formatação de texto em HTML (como o negrito, visto nessa aula) e também outras tags interessantes como tags para títulos, listas, parágrafos e etc, então continue estudando a acompanhando o blog! Te vejo lá!
MayLeone
MayLeone
Instrutor

Feminino PONTOS : 3764
REPUTAÇÃO : 602
Áreas de atuação : Unity & C#
Respeito as regras : [AULA] HTML - Aula 1: Introdução Aad8pUi

http://compilemosfacil.blogspot.com.br

Ir para o topo Ir para baixo

TUTORIAL Re: [AULA] HTML - Aula 1: Introdução

Mensagem por Tegh Seg Out 08, 2018 4:40 pm

Front-end ahhh... que coisa boa de lembrar, ótima aula e que venham mais.

Tegh
Avançado
Avançado

Masculino PONTOS : 2604
REPUTAÇÃO : 97
Idade : 23
Respeito as regras : [AULA] HTML - Aula 1: Introdução WvDYdlf

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos