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
20 questions
Repaso Para el Examen 4
Lesson
•
University - Professi...
19 questions
Gerundio
Lesson
•
KG
17 questions
Comparatives and superlatives
Lesson
•
University
18 questions
Mammografia e Senologia
Lesson
•
University
18 questions
4/19 Friedman Article Presentation
Lesson
•
University
18 questions
Communautés durables
Lesson
•
Professional Development
18 questions
Rantai Makanan
Lesson
•
Professional Development
22 questions
Hluchoslepota
Lesson
•
University
Popular Resources on Wayground
15 questions
Fractions on a Number Line
Quiz
•
3rd Grade
14 questions
Boundaries & Healthy Relationships
Lesson
•
6th - 8th Grade
13 questions
SMS Cafeteria Expectations Quiz
Quiz
•
6th - 8th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
25 questions
Multiplication Facts
Quiz
•
5th Grade
12 questions
SMS Restroom Expectations Quiz
Quiz
•
6th - 8th Grade
20 questions
Main Idea and Details
Quiz
•
5th Grade
10 questions
Pi Day Trivia!
Quiz
•
6th - 9th Grade
Discover more resources for Other
20 questions
90s Cartoons
Quiz
•
Professional Development
5 questions
Workplace Documents Practice Test: Document 1
Quiz
•
Professional Development
5 questions
Workplace Documents Practice Test: Document 2
Quiz
•
Professional Development
10 questions
March Quiz
Quiz
•
Professional Development
5 questions
Copy of G5_U6_L8_22-23
Lesson
•
KG - Professional Dev...