Codificação de mão do seu primeiro site: conceitos básicos de HTML e CSS | Sira Academy | Skillshare

Velocidade de reprodução


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

Codificação de mão do seu primeiro site: conceitos básicos de HTML e CSS

teacher avatar Sira Academy, School

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

9 aulas (49 min)
    • 1. Apresentação

      4:32
    • 2. Primeiro código no HTML

      8:26
    • 3. Primeiro código no CSS

      3:02
    • 4. Desenho do CORPO

      5:47
    • 5. Design do TÍTULO (cabeçalho)

      4:09
    • 6. Lista de navegação de design

      8:02
    • 7. Design de contêineres2 (H2)

      6:10
    • 8. Vamos desenhar, além de definir os parágrafos e cabeçalho (p, h3)

      4:58
    • 9. RODAPÉ - Fim do curso

      3:50
  • --
  • 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.

104

Estudantes

1

Projeto

Sobre este curso

Durante o curso, vamos criar um site simples usando HTML e CSS.

O curso vai durar não mais que 40 minutos, e nesse tempo, você será capaz de criar um mesmo site como você vê no vídeo Introdução.

O curso será explicado de forma fácil, tudo será abrangente e claro.

O que vamos usar :

Editor de texto: Bloco de notas ++

Chrome

Imagens do site http://www.monpada.fr

É tudo,

Agora vamos começar !

Conheça seu professor

Teacher Profile Image

Sira Academy

School

Professor

Bonjour ! , my name is Ylber, a founder of Sira Academy. I was born in Novosello, a small village in the south east of Kosovo, now I live in Montpellier which is a city in south of France, exciting and much more dynamic. I studied French Literature at the university of Montpellier but also English as a foreign language. I have been teaching for 5 years now in many schools and associations. I really enjoy teaching. It gives me the opportunity to learn about the different cultures around the world.

I have become a self taught, Depending on the complexity of a topic, learning something new can take a long time. And it's bound to be frustrating as you grapple with new terminologies, new models, and apparently irrelevant information. When you are learning something by yourself, there ... 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. Apresentação: Vocês, meus amigos? O papel, queridos meus alunos. Então, onde eu serei o professor mais fácil que você já viu tão juntos nós vamos criar este lindo simples site em 40 minutos para que não demore mais tempo Onley 14 minutos. Como vê, é um site muito simples, mas bonito. Então você pode colocar tudo o que quiser. Você pode postar fotos, vídeos, artigos para tudo. Então você vê, nós temos o cabeçalho. Então, temos um design de cor de título para que você possa nomear o nome que quiser. Temos uma navegação leste. Então você vê E você pode nomear exemplo de notícias, esporte, biografia, economia tudo. Então tudo o que você gosta para que você possa mudar em qualquer nome que você gosta. Então você vê, nós temos tão título artigos Então nós temos, mas apenas como um exemplo E o fundo nós temos pé para cima Então nós vamos criar este site em 40 minutos. Então, vou mostrar-lhe como fazer isso passo a passo primeiro. Então você precisa continuar. Não sei o editor de texto por isso, se você tem, você pode usar exemplo Há um monte de editores de texto. Então, uma vez não foi ruim, lembra? Nada mal, mas não foi bom. Agora não é isso mais. Então este é um muito bom para usar onde ele poderia editor de texto. Então, uma vez que você tem ou você está em seu site, você não pode carregar a última versão para apenas clicar em download aqui. Então não carregue, e você não vai carregá-lo. Então eu não vou não carregá-lo, porque eu já fiz. E eu tenho isso no meu PC, então ele vai aparecer assim. Então este é o editor de texto, não clusters ruins. Então, uma vez que tenhamos baixado este editor de texto, precisamos criar. Então precisamos criar uma pasta no ou destinado. Então fazer o quê? No que eu faço. Então, siga-me. Então vamos nomear exemplo, ou site ou site. Então você pode nomear o nome que quiser, então não se preocupe. Então, vamos abrir ou html assim html. É uma linguagem muito simples porque tudo o que você abre, você tem que fechar. Então você vê você abrir o imposto e então você fecha. Temos HTML. Então agora temos que salvá-lo na pasta que criamos em que coisas lembrar. Então temos o nome ou testado, certo? Então, ou foram nomeá-lo ou site. Certo. Então vamos chamá-lo de meu primeiro. Meu primeiro site pensou HTML Então lembre-se que não estamos trabalhando semana em PHP ou CSS ou JavaScript. Estamos trabalhando com HTML. Então você tem que nomear dot html, então dot html e vamos salvá-lo. Então você vê o imposto ou o código mudou para azul. Então significa que tudo funciona corretamente. Então vamos apenas aqui ou primeiro site, a fim de testar se tudo funciona corretamente. Então vamos runt almoço cromado. Então eu iria lançá-lo no crime porque este é o meu preferido. E você vê, então nós não salvamos. Temos que salvá-lo. Então, atualize. Então você vê ou primeiro site foi mostrado. Significa que tudo funciona corretamente, então siga-me. E em 40 minutos vamos criar juntos este site simples e bonito 2. Primeiro código no HTML: seus alunos. Então estamos de volta ao nosso segundo tutorial. Então, e neste tutorial, vamos começar a projetar ou criar ou página. Então, esta linda página. Então, a fim de dizer o crescimento ou que tipo de versão off html estavam usando, temos que colocar tipo escuro assim ano tanto e então Então agora o Roeser sabe que tipo de HTML estavam usando. Então lembre-se de tudo. Tudo. Quando codificamos tudo, então ele é separado em três partes. Então nós temos aqui o tinha ainda aqui. Então, como você vê na cabeça, nós temos apenas o título. Então daqui é o corpo. Assim, no corpo vai colocar os títulos navegacionais do Leste artigos. Então, tudo entra no corpo. E então temos o rodapé, então, como você vê ano. Então não temos nenhum tipo de duto. E aqui nós temos que colocar Então primeiro nós vamos dizer para os irmãos ou que linguagem vamos usar. Então isso podemos mostrar, como digitar html lang e então colocamos e n. É para Inglês. Então agora estamos prontos para fazer ou colocar em três partes. Então, como dissemos, então tudo entra em tags html. Então tudo o que tinha o corpo, a navegação leva tudo. Então aqui temos que colocar agora a cabeça. Então temos que escrever tinha e temos que fechar tinha, Como dissemos, tudo o que abrimos, precisamos fechar. Então, no cabelo, vamos colocar apenas o título. Assim, o título que podemos nomear meu primeiro site usando HTML e CSS. Então agora temos que fechar o título, certo, porque dissemos que tudo o que abrimos, precisamos fechar. Então agora você vê que nós criamos. Então nós colocamos um tipo de cão do que o lang, o idioma fora do navegador. E então nós colocamos um título. Então agora temos que criar o corpo. Assim, o corpo no corpo, vamos colocar tudo no corpo para que o corpo precisamos fechar o corpo. Então, como você vê, então tudo vai aqui no corpo. Então, na navegação, pelo menos, tudo vai aqui. Então, no corpo aqui, vamos colocar um morto. Então, Dave, isso nos ajuda a desenhar a página. Então nós em Dev usamos apenas classes e usamos IDs. Então, isso nos ajuda e para projetar exemplo ou página. Então nós colocamos Dave Year e vamos fechá-lo. Se assim for, neste ano do Dave, vamos colocar coisas. Por exemplo, aqui temos que criar o H um e dois este H. Vamos dar um exemplo de identificação identificaçãoa ideia de que vamos dar a isto, errou até que o Chapeleiro seja . Ele vai mostrar. Então, no cabeçalho, então vamos sair de um link. Então links que criamos usando ref. Então, Ralf, é para o Link. Então vamos fazer o título como um link. Então vamos dar um título. Então, como dissemos então título será como Título será design colorido de cor e não colocaria casa aqui então vamos fechar o título e, em seguida, vamos mostrar o título na cor do navegador projetado a partir deste. Então agora precisamos fechar a faixa de idade 1, você vê. Então, depois de ter criado ou título e temos colocado um dia então agora precisamos criar um mínimo de navegação para que criemos alugados digitando Nap. Então isso agora é como a navegação. Então nós colocaríamos na UL. Significa uma nova ordem, pelo menos Então estávamos certos e vamos dar-lhe e eu d. Então, a fim de projetar com CSS, precisamos dar decidido, Então vamos nomeá-lo menu. Então agora temos que fechar a U.L E então vamos criar o mínimo. Então nós digitar aliado e, em seguida, vendido o mínimo deve ser como Ling, porque se você quiser para a frente ou para redirecionar dedo do pé outra página, é melhor para alimentos bobos colocar links. Então nós, mas nosso árbitro e então não vamos colocar um link. Então vamos embora assim, eu escreveria. Então é o número um ou a nova refeição? E então fecharemos pelo menos, e vamos fechar também. Então, o link, pelo menos fresamento Então eu vou copiar para ser mais fácil, tão feliz de ser mais fácil. E então agora eu vou colocar como 12345 Então isso significa que nós temos cinco listas no Breaux. Então, depois de termos ralado ou navegacional Leste Agora temos que verificar o irmão. Então, você vê, nós criamos o título no leste ocasional. Então vamos almoçar em cromo e ver Então você vê, nós começamos. Agora temos a medicação, Elise e temos um título. Então, só Jack. Então aqui estamos o controle fresco mais uma vez. Então você vê, nós temos o leste navegacional e design de cores como um título. Então isso significa que tudo funciona perfeitamente. Então, depois de termos creditado Navigational East, temos que fazer outro dia. Então lembre-se, podemos colocar o número para que possamos colocar números incontáveis do Dave em nossa página. Então não importa quantos dias você colocar uma nova página, então é ilimitado. Então nós vamos nomear isso fez como recipiente para. Então vamos colocar no contêiner principal. Então você vê, está no contêiner principal do partido, então temos que nomear contendo dois depois deles. Vamos criar uma nação para sentar significa comer ir para, então vamos escrever como artigos, vender artigos nesta página. Vamos dar um exemplo. Você vê, isso são refrescos novamente recebidos. Temos artigos que podemos tomar também um parágrafos. Podemos ir para a página “O quê “? Tipos html de ponto com. Então nós vamos copiar este parágrafo e vamos colocar em nosso site então é um pouco mais longo, mas nós acreditamos assim por enquanto. Então você vê, nós temos o parágrafo e agora a navegação leste não deveria estar aqui. Então deve estar aqui por causa da morte. Então desossado um recipiente para agora vamos verificar mais uma vez. Então temos artigos. Vamos verificar mais uma vez no corretor e ver onde estamos. Então vamos Jack mais uma vez, vamos atualizar e você vê, temos os artigos sobre agora temos também o parágrafo, então precisamos também criar um pequeno rodapé. Então precisamos parar de defasagens como eu dizendo nesta língua. Então nós temos mencionado no início que temos o chapéu, o corpo e o rodapé. Então nós temos os alimentos e aqui nós vamos colocar apenas como um parágrafo e nomeá-lo como pé tão projetado por vendido por mim eu vou colocar meu nome. Então, apenas como um parágrafo, você vê. Então agora tudo funciona perfeitamente. Então, quando a próxima palestra, vamos projetar passo a passo para Paige. 3. Primeiro código no CSS: Então estamos de volta ou próximo tutorial, e vamos projetar um pouco ou página web. Você vê, nós temos um título Navegacional Leste artigos no pé. Então agora vamos projetá-lo se você quiser projetar com CSS. Então você tem sempre que digitar estilo, então vamos digitar estilo logo abaixo da cabeça. Então, fora para o título no tipo de título, vamos colocar texto como CS tem e, em seguida, como dissemos então tudo o que abrimos no HTML, nós também temos que fechar, Então vamos fechar o estilo. Então agora vamos projetar o corpo. Então o corpo está aqui. Então você pode ver se você quer projetar algo, basta digitar essa palavra. Então, seu tipo de corpo. Então você abre os colchetes. Então, como , veja, vamos abrir os colchetes, vamos dar a margem. Então a margem que dá para nos dar tamanho. Então nos dá tamanho para o espaço branco fora das fronteiras. Então, e o carinho dá um tamanho fora do espaço branco Apenas tão dentro do tabuleiro, ela tão marchando que está fora e enchendo seu interior. Então, vamos colocar também linha de texto e vamos definir como centro. Bem, agora vamos verificar o corretor e ver o que somos. Então você vê que o título e tudo mudou para o centro de linha de imposto médio, Então foi fácil. Então agora, como dissemos, nós projetamos por I D. Então é por isso que colocamos uma idéia aqui. Então agora você vê, Dave, eu d. Então agora. No entanto, temos que colocar um hash tag para saber o que estamos projetando. E então colocamos contêineres. Então o nome já foi desligado? Caramba, contentores. Então aqui, Agora vamos dar Não, vamos dar um com Então vamos dar um com em direção aos contêineres então vamos colocar como, 770 pixels em. Então uma margem deve ser de zero a alto e nós também vamos colocar uma linha de imposto como centro . Então, a linha de texto esquerda deve ser uma esquerda virtualmente Então vamos verificar mais uma vez e ver que o texto mudou mais uma vez para a esquerda. Então agora precisamos projetar apenas o cabeçalho. Então você vê a idéia de que H um é tão Este é um Tron. Este é o cabeçalho. Então você vê que é um pouco, então é um pouco confuso aqui, então nós temos que colocar o título no topo da navegação. Então vamos mudar. Então vamos colocar ou empurrar o título no topo por dois 150 pixels. Então podemos fazer isso digitando o comando. Ódio. Então vamos dar 256 pixels. Então, agora vamos ver onde estamos. Então você vê, então o título foi para o topo. A navegação. São apenas 250 pixels daqui até os títulos. 4. Desenho do CORPO: Caro Sr. In. Então estamos de volta em ordem próxima palestra e nesta palestra vamos projetar ou página Web. Então você vê o fundo. É um pouco confuso, então precisamos dar outro fundo porque temos um fundo preto. Mas agora precisamos mudá-lo. Então você vê, nós temos o título e então nós temos a navegação liberada aqui. Então vamos dar um passado ao corpo dela. Então, para isso, precisamos apenas do tipo de fundo e, em seguida, colocamos essas cores. Está aí? É a minha preferência. Então você digitou hashtag lá estava indo para atualizá-lo. E veja, o fundo foi alterado para esta cor. Então, o que vamos fazer a seguir, é que vamos chegar a uma fronteira em direção a contêineres. Então você vê, nós temos os recipientes TIFF quando dissemos que temos separado ou página com profundidades. Então agora vamos. O quê? Nós estamos indo para ir. Vamos dar uma margem de fronteira. Na verdade, vamos conseguir uma borda de dois pixels. Então, para dois pixels e então vamos digitar sólido, e vamos dar uma cor agradável Então vamos dar a essa hashtag de cor um Antes disso, vamos dar um plano de fundo. Então, o fundo que deve estar em branco. É melhor para nós. Então, primeiro toque no fundo em preto, então, se você quiser digitar o plano de fundo em branco, você pode colocar hashtag e EFS triplo. Então, agora vamos verificar mais uma vez se tudo funciona bem. Então vamos entrar no fresco. Veja, os Contêineres de Desenvolvimento mudaram para preto e você vê que temos em torno de uma borda agradável em torno de dois pixels com outra cor. Então, se você quiser verificar sobre as cores, você pode apenas digitar. Então você conduz cores hexadecimais HTML e, em seguida, você pode verificar para cada nome fora X cores para que você possa falar com este link HTML nomes de cores e se você quiser copiar e colocar em seu site, é foi fácil. Você apenas copiá-lo e então você prová-lo em CSS. Então, em estilo cascata, se você quiser mudar o seu Bagram por isso depende do seu gosto. Então o que vamos fazer a seguir é tirar algumas fotos para este site, então é um site francês. Então vamos começar mais uma vez, temos que digitar mais assuntos estrangeiros donde. Então vamos pegar todas as fontes que precisamos para nossa página web. Então, clicamos neste link html CSS Então estas são as imagens que vamos usar a fim criar ou site. Então vamos salvar este título. Então, precisamos dizer na mesma pasta que criamos, lembre-se, criamos lembre-se, uma pasta com o nome ou site, então o tipo deve ser é gyp. Então lembre-se, temos três tipos de fotos, então é G p g. É Jif e PNG. Então, vamos dizer também esta pequena maçã. Então o tipo também é Jeff, então salvamos na mesma pasta. Agora precisamos salvar também a página grande. Então nós vamos salvá-lo, Clique apenas como nos salvar e vamos salvá-lo como um Jiff. Agora temos este grande menu que vamos usar para navegação leste, então vamos salvá-lo e é também uma imagem Jiff e então temos a maçã. Então temos que projetar ou navegar para o leste, então vamos nos salvar ou Apple. Então, a Grande Maçã. Então, vamos dizer visita, dar. Então, se você quiser tirar essas fotos, você pode apenas verificar este site mais Panda, que se houvesse assunto ponto e você pode ótimo, a fim de criar o mesmo site que eu . Então, o que vamos fazer agora? Então, no H um cabeçalho assim no cabeçalho estavam indo ritmo do dedo do pé ou para colocar a maçã. Então, primeiro, vamos dar uma margem a zero. Então, não vamos superar. As margens de margem devem ser um zero. E depois vamos ter um passado. Então o fundo deve ser a maçã. Então, o amplo que temos tomar. Então nós tiramos do site mais. Abra, meu fato. Então vamos lá e colocar em grande você. Então temos esta maçã aqui e vamos colocar na sua cabeça. Então vamos verificar o tipo dessas fotos. Então você vê agora nós vamos verificar a hora. Então o tipo é G PG. Então não é o Jeff. É G PG para ver o nome fora do item, é Apple que G p g. Então vamos escrever. Então, se você quiser tirar fotos de suas pastas, você precisa apenas do tipo u R l e, em seguida, o nome das imagens, o formato, o tipo das imagens. Então nós vamos criar nenhuma repetição e nós vamos postá-lo na página superior esquerda do mundo . Então vamos verificar se tudo funciona se tudo funciona perfeitamente. Então você vê o número Apple, ele está no ou cabeçalho. Então nós vamos projetar passo a passo, página web, apenas me siga. E na próxima seção, vamos dar outro projeto. 5. Design do TÍTULO (cabeçalho): Então vamos projetar ou site. Veja, nós temos cor. Então, nós colocamos este nível bonito maçã em ou superior esquerdo para página da Web. Então o que precisamos fazer é dar um projeto a este árbitro. Então, você vê, nós temos o link aqui. Então, a idéia é cabeçalho e o comprimento fora do título. É o seu design de cor. Então vamos desenhar este título. Então nós precisamos montar apenas h um cabeçalho e então você vê, nós temos o link, nós temos o link, então nós digitamos asas com um para que nós abrimos os colchetes encaracolados e, em seguida, vamos projetar passo a passo ou design de cores como um link. Então o título fora era página web. Então você vê esse link aqui? Então nós vamos dar primeiro vagão para dar com, então nós digitamos mais uma vez, nós vamos dar um com link de trabalho do dedo do pé título Self Tour. Nós vamos dar em torno de 400 pixels e então nós vamos obter um ódio em torno de 70 pixels. Então isso é o suficiente. Então eu tenho apenas fazer isso anteriormente, e funciona bem com isso. Então vemos que não mudou. Nada ainda. Então o que vamos fazer agora, é que vamos mostrar. Então vamos exibir seu título como um bloco. Então, se você precisa ver uma diferença, qual é a diferença entre exibir no bloco e exibir na linha para apenas ir para a escola VSC três no Google e você apenas digitar assim bloco de exibição na vida para que você possa ler e ver o diferença entre isso para deslocar para que você possa verificar. Há alguns exemplos aqui, então, a fim de entendê-lo melhor, então vamos exibir como um bloco. Então, o que vamos fazer agora? Então vamos dar um fundo para lembrar o fundo. Então vamos dar o que você está agora. Então lembramos que tiramos essa foto. Então o título que tiramos do site moveu panda para que você possa ir lá e pegar também o mesmo título. Então você nós só checamos. Então temos um título que Jeff. Então vamos verificar o tipo fora. Trabalhe fora da foto. Então vemos nos detidos, é um cigano. Então nós tampamos o título Ural Jif. Então, agora que temos dado um fundo seu título URL o Jeff. Então vamos colocar, tipo, tipo, sem repetir. Então não queremos que isso se repita, então a posição deve ser relativa. Então, se você quiser verificar as posições, então temos duas posições em ordem. CSS, temos posição relativa e absoluta. Então vamos dar uma posição. Então você vê, agora tudo funciona bem. Mas agora precisamos colocar mais à esquerda porque não parece melhor. Então vamos colocar à esquerda em torno de 350 pixels e vamos colocar no topo, então vamos colocar no topo por 15 pixels. Então, agora vamos verificar. Então vamos verificar se alguma coisa foi mudada. Então você vê, agora o título se moveu em torno de 350 pixels para a esquerda e 15 pixels para o topo. Então você vê o design da cor, ele não parece melhor, então precisamos remover esse link. Então, a fim de remover o link, você pode apenas digitar imposto, e assim o banco texano irá remover esse link. Então vamos colocar em torno de menores 5000 pixels, a fim de remover esse link. Então, vamos atualizar mais uma vez e verificar para que tudo agora funcione perfeitamente. Então agora você vê, nós temos o design de cor do título que colocamos em nossas armas. Então agora vamos continuar em vazamentos de design ou navegação em ordem próximo tutorial. 6. Lista de navegação de design: Então você vê, este é o seu site. Então vamos colocar a maçã aqui e depois colocamos o título. Então você vê, agora nós vamos projetar passo a passo. Mas você vê que essas coisas ocasionalmente não são tão boas o suficiente. Então vamos projetar esta navegação para o leste. Então você vê, nós demos Heidi C i. D. Menu. Então, vamos primeiro projetar o ul muitos 90. Então você realmente rima só você. Bem, então lemos o menu. Então vamos dar a Heidi fora do menu, e então vamos projetar passo a passo lentamente. Então, o menu deve ser exemplo. Vamos dar um exemplo de ódio. O ódio deve ser em torno dos 35 pixels, e então a margem viu a margem deve ser um zero. E o estofamento também deve ser como zero. Então, zero pixels. Então, depois disto. Então, vamos dar fundo, lembra? Então temos que colocar o você onde eu Então nós colocamos o Huron. Então não estamos projetando. Então nós colocamos este grande menu aqui, então lembre-se, grande menu. Então vamos colocar este aqui, então aqui está a firma fora deste grande menu? Então, vamos verificar o meu grande menu. Então é presente também de novo. Então nós estamos indo para o menu BGN pé, esse presente. Então você vê, agora vamos fazer, como exemplo, repetir como X, então ele vai repetir várias vezes. Então colocamos, tipo, menos 25 picaretas por aí. Então este é o pano de fundo. Então vamos economizar mais uma vez e vamos atualizar. Então você vê, parece que algo mudou, então esta é a navegação leste que estamos colocando. Então temos uma reputação. Mas agora o site Malisse, precisamos colocar como aqui, como na linha. Portanto, precisamos também colocar eso para dar. Então, você vê essa ligação? Isso pára aqui, então precisamos remover o exemplo que precisamos remover o l um tipo menos Seles, não menos tipo. Então menos estilo exemplo Nós colocaríamos tipo de estilo provável, então nós colocaríamos como non. E agora vamos dizer, você vê, então agora tudo funciona perfeitamente. Então, onde não há número entre no mínimo aqui. Então, agora, depois disso nós vamos projetar este mínimo, então nós vamos te dar bem, então você bem, então menu e Lee, eu pelo menos aqui. Então isso foi projetado agora. Então agora vamos abrir os colchetes. Então, neste, vamos flutuar à esquerda. Lembre-se, se você ver piso deixou, então o texto deve ser como a linha de texto central da linha. Portanto, o imposto deve ser um centro, e vamos apenas ver o que foi alterado. Então, veja, a linha foi alterada. Então, no topo, então exemplo, se removermos este tipo agora, então você vê, vamos remover este não. Veja, uma vez que haja alguns pontos que eles mostrarão aqui. Isto é o que menos tipo nenhum faz. Então ele vai fazer como não é assim. Agora vamos projetar o link. Então, você vê, nós precisamos projetar este hum. Então nós vamos colocar você bem barra menu Lee, pelo menos eu. E depois os links. Então, o que vamos fazer com links que vamos projetar tão passo a passo lentamente. Então vamos dar o com. Então vamos primeiro dar um com eso deve ser em torno de 107 pixels. Então, eu só como eu decidi. E então a linha de ódio deve ser exemplo como 25 pixels, 25 pixels. Vamos colocar um tamanho divertido Então também o tamanho divertido deve ser 12 horas Então este é o tamanho divertido que eu escolhi E então o peso da frente deve ser um exemplo como negrito Então o peso da frente deve ser negrito Então vamos colocar o peso da frente como espaçamento entre letras Mais uma vez, então vamos colocar um espaçamento entre letras Então este espaçamento deve ser em torno de dois pixels Então vamos verificar mais uma vez se algo foi alterado. Então você vê, essas coisas foram mudadas para esta forma de passos Então, depois disso, nós vamos dar uma cor Então esta é uma cor que nós vamos dar Então esta é a cor que eu mais gostaria de dar Então nós colocamos assim e exibir como um bloco Então nos sentamos bloco exibido. Então, a fim de não remover a decoração fiscal dizer ver que o link Então nós vemos Nós temos este lado aqui, então nós precisamos remover este lado para que possamos remover por texto, decoração, decoração, e então nós vamos colocar como, um longo para que vamos verificar mais uma vez se algo foi alterado em nossos textos, eles vêem agora isso funciona perfeitamente, mas o que precisamos para fazê-lo fronteira apoiado. Então, uma fronteira deve ser tão a fronteira direita na fronteira, Lee a fronteira. E certo. Assim, a borda direita deve ser um surround para pixel e sólido. Então, a cor que eu vou dar lá. Então esta é a cor que eu gosto. Então você vê, a fronteira foi mudada em pouco, certo? Então esta é a fronteira que nos deram. Então, o que precisamos fazer. Então, em ordem, precisamos de exemplo, se escrevermos com nossas bocas. Então, exemplo, precisamos colocar como sobre SoHo sobre significa menu. Então vamos colocar pelo menos um mais. Então, se colocarmos nossas bocas lá, a linha será mudada. Então vamos colocar o fundo do Khobar. Então o fundo do “over “deve ser como este. Então você vê um grande menu. Então nós vamos colocar este grande menu como um presente tão grande que vamos colocar Big and Land Menu pensamento presente. Então vamos repetir X. Então vamos repetir como várias vezes e, em seguida, vamos colocar um zero como margens na vertical em ambos os lados. Então, vamos verificar mais uma vez se algo foi alterado. Então você vê, agora tudo funciona perfeitamente. Mas você vê algo que não funciona aqui. Então precisamos colocar, tipo, repetir, menu grande. Você estava fora, então repita táticas. Sim. Grande presente de pensamento do menu. Então este é o Ural que deve ser mudado em ordem. Quando colocarmos as montanhas aqui , deve mudar. Normalmente, não muda algo no fundo. Você estava fora. Grande presente. Repita como um menu grande do X. Presente escuro. Então vamos verificar mais uma vez. Grande presente de pensamento do menu. Baghram. Você tem muitos libertados eles sobre. Então isso é apenas como sublinhado deve ser provavelmente Então vamos verificar mais uma vez, movê-lo e você vê se colocamos o mouse aqui para que tudo mudou perfeitamente. Então agora vamos projetar essas duas partes aqui e tudo mais, então é perfeitamente assim. Obrigado. Sendo a próxima palestra que vamos projetar ou próxima 7. Design de contêineres2 (H2): Sei que nós projetamos Então estamos navegando menos. Então você vê, nós temos o título de um belo Oriente Navegacional. Então precisamos projetar os artigos. Mas primeiro, precisamos remover este artigo. Então vamos mudar o Santic, então vamos colocar mais artigos. Então, para fazer isso, você pode ir para este ipsum HTML. Então aqui você pode encontrar alguns artigos. Então Laura Ipsum para que você possa tirar parágrafos longos. Você pode tomar muitos parágrafos menos assim o que você precisa para o seu site. Mas agora eu não vou copiar desse site, então eu tenho meus próprios artigos aqui, então eu vou postar, então eu iria remover este artigo então eu vou postar todos esses artigos aqui. Então eu tenho post em HD também. Então você vê a idade para um três. Então eu tenho alguns parágrafos aqui. Então agora vamos atualizar e você vê, agora temos parágrafos mawr. Temos artigos mawr, então vamos projetar passo a passo. Então nós vamos projetar esta idade dois e, em seguida, os três parágrafos de idade assim e, em seguida, temos também você vê, então nós temos o rodapé aqui e nós também temos voltar para a página principal. Então temos uma pequena ligação aqui. Então, agora que temos o título, então vamos. Você vê, todos os artigos são tão neste dia, se eu d recipiente para então agora nós vamos projetar este dividido contendo dois. Então nós separamos ou página no início. Então agora precisamos escrever. Então você vê o recipiente idéias para então precisamos escrever recipiente para, e então nós abrimos os colchetes. Então o que vamos fazer aqui, é então vamos colocar um carinho, então estamos dando tapinhas deve estar por perto. Então, zero da esquerda vendeu 25 pixels da direita, então zero da parte inferior e 100 pixels do topo. Então colocamos assim. Então agora vamos colocar esta página grande para que tenhamos tirado do site. Então, a fim de fazer isso, podemos apenas ir e digitar fundo. Então, então vamos digitar fundo, então colocamos como você é l e então o nome fora da foto. Então o nome é PG sublinhado página ponto Jeff, então não vamos repetir. Então vamos colocar, tipo, tipo, sem repetição e então vamos dar algumas carícias como 15 pixels da direita e 15 pixels da parte inferior. Então agora vamos apenas refrescar e ver se tudo foi perfeitamente tão tapinhas deve ter dois pontos aqui. Então vamos ver se está tudo bem agora. Sim, você está fora. Então, vamos refrescar-nos. E você vê, nós temos agora este design de cores no lado do laboratório. Então, com este passado que o pusemos aqui. Então o que precisamos fazer a seguir é que precisamos projetar esses artigos. Então, você vê, não parece legal, então artigos de título. Então vamos mudar. Então, para fazer isso, precisamos digitar as idéias. Então, o nome do I D. E então nós vamos digitar como idade, também. Então nós vamos digitar Dave hashtag contendo dois, e então nós temos que especificar o que vamos projetar. Então vamos projetar a idade também. Então abrimos os colchetes e, a fim de fazer isso, Então, a fim de fazer design. Então vamos primeiro dar um carinho. Então, o preenchimento, vamos dar uma rebatida do lado esquerdo em torno de 25 pixels, e então vamos dar uma linha oito. Então o ódio de linha deve ser tão provavelmente em torno de 25 pixels. É matéria. Então vamos verificar. Então o título mudou. Você vê, ele mudou 25 pixels a partir da esquerda agora, então nós vamos dar um tamanho de fundo, então o tamanho divertido deve ser 1,4 yem. Então este é um bom tamanho para o seu artigo City. Veja, o artigo do tamanho mudou. E então agora estamos indo. Então você vê, nós temos esta pequena maçã aqui, então nós vamos colocar esta pequena maçã apenas e riu de quatro artigos. Então escrevemos fundo, como sempre. Então, ou você está agora, então nós escrevemos Little sublinhado Apple, aquele Gyp. Então, sim, este é o tipo antes de um pequeno lapidar aqui. Então, nós vamos? Não. Ou nós vamos. Não, não. Repito, não temos repetição, não repetição Então, e então vamos dar à esquerda com ele para colocá-lo à esquerda. fundo. Então, pequena maçã de fundo. Não há repetição à esquerda. Mas, hum, então nós vamos dar um bom grupo de cores, então nós vamos obter títulos de turnê de cores. Então colocamos hashtag e escrevemos nove b dois. Esta é uma cor bonita que vamos conseguir. Então vamos colocar uma borda de baixo. Então, a fim de fazer isso, nós apenas temos borda inferior um pixels sólido, e nós vamos dar a mesma cor nove b dois. Então vamos verificar se alguma coisa foi mudada. Então você vê, agora é parece melhor. Temos a pequena maçã da esquerda e parece melhor. Então, na próxima palestra, vamos projetar esses outros parágrafos. 8. Vamos desenhar, além de definir os parágrafos e cabeçalho (p, h3): Então agora que projetamos, então temos o título aqui. Tão bom intitulado um bom Oriente Navegacional. Então nós projetamos a idade para Então, e agora? Nós estamos indo. Precisamos que veja os outros parágrafos? Temos aqui os três anos de idade. Então, como, veja, este é o parágrafo de três anos. Então nós vamos projetá-lo um pouco, então, a fim de projetá-lo, então nós precisávamos apenas digitar os surdos, então e então nós vamos digitar como recipiente. Então recipiente, e então nós vamos dar h três. Então, abrimos os colchetes e o que vamos projetar. Então, primeiro, vamos dar uma margem esquerda. Então vamos dar cerca de 15 pixels no Ben, o preenchimento da esquerda em torno de cinco pixels. Então vamos verificar se algo mudou. Então, você vê, o parágrafo moveu 15 pixels da esquerda. Então agora vamos dar uma borda de baixo. Então fica melhor se conseguirmos uma fronteira. Então a borda deve ser um pixel Sally. Então nós vamos dar uma cor assim, como, 92. Então vamos verificar mais uma vez. Então você vê, nós temos um pixel da borda, mas então nós vamos dar também uma borda da esquerda. Então, quando eu apoiar Então nós vamos chegar em torno de três pixels sólidos. Então nós temos Vamos dar a mesma cor como nove b dois e, em seguida, vamos dar uma cor . Então, como nove B dois, também para a cor do parágrafo deve ser non be também. Então você vê, agora temos uma borda da esquerda e borda do fundo. Então parece massa agora. Então, o que vamos fazer agora? Então precisamos projetar um pouco os parágrafos. Então vamos mudar o caminho da linha. Então, parece melhor se mudarmos ou justificarmos ou texto. Então, a fim de fazer isso, vamos no tipo Dave qualquer recipiente para e, em seguida, especificamos os parágrafos ensaboado. Então vamos para a linha de impostos. Então nós temos, tipo, linha do Texas. Então vamos colocá-lo no centro, então o parágrafo deve ou provavelmente meu devemos justificá-lo . É melhor então taxar a linha, justificar e, em seguida, vamos dar texto Invent. Então o texano que dois deve ser como Yem. E depois do texano, então vamos dar uma linha. Espere, então a fila espera. Ele vai mudar o Collins para que ele vai dar uma linha caminho on-line. Odeio 1,7 e. M. Então vamos verificar mais uma vez se algo mudou. Então você vê, o imposto foi justificado na linha mudou para 1,7 ano. Então agora parece melhor. Então precisamos do que precisamos fazer. Então você vê, nós temos este pequeno parágrafo aqui, então é como um link. Então vamos projetar um pouco, então porque não parece melhor. Então precisamos colocar i d Então div hashtag gun jornada para e, em seguida, especificar um tão como ling porque era um link que você viu Parágrafo é um link, então vamos dar uma cor. Então a cor que vamos dar oito um zero. Então esta é uma cor bonita que vamos dar. Então você vê agora a cor fora do link mudou, mas é bom se damos também um mais. Então, uma vez que colocamos os montes, é melhor se a cor fora do link mudar. Então, é melhor se mudou. Por isso, também precisamos juntos. Então vamos digitar como Dave. Então vamos parar recipiente hashtag eletivo também. Então nós damos como um e, em seguida, o todo sobre o sobre o que nós vamos dar Então vamos direita a cor. Então, nós gostamos de cor. Ok. Nós íamos dar esta bela cor então hashtag nove b dois Então vamos salvá-lo E vamos verificar se algo mudou Sim, Não, Não, vemos uma vez que colocamos nossas bocas a cor das cadeias de ligação Então agora parece melhor. Estamos quase no final de quatro site Então, no próximo tutorial, precisamos projetar rodapé em Então vamos terminar o lado Então juntos 9. RODAPÉ - Fim do curso: Então, temos um pequeno trabalho para fazer isso, a fim de terminar ou site. Então temos a comida. Então você vê, nós temos um eu d e o nome da idéia. É o Rodapé. Então vamos projetar este parágrafo e p hashtag, então vamos digitar rodapé. Então o que vamos fazer, vamos dar uma margem. Então a margem do pé ou deve ser zero Então não vamos dar marchando o estofamento também. Então, o preenchimento da direita, então vamos dar um carinho da direita em torno de 10 pixels e então vamos dar uma linha A Então o ódio da linha deve ser tão 30 pixels. Então, 30 pixels, é o suficiente. Então, a linha de impostos. Então vamos colocar para a direita para que seja melhor. Então colocamos o texto na linha à direita, então o rodapé, vamos colocar no escritor para Paige. E vamos mudar a cor do rodapé. Então, a cor do mais vamos mudar para oito. Uma soma zero. Vamos verificar e fazer uma atualização. Então você vê agora o rodapé foi alterado e está no lado esquerdo ou site tão projetado . Por isso coloquei o meu nome. Então vamos mudar o texto para que possamos mudar o texto. Eu vou escrever assim design sobre os direitos autorais. Então é assim que funciona tão bem. Espaço para digitar como casal escreve, vamos atualizá-lo e você vê direitos autorais 2000 e 16. Então isso é Ah, parece melhor. Então agora estamos no final e temos terminado ou site. Então, para que você possa mudar esta lista. Você pode colocar sobre contato para que você possa colocar o que quiser, você pode colocar mesmo uso, então vamos colocar apenas vai mudar o nome. Assim que atualizarmos você vê, temos sobre Paige para que você possa criar links e, em seguida, você pode escrever pessoas diretas para o seu contato ou conteúdo da turnê. O que? Todos os postes. Então você vê agora vamos remover este estilo para que possamos simplesmente colocá-lo em uma pasta separada ou em um lugar separado. Então não é bom deixá-lo aqui, então vamos projetá-lo melhor. Então, a fim de fazer isso, vamos criar uma nova guia. Então, vamos basear ou C s um estilo aqui, então e então vamos dar um nome como estilo dot CSS. Então, o CSS significa CASC no estilo. Então você vê, a cor fora para o estilo mudou. Então agora não temos nada aqui. Assim que atualizarmos o exemplo se atualizarmos sua página, você verá que tudo está de volta. Guarde este esqueleto. Então agora precisamos encontrar o link, a fim de vincular o CSS com quantidade HD. Legal. Então você pode apenas escrever link CSS html. Então temos o link tag. Então, vamos copiar este alongar e vamos colá-lo em eram website. Então você vê, nós vamos pisá-lo logo abaixo do título para que possamos colocá-lo acima do título. Então é melhor estar na cabeça. Então temos que mudar o nome e agora você vê que tudo funciona bem. Então o nome foi desenhado, ele que avaliou. Então isso é assistir. E foi um prazer criar este site para você