Programação HTML para todos

1. HTML a introdução de promo: Tudo bem. Bem-vindo ao curso. Meu nome é John Elder de Cody me ponto com e eu vou ser seu instrutor hoje e este curso eu vou ensinar-lhe codificação html a partir do zero. Quando terminar, você será capaz de ler, escrever e entender. HTML. O bloco de construção fundamental de cada site na Internet na primeira metade do curso vai aprender. HTML. Eu vou ensinar-lhe a sintaxe HTML e todas as principais tags de elementos em seus atributos na segunda metade do curso vai aprender a usar o framework CSS bootstrap para estilo ou páginas da Web e torná-los olhar incrível. Então, se você sempre quis construir sites, este é o curso para você. Se você tem pouca ou nenhuma experiência de codificação, este é o curso para você. E se você não quer gastar muito tempo aprendendo, mas realmente quer entender como tudo isso funciona, este é definitivamente o curso para você. Meu nome é John Elder. Eu tenho 35 cursos aqui, você, para mim mais de 42.000 alunos e críticas extremamente positivas. Mas se você não estiver satisfeito por qualquer motivo, ofereço garantia de devolução do dinheiro de 30 dias, sem perguntas. E ao contrário de muitos instrutores aqui, estou aqui respondendo perguntas o dia todo, todos os dias. Então, se há algo que você simplesmente não entende bem, ou se você tem alguma questão de algum tipo, atire em cima. Fico feliz em ajudar da forma que puder. HMO é um. As partes mais importantes do desenvolvimento Web e aprendizagem nunca é minis ano. Inscreva-se agora vamos codificar alguns html. 2. HTML a todos 1 Introdução e sublime: Tudo bem. Bem-vindo ao curso. Meu nome é John Elder de Cody me ponto com e serei seu instrutor hoje. Este vídeo eu quero passar apenas um par de minutos rápidos falando sobre todas as ferramentas que vamos precisar para este curso. Agora. Felizmente, HTML não requer absolutamente nenhuma ferramenta especial. Sabe, com a maioria das linguagens de programação. Ruby, você tem que baixar e instalar Ruby. Eu pensei que você tinha que baixar instalar material do banco de dados Python. Minha sequela. Você tem que baixar Install my sequela, Django. Mesma coisa, Node. Mesma coisa. Cada demos totalmente diferentes. Ele é construído em cozido em todos os navegadores da Web em existência. Portanto, não importa se você está usando o Chrome Firefox safari opera, qualquer coisa. HTML já está lá. Já está pronto para funcionar. Não há nada que precise fazer. Então, a fim de escrever código de citações de demonstração H, tudo que você precisa é de algum tipo de editor de texto, algum tipo de sem almofadas, algo para escrever. E nem precisa ser um editor de texto especial, embora deva ser, , você sabe, você pode usar janelas sem bloco, que é meio ridículo. Mas você poderia se quisesse. Então neste vídeo, eu vou recomendar o editor de texto que eu vou usar ao longo deste curso. É o editor de texto sublime. Então, se você for para sublime tex dot com, você vê, é uma espécie de imagem dele aqui. E isso é bom porque é um revestimento. Editor de texto Não importa qual linguagem de programação você está usando. Ele vai tipo de você ver aqui mudar de cor com base no código diferente que você escreve, e isso é realmente bom e meio útil, a fim de manter seu código mais legível e coisas assim. Então vá em frente e baixe isso. Está disponível para Windows. Mac Lennix não importa qual sistema operacional você está executando. É completamente grátis, , mas se você não gosta de texto sublime por qualquer motivo, e é um dos mais populares. Mas outra alternativa é nenhum pad plus plus no Google. Isso, e você vai notar que a grande diferença é que este é uma espécie de fundo branco onde sublime era preto e você poderia mudar a cor de ambos. Mas por padrão, sublime vem preto. Nenhum pad plus vem branco. Vou ver Adam é outro editor de texto popular. Vim tem um pouco mais complicado. Há um editor de código de estúdio visual se sua pessoa Microsoft, Eu não tenho certeza se ele é gratuito ou não. Mas como eu disse, vou usar texto sublime para este curso. Na verdade, eu poderia puxá-lo aqui, e este é apenas um editor de texto básico. Você pode escrever coisas e você pode ver que já está começando a mudar de cores, o que é legal. Uma das coisas boas sobre isso é se você vai para ver e, em seguida, sintaxe, você pode ver que você pode usar isso para qualquer linguagem de programação que você gosta. Agora temos HTML selecionado. Eu nem precisava fazer isso. Ele só adivinhou que eu estava fazendo HTML. Então isso é legal. Vejo trilhos, python, PHP, pérola tem um script, o que quiser. Você pode fazer em texto sublime. Então definitivamente verifique isso. Você vai precisar usar um editor de texto. Poderia muito bem usar este para me acompanhar. E por isso é mais fácil de seguir. Então eu acho que isso é tudo por este vídeo. No próximo vídeo, vamos pular direto e começar a aprender html 3. HTML a todos 2 O que é HTML: Ok neste vídeo. Vamos falar um pouco sobre HTML antes de entrarmos e começarmos a escrever alguma coisa. E eu quero falar sobre isso porque meio importante entender exatamente o que é. HTML significa uma linguagem de marcação de hipertexto, e a maioria das pessoas pensa nisso como uma linguagem de programação, uma linguagem de programação de computador. Mas tecnicamente , não é. Não é como PHP ou Pearl ou Ruby ou Python ou Java script. Não é uma linguagem de programação, mas age muito como uma linguagem de programação. Então nós tendemos a ser como, OK, sim, sim, é uma linguagem de programação, mas tecnicamente não é. É uma marca de linguagem, e, ah, essa diferença é importante. Basicamente, HTML é apenas uma série de tags, abrindo tags e fechando tags. E o que quer que esteja no meio, a etiqueta que fica marcada recebe algo é feito com ele. Você sabe, se você quiser fazer algo ah, título, título, você pode ver aqui nós temos uma tag título na tag aberta e uma tag fechada fecha designado por um pouco de barra e, em seguida, dentro daqui, isso é o que é Seu título, você sabe, se você quiser fazer um título, nós fazemos isso. H uma etiqueta. Qualquer coisa dentro desta etiqueta é o título. Então isso é tudo o que HTML realmente é. É apenas uma série de etiquetas aninhadas que abrem e fecham impostos. Agora, nem todas as tags HTML fecham, e vamos falar sobre isso em um pouco. Mas na maior parte, todos se abrem e fecham, e é só isso. Então, aprender HTML é realmente apenas uma questão de memorizar todas as tags e, em seguida, apenas usá-las . Sempre que você quiser fazer algo com algo, você quer fazer texto grande, você coloca em uma grande etiqueta de texto. Você sabe, vamos falar sobre todas as etiquetas diferentes daqui para frente. Eu não quero realmente entrar em nada disso ainda, mas HTML alimenta absolutamente todos os sites. Não existe um site. Não é feito de HTML. Todas as páginas da Web são feitas de HTML. Então você vai para qualquer site que você quiser e apenas clique com o botão direito e clique nesta fonte da página de exibição, e você pode ver o HTML real para essa página. Tudo está pronto para ver que não está escondido não é segredo. Você sabe, não é proprietário onde eles não querem que você veja. É muito óbvio. E está bem ali agora, tudo bem, tudo bem, fora do bastão, especialmente antes de você tomar este curso. Isto não vai fazer sentido nenhum. Mas à medida que avançarmos, você começará a entender que todas essas marcas diferentes são como elas são usadas e, ah, na verdade é muito, muito fácil e você deve pegá-la muito rapidamente. Como eu disse, é só uma questão de memorizar todas as etiquetas. E não há muitas etiquetas, então podemos derrubá-lo rapidamente. Agora há basicamente duas partes em um site. Aí está o HTML. E depois há o CSS, e o CSS é o que faz as coisas bem certas. CSS significa folhas de estilo em cascata, por isso tem estilo. HTML é como o framework, os ossos nuos, você sabe, o esqueleto da página da Web, e então CSS faz como eu disse, faz com que seja bonito. Adiciona cor, adiciona forma, coisas assim. Então, desculpe-me, Este não é um curso em CSS. Bem, tipo de toque nele aqui e ali, porque você realmente não pode fazer h demo sem CSS. Realmente? mas apenas aprendendo HTML, você não precisa sequer olhar para ele. É CSS. Então não vamos gastar muito tempo, se houver, falando sobre CSS. Muitas vezes as pessoas não aprendem CSS. Eles apenas usam o framework CSS como Bootstrap. E mais tarde, provavelmente veremos o bootstrap muito rapidamente e mostraremos como fazer isso. Então isso é meio divertido. E vamos olhar para isso no final do curso tão rapidamente antes de seguir em frente. Sabe, eu mencionei HTML é só uma questão de abrir e fechar tags, certo? Cada tag é chamado um elemento no elemento HTML e cada elemento pode ter atributos, atributos, ar apenas informações basicamente mawr no lado da tag, e nós realmente não temos quaisquer atributos aqui ainda. Então nós olhamos para esses, você sabe, alguns vídeos a partir de agora, uma vez que realmente mergulhamos e começamos a aprender essas coisas. Mas isso é muito bonito, um, elementos e atributos certos, uma tag e tem muitos atributos. Há vários tipos de comuns que você vê com frequência. Vamos falar sobre isso, e a única outra coisa realmente são apenas marcas abertas e fechadas, e elas fecham com essa barra pequena que você pode ver, , aqui e bem aqui, aqui e direito Aqui. Bem aqui e bem aqui. Você pode ver aqui é uma etiqueta, e ela tem uma etiqueta dentro dela. Eu mencionei anteriormente que html está aninhado. Esta é uma tag aninhada dentro de uma tag que é em si é aninhada dentro desta tag, e você pode ver que geralmente em Dent para mostrar que aninhamento agora, html não é realmente sensível a maiúsculas de minúsculas. Então, quero dizer, você pode fazer isso assim, certo? Oops. HTML não sabe a diferença. Este é apenas um válido é o que tínhamos antes. Mas assim é muito mais fácil de ler para humanos estúpidos. Certo? Então esta é a convenção que costumamos usar. Então, e isso é tudo por este vídeo. No próximo vídeo, vamos pular direto e começar a aprender as diferentes tags e deve ser divertido 4. HTML a estrutura de página HTML 3: Ok neste vídeo. Eu quero falar sobre a estrutura de uma página HTML, e nós já meio que olhamos para isso, mas eu quero falar sobre isso com um pouco mais de detalhes. Mas antes de fazermos isso, quero falar sobre como ver isto. Então nós temos algumas coisas aqui e vamos falar sobre o que tudo isso é em um minuto. Mas, a fim de utilizar isso para salvá-lo e vê-lo em um navegador da Web, nós viemos aqui para arquivar e depois salvar como e eu estou apenas salvando isso na minha área de trabalho, você poderia salvá-lo absolutamente em qualquer lugar. Não vamos empurrar este código para um servidor web. Neste curso. Vamos aprender HTML e fazer tudo localmente no nosso computador. Então salve isso onde quiser, Mas como eu disse, eu vou salvá-lo na área de trabalho e apenas salvá-lo como página dot html e você pode ver que eu não tenho que fazer isso porque, ah, html já está selecionado. Basta ver assim, e todas as páginas HTML terminam em dot html. É apenas a convenção, então é isso que os designa como páginas HTML para que possamos minimizar isso aqui. E então você pode ver aqui mesmo ele é paginado em HTML pequeno ícone cromo direito na minha área de trabalho. E para ver isso em um navegador da Web. Eu só arrastou isso e fazer isso e clique, entrar e boom aqui ISS para que você também poderia apenas digitar no arquivo. Consulte usuários nivelando a página da área de trabalho HTML. Este planeta plano é o nome do meu computador, então anos serão diferentes. Eu não acho que o mundo era plano. Só acho engraçado que algumas pessoas ainda façam isso. Então é por isso que dei o nome ao meu computador. Eu tenho um senso de humor estranho, então, qualquer maneira, ele recebeu. Este é um título, e este é um parágrafo que corresponde a este material aqui, e vamos falar sobre isso com mais detalhes em apenas um segundo. Então é assim que salvar uma página HTML. Como exibir a exibição em um navegador da Web que estou usando. O Chrome não importa o navegador da Web que você usa. Firefox Safari, qualquer navegador da Web. É tudo a mesma coisa. Então, para o resto deste vídeo, eu quero falar sobre a estrutura de uma página web, e todas as páginas da Web têm essa mesma estrutura. Eles começam com o tipo DOC e isso apenas diz ao arquivo, Ei, isso é HTML E na verdade, você pode se livrar desse arquivo desta linha. Você não tem que fazer isso, mas se você quer um tipo de código padrão, você deve colocar isso aí. Em seguida, temos uma tag HTML, e todas as páginas da Web são basicamente tags HTML, e você vê que tudo o resto está aninhado dentro desta tag HTML. Na verdade, se eu clicar nele, você pode ver este fechamento tag HTML destaca aqui em baixo. Então, tudo dentro daqui é uma demonstração de idade. Em seguida, temos esta tag head e a tag head não é visível em uma página web. Ele contém informações. Hum, se você conhece o CEO, às vezes você coloca as tags de CEO em suas metatags. Você poderia colocar, tipo, gráficos abertos tags de mídia social e coisas assim. Eles não aparecem na página, mas são usados para coisas como Oh, Google. A fim de me desculpar categorizar você listar seu site no Google. Eles são usados para certos sites de mídia social. Você sabe, se você postar um link no Facebook e a pequena foto aparecer automaticamente. Você pode designar isso dentro de sua etiqueta de cabeça e, como disse, ela não aparece em sua página, mas é usada para outras coisas. A principal coisa dentro de uma etiqueta de cabeça é esta tag de título, e você pode ver aqui que diz a minha página da Web. Se voltarmos ao nosso site, é aqui em cima. A parte de cima aqui. Você vê isso, a barra do navegador. Diz aqui a minha página da Web. Esse é o título do site. E, hum, isso é importante para ah, especificamente para cirurgiões como o Google e o Bing usarão esse tipo de lista em seu mecanismo de busca qual é o título do seu site, e isso é realmente o único usado para isto. Além disso, ele aparece bem aqui neste bar. Mas se você é como eu, normalmente tenho 1000 abas abertas e você nem consegue ler quando há tantas abas abertas. Eu acho que muitas pessoas fazem isso, então não é uma coisa super, você sabe, você sabe, importante, mas você ainda deve fazer isso. Então fechamos a etiqueta de cabeça e a etiqueta de corpo começa, e esta é provavelmente a coisa mais importante, tudo dentro da etiqueta de corpo e você pode ver aqui é onde ela se fecha. Tudo dentro daqui aparece na página, certo? Então, no nosso caso, temos duas coisas. Nós temos este H uma tag nesta tag P e H um significa título, e vamos falar sobre mais títulos, provavelmente no próximo vídeo ou no outro depois disso. E esta é uma guia de parágrafo, e isso apenas designa texto como um parágrafo, e falaremos sobre isso mais tarde, também. Mas você pode ver que apenas corresponde a essas duas coisas na tela. Isto é um título. Este é um parágrafo muito legal, muito fácil. Hum, e isso é realmente tudo o que há para ele. Então, como eu disse, todas as páginas da Web seguem esse formato básico. Agora, dentro desta tag corporal, você poderia ter 50 linhas de código 100 linhas de código, 2000 linhas de código, mas está tudo dentro deste corpo para e, finalmente, no final, nós apenas fechar nossas tags HTML. Então, volte para qualquer tipo de site que você gosta e veja a fonte da página e você verá na parte superior. Temos o tipo de doutor. Aqui está a cabeça. Aqui está uma daquelas metatags de que falei. Ah, aqui estão algumas outras etiquetas que eu não falei. Estas são coisas CSS. Falaremos sobre isso mais tarde. Algo bem aqui. Este é o link CSS. É para onde o CSS vai. Falaremos sobre isso mais tarde. Como eu disse, , todo tipo de mídia social e ver o corpo. Aqui está, finalmente, a etiqueta da cabeça termina. Então, dentro de sua tag de cabeça, você pode ter um monte de coisas e a maioria dos sites tem, e veremos isso no futuro. Mas é aqui que começa a etiqueta do corpo. Então aqui estão todas as coisas do corpo para esta página da Web, e ele continua indo e vindo. E você pode ver que nós nem fomos até a metade da página e depois para baixo. A tag body fecha na tag HTML fecha. Então esse é o formato básico de ah na página Web HTML. E como eu disse, todas as páginas da Web seguem este formato. Isso é muito padrão e muito simples. Então, você sabe, vamos usar esse tipo de modelo como um modelo inicial quase sempre e isso é legal. Então isso é tudo por este vídeo. No próximo vídeo, vamos entrar e começar a aprender elementos HTML individuais 5. HTML todos os quatro Tags de cabeçalho: Ok, então nós temos o básico fora do caminho. Agora é só uma questão de aprender todas essas tags. Então vamos começar. Nós já temos um par de na tela, então vamos começar com esta primeira tag Hum. Como eu disse antes, isso significa um cabeçalho. E é uma coisa muito comum, especialmente para, você sabe, sites que são blogs. Eles sempre têm um título do top ou sites de notícias com um você sabe, uma história que tem um título de topo. Muitas vezes você vai usar este H um e tags de cabeçalho são importantes porque eles fazem texto padronizado grande, mas também porque os motores de busca como o Google um sinal de importância para um H uma tag. Sabe, Google sabe que se você colocar algo em uma etiqueta H 1, você está dizendo: “ Ei, Ei, isso é importante. Este é um título, você sabe, é o cabeçalho número um, o cabeçalho mais importante, e ele meio que usa isso para categorizar sites. Então também é apenas legal visualmente, então há muitas tags de cabeçalho de seis, na verdade, se você poderia chamar esse cabeçalho ou chamar que muitos, mas vamos apenas passar por lá. Estes estão todos numerados, certo? Então, vamos embora. Isto é cabeça ou dois e copie isto. Então, se você salvar isso e eu vou bater no controle do meu teclado para salvar seu comando, eu acredito que você está em um Mac ou você pode ir até aqui e apenas clicar em arquivo salvar cada vez. Então, se eu voltar aqui, vemos que isso está indo para e você vai notar que é um pouco menor. Certo? E essa é a principal designação aqui que cada um é o maior. H dois é ligeiramente menor, H três, ligeiramente menor todo o caminho até H seis. Então vamos realmente rapidamente passar por aqui e ir H três, este é o cabeçalho três em cada quatro. Este é o cabeçalho para e h cinco. Este é o cabeçalho ou cinco. Ele sabe que estou abrindo e fechando cada um. H seis, aqui é o cabeçalho seis. E a coisa boa é sublime. Acabei de colocar o suporte no Ford Slash e ele automaticamente auto Kerekes para a etiqueta de fechamento . Nem sempre o faz corretamente. Você tem que prestar atenção, mas normalmente ele sabe qual deles você está tentando fechar, então e salve esta cabeça de volta para a nossa página e clique em Recarregar e você pode ver acima todo o caminho até o cabeçalho seis. Agora, o que acontece se tentarmos fazer um H7? Este é o cabeçalho sete. Salve isso. Volte para trás. Recebemos uma mensagem normal, certo? Isto é muito parecido com este texto aqui, porque não há um H sete tag, então nada realmente acontece. Na maioria das linguagens de programação de computador. Se você fizer algo errado, você recebe um grande erro irritado na tela ou o programa simplesmente não funciona. HTML é muito indulgente. Sabe, acabamos de inventar uma etiqueta agora às sete. Ele não existe. E em vez de receber um grandeerro de raiva, erro de raiva, ele apenas disse, uh, ele apenas meio que ignorou e cuspir texto padrão em vez disso. Então HTML como eu disse, muito indulgente. E, ah, uma das razões pelas quais é tão fácil trabalhar. Especialmente para iniciantes. Você pode cometer muitos erros e muitas vezes se safar com isso. Então, essas etiquetas veiculam a idade e voltam aqui bem rápido e apenas tipo de dizer, algumas coisas aqui na realidade, você dificilmente usará a maioria dessas etiquetas. Você vai usar H um sempre que você vai usar a idade às vezes para, tipo, subtítulos. Sabe, posso imaginar um cenário em que você usaria uma etiqueta H três, mas a cada quatro anos, tenho feito isso há 25 anos. Acho que nunca usei essas etiquetas. É bom saber que eles existem, mas com licença, você não vai usá-los com frequência. É bom saber que eles existem, mas com licença, Então isso é tudo por este vídeo. No próximo vídeo, veremos a tag de parágrafo. 6. HTML Todo mundo 5 Parágrafo e Pausa de linha: OK neste vídeo, eu quero falar sobre a tag de parágrafo ou tag P. E a etiqueta P tem uma etiqueta de abertura e uma etiqueta de fechamento. E aqui dentro há apenas texto. Agora, você pode colocar coisas na tela sozinho sem uma etiqueta P, mas você não quer. Você sempre vai querer um tipo de blocos de texto embrulhados em P tags. Isso realmente ajuda a manter as coisas organizadas e juntas, e veremos o porquê aqui em apenas um segundo. Mas primeiro de volta para a nossa página aqui, e eu apenas fui para este site lábios alguns pontos com e isso gera texto fictício. Então precisamos gerar algum texto aqui. Então eu quero um parágrafo como esse. E por isso vou viver. Destaque tudo isso e copiar Controle semente uma cópia, ou você pode clicar com o botão direito e selecionar Copiar. E isso é apenas um fundo falso que podemos brincar enquanto estamos aprendendo. Então, em vez disso, eu vou controlar V para colar, ou você pode clicar com o botão direito e clicar em colar, e eu vou colar em todo esse texto. Certo? Então, se salvarmos esta cabeça de volta para a nossa página e clicar em Recarregar. É perguntar se queríamos traduzir trans. Não. Então nós temos todo esse texto fictício e ele se estende todo o caminho até o fim de nossa página. Agora, com CSS, poderíamos estilizar isso e poderíamos dizer, OK, colocar isso em um bloco. Isso é apenas, você sabe disso ou o que quer que seja. Não vamos olhar para isso agora, mas repare como tudo vai junto e talvez não seja óbvio. Mas se eu vir aqui e colar isto sem uma etiqueta P e guardar isto, vê o que isto parece? Basicamente parece este ano, mas vamos pegar as etiquetas P aqui e ver a diferença. Ok, então aqui nós só temos esses parágrafos sem tags P. E se carregarmos isso de novo agora, está tudo unido, entende? E nós não queremos isso porque aqui nós claramente temos dois parágrafos. Queremos que eles sejam separados. Então queremos envolvê-los sempre nas etiquetas que estou inventando. E se eu fosse muito sério, provavelmente veria em Dent. Não, não, volte. Não me deixa em dívida por alguma razão. De qualquer forma, lá vamos nós. Sim. Recuado para torná-lo um pouco mais fácil de ler. Hum, você poderia fazer isso. Então volte aqui e recarregue. E agora olá. Esta tradução. Agora, temos dois parágrafos novamente. Então, muito importante separar diferentes blocos de texto. E isso é importante porque html realmente não entende a formatação. Certo? Para que pudéssemos ir “Olá “sozinhos. Uma linha diferente ali. Meu nome é John Elder, certo. Então essas coisas estão por todo o lado. Nosso editor de texto. Se salvarmos isso e voltarmos aqui e recarregarmos, colocaremos tudo em uma linha. HTML faz isso. Agora. São etiquetas que podemos anular isso, e falaremos sobre isso em breve. Mas, por padrão, mesmo que você embrulhe essas coisas em uma tag p e salve isso, isso não muda. Ele ainda coloca tudo em uma linha s então tenha isso em mente quando você está escrevendo código html e se livrar disso bem, vamos salvar isso para mais tarde. A peça da forma mais popular de separar as coisas. Mas você nem sempre quer fazer isso. Falaremos sobre isso um pouco mais tarde. Mas, caso contrário, agite isso muito rapidamente. Então, se dissermos isso, sabemos o que vai acontecer. Vai esmagar estes dois juntos e não queremos isso. Então uma coisa que podemos fazer é usar uma quebra de linha e a quebra de linha é apenas ser são assim agora quebras de linha de uma dessas tags que não têm uma abertura e uma tag de fechamento. Como eu disse, maioria das etiquetas tem abertura e fechamento, mas há um punhado que são apenas uma etiqueta e esta é uma delas, e é designada por esta barra dentro da etiqueta de abertura. Então isso é basicamente ah Kong Canton ation da abertura e a tag de fechamento em uma tag por meio de fazer essa abreviação com a barra direta bem ali. Sabe, quando você tem uma etiqueta aberta normal e uma etiqueta fechada, você fecha com essa barra. Isso é o que estamos fazendo aqui de qualquer maneira, embora uma quebra de linha só faça o que diz. Faz uma quebra de linha. Então aqui você pode tipo de dizer porque não é tudo um parágrafo, então este é o 1º 1 e este é o 2º 1 Ele tomou foi o 2º 1 começou bem aqui , mas ele veio agora para a próxima linha. Isso é o que a tag quebra de linha faz, e você pode usar mais de um direito que podemos fazer se quisermos tipo de espaço entre agora. Isso funciona e parece muito semelhante à tag P, mas é uma espécie de práticas recomendadas não fazê-lo assim, mas em vez disso envolva tudo em uma tag P. Então, apenas mantenha isso em mente. Então esse é o parágrafo que é, uh, quebra de linha no próximo vídeo. Acho que vamos ver o pré tag. 7. HTML a todos 6 Pre: OK neste vídeo, eu quero falar sobre o pré tag. E no último vídeo, nós dirigimos todo esse gobbledygook aqui, e nós meio que formatamos aqui. Mas essa formatação não foi traduzida para a página. Colocou tudo em uma linha. Agora, como eu disse, podemos anular isso. E podemos fazer isso com o pré tag. Então, para fazer isso. Primeiro de tudo, vamos nos livrar de todo esse texto pateta aqui. E em vez de embrulhar isto numa etiqueta p, queremos envolvê-lo numa pré etiqueta, está bem? E o pré tag tem um aberto e fechado, então fechamos assim, e lá vamos nós. Então, dentro da tag pré, ele mantém toda essa formatação da melhor forma possível. Então, agora, se voltarmos aqui, veremos isso. Olá aí. Meu nome é John Elder, e é meio que no mesmo formato geral e maluco que colocamos no editor de texto. Agora, você não vai sempre fazer algo assim porque é meio estranho, mas há usos para o pré tag, certo? De imediato, De imediato, posso pensar em uma poesia, por exemplo. Se você quiser colocar um poema em seu site e você sabe cada linha que você queria em uma linha separada , então você sabe que nós poderíamos ir. Nós somos os fabricantes de música. Somos os sonhadores dos sonhos. Poema tolo, eu sei, imaginando sozinho ver disjuntores e sentado ao desolado, eso desolado do beisebol. Vamos ver, talvez. Certo, então se salvarmos isso e voltarmos aqui, quem pegamos tudo, cada linha está em sua própria linha e você percebe que o texto é um pouco diferente, certo? É, você sabe, um pouco menor. E isso é o que o pré tag faz agora. Poderíamos também pegar tudo isso, passatempo e colá-lo novamente. Mas em vez da pré tag, poderíamos usar a tag P. Se salvarmos isto, acho que sabemos o que vai acontecer. Vai estar tudo numa linha. Isso não é bom. Mas você poderia, você sabe, fazer algo como, hum, bater uma linha em cada um no final de cada linha, certo? Isso vai colocar cada linha em sua própria linha. E esse tipo de funciona. Mas observe a diferença no imposto. Este é um tipo de texto normal. E isso é, você sabe, um pouco menor, estranho ou bonito texto. E isso é, você sabe, você sabe, um pouco menor, Agora você pode anular isso. Este tamanho estranho de texto com CSS. Como disse, não vamos entrar em CSS e seu curso muito em tudo. Mas é assim que você faria isso. Então essa é a pré tag. Bem simples. Não é uma etiqueta muito comum. Você não vai usá-lo com tanta frequência, mas é que ele tem seus usos de vez em quando. Então, no próximo vídeo, vamos olhar para a citação. 8. HTML a todos 7 BlockQuote: Ok. Este vídeo que eu quero falar sobre citações e citações eram muito comuns, especialmente para, como, como, sites de notícias e artigos e mensagens de bloqueio. Você costuma citar coisas. Você quer que essas citações estejam em torno de sua citação. E você poderia fazer isso com algo chamado “Block Quote tag”. E vamos bloquear aspas. Talvez não queiramos acabar com isso. Lá vai você. Hum, ok. Então eu gosto de outras citações. Ele tem um tags abertas e fechadas. Então vamos salvar isso e dar uma olhada e ver como é aqui e novamente. Vai tudo em uma tela. Eles estão todos em uma, uh, linha aqui. Não queremos isso para que possamos aninhar dentro de um quarteirão. Cite o nosso pregar ag. Tudo bem, e não digite. Agora, quando você ninho, você quer fechar a coisa mais próxima. Então, você sabe, nós abrimos e fechamos. Você realmente não quer fazer algo assim, certo? Certo. Isto é errado. Ou mesmo isso é errado, certo? Provavelmente ainda vai funcionar. Lá vamos nós. Mas você quer fechar a coisa mais próxima. Então, uh, no final disso, a etiqueta mais próxima é a pré-taxa. Vamos fechá-lo. O próximo mais próximo é a citação de bloco. Então fechamos isso. Então, se você disser isso e voltar aqui, boom, teremos a mesma coisa. Agora não há aspas, aspas reais em torno desta coisa. Mas isso é só porque não designamos aspas no CSS. E você faria isso? Eu disse que começou. Isto não é um curso de CSS, por isso não vamos falar sobre isso. Então essa é a citação do bloco. Agora, há outras maneiras de citar as coisas. Hum, nós poderíamos ir. O lema de Kuta me ponto com é. E se você tiver apenas uma pequena citação, você pode usar isso. Só a etiqueta. Aprenda a codificar na Kota me dot com. Tudo bem. Então você poderia fazer algo assim. E as aspas realmente aparecem para este menor. Então isso é meio legal, e você vai notar que coloca tudo em uma linha, que é o que queremos neste caso particular, um, um, então essas marcas de recordação essas aspas aéreas, eu deveria dizer, e preto citação e o pequeno que ou o quê? Você quer olhar para a 01 coisa deles eu poderia mencionar que você pode colocar uma citação aqui. Isto é um atributo, certo? Falamos sobre atributos muito brevemente anteriormente no interior do forno, html fora elemento. Você pode ter atributos. E um dos atributos são os atributos de citação. Então, você sabe, nós poderíamos fazer algo como Arthur. Oh, Sean no mar em eu soletrar isso, mas alguns assim ou muitas vezes você vai ver, hum, como, aqui em baixo, nós poderíamos ir. Site é igual a http ou forward Kotomi dot com. Certo. Então salvamos isso, voltamos aqui e batemos. Recarregar. Muitas vezes com atributos, você não pode realmente vê-los. Você, não há nada. Você sabe, mesmo que nós pairemos sobre o mouse aqui. A caixa de citações não aparece nem nada, mas isso é bom para de motoresde busca. Se o Google escaneia essa coisa quando o Google escaneia um site, eles olham para a fonte da página e pegam todas essas informações. E, uh, então eles podem fazer alguma coisa com ele. Se quiser colocar Citation, , é assim que funciona. Então, no próximo vídeo, vamos começar a olhar para links 9. HTML todos 8 links: Ok neste vídeo. Quero falar sobre links. E links são uma parte importante de qualquer site. Se voltarmos para cá, e vamos voltar para, digamos que as ligações com pontos de Kotomi são como estas coisas aqui em cima, certo? Você clica em um link, vai para outra página, ou ele vai para algum site externo, esses links aéreos e, você sabe, você sabe, links estão em todos os lugares em html. Uh, apenas, você sabe, tão comum quanto você pode ter nossa página de volta aqui. Tudo bem, então como vamos? Estes links são super fáceis. Nós apenas usamos a tag A e links a tag A tem uma tag de fechamento barra a agora, dentro aqui, precisamos de um atributo. E os atributos de ligação é h r e f realmente não sei por que isso não é h r e f significa ref . Sim, Sim, não faço ideia do que isso significa, mas aqui dentro, você coloca onde quiser que essa coisa aponte. Então, se você quiser um apontado para um site externo, poderíamos ir http ou dois pontos para barra ford slash um Kotomi dot com, por exemplo. Agora, dentro, aqui é onde o texto do link vai, então nós poderíamos apenas digitar kodori dot com ou apenas me revestiu. Certo? Então isto é o que vai aparecer na página web. Então, se você salvar isso, voltar aqui e apertar recarregar, nós vemos revestida. Se clicarmos nele, ele vai para Kotomi. Muito legal. Agora, você também pode fazer links internos se você tiver seu próprio site. Então, por exemplo, temos Estamos na página dot html. Nós poderíamos ter, você sabe, página dois pontos HTM. Oh, isso é perfeitamente bom para, no nosso caso, nós não temos uma página dois, então se clicarmos nisso, nós temos um arquivo não encontrado. Mas se tivéssemos uma página para ele, iria para página fazer certo? Muito legal? Hum, há outros atributos ou para links. Hum, você poderia colocar na verdade, vamos levar isso de volta eles vão. Outro atributo é target. E vamos tentar novo. Acho que é isso que é. Já faz um tempo que não faço um “Sim”. Veja, uma nova aba aparece, certo? Então, se você quiser que seu link para abrir em uma nova guia do navegador da Web, você apenas usar os atributos que é alvo igual a novo. Muito legal. Agora dentro de um Aqui temos texto, mas você também pode obviamente vinculado a imagens. Vamos nos livrar desse alvo. Salve isso. Volte e bata. Recarregar. Acesse este site, por exemplo. Aqui em cima. Certo. Este é um logotipo. Se eu clicar nele, ele vai para o site. Esta imagem bem aqui. Se eu clicar sobre isso, ele vai para esta página web. Então ainda não falamos sobre imagens. Falaremos sobre isso no próximo vídeo, mas a mesma coisa. Você acabou de colocar sua etiqueta de imagem bem aqui. Rápido em uma tag A e torna-se link Herbal. Vem clicável. Basicamente. Então isso é tudo o que há para os links. Muito simples. Lembre-se que a tag A H R E f é os atributos de link. Ninguém se lembra do que representa, mas é assim que se faz uma ligação. No próximo vídeo, veremos imagens 10. HTML Todos os 9 imagens: OK neste vídeo, Eu quero falar sobre imagens e imagens ou super simples. Nós apenas usamos uma tag de imagem e a tag de imagem é I I I I I 'm G S R C. Agora as tags de imagem são outra daquelas tags que não têm uma tag de fechamento. E normalmente quando isso acontece, fazemos isso. Não temos que fazer isso. Você pode. Isso é válido, html se você quiser, mas você não precisa. Então o elemento HTML é I m G. Esta é a tag de imagem. Dentro disso. Temos um atributo chamado SRC e SST. SRC significa fonte. Então você quer apontar isso também, qualquer fonte de suas imagens. Então eu tenho esta foto do meu cão Aspen bem aqui na minha área de trabalho. E uma vez que está no mesmo diretório, podemos apenas digitar o nome dele. É um arquivo PNG, e é isso. Se tivéssemos isto num directório especial chamado Imagens, podíamosfazer algo assim, certo? Se tivéssemos isto num directório especial chamado Imagens, podíamos fazer algo assim, Se isso está sentado em 1/3 sites do partido em algum lugar como um cdn de algum tipo de gestão de entrega de conteúdo A para B s objetivos, Eu preciso de um B s ou Cloudflare ou algo assim, Você poderia ir, você sabe, Kotomi imagens dot com barra barra barra aspen ponto PNG. Tudo bem, mas como eu disse, estamos fazendo isso localmente em nosso computador, e esse arquivo está apenas sentado na minha área de trabalho para que pudéssemos salvar isso e voltar para nossa página e clicar em Recarregar e boom”. Aqui está a imagem. Agora, esta é uma imagem gigantesca, certo? Então não é. É gentil ou até difícil ver, mesmo se rolarmos. Isto é aspirina. Ela é um bebê. Husky, querida, ela tem, eu não sei, 18 meses de idade. Talvez nesta foto, algo assim. Ela é um furacão, então isso é legal, mas isso é meio inútil, certo? Isto é gigantesco. Agora, normalmente, você pode editar a imagem e algum tipo de, você sabe, loja de fotos ou gimp ou algo assim e torná-la menor. Ou você pode usar outro atributo, que é a altura no com. Então vamos altura igual e com iguais. E nós poderíamos apenas, você sabe, inventar algo para que pudéssemos ir, hum, 500 por, hum, 700. Eu não sei. Veja como isso parece salvar isso, e isso parece um pouco melhor, mas obviamente ele aparece na tela. Mas a proporção pode não estar correta para esta imagem, então podemos obter distorções. E o que eu quero dizer com isso é, por exemplo, em vez de 700 E se eu escolhesse ah 900? Bem, ele fez isso automaticamente. Para nós. Está anulando isso. Mas uma maneira de garantir que você obtenha a proporção correta toda vez é apenas usar um desses. Então, se usarmos apenas com 900 isso manterá a proporção original da imagem intacta . Se você não sabe quais são as questões de aspecto, essa é a dimensão real. A coisa é que, originalmente, vai manter os intactos e fazer com que pareça bom. Então, isso é fixe. Mais uma coisa sobre imagens. Há outro atributo, e esse é o texto todo A L T. E isso é apenas Bem, vamos apenas brincar com isso. Vamos lá. Diga olá para Aspen. Guarde isso aqui e aperte recarregar. E como a maioria você sabe, atributos, nada realmente é visível. All tag realmente não aparece de forma alguma ou forma. Mas isso é bom para o motor de busca de motor de busca, especialmente o Google. Amo todas as etiquetas. Se você quiser que uma pequena coisa apareça, você pode usar a tag de título. Salve isso e aperte. Recarregar. Agora, se passarmos por ali, temos uma caixinha que diz: “ Diga olá ao Aspen”. Então isso é meio legal. Então, essas são imagens? Como eu disse antes, podemos transformar isso em um link para que pudéssemos ser iguais. Como eu disse antes, Http. Kotomi dot com e então algo assim, certo. Se dissermos isso de volta aqui no hit reload Não, você vê, nós clicamos nele. Movimento vai para Kotomi dot com. Então, é tão fácil fazer links de imagens ou fazer com que as imagens vinculem ervas. Se você quiser dizer assim, hum, muito legal. Então essas imagens de ar, essas imagens de ligação de ar. No próximo vídeo, vamos começar a olhar para as mesas 11. HTML 10 listas: Ok neste vídeo. Quero falar sobre listas agora. Vamos falar sobre mesas neste vídeo, mas acho que vou guardar isso para o próximo. O vídeo é um pouco mais avançado, e antes de fazermos isso, eu quero deslizar e listar. Então as listas são super importantes, muito mais importantes do que você imagina. E basicamente, o que é uma lista de listas é apenas uma lista com marcadores, certo? Portanto, há principalmente dois tipos de lista. Há listas ordenadas e novas listas ordenadas, e uma lista A Norden é como um ponto ao lado de cada item. São só pontos de bala lá, fora comum. Só uma lista. Uma lista ordenada é, você sabe, como 12345 Eles estão em ordem. Então, como fazemos essas coisas? Bem, vamos entrar aqui e criar, hum, hum, minha lista incomum e vamos colocar que não temos que colocar nada aqui, então, para criar uma lista, nós começamos com você. L e que significa Anno lista ordenada, e podemos fechá-la com a etiqueta de fechamento agora, dentro daqui, cada item da lista é um L. I tag direito l I e basicamente cada linha que você quer torna-se um objeto aliado. Então, vou copiar isto. E 2345 Então isso é, hum, uh, tarefas para hoje. Vamos passear com o cachorro, lavar a moto. Está muito, muito sujo no momento. Você vive na poeira do deserto, sempre. Vamos ver. Leia um livro, veja o que mais precisamos para lavar a roupa e depois comprar mantimentos. Certo, então se salvarmos essa cabeça aqui e clicarmos em recarregar, obtemos essa pequena lista ordenada e você percebe que há pequenos pontos de bala a seguir, cada um muito legal e muito útil. Agora você acha que sim. Bem, em cada demo, você vai usar balas para um monte de coisas diferentes. E isso porque quando você adiciona CSS duas listas, você pode fazer todos os tipos de coisas estranhas. Muitas vezes, quando você vê como um bar de valetes no topo do site, você sabe, como, como, hum, voltar para o meu site, esta barra de valetes do topo daqui. Eu não me lembro, mas eu acredito que isso é criado com uma nova lista de pedidos e, em seguida, com CSS. Acabamos de dizer ao navegador para ignorar o pontinho Você pode torná-lo invisível tipo de coisa, um conjunto de muito comum para coisas assim e apenas um monte de outras coisas. À medida que você começa a se tornar mais avançado com o desenvolvimento da Web, você só vai usar listas. Ah, muito, é estranho porque você sabe quem usa listas, mas, hum, é verdade. E como eu disse, com o estilo CSS enfraquecer, esses pontos, poderíamos fazer os pontos desaparecerem completamente. Podemos mudá-los também. Pequenos diamantes. Podemos mudá-los para o que quisermos. Realmente? E isso é muito legal. Então essas são as listas Norden. Vamos fazer uma lista ordenada. Então, minha lista encomendada. E para fazer isso, acabamos de nos mudar de um U L para um ol o significa lista ordenada, certo? Super simples. Então salvamos isso, voltamos aqui e clicamos em Recarregar quando virmos 12345 e você notará que o navegador colocou esses números em si mesmo, certo? Nós não precisávamos, você sabe, colocar um próximo. Cada 123 etcetera. Fez tudo por nós. E você também vai notar, uh, há, você sabe, este um pouco de formatação aqui. Certo. Aqui é onde o nosso texto está aqui. Todas essas coisas foram meio que recuadas um pouco. E isso é o que Doran ordenou ou em uma ordem de lista fará. Então está bem legal agora. Como eu disse, você pode mudar todos os tipos de coisas sobre isso com CSS. Não vamos entrar nisso, mas você pode fazer um atalho por aqui usando os atributos de tipo. Não vamos entrar nisso, Então, se formos para a lista ordenada, um, tipo é igual a um capital. Um terno que se parece com boom. Agora ele vira de 12345 eu fui para um B C d e. direita. Então isso é interessante se formos em minúsculas A, obtemos letras minúsculas que vão. Hum, nós podemos ir. Vamos ver. Aqui está. Tipo um. Eles voltariam aos números. Essa é uma espécie de padrão. Podemos diligir. Esta é divertida. Enfraquecer fazer capital. Eu recebo algarismos romanos. Lembra-se? Números romanos da escola primária? I, I v e V um também Enfraquecer Fazer minúsculas. Eu vejo isso aqui atrás e aperto Recarregar. Temos algarismos romanos em minúsculas. Muito legal. Agora também podemos fazer aninhamento dessas coisas. Então vamos nos livrar disso e vamos mudar de volta para uma lista inalterada. E então nós salvamos isso bem rápido e apenas olhamos para ele, obter nossa lista de honrados regular. Mas digamos que queremos acrescentar algo. Então vamos criar outra lista dentro daqui para comprar mantimentos. E só para mostrar como isso parece, vou copiar toda essa linha e colocá-la aqui em cima. Então está dentro da nossa lista. E assim para fazer isso, nós apenas gostamos disso e dentro deste eu eu enfraqueço, apenas criar uma outra lista inteira. Vamos criar uma lista ordenada. E dentro disso, queremos hambúrguer. Queremos queijo. Nós queremos ah, pãezinhos. E nós queremos, sei lá, laranja use suco de laranja estranho com hambúrgueres e depois podemos fechar isto. Então você vê, isso está aninhado dentro desta lista Norden. Então, como é que isto se parece? Moon, só temos 1234 dentro daqui dentro. Você sabe, neste item de lista tão muito, muito legal e ah, super útil. Então eu acho que isso é tudo para listas. No próximo vídeo, vamos começar a olhar para as mesas 12. HTML 11 tabelas: OK neste vídeo, eu quero falar sobre tabelas e tabelas são uma espécie de tópico HTML mais avançado. Mas há algo que você vai usar, provavelmente para sempre. Eles são apenas tipo de sempre usado em HTM. Oh, e aqui eu criei uma tabela muito básica. Certo. Então temos uma tabela é basicamente apenas linhas e colunas. Então, isto é uma fila. Estes são os nossos lábios. Isto é uma fila. Esta é uma linha, você sabe que a rosa vai da esquerda para a direita. Colunas sobem e descem. Então, cor favorita. Este é um endereço de e-mail de coluna. Este é um nome de coluna. Isto é uma coluna. Então, quando você está pensando em tabelas, basicamente você está apenas pensando em linhas e colunas. Então, como construímos essa coisa? Bem, não é tão difícil. Um pouco complicado, mas não tão ruim uma mesa começar. Eu já escrevi o código, então vamos passar por isso. Agora Uma tabela começa com uma tag tabela e você pode ver a tag tabela fecha. E dentro daqui, dei-lhe um estilo com 50%. Tecnicamente, Tecnicamente, isto é provavelmente um tipo de CSS. CSS é folhas de estilo em cascata. Já mencionei várias vezes ao longo deste curso, mas para este caso, tive um pouco de CSS. Vamos falar sobre isso. Provavelmente o próximo par de vídeos, mas eu dei-lhe um com de 50%. Então, se voltarmos aqui, você pode ver que ele passa a metade da tela aqui. Isso é 50%. Se eu deixasse isso fora, iria esticar todo o caminho através da tela. E eu não tenho tantos dados aqui, tantas colunas, então isso seria meio estranho. Então, a seguir, como eu disse, tabelas têm linhas e colunas. E para criar uma linha, use uma tag de linha de tabela, uma tag TR aqui para criar uma coluna que você cria você, ah, criou tag T D, que significa dados de tabela. Agora, Teddy Tag vai dentro de uma etiqueta TR, e falaremos sobre isso em um segundo. Então vamos andar por aqui. Vamos ver esta primeira parte aqui. Eu criei uma linha da tabela de linha e eu defini uma linha esquerda. Se tirarmos isso e salvarmos e recarregarmos, você pode ver todos esses cabeçalhos sendo batidos, então eu quero que eles se alinhem à esquerda. Se tirarmos isso e salvarmos e recarregarmos, você pode ver todos esses cabeçalhos sendo batidos , Então eu só dei na linha esquerda e você pode fazer uma linha esquerda. Você pode fazer uma fila, certo? Você poderia fazer um centro de linha. Eu acho que são basicamente isso. Então guarde isso. Agora temos estas etiquetas abertas e fechadas. E o que são estes? Bem, significa cabeça de mesa e isso é exatamente o que parece. É um tipo de cabeça ou uma fileira. Podíamos ver as cores em negrito, ligeiramente diferente e basicamente, este tipo de nomes, as diferentes colunas. Você não tem que ter isso. Você poderia deixar isso fora. Na verdade, se fizermos isso, tiramos toda essa seção de TR e salvamos. Isto ainda é completamente válido. Nós simplesmente não temos os títulos de tabela pequenos agradáveis para explicar o que esses dados são tão importantes para usar suas tags th. E como eu disse, todas as filas estão dentro de uma etiqueta TR. Cada todos os dados de uma linha vai dentro de uma tag tr. Então, do TR de abertura e do fechamento tr tudo aqui é uma coluna. Então temos três colunas. Então, fechamos isto. Agora, se quisermos outra linha abaixo disso, criamos outra tag TR e você pode ver abrir e fechar. E dentro desta etiqueta queremos. Precisamos de três colunas porque temos três colunas de cabeçalho de tabela, certo? Então cada um destes corresponde a um th assim o 1º 1 é o 1º 1 aqui. Nome. A 2ª 1 é a 2ª 1 aqui endereço de e-mail, e a 3ª 1 é a 3ª 1, então eles têm que coincidir, certo? Se nós, por exemplo, criarmos outra tag TD e apenas digitar algo e salvar isso, você pode ver que tudo está fora de controle, certo? Porque não há uma coluna extra aqui, e isso parece estranho. Tudo fica misturado. É só que é estranho. Então você tem que ter certeza de que em cada t que você cria tem o mesmo número de TD e há algumas, hum, exceções para isso e vamos falar sobre isso. Talvez o próximo vídeo, eu acho. Mas, na maior parte, mantenha-os todos consistentes. Então salve isso Então nós temos este TR tags a linha da tabela dentro, nós temos TV s T D significa dados da tabela são basicamente colunas. E então temos uma estrada, endereço de e-mail de John John e a cor do John Forever. Se quisermos outra linha por baixo disso, temos que criar um novo e preenchê-lo com os mesmos dados. A mesma coisa se quisermos outra fila depois disso. Então temos três filas aqui e depois termina. Então nós temos a nossa etiqueta de mesa de fechamento e dar uma olhada nisso novamente quem nós apenas temos isso. Então isso é realmente tudo o que há para as mesas. Hum, agora, esta é uma mesa muito básica. É muito simples. Não há nenhum tipo de estilo. Você pode. Você pode estilizar tabelas de um zilhão de maneiras diferentes, e você provavelmente vê direito. Você sabe, bordas de rosas listradas, cores diferentes. E não vamos falar sobre isso neste vídeo ou no próximo vídeo. Isso é uma coisa CSS, mas você pode fazer algum tipo muito básico de coisas como aparecer para tabela. Queremos dar a isto uma fronteira básica. Você vai. Borda é igual a um agora, como você disse, você normalmente faria CSS para isso e você verá por que aqui agora. Se salvarmos este boom, chegaremos a esta fronteira. Mas você sabe, isso é bem feio. E você pode estilizar isso um pouco com HTML. Mas eu não vou te mostrar como, porque é uma coisa de identidade obsoleta. Você nunca vai fazer isso. Você sempre vai usar CSS. Nós realmente não vamos falar sobre CSS, então não há muito mais para eu dizer sobre isso, mas apenas tipo de entender que você pode mudar as coisas em uma tabela, fazer com que pareça todos os tipos de maneiras diferentes, e nós pode falar sobre isso um pouco mais tarde. Mas, por enquanto, vamos deixar assim. Então, Então, o que mais podemos fazer? Tudo o que eu quero falar neste vídeo No próximo vídeo, vamos falar sobre um par de tópicos de tabela ligeiramente mais avançados Call span e Rose span e, uh, uh, ver o que é isso tudo sobre. Então isso vai ser no próximo vídeo 13. HTML 12 tabelas avançadas: OK neste vídeo, eu quero falar sobre um par de tópicos de tabela mais avançados. Fizemos coisas básicas de mesa no último vídeo deste vídeo. Quero falar sobre o Roe abrangendo a extensão da chamada. Então aqui temos apenas um tipo básico de rosa e colunas, certo? Mas você pode querer que certos campos se estendam. Por exemplo, todas as colunas são todas as estradas. Então, como você faz isso? O que vamos ver neste vídeo. Então vamos voltar aqui. E primeiro, digamos que queremos um cabeçalho em todo o topo e queremos que a coisa toda se estenda sobre todas essas três colunas. Então isso é bem simples. Acabamos de voltar aqui e queremos isto aqui em cima a primeira coisa. Então vamos criar um novo TR abrir e fechar a tag e vamos criar um th e queremos que ele abranja três colunas. Então nós usamos o intervalo de chamada e dissemos que igual a três e fechamos isso e vamos dizer que nós só queríamos dizer, hum, minha mesa, certo. Então vamos salvar isso e dar uma olhada quando tivermos esticado todo o caminho e você notar que não há, hum, linhas no meio aqui. Como para todos os outros. Agora, podemos ver isso muito claramente porque ainda temos esse tipo de fronteira pateta podemos ver isso muito claramente porque ainda temos esse tipo de fronteira pateta. Então, se eu tirar isso e salvar isso, torna-se um pouco mais difícil de dizer. Mas eu posso jogar um pouco de cor aqui, então, hum, vamos. cor BG é igual, e eu só vou dar isso, ah, uma espécie de cor cinza. Salve isso. E boom. Agora nós temos, você sabe, ele se estende por todo o caminho através daquela escola. Como eu disse, você vai usar normalmente coisas de cor como esta usando CSS algum dia. Apenas usando uma espécie de uma maneira antiga de retrocesso. Costumávamos fazer isso assim antes do CSS ser inventado. Isso vai dizer-te há quanto tempo. Quero dizer, 20 anos atrás, eu costumava fazer isso, hum, então eu não recomendo que você faça assim. Vamos colocar essa borda de volta aqui rapidinho. Dê uma olhada. Ok, então isso é intervalo de chamada. Nós também temos uma extensão de linha, então vamos voltar aqui e digamos aqui no nosso cabeçalho principal queremos outra cabeça de tabela e vamos apenas chamar esses dados e queremos esticar isso ao redor. Só não vou esticar. Três filas, eu acho. Dê uma olhada aqui. Então 1234 linhas. Queremos que isto estique todas as estradas aqui. Então, como fazemos isso? Bem, queremos esticá-lo. Queríamos estender surgiu. Usamos a extensão da linha. Hum e nós queremos definir isso igual a quatro. Agora, isso vai nos dar um tipo de problema. Porque agora isso não se estende por todo o caminho porque nós adicionamos outra coluna. Certo? Então nós também precisamos ajustar este para cima para chamar span quatro se quisermos esticar todo o caminho, certo? O boom que conserta isso. Agora, finalmente, essa coisa de dados é esmagada para a esquerda. Podemos mudar isso também. Assim como fizemos antes. Com este alinhamento, nós também podemos ver, apenas adicionando uma linha igual a Mas digamos centro, salve isso. Voltar não funcionou. O que eu fiz? Não guarde. chamada abrangeu quatro. Alinhar é igual ao centro. Salvar não está funcionando. Deve funcionar. Área errada. Era o que queríamos na coisa dos dados. Então, ok, então linha é igual ao centro mais. Café esta manhã. Ok, Boom. Agora os dados são esmagados para o centro, e isso parece muito mais agradável. Então estes eram alguns tópicos básicos, bem, não básicos, bem, não básicos, mais avançados de tabela. E você pode, você sabe, misturar e combinar todos esses tipos de maneiras diferentes. Poderíamos adicionar cor a este, se quiséssemos. Não vamos, mas sim, mas sim, essas são as tabelas básicas no próximo vídeo. Estive falando sobre CSS e como não vamos aprender CSS. Há algumas coisas que precisamos aprender sobre CSS. Vamos ver isso no próximo vídeo. Basicamente, vou mostrar-te que não vamos aprender CSS. Eu só vou mostrar a vocês como usar CSS. Como incorporá-lo em uma página HTML. Você definitivamente precisa saber disso. Então vamos olhar para isso no próximo vídeo 14. HTML Todo mundo 13 CSS: Ok neste vídeo. Quero falar sobre CSS. Agora, eu sei que eu tenho dito a vocês durante todo este curso que nós não vamos lidar com CSS. E nós não estamos realmente Eu não vou te ensinar CSS. Eu só vou mostrar as três principais maneiras que podemos integrar CSS em uma página web e isso é importante. Você realmente precisa saber disso. Então, há três maneiras e vamos apenas percorrer O primeiro caminho está na fila e nós já olhamos para isso um pouco. Vemos bem aqui em nossa tabela, temos esses atributos de estilo e, em seguida, este e, em seguida, fechando aspas. Isso está na linha CSS. Encontramos no elemento html e dentro dele na linha. Nós adicionamos CSS, e você pode fazer isso praticamente para qualquer elemento html CIA. Aqui está a nossa etiqueta H 1. Nós poderíamos ir estilo e então apenas escrever um pouco CSS cor azul tentar e talvez soletrar direito. Uh, e você pode ver CSS geralmente é uma coisa à esquerda com dois pontos, e então eu penso à direita com dois pontos semi cólon. Então estes são o tipo de como CSS muitas vezes parecem. Então, se salvarmos isso, volte aqui e aperte Recarregar. Boom! Isso fica azul. Muito, muito simples. Certo? Para que pudéssemos fazer isso. Livre-se disso por enquanto. Hum, você também pode fazer isso. Hum, vamos ver. Eu não sei como eu quero dizer isso, hum, internamente, eu acho. E internamente não deve ser confundido com na linha é que aparece na seção principal do nosso documento. Nós podemos apenas criar uma tag estilo e ela abre e fecha e qualquer coisa dentro daqui, isso é apenas você apenas escrever CSS bem aqui. Agora, uh, aqui, eu vou escrever um pouco, e vamos falar sobre isso em apenas um segundo. Mas você pode ver o problema aqui. Eu fiz apenas um pouco, e já está começando a ficar confuso aqui em cima. Quando você vir avaliar, você usa páginas e páginas dele. Quero dizer muito. E você não quer colocar tudo isso em seu documento principal em cada página do seu site, sabe? Além disso, se você tem 1000 páginas em seu site, você tem que fazer 1000 vezes com CSS, e você não quer fazer isso Então este não é um tipo de ah método que você quer usar a menos você tem apenas uma pequena coisa que você precisa dio. Então aqui, um só escreveu um CSS rápido e vamos estilizar a nossa mesa. A tabela, essa tag th e a tag TD. Eu quero dar a isso uma borda de um pode ficar sólido, torná-lo preto, e então colapsá-lo. E pelo colapso, pudemos ver um tipo de olhares levantados aqui. Parece quase que tem um tridimensional. Você sabe, há dois, você sabe, há um pouco como uma fronteira, certo? Você pode ver que parece diferente. O colapso livra-se disso. Só queremos resolver a linha. Eu vou descer aqui para a nossa mesa. Vou me livrar dessa etiqueta de fronteira que colocamos lá. Vamos salvar isso e dar uma olhada e ver como isso se parece. Boom. Agora parece um pouco mais elegante, um pouco mais moderno, e isso é sempre CSS. Agora, isso é tudo. Internalizado está tudo na página em si. E vamos em frente. Vou copiar isto e livrar-me dele. Você normalmente não quer fazer isso. Como eu disse, a menos que seja só um pouquinho. Apenas um pequeno trecho de código CSS normalmente, o que você vai querer dio e esta é uma espécie de a maneira principal de fazer CSS é externo, e por externo, quero dizer, quero dizer, queremos criar uma folha de estilo CSS externamente e, em seguida, vinculados a ele. Então eu vou vir aqui para arquivar novo e vamos apenas dizer que este arquivo salvar como, e vamos salvá-lo no desktop mesmo diretório onde salvamos nossa página. E eu vou chamar esse estilo de ponto CSS em todos os arquivos CSS terminando ponto CSS significa folhas de estilo em cascata. Nós não nos importamos. Então eu quero colar no mesmo código de tabela aqui, e eu vou salvar isso agora. Se voltarmos aqui, nada acontece porque criamos o arquivo. Colocamos nosso CSS CSN nele, mas não o vinculamos de volta à nossa página web real. Então, como fazemos isso? Bem, novamente, de volta à seção principal da nossa página aqui, realmente não importa onde nós só precisamos de uma tag CSS. Então este trilho de ligação e, em seguida, o nome dele é folha de estilo. E então Herath, isso é como um elo. Como quando falamos sobre links antes. Queremos que isto aponte para onde quer que este ficheiro esteja. Está no mesmo diretório. Então nós poderíamos apenas escrever estilo este estilo de conta que CSS seja lá o que for. Damos o nome a este ficheiro. Certo? Então você diz que isso volte aqui e agora está ligado. Se acertarmos em recarregar. Boom, podemos ver que, Hum que CSS tão legal. Hum, você sabe, nós podemos ir como nós fizemos mais cedo na linha cor azul, certo? Fazemos isso aqui mesmo. E então se acertarmos em recarregar quem isso fica azul, você percebe que não mudamos a etiqueta “h”. É por isso que isto é tão fixe. CSS e HTML funcionam juntos, mas não são. Você não precisa fazer nenhuma alteração em seu HTML para que o CSS entre em vigor , que é muito legal. Então, basta adicionar este link CSS na parte superior da sua página na seção principal e pronto. Então você vê, isso é CSS. Você pode estar familiarizado com isso. Eu não vou entrar em nenhum detalhe adicional sobre CSS, eu poderia dar um curso inteiro sobre CSS. Na verdade, eu tenho no passado, uh e, uh, nós vamos apenas deixar isso para a maior parte da razão pela qual eu faço isso é porque, para ser completamente honesto, ninguém escreve CSS mais. Há tantos frameworks CSS onde você pode simplesmente baixá-lo, tapá-lo diretamente ligado a ele e boom. Funciona que ninguém escreve. CSS CSS é uma dor. É mesmo. É muito complicado, você sabe. Historicamente, CSS funciona um pouco diferente em cada versão de um navegador. Então você sabe que tem o Firefox. Você tem cromo. Você tem Internet Explorer tem até agora você tem dezenas de outros navegadores, e todos eles usam CSS um pouco diferente. Então você tinha que fazer uma versão para o Firefox. Aversão por aversão ao cromo por safári. Com o tempo, eles começaram a unificar um pouco. Mas ainda há pequenas coisas que ajustes e coisas que você tem que fazer para diferentes navegadores, e é apenas uma dor, e ninguém gosta de fazer isso. É por isso que temos estruturas CSS que você pode simplesmente copiar colar boom. Funciona e começaremos a falar sobre isso no próximo vídeo. Vamos olhar para o framework bootstrap, que é de longe o mais popular lá fora. E sim, então isso é tudo para CSS neste vídeo. No próximo vídeo, veremos Bootstrap. 15. HTML Todo mundo 14 Introdução para Bootstrap: Ok, então nós passamos pela maioria dos principais elementos HTML agora há um par de coisas franjas aqui e ali. Nós não conversamos sobre, mas em geral essas coisas que eu falei na primeira metade deste curso, até agora você vai conseguir, tipo, 85 90% do que você vai fazer com HTML. O resto é apenas uma espécie de adicionar um estilo com CSS, e nós realmente não vamos entrar nisso neste curso. O que vamos entrar é usar uma estrutura CSS. Agora, eu não vou te ensinar CSS, mas eu vou mostrar como usar como integrar uma estrutura CSS em seu documento HTML e o que vamos olhar para onde começar a olhar agora é chamado bootstrap . Então, se você tinha mais para obter bootstrap dot com, aqui está. É completamente grátis. Isso foi criado por alguns caras no Twitter e eu não sei, talvez 10 anos atrás ou mais e tornou-se tão massivamente popular, os caras desistiram do Twitter e eles fazem isso em tempo integral agora e eles meio que giraram um twitter. Acho que o Twitter não é dono. Isto é código aberto, mas estamos na versão 4.1 agora. E se a versão for diferente quando ele assistiu a este curso, tudo bem. Realmente não importa. Muitas vezes você pode alternar entre versões mais antigas se quiser usar a que estou usando especificamente neste curso, mas isso realmente não importa. Hum, então vamos dar uma olhada nisso. Clipe a documentação e é isso, e vamos entrar em tudo isso daqui a pouco. Vou te mostrar como instalar e como usá-lo e coisas assim. Mas vamos olhar por aqui e vamos até os componentes e vamos ver algumas das coisas que você pode fazer. Então, logo de cara, temos uma grande lista de coisas, certo? Então aqui estes alertas aéreos. Se você quiser um alerta em sua página, aqui está o código. Tudo que você tem que fazer é copiar isso colado em sua página e boom, você tem esse alerta. Muito legal. Botões. Se você gosta de botões, você quer botões coloridos diferentes. Aqui está o código para tudo isso. Uma vez instalado, você deve ter que copiar e colar isso e ajustá-lo para, você sabe, dizer o que quiser que o botão diga. E é isso. , Cartões, conheçam cartões pequenos. Você pode adicionar uma imagem a ele. Meio legal. Uh, carrossel. Você já viu isso antes? Sliders. Eles são chamados. Você sabe, você pode adicionar isso ao seu site apenas copiando este código. Acelerando, ajustando um pouco. E boom, só funciona. Muito legal. Hum, vamos ver. Jumbotrons só esta caixa grande. Isso é divertido. Vamos brincar com isso, uh, uh, nab nosso Você sabe, essas barras de nah do topo. Cada site tem um bar de valete. Tudo bem, aqui está um AB que você pode usar, e você pode mudar a cor. Eu vou te mostrar como fazer essas coisas apenas copiando e colando e depois tipo de twittando . Então estas são todas as coisas diferentes. E veja, o que mais temos? Aqueles com componentes. Se formos falar Ah, talvez queiras ler isto. Se você está interessado em realmente usar esta coisa, isso mostra o que é um chamado um sistema de grade. Como você pode posicionar as coisas em uma página. Você sabe, nossa página. Nós só temos. Sabe, é muito branda. Bum bem ali na página. Mas se você quisesse esta mesa, você sabe, aqui com uma imagem enrolada em torno dela e todo esse tipo de coisa Ah, você faria isso usando diferentes contêineres e diferentes sistemas de grade. E você pode ler sobre isso aqui. Não vou realmente aprofundar isso nisso. Como eu disse, não estou ensinando CSS. Eu nem quero te ensinar Bootstrap. Só quero que isso te mostre o que é possível? Faz você começar, te mostrar como aprender se você está interessado em aprender e eu vou te guiar por algumas coisas para que você possa ver que você sabe do que ele é capaz? Isso é fixe. Então isso é realmente eu quero tudo sobre o que eu queria falar neste vídeo, apenas ah, introdução rápida sobre o que esta coisa é e o que ele pode dio no próximo vídeo. Vamos passar por esta seção aqui. Vou mostrar-lhe como realmente usar isso em sua página da Web. Você pode ver e um pequeno modelo inicial. Você sabe, isso provavelmente deve parecer familiar. Agora tem muitas das coisas que já temos feito. HTML a cabeça da tag do médico no título. O corpo. Tem um H, sabe, sabe, fechando as etiquetas. Então é muito que você já deve estar familiarizado com o HTML deste, então isso vai tornar o uso muito mais fácil, então vamos entrar em tudo isso no próximo vídeo. 16. HTML Todos 15 Instale Bootstrap: Ok, então no último vídeo, nós conversamos sobre bootstrap um pouco neste vídeo em um show que você realmente começou a usá-lo . Então, há basicamente duas maneiras de fazer isso. Então, vá para obter bootstrap dot com e clique na documentação, e você pode baixar isso e sua stall ele e, em seguida, usá-lo, ou você pode apenas vinculado a ele. Então, essas eram as duas maneiras e falando sobre o quão sério você é, você pode querer baixá-lo. A única razão para baixá-lo é se você quiser ajustá-lo e você provavelmente não, certo. Se você quiser ajustá-lo, você já sabe CSS e você quer modificá-lo para fazer coisas muito específicas. E você poderia fazer isso. E eu não vou falar sobre isso. Isso está muito além de nós neste curso. Mas para a maioria das pessoas, você pode apenas ligado a isso e o que eu quero dizer com ligado a ele? Lembra quando criamos nosso pequeno estilo falso? Bem, não era falso, era real. Mas folha de estilo pequeno queijo aqui estilo ponto CS diz que ligados a ele aparecem no topo com esta tag Bem, você pode usar a mesma tag, mas em vez disso, aponte isso para você sabe, cdn dot Obter bootstrap dot com barra iniciar. Seja o que for, este não é o verdadeiro seu eu vou olhar para isso em um minuto. Mas você poderia apenas fazer isso, e então é isso. Isso é tudo que você tem que fazer. Comece a usar isso. Bem, há mais uma coisa que eu vou falar sobre isso em um segundo. Então é isso que vamos diligir. Vou deixar isto por enquanto. E então vamos em frente e fazer isso. Então, como fazemos isso? Bem, vá até aqui e procure esse modelo inicial. E basicamente, o que você quer fazer é copiar tudo isso. Agora, eu não vou fazer isso porque nós já temos os pedaços do nosso próprio modelo inicial, mas eu vou pegar essas coisas no fundo. Agora, você quer ter certeza de pegar esta consulta J neste material javascript neste arquivo bootstrap javascript. E esses links de ar apenas para terminais de CD externos, redes de entrega de conteúdo, que abrigam essas coisas. Então, vou destacar tudo isso certo. Clique e copie e volte aqui. e eu vou apenas excluir nossas duas linhas inferiores e apenas colar isso no clique direito e colar ou controle V em seu teclado para que você possa ver que nós temos isso e nós temos nossas tags de fechamento aqui. Então estamos no meio do caminho agora. Só precisamos destas coisas no topo. Então, vê? Provavelmente quer isto nisto. Veja, esta é a folha de estilo do trilho e depois o árbitro e depois o link para a coisa real, certo? Assim como temos aqui. Exactamente as mesmas coisas. Basicamente, está apenas apontando para um você diferente, Earl. Muito legal. Muito fácil. E nós podemos apenas Este é Ah, Vieux porta que torna o seu site móvel pronto. Então, se você quer que seu site fique bem em um telefone celular, tudo que você tem a fazer é adicionar esta linha e ele vai. É mágica. É magia real, porque caso contrário é preciso um monte de revestimento para fazer um site móvel pronto? Mas não se você usar um framework como bootstrap, que é uma das principais razões pelas quais as pessoas usam isso porque é tão fácil. Então vamos apenas copiar essas duas linhas de controle, veja, para copiar e voltar para cá. E eu só vou me livrar dessa linha e colar essas duas linhas e enfraquecer um pouco em dente . Se quisermos. Isso realmente não importa. Ok, então vamos salvar isso e vamos ver, só fazendo isso, o que aconteceu com nossa pequena página aqui? Se clicarmos em recarregar agora, primeiro, dê uma olhada. Tudo queima isso em sua mente porque vai mudar um pouco, e você vai querer notar isso. Então, pronto? 123 Recarregar! Boom! Tudo é um pouco diferente, certo? Nossas mesas estragaram tudo, e vamos ajustar isso um pouco. Isso é raspado para o lado, mas isso nos diz que o bootstrap foi instalado. Então, as primeiras coisas primeiro muito rapidamente. Vou tirar tudo isso da esquina. E para fazer isso, vou usar um recipiente de bootstrap. Então nós apenas criamos uma div. Vamos fazer isso aqui. Div, com uma classe de contêiner. Você disse anteriormente que o bootstrap tem contêineres como seu tipo de sistema de grade. Parte disso. Então agora precisamos fechar isso. Então vá até o fim aqui e feche. Então guardamos isso. Volte aqui e bata. Recarregar. Certo, isso é um pouco melhor. Vamos adicionar uma pausa de limão ou duas. Vamos nos livrar desse estilo. Guarde isso aqui atrás. Ok? Isso não é muito melhor. Mas vamos ajustar isso nos próximos vídeos e mostrar-lhe exatamente como usar essas coisas diferentes. Então, uh, sim, então isso vai ser no próximo vídeo. 17. HTML a todos 16 mesas Bootstrap: Certo, então o que queremos fazer aqui? Bem, nós temos esta mesa lembra. Vamos brincar e fazer com que pareça mais agradável. Então, como é que fazemos isso? Bem, as primeiras coisas primeiro. Vamos voltar aqui e olhar para a nossa mesa, e nos livramos de todo o estilo que fizemos até agora. E isso é praticamente todo o estilo que fizemos. Então, para ela, , o que mais? Vamos nos livrar da fileira. Vamos mudar este de volta. 23 Esta é a coisa da minha mesa que se estende ao longo do topo. E vamos nos livrar de ver essa coisa de dados. É que eu realmente preciso disso. Então vamos salvar isso e dar uma olhada rápida e ver. Ok, então isso é um pouco melhor. Livre-se disso. Minha mesa. Acho que preciso mesmo disso. Vamos nos livrar de toda a fila da mesa. Ok, então estamos de volta ao básico. Mesinha muito básica aqui. Nome, e-mail, endereço. Um ouvinte favorito. Tudo se acalmou juntos. Não muito bom. O que vamos fazer? Bem, vamos voltar para cá. Vamos começar a ganhar impulso, Dr. Dot com, e você sempre quer. Basta clicar na documentação. E então você quer descer quase sempre dois componentes. E então você só quer olhar por aqui para o que você quer fazer. E nós queremos fazer mesas e eu estou olhando e eu não vejo mesas em lugar nenhum. Então eu tento o próximo conteúdo. E com certeza, aí está. Mesa. Então, clicamos nele. E aqui vemos a mesa. Então, para fazer uma tabela no bootstrap. Tudo o que fazemos é a mesma coisa é antes de criarmos nossa tag tabela, mas damos-lhe uma classe de tabela, o que é muito simples. Copie isso. Venha até aqui para a nossa etiqueta de mesa e cole-a. Guarde isso e vamos ver o que isso fez. Boom. Direto do bastão. Isto parece muito bom, certo? Sim. Temos pequenas coisas boas aqui. Isso não é ótimo, mas enfraquece. Podemos brincar com ele agora. Agora, o que podemos fazer? Vamos rolar por aqui e olhar as coisas. Se você quer escuro, você dá uma classe de mesa escura. Nós não queremos isso. São opções feias de cabeça de mesa. Podíamos dizer que farol de mesa agora vamos deixar isso por enquanto. - Sim. Está bem. Então, as primeiras coisas primeiro. Bem, eles são Rose listrada. Voltaremos a isso. Queremos uma fronteira, certo? Porque não há fronteira aqui e aqui, não há nada. Então vamos ver essa aula de mesa, ela também coloca essa coisinha lá dentro. Então, está copiando esta cabeça de volta aqui. Vamos dar-lhe um espaço e ritmo que direito e salvá-lo e boom. Incrível. Muito legal. Para que pudéssemos fazer isso. Digamos que queremos a Rosa Listrada. Certo? Poderíamos fazer isso. Vês? - Sim. Dentro da classe da mesa de novo. Nós apenas adicionar esta próxima pequena coisa tabela traço listrado. Então, copie isso. Dê-lhe um espaço. E essa é a coisa com CSS. Você poderia apenas dar um espaço para as coisas e apenas continuar adicionando coisas. Isso é sempre divertido. Tudo bem, então agora temos listrado. Muito legal. O que mais podemos dio tabela ordem. Fizemos aquela fronteira menos estável, não é? Rosa verbal. Então, quando você passar o mouse sobre as mudanças de cor, isso é legal para nós. E que só lhe damos uma mesa. Dash, pairar, salvar outro espaço, Outra pasta. E agora boom. Muito legal. Normalmente você precisa de script java para fazer isso. Mas lembre-se, nós adicionamos todas as coisas JavaScript aqui e ah, ele apenas faz tudo automaticamente no bootstrap. Muito, muito legal. Então vamos ver o que mais? Provavelmente estamos chegando ao fim do que poderíamos fazer. Poderíamos fazer uma mesa pequena. Oh, é só isso. Vejo que isso é meio grande. Se, em vez disso, queremos capaz pequeno. Isso está bem dentro? E boom. Agora é meio que você pode gostar que talvez não. O que quer que você faça, podemos mudar cores diferentes, certo? Faça isso. Nós adicionamos cada uma dessas coisas. Então primária é essa cor secundária. Esta cor tem sucesso nesta cor? Então vamos adicionar o sucesso da tabela, e nós só queremos dar isso a um TR específico, certo? Então vamos apenas encontrar o tr que queremos. Digamos que este do meio e damos a ele uma classe daquela coisa. Salve isso, volte e bata. Recarregar. Boom! Agora está verde. Quão legal é isso, certo? Isso é tão fácil. E assim você poderia fazer todas as coisas que você legenda. Eu realmente não tenho certeza do que isso está fazendo sem mesas responsivas, aqueles telefones celulares primeiro ar e coisas que você pode ler sobre isso se você quiser, se você quiser. Muito legal. Então é assim que usamos o “Boost Draft”. Quando você quiser coisa basta vir para a documentação, comece com componentes. Ele provavelmente estará lá dentro se não for tentar conteúdo de seção diferente tem uma tipografia que é, como material de fonte. Cada uma das coisas, um, imagens. Você faz coisas diferentes com imagens, , mesas e figuras. Não sei o que é essa coisa de figura, mas na maior parte, tudo o que ele quer vai estar nesta seção de componentes. Então, no próximo vídeo, vamos começar a passar por esta seção de componentes para olhar algumas coisas diferentes. Eu acho que talvez nós vamos olhar para os botões ao lado para ver como eles funcionam, então isso vai ser no próximo vídeo. 18. HTML Todos 17 Bootstrap Navbar: Ok, então o que mais nós queremos olhar em bootstrap para que possamos passar e olhar para todas essas coisas, mas eu vou escolher algumas das mais comuns para coisas mais comuns que você vai lidar com isso. Temos botões. Ia mostrar-te como fazer isso, mas é simples assim. Ia mostrar-te como fazer isso, Uh ah. Você pode adicionar um botão a um link. Então é a ter um link de texto. Você pode apenas dentro de sua tag h r F em uma classe com uma dessas coisas, eo link se torna um botão tão muito, muito simples lá. Mas o que eu realmente quero ver são barras de valete. É esta barra no topo da tela. Todos os sites têm uma barra de valete hoje em dia, parece que então como criamos um com bootstrap? Bem, você pode rolar por aqui e eles têm um monte de opções diferentes com imagens sem imagens. Vou pegar no 1º 1 que tem uma barra de busca escolar , e , algumas coisas. Então vamos apenas copiar esta cabeça de volta para a nossa página web, e queremos chegar logo abaixo da etiqueta de corpo. Queremos que esta seja a primeira coisa na nossa página. Então eu poderia apenas controlar V ou clique com o botão direito Desculpe-me e clique em Colar. E colocamos tudo isso lá. Então, eu só vou salvar esses controles e dar uma olhada e ver o que temos aqui. E boom, nós temos essa coisa legal. Agora, hum, isso derruba o javascript para que funcione. Muito legal. Esta é uma barra de pesquisa. Na verdade, não vai a lugar nenhum porque não programamos para fazer nada. Nós não vamos até você, mas um muito legal Agora, eu não sou um grande fã disso muito, muito cinza claro. Então a primeira coisa que eu costumo fazer é chegar ao topo dela pegar nosso aqui não pior, não tem nossa luz. Apenas mude para prender nosso escuro e bem ao lado dele também. Dois lugares. Salve isso e recarregue. E boom, nós temos este escuro. Muito, muito legal. E o verde combina com o verde aqui. Temos um tema sobre isso. Certo. Então isso está começando a se juntar. Isso está começando a parecer um site real. E tudo o que fazemos é copiar e colar algumas coisas. Agora podemos mudar isso para não querermos. Bar de valete estadual. Digamos que sim. Vamos passar por aqui. Nós vemos este link imediatamente, prender nossa marca, e lá diz nab são quando nós apenas mudar. Vamos mudar o John Elder para torná-lo um site pessoal. Eu não sei o que quer que seja. Boom, John. Mais velhos. Muito legal. Hum, esta entrega, eu realmente não quero cair para baixo. Eu não tenho tantas páginas no meu pequeno site, então eu não quero me livrar disso. Então, como faço isso? Bem, eu simplesmente não posso rolar por aqui e olhar para baixo. E aqui eu vejo cair. Lembro-me que falei mais cedo sobre usar aliados em barras de valete. Já viu um exemplo? Hum, imediatamente. Então isso é legal. Então podemos clicar aqui e podemos ver isso aqui em baixo ou os destaques finais da Ally. Então podemos nos livrar de tudo isso, salvá-lo e recarregá-lo. Boom! E agora desapareceu. Muito legal. Também esta casa e esta deficiente. Eu quero me livrar desses dois também só porque nós não precisamos dele e só porque eu quero te mostrar como fazer isso. Olhando por aqui, vejo esta casa de novo. Encontre a AL que eu abro e fecho, e eu apago. A mesma coisa com os desativados já que você sabe HTML. Agora, isso torna muito fácil vir aqui e modificar isso da maneira que você quiser, que é muito legal. Se dissermos isto agora, este link, vou mudar isto para dizer sobre mim. Não temos uma página sobre mim, mas ninguém sabe disso ainda. Tudo bem. Então, John Elder sobre eu começar a parecer muito bom. Então ele realmente é tão fácil de usar. Bootstrap. É por isso que eu quero dizer literalmente milhões de pessoas milhões de sites usam bootstrap. É tão fácil e completamente grátis. Muito, muito legal. No próximo vídeo, acho que vamos brincar com isso um pouco mais. Talvez vejamos estas cartas, digamos como usar essa causa. Isso é muito legal. E isso será no próximo vídeo 19. HTML Todos 18 cartões Bootstrap: Certo, continuando. Vamos ver essas cartas. Então, basta clicar no botão do cartão aqui e aqui nós temos. Então vou copiar tudo isso, voltar ao nosso site e vamos colocar isso debaixo da nossa mesa. Então eu coloquei um par de quebras de linha aqui apenas para uma boa medida. E eu vou acelerar tudo isso, e podemos fazer isso se quisermos. Então vamos salvar isso e dar uma olhada nisso. Então, ok, nós temos isso. Não há imagem aqui. Então vamos adicionar a foto do meu cão que brincamos mais cedo. E poderíamos fazer isso só com essa coisa do SRC. E eu acho que isso foi o que Aspen para talvez P e G era esse o nome? Não consigo me lembrar. Em breve descobriremos. Eu poderia procurá-lo. Tudo bem. Muito legal. E você podia ver um redimensionamento. É para nós por conta própria? Talvez tenha sido só aspirina . Eu só estou brincando neste momento, porque isso é muito divertido. Ela está olhando para o outro lado. Avery imponente, furacão muito real. Ok, então nós temos o título do cartão, nós podemos mudar isso e vamos apenas mudar isso para dizer, como foi chillin em casa e depois Olá. Meu nome é Aspen e eu governo tudo o que vejo em todas as direções. Sim, basicamente resume tudo. E agora temos isto. Mas agora eu não sou um grande fã deste botão. Então vamos voltar aqui para os nossos botões e escolher uma cor diferente. Então temos uma espécie de tema sombrio acontecendo aqui. Podemos usar o verde? Talvez fiquemos com o escuro, por isso vou para o secundário. Então, para mudar isso, nós apenas bater aqui e nós vemos este btm btm primário. Só mudamos para secundário e alimentamos álamo tremedor. Eu não sei. Muito legal. Então você sabe, é fácil fazer essas coisas com bootstrap. Sabe, é só uma questão de encontrar a coisa que você quer jogar com copiá-lo, ajustá-lo um pouco. Agora que você sabe, html, você pode meio que ler por aqui. Aqui nós ch cinco tag. Sabemos o que é isso. A etiqueta P. Sabemos o que é isso. Há Aneha, etiqueta de referência no link. - Obviamente. Você sabe o que isso é a única coisa que não é familiar são essas classes div e isso apenas CSS puro tudo em CSS Ah, div div divisor. Isso é exatamente o que você envolve tudo e CSS e então você dá um tipo de classe, como o atributo de CSS que diz exatamente qual parte do CSS você quer estilizar essa coisa. Isso é exatamente o que você envolve tudo e CSS e então você dá um tipo de classe, como o atributo de CSS que diz exatamente qual parte do CSS você quer estilizar essa Então você sabe, a classe do corpo do cartão, a classe da imagem do cartão, a classe do cartão para classe aqui em cima da tabela, apenas uma espécie de como isso funciona. Muito, muito simples e muito legal. Então, no próximo vídeo, eu acho que vamos olhar para uma ou duas coisas de tiras de botas e, em seguida, chamar isso feito. E isso vai ser no próximo vídeo. 20. HTML Todos 19 Jumbotron: Certo, então terminamos aqui. Vamos fazer mais algumas coisinhas só para brincar com isso e ter um pouco mais de experiência usando isso. Então apareceu no topo. Temos este bem-vindo ao meu site. Tudo bem, mas o que mais poderíamos fazer? Bem, vamos olhar por aqui. Temos um jumbotron. Isso é meio legal. Gosto do Jumbotron aqui. Temos um jumbotron fluido. Vamos copiar este tipo e vamos ver em vez do nosso H. Vamos apenas um pouco de espaço aqui e colar tudo isso dentro. Guarde isso e dê uma olhada e veja o que temos aqui. Tudo bem? Talvez isso seja legal. Talvez isso não seja eu não sei. Hum, então vamos ajustar isso. Vamos nos livrar desse botão. Não precisamos dele. E nós não precisamos desta linha aqui neste pequeno pedaço de texto. Então vamos nos livrar de algumas dessas coisas. Primeiro as coisas, vou destacar tudo isso e ter um pouco mais. Certo, então não queremos o botão. Então vamos nos livrar desse botão. Boom se foi. E nós não queremos este RH nós não falamos sobre tags de RH H R significa regra horizontal e essas tags html puro ar. E isso só faz uma linha, sabe, certo? Tipo, eu não posso realçar isso. Mas logo acima deste azul, destacando esta linha aqui, é uma regra horizontal. Isso é legal. Ou se tiver vergonha de dizer,uso isso mais do que deveria, então vamos nos livrar disso. Ou se tiver vergonha de dizer, uso isso mais do que deveria, Vamos nos livrar dessa etiqueta P. Certo, o que mais temos aqui? Três. Carregue e veja. Tudo bem, vamos ficar bem. Hum, vamos mudar Olá, Mundo para eu não sei. Bem-vindo ao meu site. Este é o meu canto do czar da Internet. Devíamos soletrar Internet, certo? Internet ainda parece errada. Uh huh. Ponto de exclamação. Hum, confira minha tabela incrível abaixo, e se você é realmente legal, você pode alimentar Aspen. Tudo bem. Ok. Então, tudo bem, isso é meio chato, mas, você sabe, você sabe, apenas mais um exemplo de como você poderia fazer as coisas com rascunho de botas, e ah, eu também estou meio envergonhado de dizer que eu usei o Jumbotron em sites mais frequentemente do que eu deveria fazer. É muito parvo, mas, sabe, é assim que é. Então olhando por aqui migalhas de pão. Esses eram botões úteis que já olhamos, hum, drop downs. Isso é legal. Preciso de formulários. Nós realmente não falamos sobre formas da Web mais de um tipo de programação de back-end de coisa, mas você pode estilizar formulários. Bootstrap. Muito fácil. Barras de Naff, paginação. Barras de Naff, Muito legal. Fácil de adicionar escalas. Barras de progresso interessantes, mais programáticas. Realmente dicas de ferramentas. Vamos pairar as coisas, e é basicamente isso. Então, sim, isso é bootstrap. É realmente fácil assim. E espero que esteja interessado em ver como usar isso. E eu espero que você vá brincar com ele sozinho. Basta mergulhar e começar a testar as coisas. Comece a brincar com ele. Essa é a melhor maneira de aprender Bootstrap e, ah, muito legal. Então eu acho que é basicamente isso. Temos uma compreensão muito básica de HTML. Não é tão difícil, sabe, acho que já viu que não é uma linguagem de programação. Não é tão difícil, sabe, sabe, É só uma questão de abrir tags e fechar tags. E dentro da etiqueta, o texto fica marcado para o que quer que seja. E então, se você quiser olhos estilo dedo do pé, torná-lo bastante usado cores, layouts, coisas assim. Isso é tudo CSS. Isso é um tipo muito mais avançado de coisas. Você pode aprender CSS e eu realmente recomendo que você faça isso. Não se torne um especialista em CSS, mas apenas aprendeu o suficiente. Como se você tivesse aprendido. HTML. Você aprendeu o suficiente para ser perigoso, certo? Você aprendeu o suficiente para ser capaz de lê-lo, ser capaz de fazer coisas básicas e, mais importante, ser capaz de entendê-lo quando você vê-lo em outro lugar. Como se você quiser usar bootstrap, você sabe que você pode olhar através aqui e há um monte de Veja se há um monte de HTML no rascunho Boots. Bem, você sabe tudo isso. HTML Agora você sabe o que significa, o que ele faz , o propósito dele, como ajustá-lo, como fazê-lo. Você sabe, fazer exatamente o que você quer, e isso é realmente, realmente tudo o que você quer neste dia e era do desenvolvimento moderno da Web. Então eu acho que é isso. No próximo vídeo, diremos algumas coisas. Embrulhe isso e siga em frente a partir daí 21. HTML Todo bônus de 20 pessoas: Tudo bem. Então acho que vamos chamar isso de feito. Agora, você tem um dedo básico muito, muito sólido. É uma compreensão de nível intermediário de HTML. Não foi tão difícil. Quero dizer, este é um curso muito curto, mas html é muito fácil. Não há muito para ele. Como eu disse, no início, a HBO não é realmente uma linguagem de programação. É uma linguagem de marcação. Só vou memorizar as etiquetas e aprender a usá-las. É basicamente isso. Então, um, curso divertido. Espero que tenha se divertido. Eu me diverti ensinando. Se você gosta deste curso, se você gosta do meu estilo de ensino, o que quer e você quiser, faça outros cursos de mim. Vá para o kota me ponto com. Este é o meu site e tem todos os meus cursos. Há mais de 30. Estou adicionando novos cursos todas as semanas e você pode ver que temos algumas coisas realmente legais. Ruby on rails, python, Django, JavaScript, PHP. Você nomeia. Nós provavelmente temos mais de 1000 vídeos neste momento em mais de 30 cursos. Mais de 50 mil estudantes neste momento. Sim, acho que ainda estamos com 50. Ainda não atingimos 60 em algum lugar lá dentro, mas sim, este curso aqui. um Só para darumexemplo, criamos um clone do site do Pinterest usando ruby on rails. muito legais. um Aqui criamosumaplicativo de portfólio de desktop de moeda criptográfica com python. Muito legal, Django para construir sites. Como eu disse, JavaScript, JavaScript, algumas coisas de banco de dados. servidor de sequela da Microsoft tem Ah, minha sequela. Curso do servidor. Em algum lugar lá embaixo também. Programação rubi ou coisas kryptos ou rubi sobre trilhos. Coisas Ruby para desenvolvimento de jogos, Roku, e ir mais PHP PHP algumas coisas criptográficas. Muito legal, Lennox, se você já ficou curioso sobre o que é Lennox e como usá-lo, é um ótimo curso para isso. E nós temos um pouco de marketing s CEO e e-mail marketing eram programadores. Nós construímos coisas, você ainda tem que comercializar as coisas que você constrói. Então tipo de ensiná-lo a fazer isso também. Mais material de banco de dados, mais coisas PHP. Muito legal. Se estiver interessado, clique nesta inscrição hoje mesmo. Mas agora, normalmente, associação custa 49 dólares. Isso cobre absolutamente tudo. Taxa de uma vez, dinheiro, garantia de volta. Claro que sim. Hum, você também tem cursos futuros. Então eu tinha novos cursos a cada semana ou duas e você recebe esses cursos gratuitos como um membro total. Eles aparecem na sua conta. Nada para se inscrever para quem eles apenas. Eles apareceram como por magia. Então, sem taxas extras por isso. E isso é muito legal. Mas como um bônus primeiro estavam sofrendo através deste curso. Quero dar-te este código de cupom. Se você clicar na coisa de check-out aqui e digitar, vamos ver Super Coder, que eu sei que é um código realmente idiota. Mas sou preguiçoso demais para mudá-lo. Vai derrubar mais 22 dólares. Então você pagou $27 por todos os meus cursos. Você não pode nem comprar uma pizza para tanto. Basicamente, só tenho que cobrir o custo da minha banda. Para todos os vídeos que eu tenho para igreja algo, hum, isso é muito mais lento Aiken G. O. Um, eu disse dinheiro de volta garantia que você poderia acessar a mim e me fazer perguntas. Você pode acessar outros alunos fazer perguntas interagir. É uma comunidade legal, e depois de 27 dólares, e depois de 27 dólares, acho que é muito bom roubar se você gosta de você para mim Se você gosta de assistir cursos sobre você para mim eu tenho todos os meus cursos de Kota Me em você me conhece eso Se você vai para o ford de John Elder Dot org cortar você para mim dot PHP Este é o meu site pessoal, e ele tem todos os mesmos cursos, mas com links para você para mim. E há códigos de cupom aqui, eu acho que 11 ou 12 dólares seus cursos o que você paga. Eles meio que me trancaram em quão baixo eu posso ir lá. Isso é muito mais caro do que fazer todos os meus cursos por $27. Mas algumas pessoas gostam de você para mim. , Por alguma razão, talvez você tenha alguns créditos acumulados lá em cima. Algumas pessoas te presentearam com cursos ou algo assim. Se for esse o caso, você pode conferir todos os meus cursos aqui, clicar no link em um boppy sobre você para mim. Se for esse o caso, você pode conferir todos os meus cursos aqui, Então, Como disse, espero que tenha gostado do curso. Deixe um comentário se quiser. Bom, mau ou não. Sempre aprecio receber feedback. E isso seria muito útil. E acho que vamos ligar para este. Feito. Então meu nome é John Elder. Espero que tenham gostado do curso, e nos vemos da próxima vez