Poxa vida, alguém vivo aqui?

JVL

blake kathryn
Today's Document

祝日 / Permanent Vacation

Andulka

tannertan36

No title available
taylor price
"I'm Dorothy Gale from Kansas"
Sade Olutola
🪼

if i look back, i am lost
noise dept.
Misplaced Lens Cap

Kaledo Art
AnasAbdin

titsay

No title available

@theartofmadeline
Mike Driver

seen from United States

seen from United States

seen from Malaysia

seen from United Kingdom
seen from United States

seen from Malaysia

seen from Greece
seen from United States

seen from United States
seen from United States

seen from United States

seen from United States

seen from United States
seen from United States

seen from United States

seen from United States

seen from United States

seen from United States
seen from United States

seen from United States
@webdesignbysephi
Poxa vida, alguém vivo aqui?
Revisões
Essa semana será uma semana de revisões, onde eu vou completar os assuntos, responder dúvidas e talvez postarei mais do que o comum.
Vocês tem alguma dúvida ou curiosidade?
Ai que orgulho essas tarefas com musicas do Aerosmith <3
Vou deixar para terminar as aulas de CSS na semana que vem para dar tempo de todos que entraram por ultimo me entregarem a tarefa. (Quem não puder ou coisa e tal, avisa please, e quem estiver vendo as aulas ainda também u.u)
Depois da próxima semana começaremos um pouco de photoshop, aprenderemos Layouts.
Aula #9 - CSS Básico - Posicionamento de elementos
Hello, aulinha atrasada, porém, como só a sof do oficina me entregou a tarefa, então provavelmente não fez falta a aula. Quem me acompanha sabe que eu me afastei do tumblr por causa de muitos problemas, mas, vou continuar com as aulas aqui. Bom, vamos pra aula (espero que tenha alunos aqui ainda).
Uma parte super importante de qualquer página é o posicionamento dos elementos. Uma das últimas aulas de css básico (a penúltima pra falar a verdade). Depois iremos para uma parte mais legal.
As propriedades que vamos usar para posicionar são:
position (absolute, relative, fixed)
top (unidades de medida)
bottom (unidades de medida)
left (unidades de medida)
right (unidades de medida)
Vamos entender a propriedade Position
position: absolute;
O valor absolute define pro elemento uma posição absoluta (ah vá!), ou seja, independente de qualquer outro elemento, onde você mandar ele vai ficar.
EXEMPLO
position: relative;
O valor relative define um posicionamento em relação ao elemento anterior, ou seja, as distâncias serão calculadas a partir das margens do último elemento antes dele no html.
EXEMPLO
position: fixed;
O fixed é igual o absolute, o que difere é que esse elemento nunca vai sair do lugar, por mais que tenha uma barra de rolagem na página.
EXEMPLO
Como definimos as distâncias?
Usando as propriedades top, bottom, left, right (topo, fundo, esquerda e direita, respectivamente) com os valores numéricos equivalentes a distância em px (pixels), cm (centímetros), % (porcentagem), etc.
Exemplo de um css para posicionar uma div com class chamada "umadiv"
.umadiv {
position: absolute;
top: 50px;
right: 400px; }
Outro exemplo
.umaoutradiv {
position: fixed;
bottom: 3px;
left: 10px; }
Acho que por hoje é isso.
Fácil né? Pelo menos parece.
Tem os códigos nos exemplos para vocês analizarem. Qualquer dúvida, ask.
Vou postar a próxima aula na quinta então.
Tarefa #2 - Página ganhando vida
Essa é a primeira tarefa que vai incluir css. É o seguinte:
Vocês vão criar uma página com html e css com o tema a sua escolha. Nela deverá conter:
Textos com formatações dos textos (palavras em negrito, italico, etc);
Uma (ou mais) imagem(s);
Links;
Divs;
Cores (backgrounds e fontes) (aula 6 e 7);
Uso de alguma das funções de dimensões (aula 8);
Boa sorte, soltem a imaginação e caprichem. Qualquer dúvida eu estou aqui para responder.
Entrega: Próxima aula, Segunda (07).
Para me entregar a tarefa, façam um blog secundário (onde ficará todas as tarefas) se quiser fazer numa página separada nesse mesmo blog secundério pode ser também. E me mandem ele numa ask. Escrito:
Tarefa 2 - urldatarefa
No link calendário na side vocês podem acompanhar as atividades e suas datas de entrega.
Aula #8 - CSS Básico - Dimensões
Ultima aula da semana, sexta tem uma tarefinha e eu estou muito ansiosa para ver os resultados de vocês.
Essa aula será sobre dimensões, ajustar tamanhos e como o padding e margin influi nas dimensões dadas aos objetos.
Essa imagem ilustra bem o que vou explicar:
Margin:
Distância do objeto até as bordas do documento. Exemplo de uso no css:
.umaclassqualquer {
margin: 10px; }
Dá a todas as margins 10 px de distância. Podemos usa-la assim:
.umaclassqualquer {
margin-top: 10px;
margin-left: 15px;
margin-right: 5px;
margin-bottom: 10px;}
E especificar uma distância diferente para cada lado do objeto.
Height e Width:
Definem a altura e largura (respectivamente). Usamos assim:
.umaclassqualquer {
width: 100px;
height: 300px}
Padding:
Distancia das bordas do objeto, até o conteudo do objeto (por exemplo um texto dentro de uma div). Esse valor é somado ao valor do width/height, por exemplo, uma div de 100px de largura mais 5px de padding direito e esquerdo fica com 110px.
Outra aula que parece bem curta mais cheia de possibilidades para vocês testarem. Vou deixar mais alguns exemplos e o código para vocês fuçarem.
Exemplos | Código
Por enquanto é isso. Dúvidas, perguntas, etc, ask!
Aula #7 - CSS Básico - Personalização de textos
A turma tá cada vez menor :\ e eu só tenho aula pronta até sexta, vou ter que escrever mais aulas kkk
Espero não perder mais alunos :\
Revisão:
As “propriedades” são as coisas que podemos “personalizar”, exemplo background (fundo), color (cor do texto), margin(margem do elemento).
Lista de propriedades
Nessa aula veremos as alterações possíveis de serem feitas nos textos.
Por mais que eu ache que as aulas não tenham deixado bem claro sobre como escrever o css e etc, vou começar a explicar essa parte e exemplificar bem que fica mais fácil.
Elas podem ser feitas em body, ou em alguma determinada class ou tag. Lembrando que quando feitas em body, altera o documento todo.
As principais propriedades são:
color (cor da fonte)
font-size (tamanho da fonte)
font-family (tipo de fonte)
text-decoration (decoração do texto)
text-align (alinhamento horizontal)
Que podem ser usadas combinada com:
background
margin
padding
width
height
border
entre outras
Essa parte é bem simples, parece até que está incompleta, vou deixar uns exemplos e os códigos para você terem umas idéias.
Exemplos de textos | Código
Bom, vou deixar o código da página inteira para vocês verem como fica na prática, onde vai cada coisa e para terem uma base.
Como a aula ficou super curta e para não misturar os assuntos das próximas aulas, vou pedir para que vocês treinem bastante. Provavelmente as próximas aulas serão assim, assuntos pequenos para não confundir muito.
Por hoje é só.
Especial: Onde colocar cada código
Como algumas pessoas tiveram essa dúvida invés de responder as asks eu vou fazer um post explicando, caso mais alguém tenha alguma dúvida quanto a isso. É uma parte meio embaraçada. Mas enfim:
O que vai em body:
todos os elementos que vão aparecer na página, exemplo:
textos
links
imagens
div
paragrafos
etc
onde vai o css:
no geral, vocês vão usar ele no < head > entre < style > e </ style >
o Class:
pode ser colocado em qualquer tag que fique no body, exemplo:
< a class="algumacoisa" >
< img class="seilaoque" >
< div class="tocomendocoxinha">
< p class="aprofdevcséumamortadefome">
Por ai vai...
Sempre que tiverem dúvidas assim, e precisarem de uma revisão só me chamar :)
Aula #6 CSS Básico - Propriedades
Na aula passada vimos como escrever o css, agora vamos treinar o css daquela nossa página mesmo (pode ser o exemplo que vocês salvaram no computador pra testes, ou o blog secundário de tarefas).
Revisando:
Vamos escrever ele entre <style> e </style> nessas primeiras aulas;
Ele é escrito sempre assim: Tag do html ou class { propriedade:valor;};
O css de uma class começa com .(ponto) + o nome dela, { para abrir e } para fechar, exemplo: .exemplo {propriedade: valor; }.
As “propriedades” são as coisas que podemos “personalizar”, exemplo background (fundo), color (cor do texto), margin(margem do elemento). São sempre o nome da propriedade em inglês, se você souber um pouco de inglês prende bem fácil os nomes.
Elas são escritas entre { e }, assim:
Propriedade: valor;
Um exemplo:
body {
background: #CDB7B5;
}
Nesse css, com body dizemos que as propriedades vão mudar o body do html (que é o corpo todo da página), combackground dizemos que ele vai mudar o fundo do elemento body e com #CDB7B5 dizemos que esse fundo será lilas.
Aqui eu fiz uma lista de propriedades que usaremos, e os valores que elas aceitam:
Lista de propriedades
Vamos para a parte prática da coisa. No começo da página tem o link de onde encontrar código de cores, e as unidades de medidas válidas.
Talvez alguns já tenham entendido como é, e outros não, mas com a prática tudo vai clareando, por isso eu digo,testem bastante.
Vamos começar customizando o corpo da página, o body.
Primeiro vamos abrir a tabela de cores (se você quiser usar seu photoshop para escolher a cor, na caixa de cores vai ter um código de 6 dígitos.)
Você pode testar por exemplo, o background, color, font-size e margin, para começar. Como o body é o corpo todo, coisas como position não vão ter efeitos.
Para mudar a cor dos links usamos a por causa da tag de links ser <a>, mas ele é dividido no css em 4:
a:link | o link normal
a:active | o link quando você clicar nele
a:visited | todos os links que você já visitou (tem no seu histórico do navegador)
a:hover | quando o mouse passa em cima do link
Para mudarmos a cor do link usamos essas “tags”, exemplo:
a:link {
color: #68838B;}
ou
a:hover {
color: #473C8B;}
Testem. E com base nisso deixem a página de vocês com mais cores. Próxima aula vamos mexer com os posicionamentos e div. E talvez, se não ficar puxado, vou explicar um pouco sobre o :hover.
Esse fim de semana não vou passar tarefa, pelo fato da maioria de vocês terem começado as aulas essa semana. Mas estou aqui para responder as dúvidas. E ainda estou aceitando a tarefa #1.
Questões a serem gravadas
Como é escrito o css.
Estudar as propriedades.
Aula #5 - O que é CSS?
Assunto novo, demorei para postar, peço desculpas por isso. Eu vou dar a parte básica de CSS antes da próxima tarefa.
Queria mostrar uma página que a lembraveis fez para as tarefas: turmadehtml, eu achei super legal, alem de ter a tarefas tem os testes das aulas. Depois eu faço um post sobre as tarefas lindas de vocês ^^
Vou postar duas aulas hoje, se não se importarem, já que eu não vou passar tarefa pro fim de semana. E lembrando, qualquer dúvida podem me chamar ^^
Css (Cascading Style Sheet, em português, folha de estilo em cascata) é uma linguagem diferente do html, escrita diferente do html, não faz parte do html. Porém, com ela damos estilo ao html.
Antigamente, quando não se usava css, os posicionamentos das páginas eram feitas com tabelas (em html <table>) e tinha tags de personalização do html (para mudar cores, background), eu não passei esse conteúdo pra vocês porque não é usado em nada hoje em dia. Veja um site feito com tabelas aqui e aqui fala sobre tabless x sites em tabelas (só leiam se vocês tiverem grande interesse na área de sites).
Temos 3 maneiras de colocar o css na nossa página html. O primeiro que vou mostrar é o mais usado:
Escrito dentro da tag <style> css aqui </style> em <head>;
Escrito junto com o elemento html em <body>, por exemplo: <p style=”css aqui"> blah blah blah </p> ou <div style=”css aqui"> blah blah </div>
Escrito num documento .css e posto na tag <head> assim <link rel=”stylesheet” type=”text/css” href=”arquivo.css” />
Eu uso mais o primeiro, e em poucos casos o segundo. O terceiro eu quase não uso, porque qualquer alteração tem que hospedar o arquivo de novo e mudar o link, e dá um trabalhão, ele é mais usado quando se vai fazer sites grandes com muitas páginas.
Como escrevemos o css?
Vou ensinar primeiro como escrever ele em <style>
Tag do html ou class { propriedade:valor;}
Exemplo:
b {color: #7868a0;}
No exemplo o css muda a cor do texto em negrito para roxo.
Class: são nomes que damos a algum elemento do html, para podermos personalizar ele. Vamos usar como exemplo uma class chamada exemplo (uau que criatividade a minha kkk). No html podemos colocar ela em qualquer tag (menos body, e as que vão dentro de head). Assim:
<div class=”exemplo”>
<p class=”exemplo”>
<b class=”exemplo”>
Entenderam o princípio? Para darmos uma class pra tag colocamos class=”nome da class” e para colocarmos ela no css:
.class { propriedade:valor;}
Ou, como no nosso exemplo:
.exemplo { color: #7868a0;}
Nunca se esqueça, o css de uma class começa com .(ponto) + o nome dela, { para abrir e } para fechar.
Bom, acho que por hoje é isso, a aula já tá ficando extensa.
Questões a serem gravadas
CSS é uma linguagem diferente de HTML, por isso, é escrita diferente.
Terminei de corrigir as tarefas hoje e...
Vocês estão de parabéns <3 amei todas, superaram minhas expectativas <3
Aula #4 - Tags básicas #3 As "div"s
Como foi o fim de semana de vocês? :)
Me desculpem mesmo esquecer de postar a aula, eu olhei algumas tarefas e depois termino de olhar as outras, mas acho que todo mundo pegou bem esse começo. Recebi as tarefas de (se você mandou e não tá aqui mande de novo ^^):
legacypacks, new-tmx, @princessofps, chasinghtml, queencoloring, tt-flawless-packs, oficinadehtml, loveboyedits-extensao, awfulpsds, twisabrahao, iconsnja
As famosas div’s
Podemos definir como “blocos” onde organizaremos e daremos formas aos sites/themes.
É escrito assim:
<div>conteúdo da div</div>
Mas normalmente iremos usar dessa forma:
<div class=”nome”>conteúdo da div, esse class usaremos no css pára “personalizar” essa div, mas isso veremos na próxima aula :) </div>
Para quem viu meu tutorial sobre como fazer themes (esse aqui), tem um exemplo de div s estilizadas:
No exemplo acima são div s com class diferentes para ficar uma do lado da outra e com essas cores. Mas uma div sem class, sem personalização fica separada do texto, ou seja, ela é fresca e não se mistura. Tente assim e veja o resultado:
um trecho aqui<br>
continuando<br>
mais uma frasezinha
<div>eu não me misturo com essa gentalha</div>
continua o texto aqui<br>
e aqui <br>
e mais aqui
Isso é div. É um conteúdo minusculo, então eu peço para que vocês treinem tudo que aprendemos em html até agora. Porque próxima aula começamos a dar vida a essas páginas em branco e preto.
Bônus:
página sem usar div X página com div
Essa é a diferença, sem div as páginas vão ficar igual as que vocês fizeram até agora. Com div posicionamos e organizamos os textos/imagens/elementos e afins, dêem uma olhada nos themes que vocês usam, todos tem muuuuitas divs.
Sem elas não teriamos themes como temos agora.
Questões a serem gravadas
Pratiquem e pratiquem, e me perguntem qualquer dúvida.
Se preparem porque css é tenso kkk
Nos vemos em breve kkk
Perguntas
Como foi a aula de hoje, gostaram?
Pegaram bem o html? Podemos passar para css?
Alguma dúvida sobre essa ou qualquer outra aula?
Eu sou muito chata?
TAREFA #1 - PÁGINA SIMPLES
Essa é a nossa primeira tarefa e eu quero ver o que vocês conseguiram pegar. A tarefa é a seguinte:
Vocês vão criar uma página só com o html puro que aprendemos até agora (não vai ficar a coisa mais linda do mundo, eu sei kkk). Escolha uma música, ou um trecho de um livro de sua preferencia, ele será o conteúdo da nossa página. A página terá que ter:
O texto;
Formatações dos textos (palavras em negrito, italico, etc), não precisa ser tudo que aprendemos;
Parágrafos e quebras de linha (<br>);
Uma (ou mais) imagem(s);
Links (para a página do cantor, tradução da música, página do livro, qualquer coisa);
Entrega: Próxima aula (segunda-feira, 24)
Para me entregar a tarefa, façam um blog secundário (onde ficará todas as tarefas) se quiser fazer numa página separada nesse mesmo blog secundério pode ser também.
Me mande na ask o tumblr para eu avaliar.
Na side tem um link chamado calendário, lá vocês podem acompanhar as datas de entregas das tarefas/trabalhos.
AULA #3 - TAGS BÁSICAS #2 LINKS E IMAGENS
Chegamos ao final da primeira semana, espero que todo mundo esteja gostando, to amando a interação de vocês, todos tirando dúvidas, dando sugestões, dando like nas aulas (que é importante pra eu saber se vocês estão vendo). Hoje teremos nossa primeira tarefa já.
Então nessa aula veremos as maneiras de colocar links e imagens no nosso código.
Começaremos por links. Links são palavras, textos, elementos em geral, clicáveis, que levam a outro lugar na internet ou na própria página.
A tag do link é <a> (a de ancora, não me perguntem porque kkk).
Links para outras páginas
<a href=”endereço completo do destino">TEXTO OU ELEMENTO (IMAGEM ETC) CLICÁVEL</a>
O endereço completo do tumblr por exemplo é http://tumblr.com/ do google http://google.com/, ou seja, sempre comhttp://.
Link para enviar um email
Vocês quase não usaram no tumblr, mas em criação de sites sim. Esse link quando clicado abre uma janela (no navegador, ou programa de envio de email se a pessoa tiver) pronta pra essa pessoa te enviar um email. O link é:
<a href=”mailto:[email protected]">Contato por email</a>
Links para um conteúdo na mesma página
Por exemplo aqui : comofazerthemes tem links que ligam pra essa mesma página. O código é assim:
<a href=”#nome">TEXTO OU ELEMENTO (IMAGEM ETC) CLICÁVEL</a>
E no lugar que você quiser que o link leve (dentro da mesma página ou texto):
<a name=”nome">TEXTO OU ELEMENTO ONDE O LINK LEVARÁ</a>
Para um link abrir em uma nova aba/janela:
<a href=”endereço">blah blah blah</a>
Link em uma imagem:
<a href=”endereço"><img src="link da imagem"></a>
Tooltip nos links (aparece uma caixinha de texto quando o mouse para em cima do link)
<a href=”endereço" title="texto do tooltip">texto etc</a>
Imagens
Colocar imagens no html não tem muito segredo, a tag para imagens é <img> e ela não precisa ser fechada. A imagem deve estar hospedada na internet e ter um endereço (url). Vou usar como exemplo esse header (https://31.media.tumblr.com/b4ea5396c7aa051b3dbf8daca086884c/tumblr_inline_n070owHWvj1r42zfd.png).
Para adicionar a imagem usamos:
<img src=”link da imagem">
Usando a imagem do exemplo:
<img src=”https://31.media.tumblr.com/b4ea5396c7aa051b3dbf8daca086884c/tumblr_inline_n070owHWvj1r42zfd.png">
Alinhamento da imagem
Ela pode ser alinhada a direita, esquerda, acima, no centro e abaixo (right, left, top, center, bottom), o código é esse:
<img src=”endereço" align="um dos valores (right, left, top, center, bottom)">
por exemplo, para alinhar a direita do texto:
<img src=”endereço" align="right">
Ela alinha a esquerda por padrão, então não precisa colocar o align se for deixar ela a esquerda.
Mudando altura e largura
Também podemos definir uma altura(height) ou largura (width) pelo html. O código será assim:
Para largura:
<img src=”endereço" width="tamanho em pixel">
Para altura:
<img src=”endereço" height="tamanho em pixel">
Bom, acho que por hoje é isso.
Questões a serem gravadas
Pratiquem e testem todos esses códigos quantas vezes acharem preciso.
Dê uma atenção maior para o link comum que é o que iremos usar mais.
Lembre se que tag de imagens não são fechadas.
Aula #2 - Tags básicas #1 Formatação de textos
Fico super feliz que vocês estejam gostando das aulas, eu fico meio ansiosa pra postar, por mim postava todo dia kkk
Qualquer dúvida ou reclamação podem vir falar :)
Para inserir textos na sua página não tem segredo algum, é só digita-los onde você quer que apareça. Nós usaremos algumas tags para:
Organizar o texto:
Usamos <p> para criar parágrafos. Teste naquela página que fizemos na primeira aula:
<p>Escreva um trecho da sua música preferida.</p>
<p>Escreva outro trecho e veja como fica :)</p>
Usamos <br> para pular para outra linha. O html não reconhece a chamada “quebra de linha” (quando você teclaenter para escrever o texto em outra linha). Essa tag não precisa ser fechada então não usaremos </br>, é só o <br> no fim da linha. Teste na sua página também:
Primeira linha sem usar o br…
Segunda linha, note que mesmo escrito em duas linhas ele não aparece em duas. E agora <br>
Usando o br :) pulou a linha e se eu fizer assim <br>
<br>
ele não só foi pra outra linha como pulou uma :)
O <blockquote> vocês já devem conhecer aqui do tumblr, é esse textinho que tem uma margem maior e no tumblr fica destacadinho com uma borda cinza do lado. Vamos testar ele para conhecer também:
<blockquote> Eu sou um blockquote o/</blockquote>
O <pre> é uma caixa de texto pré formatada. Por exemplo:
pre
É bem pouco usado, mas teste na página de testes também.
<pre> Testando o pre, e blah blah blah</pre>
Cabeçalhos
O html tem essa tag que faz com que o texto dentro dela fique em negrito e em tamanho maior, sem a necessidade de colocar alguma class de css, elas são <h1>, <h2>, <h3>, <h4> e <h5>. A 1 é a maior e a 5 a menor. Exemplo:
H1
H2
H3
H4
H5
Teste elas:
<h1>Cabeçalho 1</h1> <h2>Cabeçalho 2</h2> <h3>Cabeçalho 3</h3> <h4>Cabeçalho 4</h4> <h5>Cabeçalho 5</h5>
"Enfeites"
Todo mundo conhece itálico, negrito, sublinhado, riscado né?
Para italico usamos a tag <i>, para negrito <b>, para sublinhado <u> e para riscado <s>. Teste:
Pegue a <u>letra da música</u> que você <s>gosta</s> e <i>decore</i> ela <b>assim</b>.
Agora dois que vocês talvez não conheçam:
Esse é o Small Esse é o Big
Suas tags são <small> e <big>, teste elas também.
BONUS: Listas
São essas listas numeradas ou não que usamos, exemplo:
Lista
Numerada
Lista
Não Numerada
Elas são escritas assim:
<ol>
<li>Lista</li>
<li>Numerada</li>
</ol>
<ul>
<li>Lista</li>
<li>Não Numerada</li>
</ul>
Fique a vontade para testar, em breve saberemos mais sobre isso tudo.
Então, não sei se ficou muito grande, mas tentei deixar bem explicadinho. Nossa página tá feia ainda né? Mas calma, com o tempo vamos aprendendo coisas novas ;)
Questões a serem gravadas
Nessa aula só deixo a observação da tag <br> que não precisa ser fechada. Ela é forever Alone kkkk
Teste quantas vezes quiser, até saber para que serve todas elas.
Aula #1 - O que é HTML?
Primeiramente eu quero dizer bem vindo a todos, eu estava muito ansiosa com essa aula. Espero que todos gostem todos aprendam, e todos vão até o fim *-* Estou muito feliz com os 22 alunos dessa turma.
E antes de começar a aula em si, quero deixar bem claro que não quero ninguém com dúvidas, qualquer dúvida corre me procurar, ok? Estarei sempre respondendo as perguntas de vocês.
Gostaria de pedir para vocês seguirem aqui, para eu ter certeza de que vocês estarão acompanhando rs
Então agora começamos.
HTML é um assunto muito difícil de ser tratado sozinho, por isso, vou incluir nas aulas css, scripts e criação de layouts e por último e não menos importante, a parte do tumblr. E a duração do curso vai depender de como vocês pegarem a matéria.
HTML é o código usado para criar uma página para a internet, então, sabendo html você cria qualquer tipo de site (claro que alguns requerem scripts ou umas programações específicas, por exemplo, o tumblr e blogspot que tem suas tags para os posts), esse código será lido por qualquer navegador (internet explorer, mozilla firefox, google chrome, safari, opera, etc).
Todo mundo já viu um código html né, um theme, um código-fonte, até os players do tumblrs são html. Ele é escrito como documento de texto, e salvo com a extensão .html.
Vamos ver como funciona na pratica?
Eu recomendei um programa chamado notepad++, que ajuda muito na hora de escrever, veja um exemplo, o mesmo codigo primeiro no notepad e depois no bloco de notas:
As tags ficam com uma cor, os comentários com outra, e etc, assim quando algo tá errado você identifica mais rápido, como uma div que ficou sem fechar e etc. Fica a escolha de vocês o que usar.
Abram o programa escolhido e escrevam:
<html>
<head>
<title>Primeira aula de HTML</title>
</head>
<body>
<h1>Sejam bem vindos</h1>
</body>
</html>
Se tiver usando o notepad++ vá em linguagem > h > html e note que tudo fica colorido. Na hora de salvar, de o nome seguido de .html, o meu será page.html, se for possível faça uma pasta para guardar as coisas do curso.
Vou explicar esse código. No html temos o que chamamos de tags, começadas com < e terminadas com > e como dá pra observar, depois do conteudo da sua tag ela é fechada com </ e >
Exemplo: <body> conteudo do body </body>
As tags básicas para um html funcionar:
Temos quatros tags que são o início de tudo, são elas:
<html> | diz ao navegador que essa é uma página escrita em html.
<head> | literalmente a “cabeça” da sua página, nada que é posto aqui aparece no html, ela só dá vida a sua página. Aqui você vai colocar os scripts, styles, se for um theme o appeareance, mudar o título da página, favicon, etc.
<title> | título da página que aparece na aba do navegador.
<body> | onde irá os elementos (div, imagens, textos, links, etc) que aparecerão na sua página.
Então, o html básico da página sempre será esse:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Bom, por enquanto é só.
Próxima aula: Formatação dos Textos
Questões a serem gravadas
O html é escrito em tags.
A maioria das tags vem aos pares (precisam ser fechadas por uma igual a ela só que com o /, por exemplo: </head>).
O html tem algumas tags básicas.
Vocês acham que a aula tá muito longa ou curta?
O que vocês acharam dela?
Alguma dúvida?
Até a próxima :)
Tarefas e Avaliações
Como serão minhas aulas?
Serão postadas nas segundas, quartas e sextas, desta forma:
Segunda e quarta: Explicações.
Sexta: tarefa, que deverá ser entregue até a próxima aula, no caso, segunda, a não ser que eu coloque outra data.
Para que servem as tarefas e como serão?
Com elas eu verei o que você aprendeu ou não, quais as suas dúvidas para que eu possa focar mais e explicar melhor os conteúdos. Serão feitas uma vez por semana com o tema trabalhado.
Como será as avaliações?
Cada aluno será avaliado pela presença (tarefas entregues, interações nas aulas, etc) e no final de cada assunto farei um trabalhinho.
Como será vista as presenças nas aulas?
Na entrega de tarefas, e primeiramente eu pensei em vocês darem likes na aula lida, mas, se for atrapalhar e você quiser mandar uma ask avisando, ou alguém tiver outra ideia, é só falar. O mais importante é interagir.
Casos de ausencia, não ter tempo para entregar as tarefas ou ver todas as aulas?
Se acontecer de alguém não puder estar presente e tal, é só avisar.
Onde tirar dúvidas e ver as dúvidas respondidas?
Criei um tumblr para que vocês possam perguntar e consultar as respostas, em asks no menu, ou a caixinha de asks vai direto pra ele, o link respondidas na side vai pra ele também.
Se quiser que eu responda em privado é só avisar.
——————————————————————————
Alguma dúvida?
Farei uma página para organizar todas as informações, e todos meus posts vão ter tags (exemplo: avisos, uteis, dicas, downloads, tarefa) para facilitar a nossa vida.