Índice
HTML (HyperText Markup Language) ou linguagem de marcação de hipertexto, é o padrão utilizado para o desenvolvimento de páginas web, é uma linguagem baseada em tags que estrutura as informações com base na hierarquia de conteúdo. Por si só, o HTML não confere características gráficas à informação apresentada, apenas a organiza de forma que tenha uma ordem de leitura lógica.Por outro lado CSS (Cascading Style Sheet) ou cascading style sheets é uma linguagem utilizada para definir e criar a apresentação de um documento estruturado escrito em HTML, é responsável por formular a especificação das folhas de estilo que servirão de padrão para os navegadores.
Neste tutorial iremos apresentar a estrutura básica de um documento HTML5, os rótulos mais populares e a ordem hierárquica para declará-los. Por sua vez, explicaremos a relação entre HTML5 e CSS3, a forma como podem se relacionar, a estrutura das declarações feitas em CSS3 e os atributos gráficos que eles podem dar ao documento HTML.
Para os exemplos que vamos realizar, é necessário ter um editor de código, no nosso caso o editor selecionado é Dreamweaver CC 2014, no tutorial Dreamweaver CS6 Basics: Conhecendo o ambiente de trabalho as características da aplicação são descritas que permanecem as mesmas apesar da diferença em suas versões
1. Estrutura de um documento HTML5
B) Indica a abertura de um documento HTML, é a primeira tag a ser declarada.
C) Você pode incluir um título para o documento, scripts, estilos, meta-informações, entre outros.
D) Fornece metadados sobre o documento HTML. Os metadados não serão exibidos na página, apenas serão analisados como informações anexadas. Os elementos são normalmente usados para especificar a descrição da página, palavras-chave, autor do documento entre outros. No exemplo mostrado na imagem, usamos o atributo charset para definir o conjunto de caracteres em que a página será exibida, charset = "utf-8" no caso do idioma espanhol.
E) Ele nos permite atribuir o nome da página que será exibida nos navegadores.
F) A grande maioria das tags em HTML precisa de uma declaração de abertura e uma declaração de fechamento:
Conteúdo da etiquetaNeste caso, a imagem mostrada está fechando a tag head com
G) Tudo dentro deste elemento será mostrado pelo navegador, ou seja, dentro desta tag iremos designar todo o conteúdo visual do nosso documento HTML.
H) Da mesma forma como explicado na seção F este é o fechamento da tag
EU) Da mesma forma como explicado na seção F este é o fechamento da tag
Estrutura de um documento CSS3
B) #Id: as declarações que começam com o sinal de sustenido indicam que é do tipo ID. Ambas as classes e IDs são usados para especificar quais atributos gráficos queremos dar ao nosso conteúdo HTML. No entanto, as diferenças entre esses 2 tipos de afirmações são as seguintes:
IDs são únicos:
- Cada elemento pode ter apenas um ID.
- Cada página pode ter apenas um elemento com esse ID.
Nosso código HTML não passará na validação se o mesmo ID for usado em mais de um elemento.
As aulas não são exclusivas:
- A mesma classe pode ser usada em vários elementos.
- Você pode usar várias classes no mesmo elemento.
Qualquer estilo que precise ser aplicado a vários objetos em uma página deve ser feito com uma classe. É importante mencionar que tudo o que é declarado em documentos CSS diferencia maiúsculas de minúsculas.
C) {Chave de abertura que inicia a declaração dos atributos.
D) } Chave que fecha as declarações feitas a uma classe ou ID.
E) Estrutura de atributos: após declarar um atributo é necessário especificar seu valor, no exemplo mostrado na imagem estamos atribuindo uma altura de 600 pixels a #Id.
Para separar os atributos e seus valores, um ponto e vírgula é usado; conforme ilustrado na imagem.
Estas são, de forma simples, as características gerais da estrutura de um código HTML, as etiquetas necessárias e como solicitá-las. Em caso de CSS os tipos de declarações e sua estrutura geral. Com este conhecimento estaremos prontos para fazer nosso primeiro HTML e dar às etiquetas características gráficas.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
