Scribd Logo
Carica

Benvenuto in Scribd!

  • HTML Resumao

    Caricato da

    parhaas
    30 visualizzazioni3 pagine
    O documento explica as principais tags e comandos do HTML para estruturar páginas web, como <head>, <body>, <title>, <img>, <a>, <p>, <div>, <table>, <tr>, <td>, entre outros. Também apresenta os conceitos básicos do CSS para estilizar páginas, como seletores, propriedades, valores e unidades como em, px. Por fim, explica brevemente conceitos de programação como variáveis, operadores lógicos e números.

    Descrizione originale:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    DOCX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    O documento explica as principais tags e comandos do HTML para estruturar páginas web, como <head>, <body>, <title>, <img>, <a>, <p>, <div>, <table>, <tr>, <td>, entre outros. Também apresenta os conceitos básicos do CSS para estilizar páginas, como seletores, propriedades, valores e unidades como em, px. Por fim, explica brevemente conceitos de programação como variáveis, operadores lógicos e números.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    30 visualizzazioni3 pagine

    HTML Resumao

    Caricato da

    parhaas
    O documento explica as principais tags e comandos do HTML para estruturar páginas web, como <head>, <body>, <title>, <img>, <a>, <p>, <div>, <table>, <tr>, <td>, entre outros. Também apresenta os conceitos básicos do CSS para estilizar páginas, como seletores, propriedades, valores e unidades como em, px. Por fim, explica brevemente conceitos de programação como variáveis, operadores lógicos e números.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 3

    HTML

    <!DOCTYPE html> significa que a linguagem usada vai ser html <html> e </html> primeiro comando < > Tags <head> e </head> In the head, we have the <title> tags <title> e </title> Ttulo, o que visto na barra <body> e </body> Contedo invisvel <h1> e </h1> ... <h6> e </h6> <img src=url /> image e source <a href=url > <a/> link e direcionamento (hyper text reference) <ol> </ol> ordered list - lista numerada <li> </li> linhas da lista, comea com nmeros <ul> </ul> unordered list, lista com bolinhas, tambm precisam do comando de linha <li> </li> <!This is a comentent--> Comentrio visvel apenas para o editor <p style="font-size: 40px;"> style=color:red; font-family=Verdana; background-color:blue; acompanha muitas tags style=text-align:left; atributos: left, center, right <strong> </strong> negrito <em> </em> itlico <table> </table> <tr> table rows (linhas) <td> </td> table data . Se colocarmos 2 table datas na mesma row (linha), vo aparecer um do lado do outro como se fossem colunas. <thead> </thead> e <tbody> </tbody> <th> </th> o table data do table head, e aparece em negrito . colspan=2 um atributo que faz com que a coluna do tr ocupe 2 espaos (ou quantos determinarmos)

    <div style="width:50px; height:50px; > </div> tabela a pgina e demarca espaos para diagramao. <span> </span> para mudar atributos de comandos pequenos, em particular (so as excees)

    CSS
    CSS (which stands for Cascading StyleSheets) is a language used to describe the appearance and formatting of your HTML. A style sheet is a file that describes how an HTML file should look. We say these style sheets are cascading because the sheets can apply formatting when more than one style applies. For instance, if you say all paragraphs should have blue font, but you specifically single out one paragraph to have red font, CSS can do that! There are two ways to put CSS in one place. - This first is to put your CSS between <style></style> tags, right in the same file as your HTML. These <style> tags go inside the <head></head> of your webpage. - You can write your CSS in a totally separate file. But how do you make sure your HTML file can see that CSS information? You do this by putting a <link> tag (as you saw in the first exercise of this course)

    between the <head></head> tags of your HTML page <link type="text/css" rel="stylesheet" href="stylesheet.css"/> SYNTAX selector { property: value; } color: red; font-family: Verdana or serif, sans-serif and cursive (listas) height: 300px; width: 100px; border: 2px solid blue; se escreve sem vrgulas!!! dashed text-decoration: none (or overlined, line-trought, underline ) serve para decorar o link com sublinhado, por exemplo. div: border-radius: 5px; border: 2px solid #6495ED; background-color: #BCD2EE; height: 50px; width: 120px; margin: auto; text-align: center;

    UNIT EM: The font-size unit em is a relative measure: one em is equal to the default font size on whatever screen the user is using. That makes it great for smartphone screens, since it doesn't try to tell the smartphone exactly how big to make a font: it just says, "Hey, 1em is the font size that you normally use, so 2em is twice as big and 0.5em is half that size! JUST CHANGE PX to EM. DIV : Para colocar blocos coloridos. Depende de 3 atributos: background-color, height e width. TEXT-DECORATION para sublinhar o link, por exemplo. div div div h3 {color: red;} vai passar para vermelho s h3 que est dentro do 3 comando div. * selector universal Class acompanha um comando, como div class, e representam um conjunto de formataes. Na parte do html, usa-se um comando do tipo <h1 class=anything>. Na parte do css, o segredo o ponto. Escreve-se: .anything { ID Funciona igual ao class, mas usado quando se quer modificar apenas 1 seletor. No html: <h1 id=anything. No CSS, ficaria assim #anything { Pseudo Class para coisas que parecem invisveis, como os comandos do link. Ex: a:link an unvisited link / a:visited / a:hover - a link you're hovering your mouse over. Ex2: First-child it's used to apply styling the elements that are the first children of their parents: p:first-child. bom para ttulo! Pseudo class usado para selecionar os outros filhinhos. O commando, que s do css, fica assim: p:nth-child(2) { no caso, seleciona o segundo filhote!

    COMANDOS DO EXERCCIO QUE FORMAVA CRCULOS div { display: inline-block; margin-left: 5px; height: 100px; width: 100px; border-radius: 100%; border: 2px solid black} DISPLAY PROPERTIES block: This makes the element a block box. It won't let anything sit next to it on the page! It takes up the full width. inline-block: fica um bloco ao lado do outro, como nos menus de pginas inline: This makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs (not the whole line). none: This makes the element and its content disappear from the page entirely! Padding Espaamento entre os elementos e a borda (o texto dentro da tabela, por exemplo). Margin auto (centraliza) margin-top: /*some value*/ margin-right: /*some value*/ margin-bottom: /*some value*/ margin-left: /*some-value*/ ou margin: 1px 2px 3px 4px (for: top / right / bottom / left, ou seja, sentido horrio). FLOAT: serve para posicionar. possvel colocar um quadrado a direita, e um texto a esquerda, por exe mplo. float: right; (or left) ABSOLUTE POSITIONING: quando um elemento est posicionado em absoluto, isto acontece em relao ao primeiro elemento me ou ento , quando este no existe, em relao ao html . Comando positioning: absolute margin-left: 20px; RELATIVE POSITIONING: no relative positioning - posicionamos o elemento em relao a algum outro. positioning: relative margin-left: 20px; FIXED POSITION: fixa um elemento janela do browser. Mesmo enquanto se scroll up ou scroll down, o elemento fica preso a esta posio. JAVA Numbers: 3*5 Strings: Boolean: true or false 10<3 false Comparison Operators: < (less) > (greater)

    <= (less than)

    === (equal)

    !== (not equal)

    Potrebbero piacerti anche