Repàs HTML i CSS
Presentation
•
Other
•
Professional Development
•
Medium
Martí Ràfols
Used 8+ times
FREE Resource
11 Slides • 14 Questions
1
Repàs HTML i CSS
DAW M04 Llenguatges de marques
2
HTML
Llenguatge de marques d'hipertext
Es combina amb CSS i JS (entre d'altres) per tal de crear pàgines WEB
Són fitxers que els navegadors saben interpretar
Està composat per ETIQUETES (o tags) i aquestes poden tenir ATRIBUTS
DAW M04 Llenguatges de marques
UF 1
3
Multiple Choice
L'HTML es compila
Veritat
Fals
Depèn de la versió
4
Multiple Choice
Les etiquetes d'HTML són lliures, pots crear-ne de noves.
Veritat
Fals
Depèn de la versió
5
Tags
Les etiquetes (o tags) són les marques que s'utilitzen per senyalar el principi i el final d'un element. Estan limitades a les que ofereix HTML5.
Algunes poden NO tancar-se
Es recomana posar els tags en minúscules
Les etiquetes que tenen contingut s'HAN DE TANCAR
UF 1
DAW M04 Llenguatges de marques
6
Multiple Choice
Quina d'aquestes és l'estructura bàsica correcta d'un fitxer HTML?
7
Multiple Choice
Com es posen els comentaris en HTML?
#Comentari
//Comentari
<!-- Comentari>
<!-- Comentari -->
8
Multiple Choice
A dins de quin TAG s'han de situar els tags "meta" com per exemple:
<meta charset="UTF-8">?
Dins del tag <body>
Dins del tag <html>
Dins del tag <head>
Dins del tag <header>
9
Multiple Choice
Quins d'aquests NO són tags vàlids en HTML5?
<p>
<div>
<hr>
<br>
<hm>
10
Multiple Choice
Quina d'aquestes és una forma correcta de posar un enllaç a la pàgina de google que s'obri en una pàgina nova en HTML?
11
Multiple Choice
Quin és el resultat d'aquest codi?
12
Multiple Choice
Quina és l'etiqueta per crear un formulari en HTML?
<frm>
<table>
<action>
<form>
<input>
13
Formularis
S'indiquen amb el tag <form> i té dos atributs principals:
action="url_tracta_dades" url que tractarà les dades i a on s'enviarà ens camps omplerts per l'usuari quan faci el "submit"
method="GET"/"POST" ... On s'especifica quin mètode HTTP s'utilitza per enviar les dades al action
UF 1
DAW M04 Llenguatges de marques
14
Multiple Choice
Quin és l'atribut dels camps "input" que és imprescindible per què el valor que l'usuari hagi posat s'enviï de forma correcta al fer el submit?
id
name
required
input
15
Tipus d'inputs principals
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
UF 1
DAW M04 Llenguatges de marques
<legend>
<datalist>
<output>
<option>
<optgroup>
16
Multiple Choice
Quin d'aquests codis és correcte per implementar un formulari?
17
CSS Cascade StyleSheet
Llenguatge de marques orientat a disseny
DAW M04 Llenguatges de marques
UF 1
UF 1
18
Multiple Choice
Aquesta manera d'utilitzar el CSS el coneixem com...
Internal CSS
External CSS
Inline CSS
19
Estils CSS
Inline CSS: atribut style dins del propi element (NO recomanat per HTML5).
Internal CSS: s'escriu el CSS dins del tag "style" del <head>
External CSS: Es referencia el css en el head a un fitxer extern. [RECOMANAT]
UF 1
DAW M04 Llenguatges de marques
20
Selectors:
D'element: p { color: red; } afecta a tots els <p>
D'identificador: #id1 {color:red; } afecta només a l'element amb id=id1
De classe: .exempleClasse { color: red; } afecta als que tinguin la classe.
UF 1
DAW M04 Llenguatges de marques
21
Agrupació de selectors: h1, h2, p { color: red; } afecta a tots
Herència d'estils h1, h2, p {color: red; } p{background-color: blue} p tindrà color red i background color, perquè ho hereda (en cascada).
Combinacions:
Al mateix nivell: p.classe1 { } Només aplica als p de classe classe1.
Descendents: div p {} només aplica als p que siguin descendents de div.
Fills: div > p {} afecta només als p de dins de div (de forma directa)
Germans propers: div + p {} només als que s'estan tocant.
Germans div ~ p {} només als que estan al mateix nivell.
UF 1
DAW M04 Llenguatges de marques
22
Multiple Choice
Quin seria el resultat d'aquest codi?
23
Maquetació per capes
Fixed: No es mou respecte a la finestra
Relative: Distància respecte a la seva posició "normal"
Absolute: Segons el contenidor més proper
UF 1
DAW M04 Llenguatges de marques
24
Multiple Choice
Escull la correcta
25
L'examen estarà format per:
30 % Part "teòrica" tipus test-preguntes curtes [Sense apunts]
70 % Part pràctica: se'us facilitarà un codi i recursos i se'us demanarà que hi feu modificacions i el completeu
Repàs HTML i CSS
DAW M04 Llenguatges de marques
Show answer
Auto Play
Slide 1 / 25
SLIDE
Similar Resources on Wayground
19 questions
Budgeting
Presentation
•
University
20 questions
Teste SO
Presentation
•
Professional Development
19 questions
SAINS TING. 4 BAB 1: LANGKAH KESELAMATAN DALAM MAKMAL
Presentation
•
KG
21 questions
Elaboración de rúbricas
Presentation
•
Professional Development
20 questions
Hakikat Menulis
Presentation
•
University
20 questions
Sample Lesson
Presentation
•
University
23 questions
Datenschutz in der Schule
Presentation
•
Professional Development
16 questions
Algebra 1 FSA EOC Practice Test ~ Non-Calculator
Presentation
•
10th - 11th Grade
Popular Resources on Wayground
20 questions
Math Review
Quiz
•
3rd Grade
15 questions
Fast food
Quiz
•
7th Grade
20 questions
Context Clues
Quiz
•
6th Grade
20 questions
Inferences
Quiz
•
4th Grade
19 questions
Classifying Quadrilaterals
Quiz
•
3rd Grade
20 questions
Figurative Language Review
Quiz
•
6th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
10 questions
Identify Fractions, Mixed Numbers & Improper Fractions
Quiz
•
3rd - 4th Grade
Discover more resources for Other
20 questions
Guess The App
Quiz
•
KG - Professional Dev...
10 questions
Food Quiz
Quiz
•
Professional Development
11 questions
NFL Football logos
Quiz
•
KG - Professional Dev...
19 questions
Minecraft
Quiz
•
6th Grade - Professio...
20 questions
Block Buster Movies
Quiz
•
10th Grade - Professi...
40 questions
Flags of the World
Quiz
•
KG - Professional Dev...
23 questions
super heros
Quiz
•
KG - Professional Dev...
11 questions
SOCCER PLAYERS AND TEAMS
Quiz
•
KG - Professional Dev...