Como fazer sites: crie seu próprio site com HTML, CSS, Javascript e WordPress | Brenton Strine | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Como fazer sites: crie seu próprio site com HTML, CSS, Javascript e WordPress

teacher avatar Brenton Strine, Web Guru

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

55 aulas (4 h 6 min)
    • 1. Trailer

      1:17
    • 2. Entendendo a internet 1

      3:50
    • 3. Entendendo a internet 2

      6:38
    • 4. Obtenha seu domínio gratuito e a hospedagem na web

      8:05
    • 5. Interoperabilidade

      3:03
    • 6. Hiperlinks

      2:18
    • 7. Plaintext em x em rich texto

      1:11
    • 8. Editor de Plaintext em que

      3:10
    • 9. Como carregar o Plaintext em um navegador

      4:32
    • 10. Frontend vs.

      1:44
    • 11. upload de FTP

      10:26
    • 12. Como ensinar a quem está para entender

      2:02
    • 13. Anatomia de uma página da site

      4:05
    • 14. Edição ao vivo com ShiftEdit

      7:59
    • 15. Aula de sintaxe em HTML - Tags

      6:14
    • 16. Exercício em HTML

      7:38
    • 17. Revisão de exercícios em HTML

      5:15
    • 18. Lesson em HTML - atributos -

      2:19
    • 19. Links em HTML

      8:37
    • 20. Aula de sintaxe em HTML - nesting -

      3:43
    • 21. Estrutura de documentos em HTML

      6:17
    • 22. Dicas e segredos em HTML

      18:20
    • 23. Sitting CSS e HTML em uma árvore

      3:45
    • 24. Sintaxe em CSS de 1: propriedades e valores

      4:12
    • 25. Sintaxe em CSS 2: várias declarações

      3:17
    • 26. Sintaxe em CSS 3: selecionadores

      3:52
    • 27. Sintaxe de CSS 4: cursos

      7:53
    • 28. Introdução ao DOMs

      5:16
    • 29. Chrome DOa

      0:37
    • 30. Firefox DOa inspecionar e a Firebug

      4:14
    • 31. Internet Explorer

      2:17
    • 32. Safari Mac

      2:10
    • 33. Safari no DOMs

      1:30
    • 34. Como usar a ferramenta de inspeção de DOs

      8:39
    • 35. Introdução à escrita

      2:12
    • 36. Variáveis de Javascript

      3:55
    • 37. Corças no Javascript

      2:38
    • 38. A condição "se" do Javascript

      6:46
    • 39. A condição "else no Javascript

      3:17
    • 40. Scripts de backend

      2:34
    • 41. PHP

      7:04
    • 42. Sistemas de gerenciamento de conteúdo

      3:04
    • 43. Como os servidores lidar com várias solicitações HTTP

      6:00
    • 44. A ferramenta de tempo de rede

      2:15
    • 45. WordPress no servidor

      4:21
    • 46. Como fazer seu site atual

      3:57
    • 47. Como instalar WordPress

      6:42
    • 48. Administração no WordPress

      6:09
    • 49. Permalinks

      2:22
    • 50. Como mover a página do blog da página de nossos

      2:06
    • 51. Como instalar temas

      4:20
    • 52. Personalizando a barra lateral e o menu

      3:15
    • 53. Edição de temas

      1:52
    • 54. Plug-ins

      2:35
    • 55. Concluindo pensamentos do WordPress

      1:57
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

1.048

Estudantes

118

Projetos

Sobre este curso

Este curso de se sentir à vontade com os conceitos, ferramentas e práticas da criação de webas da web. Vamos dar visões de maior exposição antes entrar em detalhes usando muito a a de vídeo, will e a primeira e a a sua parte. Depois de quatro semanas, você vai se sentir confiante e pronto para fazer as coisas will

Este curso em amplas a o de a sua Ele vai permitir que você possa começar a começar a fazer sites e a nos ensinar em uma nova habilidade na web no futuro.

A inscrição no curso inclui seis meses de hospedagem completa de de destaque, por de que a de de que a de

Este curso se concentra em quatro áreas:

SKILLSYou de CODA
em vez de tentar cobrir de sua abrangência, vamos nos nos nossos de comumente usadas, para que você você possa pegar áreas adicionais quando a precisa (usando os recursos de grande


Crie o TOOLS. de desenvolvedores da ferramenta, de
ferramentas que o fazem para e We'll e de seus rastreadores de webs essenciais, como editores de texto, FTP, clientes de FTP, and editores de DOM, de banda de banda e de banda


Também vamos explorar as bibliotecas e marcos e marcos (por exemplo. jQuery, (e.g. de


Isso inclui a mecânica da internet, os componentes de um site e as de desenvolvedores de para a criação do mais de o seu curso, de se A web é cheia de os recursos de aprendizagem gratuitos para ajudar você com seu trabalho de criação de webmaking de No mesmo, é uma tarefa assustadora de ordenar por tudo, e é impossível saber em quais as coisas se concentrar se concentrar mesmo que você possa se Seu instrutor é quase totalmente a autodidata e acredita que pode ensinar a você tudo o que precisa para saber. Ao longo do curso, vamos usar todos os tipos de recursos (references, educacional, de ajuda, de de ajuda, de de de ajuda, de de search no Google).

Conheça seu professor

Teacher Profile Image

Brenton Strine

Web Guru

Professor

I began teaching myself web development in the 90's and have gone on to work as a web developer on sites used by millions for companies like eFax, Citrix, Amazon and NASA Jet Propulsion Laboratory.

I've also taught web development to many thousands through my lessons on Code Year, Educator.com, Skillshare and Udemy. I have taught kids programming in homes, classrooms, and robot camps. I've also done in-person web development workshops in Los Angeles and recently started a web code bootcamp in LA that teaches beginners web development in one intensive, immersive weekend.

I hold a masters degree in Theology, enjoy working with youth, and drink tea every day. I currently live in South Pasadena with my wife. In January 2013 I start Shoutleaf Web Resrouces which provides domain... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Trailer: Olá. Meu nome é Brenton Strain, e sou o instrutor deste curso. O que? Fazendo um? 01 O quê? Fazendo Wanna One vai levá-lo do zero para ter um site que você pode compartilhar com seus amigos. É que é um curso técnico, mas não é um curso que se concentra, como o código e as linguagens de programação. Você vai aprender isso. Mas eu sou uma espécie de professor de história que não se importa se você não memorizar as datas dos lugares, os nomes e datas. Eu só quero que você entenda os conceitos, então eu vou estar ensinando conceitos técnicos de tudo que você precisa saber para colocar seu site em funcionamento, assumindo que você está apenas fazendo este curso sem nenhum site em tudo. Isso para começar, que você aprenda coisas como obter um domínio, como obter hospedagem, como conectar seu servidor, como fazer upload. Você vai aprender um pouco de H dois metal e CSS. Você aprenderá alguma programação de back-end como PHP. Hum, e então, uh, a última lição. Você vai até aprender o sistema de gerenciamento de contatos. Esse tipo de como faz um monte de código para você, e você pode apenas executar o site através deste sistema de gerenciamento de conteúdo vai aprender WordPress Um, e você vai estar pronto para ir no final deste curso e compartilhar seus links. 2. Entendendo a internet 1: Isto é o que é chamado de disco rígido ou são unidade. Literalmente é um disco que é difícil de ver. Tem uma cabecinha aqui que atravessa o disco e lê. E, uh, o disco Spence. E aqui estão uns e zeros que formam dados ou arquivos de vigília. Então, se eu quiser que você transfira um arquivo deste disco para este disco rígido, este é outro disco rígido. São meus amigos, dirigindo duro. Eu não vou desmontar este porque não é meu, e eu quero quebrá-lo. Mas a maneira mais simples de fazer isso aqui seria conectar os dois discos rígidos ao meu computador. E então tudo que eu tenho que fazer é usar o sistema operacional, abrir as duas unidades e dragão drop para transferir o arquivo de um disco rígido para o outro. Isso é chamado de transferência. E se o disco rígido dos meus amigos não estiver aqui em minha casa, mas ele estiver em outro lugar? E se ele estiver em Atlanta, Georgia? É um pouco mais complicado para mim transferir o arquivo de um disco rígido para o outro, certo? Bem, talvez não tanto porque um download é realmente um tipo de transferência. É uma maneira de transferir um arquivo de um disco rígido para outro. Então, obviamente, isso seria fazer uso da Internet para transferir o disco rígido. Mas, para entender a Internet, vale a pena tomar um pouco de tempo para pensar em como transferiríamos o arquivo para este disco rígido sem a Internet. Então, sem a Internet, provavelmente a coisa mais provável seria que eu teria que mover fisicamente este disco rígido para Atlanta, e então meu amigo poderia conectá-los ao computador dele e transferir os arquivos para que eu pudesse apenas Dirija lá. Ou eu poderia usar os correios e eu trazer a estação de correios porque o sistema de correio é na verdade, mais ou menos análogo a como a Internet funciona. Entendendo um pouco o sistema de correio. Isso ajudará com a compreensão da Internet até certo ponto. Então, você sabe, eu não sei muito sobre como o sistema de e-mail funciona, na verdade, mas eu sei, por exemplo, que quando eu empacotar esse disco rígido e colocá-lo e colocar um endereço em ele, Eu começo com o mais geral eu começo com como Estados Unidos. Se vai sair dos Estados Unidos, e eu colocar o estado que eu coloquei a cidade que colocou a rua, nomeie isso com o número da rua. Então eu coloquei o nome da pessoa e então você pode modificá-lo de lá com coisas ainda mais específicas para que você possa fazer um número de apartamento ou você pode cuidar de tudo. E também sei que o carteiro não quer ou a mulher do correio não vem à minha porta buscar meu pacote e depois dirige directamente para Atlanta e deixa-o cair. Não, na verdade há uma espécie de rede de correios que entram em jogo. Então, primeiro vai para o meu correio local e eles olham para o endereço. Eles lêem de baixo para cima e decidem, OK, isso precisa ir para outra estação de correios que é mais alto? Ou será que temos jurisdição sobre este endereço e podemos enviá-lo de onde estamos ? Então, porque ele está indo para Atlanta, por exemplo, iria até outra coisa regional mais ampla. Talvez haja um escritório nacional em algum lugar. Vamos para uma montanha-russa leste ou uma estação de correios do sul. E a. Em algum momento, chegará a uma estação de correios que tem jurisdição desse endereço, e então ele vai começar a enviá-lo jusante mais especificamente. E isso vai até talvez nos correios de Atlanta e, você sabe, Michael uma rota particular. E então a partir daí ele será entregue na rua e no endereço, e então a pessoa vai abri-lo e eles olham para Thea o nome, e se é o nome deles, então eles vão realmente, uh, tirar uma despedida e pegar o pacote. 3. Entendendo a internet 2: Vamos trazer isso de volta ao nosso cenário e como tudo se relaciona com o teatro. O sistema de correio é uma rede de correios conectados, e a Internet é uma rede interconectada de computadores. Hum, agora na sua rede mais básica há apenas dois computadores que estão conectados. Você poderia apenas obter qualquer cabo infinito e se conectar a computadores, e você teria uma rede de nível muito baixo. Ah, mais em rede útil seria onde você tem vários computadores conectados uns aos outros E agora, . obviamente, você não quer ter um tribunal por computador na rede e fios conectando cada computador, os outros computadores, porque isso seria uma grande bagunça de camelos. É muito mais simples ter um computador sendo o hub dedicado da rede e todos os computadores conectados em um computador, o hub e, em seguida, que um computador pode rotear informações de qualquer um dos computadores para qualquer outro computador. Ele só passa por aquele centro. Agora os hubs são você pode, você ainda pode sentar-se, prepará-los hoje, e um monte de pessoas já os instalaram no passado. Mas o que é um pouco mais fácil agora é ter um computador dedicado que é construído com opropósito específico de ser um desses hubs. Mas o que é um pouco mais fácil agora é ter um computador dedicado que é construído com o Dessa forma, você não tem que configurá-lo. Você não precisa se preocupar com alguém desligando seu hub ou, você sabe, fazendo uma atualização de software ou algo assim. Toda a sua rede vai para baixo enquanto o hub está inativo. Agora, a maioria de vocês provavelmente tem o que é chamado de roteador. Este é um sim é um escritor sem fio, e também tem algumas inundações Ethernet na parte de trás, então eu posso conectar um monte através do WiFi, e então eu posso conectar até quatro computadores através dos plugues Ethernet. E este é, na verdade, um pequeno computador que se parece com um computador. Mas lá dentro há uma placa mãe. Há memória, há armazenamento. E, hum, isso vive para servir tudo o que faz. É tráfego de rede ratos de um computador para outro. É por isso que chamamos de roteador. Você também pode chamá-lo de servidor se você quiser causar esse tipo de o que ele é. E assim, em nosso cenário, digamos que eu quero que meu amigo seja capaz de acessar este arquivo, e eu digo a ele, Ir para Brenton string dot com barra arquivado em txt. Esse é o meu endereço web. Então isso é, você sabe, é uma espécie de como no sistema de correio você tem que ter um endereço, e ele tem uma sintaxe para ele que você não pode apenas direita em qualquer ordem. Você tem que fazer isso em uma determinada ordem. Você tem que colocar o domínio em primeiro lugar. Você tem que colocar ponto com, você tem que colocar barras e tudo mais. Mas, Mas você sabe, então ele tem seu Ratter, e ele faz o pedido, e o roteador vai olhar para isso e dizer, eu não tenho jurisdição sobre esse endereço porque não está em sua rede local e Atlanta, certo? Então o que é escritor vai fazer é enviá-lo upstream para outro servidor, um computador que é projetado apenas para lidar com esse tipo de tráfego de rede em cerveja chamada servidores. E o que o computador fará é então verificar seu banco de dados para ver, não é? Não, uh, não tem jurisdição sobre. E essa coisa, quero dizer, não está olhando para os arquivos neste momento. Ele vai começar a olhar para o domínio deles, realmente, realmente, porque isso é o nível mais baixo que é como o equivalente a como o país ou o CEP ou algo assim. E se ele não tem jurisdição, então ele enviará essa solicitação em até um servidor ainda mais amplo e geral. E esse servidor vai olhar para o nome de domínio e vai verificar seu banco de dados para ver se ele sabe assim. É interessante. Basicamente, tudo o que esses computadores fazem é olhar para o nome de domínio e descobrir se eles têm jurisdição e qual computador não tem jurisdição. Então nós chamamos esses servidores de nomes de servidores, na verdade, porque tudo o que eles estão fazendo é olhar para os nomes de domínio e temendo onde esse nome de domínio está no mundo, como, literalmente, como onde ele Na verdade é. E então, eventualmente, um servidor de nomes dirá, eu conheço esse domínio. Eu sei onde ele está, e então ele vai enviá-lo para o servidor real assim enviado, então ele vai enviar o pedido para o meu computador. Eu tenho um laptop que tem algum software instalado que permite que ele interface Teoh com os servidores, e desta forma é chamado de software servidor. Você. Se você tiver um Mac, ele será instalado por padrão. Na verdade, você só tem que configurar, e você pode empatá-lo em qualquer computador. Este software de serviço. Então eu tenho este software de servidor e ele recebe esse pedido e que ele envia o arquivo de volta pela Internet . Então lá vamos nós. Trabalho feito, certo? Bem, é um pouco mais complicado do que isso, porque eu não quero ter meu laptop sempre ligado e, uh, uh, nunca tive é o mesmo tipo de problema com o hub, certo? Se meu laptop for desligado os cinco para reinicializá-lo, então meu site será desativado. Então o que eu quero fazer é ter um computador especial construído, construído para fins específicos que é um servidor, não apenas um laptop de propósito geral, mas ele vive para servir sites. Certo? Então é um servidor, e ele tem que ter realmente incrivelmente boa conexão com a Internet muito rápido. Tem que ser muito alta memória para que ele possa, uh, segurar todas as coisas e ter várias conexões. Às vezes, dependendo do quão grande você está chateado é. Milhões de conexões ao mesmo tempo aconteceram muito rápido, disco rígido, para que você possa obter essas informações fora do disco rígido no dso realmente construindo o seu próprio servidor. Sabe, você poderia fazer isso, mas ter um bom servidor vai custar muito dinheiro. E é por isso que a maioria das pessoas que a maioria das organizações nem se incomoda estava configurando seu próprio servidor. O que eles fazem é pagar a outra organização especializada na criação de serviço para fazê-lo por eles. E isso é chamado de host da Web. Então você sabe que o termo anfitrião se aplica aqui. Ah, anfitriã é alguém que convida você a usar seu espaço como o anfitrião de uma festa convida você a usar sua casa. Você sabe, se a cidade hospeda os Jogos Olímpicos de Inverno lá, convidando espectadores e atletas para vir e estar em sua cidade e um anfitrião Web convida seu site para entrar ao vivo em seu servidor. Então isso é muito mais simples do que configurar seu próprio servidor, obviamente, e como parte deste curso, tiro Leaf está fornecendo seis meses de publicação gratuita na Web. Isso significa que você terá um lugar para o seu site existir na Internet. Esse trabalho foi feito para você, e em vez de ter que pagar normalmente você paga como uma taxa anual ou mensal. Você tem seis meses de graça para passar por esse curso. Essa é uma introdução básica à infraestrutura da Internet. As únicas coisas reais que você precisa tirar disso são que você precisa de um endereço da Web . Também conhecido é um nome de domínio e B. Você precisa de um servidor Web também conhecido como Web Posting, então vá em frente e assista ao próximo vídeo para obter ajuda para fazer isso. 4. Obtenha seu domínio gratuito e a hospedagem na web: nós vamos estar fazendo todos os nossos experimentos e em projetos de palestras e tudo isso, na verdade em um site ao vivo, seu ponto com domínio e na folha de tiro real web hospedagem de seis meses de publicação gratuita na Web que você recebe para este curso. Então é como um playground de aprendizagem que você vai ter que, uh, trabalhar dentro e sobre. E então você precisa configurar isso. Então, primeiro, você precisa obter um domínio de domínio custar dinheiro. Eles são registrados em um ano, ano para ano por, hum, o que são chamados de registradores e eles são configurados por I. Posso ver um e é este órgão governante da Internet que escolhe quem poderia ser um e eles definem os preços Os nomes de domínio normalmente custam cerca de 12 dólares por ano, dependendo se você está recebendo uma organização dot com e dot ou o que não. Alguns registradores cobraram mais, então eles têm lucro. Algumas empresas de registro de domínios cobram menos como uma promoção. Configurar o seu domínio e hospedagem com folha de tiro é super fácil em tudo é através desta página que você vai atirar folha dot com barra Cadastre-se e você vai chegar a esta página e você pode obter sua hospedagem gratuita na Web e você é domínio gratuito aqui tudo em um só lugar, Hum, tudo de uma vez. Então, para obter a liberdade e você tem que escolher um desses domínios, é anotado aqui. T K, g A. CFP e ML são os que estão disponíveis agora, e eles estarão aqui embaixo no fundo. Então este é o domínio de nível superior com ponto é obviamente o mais famoso e bem conhecido, então você vai escolher um domínio e apenas digitá-lo aqui e, em seguida, verificar a disponibilidade para ver se ele está disponível. Se você está disposto a pagar por algo como um ponto com, você também vai ter que trabalhar um pouco mais para escolher um encontrar um domínio que é, Ah, já não tomado. Se você quiser comprar um domínio ou se você já tem uma demanda que você deseja transferir para o tiro, deixe os servidores de nome para o tiro deixar postagem. Vou falar sobre isso no final do vídeo, mas por enquanto vamos apenas falar muito rapidamente sobre como passar, usando o domínio gratuito e a hospedagem gratuita, então você tem que continuar verificando até encontrar algo que esteja disponível uma vez que você encontrar algo disponível. Mas eu vou te dizer isso eu vou te dizer que é de graça se você escolher um de graça e continuar. Então, a principal coisa que você precisa fazer é marcar esta caixa. Certifique-se que é mês para mês agora porque, uh, uh, você só está recebendo seis meses grátis através de postagem na Web. No final dos seis meses, você será convertido para ah cliente pago ou sua conta será excluída. Dependendo do que você quer fazer. Ajudo-te a transferir para outro anfitrião se encontrares outro anfitrião que preferes também . Então, o que? Publicando domínio tudo em um só lugar. Você só vai configurar seu código promocional. Você pode ver que eu já apliquei este código promocional A B C D E F G é falso. Você colocará o código promocional que você obtém dos vídeos. E então é apenas um processo simples de verificar e preencher as informações de registro . E então, se você fizer isso onde o seu domínio e você está hospedando ou ambos de folha de tiro, então você está configurado e bom para ir é tudo muito simples. Hum, agora, se você quiser, hum, se você quiser usar um domínio mais exclusivo que não é um dos livres. Há algumas opções, então, obviamente, você poderia apenas comprar de folha de tiro. Outro truque é que você pode fazer uma pesquisa por nome de domínio e muitas vezes outros registradores terão ofertas e promoções acontecendo. Então agora parece um e um. GoDaddy tem domínios por um dólar no primeiro ano. Então o que isso significa é que você tem esse domínio registrado para o primeiro ano por um dólar. Depois disso, você tem que pagar o preço total você tem que pagar o preço totalpor esse domínio. Seja o que for agora, você pode transferir domínio de um passeio de registro para outro. Às vezes, há taxas de transferência, às vezes não transferência. Se você pode ser sobre o preço de registro e domínio por um ano, que geralmente é como, você sabe, você sabe, em torno de US $12.10 a US $12. Então esta é uma boa maneira de obter um domínio se você quiser, como um nível superior como ponto com ou algo assim. E outra coisa a saber é, não deixe seus domínios expirarem no final do ano. E outra coisa a saber é, se você deixar sua demanda expirar, o que acontece é que os spammers os compram dentro de segundos após a expiração. E pode ser impossível recuperar seu domínio agora, em termos de escolha de um bom nome de domínio, você quer alguns limites? Curto, Fácil. Lembre-se, memorável tipo A ble. Hum, você quer tipo de encontrar um equilíbrio entre tudo isso e outra coisa que você pode fazer é você pode fazer domínio hacking domínio domínio hacking é se você já ouviu falar de delicioso Delle Donne ASIO i ceo dot nós. É um nome interessante. Isso é delicioso e não, quando eu digito, ele realmente só vai para delicioso ponto com. Mas o que eles estão fazendo lá é que eles escolheram o domínio top level. Há domínio real é o CEO e, em seguida, há Ah, há sub domínio é Dell e você pode ter tantos subdomínios como você quer. Você pode configurar isso então realmente, o que eles estão fazendo é que eles nos emitiram e então eles tomaram algumas liberdades criativas para fazer um feitiço. Delicioso. Então isso é chamado de hackeamento de domínio. Não é hackear é só hackear significa brincar com ele. Então goto lidar em maio eu don e nosso er domínio e nota novamente pode mudar para o comportamento dot com porque é realmente difícil digitar esses hacks de domínio. Mas isto vai ajudar-te a escolher alguma coisa. Então digamos que você quer dio-cool banana, hum, dá-lhe todas as opções, e então dá-lhe como truques. Como se houvesse o ponto n um um domínio de nível superior que você pode usar, e está ciente de todos os diferentes domínios de nível superior. Hum, então há o nome ah dot. Há um ponto Eu, hum, há você poderia fazer dot am am slash e ou usar um diretório. Então este é, ah, útil porque ele diz quais domínios já estão disponíveis. Então, se ele tem este círculo verde, então esse domínio está realmente disponível e você pode registrá-lo. Hum, essas coisas você provavelmente vai ter que ir registrar em outro lugar porque Shut Leaf não oferece uma tonelada de domínios de nível superior. Outro que você pode usar é chamado para significar Hack tem Emmy, e este não está conectado. Mas, hum, ele vai te dizer um pouco mais rápido que tipo de opções existem. Só está disponível. Eso eat dot es é o domínio de nível superior da Espanha para que você possa ver que é muito rápido e pegar diferentes opções. E só para notar, se você acabar com um estranho nível superior domínios como DOT N A, que é Nâmbia, você pode ter que ir para o registrador da Nambia, e eles poderiam cobrar como US $100 por ano ou algo ridículo. Então tenha isso em mente que os nomes realmente bizarros às vezes são controlados pelo país que possui esse domínio de nível superior, e eles podem fazer o que quiserem. Então isso é uma desvantagem. , hum Mas, hum, , se você escolher o seu próprio domínio que não está disponível através do Shot Lee para você encontrar um bom negócio. Hum, então você só vai aqui, colocar seu domínio, e então Shot Leaf é capaz de conectar sua hospedagem ao seu domínio, e então você vai ter que ir ao seu registrador, seja quem for, se é ir papai ou nomeado barato ou alguns que você sabe, Nambia registrador, você terá que fazer login em sua interface e encontrar a opção. Teoh definir os servidores de nome para esse domínio e colocar em Ennis um ponto tiro deixar ponto com e tem até à data tiro deixar ponto com como os servidores de nome. Então você quer fazer isso o mais rápido possível, porque pode levar um tempo para servidores de nomes para se propagar para a hospedagem através da Internet, então você vai configurar. Você vai se inscrever aqui para a hospedagem. Diga-nos qual é o domínio e, em seguida, no seu distribuidor autorizado de domínios. Se não estiver, mostre se você precisa definir manualmente os servidores de nomes e, em seguida, conceda até dois dias para que ele se propague na Internet. Quando é propagado. Quando você digita seu domínio, você verá a mensagem Shelby informando que você está pronto para começar. 5. Interoperabilidade: Então vamos começar com a interoperabilidade. Digamos que tenho que programar bloco de notas e escritório de trabalho. É como o Microsoft Word. Agora vou criar e interagir em documentos de texto não interoperáveis. Agora vamos subir, e vamos guardá-lo como qualquer nome que esteja lá. Mas o tipo é a palavra, Doc. Então escritórios trabalhistas operáveis com o Microsoft Word. Eu poderia guardá-lo em todos esses quatro meses. Eu vou escolher Dot Doc e vá em frente e salve e você vê que está aparecendo aqui. Agora vamos colocá-lo no bloco de notas, que não pode abrir arquivos de palavras. Isto não é interoperabilidade. Se quisermos que eles entrem operem, temos que salvá-lo em um tipo de arquivo que ambos possam lidar. Sem almofada. Lee faz texto simples. Então, se eu quiser que isso funcione no bloco de notas, vamos excluir o arquivo e começar de novo. Agora, desta vez, quando o salvarmos, vamos salvá-lo em um formato que é operável com o bloco de notas porque não, Pat só salva texto. Agora aqui está o arquivo. Arraste-o para dentro Agora funciona. E costumava ser isso se você tivesse um arquivo que você está enviando de um Mac para um PC, ou vice-versa. Não era garantido que eles teriam o software certo instalado para fazê-lo funcionar, então a solução que eles criaram para a Internet quando estão projetando era HTML. É um formato de documento comum que todos concordam. Eles tornariam seu sistema de computador capaz de ler este formato de documento. HTML significa linguagem de marcação de hipertexto. E então eles também concordaram em algo chamado http é o caminho para os computadores para todos falar uns com os outros? Eles têm que falar a mesma língua. Se estou aqui em Pasadena e estou a falar com um computador em Nova Iorque e estou a enviar isto através das ondas de rádio através da Internet e eles não sabem como falar um com o outro, não vou conseguir o ficheiro que preciso. Então eles têm que falar a mesma língua. Essa linguagem que eles criaram é o protocolo de transferência de hipertexto http. Então você percebe http html. Estas duas coisas principais que eles criaram para fazer a Internet funcionar que são chaves de interoperabilidade. Ambos têm hipertexto H t no início, então os protocolos de transferência, a linguagem de marcação ou o formato do documento, mas ambos são hipertexto. O que é hipertexto? Bem, essa é a segunda coisa chave na internet. 6. Hiperlinks: hipertexto significa além do texto. É mais do que apenas texto normal que tem hiperlinks e outras interatividades. Costumava haver terminais antigos onde você poderia realmente tocar no monitor para seguir um hiperlink, e isso levaria você a outras partes do documento ou a outros documentos. A hiperligação é algo que liga uma parte da Internet a outra. Então a Internet você pode pensar como uma grande web com todos esses pequenos pontos de ancoragem diferentes . E cada ponto de ancoragem tem links hiperlinks, hipertexto que saem para outra parte pequenas âncoras, pequenas partes da Internet. Então você tem um ponto aqui. Aponte aqui, aponte aqui. Aqui, aqui, aqui, aqui, aqui. E esses pontos estão todos conectados uns aos outros. E o que torna a Internet ótima é que não só este ponto está conectado a todos esses outros pontos, mas você tem outros pontos dentro daqui que estão todos conectados uns aos outros, e isso é assim começa a parecer uma Web. Mas, na realidade, parece mais uma grande rede neural. Na verdade, é apenas um pouco caótico, e a razão é que nenhum ponto é mais importante do que qualquer outro ponto, cada ponto âncora na Web é igualmente capaz de acessar qualquer outra parte da Web. Então você tem hiperlinks que ligam todos os fios de conexão e esta Web ou esta rede, e eles estão conectados em qualquer lugar. Bem, isso na verdade não foi muito intuitivo. Foi uma invenção de Tim Berners Lee que foi, bem pensado para garantir que a Internet seria interoperável. E isso facilitaria a hiperligação de todas essas âncoras diferentes. Então, a maneira antiga de fazer isso pode ser algo como Conectar ao seu servidor. Esse é o seu alcance que está em outra parte do mundo. E você sabe, você digita o número de qualquer coisa, então você tem que fazer login. Então você tem que navegar através da estrutura de diretórios de computadores. Então você tem que encontrar o arquivo e solicitá-lo, e então ele é enviado pela Internet para você, e então você pode abri-lo. Esperemos que esteja em um formato que seu computador possa ler. Então hoje em dia, com você ou então é simplificado. Então você colocou um link para um U.L E é assim. Há o nome de domínio que lhe diz com qual computador começar a falar. E então você tem qualquer pasta ou estrutura de diretório e você tem o nome do arquivo bem aqui , e é tudo apenas grupo ali, e ele faz tudo para você. 7. Plaintext em x em rich texto: Então, se vamos criar uma página da Web, não podemos simplesmente abrir o Microsoft Word e escrever algo nele e salvá-lo e esperar que funcione na Web porque ele tem que ser interoperável. Então, se você já tentou realmente fazer isso, hum, você não percebe isso. Mas o Microsoft Word usa linguagem de marcação ah. Tem sua própria formatação. Não é linguagem de hipertexto. É a Microsoft, qualquer que seja a minha linguagem de marcação. Então, se você tentar escrever no Microsoft Word, por exemplo, com uma nova linguagem de marcação, então você tem o bling de mercado de joyriding sendo codificado na linguagem de marcação da Microsoft . E então quando você servi-lo como um navegador ou algo através da Internet, ele vai antes de tudo, ele vai. Http irá dizer-lhe que este é um documento Microsoft Word, e assim o navegador provavelmente não vai sequer tentar lê-lo. Mas se acontecer, vai ficar muito confuso porque não tem nenhum documento de palavras. Só sabe HTML. Então o que precisamos fazer é ter certeza de que mesmo se escrevermos um bom html, ele não pode ser codificado em outro. A linguagem tem que ser codificada à medida que a digitamos, então você tem que encontrar o que é chamado de editor de texto simples 8. Editor de Plaintext em que: por isso, se você estiver no Windows isso é fácil. Apenas abra o bloco de notas. Se você não conseguir encontrá-lo, pressione a tecla Windows são digite Nota. Pad atingido. Entrar. Se estiver no Mac, pode abrir texto agora. No Mac, é um pouco. É um pouco mais difícil porque você tem que se certificar de que você está salvando como texto sem formatação e não rich text. Isto é uma interrupção do futuro. Estou sugerindo que um único editor de texto inteligente teve desde realce sexual, e é chamado de colchetes. Então isso vai ser muito melhor do que o que eu tinha sugerido anteriormente. E é por isso que estou voltando e revisando este curso. Então, se você está no Windows ou Mac, você deve ser capaz. Teoh, baixe este goto colchetes o i O e venha a este site e abaixe o botão. E isso é assim que ele parecia no OS X. Uma vez baixado, clique duas vezes nele para abrir. Eu passei por esse processo e, como sempre com o Max, você o arrasta para sua pasta Aplicativos no Windows. O processo é muito semelhante. Faça colchetes, não o meu próprio, e você clica no meu botão esperar que ele baixe, e você vai em frente e clique duas vezes sobre ele. Clique, execute e deixe a localização da falha da parcela esfriar. Quer instalá-lo? Vá em frente e abra. Parece assim tanto no Windows quanto no Mac, quando as grandes coisas sobre colchetes é que, como você usá-lo, ele vai fazer alguns recursos realmente avançados. Então eu definitivamente recomendo isso para você sobre qualquer outro centro de tecnologia. Neste ponto, ele é projetado para desenvolvedores da Web na parte inferior. Aqui mesmo, você pode selecionar que tipo de código usando. Então, se você disser que dentro de oito extensão de e-mail, então será. Você sabe, se você estiver fazendo CSS para texto sem formatação ou outra coisa, ele detectará automaticamente isso. E se eu digitar tags HTML aqui, ele faz algumas auto complete para mim e algumas outras coisas legais como essa. Todos os seus trabalhos faltam ar aqui à esquerda. O completo que você tem aberto estará aqui, e então você pode instalar plugins e outras coisas usando este botão. Então esta é uma ferramenta muito legal que é realmente poderosa. E, no entanto, é simples em muito fácil de entender quando você está apenas começando. Então definitivamente instale colchetes antes de continuar. Isso seria uma ferramenta muito útil para você, mas o importante é que você é capaz de compor um documento e salvá-lo em formato de texto simples . Então ele vai ter a extensão dot txt por padrão ou você ou o que vamos fazer é por que deve dar-lhe HTML. Então obtê-lo que vai configurar positivo, positivo. Não nos levante e volte assim que puder verificar se está salvando em texto sem formatação. 9. Como carregar o Plaintext em um navegador: Ok, você tem seu editor de texto instalado, e você descobriu como fazê-lo funcionar e modo de texto simples. Eis o que quero que faça. Hum, certo. Olá. Mundo em seu documento. E você poderia expandir isso mais tarde. Não tente digitar nenhum código agora. Simplesmente certo. Texto simples, certo. Olá, mundo. E como você salva como se já o tivesse salvo? Guarde em um lugar diferente. Então salve-o como, um seu arquivo e escolha-o. Nome encontrado. Isto é importante. Você tem que estar ciente de onde você está salvando porque você tem que ser capaz de mover este arquivo mais tarde. Então eu recomendo salvá-lo diretamente em sua área de trabalho ou criar. Na verdade, é ainda melhor criar uma pasta na sua área de trabalho chamada O quê? Fazendo 101 unidade um e salve-o nessa pasta. Dê-lhe um encontrado anual Lembre-se e dar-lhe a extensão dot html. Agora certifique-se de que não é um nome de arquivo oculto pendente. Extensões para ele assim. Txt no final. Já que está guardando em texto simples, assim que descobrir isso, você vai salvar isso. Será salvo é o seu arquivo. Nomeie o HTML Não haverá nenhum arquivo oculto. Extensões não serão salvos em qualquer outra forma de elegância com texto simples morreu html. Certo, agora mantenha agora mantenhaem mente onde colocou. Abra o seu abridor, navegador, Qualquer navegador, safari, cromo, Firefox, Internet Explorer. E use a caixa de diálogo aberta como controle de abertura de arquivo. Seja qual for o seu atalho para o seu sistema operacional ou se você tiver a pasta aberta, você pode simplesmente arrastar, clicar em arrastar o arquivo que você acabou de criar. Eu te disse, lembre-se onde ele está em seu navegador apenas em uma nova página vazia e o navegador deve , se você fez direito, abrir apenas o arquivo de texto simples. Você tem esse arquivo de texto do plano. Agora está aberto exibindo exatamente o que você escreveu. Não deve parecer diferente a menos que tenha escrito um código louco. Deve ser apenas texto plano simples. E se você olhar na barra de endereço do navegador, você deve ver seu nome de arquivo 0,80 mil. E então antes disso, no URL, você tem todas as informações de localização e é que você vai notar que ele começa com algo como arquivo ou ele não começa com como as coisas normais. Não se parece com um mundo normal da Web. Não há domínio, por exemplo, é um arquivo local. Hum, então, mas vamos fazer algo com isso em um minuto. Espero que não tenha usado roupas. Não feche seu centro técnico. Ao fazer isso, você pode salvá-lo e mantê-lo aberto. Então aqui está A Aqui está o truque que você deve sempre fazer quando você está compondo e editando é ter uma janela que é sua janela de resultados e uma janela que é sua janela de edição . Então, se você tiver seu editor de texto sem formatação aberto ainda, coloque isso na metade da tela e coloque seu navegador e a outra metade da tela. Você pode olhar para ele ao mesmo tempo. E se você não mudou as coisas, agora vá para o editor de texto sem formatação e faça uma alteração. Digite algo novo e, em seguida, você salvar, não dizer que Salvar no mesmo lugar porque você já tem ele aberto. Não feche nada agora Tab sobre ou vá para o navegador e encontre o botão Atualizar. Ah, atalho no Windows é cinco. É um pouco como reciclagem olhando ícone atualizar e você verá que a página atualiza com o que você acabou de digitar em seu centro de texto. Então esta é a essência de uma página da Web. Você acabou de criar uma página da Web. Não é bem uma página da Web porque não está na Internet. Se você quisesse compartilhar isso comigo, não poderia me dar um U R L. e então eu poderia ver. Teria que me mandar uma cópia inteira do arquivo. Então isso não é bem a Internet, mas é uma página da Web. É uma página que está sendo aberta pelo navegador, e é texto simples que faremos com o Cold mais tarde. Mas é, hum, hum, ele está sendo aberto pelo navegador em formato HTML, na verdade, então faça isso. Faça algo como apertar retornar algumas vezes, tente fazer uma lista e, em seguida, atualizá-lo e ver o que acontece. Você percebe que não é bem o que você espera. Não há formatação permitida ou tente colocar seis espaços entre uma palavra eso. Algo interessante está acontecendo. Precisamos formatar nós mesmos. Vamos fazer isso manualmente, mas por enquanto, mas por enquanto, o que é importante saber é que você acabou de criar uma página da Web 10. Frontend vs.: pensamos nisso como estamos procurando conectando-se ao servidor, que está na Internet, que é a Internet. Você pode até pensar nisso como na nuvem em algum lugar no céu. E o servidor está sempre lá, esperando para servir. Então, se o servidor é a Internet e nós estamos aqui na Terra, nós somos o cliente. O cliente é o que recebe os serviços do servidor. Então o cliente é o lado da frente da equação. O servidor é a parte traseira ou o lado da Internet. Agora que o cliente é você com seu computador ou qualquer outra pessoa que usa seu computador para se conectar ao mesmo servidor. Esse é o lado do cliente. E eles estarão usando coisas como navegadores em vez de software de servidor. E chamamos o lado frontal do cliente porque é a parte que vemos e chamamos o lado de trás do servidor porque a parte que não vemos é também como pensamos que está no céu. As metáforas ar um pouco confuso, mas o lado frontal é o que está bem na frente de você backside ou backend é o que está na Internet geralmente para que as coisas acontecem no servidor acima na nuvem no céu. Isso é material de back-end que acontece diretamente no seu computador, no seu disco rígido na memória e RAM do seu computador e no seu monitor que é front-end. Então, quando um cliente se conecta a um servidor, eles se comunicam com http, o cliente pede ao servidor um arquivo HTML, e o servidor o envia pela linha abaixo para o cliente Nós chamamos isso de download. upload seria com o inverso se o cliente fosse enviado para arquivo para o servidor, o que a maioria das pessoas não faz a menos que você seja um desenvolvedor da Web e vocês sejam todos desenvolvedores da Web . No final desta lição, vamos aprender a fazer upload. 11. upload de FTP: você tem uma página web. Como você vai colocá-lo na web? Precisamos de outro protocolo não para hipertexto, mas para transferir arquivos para a nuvem para carregar arquivos . Isso é chamado de protocolo de transferência de arquivos. É muito semelhante ao http de muitas maneiras em que é instalações interoperáveis, comunicação entre dispositivos entre software e computadores. Mas seu objetivo, como diz, é transferir um arquivo para a Internet para um servidor ou baixar Ah, bom cliente FTP. Seu pato cibernético. Vá para o pato cibernético ponto c h. Tenha cuidado. Você não digita pato cibernético ponto com. É o ponto de pato cibernético. Role para a direita e você verá os comprimentos de download. Isso também funciona para o Windows. Vá em frente e clique no arquivo ZIP e aguarde o download. Agora, isso é um pouco interessante. O download é um arquivo zip, e você pode assisti-lo baixando em sua e você pode assisti-lo baixando em suapasta de downloads aqui. E se você clicar nele aqui ou clicar duas vezes sobre ele em sua pasta de downloads, ele irá descompactá-lo primeiro. Agora ele não lhe dá automaticamente o pequeno ah little utilitário para arrastá-lo aplicações. Então você tem que encontrar sua pasta de aplicativos e arrastá-lo daqui para aplicativos. Tenho um atalho bem aqui. Deixei cair. Agora, a primeira vez que você abri-lo, pode haver algumas dependências que são instaladas. Vou arrastar isso para a minha área de trabalho, ou talvez você queira arrastá-lo para o seu documento para fazer um atalho. Há também alguns marcadores aqui no início para dar alguns exemplos. Mas estes são apenas confusos, e você não vai usá-los de qualquer maneira, então vá em frente e exclua-os. Agora você tem pato cibernético instalado. Isso será semelhante no PC. Existem algumas maneiras de fazer uma conexão. Inicialmente, você poderia fazer uma conexão rápida aqui. Você pode fazer uma conexão aberta aqui, mas eu sugiro que a primeira coisa que você faz é criar um marcador. Será muito semelhante a fazer conexão aberta usando isso. Então vá em frente e clique neste pequeno botão na parte inferior. Deixou a vantagem para adicionar uma conexão. Veja, eu só fiz isso e ele o criou. Vou apagar isso e começar de novo recebe um clique neste pouco mais e aqui você tem um novo marcador de conexão. Então vá em frente e dê um apelido. Vou chamar isso de Lauren e Brenton porque o site que estou fazendo para este curso é Lauren Brenton ponto com. Agora o seu servidor, esse é o nome do seu domínio. Agora há um truque aqui que você pode realmente, desde que o seu hospedado em servidores de folha de grito, você poderia fazer shout leaf dot com coloca tiro Leif dot com, mas vai ser mais divertido e fácil de lembrar se você digitar seu nome de domínio, então digite seu nome de domínio. Aqui o meu é Lauren e Brenton ponto com. Então note que eu não coloquei www na frente e eu especialmente não coloquei http na frente. Isto não é protocolo de transferência de hipertexto. É FTP. Se você realmente queria que você poderia ver o URL aparecer, diz o FTP lá em cima. Você poderia fazer isso, mas deixe assim. Apenas o domínio e e deixar a porta em 21, em seguida, coloque o nome de usuário. Então, como você sabe o seu nome de usuário? Vá para as informações de e-mail que foi dado a você então Aqui está a informação que eu recebi enviado um e-mail. Então já coloquei no domínio. Agora use o nome aqui, ele é I e B, então eu vou pisar a pasta final. Agora, eu espero ter expandido este mais opções aqui porque vai tornar as coisas muito mais simples para você se você começar com um caminho padrão de www e eu vou mostrar-lhe o porquê em um segundo. Mas vá em frente e coloque o caminho padrão de www. O resto. Você pode meio que sair sozinho. Ok, então vá em frente agora e feche a senha que você vai ter em um minuto. Então agora eu tenho este ano. Agora você pode abrir a marca do livro, e ele irá pedir-lhe a senha. Então eu vou copiar a senha e colá-la, e eu vou deixá-la para adicionar ao chaveiro. , Na verdade, não me deixa fazer isso, mas se você é uma armadilha, você pode ser capaz de ter isso ser lembrado. Não faça login anônimo. Então use o nome é essa senha que eu acabei de colar. A partir disso, você notará que o servidor de nomes no e-mail de contato não entra em jogo para isso. Então eu não devo dizer, Não mostre isso novamente e continue porque eu não preciso que isso seja uma conexão FTP segura . Tudo bem, está conectado. Lembra-te que te disse para escreveres www para o caminho inicial. Isso é porque se você não tivesse feito isso, você realmente teria começado no diretório raiz para que você possa navegar dentro de seus diretórios, usando isso ou com isso. Então eu só fui para o meu diretório raiz agora clicando neste botão. E então isso é o que você teria sido apresentado com se você não tivesse digitado aquele pequeno www. Então você entrou nisso. Você carregou para esta pasta www, que é exatamente como a pasta onde todas as coisas públicas da Web estão. Na verdade, é um apelido ou atalho para sublinhado público. HTML. É a mesma coisa que você notou. Ambos têm um C. G. Eu estive lá. Se eu abrir HTML público, eu vou para o mesmo lugar é se eu abrir Www. Esses outros são tipo de coisa que você não precisa se preocupar. Eles cuidam de si na maior parte do tempo, então eu vou voltar para a verdade, eu vou para Www. E o cerco que estive é algo que é uma espécie de retrocesso. É um pouco arcaico. Não precisamos, então vou deletar. Então é assim que você exclui um arquivo? Um FTP. Agora, como você faz upload? Vamos tirar isso do caminho e abrir o arquivo html hello dot que eu tenho aqui. Então este é o arquivo que eu quero enviar. É nesta pasta de criação da Web na minha área de trabalho, e é bem simples. Este é o local onde estou arrastando, que vai se correlacionar com Lauren e Brenton Dot com Slash e então o que eu colocar aqui estará diretamente lá. Esta é basicamente a raiz do domínio, então isso é um pouco confuso. É quando eu subo aqui. Esta é a rota no back-end. Mas esta é realmente a raiz Www. Então, para colocar isso lá e agora ele vai carregar. Está me mostrando toda a informação que precisei para carregar, e diz “currículo”, pare todos esses controles diferentes que eu tenho. E então quando terminar, ele me diz, upload completo. E agora posso ver que o arquivo está lá. Então isso está no meu disco rígido local nesta pasta aqui. Olá dot html. Agora este é o inferno oda html no meu site meu site Lauren e Brenton dot com website. Então vamos realmente abrir um navegador e verificar e ver se confinamos hello dot html. Ok, aqui está migalha. Vou escrever o meu nome de domínio Lauren e Brenton dot com. Então, se eu apenas ir aqui sem digitar aquele hello dot html, ele vai levá-lo para um índice. Este sempre será visível. Mas agora ele é assim que eu poderia apenas clicar sobre isso para chegar ao meu vazio um html. Mas vou continuar no tipo a coisa toda. Lauren Brenton ponto com barra para frente Olá ponto html Hit. Entra e ali está o meu documento. Este aqui é este documento. Agora você quer ver algo interessante aqui é na Internet. Vamos abrir outra conta e abrir na Srta. Tab, o mesmo arquivo. Mas do meu disco rígido eu arrastá-lo para dentro. Então você vê o caminho aqui? Este é o caminho para o meu disco rígido no meu mac, seus usuários de arquivos Brenton desktop Web, fazendo um um um olá para HTML. É o mesmo arquivo que o da internet. Uma conta de Miss. Lauren Brenton ponto com barra Vologda html Então eles são diferentes. Você é mais, mas o mesmo arquivo está localizado agora em dois lugares. Onde seria mais apropriado dizer que esta é uma cópia deste arquivo? Então aqui está algo que é importante, entendeu? Se eu editar este arquivo no meu disco rígido, ele não será atualizado na Internet até que eu faça o upload novamente. Então vamos em frente e fazer isso aberto com texto nele. Agora, aqui está o meu ficheiro. Coloquei um pouco de HTM Oh, mas vou dizer olá. Esta é uma alteração local e salvar. Então acabei de fazer uma alteração neste arquivo. Agora, se eu for para o meu navegador depois de ter tudo o que eu tenho que fazer para salvar isso, vá para o meu navegador e vá para a guia local e recarregue e você vê Olá. Esta é uma mudança local agora sobre fazer qualquer outra coisa. Lauren Brenton ponto com Refresh. Nenhuma mudança feita. Por quê? Porque eu só mudei no meu disco rígido. Se eu quiser ver a mudança aqui na Internet. Eu vou ter que arrastar este arquivo para substituir esse arquivo na Internet através de FTP novamente ia carregar novamente. Vai me perguntar, você quer sobrescrever? E eu cliquei? Sim, quero sobrescrever. E agora é carregado novamente e fez outra cópia. Isso anulou a cópia antiga. Então agora este está atualizado. Então vamos voltar para a janela e atualizar. Lauren Brenton dot com hello dot html E agora a mudança local apareceu no meu. 12. Como ensinar a quem está para entender: o mundo ao nosso redor está cheio de conteúdo, e quando olhamos para ele, nossos cérebros são capazes de processá-lo em coisas significativas que foram capazes de dar sentido a um pote. Quando a vemos, nosso cérebro dá-lhe o que significa. Quando olhamos para um documento e lemos um par de palavras foram capazes de ler o título e dar sentido a ele o significado. Esse é o título. Infelizmente, os computadores não têm essa habilidade inata que temos. Então temos que usar uma linguagem especial que chamamos de HTML para dar significado ao conteúdo com que os navegadores e computadores trabalham. Então, o que? Um computador olha para uma página da Web e a carrega. Ele precisa saber que o cabeçalho é ah, cabeçalho. Ele precisa saber que um link é um link para que quando você clica nele, ele pode levá-lo onde o comprimento deve ir. Então, usamos uma linguagem especial para dar esse significado ao conteúdo de uma página da Web, e a maneira como fazemos isso é muito semelhante a como você pode ajudar alguém que não sabia inglês que está morando em sua casa a entender o mundo ao seu redor. Então, se você tivesse um estudante de intercâmbio estrangeiro que não falasse inglês, o que você poderia fazer é pegar essas pequenas etiquetas e ir em torno de sua casa e marcar todas as partes diferentes da sua sala de estar na sua cozinha e rotular tudo com palavra inglesa para que seu estudante de intercâmbio estrangeiro não pode quando você pedir uma chaleira. Lembro-me que era a que tinha aquela etiqueta que dizia Kettle semelhante a um HTML. Vamos escrever nesta nota pegajosa, o nome do que estamos marcando para que quando a colocarmos na chaleira agora qualquer um que possa ler esta etiqueta saiba que isto é uma chaleira. HTML é semelhante na medida em que o navegador pode entender qualquer coisa que colocamos uma tag porque ele pode ler essa pequena tag. Então nós temos que ir em frente e rotular cada coisa na cozinha, o gabinete e tudo nele, cada prateleira individual, todas as coisas que estão em nossa bancada, e então cada pote um de cada vez, 13. Anatomia de uma página da site: Até agora, temos desenhado uma imagem da Internet que inclui um cliente, um servidor e uma linguagem. Mas nós realmente não conversamos muito sobre o que é que realmente está sendo transferido para frente e para trás. Agora, o que você criou é conteúdo puro ou é apenas um arquivo de texto simples, certo, Então você enviou este arquivo de texto sem qualquer código, mas você acabou de ter este texto simples caiu e ele só tem palavras. E se você for para o Conde de seu domínio, ele baixou e mostrá-lo em um navegador, e nós vimos isso. Então isso é apenas conteúdo. Isto é o que procuramos quando usamos a Internet. Normalmente não nos importamos muito com as coisas extras supérfluas. Nós realmente não nos importa o que lutou está sendo usado. Não nos importamos com o que o código parece. Nós não nos importamos se ele, tipo, parece realmente bonito. O conteúdo é o núcleo. Qualquer outra coisa é camada adicional que aumenta a experiência, mas não é necessariamente essencial para usar a Web. Suas páginas são realmente boas o suficiente para comunicar conteúdo para as pessoas agora, mesmo que sejam apenas texto simples. Mas se quiséssemos adicionar outra camada. Poderíamos usar código HTML para dar algum significado a ele. Então HTML vai dar alguma estrutura e significado para o conteúdo. Ele lida com o substantivo de sua página da Web. Só define quais são as diferentes coisas, o que são agora. Ele diz. Isto é uma ligação. Este é o Cabeçalho . Ele não tenta fazer nada mais do que apenas ter esse vocabulário básico para ajudar a dar um pouco mais de significado à sua comunicação do conteúdo. CSS lida com aditivos da página. Ele lida com a forma como ele se parece e sente. Ele não descreve o conteúdo, não o conteúdo. Nada agora possui descreve o estilo ou, como chamamos, na cunha sobre o mundo do desenvolvimento da Web. A apresentação ele entra e ele realmente não está ligado diretamente ao conteúdo. Mas ele se conecta ao HTML, e ele usa essas tags HTML diferentes que definiram diferentes partes da página. E então ele dá a essas partes diferentes e significativas da página maneiras específicas de olhar para que ele possa definir o fundo. Pode definir a cor. Ele pode definir esse tamanho na forma que pode definir qualquer coisa que você já viu em uma página da Web que parece uma certa maneira. A forma como ele parece é definido com CSS. CSS tem poder completo sobre ele. CSS só está preocupado com esses aditivos. Teremos que usar verbos eventualmente, certo? Então, quando você vê páginas da Web que são interativas com as quais você pode fazer as coisas, é aí que o Javascript entra. Então o JavaScript entra e torna uma página da Web interativa. Fazemos uma distinção entre páginas web estáticas e dinâmicas. Uma página da Web estática seria apenas uma sem nenhum script que não interaja ou muda. Você carrega, e não importa o que você faça, você não pode mudar a página. máximo que você poderia fazer é destacar algum texto. E, hum, se você continuar recarregando, será sempre a mesma página, a menos que o proprietário atualize a página corretamente, então uma página dinâmica é aquela com a qual você pode interagir. As coisas se movem, você pode clicar nas coisas. Os jogos podem ser escritos em script Java. Você pode ter aplicativos que são escritos em JavaScript, e a maioria das páginas da Web hoje são muito interativas, e você faz uso pesado de JavaScript. JavaScript apenas lida com os verbos desse conteúdo. A última parte são imagens e outras mídias, modo que imagens e outras mídias podem ser o conteúdo dentro e de si mesmo. Mas na maioria das vezes é texto se encaixa no conteúdo e você costurar em imagens, áudio, vídeo e outras mídias na página em no meio do conteúdo como um aprimoramento para o contato. A mídia incluída é, na verdade, um arquivo auto-contido, e você tem que fazer o download do servidor, bem como, em seguida, costurá-lo no conteúdo. 14. Edição ao vivo com ShiftEdit: para isso no projeto de sessão. Vamos editar algum código de novo e de novo. Nós vamos usar um editor de texto, mas a partir deste ponto no curso, nós realmente vamos usar um programa diferente. Era importante para você entender a edição de texto e para uma edição realmente poderosa, você vai querer ainda usar os editores de texto que você instalou ou usou em seu computador. Mas vamos fazer um editor de texto na nuvem a partir de agora para simplificar o processo para esses sites mais simples. Então isso é chamado Shift at it shift edit dot net Ir para mudar nele dot net Agora você vai notar Shift at dot com está disponível para aparecer se você digitá-lo, mas esse não é o mesmo site. Não vá para mudar nele ponto com deslocado ponto net. Você pode instalar o cromo e a sanção, mas , hum, você pode querer fazer isso mais tarde, então vá em frente e comece clicando no link de introdução. Esta é uma conta gratuita, embora obviamente haja opções para pagar por ela. Mas você não precisa das contas pagas. Você só precisa de uma conta gratuita por enquanto. Agora no processo de inscrição. Você pode realmente criar uma conta usando ah, conta de terceiros. Assim, por exemplo, se você estiver atribuído ao Google, você pode criar uma conta usando o Google clicar em permitir e, em seguida, ele faz login. Assim que tiver a sua conta criada, vá em frente e inicie sessão e aceda a esta tela. Se você começar a gostar de uma tela de boas-vindas primeiro, ele vai dizer que o acesso mudou. Então esta é uma tela que você precisa estar. Então, este é um editor de texto on-line combo cliente FTP. Certo, isso vai fazer tudo o que fizemos na última sessão juntos de uma só vez. Isso simplificará as coisas. É um pouco menos poderoso, e não é tão útil para fazer você entender. O conceito é por que não levou com isso. Então eu queria que você entendesse como fazer isso manualmente primeiro, mas essa é uma maneira simplificada de fazer isso. Então, a primeira coisa que você quer didio é configurar sua conexão com o seu site com FTP para que você é a maneira que você faz isso é clicar neste pequeno ícone ano. Em seguida, você poderá escolher um site depois de configurá-lo, então agora, não há nenhum site aqui, mas agora para configurá-lo pela primeira vez clicou no ícone de engrenagem e, em seguida, selecione novo site. Agora o que? Esta é essa é a mesma informação de conta que você colocou em seu cliente FTP antes. Então vá em frente e pegue seu e-mail que tem suas informações de conta shot leaf e coloque as informações aqui. É muito parecida. Ok, então eu vou mudar isso. E aqui está o e-mail que enviei para mim mesmo. Então, é claro que eu posso realmente fazer este menor. Podemos ver os dois ao mesmo tempo. Vou dar-lhe qualquer alcunha que eu quiser para a conta. Então eu vou ligar para Lauren Brenton, deixar o servidor, digitar FTP deixar isso sozinho e depois ir em frente para o domínio. Agora, esse é o seu domínio completo aqui. E lembre-se, você pode usar shout leave dot com uma vez que você está apontando para o seu site é realmente apontado para os servidores de nome de folha de tiro. Então, isso irá conectá-lo ao mesmo servidor tiro deixar ponto com ou seu nome. Basta usar o seu nome. Então menos Lauren Brenton dot com, incluindo a parte de domínio de nível superior do nome de domínio, então dot com dot net dot ou qualquer outra coisa, e então vá em frente e coloque seu nome de usuário. Esse nome de usuário é o mesmo usando ele que você tem aqui e depois pastored Copie e cole sua senha e vá em frente e salve isso por padrão. Hum, agora, o diretório que isso permitirá que você escolha qual diretório começar por padrão. Então, hum, você provavelmente não pode mudar isso até que você se conectou pela primeira vez pelo menos uma vez. Mas você vai querer voltar e definir isso como www ou public underscore html para que você não tenha que navegar até o public underscore html toda vez. E então esta é a web que você é. Deixe isso em paz. Então vá em frente e teste a conexão antes de seguir em frente. Se você pegar um ar como este, é porque você inseriu algo errado em um desses campos. Então eu disse que coloquei intencionalmente a senha errada, então deixe-me corrigir isso, e então podemos seguir em frente. Então, agora que você se conectou, você pode entrar e alterar o diretório inicial. Hum, você vai procurar por www ou sublinhado público html. Há realmente uma peculiaridade com a maneira como isso funciona, você pode ver como o diretor www foi renomeado para este nome mais longo. Então isso realmente meio que quebra. Está a indicar que isto é um atalho. Em vez disso, escolha HTML sublinhado público. Você pode ver como isso funciona neste não escolhe HTML sublinhado público como você diretório de inicialização padrão . Então você não faz isso quando você faz login, você não é apresentado com tudo isso e tem que encontrá-lo cada vez e navegar até ele. HTML sublinhado público Não vá para ele. Apenas a pasta lá e escolha essa pasta lá. Agora você está conectado lá e você pode salvar sua conexão. Ótima. Então você pode ver que eu fiz login. Deixe-me fechar isto. Agora estou conectado ao meu servidor com FTP bem aqui à esquerda. Aqui, eu tenho um monte dessas abas que continuam abrindo. Agora, esta é uma maneira de criar um novo arquivo. E você vai começar com HTML. Mas primeiro note que você já tem seu arquivo aqui. Seja o que for que lhe deu o nome, está bem aqui. E espero que você tenha dado a extensão dot html Então esta é uma maneira de editar os arquivos na nuvem diretamente para que você não tenha que fazer todo o carregamento entre cada edição. Então, se você clicar nela uma vez, nada vai acontecer. Na verdade, Soto editá-lo. Você tem que clicar duas vezes nele ou clicar com o botão direito do mouse. Se você quiser. Clique com o botão direito para editar, você tem que ir com o dedo do pé aberto. É um pouco un intuitivo, e nenhum destes abre este aberto, mas em vez disso basta clicar duas vezes sobre ele. Isso o abre e você pode ver o arquivo que você carregou anteriormente. Então, aqui está. Olá, mundo. Vamos ao meu site para ver o que é que eu tenho aqui só para nos lembrar. Então aqui está Lauren Brenton ponto com e há aquele arquivo. E lembre-se, tipos Aiken para frente barra Olá que html e eu posso ver o meu documento lá. Ok, então agora eu tenho esta janela abrir esta aba e esta aba com Thea com o arquivo na nuvem sendo editado, eu não preciso que isso tenha mais nenhum, então eu realmente vou puxar estes, puxar isso para que eu tenha isso em uma janela separada, não apenas uma guia separada. E então eu vou fazer isso para que eu possa ver os dois ao mesmo tempo porque eu vou estar indo e voltando. Então vá em frente e faça isso também. Façam suas janelas abertas um ao lado do outro e eu vou conseguir. Tudo bem. Então vamos em frente e fazer uma mudança. Então eu só fiz uma mudança aqui, e não, eu não salvei. E um pequeno asterisco aparece aqui indicando que uma alteração foi feita no documento e não foi salva. Então, sem salvar o que acontece se eu atualizar em Lauren e Brenton dot com Nada. Certo, mas se eu salvar, aqui está o ícone de salvar. Economize salvando. Olá. E agora esse pequeno asteróide vai embora. Agora, se eu atualizar no meu site na Internet ao vivo, você vê minha mudança. Então isso é legal, porque ao salvá-lo fez mais de uma coisa. Ele o salvou e em fez o ftp tudo para mim e fez tudo se conectar. E simplificou muito o processo. Então você pode pensar nisso como um editor ao vivo, editor sites ao vivo, fazendo mudanças 15. Aula de sintaxe em HTML - Tags: antes de continuarmos, vamos ter que dar um passo para trás e olhar como dedo realmente rotular as coisas com notas pegajosas em HTML da maneira que fizemos na minha cozinha. Então o que eu fiz aqui é que eu fui em um editor de texto e escrevi todo o conteúdo da minha cozinha. Então acima com o topo aqui eu tenho cozinha e, em seguida, dentro da cozinha é todas as coisas no meu balcão, os copos de vinho no balcão. O bloco de faca está no balcão. Dentro do bloco de facas há um monte de facas e, em seguida, tudo o resto, as prateleiras do meu armário a prateleira e as panelas. Então, digamos , por exemplo, que eu preciso dizer ao navegador como entender que isso é flor. Então nós não podemos apenas em um editor de texto pegar uma nota pegajosa e, tipo, colocá-lo em cima da flor porque este é um editor de texto, isso simplesmente não vai funcionar. Então nós temos que encontrar uma maneira de realmente colocar a tag realmente no texto. Então, como você iria em frente e fazer isso? Bem, uma coisa que você pode tentar é criar uma pequena etiqueta à mão. Você sabe, que você tem esses pequenos suportes e você pode usá-los para fazer uma coisa que se parece com uma etiqueta. E agora talvez o navegador saiba. Ok, esta é a etiqueta da flor, e está indicando que esta é uma flor. Mas o problema com isso é que se os navegadores lendo através, como é que ele vai saber que esta etiqueta de flor vai para isso e não para isso? É um pouco complicado em um editor de texto indicar uma coisa, enquanto na vida real você pode simplesmente colocar a nota adesiva em cima dela Em um editor de texto, você precisa descobrir maneiras de delinear qual coisa você está realmente apontando. Então isso não vai funcionar porque não indica para onde estou apontando. Pode ir a qualquer lugar. Então outra maneira de fazer isso pode ser fazer algo como Ok, eu quero indicar que é isso aqui. Então, se você olhar no teclado para as teclas vírgula e período, você verá pequenas setas. Eu o chamo de cenouras. E se você apertar a tecla shift, você poderia fazer um pequeno ponteiro aqui, e eu posso apontar para flor e eu também poderia precisar indicar quando parar de olhar para a flor que o navegador não apenas continue lendo para feijão também. Então eu vou fazer outra era de apontar para o outro lado da farinha. Então agora com essa sintaxe, as cenouras ou as setas apontando, eu sei que tudo entre essas duas flechas é flor. Uh, oops. Só que não porque eu tenho que escrever a etiqueta no segundo ano. Então isso também não vai funcionar, porque o navegador precisa saber que esta é a tag e não apenas outra palavra como açúcar . Então eu preciso de uma maneira de marcar o início da tag, bem como escrever o nome da tag e apontar para onde a tag é. Indicando começa e onde termina. Então a maneira como fazemos isso em html é com outra dessas pequenas setas. Então agora isso parece um tipo de etiqueta, certo? Está começando a se moldar. Parece que é uma coisinha coesa como esta, exceto que é pontuda nas bordas. Então esta é, ah, boa estratégia até agora, mas não vai funcionar muito bem. A falha com isso é que ele vai ter dificuldade em entender que este pequeno acessador de ponteiro é o fim da farinha e não algo que começou aqui em cima. Digamos, por exemplo, eu queria indicar que este era todo o contador que eu poderia fazer algo como este contador e, em seguida, aqui em baixo e o contador. Certo. Mas então o que temos é os navegadores como, OK, isso é tudo contador. E então quando ele começa a ouvir o que está terminando é a flor Orosz que termina o navegador não sabe. Então o que precisamos fazer é, sempre que temos uma dessas flechas apontando, precisamos indicar o que está terminando. E a maneira como fazemos isso é digitando o nome da etiqueta novamente flor e a mesma coisa aqui com feijão. Agora, isso mais uma vez não é suficiente, porque como o navegador sabe que eu não estou começando uma nova flor aqui e então tudo entre aqui e então a próxima flor de fechamento é flor. Então precisamos de uma maneira de diferenciar um ataque de flor inicial de uma etiqueta de flor final e o que podemos usar essa barra pequena é como uma barra que diz não, pare, não é isso. Então farinha e, em seguida, corte não mais farinha. Então esta é a flor do começo. Isto é o fim da flor. Então esta é a etiqueta, e tem essas pequenas setas que apontam para o que está entre a etiqueta inicial e final e tudo entre essas duas setas de sempre é flor. Então lembre-se que é uma barra frontal e não uma barra invertida. A frente corta como se inclinasse para a frente como um cara pequeno inclinado para a frente, e está bem ao lado das pequenas etiquetas de cenoura. Então isso é fácil de lembrar. Vá sempre ao lado dele. Então esta é a sintaxe de como marcar uma, hum, uma página com HTML para dizer ao navegador o que significa. Agora, é claro, em html real, não há tal tag como farinha e feijão. Esta é a minha cozinha, mas esta seria a maneira de fazer isso. Agora vamos ter que descer aqui. Lembrem-se, coloquei essa etiqueta de fechamento do balcão para chegar aqui e ter certeza de que tenho contador de parada. Ok, agora, você pode ver como eu marcaria o resto de nós? 16. Exercício em HTML: nós vamos realmente escrever algum HTML. Então faça isso comigo enquanto eu falo. Pausa, você vai. Então, hum neste momento esta página tem uma palavra para enfatizar. Isto é uma mudança de nuvem. Agora, isso não está marcado semanticamente. E como sabemos, HTML é sobre semântica. Então agora, se alguém que é cego está usando um leitor de tela, o que o leitor de tela vai fazer quando carregar essas páginas, ele vai dizer, Olá, mundo. Esta é uma mudança de nuvem e não vai enfatizar a palavra nuvem. Então o que precisamos fazer é usar HTML para marcar isso para que um leitor de tela saiba que é texto enfatizado. E eu vou dizer que isso é uma mudança de nuvem. Ele vai realmente enfatizar que vai mudar a maneira que diz a palavra nuvem. Ok, então a maneira de fazer isso em HTML é com tag de destaque, que é e. M. Então vá em frente e coloque e m em torno dele agora. Além disso, é rude gritar na Internet, e todas as capitais indicam gritos na Internet. Só parece brega. Então vamos torná-lo em minúsculas também. Agora, desta forma, não vamos mudar o nosso conteúdo com material de apresentação e com coisas semânticas. Estamos colocando a semântica no HTML onde ele pertence, em vez de em nosso conteúdo. E então podemos fazer com que pareça da maneira que queremos mais tarde com CSS. Vamos falar disso mais tarde, então faça essa alteração e salve-a. Então faça uma pausa enquanto vai e faça isso comigo. Então, depois de salvá-lo aqui, você deverá ver quando recarregar esta página. Mesma mesma página exata Olá ponto html parece quando estávamos trabalhando em uma mudança deste, é agora html enfatizado, então você vai ver que ele é itálico agora. E. M não é exatamente o mesmo que um talic. GM tem um significado semântico, um significado significativo de enfatizado. Há também uma marca ocular, o que significa metálico. Agora, a tag I tem um significado semântico de algo como um texto que se distingue, então você usaria uma etiqueta de olho semanticamente para situações em que você tem, por exemplo, o nome de um navio ou uma palavra estrangeira, algo que Nós tipográfico Lee geralmente itálico por uma razão que é ele é detonado lee tipográfico. Ok, então isso é diferente do E. M. Então só porque você quer que algo seja itálico. Então você está usando o nome de um barco. Você não usaria a etiqueta “M”. Por isso. Você usaria a etiqueta I que a tornaria em itálico. E só porque algo é enfatizado, você não quer necessariamente ser sempre um Tálico. Você pode. Você pode estar tentado a usar a etiqueta I para algo que enfatiza, mas não é a mesma coisa. A etiqueta I indica outra coisa. Além disso, você nem sempre tem seu texto que é enfatizado em itálico. Você já viu um site onde enfatizar Texas sublinhado foram negrito id ou fez uma cor diferente ou fez um tamanho diferente lutou? Existem diferentes maneiras de fazer isso, então não se confunda com o padrão. Olha, o HTML dá. Pense na semântica. Então, nós escrevemos alguns HTML e você vê como isso funciona. O E M vai em torno da parte que é enfatizada. Então o que isso está fazendo é essa palavra Nuvem é enfatizada e tudo o resto não é enfatizado. Se eu quisesse palavras a serem enfatizadas, eu poderia arrastar este corte baseado e salvar, e agora ambas as palavras são enfatizadas. Esta é uma mudança de nuvem, então ambos são enfatizados, e deixe-me ir em frente e mostrar-lhe outra tag. Isto agora é, na verdade, um parágrafo. Então vamos marcá-lo como um parágrafo. Esta é a tag p e saber que quando você escrever em alguns contextos mudar nele irá automaticamente dar-lhe a aderência de fechamento. Então, tudo o que está aqui é um parágrafo. Agora, queríamos que continuasse com isso. Então eu vou cortar esta segunda parte de fechamento e ir para o final da linha bater retornar para ir para baixo e depois colá-lo. Então agora você vê que daqui, arrastado para baixo para ouvir tudo o que é destacado é um parágrafo agora, acordo com HTML. Então, salve-o e atualize-o. Não há nenhuma mudança que você veja. Mas a página semanticamente agora tem esse significado e bute nela. Você deu a ele o significado de que este é um parágrafo. Isso vai melhorar sua classificação de pesquisa no Google. Vai torná-lo mais acessível para pessoas que têm diferentes deficiências. Vai torná-lo mais ligado ao resto da web. Então você quer ter esse significado semântico, mesmo quando não parece uma certa maneira mais tarde, podemos entrar com CSS, e podemos segmentar parágrafos para fazê-lo parecer de uma certa maneira, se quisermos. O que eu vou pedir para você fazer é realmente criar na mesma coisa exatamente aqui o mesmo hello dot html ou qualquer nome de arquivo que você deu a ele. Não crie uma nova página apenas dentro disso. O que eu quero que você faça é expandir esta página um pouco. Eu quero que você dê um título, o título outro parágrafo e uma lista de links para alguns de seus domínios de colegas de classe e eu não sou tropeçado. Há uma tarefa que é um pequeno truque. Atribuição é como uma pergunta enganosa. Estou te dando uma tarefa, e há uma parte disso que você não saberá fazer a menos que já saiba como fazer isso de outro lugar. Ainda não te disse como fazer como completar isto completamente, então quando chegares ao ponto em que não fazes ideia de como fazer o que acabei de te designar, não te preocupes com isso. Apenas continue em frente. Vai fazer mais sentido para Será que eu explicá-lo se você já tentou por conta própria e viu a necessidade de por que isso é, então, se você apenas ouvi-lo diretamente desde o início . Então esta é uma ferramenta de ensino que estou usando para ajudá-lo a lembrar e entender a razão pela qual fazemos as coisas de uma certa maneira. Então não se engane quando chegar a esse ponto em que você não consegue descobrir. Então, de novo, o que você vai fazer é expandir esta página um pouco. Você vai dar um título, que é o título da página inteira. Então você vai dar um título e, em seguida, abaixo aqui, você vai colocar outro par de gráfico e, em seguida, lista de links para páginas de colegas de classe. Então, obviamente, você vai encontrar os links que suas páginas de colegas de classe na seção do projeto, e além disso, depois de escrever o conteúdo para isso, você também vai comercializar semanticamente. Então a maneira como você vai fazer isso é você vai usar esses elementos, então eu não vou te mostrar como fazer isso. Vou deixar você descobrir como usar a etiqueta H 1 para um título de página. Você já viu a tag de parágrafo para o parágrafo e então você vai ter a tag de item de lista , que vai marcar, que vai, dino, que algo é um item de lista. Ok, então vá em frente e pause o vídeo agora e conclua este projeto da sessão de aula . Não seja tropeçado. Quando você não sabe como fazer algo, basta fazer tudo o que puder e, em seguida, uma vez que você fez tudo que você pode um NPAs o vídeo e continuar. 17. Revisão de exercícios em HTML: Ok, então espero que você não tenha tido muitos problemas com isso. Então aqui eu fiz a tarefa também. A primeira parte. Acabei de juntar o conteúdo. Então aqui eu fiz o título aqui. Chicotes Desfazer isso. Controle ou comando Z desfazer. Ok, este é o título. Este é o meu rumo. Este é o parágrafo que escrevemos juntos. E então este é o meu parágrafo. Eles agora sabem como ele só continua ao longo da tela vai todo o caminho até aqui fora. Isso é bom. Vou deixar assim. E aqui está a minha lista de links para as páginas dos meus colegas de classe. Estas são as páginas que tiveram mais curtidas na seção do projeto. Então, se salvarmos isso agora sem marcá-lo com HTML, vamos ver o que acontece. Uma espécie de bagunça. Há apenas um monte de ah amarrado juntos bagunça aqui, e fica pior à medida que eu mudo o tamanho da página, certo? É que está tudo unido. Na verdade, a única coisa que não está amarrada é a parte em que fizemos este pequeno parágrafo. Isto está bem segmentado, mas a página do Brendan, o título e o meu título estão todos amarrados e isto está tudo unido. Então isso não é bom. Vamos escrever um HTML para limpá-lo. Então, a página do Brendan, eu quero ser o título. Isto era parte do truque. Eu não te dei o html para escrever esse título. É um pouco confuso, então vamos voltar a isso em seguida. Você tem o título, então há uma diferença, certo? O título do HTML quatro é H um. Então você deve ter o seu Esperançosamente, se você não escreveu, seu código deve se parecer com este h um, o conteúdo do H um e parar cada um. Então, tudo, desde isto até isto, é a primeira idade. Se salvarmos isso e olhar para ele agora, podemos dizer que o HTML imbuiu o significado de cabeçalho de primeiro nível. Se você adivinhasse, o que você adivinharia? Que o código para cabeçalho de segundo nível é assim que já escreveu isso. Vamos deixar isso em paz agora. Este é um parágrafo. Então eu vou escrever novamente p e depois no final. Ou, na verdade, o que será mais fácil é se eu colocar aqui. Pare P close p Então este é o elemento P. E agora, se eu salvá-lo e ir até aqui e atualizar, devemos ver alguma distinção entre este parágrafo e o que se segue depois. Bom. Ok, agora eu te dei a etiqueta l I para indicar que algo é um item da lista. Então, o que eu fiz aqui... você pode ver que isso não vai funcionar porque está tudo em uma linha. Então, se eu der um l, eu em torno de cada uso o que eu fiz, eu meio que tentei colocar formatação nele enquanto eu estava escrevendo isso porque eu coloquei cada um desses em uma nova linha e eu dei este pequeno traço e você pode ver que não funcionou. Funciona quando é pequeno porque envolve as palavras longas. Mas ele não funciona em nenhum outro tamanho porque não há realmente formatação aqui. Então este pequeno traço aqui, eu digitei-o não porque é realmente parte do meu conteúdo, mas porque eu estava tentando formatá-lo. Mas formatar formalmente é o trabalho do CSS e para HTML dar o significado para o CSS. Então vamos deletar esses pequenos traços que coloquei lá porque não estão devidamente contentes. Então, vou em frente. Estou fazendo todos eles. E agora eu vou colocar os elementos I I aqui. Agora, claro, é muito importante que você sempre digita exatamente da maneira correta. Então, se eu quiser economizar tempo, o que eu vou fazer é copiar este aliado aberto e fazer todos eles uma vez e este um este um colar, colar, colar e, em seguida, lembrar de manter tudo limpo. O aliado próximo colar, colar, colar, colar, colar. Agora o HTML deve saber que todos estes são itens de lista. Salve e atualize. Perfeito. Então isso parece muito melhor. Então, aqui está a parte complicada. Eu disse para colocar links, mas o que é isso é que você é mais. Então eu não te disse como colocar links. Agora eu dei a você o elemento a para uma etiqueta, e então você pode tentar o comprimento do dedo do pé, facilidade com um e depois parar a. Mas quando você salvá-lo e olhar para ele, você pode dizer que ele não está realmente funcionando, ok? E além disso, você quer ser capaz de dizer o nome dessa pessoa em vez de sempre mostrar o você Earl vai ser muito legal é se você poderia apenas colocar o nome, o O qualquer palavra que você quiser e, em seguida, ancorar o seu tempo nele. 18. Lesson em HTML - atributos -: Para conseguir links para o trabalho, , vamos ter que aprender algo novo. Vamos olhar para o nosso pequeno exemplo de cozinha falsa novamente. Então agora ele está marcado em falso estilo HTML sintaxe, e você pode ver que eu tenho tags para todas as coisas diferentes no meu contador. Todas as taças de vinho individuais, cada faca no meu bloco de faca e depois Meziane no balcão. Agora vem o Gabinete, com diferentes prateleiras, pratos, tigelas e coisas assim. Agora o fundo é o rack de panela, então no rack de panela há um problema porque todos os vasos parecem iguais, mas eles são realmente tamanhos diferentes. Você pode ver um 3 núcleos A para o tribunal. Então, como é que vamos dizer com a etiqueta que este pote tem um tamanho diferente no outro pote ? Bem, o que você diz é escrever um atributo no pote, então precisamos especificar o tamanho. Os lados deste pote são três quadras, então temos o tamanho certo dos três quadras da Águia. Este é um pequeno atributo que vai na etiqueta em si, e então nós colocamos a etiqueta inteira de volta no pote, e agora sabemos que este pote é três tribunais. Então, o que queremos fazer é ir em frente e marcar cada um deles individualmente como eles têm tamanhos diferentes. Então, obviamente, se vamos escrever informações sobre este pote, precisamos colocar a informação dentro desta etiqueta. Agora, esta é apenas a etiqueta final. Nada nunca entra aqui, tem que entrar aqui, agora queremos colocá-lo depois do nome da etiqueta que diz que é um pote, então vamos colocá-lo aqui. Nunca colocá-lo antes porque, em seguida, o navegador vai ficar confuso. Agora vamos escrever o atributo, nome, tamanho, e então temos que definir o que é igual a três tribunais. Vamos em frente e fazer isso com todos os outros. Ok, agora eu dei a maioria desses tamanhos. Pode ser que alguns dos potes não precisam realmente ter os atributos de tamanho porque ele realmente não se aplica. Por exemplo, algumas das minhas panelas do tamanho não importam tanto, então vou deixar isso de fora 19. Links em HTML: Agora devemos saber como colocar o URL na tag âncora para que possamos ver o texto. Mas a âncora tem a URL como um atributo que vai dizer ao navegador para onde nos levar quando clicarmos nesse texto. Então, por razões arcaicas, chamamos isso de âncora e hiperreferência. Portanto, a tag âncora irá contornar não a hiperreferência ou a URL. Eu vou cortar isso, colocar em torno da palavra que você quer. Então este é o projeto vovó. Então, se eu salvar isso, isso está ficando mais perto de como devemos fazer isso. Projeto Vovó. Agora, é assim que eu quero que o link para olhar, exceto que eu quero ser capaz de clicar sobre ele e tê-lo Leve-me para que Você é l que eu acabei de cortar daqui. Então, como fazemos com que essa âncora tenha a hiperreferência ou a URL vinculada a ela? A maneira de fazer isso é com um atributo que este elemento pode ter um atributo no atributo sempre vai bem aqui e o nome do atributo para as referências hiper H ref, hiper referência. E agora note que porque eu estou nesta sintaxe destacando mudança programa nele. Quando eu entro no espaço, eu recebo uma pequena lista de possíveis atributos. Agora eu quero que você se lembre que a ACTU é ir na primeira, na abertura, não nos elementos finais. Então, se eu tentar colocá-lo aqui, eu não recebo essa pequena lista porque ela nunca vai lá. Nada nunca vai aqui, exceto o er demarcado de fechamento e o nome do elemento que o seu fechamento. Ele vai aqui atrás do nome do Element. Mas antes que a tag realmente feche para colocar um espaço e você vê oh, há alguns atributos sugeridos e os atributos que queremos para a nossa referência hiper é H Ref significa hiper referência. Então o árbitro vai ser e eu vou colar no link. A hiperreferência é esse link, então vamos salvá-lo e atualizar. Ele se transformou em um lince, e agora é uma âncora que tem a hiperreferência ligada lá dentro, uh, irritado lá dentro e você pode ver na parte inferior que o pequeno texto de pré-visualização aparece. Se eu clicar nisso, me levará ao projeto da vovó. Vamos voltar. E se houver mais uma coisa que precisamos fazer com este Atributo? Se isso atribui qual, qual o nome real é um vestido, hiper referência é igual e, em seguida, o que ele é igual é o conde a hiper referência real? Então este é atributo, nome, valor de atributo. Os valores podem ser realmente diferentes lá. Na verdade, é um dedo do pé válido. Ter um nome de arquivo que tem um espaço nele, mas dizer que ela tinha nomeado em Olá, Mundo Espacial. Isso vai causar problemas para nós por causa da forma como o HTML lê isso. Isso é mar refrescante. O que ele fez é que ele fez. Tentou me levar para o projeto da vovó Dot com Slash Olá? - Nada. Porque ele viu este espaço e eu pensei que tinha acabado. Então o que precisamos sempre fazer é colocar aspas ao redor, valores de atributo cada vez. Cada valor real de atributo de valor sempre terá aspas em torno dele, e isso irá corrigir um monte de problemas, e irá manter sua sintaxe limpa. Então, volte. Refresque. Agora, se eu clicar nele, ele me dá todo o u R L aparecer. Olá e, em seguida, ele é colocar este código que significa espaço em seu mundo agora, ela realmente não criou a página. Olá, mundo. Eu inventei isso. Ela criou uma página. Olá. Então é por isso que não foi encontrado. Mas você pode ver isso aqui em cima. O verdadeiro que Earl fez o seu caminho. Então vamos voltar e consertar isso para o quê? Suas páginas reais. Então vá em frente e coloque um treff igual a todos esses links. E o jeito que eu vou fazer é que eu vou realmente eu vou fazer isso de uma maneira rápida. Uma vez que eles já têm o URL aqui, Eu vou copiar apenas uma viagem é igual cópia e colocá-lo antes destes Você é mais. Veja como isso é complicado. Mas poupa muito tempo, e depois vou copiar esta parte. A citação final na cenoura final. Vou colar no outro fim deste ano, Earl. Você verá o realce da sintaxe, mudando à medida que eu faço isso porque eu estava criando erros fazendo isso da maneira errada. Mas agora, quando termino, está tudo limpo. E agora eu preciso, então aqui está o começo da âncora. Eu também preciso fechá-lo. Então, para cada um. Vou ir em frente e copiar. Esta pasta aqui tem que estar exatamente ali. E agora posso preencher a âncora para cada um deles. Então, se eu salvar isso, o que vai acontecer? Quando eu atualizar isso, você deve ser capaz de ter uma idéia disso. Escrevi aqui o “Projeto Avó”. Mas aqui não há nada entre nada na etiqueta âncora. Há o valor dos atributos, a hiperreferência. Então as referências hiper lá, mas a âncora real não tem conteúdo para ele. Então chicotes, acho que salvei tudo isso. Mas só há um documento aberto para salvar. Então, se eu atualizar o que vai acontecer com eles, você é mais. Eu movi esses URLs para os atributos e agora a âncora real não tem conteúdo. Eles vão desaparecer, e não há nada aqui. Isso é porque o extra não tem. A âncora não tem conteúdo. Então eu vou ir em frente e dar palavras para cada um destes agora ir para salvar e, em seguida, atualizar. Agora todos aparecem e devem trabalhar. Eu posso clicar em cada um desses e voltar e olhar, essa pessoa realmente já escreveu algum html porque há alguma textura enfatizada ou itálica . Não tenho certeza se eles usaram a tag de ênfase ou a tag itálico porque eu não consigo ver o código deles. E olha, esta pessoa escreveu algum tipo de HTML também porque eles têm alguma formatação aqui. Eu me pergunto que código eles usaram, mas nós podemos ver a fonte de nossa página da Web, mas nós não podemos ver a fonte de suas páginas da Web. Bem, você pode, mas eu digo-lhe como fazer isso mais tarde. Uma pergunta que tenho é: Algum de vocês, quando criaram esta lista pela primeira vez, em vez de usar traços como eu, usaram números? Você fez 12345? Em vez de traço ou ponto de bala? Há uma diferença nos tipos de listas. Há uma lista ordenada, que seria 12345 e há um A Nordeste. Então, na verdade, há uma maneira de marcar esta lista inteira como sendo uma ou outra, e é realmente necessário. Um item da lista sempre deve ser ordenado ou um erro Nord, e a maneira como fazemos isso é colocar a tag inicial aqui na tag de fechamento aqui e o elemento para lista ordenada é ol o elemento para uma nova lista ordenada. Você está bem? Então fiz o meu com traços porque não queria que fosse encomendado. Não há nenhum significado na ordem. São apenas uma ordem aleatória. Então eu vou fazer você l uma lista não ordenada e você vê que automaticamente me deu a etiqueta de fechamento . Eu não preciso dele. Eles estão cortados. Preciso dele aqui em baixo. Colar. Então agora o que isso diz é que aqui está uma lista de pedidos daqui até aqui. É uma lista de pedidos. E este é um item da lista. Há todos esses itens da lista, então a única coisa que entra diretamente dentro de uma lista de pedidos é o item da lista. Portanto, não se confunda quando você vê esta UL começar e ela não pára, mesmo que outra já tenha começado. O que isto significa é que este item de lista está dentro desta lista não ouvida. Isso não significa que isso na nossa lista é o primeiro e este é o próximo. Isto é, na verdade, por baixo da U. L. 20. Aula de sintaxe em HTML - nesting -: voltando ao nosso exemplo de cozinha. Isto é como você pode localizar os vasos como dentro do rack de pote, o rack de pote começando setas bem aqui. E ele vai para baixo para esta outra seta aqui, e você pode ver que todos os potes estão aninhados sob o elemento de rack pote lá dentro dele. E isso faz sentido porque eles estão todos na prateleira de maconha. E, claro, enquanto nós rolamos para cima, nós confinamos isso enquanto o balcão termina e há uma coisa nova chamada gabinete. O Gabinete é composto por prateleiras. Há algumas prateleiras, e as prateleiras contêm coisas como pratos. Então isso faz todo o sentido. Você tem que ir ao gabinete e abri-lo e depois suas prateleiras. Você olha dentro da cabine que você encontra várias prateleiras até encontrar a prateleira que tem o que você está procurando nele. E então dentro dessa prateleira, você pode confinar seus pratos e tigelas e as coisas que você realmente está procurando Agora, claro, tudo isso está dentro da cozinha, que também é indicado em nosso pequeno exemplo de código falso. A cozinha está no topo. E então, se percorrermos todo o caminho até o fundo, aqui está a etiqueta de fechamento da cozinha. Então tudo entre esta seta apontando para cima e esta era apontando para baixo está dentro da cozinha. Outra maneira que o programa é falar sobre isso é este é um pai e este é um filho ou este aliado. Tem um ancestral que é a UL. E este ul tem um descendente que é o aliado. E temos uma coisa semelhante acontecendo aqui com o aliado e a etiqueta âncora. A marca âncora está, na verdade, dentro do item da lista. Não é o próximo depois que não podemos colocar Ally perto porque queremos cercar a âncora . Então a tag âncora, o elemento âncora, é um filho do elemento aliado, que é um filho da UL. Então, tudo bem, responda a esses olhos. Você está assistindo esse vídeo agora. Este eu estou aqui que estou destacando. Qual é a sua relação com isso? - Você? Bem, diga. É uma criança. Isto é uma criança disto. Agora, o que é essa relação de aliados com esse aliado? Se você disse criança, você realmente não está certo, mas você está pensando sobre isso, o que é bom, eles são na verdade irmãos, e esse é o termo técnico real. Estes irmãos do ar, são todos filhos deste ul. Então eles são todos irmãos um do outro. E aqui vai outra pergunta. Este A. O que você diria? relação é com esse aliado. Não é irmão porque eles não são filhos do mesmo pai. Você. é que não temos um nome técnico para isso, mas é algo como “Tio Escrever”. Este é o filho deste aliado e este é um irmão. Então seu irmão de pais é seu tio ou tia. Não há um termo técnico para isso. Mas o que é importante é que você não acha que esta âncora é uma brincadeira de sentar. Você não acha que esta âncora é um irmão deste aliado ou um descendente deste aliado ? Esta âncora é apenas um descendente deste aliado. O que é isso, Anchors? Esta âncora, hum, relação com este elemento de lista de ordens. Não um pai, porque é um passo para cima. É um grande pai, ou o termo técnico mais geral é apenas um antepassado bom. Então espero que isso não seja muito confuso para você. Se você está apenas começando com HTML 21. Estrutura de documentos em HTML: Agora. Outra coisa que temos que chegar a é que nós definimos muito com esta página para salvar e apenas atualizar. Definimos muita informação aqui. Agora, você vê, quando eu fiz essa mudança, porque eu coloquei o UL e ele apenas saiu um pouco e se separou como uma outra lista A. Então agora ele vai realmente saber que ele está na lista de pedidos, mas nós realmente não indicou que tudo isso é um documento HTML. Isso é algo que realmente precisamos fazer. E há um elemento para ele chamado HTML que indica que a página está sendo escrita em código HTML. Então precisamos sempre colocar isso em nossos documentos HTML, chicotes e isso. Ele preencheu isso para mim, o que é meio útil e meio que não. Então a coisa toda, tudo isso é html. Tudo bem, cada pedacinho é HTML. Assim, a primeira linha de todos os seus documentos HTML deve ser sempre html. Certo, há uma advertência nisso no futuro, mas vou deixar por enquanto. Pelo que você sabe, tudo é a primeira linha será h Timo e a última linha será fechada. Html. Tudo aqui é HTML. Poupe o que vai acontecer quando eu não refrescar nada. Foi uma mudança semântica, e permitiu que o navegador entendesse o que está lendo agora. Aqui está outra questão. Este título. Eu quero entrar no título da página aparecer agora. Diz “U R L. “ porque não lhe dei um título. Mas como faço para chegar lá em cima? Porque isto está na página. Ele só coloca aqui na página. Então o que eu preciso é como uma forma de dar algumas, como, como, meta-informações sobre a página. Eu realmente não quero colocar este título no corpo principal como da página. Eu quero colocar como acima, aqui em cima, como em Eu preciso, tipo, tipo, ter uma seção de informações especiais Gibbs sobre a página. Mas na verdade não é parte do corpo do documento ainda, então, enquanto você está pensando sobre isso, se você é realmente, muito inteligente, você provavelmente está imaginando qual é o nome dessa tag. Você provavelmente está imaginando algo como há uma tag chamada documento que você coloca em torno todo o documento. Abrir documento, documento fechado. E então você tem outra etiqueta que você chamaria de algo como, se você está inventando isso, o que você inventaria? Talvez esteja imaginando que se chama algo como meta. Se você pensou nessas linhas, você é absolutamente brilhante. Se não o fez, tudo bem. Você ainda pode ser brilhante, mas você não sabe quais são os nomes reais dos elementos. Mas se você adivinhou, isso é muito bom. Então, o que? Os nomes reais dos elementos não são documentos e meta. O que é para indicar que este é o corpo do documento. O nome do elemento é corpo e você coloca este elemento corpo Você coloca este comando body tag, corte comando colar ou controle colar em torno de todo o corpo do documento. Então ele não vai Não colocá-lo atrás deste HTML porque o corpo eu sou o corpo do documento é parte da cidade direita HTML. E também não seria que não se encaixasse, certo? Como este elemento do corpo começa depois disso, eles precisam ser aninhados dentro. Este corpo é um filho desta tag HTML. Então isso agora diz ao computador que tudo isso desde o final da tag body até o início da tag close body é o corpo do documento. Agora nós o salvamos e ele ainda não faz uma mudança porque há realmente Syntex Air isto isto está fora do corpo. o Háosegundo elemento que colocamos ou o segundo tag e chamamos isso de cabeça. Isto é informação da cabeça. É como informações de cabeçalho que vai, não é realmente não está no documento. É como lá em cima, como se estivesse escondido. É aqui que você coloca todas as informações na página que está oculta que se relaciona com a página inteira. Ok, então é como em uma pessoa a cabeça contém todo o conhecimento e tudo mais. Este é o conhecimento que se aplica a toda a página. Agora, se salvarmos isso e atualizarmos, ele ainda não está funcionando, por que não está funcionando? Porque temos que indicar que tipo de informação de cabeça é agora. A maneira correta de fazer isso é com se vamos dar um título, e a propósito, você sempre pode fazer isso e ver o que html está disponível para. Fiz a chave de cenoura aberta e parei. E agora essa mudança porque é um realce de sintaxe e é um editor de HTML. Deu-me algumas sugestões que são apropriadas a esta área. Então, qual deles é? Queria que fosse o título. Lá está ele. É como, na verdade, clique nisso e ele se sente direito para mim agora. Preciso terminar de digitar ao fechar e, em seguida, parar o título Agora. Agora a página vai funcionar. Agora vai funcionar. Guarde isso para desaparecer e assista aqui quando eu atualizar lá é a página do ISS Brendan. Então, agora, se você está concordando com isso e consertando suas páginas, você vai, está tudo bem. Se você não conseguiu tudo antes do tempo, não era como um teste. Mas se você tem, se você tem agora sua página para fazer todas essas coisas. Você completou o projeto. Este é um passo enorme e monumental. Você saiu de alguém que não sabia o que era HTML. Como salvar uma página da Web, como fazer uma página da Web para alguém que está escrevendo HTML e criando uma página da Web na Internet. Esta é realmente uma página da Web em todos os sentidos, e como HTML ela está ligada. Está no domínio. Está sendo servido pela Internet. Publicamente disponível através de http, É revestido a sua semântica. Você é um Web maker, e se você apenas se você parar de fazer o curso agora, você teria o conhecimento fundamental que iria colocá-lo 10 passos acima da maioria das pessoas que não sabem nada disso já. 22. Dicas e segredos em HTML: quando escrevemos código, é muito importante manter as coisas organizadas. Este é um site muito simples até agora, e já está começando a parecer complicado. Então o que normalmente fazemos quando temos coisas que estão aninhadas, como aqui, por exemplo, temos um você bem, em um aliado, nós geralmente em dívida os elementos da criança. Agora eu estou em amassar, apertando o botão aba uma guia por ninho ou por camada profunda. Agora é. Outro truque é que normalmente não temos esse tipo de coisa em dívida. Então isso é isso, como dentro da linha ah. Então, se você fosse olhar para a nossa página novamente, o u L Quando adicionamos, ele meio que fez uma quebra de linha aqui em uma quebra de linha aqui que fez como um bloco seu próprio bloco. Então, hum, nós normalmente vamos em dívida com isso. Mas este item da lista e a âncora estão na mesma linha, e nós não costumamos fazer isso em Dent então eu não iria. Eu não faria isso normalmente, embora você pudesse se realmente estivesse confuso e precisasse que fosse claro. E eu já fiz isso às vezes. Então esta é uma maneira de fazer isso. E se você realmente quisesse ficar excessivo, você poderia até mesmo em dívida e fazer isso e saber como a idéia sabe como o ter este editor de texto está me ajudando por meio de ajudar onde meus entalhes vão quando eu apertei Return. Então, se você quisesse, você poderia inventar assim para deixar bem claro que o projeto vovó está dentro desta tag raiva que está dentro deste item da lista que está dentro deste um bloco de lista nem fez. Mas isso é um pouco redundante. Geralmente é mais fácil colocar itens que são como na mesma linha, todos na mesma linha,da mesma linha, forma aqui em cima. Nós não tentaríamos colocar isso em uma nova linha e recuado porque isso é como se ele quebrasse o fluxo da frase. Isso é uma mudança de nuvem, então eu vou voltar e desfazer isso porque é tipo uma coisa em linha. No entanto, este parágrafo bloqueia para fora, como, seu próprio pequeno bloco. Então vamos deixar isso e eu vou inventar isto e isto. Então você vai notar que se, como nós passamos por um dentário deste e limpar quaisquer espaços em branco que às vezes você quer inventar um monte de coisas. Então eu quero amassar tudo o que está dentro deste corpo daqui até aqui. Então eu posso ir um de cada vez ou há alguns truques que você pode usar, então eu poderia apenas destacar tudo o que eu quero. Em dívida é longo, há várias linhas e guia hit, e ele faz todos eles para você. Toque, toque, toque em. Ele vai continuar fazendo isso agora E se você quiser levá-los todos de volta quando o recuo, você pode usar uma combinação de caracteres especial chamada shift tab. Agora, isso não é universal. Alguns bons editores de texto terão alguns desses atalhos, e outros não. Então você tem que se familiarizar com o editor de texto que você está usando. Mas a maioria dos avançados tem guia quando você tem várias linhas selecionadas para em dívida todos eles, e então toe un deslocamento de golpe recuado, segure-o e, em seguida, digite tab toe un em dívida, e então você apenas segure shift, e quando você está segurando a guia Shifty hit, ele vai para trás um recuo quando você não está segurando, deslocando você aperta Tab, ele vai para a frente. Então eu vou continuar limpando tudo isso. HTM no corpo estão ambos dentro dos elementos HTML. Desculpe, eu quis dizer H eu conheci corpo e corpo e cabeça estão ambos dentro do elemento HTML. Então agora o nosso texto é um pouco mais limpo e mais fácil de olhar. Pode parecer mais confuso para você agora, mas quando chegar a umapágina muito grande e confusa, página muito grande e confusa, vai ser capaz. Vai ser útil para você ser capaz de obter o seu rumo de como aninhado o quão profundo em algo está olhando para o recuo agora. Também traz à tona algumas questões como, por exemplo, este texto aqui. Online 13 é na verdade um filho direto do elemento corporal. Não está aninhado em mais nada. Isso é uma espécie de sinal de aviso, porque o que isso significa é que o único significado semântico que este texto tem é que ele é html no corpo do documento. Então, na verdade, não tem significado semântico além disso. É uma página da Web. É parte de uma página da Web, então geralmente isso é uma indicação de que algo está errado. E o que realmente precisamos fazer é dar a isso uma tag de parágrafo em torno dele, porque é um parágrafo. Opa. Eu, uh, dupliquei isso, e isso me ajudou lá fora. Ok, então isto é, uh, uh, um parágrafo de nível de bloco. Esta esposa a colocou em sua própria nova linha. E agora você deve saber que eu sou meio que inconsistente em minha indentação. Com estes parágrafos. Criei uma nova linha e recuei. E com este, eu coloquei direito aqui. Não é uma coisa ruim ser inconsistente, mas na maior parte,provavelmente é bom se você tentar consistência, especialmente quando você está começando, até que você desenvolva certos hábitos que ajudam Não é uma coisa ruim ser inconsistente, mas na maior parte, provavelmente é bom se você tentar consistência, especialmente quando você está começando, especialmente quando você está começando, você em seu revestimento. Então, agora, se eu salvar isso e atualizar, você realmente não verá nenhuma alteração porque tudo o que eu fiz foi mudar a maneira que eu formatei para que eu veja, não a maneira que eu formatei para que qualquer outra pessoa a veja. Não está mudando o formato html, e eu mudei a semântica deste parágrafo, mas na verdade não mudou a forma como parecia. Então aqui está a fonte da página bem aqui este é este é o código que está por trás disso. Agora, eu não entendo. E se eu quiser olhar para o código nesta página sem ter todo esse turno aberto para encontrar o arquivo? E se eu só quiser verificar bem rápido o que isso parece? Está bem. Como, por exemplo, eu quero ir para Sam Gold. Página da AEA. Desculpe. Se estou a pronunciar mal o teu nome e quero ver como ele fez isto, não consigo entrar na conta dele. Não tenho a conta dele. Ele não deu a senha. Espero que ele não tenha. Mas o que eu posso dizer é que eu posso realmente obter o código do seu traseiro. Eu poderia obter a fonte de como isso foi construído. E a maneira como você faz isso é pelo navegador vai fazer isso um pouco maior? Ou, na verdade, o que vou fazer é arrastá-lo para este lado da tela porque o que vou mostrar está neste pequeno menu. Agora, cada sistema operacional e cada navegador tem um lugar diferente que você tem o item de menu , mas no cromo você entra aqui e, em seguida, vai para as ferramentas. E você pode ver este item. Este item de menu aqui, ver o código-fonte. E o atalho para isso é o comando de opção. Você em quase todos os computadores Windows. O atalho para isso é controlar você. Portanto, se você estiver no Windows, nem tente encontrar o ícone de menu. Basta sempre digitar controle você para fazer isso para encontrar fonte de visualização em um monte de outros computadores vai precisar ir ver e encontrar fonte e cromo no Mac. Não é assim, mas vá para ferramentas e veja o código-fonte. Ok, então deixe-me abrir isso de volta. Você viu o que ele fez lá e abriu uma nova guia? Então esta é a página em que eu estava. Esta era a página do Sam e que abriu esta aba com a fonte. Você vê isso? Diz fonte de visão aqui, e tem o mesmo que você Earl ou o mesmo local. E mostra a fonte real. Você tem números de linha e eu posso ver os elementos que ele usou para que eu possa ver o enorme I tag , que é bom, porque se você usasse a tag e m, isso significaria semanticamente que todas essas frases enfatizaram, o que seria um pouco estranho. No entanto, não é realmente um, um, uma um, palavra estrangeira ou um termo especial, então ainda não é bem semanticamente correto. Então, hum, no futuro vamos usar CSS, e o que vamos fazer é usar uma tag semanticamente correta e então você CSS para torná-lo itálico para que ele possa parecer do jeito que ele quer sem ser semanticamente incorreto. Mas eu vou te ensinar a fazer isso mais tarde. Então também podemos ver coisas como ele colocou quebras de linha aqui um antes e um depois desta parte itálica que não aparece para que possamos ver um monte dessas coisas apenas para qualquer ver em qualquer site. Então você pode fazer isso em qualquer site, ir para qualquer site que você quiser e verificar a fonte. Vamos ao compartilhamento de habilidades e verificar a fonte. Tenho um atalho bem aqui. Está bem. Para mim, é controle. Eu sinto muito. É o comando de opção. Você eles encontraram janelas, seu controle. Está bem, então partilha de habilidades ponto com eu estou durante a fonte. Aqui está a fonte. Verifica isso. Você pode ver isso em qualquer página, e você pode olhar através e você pode descobrir, descobrir, na maioria das vezes, como eles fizeram as coisas. Esta é, na verdade, uma das maiores ferramentas de aprendizagem que você tem é o comando view source . Basta ir em frente e ver a fonte de qualquer página. Quando você está curioso sobre como eles fizeram alguma coisa. Como eles conseguiram essa foto de compartilhamento de habilidades? Lá você pode ver o código-fonte, e como esta é uma página muito complicada, há muito código para percorrer, mas eventualmente você será capaz de encontrá-lo. Agora eu sou capaz de encontrar um pouco mais rápido porque eu faço. Eu não fiz isso para viver, então eu posso te dizer agora que este é o código para esta foto aqui. Posso ver isso imediatamente. Agora, vou levar um tempo para chegar a esse ponto, mas você vai chegar lá eventualmente porque você vai ser capaz de ler todas essas pequenas coisas extras que farão sentido como Parson. Então você está na parte em que você está aprendendo letras individuais e pensando, como alguém pode ler todas essas letras individualmente e formar palavras e depois ler essas palavras juntas? Tão rápido que podem lê-lo tão rápido quanto falam. Lembro-me de pensar que quando eu estava aprendendo a ler, eu estava descobrindo apenas as letras, uma de cada vez. Esse é um K que disse I. E então aqui está alguém que sabe ler. Apenas grupo está lendo frases inteiras quase assim que eles vêem. Então é aqui que você está agora, uma letra de cada vez. Mas você vai retomar isso muito rápido. Já que destaquei isso para você, podemos ver. Olhe para esta imagem é barra logo bash, membro ponto PNG e eu posso realmente clicar sobre ele em alguns irmãos. A maioria dos irmãos, se você tiver um navegador mais novo, permitirá que você clique em você. A RL está dentro da página e entende o contexto. Mas eu vou clicar com o botão direito sobre ele e fazer nova guia e vamos ver que esta é a imagem. É a mesma imagem que estava ali. Então você pode fazer muito. Isto é muito poderoso e não aqui. Eles não colocaram o U R L completo. Então, como eles fizeram isso? Esta barra no início de onde o U. R L deve estar indica que é relativo. É um caminho relativo que começa logo no final do domínio. Então, se você alguma vez ver isso, ou se você alguma vez colocar um link que ele não tem o domínio completo, apenas seu parente para os dois, começando com a barra então é assim que funciona. Falaremos sobre isso mais tarde, mas há um monte de coisas que, enquanto você está olhando através, você vai encontrar toneladas de diferentes coisas legais que você quer aprender a dialogar e visualizar a fonte é vai mostrar-lhe como fazê-lo. Há algumas coisas que você sempre precisa escrever quando você cria uma página da Web, um, um, você sempre precisa escrever HTML cabeça e corpo, então ele sempre tem oito e-mails com mensagem de cabeça e corpo dentro dela. Além disso, você sempre vai querer um título, e há algumas outras coisas. Então, o que chamamos quando você tem ah, monte de código repetitivo que é sempre necessário e você não quer continuar escrevendo, então você meio que gosta de criá-lo e em um lugar onde você pode copiar e colar direito ou copiar e colar o arquivos, chamamos isso de caldeirão. É como um pequeno modelo que você usa para coletar para começar, como, como você vai construir sua página. Então, se você sempre tem esse e-mail, cabeça, corpo, etc coisas quando você está fazendo sua página, você pode querer, tipo, ir em frente e fazer isso e você pode até mesmo querer algo como se você é títulos, sempre comece com uma determinada frase e depois você adiciona um pouco mais em seguida. Inclua isso no seu caldeirão também. E então quando você começar com seu caldeirão, você não terá que fazer essas coisas redundantes e repetitivas. Você já terá um bom começo pronto para você. Agora, esta mudança na verdade tem uma espécie de um pequeno caldeirão embutido. Disse-te para não fazeres isto antes porque queria mostrar-te agora. Mas se você for para a nova guia e clicar em uma nova guia aqui, é a mesma coisa. Eu vou fechar que você conhece uma nova guia e você cria usando um desses caras pequenos vai arrastar isso de volta para fora porque nós podemos olhar para ele agora se você criar uma dessas páginas e nem mesmo se preocupar com tudo isso, nós não vamos obter em tudo isso. Mas você vai entrar em HTML CSS e JavaScript. E se você estiver interessado, talvez até mesmo PHP, mas criado página html e olhar para o que surge. Há um pequeno caldeirão que faz tudo isso por você. Lembre-se de como tivemos que digitar html fechar cabeça html fechar título cabeça, título fechado, corpo, corpo fechado. E ainda coloca um espaço entre as tags de corpo para que você possa começar a escrever o corpo do documento , o conteúdo da sua página. E se você não deu o título, ele lhe dá o título. Sem título. Agora há algumas coisas especiais aqui. Ele está dando-lhe um personagem meta disse Esta é uma tag muito especial que vai na cabeça que diz ao navegador que conjunto de caracteres você está usando a maior parte do tempo agora UTF é o melhor conjunto de caracteres para usar. Este programa sabe que está usando o conjunto de oito caracteres UTF, então não se preocupe com isso. Apenas deixe isso em paz. Lembre-se na palestra anterior quando eu mostrei como salvar em texto simples. Você pode ter visto que havia uma opção para mudar o conjunto de caracteres e eu disse, Basta deixá-lo. Isso porque se você tivesse mudado e salvado sem redefini-lo para o conjunto de caracteres correto , você terá coisas estranhas como você tem um monte de pontos de interrogação ou blocos ou coisas se o conjunto de caracteres não estiver correto, Então deixe isso em paz a maior parte do tempo. Você TF a é o que seu conjunto de personagens será. A outra coisa que é nova neste pequeno caldeirão que eu não mostrei a vocês é isto. Lembra daquela pequena advertência quando eu disse que HTML é sempre a primeira linha de um documento? Não era realmente uma advertência. Foi apenas uma mentira direta. A primeira linha de cada documento é, na verdade, o tipo doc. O tipo de documento é uma maneira especial de definir em que tipo de 80 Mel você está codificando. Na verdade, existem várias versões de HTML. Bem, costumava haver. Hoje em dia, percebemos que ter várias versões de HTML meio que causa problemas, e isso causou muitos problemas no passado. Há html três. Há html quatro e 4.1. Havia as normas de transição e versões não normalizadas. Adicionamos uma versão do HTML que começou a ser Kolok realmente conhecido como sopa de tag. Html porque ele não tinha um tipo de documento e ele não seguiu a sintaxe corretamente. Não seguiu os padrões. E então eram apenas tags, como jogar juntos em uma sopa, e o navegador tinha que descobrir o que fazer com ele e, na maioria das vezes, navega. Somos muito bons em descobrir. Então é assim que os antigos tipos de doc costumavam se parecer. Costumava ser que você teria que fazer tudo isso. Você tinha desafiando seu elemento raiz. E depois há todos esses outros, como pequenas partes dele. Então vamos ver um exemplo. Aqui está o tipo de documento para X html. Um olhar para o quão ridiculamente longo é. Nem cabe na página. Ele inclui coisas como um link para as especificações, o idioma. Aqui está html quatro, apenas neve de velhice normal. 4.1 Olhe para esta bagunça e há vários tipos de versões de idade para antes que isso seja padrão . Esta é uma transição, que é um pouco mais solta. Você pode ver a palavra solta. E então há outra versão para se você estava usando quadros. Então, todos esses tipos de médicos diferentes. Que bagunça. Não fazemos mais isso. H, O que fizemos agora é simplificá-lo, e é basicamente apenas um HTML. Você só está usando HTML. Não é exatamente o mesmo que a sopa Tags, porque seu navegador saberá que eles estão seguindo padrões. Mas é semelhante no sentido de que nós não vamos continuar tentando, como especificar exatamente qual versão do HTML foram revestimento para e no navegador irá renderizá-lo de forma diferente, dependendo se você realmente esquecer quem em h pequeno 4.1 de transição. Você tem que fazer essa coisa muito específica em um HTML quatro pontos. 01 rigoroso. Você tem que fazer isso. E agora minha página inteira quebrou porque eu me desviei um pouco. Não vai fazer mais isso. Isto não é novo em html cinco, e isso é interessante. Este é, na verdade, o tipo HTML 5 doc, mas não, ele não tem um cinco lá. É porque não estamos mais fazendo versões. É só que isto é apenas HTML. De agora em diante, é um padrão de vida. Sempre coloque isso no topo da sua página e saiba que é mais simples agora que já foi. 23. Sitting CSS e HTML em uma árvore: chegou a hora de falar sobre CSS. CSS é que terceira camada que terceiro shell de melhorar homens funcionalidade adicionado que vai para o núcleo do conteúdo. Então, no núcleo, você simplesmente tem seu conteúdo o que você está comunicando, o próximo shell em torno disso é HTML, que fornece o significado e a estrutura para o documento. E, em cima disso, está o CSS, que fornece este estilo, a aparência e a sensação. Assim, o CSS ganchos nos diferentes elementos que você colocou lá com HTML. Então HTML e CSS. relação deles era uma espécie de relação entre um cara nerd que é apenas funcionalidade. Ele é sempre como falar sobre coisas realmente nerds e discutir semânticas e preocupado com detalhes de como as coisas tecnicamente significam. Ele usa palavras como, tecnicamente, muito, e CSS é como uma mulher elegante que está sempre preocupada com estilo e cores e a forma como as coisas se parecem. E então essas duas pessoas por conta própria tipo de, ah, não trabalham o cara realmente nerd, HTML funcional por conta própria, sua casa parece horrível. São só coisas funcionais. Ele não tem nada que pareça bom. Não há decoração, não há nada na parede. É puro o que for preciso para fazer as coisas. Ele não sabe como se vestir. Ele se veste. Mas ele diz que se vestir é apenas para manter você aquecido tecnicamente tem apenas uma mentalidade puramente funcional. O significado das roupas é mantê-lo aquecido. Agora CSS entra e sem HTML ela é toda fluff. É só estilo e não há conteúdo real. É tudo isso, como cores e melhorias e e quando eles se juntam, , eles fazem essa coisa poderosa porque eles têm função e estilo. Eles têm o lado da apresentação e têm o lado significativo disso. E quando você aprimora a reunião com um olhar e sentir, você obtém essa bela combinação que realmente funciona. Você tem o poder por trás do estilo e você tem a aparência e o CSS bonito por trás do HTML. E juntos eles fazem isso como uma incrível dupla dinâmica. Então é importante que você tenha aprendido CSS logo no início, certo? Como você ainda está aprendendo HTML. Então você provavelmente neste momento não tem muito HTML tecnicamente, mas tudo bem. Você tem que começar a aprender CSS porque você vai ser tentado a tentar e fazer as coisas parecerem bem usando HTML. E isso não vai funcionar. É como confiar no senso de moda dos caras nerds. Ele faz coisas como ele usa camisas marrons com cinturão marrom calças marrons e sapatos marrons todos o mesmo marrom, porque ele acha que combina. Mas CSS entra e ela tem senso de moda e senso de cor, e faz com que pareça melhor. Então não tente e estilo com HTML. É como se fosse vestir nerd. Uh, sim, você quer se vestir bem, você quer vestir seu site com CSS, usar o senso de moda dela. É nisso que ela é boa. Mas usar HTML é bem, não abandone o cheiro da idade. Use a compreensão html do que as coisas realmente significam tecnicamente, sua compreensão técnica nerd das coisas porque ele é o que vai tornar seu site acessível a muitas pessoas diferentes com diferentes tipos de deficiência, diferentes tipos de navegadores, diferentes tipos de computadores e até mesmo não pessoas, computadores que estão rastreando a Internet, tentando obter informações sobre seu site. Ele vai fazer seu site conectado a diferentes partes da Internet, ao Google, uh, a Web semântica e tudo isso 24. Sintaxe em CSS de 1: propriedades e valores: Vamos em frente e escrever um pouco de CSS. Então nós falamos sobre atributos na última sessão, então meio que faz sentido que CSS seria um atributo de um diferente de um determinado elemento. Então, digamos que você volte para a sua página e você tem o seu título o ponto de índice html da sua lição de casa e você deu um título. Esperemos que em h um título de primeiro nível, e você quer que ele pareça um pouco melhor, em seguida, apenas o estilo de formatação HTML velho simples que foi colocado lá. Então o que você vai fazer é adicionar atributos. Agora, isso é um pouco complicado porque você vai adicionar um atributo. Primeiro de tudo, para dizer que este é CSS você está fazendo isso. O nome do atributo é style. Agora se lembra de como você escreve um atributo? Você vai para o h um elemento e após o nome do elemento após o nome da tag. Então, após o h um, você coloca um espaço e é onde você escreve os atributos, nome e, em seguida, é igual e no valor do atributo. Então o nome real é estilo porque este é estilo. O real que estava adicionando é CSS e o nome para o endereço é estilo. Ok, então estilo é igual e, em seguida, colocar aspas. E aqui, é onde vamos colocar o nosso CSS. Mas aqui está o trabalho. É muito complicado porque estamos dobrando a coisa do par nome valor. Ok, então você está tipo, você tem várias camadas aqui. Você tem o nome do elemento. Você tem o nome dos atributos e, em seguida, você tem os nomes de atributos CSS que você tem. Você tem o nome da propriedade CSS. Isto é realmente o que chamamos porque há adereços diferentes que não queremos apenas ter . Tipo, o que você ia colocar aqui? O que você está pensando? CSS Reino Unido. Então você tem estilo igual e você coloca seu CSS se o que você vai colocar 10 pixels se você quiser que o tamanho da fonte seja 10 pixels? Como ele sabe que você quer que seja o tamanho e não a altura ou a largura? Você também tem que especificar dentro desses atributos um par de valor de nome do CSS que você está trabalhando. Você também tem que especificar dentro desses atributos um par de valor de nome do CSS que você está Então vou te dar algumas coisas que você pode fazer. Então, primeiro de tudo, vamos torná-lo de um tamanho diferente. Então você vai colocar, hum, nós vamos fazer do tamanho da fonte B 12 pixels. Vamos torná-lo pequeno só para ver que você pode fazer títulos pequenos, se quiser. Agora você não pode simplesmente colocar 12 pixels, obviamente. Então o que você coloca é o tamanho do traço da fonte cólon 12 p . X. Olha para isto. Isso está ficando confuso, certo? Mas você tem um par de valor de nome dentro do CSS, e não podemos usar igual novamente porque então seria estilo igual a fonte. tamanho é igual a que haveria muitos iguais no navegador. Não saberia quais vão para onde. Então, em vez de sinal desigual, usamos um cólon tão lutado tamanho traço. Agora você só usa esse pequeno hífen pequeno menos tecla, apenas a que está bem no seu teclado. Ao lado da tecla mais. É a mesma chave é a chave subjacente. Se você turno antigo e assim fonte Dash tamanho dois-pontos 12 p x, o PX das unidades. E sempre que você tem algo que é um número, você sempre tem que ter as unidades. Então, se você fizer isso, salve-o, você atualizará e verá que o tamanho do pensamento diminuiu. Agora vamos em frente e mudar a cor. Vamos adicionar outra propriedade e outra propriedade CSS em nosso H um elemento em nosso H uma tag nos atributos de estilo do nosso H one tag. Ok, então não fique muito preocupado com a sintaxe na semântica do que estou dizendo. Não importa se você sabe quando eu digo estilo, atributo e um elemento e marcar tudo isso não importa se você seguir exatamente tudo o que estou dizendo. O que é importante é que quando você vê isso como este, você entende que este é um 18 atributos HTML, e aqui é onde você coloca todo o seu CSS e que esta é a propriedade e este é um valor . Você não tem que saber os nomes dessas coisas. Eu vou usar os nomes, os nomes técnicos, mas você só precisa saber como usá-lo. Você só tem que ter certeza de que você não coloca. Tente colocar um sinal de igual aqui ou ah, dois pontos aqui você só tem que saber a sintaxe 25. Sintaxe em CSS 2: várias declarações: Então, para mudar a cor, temos que colocar em outros atributos CSS e temos que colocá-lo logo após aquela outra propriedade CSS que colocamos. Então nós temos o tamanho da fonte Agora nós vamos colocar dentro dos mesmos atributos dentro desse estilo . Na verdade, dentro dessas citações, também temos que colocar a cor. Ok, então isso está tudo dentro do mesmo HTML, na verdade. Tudo dentro do mesmo estilo. Portanto, o estilo é igual ao tamanho da fonte e à cor. Então ambos estão indo nessas citações, OK? E precisamos de uma maneira de distinguir uma propriedade CSS da outra, o tamanho da fonte da cor e a maneira como vamos fazer isso. Está bem. Ah, vírgula faria sentido, mas nós não vamos usar Vírgula Commons são uma maneira comum de separar coisas diferentes como esta, certo? Vamos usar um semi-cólon. Eu sinto muito. Eu não sei exatamente por que eles escolheram usar um semi-cólon. , Em muitas linguagens de programação,use um ponto semi dois-pontos para terminar uma declaração que você gostaria de terminar como uma frase que funciona com dois pontos e dois pontos. Ao contrário de períodos em um monte de programação, mundo é como em javascript Sempre que você tem como uma declaração, você coloca um ponto-e-vírgula no final assim. Então, coloque um ponto-e-vírgula após este 12 p x ponto e vírgula. O Matt diz que é o fim desta propriedade CSS. E então o navegador sabe que qualquer coisa depois disso é um novo. Então vá em frente e coloque colon cor K lembrar, não é igual e, em seguida, você pode colocar uma cor. Agora há muitas maneiras de colocar cores, e há valores diferentes, então você pode usar códigos hexadecimais. Você pode usar valores RGB onde você pode usar códigos de cores HTML. Agora será mais fácil para este exemplo apenas usar o código de cor HTML. Eu não sei quantos existem talvez uns 60 nomes ou mais que você pode escrever como verde, vermelho, azul, muitos dos comuns e até mesmo coisas como Schar dois. Então vá em frente e coloque verde. Vamos mudar para G R E. verde e como está soletrado assim, não precisamos colocar uma unidade. Então vá em frente e coloque isso e nos coloque fechando ponto e vírgula novamente. Mesmo que isto seja, não vamos nos separar que não precisamos. Tecnicamente, não precisamos que nos separemos. Como se você não colocasse uma vírgula no final, certo? Mas faz sentido colocar sempre este ponto e vírgula de fechamento depois de cada propriedade, modo que se você misturar as coisas em torno de mudar a ordem, você não vai ficar confuso e é apenas uma boa prática. É tecnicamente correto. Então vá em frente e coloque o fechamento semi chamando agora. Agora salve e atualize, e você verá que as propriedades foram aplicadas. Então atributos e propriedades propriedades CSS a propriedade, hum, é o nome real do estilo que está sendo aplicado agora e em que você pode chamá-lo de um atributo para todos que você já usa o atributo palavra para descrever atributos HTML. Então é por isso que este vocabulário é como se eles meio que colidiram um com o outro. Então lembre-se, atributos são atributos que vão no HTML, e as propriedades são todas CSS ok, e é que você não vai ficar confuso porque quando você está nos contatos CSS, você nunca tem essa sintaxe de sinal de igual. Quando você está na sintaxe html seuin, você sempre tem o sinal de igual e você não tem este dois-pontos ou semi dois-pontos lá 26. Sintaxe em CSS 3: selecionadores: você acabou de escrever alguns CSS. Você pode enlouquecer aqui, mas estamos tendo um problema. E vamos resolver isso com o diretor chamado D RY. Não se repita. Então o princípio da seca diz que você não deve se repetir, se possível. Então, digamos que você tem vários parágrafos e você quer colocar algum estilo em cada um desses parágrafos. Mesmo que ele quisesse, todos os parágrafos têm o mesmo estilo. A maneira que você teria que fazer isso é que você tem que colocar em cada estilo de elemento P igual a, e, em seguida, as propriedades CSS, e, em seguida, copiar que colar, colar, colar em cada um. Então, se você quiser fazer uma mudança mais tarde, você tem que entrar e encontrar cada um manualmente. Substitua-o, mude-o, substitua-o um de cada vez. Então é por isso que temos este princípio, d r I. Porque torna muito difícil modificar qualquer coisa e atualizar qualquer coisa, e isso só torna difícil fazê-lo na primeira vez apenas para configurá-lo pela primeira vez. Então CSS tem sua poderosa habilidade toe realmente criar o CSS em um só lugar e tê-lo aplicar a toda a página e não apenas indiscriminadamente para toda a página, mas apenas para as partes da página que você queria. Isto é muito fixe. Então a maneira de fazer isso é nós vamos realmente nós vamos parar de jogar com atributos HTML . Nós vamos subir para o topo da página para o cabeçalho para dentro que Então você tem html e, em seguida, cabeçalho dentro do cabeçalho antes da tag corpo dentro do ataque de cabeçalho lá dentro, nós vamos criar um elemento chamado estilo. Ok, então ele vai ter o estilo de cenoura aberta de perto naquela etiqueta de estilo. E então a etiqueta de estilo de fechamento. Então estilo, estilo próximo. E, em seguida, dentro lá estavam indo para escrever c assistido se aplicará a toda a página para que ele faz sentido de sua na cabeça. Tudo bem, então, então, hum, vá em frente e à direita. Alguns CSS que queremos aplicar a todos os parágrafos. Então você terá, digamos, fazer algo assim. Dê margem, Colon. 10 p x. isso dará uma pequena margem em torno de todos os seus parágrafos. Uma margem de 10 pixels. Agora, margens e estofamento são um pouco semelhantes. E um pouco diferente, mas falaremos sobre isso mais tarde. Então vamos dar uma margem de 10 pixels. Vá em frente e faça isso. Agora, como é que isto se aplica a toda a página? Mas só os parágrafos. Como é que fazemos isso? Bem, vamos escrever um pequeno colchete no início e no fim para separar isso de outras coisas. E antes disso, vamos escrever o seletor. Agora o seletor é a maneira que selecionamos a parte da página que queremos segmentar. Então, se queremos apenas selecionar todos os elementos P, todos os parágrafos, usamos o seletor que visa apenas todos aqueles. E há uma maneira de segmentar um momento HTML usando o nome da tag e CSS. Então, você coloca o nome da marca HTML do elemento que deseja selecionar, e ele selecionará todos eles. Então coloque P p chave encaracolada e, em seguida, sua propriedade e o valor da propriedade e, em seguida, feche essa chave. E agora ele sabe que tudo entre essas duas chaves, esse é o estilo que vai ser aplicado, e então o seletor, ele vai direcionar todos os elementos P, então você pode Onley. Obviamente você só pode colocar os nomes de elementos HTML aqui e você pode Onley colocar elementos html que realmente aparecem em seu documento. Então, se você não tem nenhuma etiqueta P, este P não vai fazer nada. Não vai aplicar isto. Este padrão, quero dizer esta margem a qualquer coisa. Mas se você fizer isso, ele vai mirar apenas esses elementos p. Então, se você continuar e salvar isso e atualizar seu navegador, você deve ver uma pequena mudança em seus parágrafos, como eles são como eles são definidos. 27. Sintaxe de CSS 4: cursos: Se você está programando como nós vamos, isso é ótimo. Se não, não se preocupe. Mas comece agora mesmo. Código junto para o nosso projeto em sessão. O que vamos fazer é limpar um pouco o nosso código. Então agora nosso CSS está em dois lugares. É no elemento de estilo html elemento tag no cabeçalho, e é nos atributos de estilo HTML atributos no H um elemento. Certo, então precisamos limpar isso e colocar tudo em um só lugar. E geralmente é má prática usar o estilo. Atributos, , porque viola a D R. Por que não se repete? Então vamos secar nossa página um pouco. E vamos colocar essas duas regras a regra sobre os parágrafos e a regra sobre o primeiro nível subir em nosso elemento de estilo em nossa tag estilo. O que eu quero que você faça é copiar apenas o CSS do atributo style. Isso está na etiqueta “H 1”. Então lembre-se que o nome do atributo é estilo. Em seguida, há um sinal de igual e, em seguida, entre aspas, você tem o valor do atributo, então copie o valor inteiro dos atributos, não incluindo as aspas, apenas o valor. Então, a primeira coisa será F para o estilo da fonte. A última coisa será o ponto e vírgula final. Então, copie tudo isso e, em seguida, vá para o seu elemento de estilo acima no cabeçalho e encontre o que você a regra que você escreveu sobre os parágrafos e abaixo dele colocar um par de hit entrar um par de vezes e colocar o CSS que você acabou de copiar bem ali abaixo dele. Então agora você terá a regra de parágrafo que seleciona os parágrafos e, em seguida, as chaves para para os seletores, para em vez para as propriedades dessa regra e, em seguida, abaixo disso, você terá essas propriedades CSS aleatórias que não são direcionadas em qualquer lugar. Então eu quero ver se você pode descobrir como torná-lo alvo este CSS CSC aleatório em que você acabou de colá-lo, veja se você pode descobrir por conta própria como torná-lo alvo. Só que um elemento. Ok, então pare agora e tente isso. E não te preocupes se não descobriste, mas deixa-me explicar-te como o fazer. O que você vai didio é usar esse p que estava acima para parágrafos como um modelo, e você vai escrever outro seletor apenas para aquele H. Então o que você escreve é H um que seleciona H um elemento ou H um elemento de imposto e tags que eu uso intercambiavelmente. Você seleciona o H com isso, e então você coloca as chaves em torno de todas as regras que serão usadas por esse seletor. Então você tem toda a regra. E, em seguida, dentro dessa regra, os componentes são o seletor e, em seguida, as propriedades e os valores de propriedade e as propriedades estão dentro dessa chave. Então vá em frente. E se você não acertou, conserte seu código e salve-o e atualize e veja o que você conseguiu. Então agora temos duas regras. Uma regra sobre tags de parágrafo ou elementos de parágrafo, e uma regra sobre o H um elemento para que possamos ter um problema aqui, particularmente se você quiser estilizar o seu H um elemento dedo do pé olhar de uma certa maneira apenas quando ele está na parte superior do seu página, mas você queria dedo do pé. Você também deseja usar cabeçalhos de primeiro nível em outras partes da sua página, mas você não quer que eles tenham a mesma aparência do topo. Então agora, assim como o seletor P seleciona todos os elementos P, se você colocar em uma igreja um mais baixo em sua página e você não alterar essa regra, você vai fazer com que todos eles pareçam iguais. Então, como atacamos apenas o que queremos lá em cima? Só aquele de cima. Então o método que usamos é que temos que atribuir uma classe. Agora estou. Sinto muito se esse vocabulário está ficando fora de controle confuso. Mas se pensarmos bem, faz sentido termos duas classes de elementos H um. Temos o nível superior que queremos olhar de uma maneira e, em seguida, temos uma segunda classe de todos esses outros classe ou tipo ou categoria. Então temos duas categorias duas classes de H um elementos e a maneira que precisamos usar CSS . Use HTML para dizer CSS A distinção entre essas categorias é atribuindo uma classe HTML tem outros atributos chamados Os atributos de classe o nome do real sua classe e o valor é qualquer classe que lhe damos. Então nós realmente deve adicionar esta classe atributos para que primeiro H um elemento. Então vá para o seu H um elemento. E, a propósito, excluir o estilo é igual a atributos que não precisamos mais. Então vá em frente e apague isso. E em vez disso, vamos escrever um atributos na classe H um elemento igual a e, em seguida, colocar aspas e em seguida, dentro dessas aspas, vamos criar um nome de classe. Você pode inventar qualquer nome de classe que quiser. Podemos chamar isso de top para primeiro, porque é o topo ou o primeiro título. E então o resto dos “H “, se escrevermos depois, vai estar em outra classe. Então vá em frente e dê a ele o topo da classe, por exemplo. T o p. Dentro das aspas. Agora, o que nós vamos fazer é ir para cima, e nós vamos especificar que nós só queremos que o h um elementos que têm este dedo da classe superior tem a codificação que nós colocamos. Então encontramos essa regra rolar até o seu elemento de estilo e encontramos a regra que escrevemos para o H. E agora como vamos modificar isso para que o contrato de arrendamento seja eleito. Ele só tem como alvo os H que têm o melhor da classe. Então nós vamos entrar neste seletor porque nós estamos mudando o que ele seleciona, que ele tem como alvo. E não podemos ficar bem no topo, porque com nossa sintaxe, se você escrever uma palavra aqui, vai pensar que é um momento HTML, certo? Então precisamos de uma maneira de distinguir que Este não é apenas um elemento HTML não está procurando topo. Está à procura de uma turma chamada Top da maneira que fazemos. Isso é com um ponto ou um ponto, então você coloca um ponto e, em seguida, a palavra top. Portanto, não há espaço entre o ponto e o nome da classe para colocar ponto e no nome da classe neste caso superior. E isso vai dizer ao navegador que estamos procurando algo que tem um nome de classe de topo, e podemos realmente anexá-lo ao H um elemento também. Então, por enquanto, vamos simplificar as coisas para comer o elemento H um. Vou te mostrar como conectá-los mais tarde, mas agora, apenas para a direita ponto T P no lugar de onde o H estava, então não há espaço entre o ponto e o nome da classe. Agora, se você salvar isso e atualizá-lo, você não verá uma alteração porque a classe tem está no mesmo elemento que costumava ser segmentado estava direcionando os mesmos elementos exatamente direcionados para o mesmo lugar. Está selecionando o mesmo lugar, mas está selecionando de uma maneira diferente. Em vez de selecionar em usar o nome do elemento ou o nome da tag, ele está selecionando-o usando o nome da classe. Então agora, no entanto, se quisermos escrever outros elementos H um abaixo na página, eles não serão alvo por este seletor a menos que nós damos. Esta classe está bem, então vá em frente e escreva alguns dos elementos H um. Se você está curioso sobre isso e você verá que enquanto escreve esses outros e salva e atualiza seu navegador, eles parecem diferentes. Eles não têm o mesmo CSS aplicado a eles 28. Introdução ao DOMs: Eu quero ensinar-lhe uma estratégia usando uma ferramenta muito legal que provavelmente já está embutida em seu navegador. Então é chamado de ferramenta Inspeccionar navegador, e o que ele faz é que ele permite que você visualize o código-fonte da página de uma maneira realmente particularmente útil. Então, na última lição, aprendemos sobre como visualizar a fonte. Então, a maioria dos computadores Windows, é controlado por você. Pode ser algo como opção de comando você Se você estiver em um Mac ou se você é como no Internet Explorer ou em algum outro navegador, você pode ter que ir para o menu de exibição e encontrar lojas. Então vá em frente e faça isso de novo. Agora alguns são capazes. Agora o que você verá está na sua página. Você vê que o código que é mostrado na fonte é quase idêntico ao código que está no editor de texto, o que faz sentido porque ele está mostrando a fonte. E, claro, você pode visualizar a fonte de qualquer página na Internet. Mas não é realmente o mais útil porque, especialmente em páginas maiores, ele fica fora de controle muito rapidamente. Mas não é realmente o mais útil porque, especialmente em páginas maiores, É difícil percorrer tudo isso e encontrar exatamente o que você está procurando. Então, há uma maneira melhor. E isso também é particularmente útil para escrever CSS porque permite que você faça mudanças no código, apenas mudanças temporárias que eles querem. faça mudanças no código, Você não é capaz de salvá-los, mas eu vou te mostrar como fazer isso. A ferramenta de inspeção do navegador tem nomes diferentes em navegadores diferentes. Um monte de navegadores chamam-lhe o Dom Inspector o cão e a razão pela qual chamamos isso é porque ele está realmente olhando para o dom. Agora. O que é o cão? - Não. Dom Dom parece assustador, mas não é assustador. Não se assuste com o Don. Ei, Don Sands para o modelo de objeto de documento. Não se preocupe com isso. Não se preocupe em lembrar o que significa, mas o que é é basicamente o código-fonte. Lembra como na última sessão vimos o código-fonte e podemos olhar para o código-fonte , todo o HTML e todas as coisas que estavam lá? O dom também é a fonte, mas não é exatamente o código-fonte. O código-fonte é apenas o código-fonte. O código como você escreveu. O dom é a compreensão dos computadores desse código-fonte. É como um mapa mental teórico do código-fonte que o navegador tem em mente. Então, é como se minha esposa me escrevesse uma lista de compras , e ela pudesse escrever como instruções. Faça isto, isto, isto e esta ordem. E, hum, eu vou ler essa lista. Mas enquanto estou andando na loja, posso não estar sempre lendo essa lista. Ah, palavra por palavra. Enquanto eu vou, eu meio que construí uma lista mental na minha cabeça. Então essa lista mental é que deveria ser se eu não estou sendo boba, se eu não estou esquecendo as coisas, deveria ser. O mesmo é o que está na lista física real. Mas a lista mental é como abstrata e teórica e feito, então eu meio que talvez organizá-lo um pouco diferente. Talvez eu não pense nisso exatamente da mesma forma que a lista está escrita , e talvez eu até faça algumas pequenas mudanças, como se houvesse um erro de ortografia ou se ela fez algo estranho na lista. Eu poderia tipo de consertá-lo para que faça sentido no meu cérebro. E os navegadores fazem coisas muito semelhantes com o código. Na verdade, eles lêem o código, e depois analisam. Quando um navegador lê, o código é chamado de análise, então eles analisam o código, e então eles criam este dom, este entendimento mental que isso é a estrutura da página. Nem sempre é exatamente o mesmo que o código-fonte que você escreveu. Por exemplo, ele tira o espaço em branco se você colocar espaços e pressionar, digite hit return. O navegador realmente não precisa desse espaço em branco para entender como, como, construir a página. Então isso não faz parte do Dom. E se você, por exemplo, tiver uma sintaxe ruim e cometer alguns erros em seu código, e se for capaz de corrigir isso se for capaz de descobrir o que você quis dizer, por exemplo, você, hum, você escreve um elemento de item de lista e você coloca a tag inicial e, em seguida, a lista, mas então você não coloca a tag de item de lista de fechamento e então você começa um novo item de lista, então o navegador agora é inteligente o suficiente para dizer, OK, listas são sempre uma após a outra. Não há outros elementos para se meterem entre eles. E então, se eu vir outra lista Adam começando, então eu vou assumir que esta última terminou então o navegador vai em seu dom vai colocar essa tag de item de lista de fechamento em seu dom para você. Então vamos começar a olhar para a mente do navegador com o inspetor Dom. Nós vamos realmente ver este código como ele foi analisado nesta árvore. Então nós normalmente o que vemos é a versão renderizada desse código. Mas agora vamos ver o código-fonte real como ele está na mente do navegador. Então, aqui estão os vídeos THIEVE para obter a ferramenta de inspeção do navegador configurada e em execução para o navegador que você usa 29. Chrome DOa: chrome é talvez o navegador mais simples para usar a ferramenta de inspetor de navegador. Basta clicar com o botão direito e ir para inspecionar Elemento. Isso traz a ferramenta de inspeções com sua árvore dom à esquerda e suas células à direita por padrão. E você pode, é claro, escolher suas diferentes opções aqui e depois ao longo do topo. Aqui estão as coisas vão entrar em um pouco mais tarde no curso. Agora, se você quiser separar isso em sua própria janela separada, use isso e, em seguida, para trazê-lo de volta para baixo e reconectá-lo à dor lá em baixo. Você usa isso, e então se você quiser fechá-lo completamente, você pode usar este botão aqui. 30. Firefox DOa inspecionar e a Firebug: no Firefox para chegar ao seu Dom, Inspector, você pode ir em frente e clicar com o botão direito e descer para inspecionar elemento. Agora, isso vai trazer esta pequena localização de pão ralado na parte inferior e você tem que fazer um pouco mais para obter a inspeção completa do dom. Então este pequeno ícone aqui vai trazer a árvore de dom cheia, que você pode então percorrer. E quando você clica nos diferentes elementos, você vê, ele destaca as diferentes partes da página. Agora, se você quiser ver o CSS, você vai para baixo para o estilo e clicar sobre isso, e isso irá mostrar-lhe os diferentes estilos para os diferentes elementos. Então digamos, eu queria ver o estilo deste título aqui. Eu posso clicar com o botão direito, ir inspecionar elemento, e você vê que ele me deu os estilos para isso. Este elemento aqui. Agora você pode clicar neste pequeno ícone, e então ele permitirá que você veja o elemento dinamicamente como você apenas passar o mouse sobre a coisa na página em vez de ter que clicar com o botão direito do mouse individualmente. Então essa é uma pequena característica legal. E então você também pode fazer isso alto isso e e esconder isso. Você pode fazer este três vista D e este tipo de mostrar-lhe a forma como suas páginas construídas e em camadas acima. Então isso mostra os diferentes elementos de ar tipo empilhados, e você pode ter uma idéia de como suas páginas Bill, você pode ver meus links. Há um conjunto, um, um pouco Lá, ali, um elemento adicional dentro do elemento parágrafo. Então esse é um futuro legal. Então este é um Firefox Dom Inspector padrão, e você não pode colocá-lo para fora em sua própria janela, tanto quanto eu posso dizer. Mas você pode fechar com isso, mas você pode. Mas você pode fechar com isso, Você pode querer obter firebug para o Firefox. Firebug é uma espécie de ah, umdos inspetores originais um do Dom. Era um anúncio originalmente, então vá pegar Firebug dot com e instalá-lo. Você pode realmente instalá-lo para muitos navegadores diferentes, mas foi originalmente para Firefox é por isso que ele é chamado firebug. Então clique nisso e passe por todo o processo de instalação. Leva-me a adicionar on stop Mozilla dot org, que é o lugar mais confiável para obter o Firefox adicionar. Então você definitivamente quer vir aqui para baixá-lo? Você poderia simplesmente ir direto para adicionar em Parar Mozilla, morrer ou ir e fazer uma busca por firebug se você quiser cortar o processo. Então agora firebug foi instalado. Posso fechar essas janelas. E agora, se eu clicar com o botão direito aqui, você verá para inspecionar elementos, então isso pode ser confuso se você tiver um firebug instalado. Este é o inspetor padrão do Firefox e este elemento inspecionar com firebug. Este é o Inspector Inspector, Inspetor . Então, se você clicar sobre isso, parece um pouco diferente Agora isso vai parecer mais semelhante ao cromo. Isto é isto é semelhante ao crime. Você tem o inspetor Dom aqui e o ah CSS aqui à direita, e você pode escolher as diferentes opções dentro do seu CSS e o Dom. A árvore idiota é desmontável. Tudo isso E então aqui está a mesma opção onde você pode tipo de destaque Se você quiser colocá-lo para fora em sua própria janela, você pode usar este ícone para cima que irá colocá-lo em sua janela e, em seguida, para trazê-lo de volta, você pode usar o botão para cima botão para baixo. Meio que minimiza. E então este botão X fecha completamente. Então, vamos subir mais rápido novamente se você usar o minimizar em vez do X Eu acredito que é qual a diferença está lá. Então, novamente, não entenda Ah, não se confunda. Você pode desativá-lo. Se você estivesse se confundindo. Mas não se confunda com a diferença entre este Inspecto. É o Firefox. Inspecione e, em seguida, inspecione com firebug. Este é o incendiário. Inspecione. Então, , eu meio que recomendo usar “firebug”. Eu realmente gosto. O Firefox padrão não é muito ruim. Se você pode se acostumar com este layout. um Éumpouco diferente do que uso no cromo. E é diferente do que eu estou acostumado com o Incenso. Então eu sugiro um incendiário de novo. As meninas têm ponto de fogo com 31. Internet Explorer: você pode usar um navegador em espectral no Internet Explorer, embora eu não o recomendo. Começando em sete e indo até nove. Aqui é o Internet Explorer 9. Você pode fazer um F 12 para obter o navegador e espectral para que você não pode clicar com o botão direito do mouse e encontrar o menu do elemento inspecionar. Mas o que você faz é acertar F12. E você verá que isso é realmente muito útil para testar o Internet Explorer. Portanto, eu não sugiro que você desenvolva no Internet Explorer usando essa ferramenta de inspeção, mas você precisa testar. Então eu sugiro que você obtenha a versão mais recente do Internet Explorer 10 quando ela for lançada. E então você pode usar isso para alternar seu modo para que você possa testar para ver se ele tem a mesma aparência em um Explorer oito ou Internet explore. Sete. Vá em frente e, hum, altere as diferentes versões aqui, e isso lhe dará uma imagem muito precisa do que ele renderizaria como o Internet Explorer 8. Como seria renderizado em sua unidade, explorar sete. Hum, mas em termos de rastejar Dom, você pode clicar sobre isso, e ele meio que mostrará, hum, o CSS à direita e então, se você quiser ver como ele fica na página, você pode clicar nesta seta e, em seguida, se você clicar em um elemento diferente, ele irá detalhar e encontrá-lo. No entanto, você não pode realmente editar isso da mesma maneira que você pode em outros inspetores Dom. Você meio que tem que adicionar novos elementos aqui, e tem um monte de peculiaridades que vão atrapalhar você. Então você definitivamente deve se familiarizar um pouco com isso porque você precisará testar um Internet Explorer. Mas na maior parte, você só vai usar isso para saber o que você está olhando. Então, todos estes são muito, muito diferentes das opções de inspeção padrão nos outros navegadores. Então, realmente, isso merece seu próprio vídeo separado, apenas entrando nos detalhes de tudo isso. Mas para esta lição, eu só vou dizer, não use o Internet Explorer porque isso só vai tornar sua vida difícil 32. Safari Mac: para o Safari no Mac. Você não pode entrar diretamente no navegador. Inspecione a ferramenta imediatamente clicando com o botão direito do mouse e encontrando o elemento inspecionar. Um item de menu. Primeiro, você terá que ir para as preferências e passar para esta última guia. Seção aqui avançada. Então vai começar. Geral Ir para avançado e clique neste menu Mostrar Desenvolver na barra de menus. Reparei aqui em cima que habilita aquele cardápio extra. Agora, uma vez que esse menu está habilitado, você terá a capacidade de ir em frente e clicar em Mostrar Inspetor da Web e algumas outras coisas legais aqui. Mas ainda mais importante, agora que você habilitou esse menu, você pode clicar com o botão direito do mouse e há o item de menu Inspecionar Elemento. Então, os inspetores da Web um pouco diferente no safari no centro. Aqui você tem o Dom, e depois à direita é onde seu CSS estará. Mas você tem algumas opções do que vai aparecer à direita. Essas chaves significam o CSS, então vá em frente e clique nisso, porque é isso que você vai precisar na maior parte do tempo. Então essas chaves e, em seguida, muito disso é regras de estilo muito semelhantes, Hum, atributos de estilo mostrarão os atributos HTML. E há um ar semelhante ao quê? Estão em outros navegadores à esquerda. Aqui, você tem, um, um, um, um monte de coisas diferentes acontecendo neste ar. As diferentes guias que você vai clicar através de que na maioria dos navegadores inspecionar como no Chrome, por exemplo, são apenas ao longo do topo aqui, Então, isso é um pouco diferente. Mas quando você me vê e cromo clicando para ir, como a linha do tempo e todas as outras pequenas coisas, é aqui que eles estão neste. E para voltar ao dom, você tem que clicar nisso e ir aqui. Então, na maior parte, eu apenas escondo este painel. Você tem essa habilidade legal e safari para esconder este painel esquerdo ou ocultar este painel direito. Se você quiser correr, esconda e ah, e isso lhe dá alguma flexibilidade. Agora, se você quiser separar esta janela para ser sua própria janela flutuante livre, você pode clicar nesse botão. Se você quiser ler o folheto, clique em voltar e, em seguida, se quiser fechá-lo novamente, clique nele aqui. 33. Safari no DOMs: safari no Windows é um pouco diferente para entrar no dom, inspecionar ferramenta por padrão. Ele provavelmente estará aqui se você direito, clique e vá para inspecionar Elemento. Mas há uma chance de que você pode precisar ir para as preferências e clicar nesta última aba a guia avançada, e verificar este botão Então este show menu desenvolver na barra de menus pode ser desativado no seu como é no Mac por padrão. Então você vê que nada mudou, mas agora eu não tenho aquela barra de inspeção. Então, se você realmente quer ver o que ele está falando, você pode mostrar a barra de menu aqui Agora. Aqui em cima, você verá que não há nenhuma ferramenta desenvolvida. Mas se eu entrar nessa engrenagem e ir para Preferências e, em seguida, verificar isso, você verá que a barra de menus desenvolvida aparece e desaparece quando ele está lá. Então você obtém o elemento inspetor, e você também pode usar este material aqui. Então vá em frente e pegue o elemento inspetor, e então você tem a árvore dom à esquerda, o CSS à direita, e então a trilha de pão ralado bem aqui na parte inferior e todos esses itens diferentes aqui em cima . Isso é muito semelhante à forma como está no cromo. O safari do Windows é muito semelhante às migalhas. Inspecionar elemento. Então, se você está no Windows, isso é muito parecido com apenas usar o cromo. Você pode desanexá-lo clicando nesse botão, e, em seguida, se você quiser reanexá-lo, você pode usar este botão aqui e, em seguida, para fechá-lo usado este botão aqui em cima. 34. Como usar a ferramenta de inspeção de DOs: geralmente, o que você vai fazer é encontrar que inspecionar e na parte inferior do seu navegador, vai aparecer todo este mundo mágico desenvolvedor web maravilhas de todas essas coisas. Então a primeira coisa que você verá é à esquerda o dom novamente, apenas esta compreensão mental do código-fonte. Mas está estruturado perfeitamente e tipo consertado. Então você verá às vezes que os elementos de ar entraram em colapso um no outro, então falamos sobre aninhamento da última vez. Então, se você tem um elemento que está dentro de outro elemento que está dentro de outro elemento. O navegador pode mostrar que eles foram recolhidos, então você só vê esse elemento superior e os elementos Children. Os elementos descendentes estão realmente lá dentro, mas você não pode vê-lo a menos que você clique um pouco mais, mas botão ou ícone, e então você tipo, como, vê-lo expandir para fora. Então, esta é na verdade uma maneira muito eficiente de, tipo, executar através de código e ter uma idéia por si mesmo. Então vá em frente e olhe para o Dom e explore-o um pouco e veja se você consegue entender sua página e entendê-la. Então, digamos que você deseja alterar o tamanho do nosso cabeçalho porque eles estão indo é muito pequeno, mas nós não queremos ter que ir para o nosso código, alterar o tamanho da fonte, voltar e atualizar, ver e verificar e ver se é o tamanho Queria. E então, se não for o tamanho certo, volte ao nosso código. Altere o tamanho da fonte novamente. Adivinhar Verifique ir para o nosso navegador verificar para ver. Ainda não tem o tamanho certo, para frente e para trás. Isso pode levar muito tempo. Então, uma das coisas legais sobre esta ferramenta é que permite que você modifique sua página dentro do navegador sem afetar o código. Onde você está modificando é o amanhecer. Você está modificando a compreensão mental dos navegadores desta página. Agora você não será capaz de salvar essas alterações, mas isso irá ajudá-lo, como jogar com ele um pouco e vê-lo como você está jogando com ele para obter o para obter o que você está procurando. Tão no seu dom. Inspetor, vá em frente e coloque o cursor do mouse sobre um dos elementos, e você tem. Há uma distinção entre colocar o cursor sobre o elemento. Nomeie o nome da tag real e, em seguida, os valores e atributos semelhantes que são exibidos dentro dela. Então, se você colocá-lo sobre o tributo AK, por exemplo, não é exatamente o mesmo é colocá-lo sobre os elementos. Então, quando eu digo colocá-lo sobre um elemento para colocá-lo sobre ataque, eu quero dizer o nome da tag. E se você fizer isso enquanto você o move sobre diferentes elementos, você verá que ele está destacado no navegador na página. Você pode vê-lo realmente mostrando qual elemento está sendo destacado. Ele lhe dará os contornos, e mostrará as margens e o preenchimento em cores diferentes. Agora, isso é diferente em navegadores diferentes, mas muitas vezes a margem é roxa e o preenchimento é amarelo e o tamanho disso para trás. De qualquer forma, você vai se acostumar a entender isso no futuro, mas eu vou te mostrar a altura. A largura irá mostrar-lhe onde ele está, e se você clicar sobre isso, clique no nome do elemento novamente. Não clique como o accionador. Clique no nome do elemento o nome da tag e, em seguida, na dor direita. O que você verá é o CSS que se aplica a ele, então isso será, em páginas complicadas, muito grande. Você tem que percorrer muito, mas em uma página mais simples, é um pouco mais simples. Então, novamente em navegadores diferentes, há maneiras diferentes de mostrar isso. Mas uma das pequenas janelas que eles têm é, hum, as regras CSS que estão sendo aplicadas a esse elemento. Eso no topo, você verá às vezes uma regra vazia para você dedo do pé colocar coisas novas em, e então você verá geralmente categorizado a partir de mais específico chili específico. E não se preocupe com o que isso significa ainda. Falaremos sobre isso mais tarde, mas basicamente significa as coisas que o ar aplicando que são mais altas. Prioridade para prioridade mais baixa. Ah, lista de todas as regras e você vai até ver o navegador padrão. Regras CSS para que você possa realmente ver. Realmente, você pode ver as entranhas de tudo isso. Você pode ver o CSSD que você não escreveu. É só parte do navegador. Os padrões o alcançaram. Legal. Hum, agora clique no seu elemento H um, aquele para o qual escrevemos a classe e lembre-se de clicar no nome da etiqueta para que você veja se você pode encontrá-lo na área certa. Você deve ser capaz de encontrar essa classe o seletor, que contém a classe e, em seguida, toda a regra. As diferentes propriedades que você escreveu, hum e dizer que você quer mudar o tamanho duplo clique no valor do tamanho lutado e você vai vê-lo mudar de tipo de como ser ble não editado para ser um estado comestível. Agora isso é um pouco complicado porque diferentes navegadores fazem isso de uma maneira diferente. E também às vezes eles mudam a maneira como isso funciona entre as versões dos navegadores. Então, pode ser um pouco diferente no seu sistema. Mas geralmente é DoubleClick dentro do com dentro do valor da propriedade para obtê-lo para entrar em seu estado de ervas de edição. E se isso não funcionar, você pode ter que apenas tipo de, clicar em torno e tentar coisas diferentes até que você fazê-lo para trabalhar para o seu inspetor Dom. Mas eventualmente, se você descobrir como gostar de qual é a técnica para trazê-lo para este estado credível , e então você pode editá-lo para que você possa fazer algumas coisas, você pode digitar um novo valor e depois vê-lo direito lá, mude bem diante de seus olhos. Ou você pode, se for algo como um certo número de pixels, como unidades numéricas entorpecidas. E depois há a unidade. Depois, você pode usar a tecla de seta para cima e para baixo, e isso vai realmente rolar através de tipo de, e você vai vê-lo atualizando como você usar o Cherokee para cima e para baixo para aumentar ou diminuir o valor para que você vai ser capaz de vê-lo realmente mudando de lado e você confinou exatamente o tamanho que você quer, Ben, você pode. Você pode editar isso. Desculpe. Você pode modificar isso a quantidade que vai para cima e para baixo ao usar os Cherokees usando shift e, uh, Ault e controle às vezes para tipo de como fazer saltos maiores ou saltos menores. Mas vá em frente e brinque com isso um pouco até conseguir o tamanho que quer. Agora, uma vez que você tem o tamanho que você quer, lembre-se, quando você recarregar esta página, você vai perder esta mudança porque isso é apenas uma mudança para o dom. É apenas a compreensão do navegador da página. Você não alterou o código, então você tem que realmente mudar o código para o que você faz é, uma vez que você obtê-lo para o tamanho que você quer, olhar para o valor real que então você tem que, é claro, Sei onde você está. Vou te mostrar toda a regra. Vou mostrar-lhe o seletor e, em seguida, a propriedade e o valor da propriedade. Então, com isso em mente, lembre-se do valor da propriedade e, em seguida, vá para o seu código. Encontre o mesmo lugar. Encontre a mesma regra que com o mesmo seletor na mesma propriedade. E, em seguida, quando você vê o valor, substitua o valor antigo pelo novo valor apenas da memória. Ou você pode até copiar e colar esse valor em seu código, salvá-lo e atualizá-lo. E se você não escreveu, sua página não mudará. Então este é você usando o dom que você está navegando no ponto O dom é como se fosse uma árvore de herança. É como, sabe, sabe, aquelas bonecas russas onde colocam uma dentro da outra, exceto que é muito mais complicado. Nós a chamamos de árvore Você pode gostar, recolhê-lo todo o caminho até a raiz, e você pode apenas ver o elemento raiz, e então você pode começar a partir daí ou você pode clicar com o botão direito na página no elemento real que você Quero ver a direita. Clique no que você quer ver e ir para inspecionar, e que irá levá-lo lá no Dom. Vai rolar. Ele vai un colapso e expandir e destacar apenas o elemento em que você clicou. E às vezes é um pouco confuso porque os elementos estão meio que na frente um do outro , e ele e o que você clicou não é aquele em que você pensou que ele clicou, mas geralmente levam você a um lugar muito próximo. E você pode, tipo, navegar através do Dom para encontrar o elemento exato que você está procurando. Você pode fazer muitas mudanças. Você pode realmente codificar totalmente uma página inteira apenas neste Dom Inspector, você poderia escrever o CSS inteiro e tudo mais e, em seguida, perdê-lo quando você atualizar. Provavelmente não é uma boa ideia fazer isso. Há um monte de recursos realmente legais neste Dom explorar. Na verdade, é mais do que um Explorador de esporos Domine. É mais do que um navegador. Inspetor tem um buraco maravilha de ferramentas 35. Introdução à escrita: até agora, uma imagem da Internet consiste em um lado do servidor, um lado do cliente e o que eles estão comunicando para trás e para frente, que é o conteúdo que é embrulhado inextricavelmente com o HTML e o CSS. Então, entendemos que o conteúdo é o ponto do que estamos comunicando, e o HTML é o que dá a esse conteúdo Meeting marca-o para significar uma coisa ou outra. Falamos sobre HTML como o substantivo da linguagem das linguagens da Internet, e, ah, o CSS é o que faz parecer da maneira que queremos falar sobre CSS é os adjetivos em termos de linguagens da Internet. Então, quando você quer fazer coisas interativas, quando você quer que seu site para fazer coisas para responder ao usuário de uma forma que é mais do que apenas seguir Ah, hyperlink. O que você precisa é de JavaScript que você precisa enquanto você precisa de um script de algum tipo. JavaScript é o script do lado do cliente, então, na verdade, você pode ter um script na nuvem na Internet no servidor, , e ele pode fazer um monte de coisas legais, mas você também pode executar scripts diretamente no no computador doméstico do seu usuário em seus computadores , como no site enquanto eles o estão usando sem qualquer comunicação de volta ao servidor. Então, a linguagem que normalmente usamos para isso é JavaScript e Java script é muito poderosa por essa razão, porque não requer essa comunicação constante para frente e para trás. Se você tem scripts em seu servidor do que para o usuário interagir com ele, tem que haver essa conexão http, e você tem que dizer o que o usuário fez. E então o script tem uma chance de responder, e então eles têm que fazer outra conexão http para dar a resposta do script em frente e frente, então não é tão eficiente. O que é mais eficiente é se você usar o computador do seu visitante, eles usam o processador, o script é executado em seu computador e sua memória de computadores, e você pode fazer muitas coisas. Inter ativamente, bem ali 36. Variáveis de Javascript: abra sua página da Web e mude para ela da maneira que temos feito. E ah, faça login e vá para, hum, realmente criar 1/3 página. Então crie uma nova página e vamos chamá-la de Script HTML. E então, hum, você vai querer provavelmente ligado a ele com todo o seu site e tudo mais. Então eu sou você pode fazer isso agora ou voltar para ele mais tarde. Depósito Eso agora se você quiser ir em frente e criar esse arquivo html ponto script então eu vou dar-lhe uma chance de pausa agora. Ok, então você criou um novo script vazio que HTML entra em sua cabeça. Este é o elemento principal. Então lembre-se, o primeiro elemento é esse tipo de documento, então você tem o HTML e então você tem a cabeça e dentro da cabeça, você tem algumas coisas, incluindo o título eso. Normalmente vou colocar depois do título, colocar esse tipo de coisas e vamos escrever um novo elemento. E este html, vamos escrever chama-se script. E o que este elemento faz é que nos dá um espaço para escrever nosso script, nossa linguagem de script, que será javascript, então escreva o script como C. R I P T. Essa tag de abertura l e, em seguida, a tag de fechamento . Eu usei elemento e tag de forma intercambiável e, em seguida, colocar algum espaço entre a abertura e as tags de fechamento e lá dentro, é onde você vai escrever seu roteiro? Vai ser Javascript. Não vai ser HTML. Portanto, nenhum html vai entre este script e stop script. É tudo o que é tudo o javascript sabe. HTML Ok, então aqui, script é muito parecido com, hum, matemática. Se você se lembra de volta à álgebra, há um conceito de variável. Então você tem algo como X e X pode conter um número. Não sabemos qual número pode. O número que contém varia Ok, então você pode ter uma equação simples como um mais um é igual a X. Isso é um Ehlinger quebrar uma equação de coleção, e você pode resolver para X. Você começa a escrever? Hum, então você à esquerda, você vai adicionar um mais um para chegar e, em seguida, chegar a igual a X e ah, e você pode fazer coisas mais complicadas onde a variável está em diferentes lugares com múltiplas variáveis. Será script também usa variáveis e, ah então vá em frente e escreva sua primeira variável para. Para começar, você vai escrever. Você tem que declará-lo como uma variável usando script Java. A maneira de fazer isso é o seu direito Hvar, que significa variável e apenas sempre fazer tudo em minúsculas. A não ser que te digam para fazer alguma coisa. maiúsculas, um, var espaço VR. E, a propósito, você está escrevendo isso dentro do elemento de script entre essas tags scripts de início e fechamento , certo, Bar space X. Então nós estamos nomeando esta variável X e então você coloca símbolo desigual e, em seguida, um, hum então isso define a variável X e define igual dedo um. Agora podemos usar isso é O, por exemplo, Você pode, hum, fazendo alerta. Você já viu aqueles pop ups irritantes que fazem um barulho em uma página da Web? É meio irritante, mas para testes, funciona muito bem. Então vamos escrever um comando de script Java para criar um desses alertas, e então podemos colocar o que quisermos naquele pequeno pop-up. Então, o script de trabalho para isso é, por sinal, colocar isso em um novo alerta de linha e, em seguida, abrir parênteses fechar parênteses, então, nenhum espaço após alerta, abrir e fechar parênteses logo após isso. Agora volte e entre esses parênteses. Certo, a letra X. Então este é o mesmo nome é a variável, certo? Então o que ele vai fazer é alertar essa variável. Então, quando você alertar a variável JavaScript irá criar, isso irá aparecer. Mas não alerta apenas o nome da variável. Ele realmente alerta o que é a variável. Então, Então, guarde isso e te darei uma chance de comandar e ver o que acontece. 37. Corças no Javascript: Ok, então espero que se você está acompanhando quando você salvou e executou esta pequena função javascript carregando a página, você tem um pop-up. Isso foi apenas o conteúdo daquela variável. Tão simples. Agora, eu quero te mostrar algo legal aqui. Em vez de colocar entre parênteses em torno do X em vez de colocar onome da variável entre parênteses, quero que coloque aspas em torno dele. Em vez de colocar entre parênteses em torno do X em vez de colocar o nome da variável entre parênteses, Então coloque uma citação à esquerda e uma citação à direita, e agora ele lê alerta, parênteses abertas, citar o nome da variável, que é X e depois outra citação e, em seguida, os parênteses de fechamento. O que acha que vai acontecer agora? Não estamos mais alertando o nome da variável apenas simplesmente em seus próprios scripts Java. No texto, as aspas fazem algo em JavaScript. Quando você coloca aspas em torno de algo, JavaScript não o avalia mais como um script, mas o avalia como algo que é como ser tomado literalmente. Então é como se eu estivesse falando com você e eu estou descrevendo coisas usando palavras. E então de repente eu uso símbolos de aspas em torno de uma palavra em particular. Muitas pessoas vão usar isso para enfatizar uma palavra. Mas tecnicamente, quando você coloca uma citação em torno de uma palavra, especialmente quando escrito as aspas em torno dessa palavra ou em torno dessa frase significam que você está citando algo, é uma citação, então não é mais tempo você dizendo isso. Mas é você. Na verdade, é algo que está sendo citado. Então é, você sabe, quando você está ouvindo uma frase como esta ou lendo uma frase, você não entende a parte que está entre aspas como parte da frase. Você entende isso como um tipo separado de coisa, e isso é semelhante com JavaScript. Então quando ele se deparar com este X agora porque ele está entre aspas, ele não vai olhar para ele como uma variável mais. Ele vai olhar para ele como a letra X entre aspas. É o que chamamos de corda. É. Chamamos-lhe uma string, porque geralmente uma string consiste em várias letras amarradas juntas. Então, se era como X y z, você sabe que é como pipoca. Você já fez essas correntes de pipoca? Você estava onde você colocou cordas através de pipoca e você tem uma cadeia de, um bem, as pipocas são como letras em strings JavaScript. E essa string JavaScript é, na verdade, apenas uma pipoca. A letra X. Mas a questão é, ela está entendendo-a como uma pequena cadeia de letras, não como algo a ser lido, entendido e analisado como uma variável. Então coloque as aspas em torno dele e salve e positividade, e eu lhe darei uma chance de executá-lo e ver o que acontece de forma tão positiva. 38. A condição "se" do Javascript: Ok, então se você está fazendo isso da maneira correta, você deveria ter recebido o alerta agora. Mas em vez de alertar o número um, alertou a letra X, que é apenas uma string. Então vá em frente e, ah, você pode brincar com isso um pouco e colocar o que quiser lá e você pode escrever uma frase. Você pode escrever um romance. Na verdade, eu acho que há um limite para o quanto você pode caber lá dentro. Mas se você colocá-lo entre aspas, o que quer que você colocar lá, ele apenas irá citar de volta para você diretamente. Mas se você não colocar aspas, então o programa JavaScript, quando ele está passando por isso, assumirá que o que ele está alertando não é apenas algum texto, mas é JavaScript para ser entendido. Então, se for variável, ele alertará o valor dessa variável. Então vamos tornar isso um pouco mais interativo. A capacidade mais poderosa do JavaScript não é apenas ter essas variáveis, mas a capacidade de testar os valores dessas variáveis e fazer coisas diferentes, dependendo da condição ou do estado dessa variável. Então, a fim de testar isso, usamos essa linguagem lógica de se então else. Então, se for verdade, faça outra coisa. Se isso for verdade, faça isso. E a maneira que vai fazer isso em JavaScript é geralmente com variáveis comparando uma variável com outra ou comparando uma variável com uma string. Então, Então, vamos em frente e escrever isso em nosso código. Então vamos escrever isso entre onde declaramos que a variável X e onde o alerta ocorre porque vamos ter este alerta condicionalmente baseado no que a variável contém. Então, após VAR é igual a X, essa linha colocar uma nova linha e escrever a palavra se agora novamente, vamos colocar parênteses se e terminou seu mais simples. Se você simplesmente não colocar um espaço se nenhum espaço e, em seguida, abrir e fechar parênteses e, em seguida dentro desses parênteses, nós vamos escrever a condição de teste. Então o que vamos testar é executar e testar se X é ou não um. Então, quando X for um, vamos alertar uma coisa. E quando X não for um, vamos aprender outra coisa. Então, para testar este direito, X é igual a um. Então você esperaria apenas escrever X é igual a um, mas, hum, você tem que pensar em termos de computadores. Computadores não são muito bons em ter uma coisa significando para coisas diferentes. Então, já estamos usando o sinal de igual uma linha acima. Para atribuir o valor X é igual a um. É como em matemática. Se dissermos que X seja igual a um e, em seguida, se estamos testando sua inclinação natural vai ser como, digamos, se x um sinal igual um se X é igual a um. Mas temos que ter uma diferença assinada para testar a igualdade. Então nós usamos para iguais sinais e você vai cometer muitos erros se você está escrevendo um monte de JavaScript ou qualquer código onde você vai acidentalmente colocar um sinal de igual quando você está testando e ele vai atribuir XTO um. Se fizer isso, será sempre verdade. Então, não importa o que você coloque entre X e o outro lado, se você colocar apenas um sinal de igual, será verdade porque você está definindo também. Verdadeiro. Então não faça isso. Coloque em sinais iguais e coloque X igual a um. Então estamos testando se X é ou não igual dedo um. Agora você pode colocar aspas em torno disso, mas JavaScript é realmente muito complicado porque ele é capaz de ele é capaz de olhar para aquele. Se você não colocar aspas em torno dele, ele entende. Como eu disse antes, é javascript para ser entendido. Não é apenas um ah, não é apenas uma string, mas entende que como um número o número um, um, e então quando você dá uma variável quando você atribui a um número, o mecanismo JavaScript entende que a variável contém um número. Agora a variável também pode conter strings. Então notas até agora nós demos essa variável. Fizemos igual a um sem aspas. Então, porque não tem aspas, isso é um número. E assim abaixo podemos compará-lo com. Se X for igual a um, o número será testado. Teste de escrúpulo Java faz X, que agora contém o número um igual ao número um. E aqui está algo muito complicado. Se você colocar aspas em torno daquele neste teste, ele será comparando. X o número um é igual à string um. O personagem um. É um pouco de pipoca na corda. Certo e roteiro de trabalho é muito inteligente. Na verdade, vai dizer que são a mesma coisa. O String 1 e o número um são os mesmos, mas é como se isso nem sempre fosse confiável. Você não pode confiar em JavaScript, sempre descobrir o tipo de variável que é. Então às vezes você vai encontrar coisas onde ele está avaliando coisas que você acha que são iguais. Mas o JavaScript não tem não é muito avançado o suficiente porque eles são diferentes tipos de variáveis . Então vamos pelo bem do futuro. Vamos passar por isso e prestar atenção ao tipo de variável que é e tentar ser consistente. Então não vamos colocar citações em torno desse. Vamos tentar mantê-lo como um número. O número que definimos é um ah, variável é o número. Agora vamos testar um número também, então não coloque aspas em torno dele. Ok, então se X é igual a um, o que vamos fazer? Temos que colocar o que acontece se essa condição for verdadeira e a maneira como fazemos isso. Nós não podemos simplesmente ah assumir que o resto da página é como nós temos que dizer script Java onde o como onde a coisa a fazer é como, nós temos que dar-lhe alguns limites. Caso contrário, só pensará se for verdade. Como de agora em diante para sempre. Eu sempre vou fazer isso, mas nós queremos definir como um certo número de coisas. Então é como no CSS usamos as chaves novamente. Então, logo depois disso, fechando parênteses colocar uma chave aberta e, em seguida, colocar um par de quebras de linha, você sabe , bater, digitar algumas vezes e colocar uma chave de fechamento. Agora, tudo entre essa chave aberta e aquela chave de fechamento será o que faremos se X for verdade. Desculpe se X é igual a um, que significa que se essa condição for avaliada como verdadeira Então JavaScript irá avaliar a condição, a parte entre parênteses, e se for avaliada como verdadeira, ele irá executar que irá executar. Vai fazer o que está dentro dessas chaves. Então vamos copiar e colar o alerta que escrevemos antes naquela área de chaves. Para se X for um. E vamos mudá-lo para dizer, vamos fazer uma string tão entre aspas, isso mesmo. X é um, e você pode escrever Escreva isso. Ok, então eu vou te dar uma chance de alcançar e, uh, e fazer isso um vídeo positivo 39. A condição "else no Javascript: Agora, se você atualizá-lo, você verá que dependendo exatamente de como você copiou, você verá que porque X é um, ele lhe dará sua sentença. E se apagou o segundo alerta, não verá mais nada. Mas se você não fez, você também verá esse segundo alerta porque depois que ele passou por isso através da condição, se ele continuar indo ao longo do script que continua a executar isso o script e ele vai se deparar com o próximo alerta. Então queremos fazer um alerta de que isso só acontece se X não for um. Então a maneira de fazer isso é logo após essa chave de fechamento, nós vamos escrever a palavra mais. Então, se isso for verdade, se isso for verdade, faça isso outra coisa. Então quando a direita mais e nós vamos abrir outra chave porque estamos agora nós estamos definindo a condição do que fazer se não for verdade. Então, abra, Curly Blake Brace. Coloque um par de quebras de linha fechadas. Cinta encaracolada. Agora aqui, vamos colocar o que acontece se X não for verdade. Sinto muito se X não é um que é avaliado como verdadeiro. Então você não verá isso enquanto for verdade. Mas vamos colocar vamos mover esse alerta lá para cima e vamos escrever X não é um. Ok, então agora você deve apenas ter que alertar. O que diz X é um na primeira condição e, em seguida, o que diz X não é um no 2º 1 então deixe você postar e executá-lo e depois para fora. Continue quando tiver feito isso. Ok, então agora você, se você fez certo, você verá que o alerta diz que X é um, e então você não vê o segundo alerta. Você não vê o outro alerta porque essa condição não é verdadeira. Agora vá em frente e altere sua variável em seu JavaScript. Nessa primeira linha, colocamos var X igual a um. Mude esse para qualquer outro número. Você pode alterá-lo para você pode alterá-lo para 100. Você poderia colocar uma palavra. No entanto, se você colocar uma palavra, ela tem que estar entre aspas. Tem que ser uma corda. Caso contrário, JavaScript vai pensar que é outro nome de variável ou algo assim, e vai ficar confuso. Então, se você vai colocar uma palavra, você tem que ter certeza que o script de trabalho sabe que é uma string. É como esses personagens amarrados na pipoca e na corda. , Caso contrário, JavaScript vai dizer então você coloca a palavra macaco. JavaScript vai pensar, Oh, Oh, ele está falando sobre o macaco nome variável e ele vai olhar para onde você definiu variável chamada macaco. Você disse que uma variável chamada X. Você não definiu um chamado Monkey e também que não há empregos, script, funções ou métodos ou coisas pré-definidas que são macacos. Então, como você vê como a barra de palavras está lá dentro. Não está entre aspas. Isso é algo que o script Java usa. Há se lá dentro, isso é uma palavra, e não está entre aspas. Isso é como um desses roteiros de trabalho. Então não está entre aspas. O script de trabalho vai pensar que ele costumava fazer algo com ele, e se ele não é realmente enviado que ele pode fazer qualquer coisa com, ele vai sufocar para que você possa definir X igual a uma palavra que você inventa ou uma frase. Mas certifique-se de colocá-lo entre aspas para que ele saiba que é uma string. Então vá em frente e faça isso e execute-o e eu vou pensar e dar-lhe uma chance de experimentá-lo. Então você deveria ter visto o outro alerta. Então isso é muito legal. Você está começando a ver os fundamentos de como Javascript funciona. Isto é o básico da programação. 40. Scripts de backend: O que você fez até agora até esta lição de script foi marcação e estilo. Então você fez HTML, que é linguagem de marcação. É uma linguagem de marcação, e você tem sido CSS, que significa folhas de estilo em cascata. Não é realmente importante o que significa, mas é uma linguagem de estilo, e lá eles têm mais em comum entre si do que com linguagens de script. Agora um script está em um outro reino. É mais perto que pensamos quando falamos de programação. Então você realmente acabou de escrever seu primeiro script, e obviamente você pode fazer muito mais com script Java. Mas isso foi mais uma introdução do Justin ao script do lado do cliente front-side. Então JavaScript é a linguagem escolhida. A propósito, se você vai estar aprendendo a fazer desenvolvimento Web em termos de criação de páginas da Web, isso geralmente significa um desenvolvedor Web front-end. Desenvolvedores da Web de back-end tendem a vir de mais de um fundo de ciência da computação como programação e, programação e,como se você obter um grau de programação ou um grau de ciência da computação, desenvolvedores de front-end são mais do que provavelmente você é interessado em. Assim é a frente do desenvolvedor que as três coisas chave que você deseja aprender nosso HTML, CSS e JavaScript. Você não pode escapar usando essas três línguas. Então, a partir de agora, você tem sua introdução a todos os três, e como você vai, você vai encontrá-los e você vai saber como usá-los. E você provavelmente pode pegá-lo bem rápido como você vai. Apenas tipo de descobrir como você vai e você começa muito feito. Então, o outro lado do script é o back-end ou o lado do servidor, então o script de front-end é JavaScript. O recrutamento de saco é muito mais complicado porque tende a haver ah, muitas línguas diferentes. Na verdade, você provavelmente pode conectar seu servidor, também, também, para executar quase qualquer idioma que você quiser. E isso ocorre porque você tem controle total sobre seu próprio servidor, e ele não precisa ser interoperável. De certa forma, no sentido de que o que você está fazendo no seu servidor, o script e todas essas coisas que acontecem acontecem apenas em um computador. E então, uma vez feito, o resultado que ele envia através da Internet que tem que ser interoperável, mas a programação e a escolha e como a agitação do programa não tem realmente que inter operar . É apenas a comunicação que tem que quebrar a Internet para que você possa escrever de volta e scripts em qualquer idioma que você quiser, desde que eles possam se comunicar com o método padrão. Como http, Hum, mas existem alguns padrões que se usam muito, e umm eu estou em nós apresentá-lo ao PHP. 41. PHP: PHP é open source e livre. E assim ele tende a se acostumar muito em um monte de um monte de um monte de software que é livre na Internet e código aberto na Internet. Assim, por exemplo, WordPress usa PHP e PHP é uma volta e linguagem. Isso é, você sabe, ele tem um monte de falhas, mas em algum sentido é muito fácil começar com coisas simples. Então nós vamos escrever apenas um script PHP muito simples no back-end, e então nós vamos executá-lo e tipo de ver como isso funciona. Então o que vamos realmente fazer é corrigir exatamente o mesmo código que fizemos no script Java . Mas vamos escrevê-lo em PHP. Então, para fazer isso, vá para o seu turno novamente e crie um novo arquivo. E aqui está o diferente é que você não vai criar um arquivo HTML desta vez. Você vai criar um arquivo chamado script dot PHP. Ok, isso é muito importante que você dê a ele a extensão PHP. Agora, se você estiver usando shift nele, há uma pequena hum, há uma pequena opção para criar um arquivo PHP para começar como PHP já. Então vá em frente e faça isso se você quiser, ou apenas crie-o e salve ele tem dot PHP. O importante é que você tem este arquivo em seu site chamado Script Stop PHP. Agora, dentro disso, vamos escrever o mesmo roteiro. Então a maneira de criar uma variável no PHP não é exatamente a mesma porque é uma linguagem diferente , não a mesma que em JavaScript. A maneira de fazer isso no PHP é escrever um cifrão e, em seguida, o nome da sua variável sem um espaço no meio. Então, nós realmente não temos que ter esse var declarativo. Você pode apenas escrever dólar X e isso irá criar a variável X. Então vá em frente e escreva Dólar X é igual a um. E então, hum, na verdade, grande parte do código é o mesmo. Então a próxima linha que você pode escrever se X for igual a um. Agora, o que você tem que mudar nisso? Você tem que ter certeza de que o PHP sabe que o X é uma variável. E a maneira como você faz isso é com aquele pequeno dólar tão certo dólar X, se o dólar X é igual a um e então você sabe, mesma sintaxe com os parênteses e tudo mais. E então você está aberto e fecha chaves. Estou dentro deles em vez de escrever alerta. O que vamos fazer é, um PHP não é um script de front-end, certo? Portanto, ele não tem controle sobre o navegador da mesma maneira. Mas o que ele vai fazer é PHP vai criar um, hum ele vai cuspir algum conteúdo. Então, Então, o que vamos fazer é definir o conteúdo que ele cospe com isso. Basicamente, é como se estivéssemos escrevendo um documento que será transmitido pela Internet. Então vá em frente e escreva a palavra eco espaço, e então você pode escrever sua string. Então, em vez do alerta apenas espaço de eco direito e, em seguida, entre aspas abrir fechar, fechar aspas fechar. Certo. Sua força. Então X igual a X é igual a um. O que você quiser escrever, hum, e então siga isso no imposto novamente. A chave fechada outra abrir chave e, em seguida, alterar o de alertas para eco espaço de eco Cotação. Então não, não há parênteses. De novo, certo? X não é um. E, em seguida, feche aspas sem parênteses no PHP. E então a cinta de roupas encaracoladas. Então eu vou te dar uma chance de se recuperar e salvar isso. Mas antes de fazer isso, só quero falar com você sobre o que está prestes a acontecer. Então você escreveu o roteiro. É exatamente o mesmo que o JavaScript de muitas maneiras. Mas o JavaScript, como funciona o JavaScript é, um, você faz o download do arquivo do script da Internet HTML. E dentro desse arquivo, você incorporou o script Java para que JavaScript no no computador do cliente no lado do cliente no computador do seu usuário que trabalhos podem ser executados em seu computador e executa este código bem e criar esses pequenos pop-ups. Então eles têm esse código em seu computador do que com PHP, seu back-end e tudo de volta nas Escrituras como este, é diferente. Então, em vez de baixar o script, o que realmente acontece é que você retribui que você faça a solicitação para que os scripts de documento pontem o PHP e em vez de baixá-lo como fez com o estudo de script HTML, , em vez de baixando o que ele faz é executá-lo no servidor sem baixá-lo. Então o que acontece é que o script é executado no computador servidores em sua memória em seu processador Up, na nuvem ele é executado lá e, em seguida, o script cria um produto. Ele é executado e cria um arquivo. Cria algo, e é isso que envia. Assim, o resultado de sua execução do script que é enviado é o resultado, não o script, mas o resultado do script. Então o que este script faz é que ele tem essa instrução echo. Isso é o que ele está enviando. Então você pode pensar em ecos, impressão, eco e impressão sendo a mesma coisa. O que está fazendo é o que é. É criar este pequeno arquivo, que é qual, cujo conteúdo é tudo o que você ecoa agora. Obviamente, estou simplificando muito, mas o que esse script está fazendo, é tudo o que está fazendo. Então, quando você salvar isso, eu quero que você vá em frente e você copie isso, salve e então execute em seu navegador. Você sabe, seus nomes de domínio, script de barra PHP, e eu quero que você saiba que o que está acontecendo é que você não está baixando o script. Você está baixando a saída do script, ok, então vá em frente e faça isso e execute-o. Espero que esta tenha sido uma experiência perfeita para você. Você vai para o seu domínio e em vez de script que HTML você dá a ele o nome de arquivo que você tinha aqui. Eu dei o nome de script. PHP. Você pode, se você não fez provavelmente tem o direito de PHP. Mas vá em frente e coloque esse domínio nisso. Seu Alan. Quero dizer, e você vê a saída do script agora sabe que este não é o script em si. Então, se você visualizar a fonte, hum, a fonte é que você não vê nenhum script aqui. Você não vê a fonte porque ela não está baixando a fonte. Só está mostrando a saída. Então este é Ah, este é o fim do projeto em sala de aula. Agora você completou um script de front-end e back-end. Então você é um mestre de script de front-end e back-end e, ah, para o projeto. Vamos em frente e escrever alguns scripts com um pouco mais de interatividade e ah, interagir com o usuário e fazer algo mais útil 42. Sistemas de gerenciamento de conteúdo: até agora neste curso, você aprendeu todas as habilidades básicas essenciais para o desenvolvimento Web. Você aprendeu sobre a Internet. Você foi introduzido para html, CSS, CSS, JavaScript e até mesmo scripts back-end. E se você fez o último projeto, você foi capaz de trabalhar em um widget de e-mail que combinou todas essas habilidades e conhecimento. Andi mostrou como eles trabalham juntos para criar, ah, ah, widget que permitiria que as pessoas para enviar e-mail para você em todas as páginas diferentes em seu site. Então você deve ter notado que levou muito tempo e esforço para desenvolver cada página individual e você tem dedo do pé. Mesmo que implementemos o princípio da RD , por que não se repete? Ainda há um monte de revestimento extra que você tem que fazer para cada página, e isso só vai levar um monte de esforço, e você provavelmente não quer estar gastando muito tempo desenvolvendo seu site. Você quer gastar muito tempo desenvolvendo seu conteúdo. Como mencionamos no início, o conteúdo é a coisa mais importante. É disso que se trata. Então, o que usamos é um sistema de gerenciamento de conteúdo que faz tudo isso por você. e em específico. Vamos ver o WordPress. Então, como você está indo junto, você provavelmente está pegando uma de duas rotas. Você provavelmente está aprofundando cada um desses conceitos, aprendendo mais sobre HTML, CSS e JavaScript. Você provavelmente está fazendo todo o dever de casa opcional e realmente se esforçando muito em seu projeto. Colocando um monte de esforço nos projetos, hum, ou você está tomando o outro caminho onde você está apenas tentando obter o mínimo a fim de obter um site lançado e funcionando. E você não se importa necessariamente em aprender todos esses detalhes e aprender como programar e codificar e aprender como entrar no fundo de tudo isso. Você só quer ser capaz de gerenciar e executar um site, e você não necessariamente tem tempo para personalizar coisas e ficar realmente em profundidade e no conhecimento. Então, qualquer uma dessas estradas são totalmente bem, e WordPress é. Você pode pensar nisso como algo que, porque ele gerencia para você, é uma espécie de como a segunda rota que gosta mais fácil rota nua mínima. Mas não é realmente verdade WordPress você pode fazer a mesma coisa. Você pode pegar qualquer uma das rotas. Você pode apenas obter a configuração e ter seu site funcionando. E sem muita experiência ou conhecimento ou ir em profundidade ou aprender codificação. Basta começar a fazê-lo, ou você pode realmente ir em profundidade e você pode personalizar. Você pode entrar em todos os diferentes aspectos que plugins temas. Você pode começar a desenvolver seus próprios temas, e você pode fazer WordPress fazer quase tudo o que quiser. Na verdade, há provavelmente um monte de sites que você vem usando que você nunca sequer percebeu foram realmente baseados no WordPress como o núcleo. E eles foram personalizados ao ponto que eles nem sequer são reconhecíveis como WordPress . Então, antes de entrarmos na introdução real ao WordPress, vamos ver um pouco de como todas essas habilidades que estavam usando funcionam juntas em um ambiente real onde você está baixando e visualizando uma página da Internet, e irá ver algumas das motivações para o porquê de você precisar de um sistema de gerenciamento de conteúdo 43. Como os servidores lidar com várias solicitações HTTP: Então, quando você baixar uma página que você colocou na URL e que você estava tudo direciona para o servidor e diz ao servidor que arquivou um enviá-lo e geralmente o processo vai algo como isso, o servidor estará enviando em arquivo html porque isso é o que você pediu. E o navegador começará a ler esse arquivo html de cima para baixo. Ele lê a coisa toda, começando um muito top da mesma forma que lemos, esquerda para a direita, cima para baixo. E à medida que ele passa, ele acabará por correr em algo como seu elemento de link CSS, que é uma referência ao seu arquivo CSS externo. Eu sou assim que seu arquivo CSS não está na verdade naquele oitavo TML. É separado. Então, quando ele chega a essa linha em seu documento vai enviar outra solicitação http para o servidor e pedir para que o arquivo CSS. Então vamos continuar lendo e ele vai encontrar talvez uma referência JavaScript, e ele vai enviar uma solicitação http para o servidor pedindo isso, e ele vai continuar indo junto e encontrar todas essas referências. É muito mais rápido para o navegador ler toda a página da Web do que é para essas solicitações http passar. Então, enquanto isso tudo está acontecendo, o servidor recebe essas solicitações começando com que CSS um encontra o arquivo CSS e, em seguida, envia isso para baixo na linha, Então ele também está recebendo a solicitação para o arquivo de script, encontra esse arquivo e o envia para o navegador. Você pode ver isso em ação em sua própria página da Web usando as ferramentas de desenvolvedor. Por exemplo, no Mac Option Command I quatro Chrome traz as ferramentas de desenvolvedor, e você normalmente tem esses itens Dom inspecionar na guia Elementos. Mas você pode passar para a guia rede, e isso mostrará informações sobre as solicitações http e todas as outras atividades de rede que estão acontecendo. Então a primeira coisa que precisamos fazer é recarregar a página para que ela possa capturar isso. Vá para sua própria página da Web e experimente isso depois de atualizar a lista de coisas que aparecem começa com o arquivo HTML principal para sua página. Obviamente, essa é a primeira coisa que é solicitada, e você pode ver aqui que há um gráfico de quando os pedidos foram feitos. Este é um tempo zero e, em seguida, quanto tempo levou para o, uh para o navegador para se conectar ao servidor para enviar o que está enviando neste caso uma solicitação http pedindo o arquivo HTML e, em seguida, esperando o servidor para ir em frente e encontrar que htp encontrar o local que a solicitação http está procurando. E então, se houver algum script nele, por exemplo, execute esse script e, em seguida, o recebimento é o download. Então, neste caso, porque é um arquivo HTML e muito pequeno, levou apenas um milissegundo para baixo. Embora o arquivo HTML, no entanto, levou ah, 142 milissegundos, ainda um curto período de tempo, mas um pouco mais do que o necessário para baixar para o servidor encontrar o arquivo e começar enviá-lo para que você possa ver que há alguns outros arquivos incluídos nesta página noarquivo HTML, você tem a arquivo HTML, folha de estilo, o script Java e, em seguida, uma imagem. Agora olhe para este estilo. Ela e, em seguida, JavaScript Vape começou as solicitações http em Lee depois que o HTML foi feito sendo baixado e carregado. Isso ocorre porque o navegador encontrou as referências a ambos e em paralelo iniciar em http. Http. Pedido pedindo ao servidor esses dois arquivos. Agora você vai notar aqui o status. Esses números são o código de resposta http. Então 200 significa que conseguiu. Certo, 304 é um código de resposta. Isso significa que o navegador já o tem no dinheiro, e o que está no servidor não é diferente. É a mesma versão que você tem no dinheiro dos navegadores, então ele não faz o download. Então, se você passar o mouse sobre, eles verão que, embora haja algum tempo talvez para se conectar e esperar pelo servidor, ele não será realmente baixá-los novamente porque eles já existem. Então, neste caso, foi para milissegundos para receber o código de resposta http e neste caso zero milissegundos para receber o javascript. Código de resposta http. Agora, se quisermos obter uma ficha limpa para ver como seria baixar tudo isso na primeira vez que você visitar a página, você tem que segurar shift quando você bater. Refresque, e isso lhe dirá para obter novas cópias de tudo. Não importa o quê. É basicamente como limpar o dedo do pé do cache. Segure, mude e clique. Atualize e verá que demorou um pouco mais. Os tempos mudaram, por isso ainda levou cerca de 350 milissegundos do início ao fim para obter o arquivo HTML. Uma vez que ele tinha me arquivo html, ele tem o CSS e JavaScript em paralelo começou ambos os pedidos http Ao mesmo tempo,no tempo, entanto, você pode ver que a folha de estilo era muito menor. Foram 655 mordidas contra 90 kilobytes um kilobytes muito maior que uma mordida. Então o download da folha de estilo em 88 milissegundos, enquanto o JavaScript arquivado, baixado em 222 milissegundos. Na verdade, o estilo que ela baixou em um milissegundo levou 88 milissegundos para o servidor enviá-lo. Assim, enquanto essas duas solicitações http as solicitações foram enviadas em paralelo, os scripts Java continuaram baixando por muito mais tempo. E então você pode ver que levou um tempo para que a imagem fosse carregada. Portanto, o navegador não foi capaz de fazer essa solicitação http para a imagem até que esta linha foi esclarecida. E você pode ver isso. Esta pequena linha aqui indica quando o dom é terminado de carregar e isso indica quando as páginas completamente feito de carregamento, e você não precisa se preocupar com eles agora. Mas esta linha roxa significa que o navegador terminou de ler todo o caminho através da capa HTML para cobrir, e ele analisou e criou sua imagem mental da página. O Dom. E é aí que você começa a ver algumas dessas coisas serem carregadas. 44. A ferramenta de tempo de rede: Outra ótima ferramenta no pacote Ferramentas do desenvolvedor do Chrome é a linha do tempo Tap. Vá até aqui e ligue este pequeno botão de gravação para começar a gravar e, em seguida, atualize sua página segurando o turno novamente, se quiser. Agora isso lhe dará uma idéia, e você pode desligar a gravação após o segundo. Isso lhe dará uma idéia de quanto tempo está demorando um monte de sub-ações menores, e ele irá mostrar-lhe algumas das dependências para que você possa ver a primeira solicitação é a solicitação envio para o arquivo HTML e que é expandido aqui mesmo. Há um monte de coisas diferentes que o navegador faz como ele vai. A próxima solicitação é para o arquivo CSS, que acionou algumas dessas outras coisas recebendo dados, terminando o carregamento e, em seguida, o script Java, e você pode dizer esses ar em paralelo e, em seguida, aqui mesmo. Este é um interessante re calcular estilo. Isto mostra como o navegador usa as informações da folha de estilo depois de carregá-la para calcular novamente a forma como a página parecia. Então isso é chamado re desenho ou pintura, e isso é parte de onde o fo que você vê acontece o conteúdo estilo forno flash. E então aqui você pode ver onde o script de script Java real está sendo avaliado. Vou rolar bem aqui. É aqui que o script é avaliado. Então o script é carregado aqui, e então ele realmente é executado aqui, e você pode ver como sua análise através da leitura de coisas diferentes. Então esta ferramenta de linha do tempo é muito poderosa na medida em que mostra todos os detalhes do que está acontecendo, e você pode colapsar e expandir as diferentes partes. E à medida que você rolar para baixo, você começará a ver coisas como pintura e camadas compostas. E esta é uma ótima maneira de depurar se as coisas estavam levando muito tempo. Mas geralmente olhando para a ferramenta de rede, você vê as coisas que têm essa área maior aqui, maior tamanho de download. Isso é um problema. E quando você vê coisas que dependem de outras coisas, isso é outro problema. Dependências. Mas, na maior parte, o que vai ajudá-lo é reduzir o número de solicitações http. Então isso significa combinar todos os seus estilos todos o seu javascript em um arquivo cada e reduzir o número de imagens que ainda não estão carregadas e reduzir o tamanho geral 45. WordPress no servidor: olhando para a ferramenta de rede. Você vê as coisas que têm essa área maior aqui, maior tamanho de download. Isso é um problema. E quando você vê coisas que dependem de outras coisas, isso é outro problema. Dependências. Mas, na maior parte, o que vai ajudá-lo é reduzir o número de solicitações http. Então, isso significa combinar todos os seus estilos todos os seus scripts Java em um arquivo cada e reduzir o número de imagens que ainda não estão carregadas e reduzir o tamanho geral. Então você pode ver que em uma situação ideal, a única coisa que é diferente em cada página é o conteúdo e então talvez um pouco de informação que vai no cabeçalho como o título, Hum, então você pode tipo de idealizar uma estrutura de site onde existe esse layout comum. Eles onde cada página tem um rodapé de barra lateral de cabeçalho compartilhado, CSS compartilhado JavaScript, e isso nunca muda. E a única coisa que muda entre páginas é apenas esse conteúdo. E à medida que você alternar entre páginas, tudo o que você obterá é o conteúdo exclusivo dessa página. E, claro, isso é exatamente o que Wordpress duds. A forma como Wordpress funciona é um pouco diferente das nossas páginas estáticas. Até agora. WordPress é um script do lado do servidor, um programa muito complicado que vive neste servidor. E ele faz um monte de coisas, incluindo gerente alguns bancos de dados. Bancos de dados são como você pode imaginar, como se você já trabalhou com o Microsoft Excel ou uma planilha. bancos de dados de software contêm todo o conteúdo do seu site nessas planilhas ou bancos de dados e, em seguida, o WordPress é capaz de acessar, por exemplo, o conteúdo de determinadas páginas retiradas do banco de dados e, em seguida, criar uma página que ele envia para você. Então, a primeira coisa que você precisa saber sobre o WordPress é que ele realmente assume a U. estrutura U. R L do seu site para o diretório em que ele está. Então, se WordPress está no diretório principal, você pode digitar seu domínio dot com e, em seguida, qualquer outra coisa. E não importa o que você digita, não importa qual pasta ou nome de arquivo você digita. Mesmo que ele não exista, ele será redirecionado para WordPress, e WordPress terá controle sobre ele. Então, o que está realmente acontecendo quando você digita um site WordPress U. Two Twoé que você está carregando o script WordPress toda vez. É apenas o mesmo script WordPress, e o que WordPress faz é olhar para os arquivos que você solicitou, e ele obtém essas informações do banco de dados, e ele constrói essa saída HTML. Então você se lembra que os scripts não são realmente baixados. Eles só enviam a saída para ser baixada. Então o que o WordPress faz é que ele constrói o arquivo HTML para a página solicitada. E então você baixar que você baixar a saída do script PHP que é WordPress que compilou e juntou a página HTML com base na UL que você solicitou. isso não é tudo o que o WordPress faz No entanto,isso não é tudo o que o WordPress faz. Este é um dos benefícios de manter seu site organizado, mas chamamos de sistema de gerenciamento de conteúdo porque gerencia seu conteúdo e facilita a criação de seu conteúdo. Se você vai criar seu conteúdo manualmente, você tem que criar toda essa estrutura e estrutura para cada página individualmente. Mas quando você usa um sistema de gerenciamento de conteúdo, você pode fazer login nesse sistema de gerenciamento de conteúdo. Você pode realmente entrar nos scripts no servidor, e é uma espécie de como quando estávamos usando shift nele. Estávamos online, criando nosso conteúdo online. E depois salvámo-lo. Nossa página foi enviada. Isso é um pouco diferente porque você não está fazendo login em um site que está se conectando ao seu site por meio de FTP como Shifted. Era o seu desejo diretamente em seu servidor diretamente em scripts em seu servidor. E assim, quando você cria uma página no WordPress, você está realmente criando-a diretamente no seu servidor, e WordPress vai pegar o conteúdo do que você está escrevendo e colocá-lo no banco de dados, pegar o título e qualquer outra informação sobre ele e colocá-lo em um banco de dados. E então, quando isso for solicitado mais tarde, ele vai retirar essa informação do banco de dados, construir o arquivo HTML e enviá-lo para quem pediu. Então, a grande coisa sobre a criação de conteúdo WordPress é que você pode realmente criá-lo sem trabalhar com código diretamente. Você não precisa se concentrar em desenvolver seu site. Você pode se concentrar em desenvolver seu conteúdo 46. Como fazer seu site atual: Portanto, antes de instalar o WordPress, é realmente importante que você faça backup do seu site existente porque há uma grande chance de você perdê-lo. Mesmo se você não acha que você se importa muito com o seu site, é bom dedo do pé. Ter um backup dele para que se você quiser lembrar como você fez algo que você pode olhar suas páginas antigas que você fez e lembrar tipo de como é uma referência como você fez isso. Então vá em frente e abra seu editor de FTP. Seu é o seu cliente FTP. Agora, isso vai ser arquivos L a ou pato cibernético ou algo assim. Não tente usar turno nisso. Ou algum outro editor online. Isso é um pouco diferente. Então vou usar pato cibernético. Já que estou num Mac, podes usar o que quiseres. Agora, eu já tenho este marcador salvo. Se você não tiver seus favoritos salvos, vá em frente e receba esse e-mail com as informações da sua conta e use-o para criar um marcador . Mas eu vou me conectar. Então aqui está o meu site e você pode ver que eu estou no diretório w w w ou, hum, você pode ter o diretório html sublinhado público. Na verdade, são a mesma coisa. E esta é toda a sua informação. Cada arquivo e você pode até mesmo modelar. Você pode até mesmo classificá-lo por quando eles foram modificados pela última vez. Então você pode ver tipo de como quais arquivos têm trabalhado recentemente. E o processo de backup é bem simples. Vá em frente e crie uma nova pasta na sua área de trabalho e dê-lhe um nome e uma data. Vou chamá-lo de l e b dot com de volta, e então eu vou colocar a data de hoje, e então você realça cada item. Vou clicar no botão de baixo e depois clicar no topo e ele vai destacar tudo no meio. E eu só vou arrastá-lo para aquela pasta com ah, com zilla arquivado. É muito parecida. Basta arrastá-lo para fora do lado do servidor para a pasta na sua área de trabalho, ou você pode usar o painel esquerdo que, uh, que ele tem, dependendo de como isso funciona. Basta arrastá-lo para fora do lado do servidor para a pasta na sua área de trabalho, ou você pode usar o painel esquerdo que, uh, que ele tem, Então você pode ver que eu coloquei na minha pequena pasta aqui, e esse é o seu backup. Então, agora você pode fazer você tem um par de opções quando você instalar o WordPress. Se você quer que o WordPress seja o seu site principal. Você pode querer mudar tudo isso para um pouco novo. Vou clicar na tua sequência e numa nova pasta. Então você pode chamar isso de aprendizagem e depois fazer a mesma coisa. Clique na tecla suspensa inferior, mude, clique na parte superior. Estou ignorando. Veja jibing porque não há nada nele. E então eu preciso dele e depois arrastá-lo para lá. Então, se você fizer isso, então todo o seu site está agora em aprendizagem. E provavelmente alguns de seus links e referências de origem serão interrompidos porque você alterou o local. Mas ele é preservado neste subdiretório, e a maneira de chegar a ele seria o seu domínio dot com forward slash learning, e então você é levado para o seu índice. Mas olha para isto. Este link vai funcionar porque eu fiz um link relativo. Mas você pode achar que algumas de suas coisas se quebram assim. Ah, o CSS está quebrado, então isso não é mais estilizado corretamente porque eu vou te mostrar a fonte. Meu CSS procura, hum nos estilos de diretório raiz, estilos que CSS, mas, hum, o diretório raiz. Este é o diretório raiz Não há pasta Styles, as pastas de estilos dentro deste pedregulho de aprendizagem. Sua outra opção é, hum, é deixar tudo no diretório principal e instalar o WordPress em um diretório separado , então depende de você. 47. Como instalar WordPress: Vamos começar a criar nossa primeira instalação WORDPRESS em seus servidores. Agora, a maneira como você vai fazer isso é através do painel de controle em seu servidor. Seu servidor tem algum software instalado nele que é chamado de painel C, e é um painel de controle que permite que você gerencie seu domínio de muitas maneiras. O painel de controle para o seu site está localizado em um subdomínio do seu domínio, então o nome do subdomínio é o painel C para o painel de controle. Então digite e veja o ponto do painel e, em seguida, seu nome de domínio pressione enter e você chegará a este tempo na tela. Agora esta informação de log que ele está pedindo para você é a informação de conta folha de grito que você recebeu no início do curso. Então vá em frente e copie seu nome de usuário e senha e faça login. Agora você está logado no painel de controle do seu servidor, então tenha muito cuidado quando estiver aqui, porque você pode quebrar muitas coisas. Mas você também pode fazer algumas coisas muito legais, e é muito amigável. Para ser honesto, ele mostra algumas informações sobre o seu site à esquerda aqui e, em seguida, estes ar, todas as configurações que você pode alterar as coisas que você pode configurar. Você pode até configurar backups. Você pode. Você pode criar novas contas FTP e alterar senhas de clientes de conta FTP. Você pode criar novos. Hum, tem muita coisa acontecendo aqui. O que vamos fazer agora é instalar o WordPress usando o instalador APS suave e delicioso. Então encontrar que todo o caminho na parte inferior e clique em WordPress. Agora, este wordpress instalado dá-lhe um monte de informações. Mas aqui, vamos apenas ir em frente e clicar em instalar e tipo de ignorar com o resto disso, então deixe este protocolo em paz. Você tem algumas opções. Apenas deixe em http. Não coloque o www. Caso contrário , exigirá www todas as vezes. E então você deve ter apenas um domínio aqui. Conforme você expande suas opções de hospedagem, você pode ter vários domínios. Agora, isto é ah separado. Isso é importante. Este diretório, isto aqui diz onde será a instalação do WordPress. Então, se wordpress vai ser o seu site principal, que eu recomendo, eu faço isso no meu. Não coloque nada aqui. Basta deixá-lo em branco, e ele estará diretamente em seu site principal. Então, se você vai para o seu domínio ponto com, ele irá levá-lo para o site WordPress. No entanto, se você quer que o WordPress seja apenas como uma demonstração ou uma instalação de teste, ou você quer que seja nós um espião, um sub componente do seu site e não o principal, e você quer que o principal seja alguma outra coisa você pode digitar qualquer coisa que você quiser, como diretório WordPress. E o que isso vai dio é que ele vai instalar WordPress nesse diretório, e então se você quiser ir para a sua instalação WordPress, você terá que ir para o seu domínio dot com barra qualquer diretor que você colocar assim. E então isso irá levá-lo ao WordPress. E se você não colocar o diretório WordPress, então isso irá levá-lo para o que você tem em sua pasta que você enviou com FTP ou o que quer que seja. Então você tem uma escolha aqui, dependendo se você quer sobrescrever suas coisas antigas. Então eu vou instalar isso em. Um ah, diretor especial. Eu ia chamá-lo de WP para este exemplo. Presumo que a maioria de vocês se apoiaram. Seu conteúdo provavelmente só vai querer apagar seu conteúdo antigo e colocá-lo aqui. Hum, a propósito, este realmente apaga. Só vai torná-lo inacessível. Ele ainda estará no seu servidor, então deixe o banco de dados em paz. Hum, você quer suave, Delicious e WordPress para gerenciar todas essas coisas de base de dados para usado para apenas deixá-lo em paz. Você pode dar um nome, se quiser, mas eu digo para deixar isso em paz. Deixe os prefeitos da mesa em paz. Agora, aqui é onde você pode configurar algumas configurações iniciais para o seu blogueiro. Podes mudar isto mais tarde, mas vou dar-lhe um nome. Esse é o nome do meu site. E então tem, tipo, um pequeno subtítulo e depois deixe isso em paz. Agora, aqui é onde você cria uma conta de admissão. Então este e homens conta não é o mesmo que este grito conta folha. O que você está criando aqui é sua conta WordPress. Então, quando você entrar em seu site WordPress, você vai usar essa informação e é totalmente não relacionado com a sua conta shot leaf. Estas são as informações da conta do servidor. Esta é a informação da sua conta WordPress, por isso não se confunda com isso. E se você realmente quiser, você pode usar o mesmo nome de usuário e senha. No entanto, eu não recomendo fazer isso porque só vai reforçar a idéia de que o mesmo quando eles não estão e quando, se alguma coisa mudar no futuro, você vai ficar super confuso. Então eu digo, crie um novo nome de usuário e senha, e esse nome de usuário será realmente visível às vezes no WordPress, dependendo de como você o configurou. Então eu recomendaria que você use um nome de aparência profissional porque às vezes vai ser coisas como postado por em homens ou o que quer que esteja aqui. Então eu vou colocar Brenton só para que pareça que é por mim. E então aqui você vai colocar uma senha e seu e-mail de administrador. É importante que este seja o seu endereço de e-mail real. Escolha um idioma, não entre no avançado. E, em seguida, você também pode enviar os detalhes da instalação por e-mail para si mesmo e instalado. Você deve receber uma mensagem de confirmação informando que ele foi instalado corretamente para que você possa ver que há dois lugares onde você pode ir o principal aqui. Ele vai se você colocar o subdiretório, ele vai ser ford slash WP ou o que quer que você colocar, eu colocar WP se você não tê-lo instalado em um diretório particular, ele vai ser apenas um nome de domínio. O administrativo. Você Earless como você lei novamente e que sempre será WP traço de homens dentro de qualquer diretor que seja . Então, porque eu tenho WP está dentro daquela subpasta. Mas se você não colocá-lo, você apenas colocá-lo em seu site principal. Será apenas o seu domínio dot com barra WP admin para que você realmente não tem que se lembrar disso, mas vamos em frente e verificar o meu site e ver o que parece agora. Agora, lembre-se que eu instalei este diretório WP. Então, aqui está a instalação padrão do WordPress. Tem um poste falso aqui e um par de links à direita que estão bastante vazios. Igualdade de uma página de exemplo 48. Administração no WordPress: Então vamos entrar na área dos publicitários para que você possa rolar para baixo encontrar o login. Em Meta, se você olhar aqui em baixo, quando eu passar por cima, é o traço WP dele. Log in dot PHP. Você pode clicar sobre isso para ir lá, ou você pode apenas digitar isso diretamente no traço WP, logar em ponto PHP Ou você pode fazer toda a coisa WP admin. Bill, vai te levar para o mesmo lugar. Agora, aqui, você vai colocar as informações que você configurou durante a instalação. Então esta é a área de administração do seu site WordPress. Uh, também, as pessoas chamam de WordPress Blawg. Então você está logado agora em uma área que só você pode ver como um administrador, e é aqui que você pode fazer todo o gerenciamento de conteúdo e alterar todas as configurações e fazer basicamente qualquer coisa que você quiser. Então, no topo aqui é uma espécie de barra de navegação principal. Isso vai ficar nesta área superior enquanto você estiver logado. Você pode ver que este é um link bem aqui para o seu site principal. Você pode abrir tudo aberto em uma nova guia. E então este é o seu site novamente. Mas agora que você está logado, você tem essa barra de administração que é só para você. Quando você está conectado e você pode fazer coisas como editar a página em que você está. Se eu clicar em uma página, você verá que tenho editar coisas como essa. Então, hum e então você tem links de volta para todas essas áreas diferentes. Então, de volta à área de administração você tem inicialmente um painel que só tem algumas informações sobre o seu site e alguns, ah, instantâneos rápidos de diferentes áreas e, em seguida, à esquerda, aqui está o painel de navegação principal, que tem todas as, uh, coisas estarão usando para personalizar e construir seu site imediatamente. As coisas mais importantes são posts e páginas, então estas são muito semelhantes suas formas de criar conteúdo, criar páginas. Mas postagens são como postagens blawg e páginas são como páginas da Web. Então a diferença é que um post vai para o seu blawg e é meio que ligado a uma data específica . Então, inicialmente, quando você cria um post que o título do Post provavelmente será algo como a data atual o U R L que ele cria agora. Uma página, por outro lado, deve estar sempre disponível. E não gosta de envelhecer com o tempo. É algo que está sempre lá. Então, na maioria dos blogs WordPress você tem, como uma seção blawg. Este é este é realmente um post, e então você tem páginas que são como parte da navegação principal. Então vamos em frente e criar um post e uma página para tipo de ilustrar a diferença lá. Então você pode clicar diretamente em adicionar novo ou ir para esta área de páginas e, em seguida, você vê uma lista de todas as suas páginas. Neste momento, é apenas uma página de amostra. Você pode ver que uma página de exemplo lá. Uma página de exemplo é diferente do mundo Olá. Então a página de exemplo eu vou criar uma nova. As duas únicas coisas que você realmente precisa dar são um título e algum conteúdo. Esta é a área de conteúdo aqui. Há duas abas. Estou usando a guia visual, o que significa que não tenho que escrever no HTML. Se eu quiser fazer algo ousado ou um Talic, eu posso usar este botão aqui, e ele vai itálico sem que eu precise escrever o código. Agora, se eu quiser realmente ter um pouco mais de controle no poder, você poderia ir para o editor de texto aqui e você verá que ele é realmente o editor de HTML. Eu posso entrar e editar o HTML especificamente, mas ainda WordPress dá-lhe, Ah, um pouco de ajuda, que poderia ser irritante às vezes. Por exemplo, se eu colocar uma quebra de linha e começar um novo parágrafo, WordPress irá automaticamente para o seu código, e ele vai envolver uma tag de parágrafo em torno de Miss e uma tag de parágrafo em torno disso porque você coloca as duas linhas quebra por isso é realmente amigável. Mas pode ser fácil de usar se você não está esperando que ele entre e mexer com o seu código . Então você tem que estar ciente de que WordPress vai realmente mudar este texto HTML, mesmo que ele não parece que ele é. Assim, para publicações muito rápidas e conteúdo rápido, isso pode ser super fácil. Mas se você está tentando fazer as coisas um pouco mais complicadas, hum, pode ser frustrante e há algumas soluções alternativas que eu posso mostrar a você mais tarde. Mas de qualquer maneira, vamos em frente e publicar isso e, em seguida, uma vez que você publicou, este botão mudará para atualizar. Então, quando você faz edições, você tem que clicar em atualizar e você pode ver aqui este é o link para a página criada automaticamente um u R l para ele. Mas também, se eu for ao meu site e atualizá-lo deve aparecer na área de navegação. Então esta é a minha primeira página WordPress. E aqui está a página que eu criei. Agora, novamente, a página é diferente das mensagens de bloco deste Olá mundo. Isto é um posto de bloqueio. Agora, por padrão e WordPress, sua página inicial é o seu blawg, e seu blog irá mostrar apenas uma lista de todos os seus posts de bloqueio. Por isso, neste momento, só tenho um. Este que foi criado por padrão pelo WordPress. Olá, mundo. Então vamos entrar e criar um novo post blawg. Vou clicar em postagens e você pode ver o meu post blawg existente que foi criado pelo WordPress é uma demonstração. Vou criar um novo post Post é diferente de uma página e mesmo formato. Aqui. É quase exatamente o mesmo. Você tem edição de texto ou edição visual. E então você publica aqui, e ele vai se atualizar uma vez que você publicou, se você quiser editá-lo. E então você publica aqui, e ele vai se atualizar uma vez que você publicou, Então, agora, se eu atualizar na minha home page, a navegação não muda porque não é uma página. Acabei de adicionar, É um post, e empurrou Olá mundo para baixo e mudou-se para postar para que eu possa clicar em um post particular clicando em um destes. E então eu posso ver apenas esse post. E você vê, eu não tenho mais Olá mundo lá em baixo, e então eu tenho as páginas de navegação aqui em cima. 49. Permalinks: Vamos voltar para o painel. Então, imediatamente. A primeira coisa que eu vou ter normalmente fazer quando eu instalei está lá indo para configurações e eu vou para, hum eu vou para permitir links para baixo na parte inferior aqui. Então esta é toda a informação que eu sentei para começar. São ligações permanentes do General Donat. É assim que suas páginas são criadas. Então sei que o U R L para o primeiro post que fiz é a pergunta Mark P igual a seis e o UL para a minha página que eu criei aqui é Paige. Eu era igual a quatro. Agora, se você quiser ter links mais bonitos e bonitos, a maneira de fazer isso é bem aqui. Então você pode escolher uma dessas opções. Algo como o nome postal é uma boa maneira de o fazer. Mas o nome do post por conta própria pode não ser suficiente, porque , um, você pode ter muitos posts que às vezes terá o mesmo nome, o mesmo título, e então WordPress terá que diferenciar entre eles fazendo get Confuso. Então outra maneira de fazer isso é fazer dia e nome ou mês e nome. Tenho a tendência de pensar que só ter o mês, o ano e o mês. E então o nome é suficiente, mesmo que talvez, assim como o ano no nome. Mas você pode ver como eu clicar sobre essas coisas diferentes ele atualiza a estrutura personalizada aqui. Portanto, há esta sintaxe. Isso significa ano. Isso significa o número do mês. Isso significa nome do post, então eu posso tipo de como mexer com isso se eu quiser, Mas eu tendem a gostar de ter o nome do post no final. Há alguns motivos de desempenho que você não quer que a postagem seja no início, por isso é bom dedo do pé. Este é provavelmente o melhor é apenas um mês e nome, então você começa links um pouco bonitos. Mas também está dividido pelo mês. Agora, quando você salva as alterações, lá vamos nós, então as páginas não terão esse nome de mês e ano nelas. Mas os posts vão, que, que é totalmente bom para mim, porque seu cartaz amarrado a um dia de qualquer maneira, então você está posts bloco vai sempre começar com 2013 seja qual for o mês que for. E depois o nome, onde estão as suas páginas? Só terá o nome da página em linha reta. Então este é o nosso primeiro passo para transformá-lo de mais de um blawg para uma página 50. Como mover a página do blog da página de nossos: Então, o próximo passo é E se você não quiser que sua lista de postagens esteja em sua página inicial, você queria ter uma página real. Agora eles estão configurando para que você vá para a leitura. E agora a primeira página exibe suas últimas postagens. Podemos mudar isso fazendo com que a primeira página seja uma página estática. Agora provavelmente vai querer criar uma página específica para ser a nossa home page. Talvez chame de casa agora. Eu poderia definir isso para isso, e então você tem que definir um post página dedo do pé, assumir sua seção blawg. Então, antes de fazermos isso, vou em frente e criar duas novas páginas para isso. Então adicione novo. Vou fazer uma home page, e vou atualizar isso mais tarde. E então eu vou criar uma página blawg, e eu vou deixar isso vazio. Então, agora que eu tenho, vamos olhar para a nossa lista de páginas. Então eu tenho a página de exemplo que o WordPress fez para mim, a que fizemos juntos agora e então, Ah, Ah, página inicial, que eu vou expandir mais tarde, e uma página bloqueada, que está vazia. E a razão pela qual queremos essas páginas vazias porque vamos entrar em configurações e leitura. E agora vamos definir a primeira página para estar em casa e vamos expandir isso mais tarde. E então a página do The Post será apenas blawg. E agora quando dizemos isso e podemos ter algumas configurações aqui, então isso mostra como os 10 posts mais recentes. Se você tem 1000 postos de bloco, você não quer mostrar todos os 1000. Então este é o número que você mostra na página de bloco, e então você pode mostrar o texto completo ou se você tem postagens longas, você provavelmente só quer colocar um breve resumo. Ele vai colocar como os primeiros parágrafos agora que salvamos a configuração. Se voltarmos aqui e nos refrescarmos, veremos algumas mudanças. Então a nossa página inicial agora é apenas o que colocamos nessa página. Podemos expandir isso mais tarde, minha página inicial, e então se quisermos ver nossas postagens blawg, podemos ir para Blawg. E, em seguida, aqui vemos a lista de nossos dois posts que foram atualizados aqui e, em seguida, quaisquer outras páginas 51. Como instalar temas: tudo nesta aparência tem. Aqui é onde você tem controle para realmente mudar as coisas. Então agora, se eu for aparecer, ele me levará aos temas primeiro, e veremos que estou usando o tema de 2012. Eu também poderia mudar para o tema 2011. Hum, em breve haverá o tema 2013, eu presumo, já que eles fazem um todos os anos. Portanto, há opções dentro do seu tema para alterar os menus antes do plano de fundo ou para mudar para um tema completamente diferente. Ou você pode encontrar um novo tema. Então vamos mudar para o tema 2011. Como ele já está instalado por padrão, tudo que você precisa fazer é clicar em ativar e ele está ativado, novo tema ativado, e agora você pode ver que 2011 é o tema atual, e aqui em baixo, 2012 ainda disponível. Então, agora, quando eu vir aqui e atualizar todo o caminho que este parece, o tema vai mudar. Agora é um site totalmente diferente, certo, mas é exatamente o mesmo conteúdo. Todos os mesmos posts casa ainda está aqui, e que a página que eu posso esta é a minha primeira página WordPress ainda está aqui, então você pode ver como você tem um monte de poder aqui e separou o conteúdo na apresentação. Agora vamos instalar nosso próprio tema. Um novo tema que podemos procurar com base em palavra-chave são baseados em alguns desses, um, um, eu gosto do dedo do pé. Talvez encontrar um tema de árvore, um tema que tenha uma árvore nele. Só dois resultados. Talvez encontrar um tema que tenha a cor azul 32 resultados. Eu posso ver pequenas demonstrações aqui. Este é bom e fundo. Agora você pode apenas instalar ou pré-visualizar. Primeiro, a pré-visualização lhe dará uma pequena pré-visualização de como a página realmente será semelhante. Então eu gosto deste. Eu vou instalá-lo Agora que eu instalei, eu posso ativá-lo ou voltar para o nosso instalador de temas, então ativar vai realmente ativá-lo. Ou, se você não ativá-lo, então, em seus temas de gerenciamento, você ainda terá este. Esse é o atual, que é este. Mas agora, na parte inferior, você terá este no qual você instalou, e aqui você pode ativá-lo. Então novo pouco novo tema ativado e, em seguida, apenas atualizar Agora eu tenho este tema azul do céu do arco-íris muito legal acontecendo com folhas planas e tudo mais. Então, é muito fácil encontrar temas, e eu vou dar-lhe uma pequena dica é que esta pesquisa de feixes instalados. O que ele realmente está fazendo é que ele está procurando wordpress dot org é a seção tema bem aqui . Então, existem 1732 temas atualmente no Diretório de Temas WordPress, e você pode olhar através dos mais populares, Hum, ou apenas encontrar o seu próprio. Então, aqui está uma legal. Se você estiver instalando a partir do wordpress dot org, no entanto, eles estão assumindo que você vai baixá-lo e, em seguida, carregá-lo e, em seguida, instalá-lo. Então, mesmo se você encontrá-lo aqui, a melhor maneira de ir sobre a instalação é provavelmente obter o nome dele e, em seguida, passar para sua aparência e, em seguida, instalar temas e na pesquisa e, em seguida, colar o nome dele e procurar por ele, e, em seguida, você pode encontrá-lo aqui, e então, quando você instalá-lo e ativá-lo a partir daqui, você não precisa fazer nenhum download manual. Então aqui está o meu outro tema que eu acabei de instalar quem eu gosto este mês. Você pode ver que se eu mudar os lados disso, ele meio que muda um pouco. Isso parece ser um tema um pouco responsivo. O cardápio desmoronou aqui quando o fiz pequeno. E então, à medida que eu expandi, ela se expande aqui. Então este é um tema responsivo. Você quer ter certeza de que você tem um tema que responde assim porque o tamanho do telefone ah vai ser mais assim e vai quebrar sua página se ele está tentando exibir assim. 52. Personalizando a barra lateral e o menu: Continuando a nossa pesquisa. Vamos reativar este plug neste tema porque ele tem uma barra lateral mais óbvia e você pode ver que está um pouco confuso. Há um monte de coisas aqui, então queremos nos livrar de algumas dessas pequenas coisas. Lugar para isso é o próximo item. A aparência interna é os widgets. Agora aqui estão todos esses widgets diferentes. Você aumentou comentários recentes postagens recentes que correspondem a pesquisar comentários recentes de postagens recentes , etc. Então vamos nos livrar de arquivos e categorias porque não queremos isso agora. Move-o para fora do caminho e, em seguida, você pode atualizar e você pode ver que isso é simplificado um pouco. E agora vamos adicionar um par de widgets. Vamos adicionar um calendário e, em seguida, aqui, vamos encontrar o texto arbitrário e adicionar isso na parte inferior, e você pode realmente colocar o que quiser aqui, incluindo HTM fora. Então você vê, o calendário apareceu aqui, e então se nós rolarmos para baixo, aqui está o texto arbitrário que eu coloquei com HTML que eu coloquei ali. A próxima coisa legal são menus, então você pode querer personalizar o seu menu um pouco se você apenas ir com o padrão. Qualquer página que você criar, ao contrário de um post qualquer página que você criar irá aparecer neste menu aqui. Isso significa que criamos uma página bloqueada. Criamos uma página inicial. E se quisermos mudar a ordem ou queremos que alguém não apareça? Digamos, por exemplo, que queremos manter isso. Esta é a minha primeira página WordPress, mas não queremos sempre aparecer no menu, e queremos home page para ser o primeiro. É aí que você vem aqui com a seção do menu sob as aparências. Então a primeira coisa que você vai fazer é criar um menu. Você tem que dar um nome a ele, e então você pode criá-lo. Depois de criá-lo nestes locais de temas, você tem que selecioná-lo e salvá-lo. Então agora ele está ativo em seu tema, e é aqui que você pode inserir links personalizados em seu menu. Na maioria das vezes, no entanto, você só vai querer desenhar de suas páginas existentes tão bem de todos vocês. E estas são todas as suas páginas. Isso ou se você quiser, se você tiver uma quantidade enorme, você pode procurá-lo, mas isso deve ser suficiente. Agora, enquanto você verifica estes um de cada vez, ele irá adicioná-los ao menu. Agora esta ordem importa. Então, se eu fosse para salvá-lo agora, você verá página Blawg Home Sample e esta é a minha primeira página WordPress que é ordem blog página de exemplo Home. Esta é a minha primeira página wordpress. Então vamos mudar a ordem da maneira que queremos e depois dizer que eu queria me livrar desta é minha primeira página wordpress. Eu poderia não ter adicionado. Ou agora que eu adicionei, eu quero removê-lo. Clique aqui. Então eu só tenho estes três na página de exemplo do meu blog inicial menu e dizer, Eu quero colocar blog por último para que você possa realmente personalizar seu menu exatamente da maneira que quiser. Você também pode jogar com categorias, mas eu vou deixar você descobrir isso por conta própria 53. Edição de temas: A última coisa é o editor dentro da seção de aparência, e este é o mais avançado. Então, quando você vai para o editor inicialmente, ele vai mostrar todos os arquivos em seu tema. Então eu estou usando o tema céu azul nublado, e todos esses arquivos são todos arquivos de tema. Agora ele vai me dar o estilo folha de estilo que CSS primeiro, porque isso é provavelmente o que você vai estar editando. Então, se eu quisesse mudar as coisas aqui, a maneira que eu faria isso é indo para o editor e editando este estilo que CSS Este é o CSS caiu bem aqui. E já que você aprendeu alguma CSS, você não deve ter medo de fazer mudanças aqui. Mesmo que seja uma enorme parede de texto, você pode descobrir lentamente, especialmente usando as técnicas que você aprendeu. Diga, eu queria mudar o tamanho deste subtítulo. Aqui, eu posso usar minha ferramenta de elemento inspecionar e, em seguida, encontrar o subtítulo, e eu posso ver que ele está usando este ponto cabeçalho DOT DSC provavelmente significa descrição, e eu posso testar aqui o tamanho que eu quero ser. Isso parece um bom tamanho Então agora eu posso ver aqui que este é o estilo que CSS Isso é o mesmo. Eu só estava editando. Então eu tenho que lembrar ponto cabeçalho dot dsc Eu vou entrar na minha folha de estilo e procurar por isso. Posso ver que aparece uma vez, uma de uma. Então eu sei que este é o lugar certo, e aqui eu posso adicionar no CSS que eu quero e eu posso salvá-lo. E agora, mesmo que eu desfaça isso, se eu atualizar, você verá que o dizer que o tamanho está atualizado. Lá está ele. Então é assim que você personaliza sua página e você pode entrar em coisas realmente avançadas como este é o cabeçalho que será sobre esta área aqui. Aqui é onde você pode entrar no html no PHP para modificar esse 54. Plug-ins: você confinou plugins para estender seu site para fazer quase tudo o que você deseja começar com. Vamos adicionar um simples que rastreie seus visitantes. Vá para adicionar novo e, em seguida, digite o nome do plug e você está procurando, neste caso, Google Analytic ator. Agora você precisará configurar uma conta do Google Analytics para que isso funcione. Mas eu vou te guiar por esse processo porque vale a pena. Google Analytic ater Instale agora, Sim, instale E depois que for passado, ative o plug in. Agora você vê isso aqui em baixo, vá para as configurações. Precisamos estar conectados à sua Conta do Google. Vá em frente e clique no link que eles lhe dão e permitir o acesso. Copie o código que eles te dão para a caixa e continue agora. Inicialmente, será desativado e haverá um ar de quatro ou três. Então o que você precisa fazer é realmente entrar. Se essa é a mensagem que você recebe, o que você provavelmente vai ser, você precisa entrar no Google e configurar uma conta do Google Analytics. Então vá para google dot com barra analytics e certifique-se de que você está conectado. E aqui está o processo de inscrição. Você vai fazer isso por um site. Vá em frente e escolha um destes. Eu vou com a Universal e para a informação do seu site. Você tem que aceitar os termos de serviço e, em seguida, sua conta deve ser configurada. Volte para sua página e atualize. Desta vez, esse ar desaparece para que você possa clicar em Ativado. Agora vá em frente e role para baixo. Você pode mexer com isso mais tarde, embora você provavelmente não precise mudar nada. Role até a parte inferior e salve agora. Deve ser configurado para ver o rastreamento. Acesse seu painel e encontre a página do Google Analytics aqui. Eu gosto de colocá-lo à direita porque muitas vezes a direita é um pouco maior, e eu gosto de arrastá-lo até o topo. Muitos desses ar não são muito úteis. Então agora você não terá nada. Mas ao longo do tempo você verá um gráfico do número de visitantes, visualizações de página, visitas, taxa de rejeição e outros dados úteis 55. Concluindo pensamentos do WordPress: Então esse é o fim da pesquisa de alto nível do WordPress. Deve ser suficiente para você começar. Embora você possa passar muitos anos aprendendo tudo o que há para saber sobre WordPress apenas skimming a superfície, você será capaz de entrar em um monte de coisas realmente poderosas olhando através, especialmente os plugins, porque você pode estender isso a todos os tipos de coisas. Galerias de imagens, formulários de contato. Há uma lista interminável de milhares de plugins de pessoas que criaram. Provavelmente a maneira mais fácil de encontrar os plugins não é através do plug and finder aqui, mas realmente ir para wordpress dot warg e, em seguida, clique no link plug ins. E isso irá mostrar-lhe os links mais populares e os plugins em destaque destaque ou aqueles que WordPress é destaque porque eles pensam que eles são especialmente úteis. E os plugins mais populares são usados por milhões de pessoas às vezes e têm uma boa classificação e, na maior parte, vai ser uma boa aposta que muitas pessoas os acharam muito, muito úteis. Então vá para wordpress dot ou vá e confira os plugins populares, e então você também pode pesquisar pela categoria de plug in também. A outra coisa que você quer fazer imediatamente é escolher um tema e, em seguida, começar a personalizá-lo. Então encontre um tema que seja semelhante à maneira que você quer que ele pareça. Comece a usar as habilidades que você aprendeu neste curso, usando o Dom Inspector e suas habilidades de edição CSS para editar seu tema e torná-lo mais precisamente da maneira que você quiser. A primeira parada para personalizar um tema são as opções no tema aqui. Alguns temas têm mais opções e outros. E então, se você não conseguir afastá-lo, olhe o que você quer com essas opções. Em seguida, você entra no editor e começa a personalizar as coisas à mão. Esse é o fim desta lição. Vá em frente e comece o projeto. E, uh, deixe-me saber como as coisas vão