HTML Flashcards

Question

25- HTML Lists:

Answer 1

- An UNORDERER list starts with the

tag. The list items will be marked with bullets (small black circles) by default. ``` >ul> >li>Coffee>/li> >li>Tea>/li> >li>Milk>/li> >/ul> ``` - Unordered HTML List - CHOOSE LIST ITEM MARKER The CSS list-style-type property is used to define the style of the list item marker. Value Description disc Sets the list item marker to a bullet (default) circle Sets the list item marker to a circle square Sets the list item marker to a square none The list items will not be marked ``` Example - Disc >ul style="list-style-type:disc;"> >li>Coffee>/li> >li>Tea>/li> >li>Milk>/li> >/ul> ``` ``` Example - None >ul style="list-style-type:none;"> >li>Coffee>/li> >li>Tea>/li> >li>Milk>/li> >/ul> ____________________ - An ORDERER list starts with the
1. tag. The list items will be marked with numbers by default: ``` ``` Example >ol> >li>Coffee>/li> >li>Tea>/li> >li>Milk>/li> >/ol> ``` - Ordered HTML List - THE TYPE ATTRIBUTE: The type attribute of the

____________________ - HORIZONTAL LIST with CSS: HTML lists can be styled in many different ways with CSS. One popular way is to style a list horizontally, to create a navigation menu: ``` ``` Example >!DOCTYPE html> >html> >head> >style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } ``` li { float: left; } ``` li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } ``` ``` li a:hover { background-color: #111111; } >/style> >/head> >body> ``` ``` >ul> >li>>a href="#home">Home>/a>(/li> >li>>a href="#news">News>/a>>/li> >li>>a href="#contact">Contact>/a>(/li> (li>>a href="#about">About>/a>(/li> >/ul> ``` >/body> >/html> ____________________ Chapter Summary - Use the HTML

element to define an unordered list - Use the CSS list-style-type property to define the list item marker - Use the HTML

element to define a list item - Use the HTML
element to define a description list - Use the HTML
element to define the description term - Use the HTML
element to describe the term in a description list - Lists can be nested inside lists - List items can contain other HTML elements - Use the CSS property float:left or display:inline to display a list horizontally

Answer 2

- Every HTML element has a default display value depending on what type of element it is. The two display values are: block and inline. ____________________ - BLOCK-LEVEL ELEMENTS: A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). The

element is a block-level element. Example >div>Hello World>/div> Block level elements in HTML:

-
____________________ - INLINE ELEMENTS: An inline element does not start on a new line and only takes up as much width as necessary. This is an inline element inside a paragraph. Example (span>Hello World(/span> ``` Inline elements in HTML: ```
``` ``` ``` _{^{``` ____________________ - the Element: is often used as a container for other HTML elements. The element has no required attributes, but style, class and id are common. When used together with CSS, the element can be used to style blocks of content: Example >div style="background-color:black;color:white;padding:20px;"> >h2>London(/h2> >p>London is the capital city of England. It is the most populous city in the United Kingdom.>/p> >/div> ____________________ - The Element: is often used as a container for some text. The element has no required attributes, but style, class and id are common. When used together with CSS, the element can be used to style parts of the text: Example >h1>My >span style="color:red">Important>/span> Heading>/h1> ____________________ - HTML GROUPING TAGS Tag Description Defines a section in a document (block-level) Defines a section in a document (inline)}}

Answer 3

- The HTML CLASS ATTRIBUTE is used to define equal styles for elements with the same class name. So, all HTML elements with the same class attribute will get the same style. Here we have three

elements that point to the same class name: ``` Example >!DOCTYPE html> >html> >head> >style> .cities { background-color: black; color: white; margin: 20px; padding: 20px; } >/style> >/head> >body> ``` >div class="cities"> >h2>London>/h2> >p>London is the capital of England.>/p> >/div> >/body> >/html> ____________________ - Using The class Attribute ON INLINE ELEMENTS: The HTML class attribute can also be used on inline elements: Example >!DOCTYPE html> ``` >head> >style> span.note { font-size: 120%; color: red; } >/style> >/head> >body> ``` >h1>My (span class="note">Important>/span> Heading>/h1> >p>This is some important text.>/p> >/body> >/html> Tip: The class attribute can be used on any HTML element. Note: The class name is case sensitive! ____________________ - SELECT ELEMENTS WITH A SPECIFIC CLASS: In CSS, to select elements with a specific class, write a period (.) character, followed by the name of the class: ``` Example Use CSS to style all elements with the class name "city": ``` ``` >style> .city { background-color: tomato; color: white; padding: 10px; } >/style> ``` ``` >h2 class="city">London>/h2> >p>London is the capital of England.>/p> ____________________ - MULTIPLE CLASSES: HTML elements can have more than one class name, each class name must be separated by a space. ``` ``` Example Style elements with the class name "city", also style elements with the class name "main": ``` >h2 class="city main">London>/h2> >h2 class="city">Paris>/h2> >h2 class="city">Tokyo>/h2> In the example above, the first

element belongs to both the "city" class and the "main" class. ____________________ - DIFFERENT TAGS CAN SHARE SAME CLASS: Different tags, like

and

, can have the same class name and thereby share the same style: Example >h2 class="city">ParisÇ8/h2> >p class="city">Paris is the capital of France>/p>

Answer 4

- The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). The id value can be used by CSS and JavaScript to perform certain tasks for the element with the specific id value. In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element: Example Use CSS to style an element with the id "myHeader": ``` >style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } >/style> ``` >h1 id="myHeader">My Header>/h1> Tip: The id attribute can be used on any HTML element. Note: The id value is case-sensitive. ``` Note: The id value must contain at least one character, and must not contain whitespace (spaces, tabs, etc.). ____________________ - DIFFERENCE BETWEEN CLASS AND ID: An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements: ``` ``` Example >style> /* Style the element with the id "myHeader" */ #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } ``` ``` /* Style all elements with the class name "city" */ .city { background-color: tomato; color: white; padding: 10px; } ```

My Cities

London

London is the capital of England.

____________________ - BOOKMARKS WITH ID AND LINKS: HTML bookmarks are used to allow readers to jump to specific parts of a Web page. Bookmarks can be useful if your webpage is very long. To make a bookmark, you must first create the bookmark, and then add a link to it. When the link is clicked, the page will scroll to the location with the bookmark. Example First, create a bookmark with the id attribute: (h2 id="C4">Chapter 4(/h2> Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page: (a href="#C4">Jump to Chapter 4(/a> Or, add a link to the bookmark ("Jump to Chapter 4"), from another page: Example (a href="html_demo.html#C4">Jump to Chapter 4(/a>

Answer 5

- The HTML element defines a form that is used to collect user input: ``` >form> . form elements . >/form> ``` - Form elements are different types of input elements, like: text fields, checkboxes, radio buttons, submit buttons, and more. - The element is the most important form element. The element is displayed in several ways, depending on the type attribute. Type Description >input type="text"> Defines a single-line text input field >input type="radio"> Defines a radio button (for selecting one of many choices) Defines a submit button (for submitting the form) ____________________ - Text Fields defines a single-line input field for text input. Example >form> >label for="fname">First name:>/label>>br> >input type="text" id="fname" name="fname">>br> >label for="lname">Last name:>/label>>br> >input type="text" id="lname" name="lname"> >/form> ____________________ - The Element The tag defines a label for many form elements. The element is useful for screen-reader users, because the screen-reader will read out load the label when the user is focused on the input element. The element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the element, it toggles the radio button/checkbox. The for attribute of the tag should be equal to the id attribute of the element to bind them together. _____________________ - Radio Buttons defines a radio button. Radio buttons let a user select ONE of a limited number of choices. Example >form> >input type="radio" id="male" name="gender" value="male"> >label for="male">Male>/label>>br> >input type="radio" id="female" name="gender" value="female"> >label for="female">Female>/label>>br> >input type="radio" id="other" name="gender" value="other"> >label for="other">Other>/label> >/form> ____________________ - The Submit Button defines a button for submitting the form data to a form-handler. The form-handler is typically a page on the server with a script for processing input data. The form-handler is specified in the form's action attribute. Example A form with a submit button: >form action="/action_page.php"> >label for="fname">First name:>/label>>br> >input type="text" id="fname" name="fname" value="John">>br> >label for="lname">Last name:>/label>>br> >input type="text" id="lname" name="lname" value="Doe">>br>>br> >input type="submit" value="Submit"> >/form> _____________________ - The action attribute defines the action to be performed when the form is submitted. Usually, the form data is sent to a page on the server when the user clicks on the submit button. In the example above, the form data is sent to a page on the server called "/action_page.php". This page contains a server-side script that handles the form data: >form action="/action_page.php"> If the action attribute is omitted, the action is set to the current page. ____________________ - The Target Attribute The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window. The default value is "_self" which means the form will be submitted in the current window. To make the form result open in a new browser tab, use the value "_blank". Example Here, the submitted result will open in a new browser tab: >form action="/action_page.php" target="_blank"> - Other legal values are "_parent", "_top", or a name representing the name of an iframe. ____________________ - The Method Attribute: specifies the HTTP method (GET or POST) to be used when submitting the form data. Example Use the GET method when submitting the form: (form action="/action_page.php" method="get"> or: Example Use the POST method when submitting the form: >form action="/action_page.php" method="post"> - When to Use GET? The default HTTP method when submitting form data is GET. - When to Use POST? Always use POST if the form data contains sensitive or personal information. The POST method does not display the form data in the page address field. ____________________ - The Name Attribute: Each input field must have a name attribute to be submitted. If the name attribute is omitted, the data of that input field will not be sent at all. Example This example will not submit the value of the "First name" input field: ``` >form action="/action_page.php"> >label for="fname">First name:>/label>>br> >input type="text" id="fname" value="John">>br>>br> >input type="submit" value="Submit"> >/form> ____________________ Chapter Summary Here is the list of all attributes: ``` Attribute Description > accept-charset - Specifies the charset used in the submitted form (default: the page charset). > action - Specifies an address (url) where to submit the form (default: the submitting page). > autocomplete: Specifies if the browser should autocomplete the form (default: on). > enctype - Specifies the encoding of the submitted data (default: is url-encoded). > method - Specifies the HTTP method used when submitting the form (default: GET). > name - Specifies a name used to identify the form (for DOM usage: document.forms.name). > novalidate - Specifies that the browser should not validate the form. > target -Specifies the target of the address in the action attribute (default: _self).

Answer 6

- The Element One of the most used form element is the element. The element can be displayed in several ways, depending on the type attribute. Example ____________________ - The Element The element defines a drop-down list: Example ``` >option value="volvo">Volvo>/option> >option value="saab">Saab>/option> >option value="fiat">Fiat>/option> >option value="audi">Audi>/option> >/select> ``` The elements defines an option that can be selected. By default, the first item in the drop-down list is selected. To DEFINE A PRE-SELECTED OPTION, add the selected attribute to the option: Example Fiat VISIBLE VALUES: Use the size attribute to specify the number of visible values: ``` Example >select name="cars" size="3"> >option value="volvo">Volvo>/option> >option value="saab">Saab>/option> >option value="fiat">Fiat>/option> >option value="audi">Audi>/option> >/select> ``` ALLOW MULTIPLE SELECTIONS: Use the multiple attribute to allow the user to select more than one value: ``` Example >select name="cars" size="4" multiple> >option value="volvo">Volvo >option value="saab">Saab >option value="fiat">Fiat >option value="audi">Audi >/select> ____________________ - The Element The element defines a multi-line input field (a text area): ``` Example >textarea name="message" rows="10" cols="30"> The cat was playing in the garden. >/textarea> The rows attribute specifies the visible number of lines in a text area. The cols attribute specifies the visible width of a text area. ____________________ - The Element The element defines a clickable button: ``` Example Click Me! ____________________ - The and Elements Is used to group related data in a form. ``` The element defines a caption for the element. Example >form action="/action_page.php"> >fieldset> >legend>Personalia:>/legend> >label for="fname">First name:>(/label>>br> >input type="text" id="fname" name="fname" value="John">>br> >label for="lname">Last name:>/label>>br> >input type="text" id="lname" name="lname" value="Doe">>br>>br> >input type="submit" value="Submit"> >/fieldset> >/form> ____________________ - The element specifies a list of pre-defined options for an element. Users will see a drop-down list of the pre-defined options as they input data. The list attribute of the element, must refer to the id attribute of the element. ``` Example >form action="/action_page.php"> >input list="browsers"> >datalist id="browsers"> >option value="Internet Explorer"> >option value="Firefox"> >option value="Chrome"> >option value="Opera"> >option value="Safari"> >/datalist> >/form> ____________________ - The Element The element represents the result of a calculation (like one performed by a script). ``` Example Perform a calculation and show the result in an element: >form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 >input type="range" id="a" name="a" value="50"> 100 + >input type="number" id="b" name="b" value="50"> = >output name="x" for="a b"> >br>>br> >input type="submit"> >/form>

Answer 7

- Here are the different input types you can use in HTML: ____________________ - Input Type Text defines a single-line text input field: Example >form> >label for="fname">First name:(/label>(br> (input type="text" id="fname" name="fname">(br> (label for="lname">Last name:(/label>(br> (input type="text" id="lname" name="lname"> (/form> ____________________ - Input Type Password defines a password field: Example >form> >label for="username">Username:>/label>>br> >input type="text" id="username" name="username">>br> >label for="pwd">Password:>/label>>br> >input type="password" id="pwd" name="pwd"> >/form> ____________________ - Input Type Submit defines a button for submitting form data to a form-handler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute: Example >form action="/action_page.php"> >label for="fname">First name:>/label>>br> >input type="text" id="fname" name="fname" value="John">>br> >label for="lname">Last name:>/label>>br> >input typ="text" id="lname" name="lname" value="Doe">>br>>br> >input type="submit" value="Submit"> >/form> ____________________ - Input Type Reset defines a reset button that will reset all form values to their default values: Example >form action="/action_page.php"> >label for="fname">First name:>/label>>br> >input type="text" id="fname" name="fname" value="John">>br> >label for="lname">Last name:>/label>>br> >input type="text" id="lname" name="lname" value="Doe">>br>>br> >input type="submit" value="Submit"> >input type="reset"> >/form> ____________________ - Input Type Radio defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: ``` Example >form> >input type="radio" id="male" name="gender" value="male"> >label for="male">Male>/label>>br> >input type="radio" id="female" name="gender" value="female"> >label for="female">Female>/label>>br> >input type="radio" id="other" name="gender" value="other"> >label for="other">Other>/label> >/form> ____________________ - Input Type Checkbox defines a checkbox. ``` Checkboxes let a user select ZERO or MORE options of a limited number of choices. Example >form> >input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> >label for="vehicle1"> I have a bike>/label>>br> >input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> >label for="vehicle2"> I have a car>/label>>br> >input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> >label for="vehicle3"> I have a boat>/label> >/form> ____________________ - Input Type Button defines a button: Example >input type="button" onclick="alert('Hello World!')" value="Click Me!"> ____________________ - Input Type Color The is used for input fields that should contain a color. Depending on browser support, a color picker can show up in the input field. Example >form> >label for="favcolor">Select your favorite color:>/label> >input type="color" id="favcolor" name="favcolor"> >/form> ____________________ - Input Type Date The is used for input fields that should contain a date. Depending on browser support, a date picker can show up in the input field. Example >form> >label for="birthday">Birthday:>/label> >input type="date" id="birthday" name="birthday"> >/form> You can also use the min and max attributes to add restrictions to dates: Example >form> >label for="datemax">Enter a date before 1980-01-01:>/label> >input type="date" id="datemax" name="datemax" max="1979-12-31">>br>>br> >label for="datemin">Enter a date after 2000-01-01:>/label >input type="date" id="datemin" name="datemin" min="2000-01-02"> >/form> ____________________ - Input Type Datetime-local The specifies a date and time input field, with no time zone. Depening on browser support, a date picker can show up in the input field. Example >form> >label for="birthdaytime">Birthday (date and time):>/label> >input type="datetime-local" id="birthdaytime" name="birthdaytime"> >/form> ____________________ - Input Type Email The is used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated when submitted. Some smartphones recognize the email type, and add ".com" to the keyboard to match email input. Example >form> >label for="email">Enter your email:>/label> >input type="email" id="email" name="email"> >/form> ____________________ - Input Type File The defines a file-select field and a "Browse" button for file uploads. Example >form> >label for="myfile">Select a file:>/label> >input type="file" id="myfile" name="myfile"> >/form> ____________________ - Input Type Month The allows the user to select a month and year. Depending on browser support, a date picker can show up in the input field. Example >form> >label for="bdaymonth">Birthday (month and year):>/label> >input type="month" id="bdaymonth" name="bdaymonth"> >/form> ____________________