tecnologia web

•
ESTÁCIO

0
Suelen oliveira
09/06/2018
E aí, curtiu este material?
Ajude a incentivar outros estudantes a melhorar o conteúdo
Gostou desse material? Compartilhe! 🧡
Tecnologias Web

6.057 Materiais compartilhados
Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Prévia do material em texto
<!DOCTYPE html>
<html lang="pt-br"> 
<head>
	<title> Criando um menu com lista </title>
	<meta charset="UTF-8"> 
	<style type="text/css"> 
	body{
	background-size:cover;	/* coloca a imagem no fundo todo */
	background-image:url(html2.jpg); /* mudar a imagem de plano de fundo */
	background-repeat:no-repeat; /* faz com que a imagem não repita no fundo */
	background-position: center; /* define a posição da imagem no background */
	background-attachment:fixed; /* conjuntos de propriedades ou retorna se uma 
imagem de fundo deve rolar com o conteúdo, ou ser corrigido. */
	}
	html{
		height:100%;
	}
	h1{ /*muda a cor do fundo da tag de h1*/
		background-color:#f00;
	}
	h2{
		background-color:#FA8072;
	}
	h1{ /*muda a configuração do grupo*/
	display:block;
	font-size:1.5em; /*mudar o tamanho da fonte do grupo*/
	margin-top:1.5em; /*mudar a distancia da margem*/
		
margin-bottom: 2.5em;
		
margin-left: 0em;
		
margin-right:0;
		
font-weight:bold;
		
font-size: 30px;
		
font-family: Arial black;
		}
nav#menu_principal a{
	list-style: nome; /*especifica o tipo de marcador de lista em uma lista*/
	font-family: "Verdana", sans-serf; /*especifica a fonte do texto dentro de um elemento*/
	margin-right:450px; /*define a margem*/
	background-color: yellow; /*mudar a cor do fundo da borda*/
	color:green; /*define a cor*/
	display:inline-block; /*especifica o tipo de caixa usado para um elemento oinline e em linha*/
	padding: 10px; /*mudar a largura da borda*/
	border: 2px solid Teal; /*borda em falta do link*/
	border-radius: 12px; /*Adicionar bordas arredondadas para um elemento, border-radius é um atalho para definir os quatro fronteira */
	margin: 5px;
	}
nav#menu_principal a:link{ /*mexe no link*/
text-decoration:none; /*tira o sublinhado do link*/
	}
nav#menu_principal a:visited{ /*mudar a cor do link visitado*/
	color:DarkViolet;
	font-variant:small-caps; 	
	}
nav#menu_principal a:hover{ /*link com o mouse em cima*/
font-variant:small-caps; /*faz com que fique tds as letras em maiusculo, porém não no msm tamanho, a maior continuar maior que as demais*/
color:DeepSkyBlue;
	}
nav#menu_principal a:active{ /*link com o mouse clicado*/
background-color:purple; /*mudar cor da borda do link clicado*/
	}
nav#grupo a:link{ /*trabalha no link do grupo*/text-decoration:none; 	
	}
nav#grupo a:visited{ 
color:DarkViolet;
	}
nav#grupo a:hover{ 
color:DeepSkyBlue;
	}
	</style>
</head>
<body>
	<nav id="menu_principal">
			<a class="menu" href="http://www.w3schools.com/" target="_blank">W3School</a>						
		</nav>
		<nav id="grupo">
			<hgroup>
				<h1><p>Mudando as cores padrão de links.</p></h1
<h2>Definição do background.</h2>
			
<h3><p><b>Definição e uso.</b></p><br></h3>
<p><b>CSS background-color Property </b> é a propriedade define a cor de fundo de um elemento. O fundo de um elemento é o tamanho total do elemento, incluindo o acolchoamento e fronteira (mas não a margem)</p>
				<a href="http://www.w3schools.com/cssref/pr_background-color.asp" target="_blank"><br>Exemplo background</a><br> <!--tenho que ver como tira o sublinhando desse link -->
				<br>
				<br>
				<br>
	<h2>Definição de text-decoration.</h2>
				
	<h3><p>Definição e uso.</p><br></h3>
<p><b>A propriedade text-decoration</b> especifica a decoração adicionada ao texto.</p><br>
				<i>Nota:</i> Em CSS3, a propriedade text-decoration é uma propriedade refere -decoration-line texto , text-decoration-color, e -decoração em estilo de texto, mas isso não é suportado em qualquer um dos principais navegadores.<br>
				
				<i>Nota:</i> Em CSS3 pode utilizar o texto-decoração cor- propriedade para alterar a cor da decoração, de outra forma a cor, é a mesma que a cor do texto</p>
				<a href="http://www.w3schools.com/cssref/pr_text_text-decoration.asp" target="_blank"><br>Exempo de text-decoration</a><br>
				<br>
				<br>
				<br>
				
	<h2>Definição de background imagem.</h2>
				
	<h3><p>Definição e uso.</p><br></h3>
				<p><b>A propriedade background-imagem</b> define uma ou mais imagens de fundo para um elemento.
				O fundo de um elemento é o tamanho total do elemento, incluindo o acolchoamento e fronteira (mas não a margem).
				Por padrão, uma imagem de fundo é colocada no canto superior esquerdo de um elemento, e repetiu tanto na vertical como na horizontal.</p>
				<a href="http://www.w3schools.com/cssref/pr_background-image.asp" target="_blank"><br>Exemplo background imagem</a><br>
				
<h2>Como colocar imagem no background.</h2>
				
<h3><p>Definição de como troca o plano de fundo.</p><br></h3>
<p><b>a propriedade background</b> e de suas varições, onde o CSS, com suas várias ferramentas, nos permite definir e manipular planos de fundo de um site de várias maneiras.</p>
				<a href="http://www.htmlprogressivo.net/2014/04/Background-CSS-plano-de-fundo-Tutorial-CSS-background-color-image-repeat-position-attachment-url.html" target="_blank"><br>Exemplos</a><br>
</hgroup>
</nav>	
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="pt-br"> 
<head>
	<title> Criando um menu com lista </title>
	<meta charset="UTF-8"> 
	<style type="text/css"> 
	body{
		background-size:cover;	/* coloca a imagem no fundo todo */
		background-image:url(html2.jpg); /* mudar a imagem de plano de fundo */
		background-repeat:no-repeat; /* faz com que a imagem não repita no fundo */
		background-position: center; /* define a posição da imagem no background */
		background-attachment:fixed; /* conjuntos de propriedades ou retorna se uma imagem de fundo deve rolar com o conteúdo, ou ser corrigido. */
	}
	html{
		height:100%;
	}
	h1{ /*muda a cor do fundo da tag de h1*/
		background-color:#f00;
	}
	h2{
		background-color:#FA8072;
	}
	h1{ /*muda a configuração do grupo*/
		display:block;
		font-size:1.5em; /*mudar o tamanho da fonte do grupo*/
		margin-top:1.5em; /*mudar a distancia da margem*/
		margin-bottom: 2.5em;
		margin-left: 0em;
		margin-right:0;
		font-weight:bold;
		font-size: 30px;
		font-family: Arial black;
		}
	nav#menu_principal a{
	list-style: nome; /*especifica o tipo de marcador de lista em uma lista*/
	font-family: "Verdana", sans-serf; /*especifica a fonte do texto dentro de um elemento*/
	margin-right:450px; /*define a margem*/
	background-color: yellow; /*mudar a cor do fundo da borda*/
	color:green; /*define a cor*/
	display:inline-block; /*especifica o tipo de caixa usado para um elemento o inline e em linha*/
	padding: 10px; /*mudar a largura da borda*/
	border: 2px solid Teal; /*borda em falta do link*/
	border-radius: 12px; /*Adicionar bordas arredondadas para um elemento, border-radius é um atalho para definir os quatro fronteira */
	margin: 5px;
	}
	nav#menu_principal a:link{ /*mexe no link*/
	text-decoration:none; /*tira o sublinhado do link*/
	}
	nav#menu_principal a:visited{ /*mudar a cor do link visitado*/
		color:DarkViolet;
		font-variant:small-caps; 	
	}
	nav#menu_principal a:hover{ /*link com o mouse em cima*/
	font-variant:small-caps; /*faz com que fique tds as letras em maiusculo, porém não no msm tamanho, a maior continuar maior que as demais*/
	color:DeepSkyBlue;
	}
	nav#menu_principal a:active{ /*link com o mouse clicado*/
	background-color:purple; /*mudar cor da borda do link clicado*/
	}
	nav#grupo a:link{ /*trabalha no link do grupo*/
	text-decoration:none; 	
	}
	nav#grupo a:visited{ 
	color:DarkViolet;
	}
	nav#grupo a:hover{ 
	color:DeepSkyBlue;
	}
	</style>
</head>
<body>
	<nav id="menu_principal">
<a class="menu" href="http://www.w3schools.com/" target="_blank">W3School</a>						
		</nav>
		<nav id="grupo">
			<hgroup>
	<h1><p>Mudando as cores padrão de links.</p></h1>
			
	<h2>Definição do background.</h2>
			
		<h3><p><b>Definição e uso.</b></p><br></h3>
		<p><b>CSS background-color Property </b> é a propriedade define a cor de fundo de um elemento. O fundo de um elemento é o tamanho total do elemento, incluindo o acolchoamentoe fronteira (mas não a margem)</p>
				<a href="http://www.w3schools.com/cssref/pr_background-color.asp" target="_blank"><br>Exemplo background</a><br> <!--tenho que ver como tira o sublinhando desse link -->
				<br>
				<br>
				<br>
	<h2>Definição de text-decoration.</h2>
				
	<h3><p>Definição e uso.</p><br></h3>
	<p><b>A propriedade text-decoration</b> especifica a decoração adicionada ao texto.</p><br>
	<i>Nota:</i> Em CSS3, a propriedade text-decoration é uma propriedade refere -decoration-line texto , text-decoration-color, e -decoração em estilo de texto, mas isso não é suportado em qualquer um dos principais navegadores.<br>
				
	<i>Nota:</i> Em CSS3 pode utilizar o texto-decoração cor- propriedade para alterar a cor da decoração, de outra forma a cor, é a mesma que a cor do texto</p>
<a href="http://www.w3schools.com/cssref/pr_text_text-decoration.asp" target="_blank"><br>Exempo de text-decoration</a><br>
				<br>
				<br>
				<br>
				
	<h2>Definição de background imagem.</h2>
				
<h3><p>Definição e uso.</p><br></h3>
<p><b>A propriedade background-imagem</b> define uma ou mais imagens de fundo para um elemento.
O fundo de um elemento é o tamanho total do elemento, incluindo o acolchoamento e fronteira (mas não a margem).
Por padrão, uma imagem de fundo é colocada no canto superior esquerdo de um elemento, e repetiu tanto na vertical como na horizontal.</p>
<a href="http://www.w3schools.com/cssref/pr_background-image.asp" target="_blank"><br>Exemplo background imagem</a><br>
				
<h2>Como colocar imagem no background.</h2>
				
<h3><p>Definição de como troca o plano de fundo.</p><br></h3>
<p><b>a propriedade background</b> e de suas varições, onde o CSS, com suas várias ferramentas, nos permite definir e manipular planos de fundo de um site de várias maneiras.</p>
				<a href="http://www.htmlprogressivo.net/2014/04/Background-CSS-plano-de-fundo-Tutorial-CSS-background-color-image-repeat-position-attachment-url.html" target="_blank"><br>Exemplos</a><br>
</hgroup>
</nav>	
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="pt-br"> 
<head>
	<title> Criando um menu com lista </title>
	<meta charset="UTF-8"> 
	<style type="text/css"> 
	body{
		background-size:cover;	/* coloca a imagem no fundo todo */
		background-image:url(html2.jpg); /* mudar a imagem de plano de fundo */
		background-repeat:no-repeat; /* faz com que a imagem não repita no fundo */
		background-position: center; /* define a posição da imagem no background */
		background-attachment:fixed; /* conjuntos de propriedades ou retorna se uma imagem de fundo deve rolar com o conteúdo, ou ser corrigido. */
	}
	html{
		height:100%;
	}
	h1{ /*muda a cor do fundo da tag de h1*/
		background-color:#f00;
	}
	h2{
		background-color:#FA8072;
	}
	h1{ /*muda a configuração do grupo*/
		display:block;
		font-size:1.5em; /*mudar o tamanho da fonte do grupo*/
		margin-top:1.5em; /*mudar a distancia da margem*/
		margin-bottom: 2.5em;
		margin-left: 0em;
		margin-right:0;
		font-weight:bold;
		font-size: 30px;
		font-family: Arial black;
		}
	nav#menu_principal a{
		list-style: nome; /*especifica o tipo de marcador de lista em uma lista*/
		font-family: "Verdana", sans-serf; /*especifica a fonte do texto dentro de um elemento*/
		margin-right:450px; /*define a margem*/
		background-color: yellow; /*mudar a cor do fundo da borda*/
		color:green; /*define a cor*/
		display:inline-block; /*especifica o tipo de caixa usado para um elemento o inline e em linha*/
		padding: 10px; /*mudar a largura da borda*/
		border: 2px solid Teal; /*borda em falta do link*/
		border-radius: 12px; /*Adicionar bordas arredondadas para um elemento, border-radius é um atalho para definir os quatro fronteira */
		margin: 5px;
	}
	nav#menu_principal a:link{ /*mexe no link*/
		text-decoration:none; /*tira o sublinhado do link*/
	}
	nav#menu_principal a:visited{ /*mudar a cor do link visitado*/
		color:DarkViolet;
		font-variant:small-caps; 	
	}
	nav#menu_principal a:hover{ /*link com o mouse em cima*/
		font-variant:small-caps; /*faz com que fique tds as letras em maiusculo, porém não no msm tamanho, a maior continuar maior que as demais*/
		color:DeepSkyBlue;
	}
	nav#menu_principal a:active{ /*link com o mouse clicado*/
		background-color:purple; /*mudar cor da borda do link clicado*/
	}
	nav#grupo a:link{ /*trabalha no link do grupo*/
		text-decoration:none; 	
	}
	nav#grupo a:visited{ 
		color:DarkViolet;
	}
	nav#grupo a:hover{ 
		color:DeepSkyBlue;
	}
	</style>
</head>
<body>
	<nav id="menu_principal">
			<a class="menu" href="http://www.w3schools.com/" target="_blank">W3School</a>						
		</nav>
		<nav id="grupo">
			<hgroup>
		<h1><p>Mudando as cores padrão de links.</p></h1>
			
		<h2>Definição do background.</h2>
			
	<h3><p><b>Definição e uso.</b></p><br></h3>
	<p><b>CSS background-color Property </b> é a propriedade define a cor de fundo de um elemento. O fundo de um elemento é o tamanho total do elemento, incluindo o acolchoamento e fronteira (mas não a margem)</p>
<a href="http://www.w3schools.com/cssref/pr_background-color.asp" target="_blank"><br>Exemplo background</a><br> <!--tenho que ver como tira o sublinhando desse link -->
				<br>
				<br>
				<br>
	<h2>Definição de text-decoration.</h2>
				
	<h3><p>Definição e uso.</p><br></h3>
<p><b>A propriedade text-decoration</b> especifica a decoração adicionada ao texto.</p><br
<i>Nota:</i> Em CSS3, a propriedade text-decoration é uma propriedade refere -decoration-line texto , text-decoration-color, e -decoração em estilo de texto, mas isso não é suportado em qualquer um dos principais navegadores.<br>
				
<i>Nota:</i> Em CSS3 pode utilizar o texto-decoração cor- propriedade para alterar a cor da decoração, de outra forma a cor, é a mesma que a cor do texto</p>
<a href="http://www.w3schools.com/cssref/pr_text_text-decoration.asp" target="_blank"><br>Exempo de text-decoration</a><br>
				<br>
				<br>
				<br>
				
<h2>Definição de background imagem.</h2>
<h3><p>Definição e uso.</p><br></h3>
<p><b>A propriedade background-imagem</b> define uma ou mais imagens de fundo para um elemento.
O fundo de um elemento é o tamanho total do elemento, incluindo o acolchoamento e fronteira (mas não a margem).
Por padrão, uma imagem de fundo é colocada no canto superior esquerdo de um elemento, e repetiu tanto na vertical como na horizontal.</p>
<a href="http://www.w3schools.com/cssref/pr_background-image.asp" target="_blank"><br>Exemplo background imagem</a><br>
				
<h2>Como colocar imagem no background.</h2>
				<h3><p>Definição de como troca o plano de fundo.</p><br></h3>
<p><b>a propriedade background</b> e de suas varições, onde o CSS, com suas várias ferramentas, nos permite definir e manipular planos de fundo de um site de várias maneiras.</p>
				<a href="http://www.htmlprogressivo.net/2014/04/Background-CSS-plano-de-fundo-Tutorial-CSS-background-color-image-repeat-position-attachment-url.html" target="_blank"><br>Exemplos</a><br>
</hgroup>
</nav>	
</p>
</body>
</html>
<!DOCTYPE html> <!-- Indica ao navegador que é um documento do tipo html -->
<html lang="pt-br"> <!-- Inicio do HTML. lang = Linguagem --> 
<head> <!-- Cabeçalho do site -->
 <meta charset="UTF-8"/> <!-- meta = descreva metadados dentro de um documento HTML; charset = conjunto de caracteres. UTF-8 Conjunto de caracteres latinos -->
 <title> Menu com sites de busca </title> <!-- Titulo que aparecerá no navegador -->
	<style type="text/css"> */ style = Ínicio do CSS (Utiliza o */ para fazer comentário em CSS), esse é um exemplo de formatação de css interno.
	
	body{ /* formatação do corpo da pág. */
		background-image: url("flor.jpg"); /* Imagem do fundo da página */
		background-repeat: repeat-y; /* Define como a imagem será repetida: (repeat-x - no-repeat - repeat-y e repeat) */
		background-position: center; /* Possição onde a imagem ficará: (right - left- center - top- bottom) */
		background-attachment: fixed; /* Define se a imagem de fundo utilizada será fixa ou com rolagem: (fixed ou scroll) */
		
	}
	
	nav#menu_principal a{ /* inicio da formatação da tag nav com identificação menu_principal */
		list-style:none; /* Para definir o estilo da lista */
		font-family:"Verdana", sans-serif; /* família de fonte, nome da fonte. (Famílias de fonte genéricas: Serif = traços na terminações das letras, sans-serif = terminações das letras comum, pouca ornamentação, cursive = parece que é manuscrito, fantasy = fontes mais decoradas e monospace = espaçamento e largura iguais) */
		margin-left:480px; /* Tamanho da margem (Podem ser: Top - Superior, Right - Direito, Bottom - Inferior e Left - Esquerdo) */
		background-color:yellow; /* Cor de fundo do elemento */
		color:black; /* Cor da letra */
		display:inline-block; /* Modos de exibição do conteúdo. (inline: O elemento renderizado em uma ou mais linhas - block: renderizado como um bloco - none: o elemento não será mostrado no modo visual) */
		padding:10px; /* definir de uma só vez a distância de espaçamento para todos os lados */
		border:2px solid black; /* Borda do que está sendo editado */
		border-radius:10px; /* Modelagem da borda */
		margin:3px; /* Modelagem da margem */
	}
	
	nav#menu_principal a:link{ /* <link> define uma ligação entre um documento e um recurso externo. Link principal, a:link = Representa um hyperlink, ligando a outro recurso. Ou seja a: link - uma ligação normal */
		text-decoration:none; /* text-decoration = especifica a decoração adicionada ao texto. nome = definição não, sem marcadores */
	}
	
	nav#menu_principal a:visited{ /* a: visited - um link que o usuário visitou */
		color:purple; 
	}
	
	nav#menu_principal a:hover{ /* a: hover - um link quando o usuário mouses sobre ele */
		font-variant:small-caps; /* Em uma fonte small-caps, todas as letras minúsculas são convertidas em letras maiúsculas. No entanto, as letras minuúsculas convertidas aparecem em um tamanho de fonte menor do que as letras maiúsculas originais no texto. */
		font-weight:bold; /* define a fonte com em negrito */
	}
	
	nav#menu_principal a:active{ /* a: active - um link do momento em que for clicado */
		background-color:blue;
	}
	
	
	/* INÍCIO DO COMENTÁRIO */
	a:link 
	{
		color: black; = link não visitado
	}
	
	a:visited
	{
		color: red; = Link visitado
	}
	
	a:hover
	{
		color: blue; = Mouse sobre o link
	}
	
	a:active
	{	
		color: yellow; = Link selecionado
	}
	
	ATENÇÃO ÀS ORDENS:
	
	a:hover deve ser definido depois de a:link e a:visited
	a:active deve ser definido depois de a:hover
	
	FIM DO COMENTÁRIO. */
	</style>
</head>
<body>
<nav id="menu_principal"> <!-- nav = marca define um conjunto de links de navegação. É uma marca nova do HTML 5; ID = serve para ser uma identificação da tag, não pode existir tag ID com mesmo nomes -->
 <a class="menu" href="http://www.google.com" target="_blank">Google</a> <!-- a = LINKS, Href = endereço de destino (Hiperlink reference)- target="_blank = Abrir nova aba"-->
 <a href="http://www.bing.com" target="_blank">Bing</a> <!-- Alvo de abertura do link (_blank)-->
 <a href="https://br.yahoo.com" target="_blank">Yahoo</a>
</nav>
</body>
</html>