Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Resumo da Disciplina de Sistemas Web
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Resumo da disciplina de Sistemas Web. 2º Semestre ADS-2016 O que é HTML? É uma linguagem de marcação de texto, não confunda com linguagem de programação. Pode ser escrito em qualquer editor de texto. É usada para criar sites e pode conter alem de textos, imagens, animações, vídeos, sons tabelas, formulários e etc. Nos possibilita fazer navegações, por exemplo clicando em hipertextos podemos abrir uma nova aba e navegar nela. Os documentos HTML possuem a extensão “.html” ou “.htm” e os conteúdos da pagina tem como base o TAG. O que é um TAG? São os comandos, o conteúdo da pagina web. Estes na maioria devem ser abertos e fechados, ou seja, são escritos em pares, para que ocorra o funcionamento correto. O fechamento é o próprio comando repetido precedido de uma barra. Porém, toda regra tem sua exceção e, nesse caso, destaca-se, por exemplo, o tag <br> responsável pela quebra de linha. São etiquetas ou marcas padrões para fazer indicações a determinados browser. O tag é iniciado pelo sinal menor “<” e finalizado com o sinal de maior “>”.Por exemplo: <nome do tag> texto a ser exibido </nome do tag> O principal TAG do documento HTML é: <html></html> . Os TAGs <head> e <body> também são dois elementos importantes para a criação do site. O primeiro cria um cabeçalho para o site e o outro é o corpo da pagina. Um exemplo de como ficaria os TAGs básicos de qualquer documento HTML, ou seja, todo documento de marcação de texto deverá conter, no mínimo, os tags abaixo: Quando for escrever no seu site alguma coisa que queira destaque ou que não seja tão grande ou que queira deixar pequeno usamos o TAG “header” (<h1></h1> <h2><h/2> <h3><h/3>). Quanto maior o número, menor a será letra! Para que o documento tenha uma quebra de linha ao final do parágrafo, ou seja, que sejam separados utiliza-se o TAG <p></p>. Para pular ou “quebrar” uma linha usa-se o <br> e é o único TAG que não requer fechamento. A diferença entre esses dois é que a quebra de linha <br> não existe um grande espaço, apenas falha uma linha, já o <p> tem um grande espaço por que a função dele é criar parágrafos. Existem comandos para definir estilos de textos, criando um aspecto agradável para a página web. Quando se utiliza um editor de textos é possível formatar um texto para negrito, itálico, sublinhado, dentre outras formatações, apenas selecionando o texto e clicando na opção desejada. Em um documento “.html”, essas tarefas de melhorar a aparência dos documentos são possíveis através dos comandos a baixo: Para alinhar um texto usa-se : O TAG <font></font> declara o tamanho do texto mudado (size), a cor (color) e o tipo da fonte, se ela vai ser Arial ou Times New Roman (face). Para inserir uma imagem dentro de um parágrafo usa-se o TAG <img> com o destino “src” mais o local onde esta a imagem. Por exemplo: E o alinhamento de imagem usa-se o comando: Se colocarmos um parâmetro para nossa imagem com a opção em pixels, a foto será um tamanho fixo, porém quando especificado em porcentagem a foto será sempre de acordo com a variação do tamanho da janela. Para colocar uma linha de separação, cuja a função é melhorar a aparência do documento, para fazer a separação de objetos, fotos e textos dentro da página web usa-se o tag <hr>, que pode ser incluído a qualquer momento no corpo do texto. Essa linha de separação pode ser formatada, alterando a sua espessura, sua cor e seu tamanho. Para que essas alterações ocorram deve-se incluir dentro do tag “<hr>” alguns parâmetros, a seguir: <hr size=1> Esse parâmetro é responsável por definir a espessura da linha, permitindo que essa linha seja mais grossa ou mais fina, de acordo com o valor estipulado pelo numero que acompanha o parâmetro. Lembrando que esse numero refere-se a pixels. <hr color=blue> O parâmetro color define a cor de apresentação da linha de separação. <hr with=300>ou<hr with=30%> Estipula o comprimento da linha, sendo representado em pixels ou em porcentagem. Para definir uma cor de fundo ou uma imagem de fundo à página web deve-se configurar um parâmetro no tag <body>...</body>. Inclui-se o parâmetro background para especificar a cor desejada de fundo do texto. Na linha de código <body bgcolor=”cor desejada”>, onde se define a cor de fundo do documento, pode ser utilizado o código hexadecimal da cor desejada, por exemplo <body bgcolor=”#008800”> A palavra link vem do inglês e significa ligação ou caminho. Através dos links é possível navegar entre páginas, a partir de palavras ou imagens. Links são ligações dinâmicas entre os documentos. Quando o usuário clica sobre um link,ele é levado para uma outra parte ou para um outro documento dentro da rede. Para isso é necessário criar uma âncora utilizando o TAG <a></a> a = anchor = âncora href = Hypertext reference Os links podem ser agrupados da seguinte forma: >Internos: aqueles que indicam outras partes da mesma página; >Locais: aqueles que indicam outras páginas no mesmo site; >Remotos: aqueles que indicam outras páginas de outros sites; >Endereços de correio: para criar uma mensagem de correio; Quando clicar no link e quiser que abra uma nova aba, coloca-se o parâmetro target = “_blank” dentro do TAG <a> depois do href Quando for criar uma imagem com uma área sensível (ou seja, ao clicar na imagem abre outro site) precisa usar o TAG <map></map> e dentro do <map> coloca-se o parâmetro “name” e atribuir um nome e em seguida criar a área sensível da imagem, veja o exemplo: Na parte onde diz “shape” seria o tipo da imagem, no exemplo a imagem esta com o tipo retângulo, mas podemos colocar como circulo(circle) e irregular(poly), a única diferença é que no tipo circulo as coordenas seriam a do meio do circulo e o raio do circulo(meio do circulo-coordenada da direita=raio). Para colocar vídeos no seu site existem duas maneiras, a primeira é que podemos colocar os vídeos que existem no nosso PC e a outra é que podemos pegar o link do youtube. Usando o vídeo do youtube, você clica onde tem “compartilhar” e depois em “incorporar” nele, vai ter um código do vídeo desejado, você deve copia-lo. As tabelas são muito usadas na organização de dados e informações, que são compostas por linhas e colunas onde a intersecção desses elementos formam as células. Para criar uma tabela, utiliza-se o tag <table></table>. Dentro desse tag, precisamos definir a estrutura de linhas e colunas que formarão cada célula de nossa tabela. Para isso, usa-se o tag <tr></tr> que define uma linha, abreviação do inglês “Table Row”; e o tag <td></td> define uma coluna, abreviação do inglês “Table Data”, e deve estar sempre dentro dos tags <tr></tr>. O tag <th></th> define a tabela cabeçalho, abreviação do inglês “Table Header”, sua função tem o mesmo propósito dos tags <td</td>, porem o conteúdo é exibido em negrito e centralizado; <Caption></Caption> é utilizada para criar legenda para a tabela e deve ser indicado após o tag <table></table> e antes do tag <tr>. Pode ser exibido no topo ou em baixo da tabela, só depende do valor atribuído ao parâmetro align que pode ser o top (topo) ou o bottom (rodapé) Border = valor, é a borda da tabela, já que as tabelas não apresentam bordas quando são criadas, a indicação desse parâmetro sem nenhum valor, faz aparecer linha fina como borda; a espessura da borda dependerá do valor informado. O parâmetro align, já visto antes, dentro de uma tabela tem várias funções. Dentro do tag <Caption> especifica os valores que podem ser o topo ou o rodapé. Dentro dos tags <tr>, <td> e <th> especifica os valores left (esquerda), center (centro) ou right (direita). Valign significa alinhamento vertical, este parâmetro tem a mesma finalidade do align, porem é utilizado para deixar o texto em vertical. Suas opções são top, middle, bottom e baseline. Existem dois parâmetros um para definir a distancia entre a células da tabelas(cellspacing)e outro para definir o espaço dentro da tabela(cellpadding) . Para definir esses parâmetros colocamos eles dentro do TAG <table> desse modo: <table cellspacing=”número desejado”> <table cellpadding=”número desejado”> Existem dois parâmetros para mesclar a tabela, ou seja, juntar dois espaços para o titulo ficar em destaque, por exemplo: Na imagem a cima, o titulo em destaque juntou dois espaços e formou um único espaço, isso é mesclar tabelas. Enfim, como eu estava falando, existem dois parâmetros um para horizontal (colspan = nº de colunas mescladas) e outro para vertical (rowspan = nº de linhas mescladas). Colocamos eles dentro do TAG desejado, na imagem dada como exemplo ele esta no TAG <th> que seria o titulo da tabela. <table> <tr> <th colspan=”2”>Brasil</th> </tr> </table> Listas ordenada, não ordenadas e encadeadas são formas de ordenação e estruturação do conteúdo de texto das páginas web. São criadas para dar aparência de índices ou resumos do conteúdo dessas páginas. As listas ordenadas são geradas pela estrutura dos tags <ol></ol>. E podem ser modificadas através do parâmetro type. E se eu quiser que minha lista ordenada comece a partir do numero 5 eu coloco o parâmetro START dentro da <ol> e mais o tipo que seria “type=1”. A lista não ordenada é gerada pela estrutura dos tag <ul></ul> . Elas recebem o marcado em forma de círculo como padrão, porem podemos modifica-los com o parâmetro type do tag <ul>- temos as opções square, circle e disk. As listas encadeadas são as listas ordenadas + listas não ordenadas misturando as duas categorias, ou simplesmente criando encadeamentos. (uma dentro da outra). Referencias Mozer, Merris Sistemas Web 2014 http://www.lsi.usp.br/~help/html/comandos.html Acessado em 09/08/16 https://sites.google.com/site/sitesrecord/o-que-e-html Acessado em 09/08/16 *Obs: O aplicativo que usei para tirar as fotos foi o CamScanner.
Materiais relacionados
Perguntas relacionadas
Compartilhar