Categoria: a48520

Neste capítulo vamos aprender como identificar e agrupar elementos, comentários, informações meta e iframes, isto é, aprender a identificar as diferentes versões do HTML e como para indicar que versão que estamos a usar, entre outros. Portanto, cada página da Web deve começar com uma declaração DOCTYPE, para também ajudar a renderizar uma página corretamente. Desta forma, irá ser mais fácil para o navegador ver qual versão do HTML da página está a ser utilizado.
Os comentários são importantes para aqueles que estão a visualizar o nosso código fonte. Não é útil
nem é possível visualizar os comentários do código para aqueles que estão a aceder ao nossa aplicação. Apenas será útil para quem te acesso ao nosso código.
Falando agora noutro assunto deste capítulo, agrupamento de texto e elementos em um bloco. Por exemplo, se criarmos um < div> elemento para conter todos os elementos para o cabeçalho do site, em um navegador o conteúdo do < div> elemento irá começar em uma nova linha, no entanto não vai fazer diferença para a página. Ao agrupar elementos de texto em um bloco irá facilitar na organização ou na futura alteração do código, sendo mais claro. Outro exemplo é o facto que poderá ser útil para adicionar um comentário após o encerramento do código.
Outro método existente idêntico ao div é o < span> elementos. Este é usado para controlar especialmente a aparência do conteúdo desses elementos. Outro elemento é o

Neste capitulo o livro fala-nos de formas, isto é, como captar informações de visitantes e diferentes tipos de controladores de formulário.
Para isso, a forma que é mais conhecida na web é provavelmente a caixa de pesquisa que fica bem no meio da página inicial do Google. Além de permitir que os users pesquisem formas, também permite executar outras funções online. Para isso, existem vários tipos de controladores de formulário que podemos usar para capturar informações para o nosso site. Através de informações de formulário, adicionamos texto ao fazermos escolhas, ou seja, envio de formulários, upload de arquivos, entrada de senha, como uma caixa de texto linha única, entre outros. Desta forma, para abrangir uma melhor construção de formas, iremos aprender comando básicos para executá-los.
elemento, deve sempre levar a ação atribuída e geralmente tem um método e identidade atribuídos também.
Ação, cada < form> requer um elemento ação atributo. Este valor é o URL da página no servidor que receberá as informações no formulário quando ele é submetido.
Método, os formulários podem ser enviados usando um dos dois métodos.
O < input> elemento é usado para criar vários diferentes controlos de formulário. O valor do tipo atributo determina o tipo de entrada que está criado.
O < textarea> elemento é usado para criar uma entrada de texto-line. Ao contrário de outros elementos de entrada, este não é um elemento vazio. Deve, portanto, ter uma abertura e uma tag de encerramento.
, a caixa de lista baixo permite aos users selecionar uma opção em uma lista suspensa. O < selecione> elemento é usado para criar uma caixa de lista suspensa. Ele contém dois ou mais < option> elementos. O < option> elemento é usado para especificar as opções que o usuário pode selecionar. As palavras entre a abertura < option> e encerramento tags são mostrados para o usuário na caixa suspensa. O < button> elemento foi introduzido para permitir aos utilizadores mais controlo sobre como os botões aparecem e para permitir que outros elementos aparecerão dentro do botão. O < legend> elemento pode vir diretamente após a abertura tag e contém uma legenda que ajuda a identificar a finalidade de que o grupo de controlo de formulário.

Neste capítulo o livro vamos falar de tabelas, ou seja, como fazer tabelas, adaptando informações a elas e ainda como representar dados complexos em tabelas. As tabelas são necessárias para serem apresentados vários tipos de informações como por exemplo, resultados desportivos, relatórios de ações, horários de comboio, relatórios financeiros e programação da televisão. Desta forma, uma tabela é composta por linhas e colunas, desta forma, é necessário aprender como usamos os quatro elementos-chave para a sua criação; representar dados complexos usando tabelas; e ainda adicionar legendas para melhor idêntificação de tabelas. Portanto, as tabelas representam informações em um formato de grade. As Grids permitem compreender dados complexos, fazendo referência a informações sobre os dois eixos. Cada bloco na grade é referida como uma célula da tabela. Em HTML uma tabela é escrita linha por linha. Portanto, vamos compreender a estrutura básica de uma tabela. O < table> elemento é usado para criar uma tabela; Cada linha usa a abertura < tr> tag. (O tr significa linha da tabela.) e é seguido por um ou mais elementos na finalização da linha que você usar um fechamento tag. Desta forma, cada célula de uma tabela é representado usando um < td> elemento. (O td significa dados da tabela). Nos cabeçalhos da tabela, o < th> elemento é usado apenas como o < td> elemento, mas o seu objetivo é representar o título ou uma coluna ou uma linha. Às vezes é preciso as entradas em uma tabela para esticar em mais de uma coluna. O colspan atributo pode ser usado em um < th> ou < td> elemento e indica quantas colunas que a célula deve se deparar. Também podemos precisar de entradas em uma tabela para esticar para baixo em mais de uma linha. Assim o rowspan atributo pode ser usado em um < th> ou < td> elemento para indicar quantas linhas uma célula deve abranger. Existem três elementos que ajudam a distinguir entre o conteúdo principal do restante
, os títulos da tabela devem sentar-se no interior do < thead> elemento. o corpo deve sentar-se no interior do elemento. , o rodapé pertence dentro do elemento. Se a primeira linha da tabela contém apenas < th> elementos, então podemos achar que o editor insere um < thead>
elemento automaticamente. Parte da razão para ter separado < thead> e < tfoot> elementos é para que, se você tem uma tabela que é mais alto do que a tela (ou, se impresso, mais de uma página), em seguida, o navegador pode manter o cabeçalho e rodapé visível. Este destina-se a tornar mais fácil para os usuários para ver qual coluna os dados estão. Assim concluo este capitulo de ensinamento de criação e utilização de tabelas.

Agora vou dar inicio á leitura do capítulo 5 que o livro nos fala de inserir imagens. As imagens são necessárias para melhorar a nossa página esteticamente, ou seja, torná-lo mais apelativo, por exemplo incluir um logotipo, uma fotografia, ilustração, diagrama, ou um gráfico. Portanto, para adicionar uma imagem a uma página web precisamos usar um < img> elemento e deve levar dois atributos: src, alt e título. Src informa informa ao navegador onde ele pode encontrar o arquivo de imagem. O alt fornece uma descrição de texto da imagem que descreve a imagem se não a conseguirmos ver. Já o título dá-nos informações adicionais sobre a imagem. Assim, quando os navegadores passaem o mouse sobre a imagem, aparecerá toda a informação. Depois disto, o livro falanos da importância da largura e altura das imagens, pois frequentemente estas levam mais tempo para carregar do que o código HTML que compõe o resto da página. Assim sendo, uma boa solução para especificar o tamanho da imagem é deixar a quantidade certa de espaço para a imagem. Desta forma, devemos inserir as imagens no nosso código, por exemplo, antes de um parágrafo, ou seja, o parágrafo começa em uma nova linha após a imagem. Outro exemplo é dentro do início de um parágrafo, isto é, a primeira linha de texto alinha-se com a parte inferior da imagem, ou então no meio de um parágrafo, a imagem é colocada entre as palavras do parágrafo.
Seguidamente, o livro ensina-nos as três regras principais para criar uma imagem. A primeira regra é escolher corretamente o formato da da imagem, caso contrário, a imagem pode não aparecer tão nitida e o carregamento da página web torna-se mais lento. Assim, deveremos escolher o formato das nossas imagens em jpeg, gif, ou png. Outro fator importante é salvar a imagem na mesma largura e altura que esta aparecerá no site. Se esta for menor do que a largura ou a altura que especificamos, a imagem pode ficar distorcida, esticada com maior carregamento, e o mesmo acontece com a largura. A última regra é usar a resolução correta, ou seja, o número de pontos por
polegada. Portanto, um problema é quando salvamos imagens em um resultado maior do que a capacidade da tela do computadoe, levando mais tempo para o download. De seguida, o livro encina-nos a como selecionar o melhor formato de imagem para diferentes tipos. Sempre que tivermos muitas cores diferentes em uma imagem, devemos usar um JPEG. Para imagens com poucas cores ou grandes áreas da mesma cor, ou seja, cor lisa, usamos GIF ou PNG. Quando quisermos adicionar um logotipo, uma ilustração ou diagramas, usamos o mesmo formato, pois estes costumam ter cores planas. Para concluir, se quisermos adicionar Gifs animados, que estes são vários quadros de uma imagem na sequência e, por conseguinte, pode ser utilizado para criar animações simples, devemos tomar atenção que cada quadro extra da imagem aumenta o tamanho do arquivo, e, portanto, pode aumentar o tempo que leva para o download.

Dando continuidade á leitua do livro, dou inicio ao quarto capitulo que abrange as ligações, ou seja, como criar ligações entre páginas, ligações para outros sites e ligações via e-mail.
As ligações são uma característica que define a web, isto é, estas permitem nos passar de uma página web para
outra. Ligações são criadas usando o < a> elemento. Os usuários podem clicar em qualquer coisa entre a abertura < a> tag e o fechamento tag. Desta forma, tag e fechamento tag é conhecido como texto do link. Sempre que possível, o texto do link deve explicar de onde serão levados os visitantes se eles clique sobre
ele (em vez de apenas dizer “clique aqui”). O livro explica a importância de verificar o texto dos links. Para além disso, incluir nos links o nome do site pode ajudar os usuários a encontrar o que eles querem. Isto irá dar-lhes uma impressão mais positiva do site e pode incentivá-los a visitá-lo por mais tempo. Seguidamente, as ligações são criadas usando o < a> elemento que tem um atributo chamado href. O valor do href atributo é a página que o usuário quer ir para quando clicar no link. Falando agora em links de emails, iniciamos o programa com o elemento < a>. Assim sendo, podemos ver que um link de email parecesse com qualquer outro link, mas, quando é clicado, o programa de email do usuário irá abrir uma nova mensagem de e-mail e dirigir-se para a pessoa especificada no link. Assim, já temos uma ideia geral das ligações em HTML.

No resumo anterior, dei por terminado o segundo capítulo deste livro e agora inicío o terceiro capítulo que nos fala sobre listas. Em HTML existem três tipos
diferentes de listas, sendo elas listas ordenadas, listas não ordenadas e listas de definição. As listas ordenadas são listas onde cada item na lista é numerado. Já as listas não ordenadas são listas que não estão ordenadas numéricamente. Por fim, as listas de definição são constituídas por um conjunto de termos, juntamente com definições para cada um desses termos. Seguidamente, o livro explicanos como criamos cada lista destas que acabei de referir. Um lista ordenada é criada com o < ol> elemento. Cada item da lista está colocado entre uma abertura < li> tag e um fecho </ li> tag. Nas listas não ordenadas elas são criadas com o <ul> elemento. Cada item da lista está colocado entre uma abertura < li> tag e um fechamento </ li> tag. E por último a lista de definição que é criada com o < dl> elemento e geralmente consiste de uma série de termos e definições. Dentro do < dl> elemento que geralmente existem pares de < dt> e <Dd> elementos. Esta é utilizada para conter o termo ser definido.
De seguida, aprendemos como colocar uma segunda lista dentro de um < li> elemento para criar uma sub-lista ou lista aninhada. Os navegadores exibem listas aninhadas longe da lista pai. Em listas não ordenadas aninhadas, o navegador irá normalmente mudar o seu interior. Para concluir este capítulo, o livro reforça as ideias faladas anteriormente, que existem três tipos de listas em HTML: ordenadas, não ordenadas, e definição. As listas ordenadas usam números; As listas não ordenadas ignoram a numeração; E as listas de definição são usadas para definir a terminologia que podem ser encaixadas uma dentro da outra.
Desta forma, dou concluída a leitura do terceiro capítulo deste livro.

No resumo anterior, dei inicio á leitura do segundo capitulo que aborda como adicionar marcação para o texto que aparece em páginas, como por exemplo, marcação estrutural e marcação semântica. A marcação estrutural diz nos que os elementos que podemos usar para descrever ambos os títulos e parágrafos. Já a marcação semântica diz nos que fornece informações extra, tal como onde a ênfase é colocada em uma frase, que algo que escrevemos é uma citação e o significado de siglas, e assim por diante. Depois disto, o livro explicanos como fazer os cabeçalhos, ou seja, os títulos. Em HTML exixtem seis “níveis” de títulos: é utilizado para posições principais, é utilizado para subtítulos, elemento é usado, e assim sucessivamente. O conteúdo de um < h1> elemento é o maior, e o conteúdo de um < h6> elemento é o menor. O tamanho exato em que cada navegador mostra que os títulos podem variar ligeiramente. Os usuários também podem ajustar o tamanho do texto no browser. Desta forma, para controlar o tamanho do texto, a cor, e as fontes usadas quando chegarmos na parte do CSS. Em seguida, o livro explicamos como criar um parágrafo. Um parágrafo consiste em uma ou mais frases que formam uma unidade auto-contida de discurso. O início de um número é indicado por uma nova linha. Por exemplo, um livro pode ter capítulos. Capítulos pode ter subtítulos. De seguida, ao colocar palavras nas tags e , nós podemos fazer aparecer em negrito. O < b> elemento também representa uma seção de texto que será apresentado em uma maneira visualmente diferente. Ao colocar palavras nas tags e , nós podemos fazer aparecer em itálico. O < i> elemento também representa uma seção de texto que seria dito de uma maneira diferente da que envolve os conteúdos. O < sup> elemento é usado para conter caracteres que deve ser sobrescritos. O < sub> elemento é utilizado para conter os caracteres que devem ser subscritos. Passando para o seguinte subtitulo, o livro de seguida explicanos como funciona as quebras de linha e regras horizontais. Desta forma, para adicionar uma quebra de linha dentro do meio de um parágrafo, podemos usar a tag de quebra de linha < br />. Para criar uma pausa entre os temas, como a mudança de assunto em um livro ou uma nova cena em um jogo, teremos de adicionar uma regra horizontal entre as seções usando o < hr/> tag. Em seguida, o uso do < strong> elemento indica que o seu conteúdo tem grande importância. Por exemplo, as palavras contidas nesse elemento pode ser dito com forte ênfase. Por padrão, irá mostrar o conteúdo de um < strong> elemento em negrito. O < em> elemento indica ênfase que sutilmente muda o sentido de uma frase. Por padrão, irá mostrar o conteúdo de um < em> elemento em itálico. O < blockquote> elemento é usado para citações mais longas que ocupam um parágrafo inteiro. O < q> elemento é usado para citações curtas de um parágrafo, ou seja, colocar aspas em torno do < q> elemento. O < abbr> pode ser usado para especificar o termo completo. O elemento é utilizado para indicar de onde é a citação. O < dfn> elemento é usado para indicar a ocorrência com a definição de um novo prazo. O < address> elemento tem um bom uso específico: para conter detalhes de contato para o autor da página. O < ins> elemento pode ser usado para mostrar o conteúdo que foi inserido em um documento, enquanto o < del> elemento pode mostrar texto que foi excluído a partir dele. O conteúdo de um < ins> elemento é geralmente sublinhado, enquanto o conteúdo de um < del> elemento geralmente tem uma linha através dele. Por último, o < s> elemento indica algo que não é mais preciso ou relevante (mas que não deve ser excluído). Visualmente o conteúdo de um < s> elemento normalmente será exibido com uma linha através do centro.
E assim dou por terminado o terceiro capítulo do livro.

Nesta fase, o livro fala como podemos criar uma página Web em um pc, tanto no mac como no windows, mas eu particularmente como tenho windows, tomei mais atenção a essa parte. Posteriormente, o livro ensina-nos a trabalhar com um sistema de gerenciamento de conteúdo, plataforma de blogs, ou aplicações. Assim sendo, as ferramentas fornecidas nas seções de administração desses sites geralmente permitem que editamos partes da página, em vez de toda a página. Se imaginarmos uma loja de e-commerce com 1.000 itens para venda, apenas a alteração de um modelo é muito mais fácil do que mudar a página para cada produto. Em sistemas como este, quando temos um grande bloco de texto que podemos editar, como uma notícia, um post do blog ou a descrição de um produto em uma loja de e-commerce, vamos ver muitas vezes um editor de texto exibida. Desta forma, podemos ter mais controle no site. Alguns sistemas de gerenciamento de conteúdo oferecem ferramentas que também permitem a edição dos arquivos de modelo. Se tentarmos editar arquivos de modelo, precisamos de verificar a documentação do CMS como todos eles diferem uns dos outros. Desta forma, precisamos ter cuidado ao editar arquivos de modelo, porque se excluirmos a parte errada do código ou acrescentar algo no lugar errado o site pode parar de funcionar
completamente.
Depois o autor do livro faz um pequeno resumo do primeiro capitulo e paço para o segundo capitulo.
No segundo capitulo. o livro aborda o “texto”, ou seja, cabeçalhos, parágrafos, negrito, itálico, sublinhado, marcação estrutural e semântico. Explica que para criar uma página web, vamos adicionar tags (conhecidos como marcação) para o conteúdo da página. Essas marcas fornecem significado extra e permitir que os navegadores mostrarem aos usuários a estrutura adequada para a página.
Neste capítulo aborda que iremos aprender como adicionar marcação para o texto que aparece em páginas, como por exemplo, marcação estrutural e marcação semântica.

resumo pag. 1-20

O livro começa com uma pergunta retórica se é dificil aprender css e html e para tornar mais fácil de aprender, o livro foi feito desde o zero por dois escritores.
O livro foca-se no código que é preciso usar 90% do tempo e foi omitido o código que não é necessário.
Também acrescentou informações práticas sobre tópicos mais frequentes sobre, por exemplo, como preparar imagens, áudio e vídeo para a web, como abordar a concepção e construção de um novo site, como melhorar seus rankings nos motores de busca, e como usar o Google Analytics para aprender sobre os visitantes do seu site.
No trabalho, quando as pessoas olham para a tela e vê-lo cheio de código, é comum para obter um comentário sobre isso, olhar muito complicado ou quão inteligente deve ser para compreendê-lo.
os designers podem criar sites mais atraentes e utilizáveis, editores de sites podem criar melhores conteúdos, os comerciantes podem comunicar-se com o seu público de forma mais eficaz, e os gerentes podem encomendar locais para melhorar e tirar o melhor proveito das suas equipas.
1: HTML Vamos passar o primeiro capítulo olhando como HTML é usado para criar páginas web.
restante desta seção apresenta as marcas que temos à disposição para criar páginas web, agrupados em capítulos sobre: texto, listas, links, imagens, tabelas, formulários, vídeo e áudio flash, e elementos diversos.
2: css Começamos esta seção com um capítulo que explica como CSS usa regras para permitir que o controle, o estilo e layout de páginas da web.
Essas propriedades geralmente caem em uma das duas categorias: Apresentação: Como controlar coisas como a cor do texto, as fontes que se deseja usar e o tamanho dessas fontes, como adicionar cores de fundo de páginas (ou partes de uma página), e como adicionar imagens de fundo.
Finalmente, acabamos por olhar para tópicos que ajudarão você uma vez que se constroi um site, como colocá-lo na web, Search Engine Optimization e usar analytics software para rastrear quem vem para o site e o que eles estão a olhar.
como as pessoas acessam a web Antes de olharmos para o código usado para construir websites é importante considerar as diferentes maneiras em que as pessoas acedem á web e esclarecer algumas terminologias.
Os fabricantes de software lançam regularmente novas versões de navegadores com novos recursos e apoiar novas adições às línguas.
Servidores Web – Quando perguntamos ao seu navegador para uma página web, o pedido é enviado através da Internet para um computador especial conhecido como servidor web que hospeda o site.
Algumas grandes empresas executar seus próprios servidores web, mas é mais comum usar os serviços de um hospedagem na web empresa que cobrar uma taxa para hospedar o site.
As pessoas estão acedendo sites em uma gama cada vez maior de dispositivos, incluindo computadores desktop, laptops, tablets e telefones celulares.
Da mesma forma que muitos países têm legislações que exigem edifícios públicos sejam acessíveis a pessoas com deficiência, muitas leis também foram passados que exigem sites ser acessível a pessoas com deficiência.
interessante notar que tecnologias similares àquelas utilizadas por leitores de tela também estão sendo usado em outras áreas onde as pessoas são incapazes ler uma tela, como quando eles estão dirigindo ou jogging.
o que nó vimos quando estamos a olhar para um site, o mais provável é que o navegador estará recebendo HTML e CSS a partir do servidor web que hospeda o site.
A maioria das páginas da web também incluem conteúdo extra, como imagens, áudioe vídeo. particular aqueles que são atualizados regularmente e usar um sistema de gerenciamento de conteúdo (CMS), ferramentas para blogs, ou software de e-commerce – muitas vezes fazem uso de tecnologias mais complexas no servidor web, mas estas tecnologias são realmente utilizados para produzir HTML e CSS que é então enviado para o navegador.
Maiores locais mais complexos como estes podem utilizar um banco de dados para armazenar dados e linguagens de programação como PHP, ASP. Net, Java, Ruby ou no servidor web, mas não precisamos saber essas tecnologias para melhorar o que o usuário vê.
Desde que a web foi criado pela primeira vez houve várias versões do HTML e CSS – cada um pretende ser uma melhoria em relação à versão anterior.
Embora não tinha sido finalizado, muitos navegadores já estavam apoiando algumas características dessas línguas e um monte de pessoas estavam usando a última versão do código em seus sites.
Para construir em versões anteriores destes idiomas, aprender estes meios, também temos de ser capazes de compreender as versões anteriores dos mesmos.
Como os sites são criados todos os sites usam HTML e CSS, mas os sistemas de gerenciamento de conteúdo, software de blogging, e plataformas de e-commerce muitas vezes adicionar mais algumas tecnologias na mistura.
Como as páginas usam a estrutura- Consideramos as histórias que le-mos no jornal: cada história conterá um título, algum texto e, às vezes, algumas imagens. Se o artigo for um pedaço longo, pode haver subtítulos que dividam a história em seções ou citações de pessoas envolvidas. A estrutura do jornal ajuda os leitores a compreender as histórias.
Quando uma notícia é visualizada online, a estrutura é a mesma (mas podem estar disponíveis recursos de áudio ou vídeo). Isso pode ser visto à direita com uma cópia de um jornal ao lado do artigo relevante em seu site.
Agora consideramos um tipo de documento muito diferente – uma espécie de segurança. Muitas vezes, os formulários de segurança incluem títulos para diferentes seções, e cada seção possui uma lista de perguntas com as áreas correspondentes.