Aprendendo Web Design Básico

Quais as ferramentas básicas necessárias prender html? Para começar a aprender e a escrever seus primeiros códigos em html, você não precisa de muitas coisas, aliás, é bastante simples. Você precisará de: Um notebook ou desktop para criar e salvar arquivos Um navegador de internet (de preferência atualizado, mas não é obrigatório) Um editor de texto puro (bloco  de notas / notepad++) Conexão à internet para aprender os conceitos Captura de tela exibindo bloco de notas e navegador abertos São apenas quatro itens e se você notar, eles são muito comuns se você possui um computador. Para os mais adiantados, sim, é possível aprender apenas usando um navegador de celular. Mas não é o mais adequado para aprender os fundamentos da linguagem e vai requerer uma noção básica para operar com arquivos em editores online, muitas vezes em inglês. Fique tranquilo(a) que daremos dicas sobre esses editores e como aprender apenas usando seu celular em uma próxima postagem. Por que um notebook ou desk...

 O que são links? Como vimos em nossa primeira postagem  HTML é o acrônimo de (Hyper Text Markup Language), vimos que hipertexto é um texto que se conecta a outros textos. Você pode estar se perguntando, mas como os documentos web se conectam a outros documentos e recursos? A resposta para isso é: links.  Como usar links em HTML? O html atribui à tag <a></a> a função de lincar documentos e recursos em uma página web. O nome da tag é uma redução de "anchor" (âncora em inglês) e para funcionar devidamente a tag <a></a> deve conter o atributo href (sigla para hyper text reference) que é o caminho (path) absoluto ou relativo para a página ou recurso web que desejamos lincar em nosso documento.  Vamos abrir o nosso exemplo da última aula e adicionar o seguinte código: <p>Estou aprendendo html no blog  Aprendendo Web Design Básico</p> Adicione o código após o texto alternativo que aparece para a imagem não carregada.  Após adic...

Forneça texto alternativo para imagens com o atributo alt A tag <img> possui outro atributo essencial, que é o atributo alt. Ao configurá-lo o elemento <img> apresentará um texto alternativo caso a imagem não seja carregada por algum motivo e ou caso o usuário utilize um leitor de tela por possuir deficiência visual, onde o texto do atributo alt deverá ser uma explicação clara da imagem que será lida pelo leitor de tela ou aparecerá como texto escrito em caso de problema com a exibição da imagem. Configurando o atributo alt O atributo alt deve ser inserido dentro da tag <img> da mesma forma que o atributo src, uma observação é que sempre que há outros atributos, devemos separá-los com um espaço. Por exemplo: <img src="www.exemplo.com" alt="um texto descritivo">  Atributo alt inserido na tag <img> Se você adicionar o atributo alt ao nosso exemplo da última aula e abrir o arquivo, não notará diferença alguma, porém se uma pessoa utilizar ...

 Incorporando imagens no seu documento O html possui uma tag exclusiva para incorporar imagens ao seu documento. Conforme comentado na nossa segunda postagem Aprenda para que servem as tags e como usá-las , há tags que não envolvem o conteúdo a ser marcado, essas tags são chamada de tags de fechamento automático (self-closing tags) por exemplo: <meta>, <link>, <br>, <hr> etc... outra tag de fechamento automático é <img>, esta tag nos permite inserir uma imagem no local onde a tag é colocada. Para isso devemos usar dentro da tag <img> o atributo src (abreviação de source ou fonte em português) para determinar a fonte ou origem da imagem, onde colocamos o caminho ou link da imagem que queremos carregar no documento.  Uma breve introdução a caminhos de arquivos (path) Um caminho (Path em inglês)é como o endereço virtual de um arquivo e determina a localização dele. Um caminho pode ser de dois tipos básicos: Caminho absoluto (absolute path) e e...

Utilizando headings(cabeçalhos) em seu documento html Em  Marcando Texto e Definindo o Idioma do Documento , vimos como marcar textos em um documento html utilizando a tag <p></p> e também aprendemos como definir o idioma para o documento. Na postagem de hoje veremos como dar destaque ao nosso texto através da utilização de cabeçalhos.  Tags h1 a h6 O html possui tags específicas que destacam o texto, de modo tanto o usuário que lê o texto, quanto o navegador, ferramentas de busca e leitores de telas para pessoas com deficiência visual possam identificar parte do texto como cabeçalhos para títulos de capítulos e subcapítulos.  As tags de cabeçalho vão de <h1></h1>a</h6></h6> começando pelo nível mais importante (h1).  Não é mera estética É boa prática que cada documento html possua um e somente um <h1>. Embora o navegador utilize um estilo próprio para exibição dos textos de cabeçahos <h> (normalmente com letras ma...

Marcação de texto e definição de idioma do documento Hoje daremos continuidade ao que aprendemos na postagem  Aprenda para que servem as tags e como usá-las , onde aprendemos a mostrar o título da página na guia do navegador e também a principal diferença entre código inserido na tag <head> e código inserido na tag <body.>. Vimos que ao inserir um texto diretamente no <body> (corpo) do documento, ele é exibido pelo navegador, mas alertamos desde já que essa não é uma boa prática, pois, embora o navegador tenha conseguido mostrar o conteúdo de forma satisfatória, a não utilização das tags corretas podem gerar erros imprevisíveis.  A tag <p></p> O html possui uma tag para marcação de textos como parágrafos, por isso usamos as seguintes tags <p></p>. Todo o texto envolvido entre as tags <p> de abertura e de fechamento serão tratadas como um parágrafo em html. Vamos corrigir o nosso exemplo2.html da aula passada marcando o texto...

 O que são tags?  Tags são marcadores que criam sentido e estrutura para que navegadores e motores de busca exibam conteúdos e informações de forma simples. Como vimos na postagem  HTML o básico para começar , o html é uma linguagem de marcação e para fazer marcação no texto que será interpretado, nós utilizamos tags (marcadores). Vimos também que a maioria das tagas vem em pares, possuindo uma tag de abertura (que vai antes do conteúdo a ser marcado) e uma tag de fechamento (que vai logo após o conteúdo marcado) por exemplo: <html> Olá Mundo! </html>. Portanto o formato de uma tag será na maioria das vezes esse: <nomedatag>conteúdodatag</nomedatag>. Toda tag possui um nome entre os sinais "<" e ">" e a maioria possui um conteúdo envolvido entre a tag de abertura e fechamento. Há exceções, que veremos futuramente em tags que não envolvem um conteúdo. *Lembrando que a tag de fechamento possui uma barra para frente "/" também co...

Entendendo o que é HTML A sigla HTML significa Hypertext Markup Language (Linguagem de Marcação de Hipertexto). Tá mas o que isso quer dizer? Para entender o que ela faz é preciso primeiro entender o que é hipertexto. Basicamente falando, hipertexto é um texto, que faz referência a outros textos, através de links . Tudo que você vê num site é basicamente texto interpretado pelo seu navegador de internet.  Quando você acessa um site qualquer, nele há links para outras páginas e sites correto? Então, esse é um exemplo básico de hipertexto na prática. Quando falo que HTML é uma linguagem de marcação, é porque ela foi desenvolvida para marcar as partes de um texto ou documento para que ele seja exibido pelo seu navegador ou outro ambiente da forma adequada.  Aqui vai uma nota importante: se você possui um navegador de internet (provavelmente tem, caso contrário não estaria lendo este conteúdo) então possui o básico para começar a aprender e para colocar em prática a maioria dos co...