Html Basico
O w3schools
Existem diversas maneiras de se aprender html, você pode fazer um dos muitos cursos que existem por ai sobre o assunto, pode aprender sozinho pesquisando na internet, pode pedir a ajuda de um amigo, é improvável mas você pode aprender um pouco ate aqui no blog, mas na minha opinião um lugar que não pode ficar de fora para quem quer aprender a desenvolver para web é a w3schools, a w3schools é um site que é mantido pela w3c e que tem tudo o que você precisa sobre html, alem de css, javascript, jquery entre outros padrões web, vale a pena dar uma conferida você pode aprender muito lá.
Tags básicas Html
O html tem uma grande quantidade de elementos mas alguns são utilizadas em praticamente todos os documentos html. São elas:
- <br/> - é utilizado para inserir uma quebra de linha.
- <p></p> - é utilizado para inserir um paragrafo.
- <div></div> - é utilizado para inserir um bloco que normalmente contem outros elementos facilitando entre outras coisas a aplicação de estilos css.
- <span></span> - é um elemento muito utilizado para facilitar a formatação de textos com estilos css.
- <a></a> - é o elemento link, utilizado para definir uma ligação com outras paginas, a endereço da outra pagina é definida no atributo href.
- as tags <h1>,<h2>,<h3>,<h4>,<h5> e <h6> - essas são as tags que define os cabeçalhos padrões de html, elas vão de h1 que é o cabeçalho mais importante geralmente atribuído ao título da pagina a h6 que é menos importante e possui o menor tamanho de fonte entre os cabeçalhos. A formatação do cabeçalho é definido ao texto entre as tags.
- <img/> - Diferente das primeiras paginas da web, hoje as imagens se tornaram um elemento fundamental na internet, o elemento img define uma imagem, a fonte da imagem é definido no atributo src e um texto alternativo para a imagem é definido no atributo alt.
- <table></table> - o elemento table define uma tabela que pode ser usado entre outras coisas para formatar e agrupar elementos no documento html. os elementos <tr></tr> e <td></td> são usados para definir as linhas e as celulas da tabela.
Exemplos
Neste exemplo nos vamos criar 02 arquivos um exemplo.html e o outro exemplo.css, salve os dois na mesma pasta e depois execute o arquivo html. Na próxima postagem veremos um pouco de css e eu explico com detalhes o arquivo css.
exemplo.html
<html>
<head>
<title>Meu Exemplo Html</title>
<link href="exemplo.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div id="titulo">
<h1>Exemplo</h1>
</div>
<div id="conteudo">
<p>esse e um <span>esse e um texto definido com span com formataçao diferente do paragrafo </span>paragrafo em html.</p>
<br />
<h4>esse e um texto com cabeçalho h6, pode-se notar a diferença para o titulo</h4>
<img alt="html5.logo" src="http://www.w3.org/html/logo/img/html5-display.png" />
<h6>a imagem acima foi colocada com o elemento img e o texto com cabeçalho h6</h6>
<a href="http://inicianteprogramando.blogspot.com.br/">link</a>
</div>
</body>
</html>
exemplo.css
body {
color: White;
}
#titulo{
background-color:#AA66CC;
}
#conteudo{
background-color:white;
color : #AA66CC;
}
span{
color : Blue;
font-size : xx-small;
}
img{
width:300px;
height:300px;
}
p{
font-size : larger;
}
Modifique as propriedades do arquivo css e veja o que acontece,teste novas cores de fundo e de texto, o html combinado com css abre um mundo de possibilidade. No próximo post vamos ver um pouco de css.
Nenhum comentário:
Postar um comentário