# Introdução ao HTML e ao CSS ## HTML e CSS: ### HTML: HTML significa HyperText Markup Language → Não é uma linguagem de programação, mas sim uma linguagem de marcação, utilizada para que navegadores (chrome, firefox, Explorer, opera) interpretem suas marcações e transforme na página que será visualizada. #### DOM → Document Object Model Basicamente a estruturação de documentos Web (o padrão de formato). Estruturado em 3 partes principais: Doctype, Head, Body #### TERMOS COMUNS EM HTML * ELEMENTS Designações. Definem a estrutura e o conteúdo em uma página. Identificados entre "<" e ">" Exemplo: * TAGS A utilização dos símbolos "<" e ">" ao redor do elemento criam a tag. As tags mais comuns são abertas e fechadas em pares. ```markup

Temos acima a abertura da tag div (divisão) e abaixo o fechamento da tag.

``` * ATRIBUTOS Propriedades que providenciam maiores informações acerca do elemento. ```markup Clique aqui para acessar um site qualquer |-----> atributo da tag 'a' (âncora) ``` ### ESTRUTURAÇÃO DO HTML ```markup Hello, World!

Hello, my World!

Isso vai aparecer no site.

``` ### SEMÂNTICA Prática de fornecer conteúdo, sentido e estrutura, utilizando o elementos ideais para cada caso. Desconsidera questões visuais, avaliando a estrutura semântica da página por meio de seus elementos. ### ARQUITETURA DE UM HTML ![arch-html](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc0dcde4c-7f66-4a8d-b820-4b70ae285c88%2Farch-html.png?table=block\&id=6a7acac2-819f-4e9a-8684-9af2b8f90dac\&width=770\&userId=6b906191-3739-42ff-bcbd-5448632e5695\&cache=v2) Outro elemento importante é o nav: ```markup ``` ### CSS: CSS significa Cascading Style Sheets. Utilizado em conjunto com as outras linguagens HTML e JS, conferindo um conjunto de estilos como propriedades de cada elemento desejado na página HTML. ### TERMOS COMUNS EM CSS * SELETOR Seleciona qual elemento (s) está sofrendo alteração em seu estilo. Pode sofrer especificações, identificando elementos específicos elementos específicos (id, nomes, classes). * PROPRIEDADES Estilos adicionados ao elemento selecionado * VALOR Comportamento da propriedade ```css |--> SELETOR p { |--> PROPRIEDADE color : orange; font-size : 12px; |-->VALOR } ``` ### REFINANDO OS SELETORES * TYPE Seleção por tipo do elemento ```css div {...} Todo elemento com tag

``` * CLASSE Selecionamos elementos a partir de sua classe ```css div.suaclasse { ... } .suaclase { ... } ``` Exemplo 1: elementos com tag e classe "suaclasse". Exemplo 2: elementos de qualquer tag, com classe "suaclasse". OBS .: podemos determinam um objeto no HTML com várias classes, de modo a modularizar a escolha de estilo: ```markup ... ... ``` Neste caso, temos uma classe comum (btn), na qual a fonte de tamanho 16 pixels será padrão. Depois temos 2 especificações de modo a individualizar as outras 2 "sub-classes" ```css .btn { font-size: 16px; } .btn-danger { background: red; } .btn-success { background: green; } ``` * ID Selecionamos, especificamente, um elemento a partir do seu ID. ```css div#seuID { ... } #seuID { ... } ``` Exemplo 1: elemento com tag e id "seuID". Exemplo 2: elemento de qualquer tag, com id "seuID". ### REFERENCIANDO O CSS NO HTML Dentro do HTML ```markup ``` ## Referência: * [Web Development](https://www.notion.so/WEB-DEVELOPMENT-5ea22e21aa9f47758e9cbecb2711a92c) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://gitbook.ganeshicmc.com/web/semana-1/03_html_css.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.