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
16 questions
Homophones grammaticaux - "Ça" et "Sa"
Presentation
•
1st Grade - University
17 questions
X - BAB 3. A. Asal-usul dan Makna Bhinneka Tunggal Ika
Presentation
•
Professional Development
18 questions
Reported Speech
Presentation
•
University
20 questions
Pendidikan entreupreneurship di Sekolah
Presentation
•
University
16 questions
Syntax
Presentation
•
Professional Development
20 questions
Clase 8 Abril
Presentation
•
Professional Development
20 questions
U11_E1_Intermediate_Third_Conditional
Presentation
•
Professional Development
21 questions
PENGENALAN QUIZIZZ
Presentation
•
University
Popular Resources on Wayground
6 questions
Secondary Safety Quiz
Presentation
•
9th - 12th Grade
10 questions
MyPath Diagnostic Overview
Presentation
•
6th - 8th Grade
20 questions
Lab Safety Quiz
Quiz
•
6th Grade
21 questions
Continents and Oceans
Quiz
•
6th Grade
20 questions
Adding and Subtracting Decimals
Quiz
•
5th Grade
20 questions
Parts of Speech
Quiz
•
5th Grade
16 questions
Subject & Predicate
Quiz
•
5th Grade
21 questions
Lab Safety
Quiz
•
10th Grade
Discover more resources for Other
5 questions
Setting goals for the year
Quiz
•
Professional Development
87 questions
STEM Academy
Quiz
•
Professional Development
20 questions
Employability Skills
Quiz
•
Professional Development
20 questions
Interval & Set Notation
Quiz
•
9th Grade - Professio...
10 questions
How to Email your Teacher
Quiz
•
Professional Development