Categoria: a46161

Publicado em

Livro IAI

Web Design e HTML avançado (pgs 100-124) – Fim do Livro

Fontes

Uma fonte é uma representação consistente dada a um alfabeto. Inclui objetos que alteram a forma do símbolo sem alterar seu significado. As características exigidas de uma fonte são tipo (ou família), tamanho, formato e peso. Para especificar o texto, você deve especificar a fonte especificando seu tipo, forma, peso e tamanho. CSS fornece propriedades como família de fontes, tamanho de fonte, estilo de fonte e peso de fonte para definir essas propriedades. Além disso, diferentes tipos de funções permitem considerar diferentes tipos de fontes.

Font-Family:

Uma família de fontes (ou fontes) é especificada com a propriedade Font Family. Aceita uma lista de valores separados por vírgula que representam nomes de fontes que podem não existir no sistema do usuário. Se o substantivo raiz tiver mais de uma palavra, coloque-o entre aspas.

Exemplo:

Font-Size:

A propriedade Font-Size altera o tamanho da fonte, que pode ser especificado como um valor absoluto ou relativo.

Exemplo:

O tamanho pode ser especificado em unidades como pontos, pixels, centímetros, milímetros e polegadas.

Font-Style e Font-Weight:

O tipo de fonte é afetado pela espessura da fonte (altera a espessura) e pelo tipo da fonte (altera o itálico).

Font-Variant:

A função de alteração de fonte permite aplicar uma fonte diferente. As opções mais comuns são “small caps” e “small caps”. Coloque as palavras em maiúscula, não em minúsculas.

Propriedade Font:

Se quiser definir vários aspectos do seletor de uma só vez, você pode usar o estilo da fonte para definir a ordem correta dos elementos.

Atributos de Texto

Nesta parte contém alterações e recursos relacionados ao texto, incluindo alteração de texto para controlar letras maiúsculas e minúsculas e texto maiúsculo para adicionar ou remover efeitos de maiúsculas e minúsculas, como sinais e sintomas.

Text-Transform:

A propriedade text-conversion converte o texto em letras maiúsculas ou minúsculas.

Text-Decoration:

O recurso de marca de texto permite adicionar ou remover efeitos decorativos ao texto.

Text-Align e Vertical-Align:

Essas propriedades controlam o alinhamento horizontal e vertical do texto.

Exemplo:

Text-Indent

Realiza a endentação da primeira linha do bloco de texto.

Exemplo:

Cores

Abrange funções relacionadas a cores, como color para definir a cor do texto, background.color para definir a cor de fundo e background-image para adicionar uma imagem de fundo.

Color:

É utilizada para definir a cor do texto da página.

Exemplo:

Background-Color:

É uma propriedade para definir uma cor de fundo de um determinado elemento.

Exemplo:

Background-Image:

Usada para definir uma imagem ao fundo de um determinado elemento.

Exemplo:

Background-Repeat:

É uma propriedade que controla como a determinada imagem de fundo será repetida na página.

Exemplo:

Background-Position e Background-Attachment

São usadas para controlar o posicionamento e a fixação da imagem de fundo da página.

Exemplo:

Propriedade de Classificação

Esta seção contém os principais recursos que permitem usar estilos de forma sistemática, agrupando elementos em categorias específicas. As categorias incluem linhas, blocos, blocos e objetos invisíveis.

Display:

As propriedades de exibição desempenham um papel importante na decisão de como exibir um elemento. Ele oferece opções como Nenhum, que desativa a visibilidade do elemento, Bloco, que cria uma nova caixa para colocar o objeto, Lista de elementos em um bloco com um marcador de linha e Linha, que define o elemento como parte de um bloco.

Exemplo:

White-Space:

Controla a propriedade de espaço em branco dentro de um elemento. Define se quebras de linha, espaços, tabulações, etc. devem aparecer na tela. Isso é algo a considerar ou não quebrar a linha.

Exemplo:

List-Style

A propriedade estilo de lista e suas variantes (tipo de estilo de lista, imagem de estilo de lista e posição de estilo de lista) são fundamentais na formatação de itens de lista, controlando tipo de caractere, imagem e posição do caractere.

Exemplo:

Controle de Blocos

As propriedades margin e padding desempenham um papel crucial no controle das bordas internas e externas de um elemento de bloco. Eles podem ser aplicados de diversas maneiras, como definir todas as margens de uma vez ou separadamente para cada lado (superior, direita, inferior, esquerda).

Margin e Padding:

As margens externas e internas são definidas usando as propriedades de margens e preenchimento. Eles podem afetar todas as arestas de uma vez ou podem ser aplicados a cada lado separadamente.

Exemplo:

Border-Width, Border-Color e Border Style:

Para controlar certos aspectos das bordas, como espessura, cor e estilo, usamos as propriedades border-width, border-color e border-style. Eles podem ser usados ​​individualmente ou em grupos.

Exemplo:

Border:

Borda Superior, Borda Inferior, Borda Esquerda e Borda Direita agrupam as configurações de cor, estilo e espessura para cada uma das quatro bordas.

Exemplo:

Width e Height

As propriedades de largura e altura permitem controlar o tamanho do elemento do bloco alterando a altura e a largura do bloco.

Exemplo:

Float:

O recurso flutuante permite colocar um bloco à direita ou à esquerda da janela do navegador, permitindo que o restante do texto flua ao redor dele.

Exemplo:

Clear

O atributo clear é usado para evitar que blocos flutuem em torno de imagens ou blocos que usam o atributo float. Isto tem o mesmo efeito que o atributo explícito em HTML.

Exemplo:

Posicionamento

A posição dos objetos em HTML pode ser absoluta ou relativa. As propriedades position, top e left desempenham um papel vital neste controle.

Position, top e left:

A propriedade position requer que as propriedades top e left especifiquem a posição absoluta ou relativa do objeto. A origem da posição absoluta é o canto superior esquerdo do navegador, enquanto a posição relativa refere-se à posição anterior do objeto.

Exemplo:

Z-Index

A propriedade Z-index permite organizar objetos por camada e especificar sua profundidade na visualização. Quanto maior o número, maior o nível.

Exemplo:

Visibility:

A propriedade Visibilidade controla a visibilidade do bloco, tornando-o visível ou invisível. Ao contrário da largura, a visualização preserva o espaço ocupado por um bloco.

Exemplo:

Conclusão

Concluindo todo o conteúdo até agora, o HTML (Hypertext Markup Language) ainda é extremamente importante nos dias de hoje, desempenhando um papel essencial na criação e estruturação de páginas web. A sua importância reside na capacidade de fornecer uma base sólida para o desenvolvimento de conteúdos online, criando assim interfaces acessíveis e intuitivas para utilizadores em diferentes dispositivos e plataformas. O HTML também é a espinha dorsal da Web Semântica, facilitando a interpretação precisa do conteúdo pelos mecanismos de pesquisa e facilitando a indexação e categorização eficientes das informações. A evolução contínua do HTML e suas versões mais recentes, como o HTML5, incluem recursos avançados que expandem suas capacidades, tornando-o ainda mais importante para a criação de experiências digitais interativas ricas. Em suma, o HTML continua a ser a tecnologia central sobre a qual a web moderna foi construída e desenvolvida.

Publicado em

Livro – IAI

Web Design e HTML avançado (pgs 64 -100) – Resumo com mais conteúdo para compensar a semana que não foi publicado.

Além do HTML

Imagem

Em um cenário eletronicamente visto , as imagens se enquadram em duas categorias: imagens bitmap (raster) compostas de matrizes de pixels e imagens vetoriais definidas por equações. Enquanto as imagens bitmap perdem qualidade quando ampliadas, as imagens vetoriais mantêm sua nitidez. Programas como Corel Draw e Illustrator podem lidar com imagens vetoriais. Adobe Photoshop é líder em processamento de imagens raster. Pacotes de software Web como Adobe ImageReady e Macromedia Fireworks combinam os dois modelos.

Exemplo:

Bitmaps não compactados são raros na web, onde GIF e JPEG são os formatos dominantes. JPEG geralmente oferece compactação mais alta, mas para imagens pequenas, GIF tem tendencia em aparecer com tamanhos menores.

Cor

A profundidade de cor e a profundidade de bits afetam a dimensão da imagem. Pixeis diferentes podem produzir outras cores. A capacidade de exibição em cores é variável, são utilizadas 256 cores. Imagens de 2 bits (cor verdadeira) mostram 16,777 milhões de cores, exibindo cores verdadeiras e uma área maior. Na web, GIF e JPEG compactam bem o tamanho da imagem, independentemente do número de cores.

Paleta de Cores

Quando um tipo de imagem de 2 bits é exibida em um ambiente gráfico de 8 bits, ocorre uma conversão para torná-la visível. O sistema de 256 cores representa as cores usadas para criar uma paleta de cores. Nós podemos escolher este tipo de tecido para otimizar seu look considerando os tons dominantes do seu estilo. Roubar todas as cores de uma imagem afeta a exibição correta do sistema operacional, reduzindo a quantidade de cores disponíveis para os aplicativos. O navegador possui uma paleta própria, chamada Color Cube, que contém 216 tipo de cores, sendo as 0 restantes reservadas para a utilização do sistema. As cores internas e externas do cubo são ajustadas quando a imagem é carregada no navegador. Isso permite que o navegador ajuste e reduza automaticamente as cores para caber em sua paleta.

Anti-Aliasing

O anti-aliasing é muito importante para otimizar áreas dinâmicas de uma imagem adicionando cores comuns. A qualidade é melhorada, mas a eficiência da compressão é reduzida, isso faz com que é aumentado o número de cores e a dimensão da paleta. A qualidade da imagem é ruim e as curvas e linhas diagonais não são suavizadas. Com a utilização do anti-aliasing, é importante manter o número de cores necessário ao mínimo.

GIF

O formato de comunicação gráfica, um formato GIF, fornece compactação eficiente para imagens não gráficas. GIF, que usa o algoritmo Lempel-Ziv-Welch, preserva a qualidade visual enquanto compacta e substitui uma matriz horizontal de pixels da mesma cor e tamanho. GIF suporta entrelaçamento, transparência e animação. GIFs vinculados criam efeitos visuais, mas a exibição das imagens vinculadas pode ser atrasada. Os GIFs também podem substituir a cor pela luz, criando imagens transparentes que mantêm a forma do objeto.

JPEG (e JPG)

JPEG (Joint Photographers Expert Group) é bom para compactar imagens estáticas. Fornece compactação de alta perda de 10:1 a 100:1. Ao contrário do GIF, ele suporta o formato RGB e deixa informações de cores de 2 bits. JPEG progressivo e JPEG entrelaçado são recursos opcionais. A compactação JPEG sempre apresenta perdas e o tamanho final depende da qualidade desejada. JPEG não oferece suporte à cor especificada e reduzir a cor não reduz o tamanho.

PNG

PNG (Portable Network Graphics) é um formato criado pelo W3C para a web. Possui vantagens sobre GIFs, incluindo disparo contínuo, suporte para imagens de 2 bits, melhores efeitos progressivos, multirresolução e canal alfa de 8 bits. PNG pode ser considerado uma alternativa ao GIF, principalmente por sua forte transparência e suporte transparente. Alguns programas oferecem suporte a PNG, mas nem todos os navegadores oferecem suporte a todos os recursos.

Layout com Tabelas

Neste tópico é abordado o uso de tabelas HTML para layout de página. Embora as planilhas venham em diferentes tipos, elas são funcionais, por isso é importante saber como classificar, combinar células e manipular o espaço. Serão discutidas estratégias como o uso de imagens de 1 pixel para simular controles bidimensionais em HTML.

Frames

A seção somente quadro discute a divisão da visualização do navegador em subjanelas. Apresentamos este conceito básico de <frame>, que define a estrutura de linhas e colunas para a criação de layouts mais complexos. Discutimos como definir as propriedades de linha e coluna para determinar o tamanho do quadro. Também revisaremos estratégias para gerenciar metas de afiliados e maximizar o efeito TARGET. Isso permite que você abra links em guias separadas, o que proporciona uma melhor experiência de navegação.

Multimídia

Imagens Mapeadas

A parte baseada nas imagens mapeadas é classificada em dois tipos principais: lado servidor e lado cliente. Descreve como usar MAP e  para identificar os pontos fortes da imagem. Apresentamos exemplos reais e mostramos como regiões específicas podem ser conectadas a outras áreas para melhorar a comunicação e personalizar a navegação.

Audio, Video e Plugins

Enfatiza o uso de elementos EMBED e OBJECT para áudio, vídeo e outros plug-ins no contexto de fusão de mídia. Funções relacionadas, como CONTROLS e AUTOPLAY, são introduzidas para controlar a reprodução e exibição desses itens.

Flash

Estamos particularmente interessados ​​na tecnologia Flash desenvolvida pela Macromedia. Descreve como usar elementos EMBED para incluir animação, interatividade e integração de áudio e vídeo. Discutiremos os benefícios dos arquivos Flash, incluindo seu tamanho compacto e escalabilidade, bem como considerações para quando você precisar de um computador dedicado para criação e visualização.

Applets Java

O que é?

Os chamados applets Java desempenham um papel muito importante na web, fornecendo soluções para visualização de informações independentemente da origem do utilizador. Ao contrário dos itens que dependem de plug-ins ou tecnologias específicas, assim como o Flash, os applets são pequenos programas específicos de backend escritos em Java. A funcionalidade iniciada pelo navegador fornece uma experiência consistente em todas as plataformas.

Para realizar a executar código Java ocorre em uma “Java Virtual Machine” (JVM) é uma espécie emulação do sistema Java nos navegadores que suportam Java. Isso permite que programas inteligentes forneçam interfaces de comunicação interativas de áudio, vídeo, 3D e vídeo, isso independente do sistema operativo utilizado.

Quando eu posso usar?

Os applets do Java são ótimos para superar as limitações de HTML, protocolos HTTP e browsers. Isso permite o desenvolvimento de applets além dos recursos de linguagens integradas, como HTML e JavaScript. Estas aplicações podem incluir novos protocolos de comunicação, segurança e formatos multimédia. No entanto, esta liberdade de entrada maliciosa é prejudicial para uma página HTML. Um applet gráfico requer uma página HTML para executar e exibir a mesma imagem que uma imagem. O elemento HTML APPLET é usado em applets que suportam propriedades como CODE, HEIGHT, WIDTH, NAME, CODEBASE, ARCHIVE, etc. A capacidade de integração com JavaScript torna tudo ainda mais fácil.

Como posso incluir um applet numa página?

Os applets são incorporados nas páginas em HTML usando o elemento “APPLET”. Ao contrário do IMG, este elemento é um bloco que tem que ter o descritor de fechamento </APPLET> assim como muitas tags do próprio HTML. Contém os parâmetros exigidos pelo APPLET. Propriedades como por exemplo CODEBASE e ARCHIVE são opcionais e permitem que o applet seja localizado em diferentes servidores e que o módulo de software seja importado. O atributo MAYSCRIPT é necessário para permitir que o miniaplicativo acesse o código JavaScript da página. Os aplicativos Java fornecem uma variedade de funções e parâmetros configuráveis ​​por meio do elemento <PARAM> facilitando ao ser inserido em páginas HTML. Alguns exemplos práticos incluem banners de texto roláveis, ícones inteligentes e interfaces de banco de dados, que podem ser encontrados em sites como Gamelan e o site Java da Sun.

Folhas de Estilo (CSS)

O que são folhas de estilo?

Uma folha de estilo (conhecido mais com o nome popular CSS) é um conjunto de regras ou normas que informa ao programa quem é responsável pela formatação do estilo de um determinado documento, por exemplo o HTML. Essas regras explicam como organizar, posicionar e estilizar o texto em sua página. As folhas de estilo são essenciais em muitos programas modernos de auto edição e processadores de texto. Este processo envolve atribuir um rótulo (nome do caractere) a um parágrafo e modificar suas propriedades. Todos os módulos marcados com este tipo terão as propriedades definidas. Este conceito se aplica não apenas aos editores do Word, mas também à web. Blocos marcados com tags HTML como H1, P, etc.

Exemplo:

A extensão das folhas de estilo normalmente são sempre “.css”

<LINK REL=”stylesheet” HREF=”estilo.css”>

Para que servem?

As folhas de estilo servem para:

-Separar melhor a parte da apresentação da estrutura;

-Controle absoluto da aparencia da página;

-Fazer com que as páginas HTML fiquem mais leves (economia de código em .html);

-Realização da manutenção de um site.

A linguagem CSS funciona agrupando elementos HTML chamados “objetos” e usando regras para definir propriedades de estilo. A simplicidade do CSS preserva a estrutura do HTML e dá aos designers muito controle sobre a aparência das telas do usuário final.

Regras Básicas

Regras declarações e seletores:

A estrutura da folha de estilos é rigorosamente composta por regras. Cada regra possui um ou mais blocos de informações que podem ser atribuídos a um ou mais seletores. Um seletor é um elemento de imagem que pode ser um descritor HTML, uma lista de descritores ou o atributo definidor de um grupo de descritores.

Exemplo:

seletores{

declarações

}

Múltiplas Declarações e Seletores

Comentários

Os comentários na folha de estilo tem a mesma sintaxe de muitas linguagens de programação:

/*Comentário no CSS*/

Valores e Unidades

Podemos usar %, px ou pt por exemplo, são os valores mais utilizados numa folha de estilos:

Cores

Podemos usar com códigos hexadecimais, RGB ou por escrita:

Estilo de Texto:

Pode ser modificado no texto seu tamanho, fonte, etc:

Espaçamento de Borda:

Posicionamento:

Listas:

Publicado em

Livro – IAI

Web Design e HTML avançado(pgs 45-58)

Imagens

As páginas HTML ainda são páginas de texto, mesmo que contenham <IMG>. O navegador carrega imagens vinculando sua localização via URL. O atributo SRC indica a localização da imagem, que pode ser um endereço absoluto ou relativo ao URL da página. URIs relativos são úteis para fazer referência a recursos no mesmo diretório.

Alinhamento de Imagens

Nós podemos alterar a orientação da imagem usando a propriedade de alinhamento ‘align‘ para centralizar, esquerda ou direita do texto.

Exemplo:

img{

….

align: ‘center’;

};

Dimensionamento

As propriedades HEIGHT e WIDTH são usadas para redimensionar a imagem.A explicação é que alterar o tamanho da imagem não alterará sua qualidade, mas afetará o desempenho de carregamento da página.

Formatação das Palavras

HTML fornece elementos para formatar elementos de texto. Elementos lógicos como <EM> (texto sublinhado) <STRONG> (maiúsculo) é uma função especial. Elementos físicos como <I> (italico) e <B> (negrito); alteram a aparência visual dos caracteres.

Exemplo:
<b>Estou em negrito</b>

<i>estou em italico</i>

<em>Estou sulbinhado</em>

Tabelas

A introdução de tabelas no HTML ver por fins de organização de informações em linhas e colunas, como qualquer tabela que conhecemos. Os principais elementos são <TABLE> (representa uma matriz), <TR> (representa uma linha), <TD> (representa uma unidade de dados <TH> (representa o cabeçalho da tabela).

Exemplo:

Elementos Estruturais de uma Tabela

Nós podemos criar tabelas simples utilizando as tags <TABLE>, <TR>, <TD>, e <TH>. Os atributos conhecidos como BORDER, CELLPADDING e CELLSPACING são muito usados no estilo das tabelas.

Largura e altura das Tabelas

Os atributos WIDTH e HEIGHT são importantes para especificar o tamanho da tabela. O uso de percentagens, px e outras unidades de valor para formatar o tamanho de cada um dos atributos torna seu design mais flexível para diferentes resoluções de tela.

Atributos de Posicionamento, Cor e Imagens de Fundo

Esta seção cobre itens relacionados à apresentação de tabelas em HTML. Se a tabela for menor que o espaço visível, o alinhamento padrão é a margem esquerda, mas também podemos usar a margem a direita, isso pode ser ajustado usando a propriedade e o valor ALIGN para ‘right’ ou ‘center’. Semelhante ao uso de imagens, HSPACE e VSPACE adicionam margens verticais e horizontais às tabelas.

Se a propriedade BACKGROUND existir, ele obterá a URL da imagem e a enviará para o final da tabela. BGCOLOR define a cor de fundo da tabela. É importante observar que as cores padrão das células e linhas são transparentes, portanto, qualquer imagem ou cor na página ficará visível em toda a tabela, a menos que funções especiais sejam usadas.

Alinhamento e Dimensionamento de Células

Tal como acontece com as tabelas, células e linhas individuais podem ter seu conteúdo ordenado usando as propriedades ALIGN e VALIGN de <​TD> e <TR>. Essas funções permitem alinhar elementos onde quiser na tabela. As células também possuem propriedades HEIGHT e WIDTH que permitem controlar a altura e a largura em pixels ou com base no tamanho da tabela.

Combinação de Células

Você pode usar as propriedades ROWSPAN e COLSPAN em <TD> ou <TH> para combinar células entre colunas e linhas. Isso possibilita a criação de tabelas mais complexas, que são mostradas com exemplos reais.

Âncoras e Vínculos

A seção sobre âncoras e vínculos aborda a criação de links em HTML. Âncoras podem ser usadas para criar destinos internos em uma página e links para recursos externos, com exemplos de uso do elemento e seus atributos HREF e NAME.

Elementos de Estilo

O elemento style é coberto por um aviso obsoleto na especificação HTML 4.0. Esta seção usa os atributos do elemento <BODY> para destacar alterações na cor de fundo, texto e links. Altere também cores e fontes com o elemento <FONT>.

Cores e Fontes

<FONT> é um elemento explorado como opção para alterar a cor, a fonte e o tamanho do texto. Embora não seja mais necessário com o advento das folhas de estilo, ainda é considerado uma alternativa para navegadores mais antigos que não suportam folhas de estilo.

Publicado em

Livro IAI

Web Design e HTML avançado(pgs 24-45)

Ferramentas de Desenvolvimento em HTML:

Nós utilizadores podemos criar páginas web com um editor de texto simples, mas para sites que exigem mais complexidade, existem muitas ferramentas de desenvolvimento. Editores visuais como por exemplo o Microsoft FrontPage, Macromedia DreamWeaver, Corel WebMaster e Adobe GoLive fornecem recursos como edição direta de código, pesquisa e substituição em todo o site, modelos e visualizações e muito mais, sem a necessidade de um navegador. Outros tipos de editores como Hot Dog, Hot Metal, HomeSite e BareBones são editores de código HTML mais simples.

Editores Gráficos:

Os editores WYSIWYG são ferramentas visuais que exibem páginas da web na tela do computador de maneira semelhante à impressão. No entanto, a fidelidade online pode variar devido à diversidade do navegador e da plataforma. Os editores gráficos de sites costumam ser WYSISWIG, e os designers precisam considerar a diversidade de ambientes na Internet.

Editores de Texto:

Existem alguns editores de texto muito conhecidos, como Windows Notepad, WordPad, EditPad, WinEdit, etc., são usados ​​para criar páginas HTML. A capacidade de salvar arquivos como texto simples é essencial. A seção afirma que você pode usar qualquer editor de texto para criar uma página HTML, desde que atenda aos requisitos de formatação.

Editores HTML:

Um editor HTML é semelhante a um editor de texto, mas com atalhos para acelerar a entrada do código HTML e evitar erros gramaticais. Editores inteligentes têm mais recursos, como visualizações integradas, definições de amostra, suporte a macro e vários arquivos de pesquisa e substituição. Algumas recomendações incluem Allaire HomeSite.

Browsers e Servidores:

Esta seção enfatiza a importância de testar suas páginas em diferentes navegadores e plataformas antes de publicar. Ele também alerta que você deve considerar versões de navegadores populares, como Netscape Communicator e Microsoft Internet Explorer. É importante testar múltiplos sistemas para garantir acessibilidade à informação, identidade visual e navegação na web.

Por que os utilizadores devem aprender HTML?

Novas ferramentas permitem criar um site sem escrever HTML, mas aprender essa linguagem é benéfico para quem deseja ter mais controle sobre o design da página, interação com outros programas e usar recursos avançados como HTML dinâmico, JavaScript e folhas de estilo. útil para HTML é considerado simples porque possui marcação de texto simples e controla a estrutura da página.

HTML

Fundamentos do HTML:

Esta seção descreve a estrutura e a sintaxe da HyperText MarkUp Language (HTML), uma linguagem declarativa que fornece estrutura a arquivos de texto, especifica a função de suas partes e vincula páginas usando sobrescritos. HTML não é uma linguagem de programação, mas sim uma marcação para formatação e criação de páginas web. Até hoje é muito popular no mundo.

TAGS :

Um ficheiro HTML é um texto que é marcado com descritores HTML que descrevem a estrutura da página. Os elementos HTML são definições iniciais e finais que circundam o texto exibido e determinam sua função. Alguns elementos podem conter outros blocos e a ordem de fechamento deve ser considerada. Além disso, alguns elementos, como parágrafos, não requerem definições finais.

Atributos:

Alguns elementos podem ou não ter componentes que podem alterar a aparência do texto exibido ou fornecer informações adicionais. A sintaxe básica é propriedade=”valor”. A ordem dos elementos não é importante, aparece apenas na primeira imagem do item.

Caracteres “<>”:

Com os caracteres “<>”, não é possível imprimir diretamente na tela do navegador com uma sequência de escape que inclua “&”. Um código numérico para caracteres especiais. Editores inteligentes podem gerar essas strings automaticamente, mas é importante digitá-las corretamente para que sejam exibidas corretamente no navegador.

Comentarios:

Em HTML, seu código pode incluir comentários, elementos que os navegadores ignoram. Para isso, utilizamos os símbolos <!– para iniciar o diálogo e os símbolos –>, fecha. Esta informação não é visível na página renderizada, por isso é útil para adicionar notas ou comentários ao seu código.

Estrutura Básica do Documento HTML:

A estrutura básica de uma página HTML segue uma estrutura hierárquica que consiste em HTML e HEAD. O primeiro elemento <HTML>, representa o início e o fim do arquivo. Dentro está o cabeçalho (<HEAD>), que contém informações como títulos, fontes e scripts, e o corpo (<BODY>), que contém todas as informações visíveis na página.

Cabeçalho (HEAD):

<TITLE>: Obrigatório no cabeçalho e define o título da página que aparece na barra de título do navegador e linhas diretas/índices.

<META>;: Usado para inserir meta informações, como palavras-chave, descrição, etc. Também pode ser usado para adicionar ou definir cabeçalhos HTTP.

<LINK>: vincula uma página a outro recurso, como uma planilha de imagens. É amplamente utilizado para melhorar a indexação e gerenciamento de sites.

<BASE>: Você pode definir o URL base para imagens e links alterando a fonte e os links na janela.

Corpo (BODY):

Bloco marcado com <BODY> </BODY> contém informações visíveis sobre a página. Este bloco contém muitos elementos diferentes, incluindo parágrafos, cabeçalhos, linhas, imagens e muito mais.<BLOCKQUOTE>: Utilizado para dar destaque a blocos de citação em um texto. Atualmente, é comum o uso de folhas de estilo para o mesmo propósito.

Elementos de Texto e Formatação

<BLOCKQUOTE>: Utilizado para dar destaque a blocos de citação em um texto. Atualmente, é comum o uso de folhas de estilo para o mesmo propósito.

<PRE>: Preserva a formatação original de um bloco de texto, considerando espaços, tabulações e novas-linhas. É útil quando se deseja manter um formato específico.

<DIV>: Este elemento é usado para criar divisões na página, permitindo a aplicação de estilos diferentes a seções específicas

Lista Não-Ordenada:

Lista Ordenada

Lista de Definições:

Publicado em

Livro – IAI

Web Design & HTML Avançado (pgs 13-24)

O seguinte resumo discute o conceito de web design, destacando sua evolução ao longo dos anos. O web design moderno, originalmente associado à programação e codificação, prioriza o conhecimento visual e criativo em vez do HTML. O planeamento estratégico, a compreensão das possibilidades e limitações da rede e a procura de um equilíbrio entre os obstáculos técnicos e a criatividade são cruciais. O desenvolvimento da Internet foi contextual, desde a criação da ARPANET até o surgimento da World Wide Web (WWW) e do Mosaic, que revolucionaram o acesso à informação. Ao contrário dos meios de comunicação tradicionais, a Internet é uma forma democrática de comunicação que permite a qualquer pessoa publicar informação.

São explicadas as diferenças entre a Internet e a WWW, enfatizando a importância do protocolo de comunicação TCP/IP e do Serviço de Nomes de Domínio (DNS). O papel das portas na Internet e a variedade de serviços fornecidos, como FTP, e-mail e acesso à Web, são discutidos. O surgimento da WWW como serviço de hipertexto proporcionou uma experiência não linear de navegação e acesso à informação. Por fim, a plataforma Web é definida como um sistema baseado no protocolo HTTP, envolvendo servidores Web, navegadores e o próprio protocolo. O conceito de hipertexto é explicado como base para a navegação não linear na web. O texto destaca a transformação dos navegadores modernos em clientes universais para diversos serviços de Internet, solidificando a transformação da web em um meio de comunicação versátil e democrático.

O HTML passou por diversas versões ao durante anos, cada uma introduzindo novos recursos e melhorias. As versões mais notáveis ​​incluem HTML 2.0, HTML 3.2, HTML 4.01, XHTML 1.0, HTML5 e atualizações seguintes de HTML5. HTML5 é a versão mais recente e amplamente adotada, trazendo melhorias significativas com suporte a multimídia nativa, elementos semânticos e maior interoperabilidade entre navegadores. 1.4.3. CSS (folhas de estilo em cascata) CSS, assim como HTML, desempenha um papel vital na formatação e renderização de páginas da web. As folhas de estilo em cascata são um conjunto de regras que definem o estilo visual de um documento HTML. HTML cuida da estrutura e marcação do conteúdo, enquanto CSS controla layout, cores, fontes e outros aspectos visuais.

Com a utilização do CSS, os webdesigners conseguem separar o estilo do código html, isso é um processo muito fácil e muito utilizado para a atualização e a consistência visual num website qualquer. Ao inves de ser inseridos estilos nas tags do HTML , o CSS permite que os estilos sejam especificados em um ficheiro separado mas na mesma pasta site.

Exemplo:

No exemplo acima, o estilo está a ser utilizado para definir a fonte de letra, a cor do background do corpo da página, cor do título da página e a margem de texto.

XML (Extensible Markup Language)

O XML é uma tecnologia essencial na plataforma web, contudo, possui uma finalidade diferente do HTML. Enquanto o HTML é utilizado para estruturar informações destinadas à apresentação, o XML foi concebido para representar dados de maneira organizada e facilmente interpretável por máquinas. Com o XML, é possível criar documentos com marcações personalizadas, definidas pelo usuário, o que confere a ele uma alta flexibilidade. Essa tecnologia é amplamente empregada na troca de dados entre sistemas heterogêneos e como formato de armazenamento para configurações e metadados.

Exemplo:

XSL (Extensible Stylesheet Language)

A linguagem XSL é utilizada em conjunto com o XML para transformar e estilizar documentos XML. É oferecido um conjunto de instruções para definir como os dados XML devem ser apresentados ou transformados em outros formatos, como HTML ou PDF.

Os desenvolvedores empregam folhas de estilo XSL para descrever as transformações que devem ser aplicadas nos documentos XML. Dessa forma, torna-se possível a criação de visualizações personalizadas ou a conversão de dados em diferentes formatos de saída.

Tecnologias Interativas

Além das tecnologias de apresentação, a plataforma web abarca diversas tecnologias interativas que permitem o desenvolvimento de aplicativos dinâmicos e interativos. Essas tecnologias podem ser divididas em dois grupos principais: aquelas que são executadas no lado do servidor e aquelas que são executadas no lado do cliente.

HTML(HyperText Markup Language)

O HTML , originalmente desenvolvido por Tim Berners-Lee , viu sua popularidade aumentar com a expansão da Web, especialmente através do navegador NCSA Mosaic. Com o surgimento de vários navegadores que utilizavam HTML para navegar na Web, grupos de trabalho foram formados para padronizar as especificações do HTML. A versão 2.0 do HTML, finalizada em 1995, tornou-se a primeira a ser recomendada pelo IETF – Força-Tarefa de Engenharia da Internet, estabelecendo-se como um padrão da Internet. Essa versão era mais simples e definia a estrutura da página, mas não detalhava a apresentação gráfica. Durante o desenvolvimento do HTML 3.0, a Web estava se expandindo rapidamente, e os esforços de padronização não conseguiram acompanhar a demanda do mercado por recursos avançados de apresentação gráfica.

Publicado em

Livro IAI – Introdução ao HTML

Páginas 33-48(fim)

Resumo: Hiperligações, Cores no HTML, Fundos de Ecrã, Formatação de Texto, e Tabelas em HTML

Introdução: A essência da Internet reside na capacidade de estabelecer conexões entre informações, formando uma teia de conhecimento através de hiperligações. A World Wide Web utiliza URLs para identificar o destino dessas hiperligações, essenciais para o HTML. Este resumo abordará aspectos como hiperligações locais e na web, controle de cores em HTML, fundos de ecrã, formatação de texto e tabelas.

1. Hiperligações: O poder da Internet é evidenciado pelas hiperligações, que conectam informações. URLs identificam o destino, e âncoras são usadas para criar links. Hiperligações locais podem referenciar documentos na mesma pasta, incluindo imagens como links. Para acessar documentos em pastas diferentes, ajusta-se a sintaxe.

Exemplos:

  • Hiperligação local: <a href="ficheiro.html">texto do link</a>
  • Imagem como hiperligação: <a href="index.htm"><img src="elef1.jpg" alt="Elefantes"></a>
  • Referência a documentos em pastas: <a href="imagens/nome da imagem.gif">imagem numa pasta abaixo</a>

2. Hiperligações para Documentos Online: Ligações para documentos online utilizam URLs. Exemplo: <a href="http://www.uevora.pt"><b>Universidade de Évora</b></a>

3. Controlo de Cores no HTML: A web suporta mais de 161 milhões de tons de cor. A paleta básica contém 16 cores, e CSS é preferido para formatação. A mistura de cores RGB cria uma variedade, mas é recomendado o uso de “cores seguras do navegador.” Exemplos incluem a representação hexadecimal e nomes de cores.

4. Fundos de Ecrã: O fundo pode ser uma cor sólida ou uma imagem texturizada. Utiliza-se <body bgcolor="#YYYYYY"> para cor sólida. Cores e texturas podem ser controladas através de atributos.

Exemplos:

  • Cor de fundo: <body bgcolor="#YYYYYY" text="#YYYYYY" link="#YYYYYY" vlink="#YYYYYY">
  • Imagem de fundo: <body background="ficheiro_bg.gif">

5. Formatação de Texto: Texto pode ser formatado em tamanho, cor e tipo de letra. A tag <font> é utilizada para alterar tamanho e cor, enquanto o tipo de letra é ajustado com <font face="nome da fonte">.

Exemplos:

  • Tamanho da letra: <font size=5 color="navy">Texto</font>
  • Tipo de letra: <font face="arial">Letra Arial</font>

6. Tabelas: As tabelas em HTML oferecem estrutura e layout. A estrutura básica inclui linhas e células. A formatação pode ser ajustada com atributos como colspan, rowspan e cabeçalhos de colunas.

Exemplo:

htmlCopy code<table border=1>
  <tr>
    <th>COLUNA A</th>
    <th>COLUNA B</th>
    <th>COLUNA C</th>
  </tr>
  <tr>
    <td>Linha 1 coluna 1</td>
    <td>Linha 1 coluna 2</td>
    <td>Linha 1 coluna 3</td>
  </tr>
  <!-- ... outras linhas ... -->
</table>

Conclusão: Este resumo abordou aspectos cruciais do HTML, destacando o poder das hiperligações na Internet, a diversidade de controle de cores, opções de fundos de ecrã, formatação de texto e a versatilidade das tabelas para organizar informações em páginas web. Ao compreender esses elementos, os desenvolvedores podem criar conteúdo mais rico e interativo na web.

Publicado em

Livro IAI – Introdução ao HTML

Resumo Páginas 23-32

3.5.2 Caracteres Especiais em HTML

Além do copyright, HTML possui uma variedade de caracteres especiais para representar símbolos, acentuações e outras entidades. Por exemplo:

  • “<” representa “<” (menor que).
  • “>” representa “>” (maior que).
  • “&” representa “&” (e comercial).
  • ” ” representa um espaço não quebrável.

Exemplo 3: Utilizando Caracteres Especiais para Símbolos Matemáticos

Considere a expressão matemática “a < b + c.” Para exibir isso corretamente em HTML, usamos:

htmlCopy codea &lt; b + c

4. Imagens e Gráficos

4.1 Diferenças entre os formatos dos gráficos

Existem três formatos comuns para gráficos na web: GIF, JPEG e PNG. Cada formato tem suas particularidades e aplicações específicas, principalmente relacionadas à compressão de imagens para transmissão na internet.

4.1.1 O formato GIF

O formato GIF é adequado para desenhos, botões e gráficos com poucas cores. Ele utiliza o algoritmo de compressão LZW para reduzir o tamanho da imagem.

4.1.2 O formato JPEG

O formato JPEG é ideal para fotografias devido à sua ampla gama de cores. Utiliza um algoritmo complexo para comprimir imagens, removendo cores de partes menos perceptíveis.

4.1.3 O formato PNG

O formato PNG combina as melhores qualidades de GIF e JPEG, sendo considerado por alguns como o formato futuro.

Exemplo 4: Aplicação de Diferentes Formatos de Imagens

Considere uma situação em que temos um desenho (GIF), uma fotografia (JPEG) e um gráfico com transparência (PNG) em uma página HTML:

htmlCopy code<img src="desenho.gif" alt="Desenho animado">
<img src="foto.jpg" alt="Fotografia de paisagem">
<img src="grafico.png" alt="Gráfico com transparência">

4.2 Inclusão de Imagens numa Página Web

Em HTML, há diversas formas para inserir e controlar a posição de imagens numa página. Uma abordagem comum é a utilização de elementos <img>.

4.2.1 Imagens do Tipo INLINE

Uma imagem do tipo inline é aquela que se posiciona entre o texto de uma página.

htmlCopy code<p>
  <img src="imagem1.jpg" alt="Descrição da imagem 1">
  Texto associado à imagem 1.
</p>
<p>
  <img src="imagem2.jpg" alt="Descrição da imagem 2">
  Texto associado à imagem 2.
</p>

4.2.2 Definição do Tamanho de uma Imagem

O tamanho de uma imagem pode ser parametrizado através dos atributos height e width. Estes atributos não modificam o tamanho do arquivo, mas afetam o espaço ocupado na página.

htmlCopy code<img src="imagem3.jpg" alt="Descrição da imagem 3" height="200" width="300">

4.2.3 Alinhamento das Imagens Relativamente ao Texto

Para controlar o arranjo do texto em relação à imagem, utiliza-se o atributo align com os valores left ou right.

htmlCopy code<img src="imagem4.jpg" alt="Descrição da imagem 4" align="left">
Texto alinhado à direita da imagem.

4.2.4 Alinhamento Vertical

O alinhamento vertical de uma imagem pode ser controlado com os valores “top”, “middle” e “bottom”.

htmlCopy code<img src="imagem5.jpg" alt="Descrição da imagem 5" align="top">
Texto com alinhamento superior à imagem.

4.2.5 Imagem Sem Texto

Quando uma imagem é independente do texto, cria-se um parágrafo isolado.

htmlCopy code<p align="center">
  <img src="imagem6.jpg" alt="Descrição da imagem 6">
</p>

4.2.6 Formatações Adicionais para Imagens do Tipo INLINE

4.2.6.1 Legenda Alternativa à Visualização da Imagem

Adicionar a legenda alternativa é fundamental para casos em que a imagem não pode ser exibida.

htmlCopy code<img src="imagem7.jpg" alt="Descrição da imagem 7" title="Legenda da imagem 7">
4.2.6.2 Adicionar uma Bordadura à Imagem

Para adicionar uma bordadura a um gráfico, utiliza-se o atributo border.

htmlCopy code<img src="imagem8.jpg" alt="Descrição da imagem 8" border="5">
4.2.6.3 Imagens Responsivas

Tornar as imagens responsivas é crucial para uma experiência consistente em diferentes dispositivos.

htmlCopy code<img src="imagem9.jpg" alt="Descrição da imagem 9" class="imagem-responsiva">

CSS:

cssCopy code.imagem-responsiva {
  max-width: 100%;
  height: auto;
}
4.2.6.4 Galeria de Imagens

Criar uma galeria de imagens pode ser alcançado com facilidade usando listas e CSS.

htmlCopy code<ul class="galeria">
  <li><img src="foto1.jpg" alt="Foto 1"></li>
  <li><img src="foto2.jpg" alt="Foto 2"></li>
  <li><img src="foto3.jpg" alt="Foto 3"></li>
</ul>

CSS:

cssCopy code.galeria {
  list-style: none;
  display: flex;
}

.galeria li {
  margin: 10px;
}
4.2.6.5 Efeitos de Hover

Adicionar efeitos de hover às imagens pode tornar a experiência mais interativa.

htmlCopy code<img src="imagem10.jpg" alt="Descrição da imagem 10" class="efeito-hover">

CSS:

cssCopy code.efeito-hover:hover {
  opacity: 0.8;
  transition: opacity 0.5s ease-in-out;
}

Estes exemplos adicionais demonstram a versatilidade e aplicação prática dos conceitos discutidos anteriormente. A próxima seção continuará explorando

Publicado em

Livro IAI – Introdução ao HTML

Resumo: Páginas 18-23

Introdução:

Quando se trata de criar páginas da web, a organização e a apresentação de informações desempenham um papel fundamental. As listas em HTML são uma ferramenta essencial para estruturar o conteúdo de forma clara e hierárquica. Elas permitem que os desenvolvedores organizem dados, instruções, tópicos e muito mais, tornando a experiência de leitura mais amigável para os visitantes do site.

Criar uma lista de itens ordenada ou não ordenada no HTML - DEV Community

Existem dois tipos principais de listas em HTML: listas não-numeradas e listas numeradas. As listas não-numeradas são usadas quando a ordem dos itens não é relevante, enquanto as listas numeradas são ideais para representar informações em uma ordem específica.

Nesta exploração mais profunda, abordaremos como criar e personalizar listas em HTML, incluindo a aninhamento de listas, tipos de numeração, listas numeradas mistas e o uso de caracteres especiais para garantir que os símbolos especiais sejam renderizados corretamente no contexto da página da web.

A compreensão desses conceitos é fundamental para qualquer desenvolvedor web, uma vez que as listas desempenham um papel crucial na estruturação de conteúdo e na criação de interfaces de usuário intuitivas. Vamos explorar cada um desses tópicos com mais detalhes para que você possa tirar o máximo proveito das capacidades de formatação em HTML.

Listas em HTML: Estrutura Hierárquica de Conteúdo

Quando se trata de estruturar informações em uma página da web, as listas desempenham um papel crucial. Elas permitem organizar informações de forma clara e hierárquica. No HTML, existem dois principais tipos de listas: listas não-numeradas e listas numeradas.

jQuery [AULA 3] – Seletores: Compostos, filtros básicos e conteúdo | Desenvolvimento Web Prático!

Listas Não-Numeradas com Vários Níveis

As listas não-numeradas são usadas quando a ordem dos itens não é relevante. No entanto, às vezes, é necessário criar uma estrutura hierárquica, onde você tem itens principais e itens secundários. Para fazer isso, você pode aninhar listas uma dentro da outra. Vamos aprofundar isso com um exemplo mais complexo:

Neste exemplo, você tem uma lista não-numerada que contém dois itens principais. Cada item principal é, por sua vez, uma lista não-numerada aninhada contendo subitens. Isso cria uma estrutura clara e organizada, frequentemente usada em menus de navegação e conteúdo de sites.

Listas Numeradas

As listas numeradas são usadas quando você precisa representar informações em uma ordem específica, como uma sequência de etapas em um tutorial. O HTML fornece várias opções para tipos de numeração, como números árabes, letras maiúsculas e minúsculas e números romanos. Vamos explorar cada um deles:

Números Árabes (Padrão)

Neste caso, a lista numerada usa números árabes como padrão, começando com “1”.

Letras Minúsculas

Aqui, utilizamos letras minúsculas como tipo de numeração.

Letras Maiúsculas

O tipo “A” representa letras maiúsculas na lista numerada.

Números Romanos Minúsculos

Este exemplo usa números romanos minúsculos como tipo de numeração.

Números Romanos Maiúsculos

O tipo “I” representa números romanos maiúsculos.

Listas Numeradas com Início Personalizado

Além de escolher o tipo de numeração, você pode definir o valor inicial da numeração. Por exemplo, se você deseja começar a lista numerada a partir do número 5:

Isso é útil quando você deseja iniciar a enumeração em um número específico, em vez de 1.

Listas Numeradas Mistas

Você pode criar listas numeradas com diferentes tipos interligados, criando hierarquias mais complexas. Isso é útil em casos onde você precisa de níveis de enumeração diferentes. Um exemplo disso pode ser uma lista de capítulos, cada um com subitens numerados:

Essa técnica é útil para criar documentos estruturados, como manuais ou livros online.

Utilização de Caracteres Especiais

No HTML, caracteres especiais ou entidades são usados quando você precisa representar caracteres que não podem ser digitados diretamente no teclado ou têm significados especiais em HTML. Eles sempre começam com “&” e terminam com “;”. Alguns exemplos comuns incluem:

  • “<” para “<” (menor que).
  • “>” para “>” (maior que).
  • “&” para “&” (e comercial).
  • “©” para o símbolo de direitos autorais (©).

Ao usar entidades, você garante que o navegador interprete esses caracteres como texto em vez de comandos HTML.

Conclusão: A Importância das Listas em HTML

As listas em HTML são uma das estruturas fundamentais que permitem aos desenvolvedores da web organizar e apresentar informações de maneira lógica, clara e hierárquica. Elas desempenham um papel vital na usabilidade, acessibilidade e estética de um site. Vamos explorar mais a fundo a importância das listas em várias áreas.

  1. Usabilidade e Legibilidade:Ao utilizar listas, os desenvolvedores podem simplificar a experiência do usuário. Listas numeradas podem ser usadas para criar sequências lógicas, como tutoriais passo a passo, simplificando a compreensão do conteúdo. Listas não-numeradas ajudam a agrupar informações relacionadas, tornando o texto mais legível e fácil de escanear.
  2. Acessibilidade:As listas em HTML desempenham um papel fundamental na criação de sites acessíveis. Leitores de tela usados por pessoas com deficiências visuais podem interpretar listas corretamente, fornecendo uma navegação mais eficaz e compreensão do conteúdo. Isso faz com que o conteúdo da web seja inclusivo e acessível a todos.
  3. Estrutura Hierárquica:Listas aninhadas permitem a criação de estruturas hierárquicas complexas. Isso é crucial para representar informações de forma organizada, como em um índice de livro, onde capítulos, seções e subseções são claramente delineados. Essa estrutura hierárquica melhora a compreensão do conteúdo.
  4. Variedade de Estilos:Listas numeradas podem ser personalizadas de várias maneiras. Além dos tipos de numeração padrão (números árabes, letras, números romanos), você pode definir valores iniciais e estilizar a apresentação para se adequar ao design do seu site. Isso oferece flexibilidade na criação de listas únicas e atraentes.
  5. Caracteres Especiais e Entidades:Além das listas, as entidades HTML desempenham um papel fundamental na apresentação de caracteres especiais. Ao usar entidades como “<“, “>” e “©”, os desenvolvedores garantem que esses caracteres sejam exibidos corretamente e não confundam o navegador, evitando a interpretação incorreta como comandos HTML.
  6. Melhoria na Organização de Conteúdo:A organização eficaz de informações é crucial para qualquer site. As listas oferecem uma estrutura clara que ajuda os visitantes a navegar e absorver o conteúdo de maneira eficaz. Ao criar listas de conteúdo, você está facilitando a vida dos leitores, permitindo que eles localizem informações importantes rapidamente.

Em resumo, as listas em HTML são uma ferramenta essencial para todos os desenvolvedores web. Elas desempenham um papel vital na estruturação do conteúdo, tornando-o mais compreensível, acessível e atraente. O entendimento desses conceitos é crucial para criar sites de alta qualidade, independentemente de serem simples blogs ou páginas de aplicativos complexos. Aprofundar o conhecimento sobre o uso de listas e entidades HTML é um passo importante para melhorar a qualidade geral do conteúdo da web.

Publicado em

Livro IAI – Introdução ao HTML

Resumo: Páginas 11-18

Neste conteúdo, são abordados diversos aspectos relacionados às etiquetas básicas do HTML.

As etiquetas básicas do HTML desempenham um papel fundamental na criação de páginas da web estruturadas e bem formatadas. A importância dessas etiquetas reside em várias áreas:

.Estruturação do Conteúdo;

.Acessibilidade;

.Legibilidade;

.Marcação Estrutural;

.SEO (Otimização para Mecanismos de Busca);

.Consistência;

.Facilidade de Manutenção

.Compatibilidade;

-Títulos(Headings)

Os cabeçalhos desempenham um papel fundamental na estruturação do conteúdo de uma página da web. O HTML oferece seis níveis de cabeçalhos, de <h1> a <h6>, onde <h1> representa o nível mais alto e <h6> o nível mais baixo. Eles são usados para indicar a hierarquia das seções em um documento, o que é crucial para a acessibilidade e a organização do conteúdo. É importante observar que a formatação específica dos cabeçalhos pode variar dependendo do CSS aplicado ao documento, mas sua função principal é de hierarquizar o conteúdo.

Headings

-Divisão do Texto

No HTML o texto pode ser dividido de 4 maneiras possíveis:

Espaçamento entre palavras: No HTML, os espaços em branco adicionais são ignorados, o que significa que múltiplos espaços consecutivos são tratados como um único espaço em branco. Para forçar a exibição de múltiplos espaços, a entidade &nbsp; pode ser usada.

OBS: Em algumas páginas podem reparar que tem muitos espaçamentos desses, se quiser verificar isso em sites, pressione “Ctrl+U” e irá exibir o código fonte dá página do site.

Espaços

Parágrafos: A tag <p> é usada para criar parágrafos. Ela não apenas insere uma linha em branco, mas também inicia um novo parágrafo, tornando o texto mais legível e organizado. Lembre-se de que, em HTML, é uma prática recomendada sempre fechar as tags que são abertas.

Parágrafo

Linhas horizontais: A tag <hr> é útil para separar claramente diferentes seções de um documento. Ela insere uma linha horizontal e não possui uma tag de fechamento correspondente. Pode ser personalizada com atributos como size e width.

Linha

Nova linha: A tag <br> força uma quebra de linha, mas não inicia um novo parágrafo. Ela é usada quando se deseja adicionar uma nova linha no meio de um texto sem criar um novo parágrafo. Essta tag não precisa de ser fechada, assim como <hr> também não precisa.

-Estilos no Texto

  • Formatações Básicas: O HTML oferece formatações básicas de texto, como itálico (<i>), negrito (<b>), e sublinhado (<u>). Embora esses elementos ainda sejam usados em alguns casos, é importante ressaltar que o HTML é principalmente destinado à marcação estrutural e não à formatação. A formatação mais avançada é geralmente aplicada por meio de folhas de estilo CSS, permitindo um controle mais preciso do design.
Formatações Básicas

-Formatação de Listas

Listas não-numeradas: As listas não numeradas são frequentemente usadas para apresentar informações em itens de lista com marcadores. A tag <ul> é usada para criar esse tipo de lista, e cada item da lista é definido com a tag <li>. Pode-se personalizar a aparência dos marcadores de lista usando o atributo type.

Lista não-numerada

Publicado em

Livro IAI – Introdução ao HTML

Resumo Páginas 4-10:

O HTML (HyperText Markup Language) é uma linguagem de marcação estruturada que utiliza etiquetas para instruir um navegador sobre como renderizar uma página da web. Essas etiquetas estão contidas em arquivos de texto simples, sem formatação especial. Existem quatro conceitos fundamentais no HTML: elementos, etiquetas ou tags, atributos e valores, e aninhamento (nesting).

OBS: HTML não é uma linguagem de programação.

  • Elementos: São componentes essenciais em páginas HTML, que atuam como contêineres para seções de uma página. Tudo dentro de um elemento herda suas características.

Exemplos:

<p>Paragrafo</p> <h1>Título</h1>

<ul><li>Lista nao ordenada</li></ul>

<ol><li>Lista ordenada</li></ol>

Etiquetas ou tags: São usadas para marcar elementos no HTML. Cada elemento possui uma etiqueta de abertura (<tag>) e uma de fechamento (</tag>), com o conteúdo entre elas.

Atributos e valores: Atributos são usados para definir as características de um elemento, inseridos na etiqueta de abertura. Valores são atribuídos aos atributos usando um sinal de igual (=) e aspas.

Aninhamento (Nesting): Elementos HTML devem ser aninhados corretamente, evitando sobreposição. O aninhamento adequado garante que os elementos sejam independentes uns dos outros.

A estrutura básica de um programa HTML inclui elementos como <html>, <head>, <title>, <body>, e comentários. Um documento mínimo em HTML segue essa estrutura.

Exemplo:

Para criar uma página HTML, é possível usar editores de texto simples, como o Notepad, onde as etiquetas HTML são escritas manualmente. Para visualizar a página em um navegador, salve o arquivo com uma extensão .htm ou .html e abra-o no navegador.

Um editor muito bom para utilizar hoje em dia é o VS Code, pois é muito prático e muito fácil de se utilizar, muitas empresas trabalham com esse editor para desenvolvimentos de websites e aplicações móveis.

A página HTML básica serve como um ponto de partida para a criação de páginas da web mais complexas, e os elementos essenciais incluem <html>, <head>, <title>, <body>, e a capacidade de adicionar comentários.

Resumindo, o HTML é uma linguagem que permite criar páginas da web estruturadas usando etiquetas e elementos específicos, e um editor de texto simples, como o Notepad, ou editor mais profissional como o VS Code podem ser usados para a criação de páginas HTML.