O Que e A Web

O que e a web?
Significa teia ou rede, passou a designar a rede que conectar computadores

por todo mundo a world wide webe (www). significa um sistema de
informaes ligados atravs de hipermdia em forma de texto , vdeo , som
e outras animaes digitais
O responsvel pela inveno cham-se TimBernes Lee, criou um projeto
como world wide web
HTML :
Hyper text markup language que significa de marcao de hipertexto
uma linguagagem de marcao utilizadas para produzir paginas webs
<head > define o cabealho de um documento html que traz informaes
sobre o documento que est sendo aberto
<body > define o contedo principal o corpo do documento este a parte
do documento html que exibida no navegador no corpo podem se definir
atributos comuns a toda pagina como cor de fundo imagens e outras
formataes
CSS
Cascading style sheets folha de estilo em cascata css uma linguagem
para estilos que define o layout de documentos html. Controle do layout de
vrios documentos a partir de uma simples folha de estilos. Maior preciso
no controle ao layout, aplicao de diferentes layouts,Emprego de variados
sostificados avanados tcnicas de desenvolvimentos.
Seletores
Elementos de combinao
Elementos de combinao de seletores so usados para separar dois ou mais seletores
simples que compem um seletor combinado. Os elementos de combinao disponveis
so: espao em branco (qualquer quantidade de espao, tabulao ou caracteres de
espaamento), o sinal de maior > e o sinal de adio + . A funo de cada um destes
elementos de combinao dos seletores ser descrita adiante.
Seletores descendentes
Um seletor descendente uma combinao de dois ou mais seletores simples separados por
um espao em branco. Casa com elementos que sejam descendentes do primeiro
elemento simples declarado no seletor. Por exemplo, na regra a seguir o seletor casa com
todos os elementos p que sejam descendentes do elemento div:
div p { color:#f00; }
Cada um dos seletores que compem um seletor descendente pode ser um seletor simples de
qualquer natureza. Na regra a seguir o seletor casa com todo o elemento p da
classe info contido em um elemento li que esteja contido em um elemento div cuja id
seja myid.
div#myid li p.info { color:#f00; }
Seletores descendentes permitem que voc case um elemento sem necessidade de atribuir-lhe
uma classe ou uma id, o que resultar em uma marcao mais limpa. Vamos supor uma lista
de navegao conforme a marcao abaixo:
<ul id="nav">>
<li><a href="#">Link 1</a></li>
</ul>
<ul>
</ul>
Para atingir os itens de lista e links contidos na lista de navegao voc poderia usar as
seguintes regras CSS:
#nav li { display:inline; }
#nav a { font-weight:bold; }
Estas regras no sero aplicadas a nenhum outro item de lista ou links dentro do documento.
Agora compare com a opo de nomear uma classe para cada item da lista e para os links e
voc perceber quo mais limpa poder tornar-se sua marcao com o uso de seletores
descendentes.
Seletores filho
Um seletor filho tem como alvo um filho imediato de um elemento. O seletor filho consiste de
um ou mais seletores simples separados por um sinal de maior >. O elemento pai fica
esquerda do sinal >, e permitido deixar espao em branco entre o elemento de combinao
e os seletores.
A regra a seguir aplica-se a todos os elementos strong que sejam filhos de um elemento div:
div > strong { color:#f00; }
Somente elementos strong que sejam descendentes diretos do elemento div sero
afetados por esta regra. Se houver qualquer outro elemento entre o elemento div e o
elemento strong na rvore do documento, o seletor no se aplicar. No exemplo a seguir,
somente Texto um ser afetado pela regra:
<div>
<strong>Texto um</strong>
<p><strong>Texto dois</strong></p>
</div>
Seletores irmos adjacentes (sibling selectors)

Um seletor irmo adjacente consiste de um ou mais seletores simples separados por um sinal
de adio, +. permitido deixar espao em branco entre o elemento de combinao e os
seletores. O seletor tem como alvo um elemento que seja irmo e adjacente ao primeiro
elemento. Os elementos devem ter o mesmo pai e o primeiro elemento deve ser imediatamente
anterior ao segundo.
p + p { color:#f00; }
A regra acima ser aplicada somente ao Pargrafo dois :
<div>
<p>Pargrafo um</p>
<p>Pargrafo dois</p>
</div>
Grupando
Eu decidi abordar o grupamento a esta altura do artigo, porque um erro comum que eu vejo as
pessoas cometer quando esto aprendendo CSS diz respeito ao grupamento de seletores.
Para aplicar uma mesma regra a diferentes elementos alvo casados por diferentes seletores
voc pode agrupar os seletores em uma lista e separando-os por uma vrgula no lugar de
escrever repetidamente a mesma regra para cada um dos seletores. O erro que muitos
cometem o de no listar de modo completo todos os seletores. Considere a seguinte
marcao:
<div id="news">
<h3>News</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Agora considere que voc quer aplicar a mesma margem para cabealhos do nvel 3 e para
listas no ordenadas que estejam dentro do elemento div cuja id news. Aqui
maneira errada:
div#news h3, ul {
margin:0 2em;
}
Esta regra ser aplicada a ambos os elementos h3 e ul na div#news. O problema que
atingir todos os elementos ul contidos no documento, e no apenas aqueles
na div#news.
Agora a maneira correta de grupar os seletores para este caso:
div#news h3,div#news ul {
margin:0 2em;
}
Assim, quando grupar seletores lembre-se de escrever por completo cada um deles.
Seletores de atributo
Seletores de atributo atingem elementos baseados no valor de atributo declarado no seletor.
Quatro so as maneiras de declarar um seletor de atributo:
[att]
Casa com qualquer elemento com o atributo att independente do seu valor.
[att=val]
Casa com qualquer elemento com o atributo att cujo valor seja val.
[att~=val]
Casa com qualquer elemento que tenha um atributo att de valor igual a um
valor qualquer separado por um espao de um valor igual val. Neste caso
val no pode conter espaos.
[att|=val]
Casa com qualquer elemento que tenha um atributo att de valor igual a um
valor qualquer separado por um hfen de um valor comeando com val. O
principal uso deste seletor o de casar elementos com um valor de idioma
especificado no atributo lang (xml:lang em XHTML), por exemplo;en, enus, en-gb, etc.
Alguns exemplos. O seletor na regra a seguir casa com todos os elementos p que tenham o
atributo title, independentemente do valor do atributo:
p[title] { color:#f00; }
No prximo exemplo o seletor casa com todos os elementos div que tem um valor para o
atributo class igual a error:
div[class=error] { color:#f00; }
Para atingir todos os elementos td cujo atributo headers contenha o valor col1, podemos
usar o seguinte seletor:
td[headers~=col1] { color:#f00; }
E finalmente, o seletor seguinte atinge todo elemento p cujo atributo lang comece com en:
p[lang|=en] { color:#f00; }
Mltiplos seletores de atributos podem ser usados em um mesmo seletor. Isto possibilita atingir
vrios diferentes atributos para o mesmo elemento. a regra a seguir aplica-se a todos os
elementos blockquote que tenham o atributo class de valor igual a quote, e mais o
atributo cite (independentemente do seu valor):
blockquote[class=quote][cite] { color:#f00; }
Muito do poder da linguagem CSS est nos seletores. Com os

seletores, conseguimos escolher qualquer elemento (ou elementos) na
pgina para aplicar estilos.
Vejamos primeiro os principais tipos de seletores:
Seletor de tipo: este o tipo de seletor que utilizamos nos exemplos at

agora. Com este seletor, selecionamos todas as tags de um mesmo tipo.
Por exemplo, se digitamos a estaremos selecionando todas as
tags a (links) da pgina e poderemos aplicar estilos a elas. til para estilos
gerais, mas para maior especificidade utilizamos outros seletores.

Seletor descendente: com este seletor, podemos escolher um ou mais
elementos que esto dentro de outro, ou seja, que so descendentes do
elemento principal. Exemplo: p strong. Com isso, selecionamos apenas
tags strong que esto dentro de pargrafos. Podemos selecionar com

ainda mais especificidade, escrevendo mais elementos, como: div p
strong a. Neste exemplo, selecionamos links que esto dentro de
tags strong que esto dentro de pargrafos que esto dentro de
tags div.
Seletor de classe: seleciona elementos com uma classe especfica
aplicada. Exemplo: .destaqueseleciona todos os elementos com a classe
"destaque".
Seletor de id: seleciona o elemento com a id especificada.
Exemplo: #cabecalho ir selecionar o elemento com a id "cabecalho".
Cada id nica e no pode ser repetida no mesmo documento.
Tela de Cadastro
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tela de Cadastro</title>
</head>
<body bgcolor="white">
<fieldset>
<center > <legend><font color=" "
Cadastro</b></font></legend> </center>
size="5"><b>Formulrio
de
<br />
<thead>
<form method="post" action="" enctype="multipart/form-data">
<div>
<label for="nome"><b>Nome</b></label>
<input type="text" name="nome"
maxlength="10" placeholder="Digite aqui
o seu nome " />
id="nome"
size="50"
<label for="email"><b>Email</b></label>
<input type="email" name="email"
placeholder="Digite aqui o seu Email"
id="email"
size="50"
/>
</div>
<br />
<div>
<label for="cidade"><b>Estado:</b></label>
<select name="Estado" id="Estado">
<option value="to">Minas Gerais</option>
<option value="sp">So Paulo</option>
<option value="rj">Rio De Janeiro</option>
<option value="pr">Par</option>
</select>
<label for="cidade"><b>Cidade:</b></label>
<select name="cidade" id="cidade">
<option value="to">Tefilo Otoni</option>
<option value="fr">Franciscpolis</option>
<option value="to">Malacacheta</option>
<option value="to">Pot</option>
<option value="gv">GV. Valadares</option>
<option value="ip">Ipatinga</option>
</select>
</div>
<br/>
<div>
<label> Sexo </Label>

<input type="radio" name="sexo" value= "m" checked = "checked"
id = "m"/>
<label for = "m" > Masculino </label>

<input type ="radio" name="sexo" value= "f" id = "f"/>
<label for = "f" > Feminino </label>
<div>
<input type="text" name ="nome" id="nome" size="25"
maxlength ="30" placeholder="Digite aqui o seu nome de usuario ">
</input/>
<input type="password" id="senha" size="25"
"30" placeholder = "Digite aqui
maxlength =
uma Senha "/></input>

</div>
<div>
<label><b>Foto</b></label>
<input type="file" name="foto" />
</div>
<br />
<div>
<textarea
name="obs"
id="obs"
placeholder="Observaes" ></textarea>
rows="10"
cols="50"
</div>
</form>
<br />
</div>
<button type ="submit" title="Enviar Dados">Enviar</button>
<input type="reset" value="Limpar" />
</form>
<! comentarios >
</body>
</html>
</fieldset>
</body>
<script language="javascript">
function desabilitar(){
alert ("Funo desabilitada")
return false
}
document.oncontextmenu=desabilitar
</script>
</html>
Tela de Login
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset = "utf-8"/>
<title> Tela de Login </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body bgcolor="">
<div class="estilo_div">
<center><img src="imagens/imagem.jpg" /></center>
<br>
<form method="post" action="" enctype="multipart/form-data" >
<center > <form>

<div>
<label for ="nome" ><b>Nome</b></label>
<input type="text" name ="nome" id="nome" size="25" maxlength

="30" placeholder="Digite aqui o seu nome de usuario ">
</input/><br><br>
<label for ="senha"><b>Senha</label>
<input type="password" id="senha" size="25" maxlength = "30"
placeholder = "Digite aqui a sua Senha "/></input><br><br>
<input type="checkbox" /> Lembrar Usurio
</label>
<button type="submit">Acessar</button>
<p class="change_link">
No possui Conta ?
<a
href="file:///C:/Users/ZeNeto/Desktop/6%20periodo/programacao_web/progr
amacao_web/cadastro.html" target="_blank" >Cadastre-se </a>
</p>
</form>
</center>
</body>
</html>
Tela de Exercicios HTML

<title>Exerccio de HTML</title>
</head>
<body bgcolor="#DDD">
<center><h1>Exerccio de HTML</h1></center>
<hr />
<br /><br /><br />
<center><img src="imagens/tecnologia.jpg" title="Tecnologia"

alt="Banner de tecnologia" /></center>
<p><b><font color="#006400">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum."
</font></b></p>
<p><b><font color="#F00">Gostamos de uma diversidade de

coisas:</font></p>
<ul>
<li>Tecnologia</li>
<li>Programao</li>
<li>Estudar</li>
</ul>
<p><b><font color="#F00">Na sala de aula hoje, por ordem de

chegada, foram:</font></p>
<ol>
<li>Amaury</li>
<li>Aluno 2</li>
<li>Aluno 3</li>
</ol>
<a href="cadastro.html" target="_blank">Faa parte de nossa

turma</a>
<br /><br />
<a href="alunos.html" target="_blank">Nossa Turma</a>
</body>
return false
}
</script>
</html>
Tela de Alunos
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exerccio de HTML</title>
</head>
<body background="imagens/doctum.jpg">
<center>
<table border="1">
<caption><font size="5"><b>Alunos</b></font></caption>
<thead>
<th width="100">ID</th>
<th width="500">Nome</th>
<th width="100">Idade</th>
</thead>
<tfoot bgcolor="#F00">
<td colspan="2" align="center">Quantidade</td>
<td align="center">10</td>
</tfoot>
<tbody>
<tr>
<td>Adriano de Teste Aula</td>
</tr>
<tr bgcolor="#CCC">
<td>Andr de Teste Aula</td>
</tr>
<tr>
</tr>
<tr bgcolor="#CCC">
</tr>
<tr>
</tr>
<tr bgcolor="#CCC">
</tr>
<tr>
</tr>
<tr bgcolor="#CCC">
</tr>
</tbody>
</table>
<a href="index.html">Voltar</a>
</center>
</body>
return false
}
</script>
</html>
Css
@charset "utf-8";
.estilo_div img{
width:150px ;
height:100px ;
}
body{
background:white;
}
p{
font-size :12 px;
color :#444444;
}
.p2{
color:yellow;
}
#fp{
color : #999999;
font-weight:bold;
}
*{
font-size:12px
color:#333;
font-family:arial;
CSS
@charset "utf-8";
.estilo_div img{
width:150px ;
height:100px ;
}
body{
background:white;
}
p{
font-size :12 px;
color :#444444;
}
.p2{
color:yellow;
}
#fp{
color : #999999;
font-weight:bold;
}
*{
font-size:12px
color:#333;
font-family:arial;

O Que e A Web

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

O Que e A Web

Загружено:

Авторское право:

Доступные форматы

O que e a web?

Significa teia ou rede, passou a designar a rede que conectar computadores

Seletores irmos adjacentes (sibling selectors)

Muito do poder da linguagem CSS est nos seletores. Com os

Seletor de tipo: este o tipo de seletor que utilizamos nos exemplos at

gerais, mas para maior especificidade utilizamos outros seletores.

tags strong que esto dentro de pargrafos. Podemos selecionar com

o seu nome " />

<label> Sexo </Label>

<label for = "m" > Masculino </label>

uma Senha "/></input>

<center > <form>

<input type="text" name ="nome" id="nome" size="25" maxlength

Tela de Exercicios HTML

<br /><br /><br />

<center><img src="imagens/tecnologia.jpg" title="Tecnologia"

<p><b><font color="#F00">Gostamos de uma diversidade de

<p><b><font color="#F00">Na sala de aula hoje, por ordem de

<a href="cadastro.html" target="_blank">Faa parte de nossa

<a href="alunos.html" target="_blank">Nossa Turma</a>

Вам также может понравиться