Transcrições
1. Sobre no que este curso é: Dizem que a codificação é a nova alfabetização. Embora não possa substituir todas as outras formas de alfabetização tão cedo, é um conjunto de habilidades maravilhoso para ter. Se você quer atualizar seu conjunto de habilidades atual, você tem uma idéia que deseja trazer à vida, ou você está apenas interessado em aprender sobre isso. Esta aula vai lhe dar o básico que você precisa. Bem-vindo ao Web design para criativos, alunos
visuais e todos os outros. Eu sou Marc Nischan, e eu ensino objetos de texto para criar pessoas no Colégio de Estudos Criativos em Detroit e aqui em compartilhamento de habilidades. Quando me interessei pela web, foi há mais de 20 anos. Naquela época eu era cozinheira a tempo parcial e roqueiro a
tempo inteiro e queria fazer um site para a minha banda. A busca para obter essas habilidades se transformou em uma carreira e, nos últimos 20 anos, ganhei a vida fazendo design gráfico, construindo sites e projetando para a web e mobile. Nem sempre foi fácil para mim entender os conceitos. Como aprendiz visual, tive que encontrar minhas próprias maneiras de fazer essa informação fazer sentido. Mas tem sido uma carreira gratificante. Gostei do trabalho. Isso me deu muita flexibilidade,
e eu gosto de compartilhar o que aprendi com outros na esperança que isso possa ajudá-los a alcançar alguns de seus objetivos também. Nesta aula o que vamos aprender, são os cinco elementos de uma página web básica. Você vai aprender diferentes ferramentas e técnicas para
ajudá-lo a começar e escrever seu código, vamos falar sobre como seu navegador pensa sobre o código que você está escrevendo. Vamos construir um layout com imagens e links e falar sobre como podemos adicionar estilo a isso para mudar a aparência dele. Isso vai ser divertido e no final você terá construído sua própria página web. Vamos começar.
2. Ferramentas: Olá a todos, bem-vindos ao web design básico para alunos visuais criativos e todos os outros. Fico feliz que tenha decidido fazer essa aula. Vou te contar um pouco sobre a internet. Estamos usando a internet agora, mas você provavelmente não sabe que no início, em 1977, era chamado Arpanet e era uma rede muito pequena de computadores que foi criada para resolver o problema de como compartilhar dados em grandes distâncias. Ele evoluiu um pouco desde então. Era originalmente apenas texto e hiperlinks eram o único elemento interativo real para esses sites. Cresceu na Internet que conhecemos hoje,
mas, em essência, ainda é muito semelhante. Há dados armazenados em um computador em algum lugar, um servidor, que é essencialmente em gigantesco disco rígido, usado para servir dados. Em seguida, ele é transportado através de um monte de fios para o seu computador e interpretado por um cliente, que é o seu navegador. Seu navegador lê os dados e também as informações necessárias para organizar esses dados em uma página. Essa informação é linguagem de marcação e está organizando hipertexto, e é aí que ele recebe seu nome, Hypertext Markup Language, e que é HTML. É com isso que trabalharemos para construir nossa página web básica hoje. Para esta classe, você não precisará de um servidor. No entanto, se você quiser obter um nome de domínio e hospedagem, vou mostrar-lhe como publicar seu site. No final desta classe, você será um desenvolvedor web publicado. Caso contrário, você ainda pode trabalhar localmente em seu computador e fazer seu projeto diretamente em seu próprio navegador. Não precisamos de um servidor ou algo assim. Vamos trabalhar em arquivos no seu computador. Isto é o que é conhecido como um ambiente de desenvolvimento local. Para fazer isso, você vai querer obter algum software,
um IDE, que é um Ambiente de Desenvolvimento Integrado. Basicamente, isso é apenas uma palavra chique para um editor de texto. Agora, de volta nos velhos tempos, ou antigamente, eu teria que escrever minhas páginas web no Word e salvá-las como ponto HTML, abri-las em um navegador e ver se elas se pareciam com o que eu pensava que iriam parecer. Está muito mais sofisticado hoje. Mas há muitas ferramentas que serão muito mais úteis para você do que um documento do Word. Há dois IDE que eu quero que você confira. O primeiro é Adam.io, que é produzido pelo GitHub. O segundo é colchetes ponto IO, produzido pela Adobe. Há muito apoio para eles. Muitos plug-ins de terceiros que são livres que as pessoas para lidar com coisas como realce de sintaxe em margens automáticas e quase qualquer coisa que você pode pegar. Vá baixar um desses IDEs. Vou usar o Adam para as nossas demos. Qualquer um deles vai funcionar muito bem. Para começar, precisamos encontrar uma base onde nosso projeto vai viver. Talvez você devesse criar um arquivo em sua área de trabalho chamá-lo de um site, chamá-lo do que você quiser e todos os nossos arquivos vão viver dentro desta pasta. Vamos começar criando o que é essencialmente o centro do sistema solar para o seu site, a página de índice. Por padrão, os navegadores procuram uma página chamada Índice quando chegam a uma pasta. Vá em frente, abra seu IDE e crie index.html e salve-o em sua pasta que você criou para hospedar este site. Depois de fazer isso, você terá dado o primeiro passo para criar nossa página web.
3. Anatomia de uma página web: Temos o nosso IDE, temos a nossa página de índice. Vamos dar uma olhada nele em um navegador e ver como ele se parece quando o navegador o renderiza. Não se parece com nada. Não há nada lá. Vamos ver o que acontece quando colamos
algumas palavras e elas estão correndo juntas. Precisamos de uma linguagem de marcação para estruturar essas palavras. A essência do layout da página da Web é que você está colocando caixas dentro de caixas, dentro de caixas, e tag HTML é nada
mais do que uma caixa para manter suas palavras, imagens ou vídeos. Há dezenas e dezenas de tags HTML, e todas elas têm comportamentos específicos que seu navegador entende. Vamos dar uma olhada no código por trás da página inicial da Wikipédia. Você pode ver que todo esse conteúdo está contido em várias tags HTML. Algumas dessas tags HTML estão contidas por ainda mais tags HTML. A página web mais primordial consiste em cinco desses elementos. O DOCTYPE, a tag HTML, a tag head, a tag body e a tag title. Vamos começar com esta coleção de elementos
HTML para nos levar rolando na construção de nossa página web básica. Vá para o IDE e, em nossa página index.html, vamos escrever a tag DOCTYPE. O DOCTYPE é a tag que informa ao seu navegador qual conjunto de instruções usar quando ele estiver renderizando sua página da Web. Estamos trabalhando em HTML5 e tem um DOCTYPE muito simples. Mas deixe-me mostrar-lhe como é um dos DOCTYPES para HTML4. Quando eles escreveram HTML5, eles simplificaram muito a sintaxe e todos ficaram muito mais felizes como resultado. O DOCTYPE começa sempre com um estrondo. Agora você pode reconhecer esse caractere como o ponto de exclamação, mas é muitas vezes referido como um estrondo na programação, então eles são a característica: colchetes angulares, o estrondo, a palavra DOCTYPE em todas as letras maiúsculas e, em seguida, HTML. E é isso. Em seguida, temos a tag HTML. Esta é a maior caixa. Tudo vai nesta caixa e esta etiqueta tem um abridor e um mais perto. É exatamente o mesmo, exceto para a barra para a tag de fechamento que
permite que seu navegador saiba que essa tag acabou e que a caixa está completa. Dentro da tag HTML estão a cabeça e o corpo. Agora, eu gosto de pensar nisso como nossas cabeças e nossos corpos. A etiqueta principal é para onde vai mais meta-informação. Esta é uma informação que você não vai necessariamente ver e eu gostaria de pensar nisso como os pensamentos da página web. A cabeça e a carroçaria juntos para formar a imagem completa. Depois há a nossa quinta etiqueta primordial, a etiqueta de título. Dentro da tag de título estão as palavras que você deseja apareçam na pequena aba do seu navegador. Ative seu IDE. Vamos escrever algum código na próxima lição e dar uma olhada em nossa página web primordial. Vejo você lá.
4. Vamos começar a programação em: É isto. O momento que todos esperavam. Você está pronto para escrever algum código? Abra o IDE e puxe a página de índice. Agora eu vou passar por ele, sinta-se livre para digitar comigo se você quiser, mas eu vou deixar uma oportunidade depois que eu terminar de digitar para pausar e me alcançar. Eu vou escrever todas as cinco tags e falar um pouco sobre eles como eu ir e vamos dar uma olhada no navegador quando
terminarmos e ver nossa primeira página web primordial. Esta vai ser a base que nós construímos para você chegar
ao projeto final para esta classe. Aqui vamos nós. Vamos começar com o tipo de doutor. Questionário Pop. O que vem a seguir? A tag HTML, a maior caixa. Nós HTML, e nós fechamos a tag, e nós dividimos eles para que possamos colocar as coisas dentro desta caixa. Agora isto vai introduzir um conceito que espero que sigam, recuo. É uma ótima maneira de ver visualmente onde estão suas caixas. Porque depois que você tem dezenas e dezenas deles na tela, pode
se tornar muito difícil descobrir onde você está. HTML, nós dividimos, a próxima tag é a cabeça. Você escreve isso lá e percebe que eu recuei para indicar que
ele está dentro de seu contêiner pai, a tag HTML. Agora vai ter um irmão, a etiqueta do corpo. Também está recuado. Lá vamos nós, e agora nossa última etiqueta, a etiqueta de título. A etiqueta de título vive dentro da cabeça. Mais uma vez, aqui eu recuo a tag título, eu coloquei o título da minha página lá, eu fecho-a, e pressionei O, nós temos uma página web primordial. Se eu abrir isso no navegador agora, você não vai ver nada exceto o título porque ainda não há conteúdo no corpo. Vamos escrever as palavras Hello World dentro do corpo para que haja algo para ver. Esta é uma primeira passagem típica em uma etapa de projeto a ser tomada. Você faz o que é chamado de “Hello World “só para provar que você pode colocar a coisa em funcionamento. Vá em frente e pausar o vídeo agora mesmo. Se você não está digitando junto, faça com que seu código se pareça com o meu código, e vamos dar uma olhada nele. Aqui você criou sua primeira página Hello World, bem-vindo ao mundo do desenvolvimento web, e vamos construir sobre isso para reunir o resto do nosso projeto. Parabéns.
5. "O DOM": Muito bem, até agora temos andado a um ritmo bastante alcançável. Vou pegar o ritmo um pouco enquanto
começamos a trabalhar no nosso projeto final. Isto é o que o nosso projecto final vai ser. É uma página bem simples. Tem alguns links e algumas imagens. Lembre-se que eu disse que construir uma página web é colocar caixas dentro de caixas. Seu conjunto único de caixas codificadas é um modelo, do que você vai ver no navegador quando você der uma olhada em sua página da web. Esse modelo tem um nome. Para o navegador, é o Modelo de Objeto de Documento. Agora lembre-se disso, é encurtado para o DOM. Provavelmente vai aparecer um pouco mais tarde. O que vamos fazer agora é construir o modelo para o nosso projeto. Abra seu editor de texto e digite comigo. Se você precisa pausar o vídeo e conversar, vamos colocar a estrutura básica para o nosso projeto aqui. Aqui vamos nós. Anexei alguns arquivos do projeto. Logo abaixo do vídeo, você verá quatro guias. Vá para o seu projeto e clique em FinalProject.txt. Pegue o primeiro pedaço de prosa que você vê lá, copie-o, e então nós vamos colá-lo em nosso arquivo de texto. Vamos sobrescrever nosso mundo de saudação e começar a personalizar esse layout. Podemos chamar isso de
Sampler Whitman e esses são basicamente dois poemas Walt Whitman que estamos usando como apenas algum conteúdo para construir nossa página. Vamos começar a construir algumas caixas aqui. Temos o corpo como a segunda maior caixa dentro deste HTML e vamos continuar subdividindo isso até que tenhamos nosso conteúdo onde queremos. Vamos começar com uma tag div. Esta é uma nova etiqueta, talvez para ti, não sei. É neste tutorial. Um div é apenas mais uma caixa. Todos esses nomes de tags diferentes são apenas outras caixas, mas alguns deles têm comportamentos específicos que podemos aproveitar. A div é apenas uma grande caixa e, em seguida, vamos colocar uma tag de parágrafo em torno do nosso texto. Está tudo bem recuado. Você pode ver o fluxo das caixas aqui. À medida que entramos em uma nova caixa, entramos em nosso recuo e saímos da caixa, à medida que saímos. Ajuda-te a ver onde estás enquanto estás a programar. Você pode pensar sobre como isso pode
parecer quando você está realmente visualizando no navegador. Vamos embrulhar uma etiqueta H1 em torno do nosso título aqui. Isso é apenas o cabeçalho um e seu navegador sabe o que essa tag H1 significa. Significa que tem um certo tamanho de fonte, tem uma certa margem em torno dele e se comporta de uma certa maneira. Especificamente, um cabeçalho vai tentar ir e preencher o espaço todo o caminho através da caixa em que ele está, enquanto um parágrafo vai tentar embrulhar dentro da caixa em que está. Vamos ver o que temos até agora. Nós atualizamos isso, olhe para aquilo. Temos um H1 e algumas mensagens. Tudo bem, ainda é bem feio, então vamos colocar mais algumas coisas aqui. Vamos também colocar um espaço reservado para nossos links. Estou colocando um cano aqui, esse é o símbolo vertical. Está todo o caminho no lado direito do teclado acima da barra invertida. Dê uma olhada rápida nisso. Você pode ver como nossas caixas estão empilhando uma sobre a outra, vamos continuar modificando isso para obter o que queremos.
6. Estilos básicos e CSS: Nós tomamos como certo que quando experimentamos uma página web, ela vai ser muito envolvente visualmente. Houve um momento em que nem sequer havia imagens na Internet. Nossa página parece assim agora. É apenas texto simples, então vamos adicionar uma imagem para dar algum interesse visual e, em seguida, vamos começar a colocar em estilos para concretizar totalmente o nosso design. Aqui estamos nós. Eu baixei as duas imagens que estão anexadas à classe. Um chama-se Pioneiros, outro chama-se Walden. Serão as imagens das nossas duas páginas. Vamos começar colocando isso. As imagens têm a sua própria etiqueta especial, é a etiqueta de imagem, I-M-G. Há um pequeno grupo de etiquetas que são assim. Eles não têm uma abertura e fechamento de suas tags auto-fechamento. Eles se fecham com uma barra e um suporte. A tag de imagem tem alguns atributos que vão nos ajudar. O mais importante para nós será a fonte. Vamos dizer onde esta imagem foi encontrada. Dizemos fonte igual, tem
que estar entre aspas e vamos colocar pioneers.jpeg lá. Vamos guardá-lo e dar uma olhada. Ali está a nossa fotografia. Há outras coisas que você pode colocar aqui como título
da imagem ou texto Alt que pode ser lido por um leitor de tela. Eu vou deixar alguns textos Alt aqui e
pixels.com crédito para me dar esta foto gratuita para usar. Pixels é um site que tem todos os tipos de grande fotografia de estoque gratuito. Você notará que esse texto não aparece em nenhum lugar em nossa página da Web. Agora, em sites maiores que têm muitas e muitas imagens, é muito comum ter imagens em sua própria pasta. Agora a imagem desapareceu e você vê este link quebrado e o texto alt é exibido como uma alternativa para a foto ausente. Temos de ter cuidado com a informação que damos aqui na nossa fonte. Se eu digitar imagens/pioneiros, agora ele pode encontrar a foto novamente. Esses caminhos de arquivo vão se tornar importantes à medida que entrarmos lições
mais complexas e eu tenho uma segunda e terceira classe depois disso, onde entraremos em tópicos mais avançados. Esta estrutura básica de arquivos é algo para prestar atenção. Eu estou tentando manter tudo em um arquivo para esta primeira classe apenas para mantê-lo fácil embora. Nós vamos com, nenhuma foto especial. Vamos puxar isso de volta aqui. Conserte o meu link e voltamos ao negócio. A próxima coisa que vamos fazer é adicionar alguns elementos realmente simples chamados regras horizontais. São apenas uma linha que atravessa toda a página. Eles também são autofechadoras. HR, vamos copiar isso e colocar outro no fundo aqui. Vamos fazer mais um para combinar com o design. Outra tag de fechamento automático que você pode usar é a tag break, então br com uma barra e um colchete angular. Vamos dar uma olhada nisso, atualizar e temos nossas duas linhas lá embaixo e há uma quebra abaixo da palavra Walt Whitman. É um retorno extra que tem a mesma altura de uma linha de texto. Alguns outros simples são coisas como a marca forte. Se pegarmos isso e olharmos, ele cria um tipo de rosto ousado. Costumava haver uma tag negrito, era apenas um B, mas foi obsoleto em favor de uma tag mais descritiva e a razão é que tela e leitores de braille e coisas assim usam. O conceito de negrito não existe na fala, mas o contexto de ênfase, veja por exemplo, existe, então usamos itálico para ênfase no texto. Vamos dar uma olhada lá. Veja se conseguimos alguns itálico. Mas para um leitor de tela, ele pode ler isso com um pouco de voz mais alta ou uma voz mais enfática. Estes são alguns dos estilos básicos que estão disponíveis para nós. Agora vamos ficar um pouco mais sofisticados. Vamos começar a escrever código dentro destas etiquetas. Vamos dar atributos a essas caixas, isso afetará a forma como elas parecem. Uma das coisas que é realmente chata sobre esta página agora é como tudo está alinhado à esquerda. Vamos colocá-lo dentro de uma caixa que tem uma largura que é menor que a nossa tela e que está centrada. Quando você está escrevendo estilos em linha. Estes são estilos inline porque eles estão dentro dessas tags. Há maneiras mais sofisticadas de fazer isso que vamos entrar no próximo curso, mas por enquanto esta é uma maneira rápida e fácil de se familiarizar com estilos. Começamos com o atributo de
estilo, estilo igual e colocamos entre aspas e digamos que a largura será de 800 pixels. Px é a abreviatura de pixels e dê uma olhada nisso. Há um cólon aqui, não um igual, mas um cólon. Isso é chamado de par de valor de chave. Esta é a chave e este é o valor e isso é um padrão muito comum na codificação para a web. Você verá isso em linguagens de programação e todos os tipos de coisas. Vamos centralizá-lo agora que é uma certa largura fixa, temos uma marca de margem ou um estilo de margem que podemos usar. Se dissermos margin auto, o navegador vai ler isso e vai colocar
a mesma quantidade de margem em ambos os lados desta caixa. Isto vai centrá-lo. Vamos dar uma olhada. Já está melhor. Que tal isso? Quando você estiver usando estilos, há um efeito em cascata que leva ao nome folhas de estilo em cascata. Ele basicamente diz que o último estilo que ele lê é o estilo que ele vai usar. Vamos dar uma olhada em um estilo que podemos aplicar ao corpo: style = “color” e eu vou usar um cinza, 33333. Estou terminando os estilos com ponto-e-vírgula, isso é muito importante. O navegador não sabe onde
terminar se não vir um desses na declaração de estilo. Esta chave de cor vai se referir à cor da fonte. Eu só fiz um pouco cinza mais claro, não tão preto. Aqui, vamos fazer algo realmente dramático. Vamos digitar vermelho lá e ver o que temos, tudo é vermelho. Agora, para demonstrar dessa forma que estilos em cascata, eu vou descer para o nosso h1 e dizer estilo = “cor: azul”. Observe que, apesar de toda a página da web estar vermelha, quando encontrou um estilo que estava mais profundo dentro das caixas que era diferente, diferia daquele, então temos azul lá. Temos mais caixas aninhadas? Não, não temos. Mas podemos ir e fazer isso para cada uma dessas etiquetas. Vou me livrar disso porque não vamos usar isso agora. Vamos limpar um par de coisas muito rapidamente e, em seguida, vamos passar
para a próxima seção que vai ser tipo personalizado. Vamos acabar com nossas caixinhas aqui. Vou copiar esta etiqueta de quebra e colocar uma no final de cada linha
deste poema e o que isso vai fazer é tirá-la daquele comportamento de embrulho que vimos. Havia ir, empilha-lo, agradável e arrumado. Vou me livrar desse
texto vermelho lá vamos nós. Agora temos nossas caixas seguidas, elas estão empilhadas. Você pode ver o dom aqui. Nossas caixas empilhadas uma em cima da outra. Temos a nossa forma básica juntos. Vamos passar a estilizar alguns deste tipo e ficar longe desses estilos de tipo padrão.
7. Como adicionar tipo personalizado: Uma das coisas de maior impacto que você pode fazer para a sua página web é ter um bom tipo de olho. Existem tipos de letra padrão que vêm com Macs e Windows, e podemos usar alguns deles. Nós também podemos usar fontes de terceiros. Vou mostrar-te as diferenças. Existem dois tipos básicos de fontes. Isso é um eufemismo grosseiro, mas para o propósito desta aula, vamos falar sobre Serif e Sans Serif, ou Serif e Sans Serif, dependendo de onde você é. Um Serif é este pequeno pé, estes pequenos Audi pegajosos em uma fonte. Eles deveriam ajudar a guiar seu olho através das letras. Então este é o tempo, esta é a fonte padrão, mas eu também poderia especificar algo diferente, como font-family, sans-serif, e lá vou eu. Eu acredito que este é Arial, eu acho que é o padrão. Há alguns valores padrão para um Serif e Sans Serif. Posso fazer algo como tirar proveito de tipos de letra entre navegadores, que serão renderizados em Macs e PCs. Aqui vamos nós. Aqui está a lista. Existem 1, 2, 3, 4, 5, 6 que você pode usar em qualquer plataforma. Vamos tentar Comic Sans. Porque tenho duas palavras juntas, preciso colocá-las entre aspas. Caso contrário, o navegador só vai ler a primeira palavra e parar. Ele não reconhecerá o nome inteiro da fonte. Quando você está aninhando aspas, você tem que usar uma combinação de aspas duplas e aspas simples, e como eu já usei aspas duplas, eu vou usar aspas simples aqui e colocar Comic Sans MS lá e uma vírgula, e eu estou deixando esta declaração de fonte Sans Serif. O que esta é a sua pilha de fontes, e vai da fonte mais desejada para a fonte menos desejada ou padrão. A razão é que, na verdade, você não tem 100% de certeza que a fonte que você especificar estará na máquina de um usuário. Fontes do sistema não aparecem com seu site. Você está fazendo referência a uma fonte que vive em um computador local. No seu computador, vai ficar ótimo, você pode especificar. Cara, eu não sei. Vamos ver. Não sei se tenho lagosta aqui. Mas posso especificar uma fonte que eu gosto, uma fonte chique, Gotham, e que seria renderizada na minha máquina. Mas se a pessoa que baixa a página da Web também não tiver o Gotham instalado, o padrão será o texto que você especificou a seguir. Ou se você não especificou nada, ele vai apenas renderizar Times New Roman, que é o que a página web parece até agora. Aqui eu tenho Comic Sans MS, e eu estou dizendo que se isso não estiver disponível, use qualquer tipo Sans Serif. Vamos ver o que conseguimos. Oh, rapaz, aí está. Comic Sans. Acho que esta tem a distinção duvidosa de ser a fonte mais odiada da Internet. Vamos ver por que você odeia Comic Sans, projetado para hackers. Vou deixar você ler sobre Comic Sans no seu tempo livre. O que é importante aqui é que você entenda a pilha de fontes, porque nós vamos usar uma fonte do Google para realmente colocar algum tipo agradável aqui, e nós vamos especificar uma pilha de fontes porque esta fonte vai estar
vindo do CDN do Google ou rede de distribuição de conteúdo. Se, por algum motivo, você perder a conectividade de rede ou, sei lá, a fonte não for mais suportada, você terá uma pilha de fontes fazendo backup. Vou especificar Helvetica e, em seguida, um [inaudível]. Lá vamos nós, Helvetica, um pouco mais agradável que Arial, na minha opinião. Agora vamos dar uma olhada nas fontes gratuitas do Google. Há muitos sites de fontes livres lá fora. O Google facilita a incorporação de fontes personalizadas. Google.com/Fonts. Eles têm centenas e centenas de fontes. Você pode classificar por Serif, Sans Serif, Exibição, Manigrafia. Vamos procurar uma fonte que já escolhi chamada Josefin Slab. Lá está ele. Eu apertei este botão “Plus”, este pequeno diálogo aparece, e a partir desta caixa de diálogo, eu posso obter instruções sobre como incorporar esta fonte. É super fácil. Copiei esse link na cabeça, e não temos mais nada lá em cima agora, então começamos a encher isso. Este é um exemplo clássico de que parte pensamentos do site, que a distribuição cabeça-corpo ou divisão, o que você quiser chamá-lo. Isso é algo que você realmente não vê, mas está dizendo ao seu navegador para baixar isso. Não vai haver um link na sua página que diga, Josefin Slab ou algo assim. A outra coisa que tem de fazer agora é adicioná-la às suas declarações. Vou colocar Josefin Slab, Helvetica, e depois San Serif. Vamos dar uma olhada nisso. Lá vamos nós. Tão fácil. Agora, temos um pouco de trabalho a fazer. É pequeno. Vamos entrar e discar. Vou mover esta declaração para o nosso div principal aqui. Eu tenho minha largura, eu tenho margem auto, vamos colocar a família de fontes lá. Eu não preciso da palavra estilo igual porque eu já estou dentro de uma tag estilo. Livre-se dessas citações extras, lá. Para o corpo, vou especificar uma cor, um pouco cinza mais claro. Agora, para isso, eu vou fazer nosso tamanho de fonte padrão para toda a página, 18 pixels. Lá vamos nós, um pouco maior, é um pouco mais fácil de ler, e vamos fazer um pouco mais aqui. Vamos colocar um pouco de ênfase no título da nossa página. Agora eu só tenho esses dois espaços reservados para nossos links, que estão chegando na próxima seção. Vou apresentar-vos a tag span. A tag Span é muito parecida com uma tag de parágrafo. É feito para segurar texto. Estou adicionando esta caixa para que possamos segmentar especificamente o texto que está dentro dela. Vamos fazer uma etiqueta de estilo. Eu vou dizer que o tamanho da fonte é 27 pixels, e eu tenho um pequeno título. Parece que preciso dar um pouco de espaço. Vamos colocar um espaço aqui, talvez até um traço, que tal isso? Lá vamos nós. Lá você pode ver como é
fácil fazer um layout realmente agradável usando fontes gratuitas do Google. Agora vamos para a próxima seção. Vamos vincular essas páginas, uma das quais ainda não criamos, e teremos concluído nosso projeto.
8. Como adicionar links: Bem, você chegou até o fim. Só temos mais uma coisa a fazer antes do nosso projeto terminar. Até agora você escreveu todo o código necessário para fazer uma página web básica. Agora vamos adicionar alguns links e conectá-los, então temos um site de duas páginas. Os links podem funcionar de diferentes maneiras, dependendo de como você precisa deles. Vamos dar uma olhada na anatomia básica de um link. Eles usaram a etiqueta âncora, que é apenas um A e eles têm que ser fechados. Eles também precisam de um href. O href é basicamente o endereço do lugar onde você quer que eles vão. Eles podem acessar links que estão na mesma página da Web. Eles podem acessar arquivos que também estão em seu mesmo site ou podem se conectar a outros sites. Diga se você colocar o URL do Google lá e atualizamos a página. Lá vamos nós, vai para o Google. Nós também podemos fazer algo como se tivéssemos uma página muito longa, deixe-me duplicar este parágrafo um monte de vezes e vamos fingir que esta é uma longa página de texto. Podemos dar uma identificação para uma dessas coisas. Vamos chamá-lo de capítulo um e mudar nosso href para capítulo um com um hash na frente dele e ele irá vincular a página ao capítulo um. A maneira que nós vamos usá-lo é ligar para outra página web. Vamos começar criando essa página. Você pode clicar com o botão direito do mouse e fazer uma duplicata e nomeá-lo Walden. Agora precisamos mudar todo o código que é do primeiro poema para o segundo poema. Eu vou abrir o arquivo de texto que tem os prós nele,
copiá-lo e, em seguida, apenas substituir todo esse texto com ele. Através da magia do vídeo que só levou um segundo. Vamos escrever um link que vai para a nossa página do Walden. Uma coisa, não se esqueça da mudança da foto. Vamos mudar a foto muito rápido. Estamos em Walden, então vamos fazer esse link de volta para nossa página de índice. Então vamos para a nossa página de índice e fazer ligação com o Walden. Vou ter esse ponto de ligação para o índice. Só vai ligar a si mesmo. Nada realmente vai acontecer quando você clicar nele. Isso irá para a nossa página walden.html. Quando atualizarmos, devemos ter dois links que nos permitem ir e voltar. Nunca escrevemos um link para este, então não vai aparecer. Vamos voltar e adicionar isso muito rápido. Bem, você pode ver que está ligado e está mudando entre as duas páginas. Eu adiciono principalmente este link apenas para consistência visual. Isso é melhor. Não temos esse salto subjacente agora. Lá vai você. Você tem um site funcional de duas páginas. Se você comprou hospedagem e nome de domínio, eu vou te mostrar como colocá-lo e publicá-lo na internet e, claro, você pode pegar isso e fazer o que quiser com ele. Você pode substituir uma fonte diferente do Google, uma imagem diferente. Você pode colocar mais textos, menos texto. Você pode adicionar páginas adicionais a ele. Vou fazer mais algumas aulas sobre compartilhamento de habilidades que vou nos mostrar como fazer layout de página
avançado e criar um site completo. Algo que é um pouco mais parecido com o que você está acostumado a interagir na web. Mas, por enquanto, isso faz você começar. Parabéns, você é um desenvolvedor web básico.
9. Publicação e envolvimento e: Certo, vamos ver se conseguimos colocar isso na internet para você. Há muitos e muitos provedores de domínio e provedores de hospedagem. Eu uso DreamHost por um longo tempo, provavelmente 15 anos. Eles tinham sido realmente confiáveis. Há toneladas de outras, mas essa é a que vou passar nesta demo. É muito simples. Tudo o que você está fazendo é pegar seus arquivos e colocá-los em outra pasta na Internet e os domínios apontados para ele, e nós digitamos em um navegador, boom, ele aparece. Eu vou te guiar por isso. Além disso, quero que me deixem alguns comentários e me avisem sobre a aula, se faltasse alguma coisa, se ensinasse tudo o que queriam saber, se pudessem pensar em alguma crítica construtiva. Estou sempre aberto a ouvir isso porque quero fazer dessas aulas as ferramentas mais úteis para você que elas podem ser. Tudo bem. Vamos dar uma olhada aqui para colocar seu site ao vivo. Mais uma vez, parabéns. Espero ver em algumas aulas futuras, eu vou estar ensinando um sobre layout CSS e, em seguida, um sobre Design Responsivo. Então, vemo-nos lá. Muito obrigado e tenha uma boa. Tudo bem. Estamos prontos para colocar isso na internet. Há uma série de clientes FTP gratuitos. FTP é File Transfer Protocol, e essa é a conexão que você pode usar para colocar seus arquivos em seu servidor. Um cliente que eu gosto é FileZilla, é grátis. O outro é o Cyberduck. Você pode procurar por qualquer um deles e baixá-los, abri-los e eles se parecem com isso. Aqui está Cyberduck, ele tem um olhar muito limpo do tipo Mac OS e você basicamente, você arrastar as coisas de sua janela Finder para ele. O outro é FileZilla, que é muito mais de uma visão hierárquica. Qualquer que se encaixe na melhor vista do projeto. Vou usar os Cyberducks. É tão fácil de ver. Eu coloquei uma pasta de teste
aqui no final de um domínio que eu gerencio apenas para mostrar isso a vocês. Tudo o que temos que fazer é pegar os arquivos do nosso site, arrastá-los para o arquivo que queremos usar. Agora, se você nunca fez isso antes, pode ser um pouco confuso e você pode não acertar na primeira vez. Geralmente há um arquivo HTTP público, ou talvez seja apenas seu nome de domínio. Mas haverá vários arquivos lá em cima, dependendo do serviço que você usa. Se você usar o DreamHost, é o seu nome de domínio, você verá marcnischan.com. Você pode abrir isso e deixar os arquivos lá, ir para marcnischan.com e ele vem direto. Aqui vamos nós, arrastar os arquivos para lá, soltá-los, e devemos ser capazes de ir a um navegador agora e vê-los imediatamente. Lá estão eles. Isto está ao vivo na Internet agora. Isto foi fácil assim. Sempre que você fizer uma alteração localmente, basta sobrescrever os arquivos no servidor e atualizá-los. É isso. É assim que se publica um site. A última coisa que você precisa fazer para concluir o curso é fazer upload de uma imagem como uma captura de tela de seu site concluído, ou talvez até mesmo postar um URL se você decidiu hospedá-lo.
Marc Nischan, Artsy people can code!
