Transcrições
1. Aprenda a codificar visão de sites básicos: Bem-vindo à codificação de sites básicos com HTML e CSS para crianças e iniciantes. Este curso é para qualquer criança ou iniciante sem experiência de codificação anterior. Se você pode escrever uma frase completa, então você pode aprender isso. HTML e CSS é usado por todos os sites. Em cada vídeo, vou abordar um tópico diferente, e ao longo do caminho haverá alguns questionários e desafios de codificação para praticar o que você aprende até o final deste curso terá construído este exemplo. Sítio Web. Meu nome é Kevin Kennedy, e eu sou o criador do design de produto on-line ponto com. Convido você a inscrever o dia para o acesso vitalício a esses vídeos e eu vou vê-lo e a primeira lição.
2. Requisitos do curso: Eu todos e bem-vindo aos requisitos do curso. Há apenas algumas coisas rápidas que precisamos rever antes de começarmos. A primeira coisa é, você precisa se certificar de que você tem navegador da Web atualizado. Eu recomendo obter o Google Chrome, que você pode baixar gratuitamente no link em sua tela. Uma vez que você tem cromo ou seu navegador web desejado puxado para cima, vamos ir em frente e digite J s sido ponto com agora, Depois que ele carrega, você vai ver que nós realmente já temos algum código HTML no lado esquerdo aqui. Então, o que queremos fazer é selecionar tudo e pressionar a tecla delete. Depois disso, vamos em frente e digite ou nome no lado esquerdo e certifique-se de que ele realmente sai no lado direito. Agora, se tudo parece estar funcionando bem e seu nome aparecer no lado direito, então estamos prontos e prontos para ir. Vejo vocês na próxima aula ou vamos mergulhar na história do HTML
3. Visão geral em HTML: todos e bem-vindos à visão geral HTML. Computadores usavam idiomas como as pessoas. Na verdade, existem mais de 200 linguagens de programação por aí. Então, o que é HTML? Bem, HTML significa linguagem de marcação de hipertexto. HTML é a forma como os computadores se comunicam com a Internet. Hypertext é o processo de vincular objetos uns aos outros. Então, quando um objeto é clicado, levado para o próximo objeto. Agora vamos dar uma olhada em como o email hte é realmente construído. HTML consistem em um número de tags diferentes, que vamos abordar neste curso. A maioria das etiquetas tem um começo e um imposto de fechamento, então agora você pode estar se perguntando quem realmente vem com essas coisas. Bem, HTML é realmente criado pelo W três C ou um grupo de pessoas que trabalham juntas para desenvolver padrões para a Web. Agora que você sabe o que HTML realmente significa, vamos fazer um teste muito curto e então eu vou ver vocês na próxima lição onde
vamos começar a escrever a estrutura HTML básica
4. Estrutura de HTML básico: Todo mundo. E bem-vindo de volta neste curso, vamos cobrir a estrutura HTML básica que é usada por cada site. Então, antes de
começarmos, queremos ter certeza de que temos apenas as coisas necessárias abertas e Jaspin. Então, se você vir aqui, se você tiver qualquer uma dessas outras guias abertas, queremos fechá-las. Então tudo o que deveríamos ter selecionado é o botão HTML no botão de saída, e então vamos em frente e excluir nosso nome. Então a primeira coisa que temos que fazer é dizer ao dedo do computador realmente ler HTML. Então vamos começar digitando o símbolo menos areia seguido por um ponto de exclamação. E nós vamos digitar a palavra doc type em maiúsculas, seguido por um espaço em HTML e minúsculas, seguido pelo símbolo raladores Dan. Então isso é algo que é necessário no topo de cada documento HTML. Então, agora que dissemos ao computador para ler HTML, precisamos dizer onde ele vai ler o HTML. Então, para fazer isso, vamos criar uma tag que apenas tem a palavra HTML nele. Então vamos começar criando nossa etiqueta de abertura e, em seguida, usando o
símbolo Ford Slash . Nós vamos criar uma tag de fechamento e eu vou ir em frente e apenas retornar isso para que ele esteja em uma linha separada, então a próxima tag que queremos escrever será a aderência da cabeça. Agora a etiqueta de cabeça vai ser substituído. Tudo o que não queremos realmente exibir em nosso site. Mas queremos que nosso navegador saiba sobre isso. Então vamos em frente e retornar isso para outra linha e dentro da tag principal, vamos criar a tag título. Agora. A tag título vai ser foram substituídos o título do nosso site. Então, para este exemplo, vamos criar um site para o chip de chocolate robusto Cookie Dough Co. Então vamos em frente e aperte isso na etiqueta de título. Agora, se eu diminuir o zoom, você vai notar que o título da nossa empresa não está realmente sendo exibido na página de saída e isso é realmente uma coisa boa. Isso é o que queremos porque a tag título é realmente destinado a exibir o título do seu site aqui na guia do navegador da Web. Então, só queremos olhar aqui para cima e ter certeza de que tudo está correto. Agora vou voltar ao nosso código HTML que vamos colocar um retorno depois da
etiqueta principal . Agora, vamos criar a etiqueta do corpo. Agora, a tag body é onde todo o código HTML vai ser colocado que nós realmente queremos
exibir em nosso site agora, dentro da tag body. Também queremos criar a tag de rodapé. Agora, a etiqueta de rodapé é a tag que vamos usar para colocar todas as coisas que
queremos estar na parte inferior do nosso site ou do rodapé. Agora temos a estrutura HTML básica que precisará usar para criar qualquer site. Mas antes de passarmos para a próxima lição, quero mostrar-vos mais uma coisa rápida. Agora, se você notar aqui quando eu apagar a etiqueta do corpo, o problema Mel realmente ficou vermelho. Agora que já vimos o problema, Mel ficando vermelho. Isso realmente significa que não temos ar em algum lugar dentro do nosso código HTML. Normalmente, Normalmente, isso acontece por causa de um erro de digitação ou porque escrevemos incorretamente ou nos esquecemos de colocar em nossa tag final . Então, se você notar aqui quando eu digitar o corpo de volta no sinal de ar vermelho realmente vai embora e tudo voltar ao normal, isso é tudo para esta lição, e eu vou ver vocês no próximo vídeo.
5. tags de Nav: Todo mundo. E bem-vindo de volta. E esta lição rápida vamos falar sobre etiquetas de valete. As tags valete representam a navegação principal da página. Agora, tudo o que temos que fazer é ir em frente e bater de volta atrás de corpo, e nós vamos em frente e entrar no valete. Agora, eventualmente, nós vamos realmente colocar links insider tag de navegação. Mas, por enquanto, vamos deixar isso em paz. Vamos seguir em frente e criar o primeiro texto na página dela. Vejo vocês e nossa próxima lição.
6. Marcação de H1 para H6: todos e bem-vindos de volta. E esta lição vamos cobrir as tags de título, sem tags de cabeçalho ou como criamos manchetes semelhantes a jornais ou provavelmente sites que você já viu na Internet. Assim, a tag título é definida usando a letra H e, em seguida, um número um a seis. Agora, se usarmos H, um vai criar o maior, indo todo o caminho para o número seis, que vai criar o menor título. Então vamos em frente e escrever isso e dar uma olhada no que ele faz. Então, se apertarmos retornar após a tag de navegação, queremos digitar cada um seguido pelo fechamento H uma tag. Agora vamos em frente e realmente escrever o nome da nossa empresa dentro da etiqueta H one. Então, se você notar aqui no lado direito, deve
ser por fora colocar o nome que acabamos de escrever. Então vamos em frente e escrever um exemplo a cada seis tag para mostrar a diferença de tamanho. Então, se você notar aqui, H six tag é muito menor que H uma tag, então vamos fazer mais um exemplo, e vamos em frente e escrever uma tag H quatro para ver o quão grande essa é. Então, se você notar aqui, a etiqueta de quatro anos está entre o tamanho do H um e os seis anos. Exatamente o que esperávamos. Agora, ao escrever nosso documento HTML, podemos usar as tags H. Estamos dirigindo etiquetas o quanto quisermos. Mas a chave para lembrar é que queremos usar as etiquetas H um para nossos itens mais importantes e as etiquetas H seis para os itens menos importantes. Então, agora que vimos a diferença que as tags H podem criar, vamos em frente e excluir esses dois exemplos. E então nós vamos realmente criar quatro títulos diferentes para o nosso site de exemplo. Então vamos em frente e criar a tag idade três que vamos destacá-la. Vamos copiar e colar mais três vezes. Então vamos voltar para o 1º 1 recriado vamos começar a digitar todos os
ingredientes naturais, em seguida, um 2º 1 Nós vamos digitar as instruções do que o 3º 1 Nós vamos digitar informações
nutricionais e, em seguida, no 4º 1 nós estamos vai criar quando massa de biscoito livre para a vida. Isso é tudo para esta lição. Obrigado por assistir, e vejo vocês na próxima aula.
7. Marcas de parágrafos: Todo mundo. Então bem-vindo de volta. Neste episódio, vamos cobrir a tag de parágrafo para definir a tag de parágrafo. Tudo o que temos que usar é a letra P. E queremos usar a tag de parágrafo para cada parágrafo individual ou conteúdo de corpo que
criamos . Então vamos em frente e adicionar Ah, slogan no nosso site. Então, sob a tag H um, vamos apertar o botão de retorno, e então vamos criar a tag P, seguida da tag de fechamento lá, e vamos ir em frente e digitar o slogan da nossa empresa. Então vamos digitar a melhor massa de biscoito de chocolate grosso do mundo. E sabes que mais? Vamos em frente e colocar isso entre aspas. Já que é o nosso slogan. Agora, ao escrever nosso código HTML, queremos lembrar de usar a tag de parágrafo cada vez que queremos dividir ou criar diferentes seções de conteúdo. E toda vez que fizermos isso, o navegador vai automaticamente marcar espaço entre parágrafos. Então, vou copiar esta linha aqui e colá-la algumas vezes. Apenas um exemplo de show. Então você pode ver no lado direito aqui há realmente espaço entre os parágrafos. Enquanto que se eu copiasse o texto dentro da linha, ele vai continuar adicionando ao parágrafo. Agora, vou ir em frente e desfazer isso. Na verdade, vamos em frente e destacar tudo isso e excluí-lo se você seguiu e vamos
descer até o pé ou tag aqui e vamos destacar entre nossas tags que retornar, eles iriam criar a tag de parágrafo novamente. E agora vamos escrever uma cópia do corpo dentro do nosso pé ou etiqueta. Então, queremos colocar o símbolo de direitos autorais lá. Então vamos em frente e abrir uma nova guia com o Google e vamos apenas procurar símbolo de direitos autorais e então nós vamos realmente destacar isso e apenas copiá-lo diretamente para o nosso código. E depois vamos preencher mais informações sobre a nossa empresa aqui. Então, se olharmos para a nossa página web aqui no lado direito, você pode ver que estamos começando a obter as seções principais do nosso site agora mais tarde
neste curso, vamos realmente começar a estilizar e fazer mais separação de cada seção cor e algumas outras coisas. Mas, por enquanto, vamos fazer um rápido desafio de codificação para praticar o que aprendemos
até agora. Então, vejo vocês na próxima aula.
8. Como criar uma quebra de linha: Agora. Na lição anterior, eu abordei como você pode criar parágrafos diferentes simplesmente criando tags de parágrafo MAWR. Mas em alguns cenários, podemos querer que o texto da mesma linha ou parágrafo esteja em uma linha diferente. Então, para fazer isso, nós só temos que criar a tag de quebra de linha ou B R. E a tag de quebra de linha é uma das poucas tags em HTML que não tem uma tag de fechamento. Então tudo o que vamos fazer é depois da palavra cookie aqui e do nosso título. Vamos colocar BR e você vai notar aqui no lado direito que isso realmente empurrou as palavras Doe Co para a próxima linha. Agora poderíamos ter criado exatamente esse mesmo efeito colocando um H uma tag abaixo e criando as palavras Doe Co. Dentro disso. Mas há alguns benefícios que obtemos ao usar para ser nossa tag. Por um lado, usar a tag BR é muito melhor porque cria uma quebra no conteúdo sem dizer ao computador que é um conteúdo diferente. Então o que eu quero dizer é, se nós realmente tivéssemos criado duas tags diferentes H um ou tags de parágrafo, então nosso computador vai interpretar o código que esses textos não são relevantes ou eles não pertencem um ao outro. Mas em nosso cenário, eles pertencem juntos e realmente uma das outras principais razões que a tag BR vem a calhar é se decidirmos mais tarde que não queremos ter uma linha quebrar seu enfraquecimento. Basta excluir a tag BR sem ter que se preocupar em excluir outras tags ou inteirar outra linha de código. Então isso é tudo para esta lição e a próxima lição vamos abordar como adicionar links ao nosso site. Vejo vocês no próximo vídeo.
9. Como adicionar um link: todos e bem-vindos à adição de um vazamento nesta seção. Vamos adicionar links à nossa seção de navegação. Então vamos em frente e começar batendo. Retorne entre as tags de navegação agora para criar uma tag de link. Vamos usar a letra A. Então vamos apertar isso. E então podemos ir em frente e colocar o título do link dentro da tag link. Agora, se você olhar para aqui no lado da saída, você vai notar que o texto não parece ser diferente de todo o outro texto em uma página. E isso é porque precisamos colocar o link seu l dentro da tag link. Então, depois do primeiro a, vamos colocar um espaço e, em seguida, aperte um treff e, em seguida, é igual, seguido de citações. Agora H ref significa referência de hipertexto, o
que significa que qualquer link que colocamos dentro dessas aspas é onde nosso link nos
levará . Então agora, se olharmos para o lado direito vai notar que nosso mouse muda porque nós realmente temos um link aqui. Agora vamos em frente e clicar nele e ver o que acontece. Agora tudo parece desaparecer. Bem, isso é porque nós não temos um U R L dentro do nosso link tag dedo realmente nos levar para. Então, se seguirmos em frente e clicarmos na tag de saída duas vezes, tudo deve reaparecer. Agora há algumas coisas diferentes que podemos colocar como links dentro de nosso treff. Uma das coisas que podemos fazer é colocar o símbolo hashtag como um espaço reservado, o que significa que quando você clicar no link e nada acontecerá. Então agora vamos em frente e clicar nisso, e percebemos que nada acontece. E então, em alguns cenários como este já estavam na página inicial, isso seria um bom uso dele, então ninguém vai a lugar nenhum. Agora. Vamos em frente e copiar todo o nosso link aqui mais três vezes, e então vamos preencher o resto da nossa navegação. Então o 2º 1 vamos escrever sobre o 3º 1 vamos escrever contato e o quarto e último vamos escrever compra. Então, agora, se
olharmos, temos todos esses links diferentes aqui e eles são clicáveis, mas não temos nos levado a lugar algum agora porque este é um curso para iniciantes. Eu não vou muito longe em todas as coisas diferentes que podemos nos conectar. E neste curso não vamos realmente criar quatro páginas diferentes e tê-las todas ligadas. Mas quero mostrar-vos umas coisas mais rápidas que enfraquecem as ligações. Então a primeira coisa que podemos fazer é criar um link para um
site externo ou diferente . Então, se acertarmos o espaço após o H ref nas aspas aqui, vamos em frente e digite Target igual a e, em seguida, sublinhar Blank. Agora queremos ir em frente e ir dentro das citações de jangada Rh. Vamos digitar http Colin para uma barra Ford Slash Google Dot com. Então, a razão pela qual colocamos este alvo aqui com as palavras sublinhado em branco entre aspas é que vai dizer ao navegador para abrir uma nova aba quando clicarmos no link. Então vamos em frente e clique na guia sobre agora, e ele deve abrir um novo link e nos levar para o Google, e parece que tudo funcionou. Agora vamos em frente e fechar essa tag do Google e, em seguida, vamos excluir tudo isso . Recrie o nosso link de hash tag lá, para que ele não nos leve a lugar nenhum agora. Uma outra coisa que também podemos vincular é que podemos colocar links para PDFs ou quaisquer outros documentos que tenhamos hospedado em nosso site. Mas para este curso, não
vamos fazer nada com nossos links. Vamos usar o hash tag como espaço reservado. Na próxima lição, vou abordar como adicionar imagem ao nosso site. Vejo vocês no próximo vídeo.
10. Adicionar uma imagem: todos e bem-vindos a adicionar uma imagem nesta lição. Vamos adicionar a imagem de um biscoito gigante de
chocolate bem debaixo do nosso slogan. Então, para começar, vamos apertar retorno após a tag p do nosso slogan, e então para criar a tag de imagem vamos usar I M G, que é uma abreviação para a palavra imagem. Então vamos em frente e digitar isso agora. Uma coisa a notar é que a tag de imagem é exatamente como a BR ou tag de quebra de linha que fizemos aqui
em cima. Ele não requer uma tag de fechamento. Na verdade, se colocarmos uma etiqueta de fechamento, isso só causará problemas no futuro. Então a próxima coisa que precisamos fazer é colocar a fonte de nossa imagem dentro da tag de imagem. Então, se colocarmos um espaço após a letra G, vamos digitar SRC, que é uma abreviatura para fonte, seguido pelo sinal de igual e, em seguida, citações. Agora tudo o que temos a fazer é colar a imagem u R L para R dentro dessas citações. Então vamos em frente e abrir uma nova guia dentro do nosso navegador e nós vamos para google dot com imagens de barra e nós estamos indo para pesquisar cookie e, em seguida, imagem PNG como uma palavra. E se você rolar para baixo, vamos ver 1234 linhas. Encontrei esta grande imagem bem aqui. Então, se clicarmos sobre isso e clicar em ver imagem, vamos selecionar o seu L e, em seguida, pressionar o comando, ver ou controlar, ver para copiá-lo. Caso contrário, você pode clicar com o botão direito e clicar em copiar. Então vamos voltar ao nosso código e, em seguida, com as aspas, vamos
colá-lo . Então agora devemos ver no lado direito que temos esta imagem gigantesca de um cookie agora em nosso site. Agora o cookie parece assumir todo o nosso site e é um pouco grande demais . Então o que queremos fazer é definir a altura e a largura deste tamanho de imagem. Então, depois de nossas aspas, vamos em frente e digite altura igual e, em seguida, aspas. E então vamos em frente e digite 250 p x, que é abreviação de pixels. Então, agora, se você olhar para o nosso biscoito, ele é muito menor E se você olhar, nós podemos realmente mudar a altura apenas mudando a quantidade de pixels aqui, para que possamos torná-lo realmente pequeno ou muito grande. Agora também podemos definir o com assim como nós definimos a altura. Mas uma coisa que queremos notar é que se definirmos o com para algo diferente da proporção original da imagem, ela vai esticá-la de forma engraçada. Então o que podemos fazer é apenas digitar Otto, e isso irá garantir que a proporção da imagem permaneça em seu estado original. Agora só há mais uma coisa que precisamos cobrir com a imagem. Sempre que você usar a tag de imagem, é necessário digitar atributos antigos. Então, para fazer isso, vamos digitar um lt o símbolo igual e, em seguida, aspas. Agora os atributos altar é onde colocamos uma descrição da imagem que pode ser exibida se o site tiver algum problema exibindo a imagem. Então vamos em frente e digite uma boa descrição do nosso cookie agora para testar isso e mostrar um exemplo para vocês, eu vou excluir alguns caracteres neste, seu l e você deve notar no lado direito que são todos atributos é exibido aqui. Então, se você olhar aqui, isso é o que será exibido se houver problemas com o carregamento da imagem. O All Attributes também é usado para pessoas com deficiência que você tela leitores que ler o código do seu site se eles são deficientes visuais. Então vamos em frente e desfazer isso. Se quebrarmos o link e nos certificarmos de que nosso cookie aparece na página direita próxima lição, mostrarei como criar uma imagem que acesse um vazamento. Vejo vocês no próximo vídeo.
11. Como criar uma imagem com um link: Todos bem-vindos de volta. E esta lição vamos transformar nossa imagem de cookie aqui em um link clicável. Então, para começar, vamos colocar nosso cursor no final da tag parágrafo foram substituídos nosso slogan e pressione a tecla de
retorno. Agora tudo o que temos que fazer para transformar uma imagem em um link é embrulhado a tag imagem dentro da nossa
tag link . Então vamos em frente e criar a tag A de abertura, e então vamos clicar antes da tag H três e criar estão fechando tag link agora para tornar isso um pouco mais fácil para nós ler mais tarde, vamos clicar na frente da tag imagem e apertar a aba chave. Portanto, há um pouco de diferença aqui agora, dentro da nossa primeira tag, precisamos colocar um espaço seguido pelo H ref igual a Onde colocará a fonte do nosso link ou onde queremos que o link envie o usuário. Então, para esse cenário, queremos um link de volta para o site original de onde obtivemos essa imagem de cookie. Então, se voltarmos para a pesquisa de imagens do Google e acertarmos a página de visita, vamos copiar isto, Earl e colocar isso junto ao árbitro H. Assim como antes queremos digitar, alvo é igual e, em seguida, dentro das citações sublinhado em branco porque queremos que os usuários não tenham que se preocupar em retornar ao nosso site, e isso irá criar automaticamente uma nova guia no navegador sempre que eles clicam nele. Então vamos em frente e clicar no biscoito dela para testar que está funcionando e Walla. Parece que tudo funcionou bem. Então agora podemos ir em frente e fechar todas essas guias extras e antes de passar para a próxima lição será um desafio de codificação rápido para garantir que sua compreensão tudo até agora depois que você assumir o desafio de codificação, eu vou ver vocês na seguinte lição onde vamos começar a aprender a tag div e criar separação dentro do nosso site.
12. Como usar a tag divisa: Todo mundo. Estou feliz que você conseguiu superar o desafio de codificação em suas costas e pronto para aprender mais. Agora nesta seção, vamos cobrir a tag DIV. Agora. Div é abreviado para a divisão de palavras na tag diff nos ajuda a criar diferentes divisões ou seções dentro do nosso documento HTML para ajudar a manter nosso código um pouco mais organizado. Então, se olharmos para aqui no lado esquerdo, você provavelmente pode imaginar se continuássemos escrevendo MAWR mais código, ele começaria a ficar meio confuso e difícil de ler. É por isso que usamos a tag DIV para separar seções de conteúdo que são relevantes agora. A tag dip também nos ajudará mais tarde quando começarmos a cobrir CSS e veremos por que é importante envolver diferentes seções e tags dip, pois nos ajuda a definir diferentes cores e fontes e muito mais. Então vamos começar por embrulhar todas as nossas seções relevantes com a tag diff. Então nós queremos clicar no final da bruxa navs e apertar o retorno T. Então nós vamos digitar Div e então vamos em frente e tab terminar cada um nosso slogan e seguida, nosso link em nossas coisas imagem. Agora, após a tag de fechamento do link, vamos pressionar a tecla de retorno e vamos digitar a tag DIV de fechamento. Agora vamos em frente e embrulhe todos os nossos H três cabeçalhos e etiquetas dip em preparação para mais tarde quando começarmos a ADM. Ou informações para eles. Agora, uma coisa que enfraquece fazer quando escrever código é usado copiar e colar para nossa vantagem. Então, neste cenário, eu vou digitar o dia de abertura da tag e copiá-lo na frente de todos os outros um três . Então eu vou devolvê-los para a próxima linha. Agora vamos voltar depois da nossa primeira faixa de três anos e acertar a
tag def final. Agora podemos ir em frente e copiar e colar isso e fazer a mesma coisa para todos eles. Copiar e colar apenas nos ajuda a escrever o código um pouco mais rápido, e isso garante que tenhamos menos erros de digitação do que se escrevêssemos cada tag div uma por uma. Então, neste ponto, pode ser um pouco difícil entender por que precisamos da tag diff. Mas mais tarde na seção CSS deste curso. Vai ser muito mais fácil. Entenda por que começamos a configurar nosso código dessa maneira. Obrigado por assistir. E verei vocês no próximo vídeo.
13. Como criar listas não ordenados: todos e bem-vindos de volta esta lição. Vamos continuar adicionando conteúdo em cada uma de nossas seções do lado direito, e vamos abordar como criar uma nova lista ordenada. E uma lista Norden é uma lista que não tem números, mas usa marcadores agora para começar. Vamos bater retorno após a nossa etiqueta H três para todos os ingredientes naturais cabeçalho. E, em seguida, vamos criar a tag U L na UL. Tag é simplesmente curto para um Nord Erred listas. Agora, antes de começarmos a digitar o texto que queremos estar na lista dela, vamos em frente e clicar em Return e então precisamos criar a etiqueta L. I. Agora a tag L I tem que ser usada para cada item da lista. Então, neste cenário, eu vou digitar um número de ingredientes diferentes. E por conveniência, eu entrei na lista como um artigo anexado a este vídeo, então você deve ser capaz de apenas copiar e colar a lista, ou você pode acompanhar e digitar tudo em enquanto eu faço isso agora que nós digitamos tudo para fora, se olharmos para o lado direito aqui, você vai notar sob nossos ingredientes título temos um Norden, ou lista com marcadores de todos os ingredientes em nossa massa de biscoito. Agora queremos criar instruções passo a passo. Então, para a seção de instruções logo abaixo, queremos ter números para a nossa lista. Então, para fazer isso, vamos apertar retornar após a tag H três e vamos usar a tag. Oh bem, que é abreviado para listas ordenadas agora, assim como a lista Norden acima. Também precisamos usar a etiqueta L I para cada item da lista que queremos ter na lista. Então, novamente, eu vou copiar e acelerar todas as listas tags só para que tenhamos o suficiente. E então eu vou começar a digitar as instruções, que também estão incluídas no artigo anexado a este vídeo. - Agora parece que temos mais algumas etiquetas L. I, então vamos destacar essas e apagá-lo. Então, agora, se olharmos para o lado direito e rolarmos um pouco para baixo, você notará que a lista de Instruções tem números no lado esquerdo, enquanto a lista de inTs gananciosos de Thean tem marcadores. Agora, se precisarmos de mudança. Estes sempre têm que fazer é editar o O e o U. Então, agora, se olharmos, podemos mudá-los para frente e para trás. Agora que temos a seção de ingredientes e instruções preenchidas, vamos passar para a próxima lição e vídeo. Onde irá cobrir como criar um formulário de entrada?
14. Como criar formas: todos e bem-vindos à criação de formulários que formulários é uma forma de capturar
as informações de um cliente , como um e-mail ou nome. Então, para começar, vamos apertar retornar depois da etiqueta de cada três que diz Winfrey. Massa de biscoito para sempre. Agora, para criar nosso formulário, precisamos primeiro criar a tag de formulário. Então vamos em frente e pressione retornar agora para criar o campo que permite que o usuário digite , precisamos usar a tag de entrada. Então vamos digitar a entrada. E uma coisa que você vai notar é que a tag de entrada não tem uma tag de fechamento semelhante à nossa tag de
imagem. Então tudo o que precisamos é apenas a tag de abertura de entrada agora dentro da tag de entrada que precisávamos. Coloque que tipo de campo é este, e porque nós vamos apenas coletar o nome no primeiro 1 nós vamos escrever tipo
igual a , em
seguida, texto. Agora, se rolarmos para baixo no lado direito, você verá que agora temos um campo aqui onde o usuário poderia escrever seu nome. A próxima coisa que queremos fazer é rotulado como o topo dele,
então vamos em frente e criar a tag de parágrafo novamente, e depois nome direito dentro dele, e agora você verá que ele aparece acima de nossa entrada de campo. Em seguida, queremos criar outra seção de entrada onde podemos coletar o e-mail do usuário. Então vamos em frente e Kabi o nome e o sag de entrada com comando, ver ou controlar ver, e depois colá-lo debaixo do nosso 1º 1 Então agora você vai ver, temos que dizer o nome. Então, o que queremos dio é excluir o segundo nome e digitar o e-mail agora, a
fim de dizer ao computador qual valor é o que queremos adicionar o nome dentro da tag. Então vamos em frente e digite o nome igual. E, em seguida, vamos colocar o nome para aquele, e para o segundo 1 irá digitar o nome igual a e-mail. Agora o nome é igual a função é apenas para o navegador entender o que é. Ele não aparecerá no lado direito, e neste curso não vamos cobrir todos os detalhes para fazer nosso formulário funcionar corretamente. Mas há apenas mais uma coisa que precisamos criar. Precisamos criar um botão de envio que permita ao usuário clicar em algo para enviar três MFO. Então vamos em frente e pressione return, e vamos criar mais uma tag de entrada. Mas desta vez vamos criar o tipo enviar, e agora você vai notar que um botão de envio realmente aparece no lado direito. Agora, tipicamente, teríamos que voltar para a tag de formulário daqui e sair mais algum código que diria ao computador para onde enviar o formulário? Mas como este é um curso muito iniciante, não
vamos cobrir isso neste vídeo ou em nenhum dos vídeos que seguem com isso sendo dito. Isso é tudo para este curso e criar formulários e no próximo curso, vamos cobrir como criar tabelas e vamos começar a adicionar em nossas
informações nutricionais . Eu vou ver vocês no próximo vídeo
15. Como criar as tabelas: Todos bem-vindos de volta e esta lição. Vamos cobrir como criar uma tabela, e vamos preencher as informações para nossa seção de informações nutricionais, mas ela começa. Precisamos acertar. Retorne após a tag H três e crie a tag tabela. Vou comprar a etiqueta da mesa de fecho. Então vamos em frente e bater. Retorne entre eles agora dentro da tag tabela. Existem algumas tags diferentes que podemos usar. A primeira tag que precisamos usar é TR, que é abreviado para linha da tabela agora. Dentro da nossa linha da tabela, temos que especificar uma das duas tags diferentes antes de digitar nossas informações. Assim, o primeiro 1 que podemos fazer é criar a th tag, que significa título da tabela. Então, tipicamente, nós só vamos usar a th tag uma vez, e vamos usar isso para criar cabeçalhos para uma tabela. Então vamos em frente e digite calorias e vamos em frente, copie essa linha inteira e cole-a novamente. Agora você vai notar que as calorias estão ao lado das outras calorias que acabamos de copiar, e isso é porque criamos uma segunda linha, então se continuarmos copiando
isso, ele continuará criando mais rosa. Agora, para nossa seção de informações, vamos ter que subir. Então vamos em frente e excluir os dois. Então,
também vamos embora agora. A segunda tag que podemos usar dentro da tag TR é a tag T D, que é abreviação para dados da tabela. Então vamos em frente e mudar a segunda tag calorias aqui para T d. Agora, se olharmos para o lado direito aqui vai notar que o título da tabela está em negrito enquanto os dados da tabela são regulares. Então vamos em frente e mudar as calorias desta segunda tag aqui para 98. Agora vamos selecionar tudo dentro da tag TR, incluindo a própria tag, e copiá-lo algumas vezes. Agora vamos preencher todas as nossas informações nutricionais agora, assim como os vídeos anteriores em que fizemos essa lista de ingredientes e instruções. Incluí todas as informações nutricionais no documento anexado a este vídeo para sua conveniência. Caso contrário, você pode continuar a assistir ao vídeo e acompanhar enquanto eu digito tudo. - Agora que temos toda a informação preenchida na secção de informação nutricional. Há apenas algumas coisas que eu quero te mostrar agora. Nós criamos duas colunas diferentes aqui, mas você pode realmente criar quantas colunas surgiram como você gostaria. Você simplesmente precisa manter colocando as tags th ou TD dentro das tags TR para criar mais linhas. Então, se você olhar aqui, acabamos de criar mais duas linhas sob a seção de proteínas. Então eu vou desfazer isso agora que nós cobrimos como criar tabelas e HTML, Vamos fazer um teste rápido e então eu vou ver vocês em nosso vídeo HTML final.
16. Como criar comentários em HTML: todos e bem-vindos ao nosso vídeo final na seção HTML deste curso. Neste vídeo, vamos abordar como criar comentários dentro do nosso código HTML. Há algumas razões para criarmos um comentário sobre o casaco dela. Uma das razões é que podemos deixar notas para nós mesmos ou talvez até para outros que estavam trabalhando. Outra razão é que podemos querer comentar alguns de nosso código para que ele não
seja exibido até que decidamos mais tarde que queremos exibir. Então vamos em frente e dar uma olhada em como criamos comentários. Problema interno. Casaco Mel. Então vamos rolar para baixo. Então, vemos o título de informação nutricional agora. Logo acima disso, vamos clicar após a tag diff e clicar em Retornar Agora para criar um cometa. Começamos com a etiqueta de abertura, que é o símbolo menos terra, seguido de um ponto de exclamação, seguido de dois traços. Agora, se você notar depois de digitarmos essa tag, todo o código a seguir ficou verde e isso é porque o navegador não vê onde
parar de lê-lo. Como um comentário porque não criamos estão fechando Tech. Então, para criar a tag de fechamento para um comentário, vamos acertar o espaço e, em seguida, para marcas de traço, seguido pelo símbolo maior que. Então, uma coisa a notar é que não precisamos de um ponto de exclamação em nossa tag final de comentários. Agora, dentro de nossas tags de comentário, podemos criar ou realmente escrever o comentário que queremos deixar para nós mesmos. Então vamos em frente e digite um comentário. Então, se você notar aqui, eu digitei. Esta informação nutricional é de 2017, então este pode ser um comentário que você gostaria de deixar. Então, se você entrou em seu código de sites mais tarde, você saberia quantos anos a informação nutricional Waas. Agora estávamos trabalhando neste site com um amigo ou colega de trabalho. Este comentário também pode ser útil porque ele iria deixá-los saber quando esta informação foi criada. Agora vamos em frente e dar uma olhada em como podemos comentar diferentes objetos para que eles
não sejam exibidos no lado direito. Então, como exemplo, vamos comentar nossa imagem de cookie para que possamos vê-la desaparecer e reaparecer quando tirarmos o comentário. Então, para fazer isso, vamos criar a tag de abertura do nosso comentário bem na frente da tag A. E depois, depois de fechar uma etiqueta. Vamos em frente e criar a tag de comentário de fechamento. Então, agora, se você olhar para o lado direito são biscoitos, ele
desapareceu, e você vai notar que todo o nosso código agora é verde. Agora, se decidimos mais tarde sobre isso, queremos que nosso cookie apareça em nosso site do que tudo o que temos a fazer é ir em frente e excluir nossas tags de comentários e você notará que o cookie reaparece em nosso site. Se olharmos para Oliver Code do lado esquerdo, você notará que já cobrimos um pouco até agora. Este é o vídeo final na seção HTML. Haverá um teste rápido para revisar todos os diferentes elementos que abordamos no HTML. Depois de fazer, o questionário mergulhará diretamente no histórico do CSS, e então começaremos a adicionar cores e fontes diferentes ao lado direito do nosso site . Continuem com o bom trabalho, pessoal, e vejo vocês logo após o teste
17. Visão de CSS: Ei aí. Bem-vindo à visão geral do CSS. CSS descreve como o problema elementos Mel devem ser exibidos na tela. Podemos alterar as fontes de tamanho de cor e muito mais. CSS significa folhas de estilo em cascata. cascata significa que os estilos podem cair ou uma cascata de uma folha de estilos para outra, permitindo que várias folhas de estilo sejam usadas dentro do nosso documento HTML. Ao longo
disso, esta parte do curso usará as tags HTML que aprendemos
nos vídeos anteriores , a fim de estilizar os diferentes elementos da nossa página Web. Vamos fazer um breve teste e, em seguida, vamos cobrir o CSS em impostos ou como escrevemos o CSS.
18. Sintaxe em CSS: todos e bem-vindos à lição CSS Syntex para escrever CSS. Começamos usando um seletor. Agora estes transmitem ser as tags HTML que aprendemos nos vídeos anteriores, ou eles também podem ser I DS ou classes que vamos cobrir mais tarde. Neste curso, após o seletor, usamos um colchete de abertura, seguido por uma propriedade. Agora as propriedades serão todos os diferentes vídeos que abordamos nesta seção. Cada propriedade diz ao navegador para fazer uma coisa diferente, como mudança, mudança de
cor, mudança de
tamanho, decoração, etc. Após a propriedade, colocamos o símbolo de dois pontos e, em seguida, colocamos o valor. Então, para o exemplo de cor, tínhamos direito o nome de uma cor como azul após o valor que precisamos para criar ou digitar um ponto semi vírgula. Agora o semi dois-pontos diz ao computador que é o fim dessa propriedade e valor, e ele vai continuar a ler o próximo. Agora podemos escrever várias propriedades ou valores emparelhados com seletores diferentes. Então, para este exemplo, eu vou criar mais uma propriedade e valor e, em seguida, precisamos fechar tudo
com o colchete de fechamento. Agora tudo no meio são colchetes, é a declaração. Essencialmente, ele diz ao seletor o que queremos fazer com o nosso código. Esse é o básico da sintaxe CSS. No próximo vídeo, vamos dar uma olhada mais de perto, mergulhando diretamente na mudança do revestimento de fundo.
19. Cor de fundo: todos e bem-vindos à lição de cor de fundo Agora para começar. A primeira coisa que precisamos fazer é abrir a guia CSS na parte superior da janela do navegador . Então, se você clicar no botão CSS aqui, você vai notar que agora temos uma coluna CSS. Agora, é
aqui que vamos escrever todo o CSS para o restante deste curso. Agora a propriedade cor de fundo nos permite alterar a cor de fundo de nossos diferentes elementos
HTML. Então a primeira coisa que vamos fazer é mudar toda a cor de fundo da nossa página Web . Então, se olharmos para o nosso HTML no lado esquerdo, aqui vai notar que temos todos os nossos diferentes elementos embrulhados dentro do nosso body tag. Então, para escrever isso, primeiro
queremos escrever corpo, que é o nosso seletor CSS, seguido pelos colchetes. E se você notar quando você digitar o primeiro colchete, o 2º 1 será pré-preenchido para você. Então você quer apertar o retorno, e agora na próxima linha, queremos digitar ou propriedade, que é cor traço de fundo, seguido de dois pontos, e então queremos escrever a cor para que haja um número de cores diferentes que enfraquecem para fora, mas eles têm que ser cores seguras para a Web, então eles têm que ser códigos hexadecimais, códigos RGB ou nomes de cores. Então vamos escrever um código hexadecimal, que é de nove b três oito c, seguido do nosso semi cólon. Agora, lembrem-se, como cobrimos no último vídeo, o Semi Colon diz ao computador que esse é o fim da declaração. Então, depois que ele lê que ele sabe que ele pode continuar a ler a próxima propriedade. Agora, se olharmos para o lado direito aqui vai ver que a cor de fundo de sua página web é agora esta cor marrom claro. Agora queremos mudar a cor de fundo de mais alguns elementos de itens que queremos realmente se destacar. Por isso, também queremos que o nome da nossa empresa se destaque. Então, se olharmos para o nome da nossa empresa aqui no lado esquerdo vai notar que ele está em
cada tag. Então vamos em frente e mudar a cor de fundo usando H um como o seletor e, em seguida, cor de fundo
direita em como a propriedade e para o H. Queremos torná-lo uma cor azul claro. Então vamos em frente e usar o código hexadecimal três BB nove ff. Então, agora, se olharmos para o lado direito aqui, a cor azul claro deve aparecer atrás do nosso texto. Agora vamos apenas ir em frente e rolar para baixo e vamos em frente e escrever em uma cor de fundo para o nosso rodapé. Então, se nos lembrarmos na seção HTML deste curso, usamos a tag rodapé para HTML. Então vamos em frente e digite rodapé como nosso seletor. E mais uma vez, vamos digitar a cor de fundo. E agora, desta vez, vamos usar um exemplo de cor que é seguro para a Web para que possamos digitar um número de
nomes de cores diferentes , e para ver uma lista completa, você deve visitar o dedo do site W três c. Saiba mais, mas para este curso, vamos apenas ir em frente e digitar cinza claro, e agora você vai notar que nosso rodapé aqui em baixo é cinza claro. Agora, se você notar no lado direito, a cor de fundo meio que termina muito perto da borda do nosso texto. Agora, não se preocupe. Mais tarde,
neste curso, vamos abordar como Toe ADM ou Margin e preenchimento para dar ao texto mais espaço para respirar. Agora, antes de seguirmos em frente, vamos apenas adicionar mais uma cor de fundo. Portanto, queremos ter certeza de que todas as nossas subposições aqui se destacam um pouco mais do que elas. Então vamos em frente e chamá-los usando a tag H três. E então vamos mudar a cor de fundo do dedo do pé branco. Então isso é tudo que não temos dolorido para este curso. E a próxima lição abordaremos como criar I ds. Vejo vocês no próximo vídeo.
20. Como criar um id: Ei aí. Bem-vindo à criação de uma identificação e I D permite-nos estilizar algo especificamente sem afetar todas as outras
etiquetas similares . Então, para criar uma identificação primeiro
temos que passar para o nosso HTML. Então vamos em frente e criar um I D para todos os ingredientes naturais seção. Então, vamos criar uma tag I D na tag DIV que envolve esta seção. Então vamos em frente e escrever I d igual a seguido de aspas. E depois temos de arranjar um
nome de identificação identificação. Agora, um nome I D pode conter caracteres Onley. A a Z. Eles poderiam ser minúsculas ou maiúsculas, e pode conter números de zero a nove. Mas não pode começar com o número agora. Normalmente, ao criar o nome, você deseja criar algo que corresponda à sua categoria ou seção. Então, faz mais sentido quando você olha para o seu código mais tarde. Então, para este exemplo, vamos chamá-la de ingredientes. Agora vamos voltar ao nosso painel CSS neste tempo, em vez de chamar nosso elemento escrevendo Div. Nós vamos escrever ingredientes para que possamos realmente copiar isso apenas para economizar algum tempo. E então precisamos de um hashtag tem ah na frente disso,
que é o símbolo que representa uma
identificação. identificação Então agora seguimos isso com nossos colchetes e vamos em frente e criar uma propriedade de
cor de fundo com o valor F nove F nove F nove. Então, como você vê aqui, agora
temos uma cor ligeiramente cinza no lado direito, e em Lee afetou esta seção porque nós criamos apenas um I d. Então nós queremos também criar idéias para as seções a seguir porque queremos que cada seção dedo do pé , tem uma cor diferente. Então vamos em frente e criar um I D para a seção de instruções e vamos usar o código hexadecimal ff A 80 porque queremos que a seção de instruções se destaque e tenha uma cor vermelha macia para que ele chame nossa atenção. Então vamos em frente e fazer a seção de informações nutricionais. - E agora vamos em frente e fazer a massa de biscoito livre de vento para a seção de vida. Então vamos citar essa vitória para curto, e podemos copiar isso para economizar algum tempo, mas então vamos mudar a cor aqui. Dois laranja. Então isso se destaca um pouco. Vamos em frente e digite, e eu d para o nosso slogan aqui porque mais tarde, quando cobrirmos algumas ou propriedades CSS, vamos mudar isso. Mas não queremos afetar o resto do nosso texto. Então, se procurarmos o slogan aqui, que está em uma tag de parágrafo, vamos criar o I D é igual a slogan. Então, em resumo, você deseja usar I DS sempre que quiser alterar elementos específicos em sua página da Web sem afetar nenhum outro elemento. Agora lembre-se, o I DS só pode ser usado uma vez, então se você precisar usá-lo algumas vezes ou mais de uma vez, você quer criar classes, que vamos abordar no próximo vídeo
21. Como criar cursos: Todos bem-vindos de volta. E esta lição vamos abordar como criar aulas. As classes são essencialmente as mesmas que eu DS que acabamos de cobrir, exceto que as classes podem ser reutilizadas quantas vezes quisermos. Então, para criar uma classe, precisamos também criar um nome para ela e adicioná-lo ao nosso HTML. Assim como as classes I DS podem conter os mesmos caracteres em
minúsculas ou maiúsculas e os números de zero a nove. Mas assim como eu DS, eles também não podem começar com o número. Então vamos para o lado esquerdo e vamos criar uma classe para o nosso H três elementos porque mais tarde neste curso, vamos mudar o estilo de todos os nossos subtítulos documento HTML interno Aqui no lado
esquerdo. Vamos ir em frente e escrever classe é igual a aspas e, em seguida, dentro das
aspas são nome da classe. Agora para isso, vamos escrever o título e então vamos apenas copiar isso e colar isso em nossos outros títulos. Então devemos ter um e todos os quatro de nossos subtítulos ou títulos que criamos aqui agora, mais tarde neste curso depois que aprendemos mais algumas propriedades e valores, vamos usar as classes para alterar o estilo de nossos subtítulos. Isso é tudo por este vídeo. Vejo vocês na próxima aula.
22. Como criar uma fronteira: Olá e bem-vindos à criação de uma fronteira. E esta lição vamos cobrir a propriedade da fronteira e os muitos valores diferentes que vão com ela. Então, para começar, vamos em frente e adicionar uma fronteira ao nome da nossa empresa aqui. Então, porque já mudamos a cor de fundo chamando a tag H one, podemos ir em frente e adicionar nossa propriedade a isso. Então, após a cor de fundo aqui, pressione retornar no tipo fora da borda, seguido por um símbolo de dois-pontos. Agora, a propriedade border requer três valores diferentes depois dela. Então, a primeira coisa que temos que dizer é a espessura da borda ou com, dizendo-lhe como pixels maney. Então temos que digitar um número, seguido por P X, que é abreviação de pixels. Então vamos digitar quatro p x agora. A próxima coisa que temos que dizer é que estilo queremos que nossa linha seja. Então, por enquanto, vamos apenas ir em frente e escrever sólido. E como você vai notar, já
temos uma borda adicionada à nossa página da Web no lado direito. Agora ele pré-povoado preto porque a cor do nosso Texas preto, mas o terceiro valor que podemos mudar é a cor. Então vamos em frente e mudar isso para um tom de azul digitando o código hexadecimal 15 89 ff, seguido do nosso semi cólon. Agora, há uma série de bordas diferentes que você pode criar. Então vamos em frente e editar o tipo aqui onde escrevemos sólido e mudar isso para pontilhado. Então agora se você vê no lado direito agora temos uma borda pontilhada. Agora também podemos digitar tracejado ou duplo, ou podemos digitar oculto se quisermos que ele não seja exibido até que mudemos de idéia mais tarde. Então vamos em frente e re digite sólido e deixá-lo assim por enquanto. Então, se você notar aqui no lado direito, a borda apenas seguiu o valor que nós tínhamos chamado na forma que ele já tem. Então temos uma fronteira muito quadrada. Os esboços do nosso fundo azul. Agora, no próximo vídeo, vamos cobrir a propriedade do raio da borda onde irá adicionar cantos arredondados à nossa borda. Vejo vocês no próximo vídeo.
23. Raio de fronteira: todos e bem-vindos à lição do raio da fronteira. Agora queremos mudar a borda que acabamos de criar no último dedo do pé de vídeo têm
cantos arredondados . Então vamos em frente e voltar para
R. H. um seletor aqui em cima e depois da propriedade de fronteira que acabamos de criar. Vamos apertar retornar e vamos digitar o raio da borda com o traço no meio, que é a propriedade que usamos para selecionar especificamente o raio ou o nous arredondado de uma borda. Agora eles são zero padrão, mas podemos digitar qualquer número de pixels. E como você percebe aqui no lado direito, quando eu digito, ele muda automaticamente. Então, se eu digitar um número muito alto, será assim versus um número muito pequeno como esse. Agora também podemos usar porcentagens com a propriedade de raio de borda. Então vamos em frente e deixar isso em quatro pixels. E agora quero mostrar a vocês como podemos criar bordas arredondadas para cantos específicos, que
significa que não faz todos os quatro cantos arredondados. Queremos adicionar uma borda arredondada para todos os títulos que criamos e criar um
vídeo de classe para chamar a classe, usamos um ponto seguido pelo nome da classe que usamos título e, em seguida, queremos preencher
a propriedade border radius. Agora, se nós apenas digitar cinco PX por enquanto, você vai notar aqui que as fronteiras foram criadas agora para a informação nutricional e todos
os ingredientes naturais. É um pouco difícil dizer que mudou por causa da cor de fundo ser muito semelhante. Agora também podemos criar ronda de bordas para cantos específicos de Onley digitando qual canto queremos ser alterados. Então, para fazer isso, começamos no canto superior esquerdo com o primeiro valor, seguido pelo canto direito e continuamos indo no sentido horário. Então vamos dar uma olhada no que eu quero dizer. Então, se escrevermos zero depois de cinco, P. X agora vai notar que o nosso canto direito é agora quadrado. Então queremos que o dedo do pé também seja arredondado, porque queremos que ambos os cantos superiores sejam arredondados. Então vamos digitar cinco p x e então vamos fazer 00 Então agora se olharmos para o lado direito vai notar que os dois cantos superiores em torno dele nos dois inferiores são quadrados, então nós poderíamos mudar qualquer número de combinação aqui para arredondar cantos específicos ou deixá-los quadrado. Mas vamos em frente e deixar os dois primeiros arredondados nos dois quadrados inferiores. Agora, se nós rolarmos para baixo vai notar que nós também temos isso em todos os nossos outros. Mas, novamente, é um pouco difícil de ver nestes dois por causa da cor de fundo ser semelhante. Mas você provavelmente também notou que o fundo tipo de mostra ao virar de uma esquina aqui porque ainda é quadrado. Então, para alterar isso, precisamos adicionar a propriedade de raio de borda a todas as nossas marcas I D abaixo. E porque queremos que eles sejam arredondados por todo o caminho, vamos apenas digitar cinco pixels uma vez. E se você notar aqui, todos
os ingredientes naturais um agora foi alterado. Então agora só precisamos copiá-lo para as outras três idéias que criamos. Então agora, se dermos uma olhada no lado direito vai notar que as seções All Forever agora têm cantos arredondados e tudo está lentamente começando a se juntar. Isso é tudo para criar um raio de fronteira. Eu vou ver vocês no próximo vídeo
24. Padding: todos, Bem-vindo à lição de preenchimento neste vídeo. Vou mostrar-lhe como criar espaço entre o seu conteúdo na fronteira. Então vamos dar uma olhada neste diagrama, que explica a diferença entre preenchimento e margem. Então, se você notar aqui, preenchimento é o espaço entre o nosso conteúdo e a fronteira, enquanto margem é o espaço fora da nossa fronteira. Assim, preenchimento não pode ter valores negativos. Então, para começar, vamos adicionar algum espaço entre nosso título da empresa aqui e a borda azul que
criamos em um vídeo anterior. Então vamos para o nosso H um seletor aqui e depois do raio da fronteira. Vamos apertar “return” e então vamos digitar a propriedade de preenchimento. Então, para definir a propriedade de preenchimento, precisamos adicionar um valor de pixels. Então vamos Typhon 20 p x. E como você vê aqui agora, no lado direito, nós temos muito mais espaço e isso apenas torna um pouco mais fácil de ler. Agora, quando acabamos de adicionar 20 pixels, ele adicionou 20 pixels em cada lado ao redor do conteúdo. Assim, a parte superior esquerda, direita e inferior Agora Nós também podemos adicionar especificamente o dedo do pé de acolchoamento em Lee um lado ou
lados específicos , se necessário. Então, se olharmos para o lado direito vai notar que os títulos ou subtítulos que temos aqui, eles estão um pouco triturados em precisa de mais espaço. Então vamos em frente e adicionar preenchimento para a parte superior e inferior e os lados esquerdo e direito. Mas queremos que o topo e o fundo sejam ligeiramente diferentes dos lados esquerdo e direito. Então, abaixo de três anos Seletor, vamos retornar depois de uma propriedade de cor de fundo, vamos criar a propriedade de preenchimento novamente. Então, agora, se criarmos 10 p x, seguido por cinco p x. você vai notar aqui que ele adicionou 10 pixels para o topo e o fundo e, em seguida, cinco pixels para o lado esquerdo e direito. Então, se você escrever para valores em uma linha como nós acabamos de fazer, o primeiro 1 significa o topo e o fundo, e o segundo 1 representa os lados esquerdo e direito. Agora também podemos especificar preenchimento para apenas um lado, então vamos em frente e dar uma olhada em como fazemos isso agora. Nossa seção de informações nutricionais aqui é um pouco lotado no texto na segunda coluna aqui parece Teoh, mas ao lado de algumas das outras palavras. Então, queremos adicionar preenchimento apenas para o lado esquerdo. Então vamos em frente e fazer isso chamando o seletor TD, que foi um dos elementos HTML que usamos em nossa tabela. Se olharmos para aqui do lado esquerdo agora, vamos escrever o preenchimento Dash, e então você quer escrever a direção que você quer que o preenchimento seja. Então, neste cenário, queremos que o preenchimento seja deixado. E agora vamos escrever 30 pixels. Então, se você notar lá depois que escrevemos 30 pixels, toda a segunda coluna, Tex pulou para a direita porque nós adicionamos mais preenchimento entre aqui. Agora há apenas mais uma coisa que eu quero mostrar a vocês com a propriedade de preenchimento se
voltarmos para a nossa idade três seletor onde escrevemos o preenchimento 10 p x e cinco p x. Eu quero mostrar que você também pode especificar lados individuais, dando-lhe quatro valores. Então, se escrevêssemos três pixels e 20 pixels. Você vai notar aqui que agora nós escrevemos o valor superior, seguido pelo valor certo, seguido pelo inferior, seguido pelo esquerdo. Começa sempre no topo e depois vai no sentido horário. Vamos em frente e desfazer isso e deixá-lo em 10 pixels e cinco pixels. Então, nós cobrimos um pouco de CSS até agora. Então, antes de seguirmos em frente, vamos fazer um pequeno teste e depois verei vocês no próximo vídeo.
25. Margem: todos e bem-vindos à lição de margem. Agora, se dermos uma olhada em nossa carga, Yen vai notar que margem é como nós geramos espaço fora ou ao redor dos elementos. Então, se notarmos aqui, é o espaço que está fora da fronteira agora porque está fora da fronteira e não afeta o conteúdo real. margens podem incluir valores negativos, portanto, normalmente, usamos margem para adicionar ou retirar espaço entre nossas seções. Então, por exemplo, vamos tentar adicionar espaço entre o nosso cookie e a
seção de todos os ingredientes naturais para que eles não fiquem tão próximos. Então vamos em frente e fazer isso chamando a imagem com nosso seletor de imagem. E então vamos digitar a propriedade margin agora, assim como nós cobrimos com margens de preenchimento poderia ser especificado para Onley uma direção, ou você pode alterar cada direção de uma só vez. Então vamos dar uma olhada no que quero dizer. Se fôssemos digitar margem e, em seguida, 20 pixels vai notar que esse espaço adicionado em todos os quatro lados. Agora, se excluirmos essa margem indu, fundo
traço 20 pixels vai notar que isso só adicionou espaço para a parte inferior do cookie. Agora, como estofamento. Também podemos chamar cada lado, escrevendo-os em ordem, começando com o topo. Então vamos em frente e escrever nossos valores. Queremos adicionar 20 pixels à parte inferior do cookie. Então o que podemos fazer é definir zero para o valor superior zero para o valor certo e, em seguida, 20 pixels para o valor inferior. E então precisamos definir zero para o valor esquerdo. Então, mais uma vez, se você notar aqui, agora
temos 20 pixels abaixo do nosso cookie, o que lhe dá um pouco mais de espaço. Agora, um benefício de escrever margem dessa maneira, em vez de escrever margem para fora, especificamente para uma direção é que podemos voltar e mudar nossa margem mais rápido se
precisarmos mais tarde. Então, por exemplo, se eu decidir mais tarde, eu preciso adicionar um pouco mais de espaço entre o cookie e o nosso slogan. Eu poderia simplesmente entrar aqui e mudar isso sem ter que mudar nossa propriedade. Então isso encerra este vídeo. A próxima lição. Vamos abordar como alterar o tamanho da fonte para que possamos destacar o nosso slogan um pouco mais . Vejo vocês na próxima aula.
26. Tamanho de fonte: todos e bem-vindos à lição de tamanho da fonte. Agora, se você se lembra em nosso vídeo I D, nós criamos um I D, que é único. Deite o nosso slogan. Então, se olharmos para o lado esquerdo aqui vai ver eu d slogan igual. Agora vamos usar isso para chamar o nosso “I D. possamos mudar o tamanho do nosso slogan e torná-lo um pouco maior. Então, com menos de três anos de idade. Tag, vamos usar nosso seletor I D usando o símbolo hashtag e, em seguida, slogan. E então vamos escrever a propriedade tamanho da fonte. Agora a propriedade tamanho da fonte é o tamanho do traço do fundo. Agora, para preencher o valor para a propriedade tamanho da fonte, podemos usar porcentagens de pixels, ou podemos usar a palavra pequeno, médio ou grande. Então vamos dar uma olhada no que essas palavras fazem. Então, se você notar lá quando eu digitei para fora pequeno, médio e grande, eles mudaram um pouco. Mas não temos muito controle sobre o tamanho, então na maioria das vezes você vai querer usar pixels porque você pode especificar o tamanho exato
do tipo, então vamos em frente e escrever 26 pixels. Então agora vamos notar aqui do lado direito que nosso slogan é muito maior e mais
fácil de ler. Então isso é tudo o que é preciso para alterar o tamanho da fonte de qualquer um dos nossos diferentes elementos que tenham tipo. No próximo vídeo. Vou mostrar-te como mudar o peso dos telemóveis.
27. Peso de fonte: Todo mundo. E bem-vindo à lição de peso da fonte neste vídeo. Vamos mudar o peso ou a espessura do nosso fundo no nosso slogan e nos nossos títulos aqui em baixo. Então, para começar, vamos usar nosso seletor de slogan e vamos digitar divertido Dash, Wait. E agora existem alguns valores diferentes que podemos usar para mudar o peso. Então, a primeira coisa que podemos dilatar é enfraquecer. Digite negrito e você notará aqui. Agora é mais ousado ou enfraquecer tipo em Boulder, ou podemos digitar mais leve. E então também podemos digitar normal se quisermos ter certeza de que nossa maneira de fonte está definida normal. Agora também podemos digitar os números de 100 a 900 e 400 é igual ao normal. Então vamos dar uma olhada colocando em alguns valores diferentes. Então 600 faz um pouco mais grosso. Fazemos 300. Podemos notar que alguns dos pesos mais leves não mudam, e isso pode ser por causa da luta que temos em nosso documento. Agora, mais tarde em outro vídeo, vou mostrar a vocês como mudar a fonte ou a fonte. Mas, por enquanto, vamos em frente e apenas digitar em negrito e deixar nosso slogan assim. Agora vamos rolar para baixo da nossa classe título aqui e vamos dar a isso um peso de fonte de 300. Então você percebe aqui depois que eu digitar que no peso da fonte ficou um pouco mais leve e não era tão forte. E é isso que queremos por agora. Então vamos em frente e passar para o próximo vídeo, onde vamos cobrir o texto, transformar a propriedade.
28. Transforme de texto: todos e bem-vindos ao texto transformar vídeo. Agora o texto transformado propriedade nos permite alterar o texto para que possamos ter letras
maiúsculas ou minúsculas maiúsculas. Então vamos dar uma olhada no que eu quero dizer usando nosso H um seletor e sob o preenchimento aqui , vamos escrever textos traço,
transformar e, em seguida, vamos escrever capitalizar. Então, se você notar aqui, parece que nada mudou. Bem, isso é porque nosso texto já estava em maiúsculas porque a maneira como escrevemos em nosso HTML. Então vamos em frente e escrever maiúsculas, e agora você vai notar no lado direito. Todo o imposto está agora em maiúsculas ou maiúsculas. Agora podemos nos mudar a minúscula e vamos notar que tudo tem uma
letra minúscula . Nós também podemos definir isso como nenhum, e que irá padrão o texto para a forma como você escreveu o HTML. Então vamos em frente e mudar isso de volta para maiúsculas porque queremos que o título de nossa empresa realmente se destaque. Isso é tudo por este vídeo. No próximo vídeo, vamos abordar como mudar a cor do texto
29. Cor de texto: todos e bem-vindos ao vídeo colorido e esta lição rápida vamos mudar a
cor do nome da nossa empresa. Então, para fazer isso, precisamos usar a propriedade color. Então vamos até o nosso H um seletor aqui e depois de transformar texto, vamos escrever cor. E agora, para adicionar o valor em exatamente como a propriedade de cor de fundo que cobrimos em um vídeo anterior , precisamos usar uma cor segura da Web para que possamos usar nomes de cores, códigos
hexadecimais ou cores RGB. Agora nós só queremos mudar este dedo do pé branco para que possamos ou direita para fora a cor ou o nome branco, ou podemos usar hashtag f f s ff. Então, agora, se você olhar para o lado direito aqui vai notar que a cor de nossos técnicos tem agora mudou para um branco. Então isso é tudo por este vídeo. Vejo vocês na próxima aula.
30. Como alinhar o texto: Todo mundo. E bem-vindo de volta neste vídeo, vamos cobrir o texto, alinhar propriedade. A propriedade text align nos permite alinhar os textos à esquerda, direita, centrada ou justificada. Agora devo avisá-lo para ser cauteloso ao usar texto justificado. O texto justificado é mais comumente visto nos jornais porque eles têm colunas muito pequenas, e por isso cria espaço no meio. As palavras para fazer o lado esquerdo e direito têm bordas retas. Então, se você olhar para um jornal como este ícone, você vai notar que suas colunas ou calhas criadas entre as colunas de texto. Agora, a razão pela qual você precisa ter cuidado ao usá-lo em um site é que muitas vezes sites têm parágrafos maiores e não pequenas colunas como jornais. Agora vamos em frente e começar pelo centro, alinhando nosso slogan e o nome da empresa. Então, após a cor em nosso seletor H um, vamos alinhar o texto com um traço no meio e, em seguida, vamos apertar o centro. Então, se você notar lá logo depois que eu terminei de digitar fora centro, o centro de nome da empresa se alinhou sozinho. Por isso, queremos também centralizar o nosso slogan. Então vamos copiar esta linha e colar isso em nosso seletor de slogan. Agora vamos em frente e role para baixo em nosso painel da mão direita e se notarmos aqui ou seção de informações
nutricionais está centrada, alinhada e um pouco difícil de ler. Então a esquerda uma linha que precisamos olhar para o elemento html que precisamos chamar. Então, se olharmos para a nossa mesa no lado esquerdo vai notar que se chamarmos a th tag todas essas tags podemos mudar para ser linha esquerda. Então, sob T d aqui, vamos à direita th como seu seletor e, em seguida, texto,
traço, alinhar e, em seguida, à esquerda. Então, agora, se formos em frente e olharmos para
isso, é muito mais fácil para eu seguir todas as diferentes palavras nessa coluna. Isso é tudo pelo texto Alinhar vídeo antes de seguirmos em frente. Vamos fazer um teste rápido e depois vamos discutir como mudar a família de fontes
31. Família de fontes: Todo mundo. Bem-vindo ao vídeo da família de fontes. Agora, a propriedade da família lutada nos permite alterar o lutado ou digitar melhor página da Web exibe Agora, porque este é um curso iniciante, eu só vou mostrar a você como usar fontes seguras da Web ou fontes que já estão instaladas no seu computador. Então vamos em frente e ir até o seletor de corpo aqui e depois da nossa
propriedade cor de fundo pressione retornar e então vamos digitar família traço fino, seguido de dois pontos. E então podemos digitar qualquer uma das fontes Web say que você vê em sua tela. Então vamos em frente e digite Ariel. E agora você vai notar que todas as fontes em nosso site no lado direito
mudaram para o vôo aéreo. Agora, ao digitar nossa família de fontes, queremos definir alguns fundos de reserva caso o computador de alguém não tenha o primeiro pote. Então vamos digitar vírgula, depois digitar Helvetica e, em seguida, vírgula. E, finalmente, queremos digitar Sands Dash Sarah, seguido pelo nosso cólon semi-colon. Agora, colocando San Serif como o último lutado aqui, isso garante que não importa quais fontes tenham em seu computador. Ele vai escolher uma fonte San serif, então não temos que nos preocupar que nosso site vai parecer extremamente diferente porque alguém tem um computador diferente Now. Nós também pode alterar o cinco de um elemento específico, adicionando a propriedade família fonte para apenas esse seletor. Mas, por enquanto, isso vai acabar com este vídeo. Vejo vocês e a próxima lição cobrirá a propriedade do estilo da fonte.
32. Estilo de fonte: todos e bem-vindos ao vídeo estilo de fonte. A propriedade de estilo de fonte nos permite alterar o estilo do texto para itálico ou oblíquo, ou podemos configurá-lo de volta ao normal. Então, para esta lição, queremos mudar nosso slogan para itálico para que ele se destaque um pouco mais. Então vamos em frente. E depois do texto, alinhar propriedade hit, retornar e digitar o estilo traço frontal e, em seguida, eu tallit. Então agora, se notarmos no lado direito, nosso slogan agora é uma noite Alec e parece um pouco diferente do resto de nossos textos. Agora, se mais tarde decidirmos que não queremos que seja itálico, poderíamos ou voltar ao normal, ou simplesmente excluir isso desde a propriedade mais alta. Mas queríamos ser um Talic, então vamos colocar isso de volta. Agora, antes de passarmos para o vídeo final da seção CSS, vamos fazer um breve teste
33. Comentários CSS: todos e bem-vindos ao vídeo final da seção CSS. Agora, se você se lembrar na seção html recuperado como criar comentários dentro do nosso código HTML. Agora, também
podemos deixar comentários em nosso código CSS, mas eles usam uma sintaxe um pouco diferente. Então, para criar um comentário, você começa com Ford Slash seguido de um truque de bunda, e então você tem que terminar o comentário com um truque de bunda e pagar barra. Agora podemos digitar qualquer coisa entre cada Astérix. Então vamos em frente e dar uma olhada no que podemos fazer agora. Normalmente, ao escrever CSS, seu documento começará a ficar cada vez mais longo. Se você está trabalhando em um site ou projeto muito grande, então comentários são uma ótima maneira de secionar tudo. Então, quando você olhar para o seu código mais tarde, é muito mais fácil encontrar o que você está procurando. Então vamos em frente e selecionar tudo do nosso rodapé e cortar isso e colar isso no fundo aqui agora, acima do nosso rodapé. Vamos em frente e criar um comentário com o truque do burro e então vamos digitar os detalhes do
rodapé em todas as maiúsculas seguido por um truque de bunda em outro Ford Slash. Então, agora, se estamos rolando pelo nosso CSS, podemos encontrar rapidamente os detalhes do rodapé. Agora, assim como HTML, também
podemos usar os comentários para ocultar ou desativar temporariamente nosso casaco. Então vamos em frente e desativar o rodapé aqui e ver o que acontece. Então agora, se você olhar, nossa cor de fundo do rodapé desapareceu. E se desfizermos isso e corrigirmos o nosso comentário, ele reaparecerá. Então vamos em frente e também adicionar um comentário aqui para o nome da empresa e vamos em frente e fazer tudo em maiúsculas, então é um pouco mais fácil de encontrar mais tarde. E vamos criar um comentário do Wilmore para o slogan da nossa empresa. Assim, assim como os comentários HTML, você notará que os comentários não aparecem no lado direito lá apenas para o próprio código
CSS e para você olhar mais tarde para tornar sua vida um pouco mais fácil. Quero agradecer a vocês por terem vindo até o final deste curso, mas recomendo que façam a última seção, que é um projeto final para praticar o que aprenderam até agora.
34. Projeto final: Ei aí. Bem-vindo ao projeto final. Este projeto foi projetado para ajudá-lo a praticar todos os elementos HTML e CSS que
abordamos neste curso, ao mesmo tempo que lhe dá liberdade para criar algo original. Depois de abrir o link, role até a parte inferior até ver as diretrizes finais do projeto e baixar o documento . Então, antes de passarmos para o vídeo de conclusão, haverá um questionário cobrindo todos os diferentes tópicos do questionário no curso. Se você tiver alguma dúvida, contato comigo através do formulário de contato no meu site.
35. Conclusão e próximos passos: Parabéns. Você chegou ao fim de como codificar sites básicos para crianças e iniciantes. Eu também gostaria de aproveitar este tempo para agradecer mais uma vez por se inscrever no meu curso. Você percorreu um longo caminho e aprendeu muita informação nova. Agora, lembre-se, aprender a codificar é algo que leva tempo e prática. A única maneira de realmente melhorar é praticar continuamente e continuar gastando mais tempo fazendo não apenas o que você acabou de aprender neste curso,
mas aprendendo mais. Você deve ter alguma dúvida sobre HTML CSS ou este curso? Entre em contato comigo através do formulário de contato no meu site. Desejo-lhe toda a sorte em seus futuros esforços de codificação.
Kevin Kennedy, Product Designer
