Revisão Tecnologias Web por Paloma Garcia
38 pág.

Revisão Tecnologias Web por Paloma Garcia


DisciplinaTecnologias Web3.431 materiais10.241 seguidores
Pré-visualização6 páginas
indica o tipo de referência do link e o segundo a localização do arquivo em si.
		 Outros atributos também são importantes, a saber:
		 - Charset = onde é definido o conjunto de caracteres utilizado
 - Media = onde é definido o tipo de mídia utilizada, isto é importante para a acessibilidade. 
	
		EXEMPLO: <head>
			 <link rel=\u201destilo\u201d type=\u201dtext/css\u201d href=\u201dmeuestilo.css\u201d/>
 		 </head>
* <META> - Esta tag é uma das mais utilizadas para dar aos robôs de busca informações a respeito de sua página e site. Ela define as propriedades da página. Desta forma, ferramentas de indexação de conteúdos podem, ao ler as informações contidas nestas tags, catalogar sites e suas informações, tais como descrição da página, autor, palavras chave, etc.
		 -- O atributo content é obrigatório, pois especifica o conteúdo da meta informação. Os demais atributos são opicionais.
		 
		 -- Para definir o nome do autor da página devemos utilizar o atributo AUTHOR.
				
				EXEMPLO: <META NAME=\u201dAUTHOR\u201d CONTENT=\u201dFlávio Brito\u201d>
		 
		 -- Com o intuito de especificar as informações do cabeçalho da página poderemos utilizar o atributo HTTP_EQUIV. 
 		EXEMPLO: <META HTTP-EQUIV=\u201dCACHE-CONTROL\u201d CONTENT=\u201dNO-CACHE\u201d>
		 -- CONTENT-TYPE = Define o tipo de conteúdo.
	EXEMPLO: <META HTTP-EQUIV=\u201dCONTENT-TYPE\u201d CONTENT=\u201dtext/html; charset-UTF-8\u201d>
Tags para Web
		Algumas tags são importantes para o desenvolvimento da página web como, por exemplo, as tags de corpo, quebra de linhas e centralização de elementos.
* Tags de corpo
		*Comentários = Tag: <!- - >
 
			Esta tag é utilizada para aplicar comentários ao código HTML. Ela deve ser fechada por dois sinais de menos e um sinal de maior para limitar o tamanho do comentário. Caso contrário, todo o conteúdo ficará escondido do usuário.
				EXEMPLO: <!- Este é meu comentário. Quando o navegador passar neste ponto, ele não apresentará este texto na tela -->
		* Âncora = Tag: <a>
			Esta tag define uma âncora dentro ou fora da página. Através dela, é possível fazer uma ligação com outro documento ou ainda saltar para um ponto específico do documento sem a necessidade da ação de paginação feita pelo usuário.
*Caracteres e seus Controles
		* <b> - Deixa o texto em negrito
		* <i> - Deixa o texto em itálico
		* <big> - Enfatiza o texto aumentando seu tamanho e expessura.
		* <em> - Enfatiza o texto, deixando-o em itálico
		* <strong> - Possui o mesmo efeito da tag <b>, deixando o texto em negrito
		* <small> - Publica o texto de forma diminuta, deixando a fonte pequena e estreita
		* <strike> - Texto riscado.
		* <font> - Define a fonte que será utilizada
* Controle de Caracteres
		* Quebra de Linha
			* <br> - Pula uma linha
			* <p> - Pula um parágrafo
	
		* Centralização de Elementos
			* <Center> Centraliza um texto ou elemento na tela do navegador de forma independente da resolução gráfica apresentada no monitor.
Tag para Web \u2013 Listas
		* Lista de Descrição - <dl> - Define a Lista, <dt> - Item da Lista, <dd> - Define dados do item da lista.
		* Lista Ordenada \u2013 Utilizada para apresentação de informações organizados de forma numérica ou alfabética. <ol> - Define a Lista, <li> - Item da Lista, <ol type=\u201d \u201d > - Define se será numérica ou alfabética.
		* Lista Não Ordenada \u2013 Utilizam marcador para indicar cada elemento da lista. 
			*<ul> - Define a lista. Marcadores \u2013 disc (disco), square (quadrado) e circle (círculo). <ul type=\u201d \u201d> - Define tipo de marcador.
			* <option> - Exibe um lista não ordenada economizando espaço em tela, abrindo opções. <select> - define a lista, <option> - opções da lista, <option selected> - Item que aparece pré selecionado.
Embarcando objeto em sua página (Tag: <embed>)
		A tag <embed> permite acoplar objetos externos a sua página como um plug-in.
		 
Cabeçalhos ( Tag: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
		As tags de h1 \u2013 h6 foram muito utilizadas no passado para dar ênfase ao tamanho dos textos utilizados em cabeçalhos. O valor 1 indica o maior e o 6 o menor tamanho das letras.
Outras Tags
		* <hr> - Cria uma linha horizontal ocupando toda a extensão da página sem definição de tamanho. Facilita a divisão visual dos elementos no corpo da página.
		* <img> - Associa imagens JPG, PNG e GIF ao texto da página. Em HTML as imagens são vinculadas e não inseridas, existindo apenas links para a fonte da imagem. 
			 Possui atributos: src \u2013 indica a fonte da imagem, alt \u2013 facilita a identificação com um texto alternativo no caso da não visualização da mesma. 
		 Atributos Adicionais: align \u2013 Alinhamento da imagem (top, bottom, middle, left, right), border \u2013 Espessura em pixels da borda que envolver a imagem, height \u2013 altura, width \u2013 largura, hspace \u2013 Espaço em branco a direita e a esquerda da imagem, vspace \u2013 Espaço em branco na margem superior e inferior da imagem, longdesc \u2013 url para um documento que traz mais informações sobre a imagem, recurso de acessibilidade. 
				<img src= \u201ccaminho da imagem\u201d height=\u201d305\u201d width=\u201d400\u201d />
		* <map> - Cria regiões clicáveis em uma imagem do lado do cliente. Através dela é possível mapear pontos sensíveis de uma imagem que redireciona o usuário de acordo com o contexto clicado dentro da imagem.
			 Atributos: name \u2013 nome do mapa, area \u2013 área clicável, shape \u2013 formato da região clicável, coords \u2013 coordenadas x_min, y_min, x_max, y_max, alt \u2013 informação alternativa.
		* <frameset> e <frame> - Divide a página apresentada ao usuário em segmentos distintos, como se fossem janelas, possibilitando a cada um o carregamento independente do conteúdo a ser apresentado. Cada frame está contido em um framset (conjunto de frames) e cada um pode ter atributos diferentes, tais como tamanho, paginação entre outros. Em tradução livre frame significa moldura.
		
		* <iframes> - 
Aula 6 \u2013 Tabelas
		Em HTML, o recurso de tabela é extremamente eficiente quando desejamos, com pouco trabalho, criar tabelas para apresentação de dados. Com o passar do tempo, este recurso começou a ganhar notoriedade, pois além da apresentação de dados, era também utilizado para a formatação visual de elementos em uma página, tendo em vista que HMTL é uma linguagem de marcação e não de diagramação.
Construção
		Para definir uma tabela em HTML deve-se utilizar a tag <table>. Quando o navegador encontra essa tag, procura por informações de linhas <tr> e colunas <td. Também é possível definir uma linha em destaque para os elementos do cabeçalho com a tag <th>.
		Para mesclar células utiliza-se os atributos rowspan \u2013 mescla linhas e colspan \u2013 mescla colunas.
		O atributo border define a espessura da linha da tabela. Para as omitir, utiliza-se o border=\u201d0\u201d.
		Este recurso até hoje é bastante explorado e a ainda possui adeptos. Atualmente, existe um segmento na área de design web que propõe o \u201ctabeless\u201d, ou seja, eliminar qualquer recurso de tabela para o tratamento do layout de página.
Cabeçalho nas Colunas
Exemplo 1 
\ufffd
Exemplo 2 
\ufffd
Exemplo 3 
\ufffd
Aula 7 \u2013 Formulários
		Nos dias de hoje, é cada vez mais comum navegarmos em páginas com formulários. Eles são fundamentais para que o administrador do site possa receber informações das pessoas que navegam em suas páginas. São informações de cadastro, informações de busca entre outras. As tags relacionadas a formulários são bastante versáteis e permitem ao Web Designer um conjunto ímpar de recursos.
		Um formulário HTML ou formulário web (webform), permite que o usuário especifique dados em uma página para serem enviados e processador por
Wagner
Wagner fez um comentário
Está muito bom, parabéns e obrigado por compartilhar.
1 aprovações
Carregar mais