HTML5 Flashcards


Set Details Share
created 3 months ago by Aram_A
25 views
its only for the information that I got from HTML5
updated 2 months ago by Aram_A
show moreless
Page to share:
Embed this setcancel
COPY
code changes based on your size selection
Size:
X
Show:
1

what is the [abbr]?and how do you use it?

its an element, and its to make someone understand your shortcuts, you use it like:

<abbr title="the meaning of your shortcut">your shortcut</abbr>

2

what is the <address> code? and how to use it?

its an element, and just like the <p> element except it makes its content italic

you can use it like that:

<address>type anything even other code and it will make them italic</adress>

3

what is the <area> code? and how to use it?

its a tag(self closing element) and it is used with the map element to link webs or other images to parts of your image by:

<img src="the source of your pic" width="" height="" alt="alternative text for browsers that dont read images" usemap="text to link it with the name of the map">

<map name="same name of the usemap attribute of the img element>

<area href="where do you want to take you when you click the linked in part of the image coords="which part,of the,picture you,want to link" shape="use it when you link a picture with another pic">

4

what is the <aside>code? and how to use it?

its an element, that is used to make kind of notes or independent writing but after styling it by "style" attribute

5

what is the difference between <bdi> and <bdo> code? and what is the similarity between them?

they are both elements, but

<bdi>is used to make texts like arabic not ruin the writing by going to the right(cuz arabic writing is right to left) so it makes it stay in its place

while

<bdo>makes its content(the text u surrounded it with)have adjustable direction so you can adjust where the text is going from right to left or vise versa by:

<bdo dir:"rtl/ltr">text</bdo>

6

what is the <blockquote>code?and how does it work?

its an element, and its used to put text from other webs:

<blockquote hreft="the source of the text">text<blockquote>

7

what is <caption>? and how to use it?

its an element, and its used to make header for tables by putting just after the opening tag of the table element:

<table>

<caption>text</caption>

8

what is the <cite>?and how to use it?

its an element, and its make a short text italic like an author of a book:

<cite>text</cite>

9

what is the <colgroup>? and how to use it?

its an element, and its to make it that you can stylize you table without putting the style attribute in every <th> or <tr> by:

#put it before the<tr>(after the <caption>)

<table>

<colgroup>

10

what is <col>? and how to use it?

its a tag, its used with the <colgroup> element:

<table>

<colgroup>

<col span="how many column(not rows) you want is to stylize" style="what do you wanna change of that number of columns; any other things>

#if you want to adjust the columns differently make <col> for each of your intensions

ex)<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>

11

what is the datalist? and how to use it?

its an element, and a pre-arranged list that could be connected to an input by:

<label for="name1>what do you want people to input</label>

<input id="name1 list="name2" name="name1">

<datalist id="name2">

<option value="your 1st suggestion of the input type">

<option value="your 2end suggestion of the input type">

<option value="your 3rd suggestion of the input type">

12

what is the <details> code? how to use it?

its an element, that makes a part of the paragraph disappear by making an option for you to read it or not:

<details>

<summary>the header of your shortened content</summary>

<p>your additional content that people have the option to read it or not</p>

</detail>

13

do you have any other attributes you can use with the <details> element?

you have the open attribute and it makes it so people when they come can see the additional content and they have the option to close it by them selves

14

what is the <dialog> code? and how to use it?

its an element, that makes you have a box in the bottom right of your screen by:

<dialog open>

your content

</dialog>

15

What is <fieldSet> code? How to use it?

It’s an element, that has a job to connect the related inputs tighter that are in the same Form element

<form>

<fieldSet>
<legend>the name of the field set</legend>

<label ………

</fieldSet>

16

What is <figcaption> code? How does it work?

It’s an element, it surrounds and specifies an image so with the help of the <figure> element it can make a caption for it:

<figcaption>
<img Src:”the source of the photo>

<figure> the caption for ur pic <figure>

</figcaption>

17

what is the <blockquote>code?and how does it work?

its an element, and its used to put text from other webs:

<blockquote cite="the source of the text">text<blockquote>

18

what is the <meter>code? and how to use it?

its element, you write it just like the input tag but the difference between it and the input tag is that it has only one input method and its a scale while the input tag can have different types of input because of the "type" attribute in it but the <meter> element doesnt have that attribute, you can use it like this:

<label for="name1">what the scale measures</label>

<meter id="name1> min="" max="" value="the value that it is on by default">anything</meter>

19

what is the <nav>code? how to use it?

its an element, its job is to contain navigation links(links that are important or links to give you access to other topics):

<nav>

<a href=""> name</a>

20

what is the <optgroup>code? how to use it?

its a element that contains similar or related <option>codes that have been written under the <selected/datalist/...>elements its written like this:

<form>

<label for="name1">what do you want from the visitor</label>

<selected id="name1" name="name 1">

<optgroup label='name of the group of options>

<option value="what do you want this option to send to server when it is">the name of the option</option>

21

where do you put the <optgroup> code?

above the <optiond>codes

22

what is the <picture>code? how to use it?

its an element, its used to change the displayed picture after adjusting the width of the window, its used like that:
<picture>

<source media="(min-width:X)" srcset="the source of your img">

<img src="the source of your image">

#the computer or the browsers read the source tag first then at last after they reed the whole source tags then they read the img tag

23

what is <Pre>? and how to use it?

its an element, its makes what you write in HTML5 display in the screen with all the line breaks

24

what is the <progress>code? and how to use it?

its an element, its used to represent the completion of a task its used like:

<label for="name1">name of the progress that is running</label>

<progress id="name1" value="what value you want to send to the server and display to the viewer" max="">anything</progress>

25

what is <q>? what is the difference between it and <blockquote>code?

its an element, it surrounds its content with (""), just like <blockquote> but its made for short quotes while <blockquote>is for long ones, it is used like this:

<q cite="source of your quote>content</q>

26

what is the difference between <S> and <del>?

they both stab the sentence with a line but

<s>=for texts that are no longer relevant or accurate

<del>=for deleted texts

27

what is the<script>code?

its an element, its job is to attach a file that has a program(file.exe or file.com is a program that could run in a computer) to your HTML5 that is usually more useful in JavaScript

28

what is the <select>code? how to use it?

its an element, that is used to create a drop-down list(a list that is like a box and has some options in it):

<label for="name1">what do you want them to select</label>

<slelect id="name1" name="name of you list">

<option value="what do you want to send to the server when the user selects this>the name of the option</option>

</select>

29

what is the <section> code?

its an element, its used to define section for a document or an article

30

what are other attributes that could be used with <select>?

1.form=which connects the <select> code to a <form> code

2.multiple=which makes the user capable of selecting or choosing more than one option

3.required=which makes it that you cant leave the input empty you have to choose an option

4.size=which decides how many options will be visible

5.name=lets you choose a name the books

31

what is the<link>code? how to use it?

its an tag, its used to define the relationship between the current and the external resource, it could also link an external (style sheet), its attributes changes its functions

32

what is the attributes that the <link>code has?

it has:

  1. cross-origins:which is mechanism that allows a website to request an restricted resource from another website but only if they had different domains
  2. rel : tells the browser(specifies) they relationship type between the current and the linked with document, it has different values
  3. size: its used only if the value of rel is icon, its used to define the size of the linked in resource
  4. title: makes an alternative thing(img, text,...)if the browser wasnt able to read the linked in resource
  5. type: its job it to tell the browser(specifie) where document was saved
  6. href: to tell the browser what is the document that is linked(specifies the location of the linked in document)
  7. media: tells the browser on what device the document will be displayed
33

what is the "alternate" value of the rel attribute?

its job is to tell the browser that its using a different version of the document(specifies a different version of the document)

34

what is the <canvas>code? how to use it?

its an element, that is used to draw graphics with the help of java script, on its own its like that:

<canvas id="name1" width="x" height="y">

35

what is the "author" value of the rel attribute?

it provides a link to the author of the document

36

what is the canvas code without javascript?

its only a rectangle area with no border(lines to describe its limit) or content(anything drawn or written on it)

37

what is the "help" value of the rel attribute?

its job is to take you to the help document of the linked resource

38

what is the <svg>code? how to use it? what is its attributs?

its an element, its job is to make shapes, then you can stylize them with the style attribute, you use it like this:

<svg width="X" height="Y">

<rec width="x" height="y" (optional, to make the rectangle have soft edges rx="" ry="")>

</svg>

39

what is the <tbody>code? what is its job? where do you put it?

its an element, its job is to contain the body of a table element

(the body is the <tr> and <td>s) you put it after the <caption><colgroup>and <thead> elements

40

what is the <template>code? how to use it?

its an element, that is used to hide content that is in it, then you can display it with javascript

41

what is <textarea>? how to use it?

its an element, its used to make a multi-line place so that its adjustable, by:

<label for="name1">the head of the topic that is written in the adjustable line box</label>

<textarea id="name1" name="the name of the box which you will tell the server" rows="" cols="">the content of the adjustable line box</textarea>

42

what is the <track>code, how to use it?

its a tag, its used to display text for video or audio

ex) for videos:

<video>

<source src="the source of your video">

<track src="the source of the caption" srclang="the language of the subtitle" kind="subtitle" label="name" default>

</video>

43

what is the default attributes job in the <track> tag?

its a boolean attribute, its job is to make a subtitle track enabled by default when someone clicks on the video or audio

44

what is the <var> code?

its an element, its job is to make its content italic more used for mathematical purposes

45

what is the label attribute for the <track> code?

its job is to name the track, to make it easier for browsers to list the available tracks

46

what is the <wbr>code, how to use it?

its an element, its job is to tell the browser when the user adjusts the application size that there is an available line break here

47

what are the value of the kind attribute in the <track> code?

it has 5 values"

  1. captions: its used to display text for music and sound scenes in a video
  2. chapters: its used to display chapter titles(heads) in a video
  3. description: its used to display text description for a video
  4. metadata: its job is to be written in a script but it wont be displayed in a video
  5. subtitle : its job is to provide subtitles for a video
48

what is the <kbd>code

its an element, that makes its content written in monospace, mostly used for displaying computer shortcuts like:

<kbd>Ctrl</kbd>+<kbd>C</kbd>

49

what is the <u>code? how to use it?

its an element, it underlines the text inside it just like the <ins> element

50

what is the <video>code? what should the resource type be?

its an element, used to put videos in your HTML5, the video type should be ended with (p4,WebM and Ogg)

51

what is the attributes of the <video>code?

  1. autoplay: which lets your video get played automaticlly when you go to your website
  2. looped: which replays your video when its ended
  3. poster: which lets you put a thumbnail to your video
  4. mute: which mutes your video at the start by default
  5. controls: which adds thing like fullscreen and volume adjustment options to your video
  6. width,height: lets you controll the size of your vid (just adjust the width and the browser will automaticly adjust the height of it)
52

what is the colspan attribute and where to put it?

its an attribute that tells you how many columns does a part of a table take, you put it inside the opening tag of the<th>or<td> element

53

how HTML5 elements are displayed?

HTML5 has 2 different types of elements

  1. inline element: which are elements that can sit next to each other always only if ones width is to big then itll push the other to the next row of the document
  2. block elements: they are elements that always sit under or above each other no matter how short there widths is like<p>elements they will always be under each other even if they are short
54

what is the frameborder attribute? how to use it, where to put it?

its an attribute placed in the <iframe> code, its job is to get rid of the bar(that give you the option to scroll down and up of a website) in the right side of the embeded website:

<iframe src="the website URL that you want to embed frameborder="0">the text you want to appear if the site didnt allow you to embed it to your website</iframe>

55

what is the <main>code? what it contains? what is its job?

its an element, it tells the browser that this is the content, there is a lot that you can put in it bus as far as other codes you can put in it you can put:

  • <article>: to tell the browser that this is your article
  • <section>: to tell the browser that this is a section of an article
  • <aside>: to tell the browser that this is a separate part of the topic or its an advertisement