Loading

Module 1: Introdução ao HTML CSS e ao Application Logs

Nota de Estudos
Study Reminders
Support
Text Version

HTML & Conteúdo do Usuário Juntos

Set your study reminders

We will email you at these times to remind you to study.
  • Monday

    -

    7am

    +

    Tuesday

    -

    7am

    +

    Wednesday

    -

    7am

    +

    Thursday

    -

    7am

    +

    Friday

    -

    7am

    +

    Saturday

    -

    7am

    +

    Sunday

    -

    7am

    +

Olá, todos, bem-vindos à quinta semana do curso sobre desenvolvimento de aplicações modernas.Já chegamos longe desde que começamos. Temos a infraestrutura básica de aplicativos webpronta com a gente. Começamos a partir de uma planilha. Seguimos para a linha de comando. Nós gradualmentemodificamos a linha de comando, para que ela produzia saída HTML. Por fim, adicionamos também a capacidadede aceitar entrada usando HTML; usando a interface de formulários.Nesta semana, analisaremos esta visão em um pouco mais de detalhes e entendamos o HTML e CSSoperacionalmente. O Prof. Sane discutiu os aspectos conceituais por trás dessa ideia. Rapidamenterevisaremos essas ideias e seguiremos adiante tentando entender o funcionamento de HTML real eCSS.(Consulte o Tempo de Slide: 01:22)
Em suas sessões, o professor Sane mostrou-lhe esta imagem, onde contrastou a arquiteturade uma interface gráfica e arquitetura de um sistema web. A visão e o modelo separando essesdois aspectos de um programa tem sido uma inovação arquitetônica em algum sentido. Em um sistemagráfico, uma parte do código é dedicada às visualizações e a outra parte é dedicada ao modelo;com manipuladores que se comunicam entre eles.
Muito similarmente em um sistema web, você tem o protocolo HTTP, como a cola, que liga o aspecto da visualizaçãoque é de responsabilidade do navegador e do modelo ou qualquer cálculo que seja ode responsabilidade do servidor.(Consulte o Tempo do slide: 02:28)
Nós vimos que em ação quando a interface de formulário do nosso app FairShare aceitou uma sequência de comandosque de outra forma foram feitos na entrada padrão do seu terminal. Seus colegas de quartodigitados em uma sequência de comandos e enviar. Isso formou o aspecto de solicitação do protocolo HTTPdo navegador para o servidor. O navegador coletou os dados que estavam lá no formulário, embalou-o como um pedido e o enviava para o servidor.(Consulte o Tempo do slide: 03:11)
O servidor, ao receber esse pacote, executou um programa que leu as informações que foram enviadas pelo navegador, executou quaisquer que fossem necessários cálculos. No nosso caso, era um aplicativo FairShareque realmente respondeu aos comandos. Assim, quando o comando registrado foirecebido, o nosso aplicativo FairShare realizou o registro dos colegas de quarto. Se o comando gastofoi recebido, então as despesas foram registradas.Se o relatório foi para ser gerado, foi feito então e finalmente quando tudo acabou, nosso aplicativo FairSharegerou a página HTML que continha todas essas informações como uma página HTML.(Consulte o Tempo do slide: 03:57)
Foi esta página HTML que foi enviada pelo servidor de volta para o navegador solicitante. É assim queo sistema HTTP realiza o aspecto de visualização do modelo da ideia que os professores Sane mencionaram.(Consulte o Slide Time: 04:19)
Vamos começar nossa jornada de tentativa de entender HTML. Let ’ s start from; o que o-usuário realmenteprocura nas informações? ’ À direita de sua tela, você vê a saída de um sistema FairShareem um formulário HTML simples ou os resultados de renderização de uma página HTML simples. Deixe-nos manter o HTMLde lado por um momento. A partir da perspectiva do usuário, o que realmente são as informações que são realmenterelevantes para um usuário?(Consulte o Tempo de Slide: 05:09)
Um título que dá uma breve visão geral do que são as seguintes informações realmente sobre.(Consulte o Slide Time: 05:19)
Podemos pensar em uma seção de registro que nos dê detalhes do registro dos colegas de quarto.Em outras palavras, qual conjunto de colegas de quarto faz o nosso sistema atual saber sobre.(Consulte o Tempo de Slide: 05:36)
Nós gostaríamos de ter um registro transcrito das despesas que foram feitas. São despesas depuras no sentido de que o que para cada evento, a quantia que foi paga por qual colega de quartoessas instruções, é apenas uma lista daquelas instruções.(Consulte o Tempo do slide: 05:59)
E finalmente, nós realmente gostaríamos de ter uma parte do relatório onde os comandos de relatório paraqualquer colega de quarto que precisávamos, foram dados. E em resposta ao comando do relatório, nosso sistemaFairShare deu informações sobre quaisquer paybacks que foram necessários.(Consulte o Tempo de Slide: 06:26)
É possível que possamos adicionar algumas informações adicionais. Podemos buscar o banco de dados realdas informações que estavam contidas nas transações dos colegas de quarto. Poderíamos dar a algumasinformações simples como o número de colegas de quarto, o número de eventos etc. Poderíamostambém listar o banco de dados inteiro real de cálculos que foram realizados pelo nosso sistema. Deixeeu reiterar o ponto: estamos olhando para o tipo de informação que um usuário pode realmente querer.Ainda não estamos lidando com a questão, como representar essas informações usando HTML. Estamosperguntando: o que é que o usuário desejaria como informação? Seção de registro com informações de registro, uma seção de despesas com um registro das despesas que foram feitas e a seção de relatórios, que contêm os relatórios para os quais amigos os relatórios foram solicitados. Podemospossivelmente precisar de mais informações opcionalmente, em termos de informações gerais, como o número de colegas de quartoou um banco de dados detalhado de todos os cálculos executados.(Consulte o Tempo do slide: 08:04)
Vamos agora ir em frente e ver como esta informação necessária pelo usuário, que chamaremos comoconteúdo do usuário. Como realmente utilizamos HTML para exibir essas informações do usuário? Como de costume, esteseria um bom ponto para tirar um pouco de uma pausa e relembrar o que fizemos, revisar o queacabamos de dizer.(Consulte o Tempo de Slide: 08:39)
Como dissemos antes, em sua tela, você vê a forma de urso de informações que foi gerada poro aplicativo FairShare. Vamos agora marcar partes do aplicativo conceitualmente de várias formas.Buscaremos, por exemplo, um título com uma descrição curta.(Consulte o Tempo do slide: 09:07)
Haverá títulos de seção para separar as partes individuais de informações.(Consulte o Tempo de Slide: 09:18)
As próprias peças de informações poderiam ser listas de vários itens.(Consulte o Tempo de Slide: 09:24)
Eles também poderiam ser tabelas de informações. Então, nós estamos agora cientes, do que buscamos como informaçãoque queremos que nossos usuários vejam. Também vemos quais são os componentes lógicos dessa organização.Nós exigimos um título, exigimos títulos e exigimos capacidade de listar algumas peças de informações. Nós exigimos a capacidade de tabular informações e assim por diante. É exatamenteesse aspecto das informações que são marcadas usando o sistema HTML; Linguagem HyperTextLanguage.(Consulte o Tempo do slide: 10:16)
(Consulte O Tempo De Deslizamento: 10:19)
Nós vemos agora as mesmas informações que foram apresentadas simplesmente como ‘ text ’, vemos agora uma versão HTMLdele. Embora, seja uma fonte muito pequena e quase invisível, na verdade é uma página HTML completa. Deixe o ’ agora focar nas partes desta página e estudar como o sistema de marcação HTML temsido usado para organizar o conteúdo do usuário. Deixe-me repetir vamos reorganizar o conteúdo do usuáriousando HTML.(Consulte o Slide Time: 11:03)
Aqui está a parte inicial do sistema HTML que você acabou de ver. As setas mostram a você qual partedo HTML corresponde ao que nós, como usuários, estamos buscando e organizando. Como usuários buscamos um títuloe como organizadores das informações, queremos que uma parte do documento seja explicitamente marcada
como título e um título. Vemos as tags do título, a de vermelho, e vemos o título do nível h1 emo sistema atual, como direito exibido.(Consulte o Tempo de Slide: 11:59)
Dirigindo-se as inscrições de roommate level-2 como um título, o registro de despesas como um título, reporta como um títuloe o banco de dados como um título de level-2 é usado para separar as peças lógicas deinformações. Na parte de registrações, vamos listar os amigos que formaram oscompanheiros de quarto aqui. Na seção de despesas, vamos listar o conjunto de despesas que essegrupo de colegas de quarto realizou e assim por diante.O que estamos mostrando aqui é, como um simples sistema de texto está simplesmente marcando qual parte do texto épara estar representando que parte das informações que queremos organizar. Não há nenhuma instruçãosobre como a informação deve ser apresentada. Por exemplo, quando vemos um título level-2 comoregistrações de roommate por aqui, isto é simplesmente digitado como texto por nós. Quando este é exibido poro navegador, ele é exibido assim.(Consulte o Tempo de Slide: 13:38)
Nós vemos agora como as listas de informações são criadas e apresentadas, como criadores nós só criamos uma listade informações. Aqui está uma lista de aqui é uma tag; tag HTML, que é usada para apresentar listas ordenadas. Porordenados queremos dizer que eles são enumerados: 1 2 3 4 on e assim por diante. Uma lista ordenada étagged entre OL e barra OL. Os membros da lista são marcados entre o item de listaLI e forward slash LI para denotar o fim do item de lista atual neste caso é f1.
O item da próxima lista é o f2 que está novamente fechado nas tags LI lista I2 e barra LI. No registro de despesas do, novamente temos uma lista ordenada OL e barra OL com os itens de lista f2 200entre LI e barra LI. É assim que escrevemos lista ordenada em HTML. Quando marcamos para cima,estamos simplesmente escrevendo documentos de texto com um sistema muito padronizado que marca o texto paraqualquer que seja o objetivo eventual de organização.Nós desejamos organizar isso como um item de lista para seção de despesas. Por isso, é aqui que está a organizaçãoda lista e ela está vindo sob o título h2 para despesas.(Consulte o Tempo de Slide: 15:38)
Aqui está a parte posterior da mesma webpage, peça HTML de código. Novamente, você vê o banco de dados comoo título do segundo nível.(Consulte o Slide Time: 15:55)
E nós agora vemos tabelas. Assim como as listas temos agora tabelas que criarão uma tabela deinformações e valores ou informações e registros de valores. É possível escrever esta página pormão. Em outras palavras, você poderia simplesmente abrir o seu editor e começar a escrever a página como nós apenasvimos. Começamos com este doc HTML, cabeça HTML, corpo, h1, h2, p para parágrafos, lista ordenada, listaitens e assim por diante, podemos simplesmente ir digitando.
As informações reais estão aqui. Entre as tags nossas tags neste slide estão coloridas. Para distingui-losdas informações que digitamos.(Consulte o Tempo de Slide: 17:08)
Deixe-nos por um momento, veja e entenda esta organização de HTML. O HTML que nós apenasviu, que criou a parte da apresentação de informações do conteúdo do usuário como mostrado no slideacima, podemos conceitualmente imaginar que como estrutura de árvore, estamos mostrando a estrutura da árvoreaqui para a parte de tabela do sistema. Esta é uma parte de amostra da página HTML. Uma tabela éformada por algumas linhas, uma ou mais linhas.Cada linha é composta por alguns dados. O que exatamente são os dados são representados por uma elipse? Esta éuma coluna, esta é outra coluna. Na próxima linha, esta é uma coluna aqui são as informações reaisque são exibidas. Aqui está a próxima coluna aqui é a informação que ficaexibida. Na segunda tabela que realmente era um banco de dados, exigimos uma linha que representavaos cabeçalhos da tabela.
E essa linha teve o primeiro item de dados como o número do evento número de dados como a informação paraamigo f1 roommate f1. O terceiro item de dados foram informações para o roommate f2 e assim por diante. Esta estruturado documento HTML é chamada como um modelo de objeto de documento ‘ ou o DOM. E a árvoreque resultam é chamada como árvore DOM. Esta visão conceitual de uma página HTML é extremamenteútil.
Na verdade, ele corresponde a um modelo orientado a muito objeto de uma página web. Este modelo orientado por objetode uma página web será extremamente útil para nós no futuro. Algumas sessões depois, usaremosrealmente utilizar esta ideia de modelo de objeto de documento em particular, muito mais utilmente. No entanto, neste ponto, também não é tão ruim. É algo que é necessário para que a gente entenda como HTML está indopara ser representado e seu display será feito pelo navegador.(Consulte o Tempo de Slide: 20:00)
Aqui está uma visão geral rápida do sistema de páginas HTML. Vamos ser cumprimentos com HTMLversão 5. Ele começa com um HTML DOCTYPE como uma declaração e é toda a página HTML éenfechada entre HTML e barra HTML. E a página inteira é enfechada entre estaespecifica o idioma da página. Isso é curto para o inglês. Nós vamos apresentar esta páginaem inglês. Se fosse apresentá-lo em japonês, usaria o curta correspondente.Uma página HTML tem sub partes a cabeça que tem o título, poderia haver outras coisas que sãotambém incluídas na cabeça. Na verdade, aquelas outras coisas que estão incluídas na cabeça são muito, muitoúteis para mecanismos de busca. Além da cabeça, o HTML também possui um corpo que é encorpadoentre as tags corpo e barra cortada para frente. Entre as muitas coisas que estão lá estãorumo a vários níveis, h1 que acabamos de ver.
Listas ordenadas, listar itens e assim por diante etc. O que quer que você precise colocar, há uma qualquer informaçãoque você precisa exibir, há uma maneira de apresentá-lo hierarquicamente. Temos tambémalguns links mostrados por aqui que você pode usar para estudo mais detalhado ou como referência para asvárias tags HTML e seus usos. Na verdade, a versão mais autoral seria nas páginas W3, esta é uma organização que define os padrões para a web de vários tipos incluindoHTML, CSS e assim sucessiv.e assim por diante.
Há uma série de tutoriais online também disponíveis um deles que é aquele que temosmencionado por aqui, que você pode usar para saber quais são as outras tags e como utilizá-las.Se uma olha para ele, elas são razoavelmente lógicas h1 representa o nível de posição um. São seis os taisníveis de posição disponíveis em HTML que são definidos. Você tem as habilidades para apresentar lista ordenadausando OL. Se as listas forem desordenadas então elas são representadas usando uma tag UL para listas não ordenadas.Se ele é uma lista ordenada ou uma lista não ordenada sempre terá um item de lista. Todos os tais tipos de informações detalhadaspodem ser obtidas aqui a partir do site de especificação HTML original ou maisincrementalmente usando vários tutoriais online como as escolas W3. Há muitos outros que sãotambém disponíveis. Antes de partimos, vamos ter uma olhada em uma página web. (Início do vídeo: 23:35) Aqui está uma página webque é gerada por um dos nossos programas FairShare.Deixe-me levá-lo passo a passo através desta página inteira. A primeira linha por aqui é um comentário.Os comentários em HTML são fechados entre esta marca e esta marca final. O que quer que esteja láentre isso por exemplo, esta parte é comando e é ignorada pelo navegador. Uma página web começacom esta declaração do tipo do documento DOCTYPE. Como eu disse, as páginas HTML sãocadelas entre 2 tags HTML e se eu for no final da página, teremos uma barra de barras.
A tag de fechamento para cada HTML há uma tag slash HTML de barra. Aqui está a cabeça,que tem um título. O título é o sistema FairShare full stop e é enfechado entre o título eo título de barra. Depois do título temos o corpo da página. O corpo da página écomposto de uma rubrica no nível 1. Em seguida, há descrição geral, uma curta.
Esta tag ‘ br ’ é uma quebra de linha. É esta tag ‘ br ’ que é usada pelo navegador para ir até a próxima linha.Isso significa que em sua página HTML, você pode dividir a linha em qualquer lugar que desejar para sua própria conveniência. E o navegador não vai usar essa quebra de linha que você deu. Daí, vocêpode escrever as informações da sua página web de qualquer maneira que seja conveniente para você.Novamente, este é um comando. Observe que o comando é usado para apenas marcar o início do cabeçalho efim do cabeçalho. E isso é algo que é útil para as pessoas que vão escrever páginas web. Aqui está um comando que indica que a parte de seção de registro HTML da página webestá iniciando. Ele começa com os registros de roommate como o cabeçalho no nível 2, portanto, ele é h2.E o cabeçalho é como usual enfechar entre dois marcadores: h2 e barra h2.
A tag p inicia um parágrafo que, é claro, envolverá uma nova linha conforme exibido no navegador web. Percebem que, inicio a lista ordenada na mesma linha desta parte dessas informações que euescrevi. Lembre-se de que, o navegador não vai se preocupar com as quebras de linha que nósintroduzimos. Sempre que uma lista ordenada deve ser iniciada, ela sempre deve ser exibida na próxima linhacair com enumeração adequada: 1, 2, 3, 4 ou A, B, C, D o que quer que seja.Aqui estão os itens da lista. Nesta página em particular, ao contrário da que vimos nestas linhas, temos4 colegas de quarto. A partir de agora, nenhuma despesa foi registrada e nenhum relatório foi solicitado.Portanto, a seção de despesas é marcada por cabeçalho no nível 2. Há uma instrução de que não foram registradas despesas de. E uma quebra de linha foi introduzida na versão HTML exibida. A tag ‘ hr ’ cria uma linha de execução horizontal, a chamada regra horizontal na página web.A seção de registro termina com uma linha e, em seguida, começa a seção de despesas. Significa até comoo usuário está preocupado, o usuário verá uma seção de registro, uma linha e uma seção de despesas. Será queserá mais arrumado do que o que tínhamos apresentado o plano é a informação muito simples que tivemosapresentada em nossos slides. Isso será um pouco melhor. Novamente, a seção de relatório se encerra usandoa tag h2 de nível de direção 2.Uma linha quebra aqui então na nova linha, uma linha horizontal e multa e a próxima seção; banco de dadosinformações que tem a tabela. Vamos ignorar essa turma por um momento. E vamos cuidar deque quando trabalhamos com CSS que é folhas de estilo em cascata. Como vimos no objeto do documento
side side, uma tabela é definida por uma linha de tabela que a linha da tabela possui alguns dados. A primeira coluna de dados da tabelacontém o nome do arquivo de informações.
Uma vez que a primeira coluna é terminada usando a tag slash td para frente. Em seguida, começa a próxima coluna de tabeladados que tem esta peça de informação e a coluna termina com um td de barra. Mashá apenas duas colunas. Portanto, a primeira linha agora acabou e você vai para a segunda linha.A próxima linha tem uma coluna com essas informações e a segunda coluna e assim por diante e assimadiante.
Os acabamentos de segunda linha, a terceira linha começa, os acabamentos de terceira linha e assim sucessivos. A tabelatermina com uma tabela slash para frente e então escrevemos uma regra horizontal para separá-la dopróximo tabela. A mesa ao lado é marcada com uma rubrica no nível 3. Diz que agora mesmo a única coisaque foi feita são as inscrições, portanto, é um recomeço e não há outras informaçõesno banco de dados.
Nós organizamos as informações do usuário ’ que o usuário busca; o conteúdo. Pensamento (pense) sobrecomo aquela organização deve ser marcada e usada HTML para realmente marcá-la. Será bom tentarpara fora algumas páginas da web para você mesmo e ver como elas aparecem no seu navegador. (Termina Vídeo: 32:37)(Consulte O Tempo De Deslizamento: 32:39)
Tendo marcado nossas informações que queremos apresentar para o usuário. Olhemos agora para a próximaparte da história, como realmente definir a apresentação. Para começar, deixe-nos dar uma olhada nesteimagem conceitual de como uma página HTML é renderizada pelo navegador. Esta foto é tiradadas páginas de desenvolvedores do Mozilla que descreve como funciona o CSS.Esta imagem é do ponto de vista de um navegador. Um navegador carrega o HTML. Por carregar wesignificar, o servidor que ele tem conectado ao servidor e qualquer que seja o servidor enviado como uma página HTML, essa página é carregada pelo navegador nele é memória. Ele é analisado no sentido em que você podeimaginar que ele constrói uma árvore de documentos daquela página específica que ela recebeu. Ele cria um documentárioe ele exibe por aqui. A caixa preta do lado direito é a sua tela.O HTML que nós vimos foi um HTML simples muito não adorado. Ele apenas indicou qual parte das informações dodeve ser marcada. Nós tínhamos projetado aquele layout de informação. Pensávamos sobre o que éas informações que o usuário busca. Tendo reconhecido que informações nós projetávamos como oprimeiro haveria uma seção de registro, haveria uma seção de despesas, haveria uma seção de relatórios, haveria informações opcionais de bancos de dados. Tendo organizado em nossa mente o layoutdas informações que então utilizamos HTML para marcar esse layout.Para realizar a apresentação e para realmente apresentar essa informação marcada, podemosadicionarmos adicionalmente o suporte do CSS; Cascading Style Sheets. Assim como o HTML é carregado,nossos navegadores também carregarão o CSS e pausá-lo-á. As informações no CSS as folhas de estiloserão, então, usadas para anexar as várias peças de estilo aos objetos na árvore DOM. E entãoeles serão exibidos.(Consulte o Slide Time: 35:39)
Então, o HTML será usado para marcar.(Consulte o Slide Time: 35:42)
O CSS será usado para definir os detalhes da apresentação.(Consulte o Slide Time: 35:47)
E o display é onde ambos vão se unir e você verá uma página webmuito melhor do que a simples simples que nós criamos. Let ’ s tente entender esse processo derealmente realizando a apresentação.(Consulte o Tempo do slide: 36:10)
O que realmente fazemos quando queremos apresentar? Nesse ponto, não vamos nos preocuparnós mesmos com o sistema de marcação que está lá. Nossa única preocupação é realmente com qualquer queinformação venha da marcação, como apresentá-la. Há duas especificações básicasque realmente precisamos nos preocupar. Dado um documento gostaríamos de apresentar regiões do documentode formas separadas.
Por exemplo, nós gostaríamos de tratar todo o HTML que é uma parte da seção de registro, nósvamos querer tratá-los separadamente. Por exemplo; podemos desejar que eles tenham uma cor de fundodiferente. Podemos querer realmente separar seções das informações e exibirdelas de maneiras diferentes. Este seccionamento está relacionado com o documento inteiro, gostaríamos de agruparum monte de tags HTML juntas.É o que gostaríamos de tratá-las como, gostaríamos de dividir o documento em várias partes. A outra especificação com a que precisamos nos preocupar é para as tags HTML individuais. Nósdesejaríamos por exemplo, as tabelas a serem apresentadas de forma diferente. Afinal, eles apresentam diferentestipos de informação. Uma tabela está apenas apresentando os valores de algumas pessoas de informação, ooutro está apresentando os resultados da computação.Podemos desejar apresentar essas duas tabelas de forma diferente. A marcação apenas dá o conteúdo lógicoda tabela. Diz apenas que na linha 1, coluna 1, esta é a linha de informação 2, coluna 2, ou sejaa informação, linha 3, coluna 1, o que mais for a informação e assim por diante. Ele não especificacomo as informações devem ser apresentadas ou como a tabela as linhas da tabela e as colunas da tabela sãoa serem apresentadas.Talvez, nós queremos ter uma cor de fundo diferente para a primeira coluna e uma fonte diferentepara a segunda coluna. Por isso, em geral, haverá dois tipos de especificações que precisamos pararealmente se preocupar. Um deles é o layout de marcação: dado uma tag de marcação HTML, como é ser oapresentado. Podemos querer nos preocupar com atributos de apresentação, como a família da fonte, ascores do texto, os tamanhos da fonte.
E muitos tais atributos de apresentar essa dada marcação. Já vimos várias markups. HTML de barra para frente HTML é uma marcação. Body slash forward slash body é outra marcação. Lista de barra ordenada de lista ordenada é outro par de markups. O formato geral dedefinindo a apresentação ou especificando como uma determinada marcação deve aparecer é a seguinte. Vocêescreve o seletor de marcação, por exemplo; h1, h2, lista ordenada OL, qualquer que seja.
E separados por um cólon e depois dentro do aparelho para essa marcação, quaisquer que sejam os atributos, vocêdeseja apresentar e o valor; esta lista é tudo o que você realmente escreve. Então, por exemplo, um podeescrever como h1-colon-brace, font family; qualquer fonte que desejar, tamanho da fonte; qualquer que seja a fonte que vocêdesejar, e assim por diante e fecha-o. Esta é uma instrução para o navegador que no HTML de entrada,onde quer que você encontre h1, ele deve ser exibido usando a fonte que é dada aqui, adiciona o tamanho que édado aqui e assim por diante.Este toma conta das marcações individuais. Veremos em breve um exemplo de CSS, mas antesque, olhemos para o outro tipo de uma parte em que nos preocupamos em dividir o documentoem várias partes de acordo com a sua organização lógica da informação, e que éalgo que conhecemos não a máquina. Gostaríamos de dividir o grupo de tags HTML emvários subgrupos. Esta divisão é especificada pela tag div de HTML.A tag div de HTML não marca realmente texto. Em vez disso, na verdade, divide regiões o HTMLem várias partes lógicas que nós como designers criamos, você poderia dividir o HTML em gruposchamados classes ou você poderia especificar regiões sobre as quais a especificação dada se estende. Existemmaneiras de organizar a página HTML e acabamos de olhar usando div e acabamos de mostrarcomo organizar HTML em grupos usando classes da tag div.O formato de especificação do CSS então é assim como tivemos um seletor de marcação, temos um seletor de classee novamente, atributo e valores. Esta é a maneira mais básica em que a apresentação é controlada ou a apresentaçãoé definida. Como de costume, fornecemos alguns links que você pode usar para ver comoCSS funciona.(Consulte o Tempo do slide: 43:15)
Aqui está um exemplo: Este exemplo, na verdade, apenas ilustra como marcações de marcação devem ser apresentadas.A tag HTML, há aqui um cólon que está faltando neste exemplo. Na verdade, ao longo desteslide inteiro, colon HTML, brace aberto, a cor de fundo tem um valor tem um hash de valorCCCCCC. Isto no formato RGB cada um são de 2 dígitos de hexa. Então, isso é vermelho. Isto é verde eisto é azul. Todos eles foram misturados em igual proporção.Isso na verdade nos dará um fundo cinza colorido. A página HTML inteira deve ser renderizada emum fundo cinza. Isto é o que esta especificação em particular vê. Ele também diz que a fonte a serusada é Arial. Pode-se usar uma variedade de fontes que estão disponíveis. O corpo da página: corpo,colon-abre brace e fecha brace dentro disto, você tem uma margem esquerda de dois em ’ s, na verdade édois m's. Isso aproximadamente corresponde à largura do pequeno caractere m.E quando dizemos dois m, significa dois pequenos m's, que a partir da esquerda da página, uma margem dedois m's tem que ser mantida e o texto deve ser apresentado deixado alinhado em todo o corpo. Observe que o corpoterá o background de HTML porque HTML é a tag principal que definiu o fundo cinzapara si mesmo. E essa informação vai se derramar sobre o corpo a menos que o corpo também digaque ele quer sua própria cor de fundo.A tag h1, novamente há um colón sobre aqui a tag h1, diz que o tamanho da fonte deve seraumentado 150%. Isso significa que o cabeçalho nível 1 será apresentado pelo navegador do usuário usando
um tamanho de fonte que é 150% mais do que o que é o tamanho padrão do navegador. Além disso, diz queo estilo da fonte é ousado. Assim, o navegador irá apresentar ao usuário uma fonte ousada e maior. Para o nível de posição1, apenas. Você pode ir na especificação dos detalhes de cada tag em seu sistema CSS.
(Consulte O Tempo De Deslizamento: 46:25)
As tags de marcação HTML são mostradas.(Consulte o Slide Time: 46:33)
Os atributos, nomes dos atributos estão em mostrados usando setas vermelhas e os valores são mostradosusando setas verdes.(Consulte o Tempo do slide: 46:47)
Como incluímos essas informações na página web? Vamos mostrar dois estilos diferentes: Um é usando a tag style na sua página HTML, dentro do estilo estilo e forward slash, ointeiro CSS que é a especificação stylesheet está escrito. Nós apenas digitamos lá dentro. Isso é chamadocomo em-forro os estilos. A especificação de estilos como apresentar as informações é feita uma parte dea própria página HTML. Isto é chamado em-forro.(Consulte o Tempo de Deslizamento: 47:36)
A outra abordagem é salvar as especificações de estilo em um arquivo, neste caso, estamos mostrando que nósestamos dizendo que aquele arquivo foi salvo em um arquivo chamado como demo dash CSS, dot CSS. E, na página HTML, damos um link ou referência a esse arquivo específico. Isto permite-nos separar o
informações de apresentação em um arquivo separado e as informações em markup em um arquivo separado. Eeles são vinculados juntos usando a tag link em HTML.