Bem vindo de volta.
Então, nesta lição, vamos começar fazendo um novo arquivo realmente preenchendo com h t m
l uma abertura no navegador e também vamos aprender sobre a estrutura subjacente de cada documento HTML.
Então, há algumas coisas em que todos os documentos sempre têm um tipo de conhecimento sobre o qual
vamos aprender.
Então, para começar a ir para sublime e vou fazer um novo arquivo.
Então, arquive um novo arquivo ou comando e, em seguida, eu vou salvar o arquivo e dar-lhe um nome.
Então, guarde ou guarde arquivos como.
Então, uma vez que eu faça isso, vamos dar um nome.
Vamos chamar a primeira página da página T. M. e essa parte é muito importante.
Dot h Timo.
Então eu vou pegar salvar.
E aquele ponto de cada equipe eu digo sublime.
E quando eu abrir no Chrome, ele diz para o Chrome. Este é um h tim que vou tratar como tal.
Então podemos escrever para Tim Allen aqui.
Então, vamos começar com a única tag que vimos até agora, são uma das tags que é um H-1.
E você notará que está destacado para mim.
Então vamos preencher isso.
Esta é a minha primeira etiqueta e salve este arquivo e você verá sublime sabe que é H D M L, portanto ele destaca
que as tags correspondentes são vermelhas.
No meu caso.
Agora, o que queremos fazer é realmente abrir esse arquivo e visualizá-lo porque lembre-se de cada
vez que é apenas texto, mas nosso navegador interpreta-o e o transforma em algo como isto ou aquilo.
Então, para realmente obter o Chrome para abri-lo, existem algumas soluções.
O primeiro é apenas um clique duplo sobre ele e ele irá abri-lo em seu navegador padrão.
Se não for o Chrome, ele ainda funcionará, mas ele irá abri-lo no Safari ou no Firefox
ou no Internet Explorer, e você pode ver, no entanto, enquanto ele abre, ele não está me mostrando o
html real, ele está levando-o para subjacê-lo e transformá-lo em Esta agradável representação visual.
Como sempre, posso ver a fonte da minha página e você verá que é apenas uma tag.
Então, definitivamente mais simples do que algo assim.
Mas subjacentes são exatamente os mesmos.
E provavelmente há um H-1 nesta página também.
Então, uma outra maneira de fazer isso.
Você pode pegar o arquivo clicar direito e clicar em abrir com o Google Chrome ou você pode clicar nele e arrastá-lo
para o Chrome e isso também o abrirá.
O mesmo vale para o bem sublimado, então, se você acidentalmente fechar o arquivo, você pode arrastá-lo aqui e
ele irá reabri-lo.
Então, apenas para mostrar-lhe esse clique e eu posso abri-lo.
Então, infelizmente eu tenho que quebrar as notícias que são simples.
É Tim L que já escrevemos até agora é um pouco errado.
A própria etiqueta de e-mail está bem, mas este não é um documento válido.
E isso é porque estamos perdendo a estrutura subjacente que cada página precisa ter.
Então parece isso.
É muito comparado com o que fizemos até agora.
Mas a boa notícia é que há duas boas notícias.
Um é sempre o mesmo.
E dois sublimes têm um atalho agradável que nos dá essa estrutura muito rapidamente com apenas quatro
letras que temos que digitar.
Então, vamos passar por cima dessas peças individualmente e apenas um pouco, mas
vou começar por mostrar-lhe como obtê-lo em sublime, tão sublime em vez de h tim l, podemos digitar a palavra h tim
L e em seguida, pressione a aba e nós automaticamente recebemos essa estrutura.
Então vamos analisar o que isso faz.
Primeiro, vamos salvar.
Então, há esse tipo de documento H ele acima e está meio estranho, porque não
há um tipo de documento de encerramento correspondente, como H-G M-L, e o tipo de documento de título e corpo e corpo é por conta própria.
Então vamos para M. D. o que ser um desenvolvedor é google algo.
e apenas mostrando-lhe como você conseguiria, eu escrevi MT-NW e depois tipo de documento e pode parecer bobo realmente
falar sobre isso, mas isso é importante porque encontrar esta informação é realmente
Como você encontra a resposta correta.
Eu vou ser um registro completo e quebrado disso.
Meus alunos riem toda vez que falo sobre a arte do google, mas é realmente importante.
Então estou aqui.
Vamos dar uma olhada.
Ele diz que o tipo de documento para cada Timofei é simples de indicar que seu conteúdo HMO usa HDMI.
Cinco simplesmente usam o doctype H-2 com um ponto de exclamação na frente dele e queremos usar o
HMO 5.
Falaremos exatamente sobre o que um schmuck é um 5 e o que não é.
Em um futuro vídeo.
Mas nós queremos usá-lo.
É basicamente apenas a mais nova versão de idosos.
Então, colocamos isso no topo.
Então, a próxima coisa sobre a qual vamos falar é o elemento h t m l.
Então, este é um pouco mais difícil de encontrar pesquisando quem faz o MT-NW e um HMO.
Se nós
apenas elemento lá vamos nós sempre procuro esse fim vazio no nome.
E isso nos diz que o elemento raiz ele é a raiz de um documento HMO.
Todos os outros elementos devem ser descendentes deste elemento.
Então é bastante auto-explicativo.
Basicamente, tudo o que escrevemos precisa entrar em cada elemento.
um elemento principal seguido por um corpo que é o que temos uma cabeça e um corpo.
E, mais importante ainda, nos conteúdos permitidos, nos conta
Então, vamos dar uma olhada em qual cabeça é o elemento principal.
Forneça metadados de informações gerais sobre o documento, incluindo seu título e links para serem definições de
scripts e folhas de estilo.
Então, o que isso significa é basicamente tudo o que não vemos na página como usuário.
Então, coisas como arquivos de fonte em nossos arquivos de folhas de estilo ou arquivos de javascript todos esses
vão na cabeça e então o corpo é onde colocamos todo o nosso conteúdo.
Representa o conteúdo de um documento HTML idade.
Então, se voltarmos aqui, posso garantir-lhe mais uma coisa, como escrever comentários e
ajudá-lo.
Se eu quisesse escrever uma nota para mim mesmo, se eu acabei de escrever este conteúdo vai no
corpo e, depois, apareço que escrevi um dado na cabeça.
Felizmente, isso não funcionará porque isso realmente aparecerá na página.
Sua equipe tratará isso como texto e eu quero que seja apenas uma nota para mim.
Então, isso é algo que você pode fazer em todas as linguagens de programação.
do que signo dois traços e, em seguida, algum conteúdo e, por outro lado, dois traços e um sinal maior do que o sinal.
Você pode transformar isso em um comentário e um comentário parece que isso começa com um ponto de exclamação menos
Então, ele pode digitar que ouça-se, digite-o manualmente e
você pode vê-lo tipo de cinza em sublime.
Mas outro atalho realmente agradável é que você pode selecionar uma linha na
qual você não precisa selecioná-la, apenas vá para
alinhar e acertar a barra de comando e você também pode ver que pode ir até ela e você pode comentar comentário.
Então, no caso de você esquecer isso e você não quer escrevê-lo.
Outra coisa legal.
Digamos que eu tenho um monte de notas para mim, eu posso selecionar todas elas e fazer o mesmo.
Barra de comando.
Ótimo.
Então eu vou manter esses comentários aqui que são apenas notas para mim.
Meu conteúdo vai no corpo.
Ele vai na cabeça.
Então, isso significa que se estamos seguindo nossas próprias anotações, nosso conteúdo aqui precisa entrar no nosso corpo.
Então, não devemos ter nada flutuando ao redor do elemento H Tim L, exceto para o tipo de documento.
Tudo o resto vai na cabeça ou no corpo.
Então, vamos em frente e abra isso, certifique-se de que ele é o mesmo que antes.
Duplo click.
Você pode ver que isso parece idêntico.
Vamos ver a fonte da página a mesma coisa.
Observe que nossos comentários não estão aparecendo, é claro, apenas o nosso H-1 aparece.
Uma coisa que nos falta enquanto estamos aqui é um título.
Um título é importante não porque ele apareça na página que não aparecerá na nossa página atual aqui.
Lembre-se que está na cabeça.
Então, é apenas metadados o que faz é duas coisas.
Um que vai determinar o nome ou o texto que aparece na nossa guia aparecem.
E também é importante para os motores de busca e para outras páginas quando outras páginas são vinculadas
ao seu site ou quando você vai ao Google e você procura o MDA nesses nomes aqui.
Estes provêm dos elementos do título.
Então, por exemplo, M. D. e comemora 10 anos de documento em sua web, você clica nisso.
Você pode ver aqui, diz MDA e comemora que é interrompido.
Você pode inspecionar a página procurando um elemento de título.
Então, muitas coisas aqui vamos.
Título e comemora 10 anos de documentação da sua web.
O blog mizzle.
Então, o título é importante.
Então, vamos dar ao ArcSight um título, vamos chamar isso de relógio de atualização da primeira página aqui e atualiza.
É por enquanto.
Lembre-se de duas coisas.
Este boilerplate pode apenas digitar H ele l tab.
Você nunca teria mais do que um no documento.
Mas apenas para lembrar a aba html e comentários.
Você pode fazer com barra de comando pode direcioná-los e desligar.
Tudo bem