HTML & CSS Flashcards

Question

HTML Citation elements

Answer 1

1. HTML for abbreviations. The HTML tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM". Marking abbreviations can give useful information to browsers, translation systems and search-engines. 2. HTML

for Contact Information The HTML

tag defines the contact information for the author/owner of a document or an article. The contact information can be an email address, URL, physical address, phone number, social media handle, etc. The text in the

element usually renders in italic, and browsers will always add a line break before and after the

element. 3. HTML for Work Title The HTML tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.). Note: A person's name is not the title of a work. The text in the element usually renders in italic. 4. HTML for Bi-Directional Override BDO stands for Bi-Directional Override. The HTML tag is used to override the current text direction eg: This text will be written from right to left

Answer 2

An RGB color value represents RED, GREEN, and BLUE light sources. And it can be specified as an RGB value, using this formula: rgb(red, green, blue) To display white, set all color parameters to 255, like this: rgb(255, 255, 255) and it can be changed the color by experimenting the value of rgb.

Answer 3

RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)

Answer 4

In HTML, a color can be specified using a hexadecimal value in the form: #rrggbb Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255). For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two (green and blue) are set to 00.

Answer 5

HSL stands for hue, saturation, and lightness and can be specified in the form: hsl(hue, saturation, lightness) eg, hsl(0, 100%, 50%) Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. Lightness is also a percentage value. 0% is black, and 100% is white.

Answer 6

HSLA color values are an extension of HSL color values, with an Alpha channel - which specifies the opacity for a color. An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha) eg: hsla(0, 100%, 50%, 0.5) An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Answer 7

CSS stands for Cascading Style Sheets CSS saves a lot of work. It can control the layout of multiple web pages all at once. With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

Answer 8

To use an external style sheet, add a link to it in the section of each HTML page. eg: The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension. Here is what the "styles.css" file looks like: body { background-color: powderblue; } h1 { color: blue; } p { color: red; } Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

Answer 9

color: the color of text text-align: where elements are placed on the page background-color: can be set to any color width: in pixels or percent of a page height: in pixels or percent of a page padding: how much space should be left inside an element margin: how much space should be left outside an element font-family: type of font for text on page font-size: in pixels border: size type (solid, dashed, etc) color

Answer 10

HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand.

Answer 11

The HTML tag defines a hyperlink. It has the following syntax: link text The most important attribute of the element is the href attribute, which indicates the link's destination. The link text is the part that will be visible to the reader. Clicking on the link text, will send the reader to the specified URL address. By default, links will appear as follows in all browsers: * An unvisited link is underlined and blue * A visited link is underlined and purple * An active link is underlined and red

Answer 12

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link. The target attribute specifies where to open the linked document. The target attribute can have one of the following values: _self - Default. Opens the document in the same window/tab as it was clicked _blank - Opens the document in a new window or tab _parent - Opens the document in the parent frame _top - Opens the document in the full body of the window

Answer 13

Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email) Send email

Answer 14

To use an HTML button as a link, you have to add some JavaScript code. JavaScript allows you to specify what happens at certain events, such as a click of a button: Eg:

Answer 15

Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become red and underlined:

Answer 16

To create a bookmark - first create the bookmark, then add a link to it. When the link is clicked, the page will scroll down or up to the location with the bookmark. Example First, use the id attribute to create a bookmark:

Chapter 4

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page: Example Jump to Chapter 4 You can also add a link to a bookmark on another page: Jump to Chapter 4

Answer 17

Images can improve the design and the appearance of a web page. eg: alternatetext

Image tag is empty that means it is a self closing tag. The tag has two required attributes: 1. src - Specifies the path/URL to the image. 2. alt - Specifies an alternate text for the image.

Answer 18

The style attribute to specify the width and height of an image. Eg: Girl in a jacket

Answer 19

The CSS float property to let the image float to the right or to the left of a text: Example

The image will float to the right of the text.

The image will float to the left of the text.

Answer 20

Abbreviation File Format File Extension APNG Animated Portable Network Graphics .apng GIF Graphics Interchange Format .gif ICO Microsoft Icon .ico, .cur JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp PNG Portable Network Graphics .png SVG Scalable Vector Graphics .svg

Answer 21

The idea behind image map is that you should be able to perform different actions depending on where in the image you click.

Answer 22

1. The image is inserted using the tag. The only difference from other images is that you must add a usemap attribute: Workplace

The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map. 2. Add a element. The element is used to create an image map, and is linked to the image by using the required name attribute. 3. Add a clickable areas using an element. You can choose one of these values for shape: rect, circle, poly, default. eg:

Answer 23

A favicon is a small image displayed next to the page title in the browser tab. To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico". Next, add a element to your "index.html" file, after the element. </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":49,"qSoundUrl":null,"resources":{"deckId":12551799,"packId":21172889,"cardId":414246432},"returnTo":"/packs/21172889/subscribe"}' id='card-414246432'> <div class='header'> 49 </div> <div class='card-face question'> <div class='question-content'> Tables in HTML </div> </div> <div class='card-face answer'> <div class='answer-content'> Tag Description <table> Defines a table <th> Defines a header cell in a table <tr> Defines a row in a table <td> Defines a cell in a table <caption> Defines a table caption <colgroup> Specifies a group of one or more columns in a table for formatting <col> Specifies column properties for each column within a <colgroup> element <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table </div> </div> </div> <div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":50,"qSoundUrl":null,"resources":{"deckId":12551799,"packId":21172889,"cardId":414247265},"returnTo":"/packs/21172889/subscribe"}' id='card-414247265'> <div class='header'> 50 </div> <div class='card-face question'> <div class='question-content'> HTML Forms </div> </div> <div class='card-face answer'> <div class='answer-content'> The HTML <form> element is used to create an HTML form for user input. An <input> element can be displayed in many ways, depending on the type attribute. for eg.: <!DOCTYPE html> <html lang="en"> <head> <title>Forms