Quais são os objetivos de aprendizagem da Unidade 1? Confira.

• Compreender os fundamentos básicos de páginas Web, Internet e protocolos necessários;

• Entender o funcionamento básico da linguagem HTML;

• Utilizar de maneira correta os princípios e as tags da linguagem HTML;

• Utilizar recursos da linguagem HTML para construir páginas Web.

‎As páginas da Web geralmente parecem muito coloridas: vários pedaços de texto, tabelas, imagens, barras laterais, notas de rodapé e até filmes. No entanto, tudo isso é descrito na forma de texto simples. Sim, as páginas da Web são arquivos de texto que você pode criar com o conhecido editor do bloco de notas que acompanha o Windows!

A primeira versão da linguagem HTML apareceu há muito tempo, em 1992. Desde então, muitos gigabytes vazaram pela Web. O HTML também não parou. A especificação final para a nova versão do HTML, a versão 5, está atualmente em andamento, e muitos navegadores da Web já suportam alguns de seus recursos. É isso que estudaremos.

Que tal se relacionar com os colegas por meio de um fórum? Esse recurso favorece o diálogo e a troca de opiniões e de saberes, estimulando o debate e a reflexão em torno de temas, situações, problemas ou ideias encontradas em nossa vida de estudos e pessoal.

Leia o artigo "HTML básico - códigos HTML", que serve para contextualizar brevemente sobre a Linguagem HTML.

Vamos à indicação de documentários e vídeos? Eles também servem para os  propósitos didáticos, complementando a educação formal.

O Lógica computacional é o uso da lógica para executar ou raciocinar sobre computação. Ela tem uma relação com a ciência da computação e a engenharia semelhante à relação da lógica matemática com a matemática ou da lógica filosófica com a filosofia.

Tópico 1 - Como Funciona  uma Página WEB

2 WEB DESIGN MODERNO

Anteriormente, o acesso à Internet só podia ser obtido a partir de computadores. Então eles começaram a acessar a Internet a partir de telefones celulares. Agora, players multimídia, leitores de e-books e televisores se conectam à Web, e, no futuro, quem sabe, acessem sites com um ferro de passar roupa ou com um aspirador de pó.

"Estarei em todos os lugares", diz a Internet. "Eu me tornarei onipresente. Todos se preparem para minha chegada!".

2.1 O QUE É EXIGIDO DE UM SITE MODERNO

Siga três regras simples. Acompanhe-as a seguir.

• cumpra rigorosamente todos os padrões da Internet;

• pense cuidadosamente sobre o conteúdo das páginas da Web;

• certifique-se de que as páginas da Web estejam acessíveis.

Vamos considerá-los com mais detalhes.

A Internet ameaça chegar a uma grande variedade de dispositivos, que podem ser baseados em diferentes plataformas de hardware e software, muitas vezes, muito diferentes, provocando um ao outro. Assim, os computadores pessoais são construídos na plataforma de hardware Intel e na plataforma de software Microsoft Windows (pelo menos a maioria). 

Uma coisa une toda essa variedade de hardware e software: conformidade com os padrões da Internet. Caso contrário, os dispositivos exibirão as páginas da Web incorretamente. Assim, na melhor e na pior das hipóteses, não funcionarão.

Isso leva à primeira regra listada anteriormente: os designers da Web devem aderir estritamente aos padrões modernos da Internet ao criar páginas da Web, para que suas criações sejam igualmente (bem, quase idênticas) exibidas em todos os dispositivos.

A primeira regra também exige o abandono de tecnologias de Internet desatualizadas e proprietárias. Com tecnologias obsoletas, tudo fica claro: o velho não ajuda o novo. As tecnologias fechadas são inconvenientes, porque, muitas vezes, são controladas por uma única empresa que "encomenda a música" sozinha e nem sempre ouve a opinião da comunidade da Internet. Essas tecnologias incluem, em particular, Adobe Flash e Microsoft ActiveX.

Os padrões abertos da Internet, incluindo os padrões da Web, são gerenciados pelo World Wide Web Consortium (World Wide Web Consortium), ou W3C, abreviado. Ela desenvolve padrões, alinha-os com os requisitos dos participantes do mercado e os publica em seu site (http://www.w3.org). Todas as normas nele publicadas são vinculativas.

A Internet começou como uma rede de cientistas que precisava compartilhar seus resultados de pesquisa. E quais foram esses resultados? Principalmente texto, possivelmente, com ilustrações. Os cientistas são um público pouco exigente nesse sentido, ficaram bastante satisfeitos com as modestas possibilidades do então WWW.

Agora, a grande maioria dos usuários da Internet são pessoas comuns. Um texto simples com algumas fotos não é suficiente para eles. Eles devem receber texto, música e vídeo bem-formados. Eles são mais exigentes do que os primeiros habitantes da Web.

A partir daqui, segue a segunda regra: 

• Web designers devem cuidar da completude e da conveniência de preencher páginas da Web.

• A estrutura das páginas da Web deve ser bem-pensada, para que o visitante encontre imediatamente tudo o que precisa.

• As páginas da Web devem ser fáceis de ler e não ferir seus olhos.

• É desejável chamar a atenção do visitante para materiais importantes e ocultar os sem importância. Elementos dinâmicos podem ajudar com isso: parágrafos que se expandem quando você clica com o mouse, hiperlinks que se destacam quando você passa o mouse etc.

• Se o site for dedicado a música ou vídeo, todos devem ser reproduzidos diretamente em suas páginas da Web, sem download.

• Em poucas palavras: tudo precisa ser feito para a comodidade do visitante. 

A Internet ameaça chegar a uma variedade de dispositivos com características diferentes: velocidade do processador, tamanho da memória, resolução da tela e velocidade de acesso à Internet. Mas todos eles devem fornecer uma saída consistente de páginas da Web. Como conseguir isso?

Aqui está a terceira regra:

• Os designers da Web devem se preocupar com a acessibilidade das páginas da Web.

• As páginas da Web devem ser o mais compactas possível. Quanto menor o arquivo, mais rápido ele baixa pela rede (este é um axioma).

• As páginas da Web não precisam ser excessivamente complexas. Quanto mais complexa for uma página da Web, mais tempo e recursos do sistema serão necessários para processar e exibir.

• As páginas da Web não devem exigir nenhum software adicional para serem exibidas. Idealmente, apenas um navegador da Web é suficiente para exibi-los.

Mas como essas regras são implementadas na prática? Vamos abrir um site moderno, como o da organização W3C (Figura 1). Como lembramos, ele pode ser encontrado no endereço da Internet http://www.w3.org.

O que vemos aqui?

• O site foi criado de acordo com todos os padrões modernos da Internet. Ele é exibido em todos os navegadores da Web quase da mesma maneira.

• O site não usa nenhuma tecnologia de Internet obsoleta ou proprietária.

• A estrutura das páginas da Web é extremamente clara. Podemos encontrar facilmente tudo o que precisamos. À esquerda, há um conjunto de hiperlinks que levam a outras páginas da Web no site. No meio, há uma lista de notícias e hiperlinks para artigos selecionados. À direita, há hiperlinks para material adicional.

• A página da Web é ótima para ler. Uma fonte fina sem serifa, um esquema de cores cinza azulado, calmo, molduras finas com cantos arredondados, um mínimo de gráficos, nada chama a atenção.

• Tem até vídeo.

• A página da Web é carregada rapidamente e é exibida instantaneamente na tela.

• Uma página da Web não requer nada além de um navegador da Web para exibi-la. Há também conformidade com padrões, conteúdo e acessibilidade. Três de três.

São essas páginas da Web que aprenderemos a criar em nossos estudos.

2.2 CONCEITO DA WEB 2.0

Vamos voltar às regras que vimos até agora e expandi-las um pouco.

• Ao criar páginas da Web, você deve aderir aos padrões modernos da Internet. Ao mesmo tempo, é necessário abandonar completamente as tecnologias da Internet desatualizadas e fechadas, pois elas não se encaixam no paradigma moderno de design da Web e muitas vezes não são suportadas por todos os navegadores da Web.

• Atenção especial deve ser dada à estrutura e ao conteúdo das páginas da Web. A estrutura das páginas da Web deve ser a mais simples possível, e o conteúdo deve ser rico o suficiente para que o visitante encontre rapidamente as informações de que precisa. Além disso, é necessário criar páginas Web para que o design não interfira na percepção das informações.

• As páginas da Web devem ser acessíveis em qualquer dispositivo. As páginas da Web devem ser carregadas e exibidas rapidamente. Além disso, as páginas da Web não devem exigir nenhum software adicional para serem exibidas.

De fato, apresentamos aqui os postulados do chamado conceito Web 2.0. Esta é uma lista de regras que qualquer site que afirme ter título de moderno. Figurativamente, esta é a bandeira que os trabalhadores da indústria da Web carregam em conjunto, acompanhando os tempos.

Além disso, o conceito da Web 2.0 fornece quatro princípios, que são a "vanguarda" do design da Web. Até agora, muito poucos sites os seguem (e o site "home" do W3C, infelizmente, não é exceção). Vamos considerá-los em ordem.

O primeiro princípio é separar o conteúdo, a apresentação e o comportamento de uma página da Web. Aqui, o conteúdo é a informação que é exibida na página da Web; a apresentação descreve o formato, para exibir essas informações; e o comportamento é a reação da página da Web ou seus elementos individuais às ações do visitante. Ao separá-los, podemos editar, digamos, o conteúdo, sem afetar a apresentação e o comportamento; ou atribuir a criação de conteúdo, a apresentação e o comportamento a diferentes pessoas.

O segundo princípio é o conteúdo carregável. Em vez de atualizar toda a página da Web, em resposta a um clique em um hiperlink, podemos carregar apenas a parte da página que contém as informações necessárias. Isso reduzirá bastante a quantidade de informações transmitidas pela rede (tráfego de rede) e permitirá que você execute qualquer ação com os dados após o carregamento.

O terceiro princípio é o conteúdo gerado. Alguma parte da página da Web pode não ser baixada pela rede, mas gerada no local, em um navegador da Web. Assim, reduzimos ainda mais o tráfego de rede.

O quarto princípio é a marcação de dados semânticos. Isso nos permitirá vincular os dados exibidos na página da Web de acordo com algumas regras. Por exemplo, podemos vincular semanticamente páginas de manual HTML, para que, quando um visitante carregar uma página, ele possa navegar imediatamente para páginas relacionadas que contenham informações adicionais ou relacionadas.

Um exemplo de site que implementa esses quatro princípios é o site Ext Core Library Reference, localizado no endereço da Internet: http:// www.extjs.com/products/core/docs/e.

• O conteúdo, a apresentação e o comportamento das páginas da Web que o compõem são armazenados separadamente, em arquivos separados.

• Ao mudar de um artigo de referência para outro, apenas o texto do artigo é carregado. O resto da página Web, em particular a lista hierárquica de artigos, permanece inalterada.

• Após carregar o texto do artigo, a partir dele, é gerada sua apresentação final. Na verdade, nós geramos conteúdo.

• Os artigos do diretório são semanticamente relacionados entre si. Esses links são usados ​​para gerar hiperlinks para artigos "relacionados".

Os dois sites que analisamos são a Web 2.0 em ação. Gostaria de criar algo semelhante? Você quer "limpar o nariz" em termos de suporte aos padrões da Internet para o próprio W3C? 

3 COMO FUNCIONA A INTERNET

Veremos o site Ext Core Library Reference. Vamos responder à pergunta indicada no título desta seção: “como tudo isso funciona?”. Além disso, perguntamo-nos: de onde o navegador da Web obtém a página da Web desejada? Quem é responsável pelo complexo mecanismo chamado World Wide Web?

3.1 CLIENTES E SERVIDORES DA INTERNET. ENDEREÇOS DA INTERNET

Tomemos, por exemplo, a página principal de um site que abrimos. Deve ser armazenado em algum lugar. Mas onde? Na unidade de outro computador conectado à rede (nesse caso, a Internet), que pode pertencer ao autor do site ou a uma organização terceirizada que fornece acesso à Internet (Internet Service Provider). É armazenado na forma de um arquivo ou de um conjunto de arquivos, os mesmos que são encontrados em abundância em nosso próprio computador.

Mas como poderíamos obter e visualizar o conteúdo desse arquivo? Primeiro, por meio da própria rede, conectando o computador que armazenou o arquivo. Em segundo lugar, com a ajuda de programas especiais, que, de fato, realizavam a transferência de arquivos. Esses programas são divididos em dois grupos.

Os programas do primeiro grupo interagem diretamente com o usuário: recebem dele solicitações de informações armazenadas em algum lugar da rede, exibem na tela e, possivelmente, permitem que sejam editadas e enviadas de volta. Esses programas são chamados de clientes.

Usamos um navegador da Web para visualizar as páginas da Web. Este é um programa-cliente, ele pega os endereços da Internet das páginas da Web de nós, recebe os arquivos que armazenam seu conteúdo e exibe esse conteúdo na tela. O programa cliente de e-mail permite que você recupere cartas recebidas da caixa postal e crie novas. Há também clientes para chat, sistemas de mensagens instantâneas etc.

Mas os clientes não têm acesso direto às informações armazenadas em outros computadores. Eles não podem simplesmente "rastrear" o disco rígido de um computador remoto e ler um arquivo de lá. Isso é feito por motivos de segurança. Em vez disso, eles enviam solicitações para programas do segundo grupo: os servidores.

Servidores executados em computadores armazenam informações que precisam estar disponíveis na rede. Eles recebem solicitações de clientes, extraem as informações necessárias dos arquivos e as enviam para eles. Eles também podem receber informações inseridas por usuários de clientes e salvá-las em arquivos, enquanto possivelmente as processam de alguma forma. Podemos dizer que os servidores atuam como intermediários entre os clientes e as informações que eles solicitam.

Os sites da Web são gerenciados por servidores da Web que aceitam solicitações de clientes e enviam a eles o conteúdo dos arquivos necessários. Os servidores de e-mail são usados ​​para gerenciar serviços de e-mail, eles salvam as cartas recebidas em arquivos, emitem-nas para clientes de e-mail mediante solicitação, recebem novas mensagens de clientes e as enviam para o endereço especificado – em geral, funcionam como uma agência postal. Os serviços de bate-papo e de mensagens instantâneas também têm seus próprios servidores.

Os clientes são a cara da Internet. Os servidores são o seu coração.

Mas como especificar quais informações e de qual servidor precisamos? Com a ajuda de um endereço de Internet especialmente composto.

Cada informação – um arquivo, uma caixa de e-mail, um canal de bate-papo – disponível na rede é identificada exclusivamente por um endereço da internet, que é uma sequência de letras, números e alguns outros símbolos.

• Endereço de internet do programa de servidor em execução no computador.

• Um ponteiro para a unidade de informação desejada, por exemplo, o caminho para o arquivo, o nome da caixa de e-mail, o nome do canal de bate-papo etc. (pode estar ausente).

Vejamos alguns exemplos de endereços da Internet.

No endereço de internet http://www.somesite.ru/folder1/file1.htm, ambas as partes estão presentes. Aqui http://www.somesite.ru é o endereço de Internet do programa servidor. Nesse caso, o servidor Web, e /folder1/file1.htm é o caminho para o arquivo solicitado.

No endereço de internet http://www.othersite.eu, apenas o endereço de Internet do servidor Web está presente. Quais informações, nesse caso, serão enviadas ao cliente (navegador da Web)? Descobriremos no decorrer de nossos estudos.

E no quadro abaixo, vemos o endereço de Internet do servidor de e-mail (mail.someserver.ru) e o nome da caixa de correio (usuário).

3.2 SITE E SERVIDORES WEB

Como acabamos de descobrir, todos os programas da Internet são divididos em clientes e servidores. Os clientes trabalham do lado do usuário, recebem endereços de Internet deles e exibem as informações recebidas desses endereços. Os servidores recebem solicitações de clientes, encontram as informações solicitadas nos discos dos computadores servidores e as enviam aos clientes.

A WWW usa navegadores da Web como clientes e servidores da Web como servidores. Nós também sabemos disso.

Qualquer informação em discos de computador é armazenada em arquivos. Bem, qualquer usuário mais ou menos experiente sabe disso.

As páginas da Web também são armazenadas em arquivos htm ou html (ou sujeito às convenções tipográficas descritas na introdução, htm[l]). Uma página da Web ocupa um ou mais arquivos.

Um site da Web é uma coleção de muitas páginas da Web que compartilham um tema comum e que estão conectadas umas às outras por meio de hiperlinks (isso será abordado no Capítulo 6). Portanto, um site da Web também é uma coleção de arquivos, possivelmente armazenados em pastas diferentes, para que possam ser gerenciados mais facilmente.

E, agora, atenção! Veremos alguns detalhes "íntimos" da operação dos servidores da Web que nem todo usuário da Internet conhece.

Em primeiro lugar, para armazenar todos os arquivos que compõem o site, uma pasta especial é alocada no disco do computador servidor, chamada de pasta raiz do site. O caminho para essa pasta é especificado nas configurações do servidor Web para que ele possa "encontrá-lo".

Então, todos os arquivos que compõem um site devem ser armazenados na pasta raiz ou em pastas subdobradas nela. Os arquivos localizados fora da pasta raiz não existem do ponto de vista do servidor Web. Isso foi feito por segurança, para que um invasor não pudesse acessar os discos do computador servidor.

Quando um endereço da internet especifica o caminho para um arquivo solicitado, o servidor Web o conta em relação à pasta raiz. Isso é mais fácil de mostrar por meio de exemplos.

• http://www.somesite.ru/page1.htm – o arquivo page1.htm, armazenado na pasta raiz do site, será enviado em resposta;

• http://www.somesite.ru/chapter2/page6.htm – a resposta será o arquivo page6.htm armazenado na pasta capítulo2, que está aninhada na pasta raiz do site;

• http://www.somesite.ru/downloads/others/archive.zip – o arquivo archive.zip será enviado em resposta, armazenado na pasta other, aninhada na pasta downloads, que, por sua vez, está aninhada na pasta raiz do site.

Mas não é comum digitarmos um endereço de Internet que inclua o caminho para o arquivo solicitado. Mais frequentemente, os endereços da Internet incluem apenas o endereço do programa servidor, por exemplo, http://www.somesite.ru. O que o servidor Web faz nesse caso? Qual arquivo ele envia de volta?

As chamadas páginas da Web padrão são especialmente projetadas para esse fim. Essa página da Web é emitida para o cliente se ele especificar, no endereço da Internet, apenas o caminho para o arquivo, mas não seu nome. Normalmente, o nome do arquivo de página da Web padrão é default.htm[l] ou index.htm[l], embora isso possa ser alterado nas configurações do servidor da Web.

Então, se digitarmos o endereço de internet http://www.somesite.ru, o servidor da Web retornará o arquivo de página da Web padrão para nós, armazenado na pasta raiz do site. Essa quase sempre será a página principal da Web — aquela que inicia a "jornada" pelo site.

Também podemos digitar um endereço de Internet, como http://www.somesite.ru/chapter 2/. O servidor da Web nos enviará o arquivo de página da Web padrão armazenado na pasta capítulo2 na raiz do site.

Isso é tudo que aprenderemos, por enquanto, sobre sites e servidores da Web. É hora de olhar dentro das páginas da Web e criar nossa primeira página da Web. Ao longo do caminho, comece a aprender a linguagem HTML5, indispensável no design da Web.

4 PRINCÍPIOS BÁSICOS DE PÁGINAS WEB

As páginas da Web geralmente parecem muito coloridas: vários pedaços de texto, tabelas, imagens, barras laterais, notas de rodapé e até filmes. Mas tudo isso é descrito na forma de texto simples. Sim, as páginas da Web são arquivos de texto que você pode criar com o conhecido editor do Bloco de Notas que acompanha o Windows! Mas, claro, qualquer editor de texto semelhante servirá.

Uma linguagem especial é usada para formatar o conteúdo das páginas da Web.

A primeira versão da linguagem HTML apareceu há muito tempo, em 1992. Desde então, muitos gigabytes vazaram pela Web. O HTML também não parou. A especificação final para a nova versão do HTML, a versão 5, está atualmente em andamento. Muitos navegadores da Web já suportam alguns de seus recursos. É isso que vamos estudar. 

Tópico 2 - Linguagem HTML- Básico

2 FUNDAMENTAÇÃO TEÓRICA

Websites são arquivos armazenados em servidores, que são computadores que hospedam (armazenam arquivos) websites. Esses servidores estão ligados a uma rede gigante, chamada Internet. Os navegadores são programas de computador que carregam páginas Web por meio da sua conexão com a Internet, como o Google Chrome ou o Internet Explorer, enquanto os computadores utilizados para acessar essas páginas Web são conhecidos como "clients" (clientes).

Para acessar um website, você precisa conhecer seu endereço de Protocolo Internet (IP). Um endereço IP é uma sequência única de números. Cada dispositivo tem um endereço IP para se distinguir dos bilhões de websites e dispositivos conectados via Internet. Você pode encontrar o endereço IP de qualquer website usando o Command Prompt no Windows ou o Network Utility > Traceroute do MacBook.

Para encontrar o endereço IP de seu dispositivo, você também pode digitar "qual é meu endereço IP" em seu navegador de busca. Apesar de você poder acessar um site usando seu endereço IP, a maioria dos usuários da Internet prefere usar nomes de domínio ou passando por mecanismos de busca.

2.1 O QUE É PROGRAMAÇÃO?

Programação se refere à escrita de código para servidores e aplicações usando linguagens de programação. São chamadas de "linguagens", porque incluem vocabulário e regras gramaticais para a comunicação com computadores. Todos os softwares são escritos por pelo menos uma linguagem de codificação, mas as linguagens variam de acordo com a plataforma, o sistema operacional e o estilo. Todos os idiomas se enquadram em uma de duas categorias: front-end e back-end. Iremos focar na categoria front-end.

2.2 FRONT-END

Front-end (ou client-side) é o lado de um website ou software que você vê e interage como um usuário da Internet. Quando as informações do site são transferidas de um servidor para um navegador, os idiomas de codificação front-end permitem que o site funcione sem ter que "se comunicar" continuamente com a Internet. O código front-end permite aos usuários interagir com um site e reproduzir vídeos, expandir ou minimizar imagens, destacar textos e muito mais. Os desenvolvedores Web que trabalham em codificação front-end trabalham no desenvolvimento do lado do cliente.

Os desenvolvedores front-end trabalham ao lado do cliente ou do usuário dos sites, programas e softwares – em outras palavras, o que os usuários vêem. Eles projetam e desenvolvem os aspectos visuais, incluindo o layout, navegação, gráficos e outros designs. O principal trabalho desses desenvolvedores é construir interfaces que ajudem os usuários a atingir seus objetivos, e é por isso que muitas vezes eles também têm uma mão no aspecto de experiência do usuário de seus projetos.

2.3 HTML 

A HyperText Markup Language (HTML) tem sido usada desde os anos 90. É a base de todos os websites e representa o mínimo do que é necessário para criar um website. Embora seja possível criar um website apenas com HTML, ele não teria um aspecto particularmente atraente.

HTML5 é a versão mais recente e suporta a funcionalidade de navegação entre plataformas, tornando-o popular no desenvolvimento de aplicativos mobile. 

3 TAGS E ELEMENTOS TEXTUAIS

Os elementos HTML são designados por tags. A maioria dos elementos tem uma tag de abertura e de fechamento. As tags de abertura precedem o texto e contêm o nome do elemento entre parênteses "<" e ">". As tags de fechamento são idênticas às tags de abertura, exceto por uma barra invertida que precede o nome do elemento. 

Digamos que você queira adicionar um parágrafo à sua página Web e o texto do parágrafo é "Este é um parágrafo". Você vai embrulhá-lo com as tags de parágrafo HTML: <p></p>. Então, o HTML terá o seguinte aspecto: 

Observe abaixo o resultado no navegador. 

Isso é tudo o que você precisa para fazer um elemento de parágrafo em HTML. A maioria dos elementos HTML são os mesmos: uma tag de abertura, uma tag de fechamento e conteúdo no meio. 

Alguns elementos HTML, tais como <br> ( break), têm apenas uma tag de abertura – estes são chamados de tags vazias. Os nomes dos elementos são insensíveis a maiúsculas e minúsculas. 

Os elementos HTML geralmente aparecem em letras minúsculas, com uma tag inicial, uma tag final e algum conteúdo no meio. No entanto, há elementos, como <br>, que não têm conteúdo ou tag final. 

Estes são chamados de elementos vazios. A seguir, revisaremos os elementos mais comuns e suas etiquetas.

• Paragraph (<p>): o elemento de parágrafo HTML representa um parágrafo. Colocando <p></p> tags ao redor do texto, você fará com que esse texto comece em uma nova linha.

• Image (<img>) : o elemento de imagem HTML incorpora uma imagem no documento. Ele requer um atributo src (fonte) para renderizar corretamente. Um atributo alt também deve ser incluído, caso a imagem não seja carregada corretamente ou o leitor tenha uma deficiência visual.

• Headings (<h1>-<h6>): os elementos de cabeçalho HTML representam diferentes níveis de cabeçalho de seção. <h1> é o nível de seção mais alto e o mais proeminente, enquanto <h6> é o mais baixo e, portanto, menos proeminente.

• Division (<div>): o elemento de divisão de conteúdo HTML (div) é um container genérico de nível de bloco para "conteúdo de fluxo". O conteúdo de fluxo é uma categoria de elementos HTML que contém texto ou conteúdo incorporado. Na parte de trás, os elementos div ajudam a organizar o código em seções claramente marcadas. No front-end, eles adicionam quebras de linha antes e depois de seu conteúdo. Caso contrário, eles não afetam o conteúdo ou o layout da página, a menos que sejam estilizados com CSS.

• Span (<span>): o elemento HTML span é um container genérico em linha para " phrasing content" (conteúdo fraseado). Phrasing content se refere a texto e qualquer marcação que ele contenha, como <abbr> e <audio> tags.

• Anchor (<a>): o elemento de ancoragem HTML cria um hyperlink. O elemento de âncora requer um atributo href, que especifica o destino do link. O destino pode ser outra seção na mesma página Web, ou outra página Web no mesmo site, ou sites externos, arquivos e endereços de e-mail.

4 ESTRUTURAS E TAGS IMPORTANTES

Os atributos modificam os elementos HTML de diferentes maneiras. Eles podem alterar a aparência do elemento, aplicar identificadores únicos para que os elementos possam ser direcionados pelo CSS ou fornecer informações necessárias aos leitores ou leitores de tela. 

• Style Attribute (atributo de estilo): o atributo de estilo contém CSS em linha. Esse CSS substituirá qualquer estilo definido na seção principal do documento ou em uma stylesheet externa. Ele só será aplicado ao elemento HTML que tem o atributo de estilo em sua tag de abertura.

• ID Attribute: é usado para identificar um único elemento em um arquivo HTML. Isso significa que o valor de um ID Attribute não deve ser repetido dentro do mesmo arquivo. Usando esse valor único, você pode apontar um único elemento com CSS interno ou externo.

• Class Attribute: o Class Attribute é usado para identificar um grupo de elementos com o mesmo nome e personalizar esse grupo, criando efetivamente um novo grupo de elementos. Os botões Bootstrap, por exemplo, são todos rotulados com a classe .btn para que tenham o mesmo estilo básico: fonte 14px, tamanho médio, bordas arredondadas etc.

• Language Attribute: como mencionado, o Language Attribute (atributo de idioma) sinaliza aos leitores qual é o idioma principal da página Web e quando eles precisam mudar para outro idioma. Este é um detalhe que pode tornar seu conteúdo mais acessível a todos os leitores, não importa de que região eles são ou o idioma que falam. Embora esse atributo seja mais comumente incorporado no elemento HTML, ele também pode ser usado com parágrafo, div, span e outros elementos.

• Href Attribute: um atributo href contém o destino de um link. Esse atributo deve ser sempre incluído com um elemento de âncora (anchor).

Source Attribute: assim como um elemento de ancoragem precisa de um atributo href, uma imagem precisa de um atributo fonte. Este contém o caminho para o arquivo de imagem ou sua URL. 

A seguir, observe o resultado no navegador: 

• Alt Attribute: o atributo alt fornece informações descritivas sobre o elemento HTML. Isso é importante para os leitores com deficiências visuais e para todos os leitores, caso o elemento não seja carregado. Nesse caso, os leitores ainda serão capazes de coletar o que o elemento deveria transmitir. Como o atributo fonte, na maioria das vezes, você encontrará o atributo alt com o elemento de imagem.

• Data-* Attribute: o atributo data-* é usado para armazenar dados personalizados que são privados para a página ou aplicação. Você pode usar esses dados armazenados no JavaScript do documento para criar uma experiência mais dinâmica para o usuário. O asterisco no atributo data* pode ser qualquer valor. 

Tópico 3 - Linguagem HTML- Avançado

2 TABELAS E LISTAS

Com o HTML <ul> tag e CSS, você pode criar e estilizar listas não ordenadas em suas páginas Web. Essas listas podem ajudar a melhorar a legibilidade de seus posts no blog, páginas de destino, páginas de produtos e muito mais.

2.1 UNORDERED LIST (<ul>)

O elemento de lista não ordenada HTML é usado para agrupar itens quando a ordem não importa. Listas de compras, por exemplo, não precisam seguir uma ordem em particular. Os itens da lista precisam ser definidos pela tag <li> e então envolvidos no elemento <ul>. 

A seguir, observe o resultado no navegador. 

2.2 ORDERED LIST (<ol>)

O elemento da lista ordenada em HTML é usado para agrupar itens quando o pedido é importante. Receitas, por exemplo, devem seguir uma ordem em particular. Os passos precisam ser definidos pela etiqueta <li> e depois envolvidos no elemento <ol>. Uma lista ordenada começará com o número 1 por padrão. Se você quiser começar com outro número, basta adicionar um atributo inicial e definir o valor para o número que você deseja.

A seguir, observe o resultado no navegador: 

2.3 TABLE (<table>)

O elemento <table> cria uma tabela para organizar o conteúdo de uma forma que é fácil de ler em um relance. Ele requer três outros elementos HTML: a <tr>, <th>, e <td> tags. A <tr> tag para definir uma linha de tabela; a <th> tag, para definir o cabeçalho da tabela; e a <td> tag, para definir os dados da tabela (ou seja, células da tabela). Podemos mencionar ainda outras tags importantes, como <caption>, que define as legendas, <colgroup>, que especifica um grupo de uma ou mais colunas em uma tabela, <col>, que especifica as propriedades de uma coluna para cada coluna dentro dos elementos; e itens de cabeçalhos e rodapés, como <thead>, que agrupa o cabeçalho, <tbody>, que agrupa o conteúdo principal e <tfoot>, que agrupa o conteúdo do rodapé. 

Veja um exemplo de uma tabela. 

A seguir, observe o resultado no navegador. 

2.4 QUANDO USAR TABELAS EM HTML

Ao criar um post de blog ou página Web, você pode querer incluir dados que não sejam melhor representados por texto. Digamos que você queira mostrar a diversidade da sua força de trabalho. Como esses dados seriam muito complicados ou detalhados para simplesmente escrever, você poderia usar tabelas para organizá-los e apresentá-los. Veja alguns outros casos de uso de tabelas HTML, como resumo de um post de blog:

• comparando múltiplas ferramentas;

• exibindo as principais características dos planos de preços para comparação;

• mostrando o horário de funcionamento de sua loja em seu site;

• relatando valores precisos, como a velocidade de carregamento dos temas mais rápidos do WordPress;

• exibindo dados com diferentes unidades de medida, como grau e porcentagem.

Embora as tabelas possam ser uma grande adição a alguns posts em blogs, tabelas de preços e muito mais, elas não devem ser usadas para certos fins. 

2.5 QUANDO NÃO USAR TABELAS HTML

As tabelas HTML devem ser usadas para exibir e organizar qualquer tipo de dado tabular. Elas não devem ser usadas para a disposição das páginas Web. Esta era uma técnica usada no passado quando o CSS era menos avançado e os navegadores da Web não suportavam o posicionamento do CSS de forma consistente e confiável. Agora, o CSS tem múltiplas técnicas de layout, incluindo a propriedade de exibição, flexbox e grid, que são mais poderosas que as tabelas HTML e são amplamente suportadas pelos navegadores Web.

A seguir estão as razões mais comuns para evitar o uso de tabelas HTML para layout. Acompanhe.

• Código complexo: os layouts de tabelas geralmente envolvem estruturas de marcação mais complexas do que técnicas de layout adequadas, em parte, porque, muitas vezes, incluem múltiplas camadas de tabelas aninhadas. Isso significa que é mais difícil escrever, manter e depurar o código para layouts de tabelas.

• Problema de acessibilidade: devido às suas complexas estruturas de marcação, layouts construídos com tabelas apresentam problemas de acessibilidade para usuários com deficiência visual e outros tipos de usuários com leitores de tela. A questão principal é que o conteúdo em um layout de tabela nem sempre faz sentido quando lido da esquerda para a direita e de cima para baixo. Tabelas aninhadas e vários intervalos e atributos nas células da tabela também podem ser difíceis para um leitor de texto.

• Falta de capacidade de resposta: por padrão, as tabelas são dimensionadas de acordo com seu conteúdo. Portanto, é necessário um código adicional para otimizar o layout das tabelas para uma variedade de dispositivos. Flexbox, CSS Grid e Bootstrap, por outro lado, são todos modelos de layout responsivos.

3 OUTROS ELEMENTOS

3.1 ÊNFASE (<em>)

O elemento de ênfase HTML enfatiza o texto que ele contém. Os navegadores tipicamente renderizam o texto em itálico.

Aqui está um exemplo da ênfase colocada em torno de um parágrafo e aninhada dentro de um parágrafo:

A seguir, observe o resultado no navegador:

3.2 STRONG ( <strong>)

O elemento <strong> do HTML indica que o texto que ele contém é de grande importância ou urgência. Os navegadores tipicamente renderizam o texto em negrito. Aqui está um exemplo do elemento forte:

A seguir, observe o resultado no navegador. 

3.3 UNARTICULATED ANNOTATION (<u>)

O elemento de anotação não articulado marca o texto como tendo alguma forma de anotação não textual. Por exemplo, você pode usar esse elemento para apontar erros ortográficos.

A seguir, observe o resultado no navegador: 

Se você quiser sublinhar o texto para qualquer outro propósito que não seja representar uma anotação não textual, então use outro elemento HTML ou propriedade CSS. Por exemplo, se você gostaria de sublinhar o texto para decoração, você usaria a propriedade CSS text-decoration e a definiria como "sublinhado" em seu lugar. Se você gostaria de sublinhar um título de livro, então usaria o elemento de citação.

3.4 IFRAME (<iframe>)

Um iframe, abreviação de frame inline, é um elemento HTML que contém outro documento HTML dentro dele. O elemento iframe é especificado com a tag iframe. Ele pode ser colocado em qualquer lugar em um documento HTML e, portanto, em qualquer lugar em uma página da Web. Os iframes são mais frequentemente usados para incorporar conteúdo específico de uma página da Web – como um vídeo, um formulário, um documento ou mesmo uma página Web completa – dentro de uma página da Web diferente. 

Esta é uma capacidade poderosa em HTML – você pode pegar qualquer conteúdo de qualquer website (com permissão) e colocá-lo em seu próprio site para melhorar seu conteúdo. 

Para usar um iframe, usamos a tag <iframe> HTML. Essa tag requer um atributo src (fonte), que especifica a URL do arquivo HTML a ser embutido na página principal. Em sua forma mais básica, um iframe se parece com isso em HTML.

4 FERRAMENTAS DE NAVEGAÇÃO

Se o HTML é, ou não, tecnicamente, uma linguagem de programação é um debate contínuo entre desenvolvedores e especialistas em Web. Enquanto a maioria define o HTML como uma linguagem de marcação, e não como uma linguagem de programação, alguns argumentam que as duas não são mutuamente exclusivas.

Para entender essa distinção, temos que conhecer a definição de uma linguagem de programação. Todas as linguagens de programação têm algum propósito funcional – elas precisam "fazer" alguma coisa, seja avaliando expressões, declarando variáveis, ou modificando dados. Essas linguagens não apenas instruem os computadores sobre o que fazer, mas como fazê-lo. 

O JavaScript é a linguagem de programação mais amplamente utilizada no desenvolvimento Web. Outras linguagens de programação populares incluem Python, Java e C/C++. O HTML, por outro lado, não "faz" realmente nada. Ele simplesmente dá aos navegadores o conteúdo que precisa ser exibido. O HTML não se importa com como o navegador exibe o conteúdo, desde que ele seja exibido. Em outras palavras, o HTML tem um propósito estrutural, não um propósito funcional.

Ainda assim, alguns desenvolvedores usam essa mesma lógica para argumentar que o HTML é uma linguagem de programação – é apenas uma linguagem de programação declarativa. Segundo o professor David Brailsford (2020), da Universidade de Nottingham, por exemplo, as linguagens declarativas são muito mais restritas do que outras linguagens, porque pedem algo e não se importam com como isso acontece, mas isso não as torna menos de uma linguagem de programação. 

Se você já se interessou por Web design ou brincou com um site no WordPress, Squarespace ou Google Sites, você já tocou no desenvolvimento Web de front-end. O material de front-end é importante – é o que seus visitantes, clientes e usuários vêem e como eles usarão seu site. Ele também controla componentes, como tipografia e fontes, navegação, posicionamento e compatibilidade e capacidade de resposta do navegador. Essa parte refletirá mais a sua visão inicial do site e o que você incluiu em sua wireframe. Como a tecnologia e as preferências do consumidor mudam, a codificação do lado do cliente tende a ficar desatualizada muito mais rapidamente do que o desenvolvimento back-end. É aqui que os recursos de programação vêm a calhar.

Para começar a usar HTML, você precisa de um editor de texto como Notepad++ ou Sublime Text. Como um arquivo HTML está no formato de texto padrão, qualquer editor de texto básico irá funcionar. Mas, por causa dessa demonstração e de como o SublimeText funciona para Mac e Windows, vamos caminhar por meio do processo usando esse editor.

• Passo 1: baixe a última versão do Sublime Text.

Vá para a página de download do Sublime Text e clique em seu sistema operacional. Um arquivo zip será baixado. 

• Passo 2: abrir Sublime Text.

Abra o arquivo zip e clique em Sublime Text em sua pasta Downloads. O editor abrirá automaticamente.

• Passo 3: adicionar HTML.

Copie e cole o HTML abaixo no editor. Explicaremos o que cada um desses elementos significa na seção seguinte.

Observe abaixo o resultado no navegador. 

• Passo 4: salve o arquivo HTML.

Selecione Arquivo > Salvar como no menu Sublime. Nomeie como "index.html". Salve em seu desktop ou em outra pasta.

• Passo 5: visualizar o arquivo HTML em seu navegador.

Agora você pode abrir o arquivo HTML em seu navegador, clicar duas vezes sobre o arquivo, clicar com o botão direito do mouse e escolher Abrir ou arrastá-lo e soltá-lo em uma janela aberta do navegador.

LEITURA COMPLEMENTAR

INTERFACE WEB UTILIZANDO DESIGN RESPONSIVO: UM ESTUDO

DE CASO APLICADO A SMARTPHONES, TABLETS,

COMPUTADORES E TELEVISORES

WEB DESIGN RESPONSIVO

Marcela Heloisa Prostt 

Usuários de dispositivos móveis que fazem uso da web se deparam em diversas situações com problemas de visualização de sites não adaptativos aos diversos dispositivos existentes, como por exemplo: fontes pequenas, imagens cortadas, links ilegíveis e conteúdos distorcidos. Cerca de 94% das empresas ainda não possuem um site móvel (ALMEIDA; TERRA, 2011, p.29-30) e ter um site adaptado, flexível de conteúdo legível e navegável à internet móvel é imprescindível. A presente Seção apresenta uma abordagem que pode ser útil para minimizar estas situações.

A tecnologia móvel tem avançado e há muitos sites que ainda não consideram este meio de acesso às suas informações. A web de hoje é multi-dispositivos e é necessário considerar que suporte além do desktop, telas pequenas, touch screen, smart TV, redes móveis e muitas outras tecnologias (FISHER; SHARKIE, 2013, p.1).

Desta forma surgem questões a serem respondidas. Como exibir o mesmo conteúdo web para os mais variados tipos de dispositivos móveis? É possível desenvolver uma única página que seja adaptável para toda essa gama de eletrônicos móveis?

O design responsivo aborda justamente estas questões, permitindo que as páginas web respondam a qualquer dispositivo, sem que haja perda de informações por parte do usuário, conforme é apresentado na Figura 1.

O conteúdo de um site responsivo se adapta à área que cabe a ele, adequando a visualização e a navegabilidade sem perder as informações, independente do dispositivo, independente da resolução, tamanho de tela, interface com touch ou mouse, seja ele móvel ou não. Neste contexto é importante conhecer algumas resoluções de telas, levando em consideração sua orientação retrato e paisagem. A Figura 2 apresenta tais resoluções. 

Observa-se na apresentação da Figura 2, que não necessariamente um dispositivo deve ter uma tela maior para se obter uma resolução grande, por exemplo, o iPhone4S mede 58,6mm x 115,2mm e tem resolução de 960 x 640 pixels, já o iPhone5, medindo quase o mesmo tamanho físico que o iPhone4S, tem 640 x 1136 pixels, com diferença de apenas 8,6 milímetros de altura 58,6mm x 123,8mm (Apple, 2013).

Não é o tamanho físico da tela ou do dispositivo que importa no design responsivo, mas sua resolução.Web design responsivo envolve uma série de técnicas e tecnologias que são combinadas para fazer uma única aplicação funcionar em uma variedade de dispositivos de modo mais prático possível. E não são apenas os profissionais da web que viram esta necessidade, pequenas e grandes empresas estão procurando maneiras de fazer o seu projeto web, independentemente de onde o usuário pode acessá-lo (FISHER; SHARKIE, 2013, p. 2).

Ethan Marcotte (2011), creditado como o pai da Web Design Responsivo (RWD), publicou em maio de 2010 um artigo no "A List Apart" chamado "Responsive Web Design". Nele, Ethan concentrou-se em Layout fluido ou Grids flexíveis, Imagens e recursos flexíveis e Media Queries. Itens que serão abordados individualmente neste trabalho.

Na opinião de ZEMEL (2013), não existe uma “web mobile”, a web é única, logo o web design responsivo é a resposta única para uma web única. (ZEMEL, 2013, p.10). Há vários exemplos citados por ZEMEL (2013) de sites responsivos:

Casa do código3: A página Web da Casa do Código, acessada pelo navegador de um computador convencional, apresenta a disposição do seu conteúdo de maneira comum comparada as demais páginas web, como mostra a Figura 3.

Já a Figura 4, mostra a mesma página, mas acessada por um dispositivo móvel, o conteúdo tem um comportamento diferente, observado pela disposição vertical das imagens e textos e da reformulação do menu. 

Assim como a Casa do Código, a página web Fork-CMS4, também é adaptada conforme o dispositivo que o acesse, nota-se, na Figura 5, a diferença de comportamento entre os elementos e a prioridade na exibição dos principais conteúdos. 

Outro exemplo citado por ZEMEL (2013), apresentado na Figura 6, é a página web Mr. Simon Collison 5. 

Na Figura 6, apresenta uma página web basicamente contida por imagens, é evidente a diferença apresentada quando acessado por outros dispositivos. Apenas o posicionamento das imagens sofreu alteração, não houve um comportamento diferenciado para um menu ou prioridade de exibição de conteúdo, nem por ser simples, deixa ser responsivo.

Uma página web com conteúdo responsivo pode ser acessada nos computadores convencionais, nos laptops, nos smartphones, tablets, TV e qualquer outro dispositivo, que tenha acesso à Internet, de forma bem apresentada. A técnica preza por não utilizar linguagens próprias para mobile, nem desenvolver versões específicas para celulares ou subdomínios e diretórios específicos, a ideia é fazer uma única web. Em qualquer que seja o dispositivo, o ideal é ter sites desenvolvidos que sejam bem apresentados e se possível otimizados conforme a tela que o exiba.

O maior problema do desenvolvimento web convencional, é que estes não foram idealizados desde sua concepção como flexíveis e, além disso, o desafio não é técnico, mas sim conceitual (ZEMEL, 2013, p. 13).

Acreditar que o site já está bom para android, iphone e outros, pode levar a interpretações equivocadas, um site focado para cada dispositivo, tem suas desvantagens, inclusive quando o fabricante lança um novo aparelho com uma tela totalmente diferente, obrigando-o desenvolver uma nova versão do site que se adapte a esse novo aparelho, e com o devido cuidado para que as alterações não sejam incompatíveis com as versões dos aparelhos anteriores (ZEMEL, 2013, p. 14).

Algumas estratégias são adotadas para contornar o problema da adaptabilidade, como o "m ponto", ao abrir uma página web pelo celular, o navegador redirecionará para um endereço web parecido com http://m.minhapaginaweb.com.br, e se acessado em um computador convencional serão mal formatados e sem uma boa navegabilidade, pois foi definido especificamente para um celular (ZEMEL, 2013, p.14).

Outra abordagem, também comentada por ZEMEL (2013), é o One Web, onde há um único endereço web e um único sistema com o mesmo conteúdo para todos. Ainda há outra técnica chamada RESS (Responsive Design + Server Side Components), onde se serve ao mesmo endereço web e a mesma página, mas o conteúdo é ajustado parcialmente no server-side, sabendo-se qual é o navegador (ZEMEL, 2013, p. 14). FISHER e SHARKIE (2013) dizem que a melhor forma de se fazer, será diferente para cada desenvolvedor, aplicação e site desenvolvido, se a estrutura do projeto é sólida, aplicando as práticas de Layout fluido, pode muito bem ser possível, se o conteúdo é sólido e seu CMS, do inglês Content Management System, é flexível o suficiente, um novo tema pode ser tudo que se precisa para adicionar Medias Queries ou se o código fonte do projeto for robusto, inserir imagens e recursos flexíveis pode ser uma implementação bastante simples e fácil. O projeto pode até não exigir a aplicação de todos os conceitos do design responsivo, pode-se apenas criar um layout novo com várias grids ou melhorar o desempenho do CSS (Folha de Estilo em Cascata, do original Cascading Style Sheets) do projeto aplicando as medias queries, ou ainda combinar as abordagens (FISHER; SHARKIE, 2013, p. 9-10).

Fonte: PROSTT, M. H. Interface web utilizando design responsivo: um estudo de caso aplicado a smartphones, tablets, computadores e televisores. Monografia de especialização (Especialização). 2012. 78 f. Universidade Tecnológica Federal do Paraná, Especialização em Tecnologia Java e Desenvolvimento para Dispositivos Móveis, Paraná, 2012.  Disponível em: https://riut.utfpr.edu.br/jspui/bitstream/1/19887/2/CT_TECJAVMOV_I_2012_12.pdf. Acesso em: 16 set. 2022.