Classificação
0 %
Popularidade
Opine
Descrição:
Nessa aula, faremos uma breve revisão de alguns conceitos semânticos de HTML5 e CSS3 para começarmos a criar uma …
como dá ctrl+alt+t no sublime?
NOVIDADES:
Para quem quer utilizar o "Surround With" no VSCODE:
Selecione o texto > ctrl + shift + p > Wrap with Abbreviation > "Nome da TAG"
O atributo alt="" serve para definir um texto ALTernativo para uma IMAGEM <img>. Este texto é útil para descrever uma imagem caso ela não tenha sido exibida de maneira correta devido à algum problema de conexão, corrupção do arquivo ou algum outro motivo.
*É importante lembrar que algumas pessoas sofrem de deficiência visual e utilizam o leitor de tela. Portanto, para esta pessoa, este texto descritivo é a única alternativa para que ela entenda o que de fato há em uma imagem.
*E também, obviamente, este atributo alt="" melhora o rankeamento da imagem nos mecanismos de busca (SEO), como o Google.
cara quando ele ensinou o atalho do ctrl+alt+T isso me lembrou um professor de informatica que nas aulas de excel ele primeiro nos fez digitar todas as formulas por semanas pra depois mostrar os atalhos. Isso que é professor bom HYAHUAHUAUHAUA eu to amando demais essas aulas, não quero que acabe nunca
Quando dou zoom na minha página, os meus objetos em position absolute, não acompanham o zoom, ou seja, ele se desprendem do corpo da página. O que pode ser o problema? (Isso acontece com a minha barra de menu, e a imagem do óculos.
Bom demais. Obrigado.
Galera quem quiser usar o Surround no Visual Studio Code , é so ir na aba de extensoes ,pesquisar Surround, vai ser o que tiver mais donwloads. Para usar ele é so apertar ctrl+shift+t , selecionar a opçao de <element> e ver a magica acontecer.
1:14
Eu ja consegui chegar até aqui graças a Deus as aulas são muitos boas fácil de entender.
Estou assistindo e pondo em prática pelo celular! Quem diria! Hahahaha
2021
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title> Informações sobre Google Glass </title>
<style>
body {
font-family: arial;
font-size: 10pt;
}
p{
text-align: justify;
text-indent: 20px;
}
article h1 {
font-size: 15pt;
color: #ffffff;
background-color: rgba(0,0,0,.3);
padding: 5px;
}
article h2 {
font-size: 13pt;
color: #888888;
margin: 0px;
}
article {
margin-bottom: 800px;
}
img.img-dir{
display: block;
float: right;
margin-left: 5px;
}
</style>
</head>
<body>
<article id="topo">
<header>
<h2>Clique sobre as áreas destacadas em vermelho</h2>
</header>
<img src= "_imagens/mao.png" alt="Mão apontando para a esquerda"/>
</article>
<article id="tela">
<header>
<h1>Tela</h1>
<h2>Como o mundo vai aparecer</h2>
</header>
De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça.
<img src="_imagens/det-tela.jpg" alt="Tela do Google Glass"/>
</article>
<article id="camera">
<header>
<h1>Câmera</h1>
<h2>Filme e fotografe a qualquer momento</h2>
</header>
<img src="_imagens/det-camera.jpg" class="img-dir" alt="Câmera do Google Glass"/>
Com o Google Glass será possível tirar fotos com até 5 megapixels e gravar vídeos com 720 linhas de resolução. Os primeiros vídeos e fotos capturados com o aparelho já começaram a circular pela rede, mas até agora ninguém tem muitas informações técnicas.
</article>
<article id= "sensores">
<header>
<h1>Sensores</h1>
<h2>A sensibilidade de um simples óculos</h2>
</header>
Quem pensa que para comandar o Google Glass vai precisar de teclado e mouse, se engana redondamente. O dispositivo vem com vários tipos de sensores e microfones embutidos. Assim, para dar um comando, basta falar ou passar o dedo na lateral do óculos.
<img src="_imagens/det-touch.jpg" alt="Sensores do Google Glass"/>
</article>
<article id= "gadgets">
<header>
<h1>Bateria e Gadgets</h1>
<h2>Quais são os dispositivos que complementam o Glass </h2>
</header>
<img src="_imagens/det-bateria.jpg" class="img-dir" alt="Bateria e Gadgets do Google Glass"/>
Segundo a própria Google, o Glass virá com uma bateria que tem autonomia suficiente para durar um dia inteiro. Apenas algumas atividades como videoconferências e longas filmagens vão exigir um pouco mais. Além disso ele vem com WiFi, Bluetooth, 3G/4G e muito mais.
</article>
<body>
</html>
Obrigado Guanabara, HostNet, Trainning e ToyShow. Vocês são de MAIS!!!
mais que aula em !
Como fica o rel?
Ola, alguem sabe me informar porque se comento as linhas do código as configuracoes nem os textos h1 aparecem na pagina html????article h1{
font-size: 15pt;
color: #ffffff; <!–cor da letra–>
background-color:rgba(0,0,0,.3);
padding: 5px; <!– espaço interno–>
margin: 0px; <!–espaço externo ao objeto–>
}
Muito bom.
Não consigo fazer a <img> da id camera e id gadgets ficar posicionada à direita do texto, ou fica em cima ou em baixo…
img.img-dir {
display: block;
float: right;
}
Como faço para que o <p> dê espaço para a <img> ?
Pra quem ta quebrando cabeça nesta aula ta ai meu código 100% funcionando..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Informações sobre o google glass </title>
<style>
body {
font-family: arial;
font-size: 10pt;
}
p{
text-align: justify;
text-indent: 20px;
}
article h1 {
font-size: 15pt;
color: white;
background-color: rgba(0,0,0,0.5);
padding: 5px;
margin: 0px;
}
article h2{
font-size: 13pt;
color: #888888;
margin: 0px;
}
article{
margin-bottom: 800px;
}
img.img-dir{
display: block;
float:right;
margin-left: 5px;
}
</style>
</head>
<body>
<article id="topo">
<header>
<h2>Clique sobre as áreas destacadas em vermelho</h2>
</header>
<img src="../_imagens/mao.png" alt="mao apontando para a esquerda">
</article>
<article id="tela">
<header>
<h1>Tela</h1>
<h2>Como o mundo vai aparecer</h2>
</header>
<p>De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça.</p>
<img src="../_imagens/det-tela.jpg" alt="tela do Google Glass">
</article>
<article id="camera">
<header>
<h1>Câmera</h1>
<h2>Filme e fotografe a qualquer momento</h2>
</header>
<img src="../_imagens/det-camera.jpg" class="img-dir" alt="Câmera do Google Glass">
<p>Com o Google Glass será possível tirar fotos com até 5 megapixels e gravar vídeos com 720 linhas de resolução. Os primeiros vídeos e fotos capturados com o aparelho já começaram a circular pela rede, mas até agora ninguém tem muitas informações técnicas.
</p></article>
<article id="sensores">
<header>
<h1>Sensores</h1>
<h2>A sensibilidade de um simples óculos</h2>
</header>
<p>Quem pensa que para comandar o Google Glass vai precisar de teclado e mouse, se engana redondamente. O dispositivo vem com vários tipos de sensores e microfones embutidos. Assim, para dar um comando, basta falar ou passar o dedo na lateral do óculos.</p>
<img src="../_imagens/det-touch.jpg" alt="Sensores do Google Glass">
</article>
<article id="gadgets">
<header>
<h1>Bateria e Gadgets</h1>
<h2>Quais são os dispositivos que complementam o Glass</h2>
</header>
<img src="../_imagens/det-bateria.jpg" class="img-dir" alt="Bateria Gadgets do Google Glass">
<p>Segundo a própria Google, o Glass virá com uma bateria que tem autonomia suficiente para durar um dia inteiro. Apenas algumas atividades como videoconferências e longas filmagens vão exigir um pouco mais. Além disso ele vem com WiFi, Bluetooth, 3G/4G e muito mais.</p>
</article>
</body>
</html>
pra quem ta em 2020 na hora de colocar imagens não aparece a mão coloca isso
<img src="../_imagens/mao.png"/> porque pode ser problema de diretório da pasta.
Mais alguém fez o texto "desaparecer" ao colocar a ID "tela"?
para quem ta tendo dificuldade no 13:55 da imagem não estar selecionando é só usar dois pontos ../ pois assim estará voltando a pasta anterior e assim podendo selecionar o _imagens/mao.png
a linha ficará assim:
<img src="../_imagens/mao.png"/>
Cada vez melhor
No meu webstorm o atalho demonstrado não é cntrl + alt + t e sim cntrl + alt + j
Não se esqueça de praticar … NUNCA ! KKKKKK
No Visual Studio Code usei uma extensão chamada htmltagwrap. Depois só selecionar o texto e alt+w. Boa sorte a todos
pena que o pacote não está mais disponível para baixar… digitar todo o texto é osso haha
Assim que coloquei a Mão Apontando para esquerda eu cliquei com o botão esquerdo do mouse e cliquei em Inspecionar. Ele abriu exatamente o mesmo código que eu estava criando com aula. Legal
Didática é tudo. no inicio da quarentena fiz 2 curso pela udemy, java e html, me senti frustrado, e olha que sou programador VB6 e .net há anos. por acaso descobri o Guanabara e fui dá uma olhada. resultado refiz o curso de Java, fiz o de POO e estou refazendo o HTML e empolgado e aprendendo…. obrigado Guanabara você eh muito bom no que faz. hoje 29/05/2020
2020: Usando o VS Code fica:
View > Toggle Word Wrap
(ou simplesmente Alt + Z)
Assistindo e estudando durante a quarentena de 2020. Obrigado Guanabara.
Ótima aula pra quarentena #2020esodesgraca
aula muito foda obrigado professor
800 br's kkkkkkkkkkkkkkkkkkkkkkkkkkkkk
Excelente aula
Para quem deu erro na hora de colocar a imagem da mão:
<img src="../_imagens/mao.png" alt="Mão apontando para a esquerda">
tem que colocar o ../ para ele voltar para a pagina inicial e então acessar a pasta _imagens
11:05 não entendo a necessidade de especificar que é o h1/h2 do artigo. Se o arquivo só vai conter esses artigos, então podemos simplesmente dizer para modificar o h1/h2, sem o "article".
2020!
Só eu fazendo esse curso em 2020???
Viva Professor Guanabara você é melhor professor do mundo
7:08
Não consigo baixar o conteúdo das aulas, os arquivos. Poderiam me enviar ?
Grato
tou usando vscode
Só o meu webkit-scrollbar não funcionou?;s
top demais
Para visual Code: Selecione o texto —> ctrl + shift + p —> Wrap with abreviation —.> "Digite o nome da tag"!
*Desculpa pelo english!
Para quem ta usando o VSCODE, baixa o plugin Surround que tem a opção element no ctrl shift t
Como faz surround with no VS Code ?
UP