HTML5

Lakukan tugas rumah & ujian kamu dengan baik sekarang menggunakan Quizwiz!

Class Attribute

define a style for a special type of elements, add a class attribute to the opening tag of the element HTML CODE: <p class="error">I am different</p> CSS CODE: p.error { color: red; }

What is a local link?

link to the same web site, with a relative url (no http://www....)

colspan attribute

makes a cell span more than one column CODE: <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table> **makes the row with Telephone stretch the width of "2" columns

marked text highlighted text

target="_blank"

opens the linked document in a new window or tab CODE: <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

target="_top"

opens the linked document in the full body of the window can use if you need to break out of a locked frame

target="_parent"

opens the linked document in the parent frame

target="_self"

opens the linked document in the same window/tab as it was clicked (this is default)

small text defines smaller text amongst the set font size in the line

href attribute

specifies the link's destination address

Target attribute

specifies where to open the linked document

What CSS property will make a centered table heading a left aligned table heading?

text-align property

<p> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </p>

the poem problem will not display as coded, it will be on a single line

HTML describes:

the structure of Web pages using markup

What is the non-breaking hyphen character entity?

‑ lets you use a hyphen that won't break

What is the character entity for ampersand?

What is the character entity for single quotation mark (apostrophe)?

What is the character entity for cent?

What is the character entity for copyright?

What is the character entity for euro?

€

What is the character entity for greater than?

What is the character entity for less than?

What is the character entity used for non-breaking space?

&nbsp a space that will not break into a new line two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive EXAMPLES: § 10 10 km/h 10 PM also used to prevent that browsers truncate spaces in HTML pages. If you write 10 spaces, the browser will remove 9. to add real spaces to your text, you can use the   character entity

What is the character entity for pound?

What is the character entity for double quotation mark?

What is the character entity for registered trademark?

What is the character entity for yen?

What is the default width of a text field?

20 characters

How would you code an html link?

What is the code to send someone an e-mail to someone from a form?

<form action="mailto:[email protected]" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name"><br> E-mail:<br> <input type="text" name="mail"><br> Comment:<br> <input type="text" name="comment" size="50"><br><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form>

HTML headings are defined with what tags?

<h1> to <h6> <h1> being the most important heading <h6> being the least important heading

Where would you declare language of the document?

What file path points to a file in the images folder located in the folder one level above the current folder?

What is the HTML file path for a picture.jpg located in the folder one level up from the current folder?

What is the HTML file path for a picture.jpg located in the images folder located at the root of the current web?

What is the HTML file path for a picture.jpg located in the images folder located in the current folder?

What is the HTML file path for a picture.jpg located in the same folder as the current page?

HTML images are defined with what tag?

<img> no closing tag

What element and type attribute will define a radio button (for selecting one of many choices)?

<input type="radio"> CODE: <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form>

Using the <meta>, how would you define a declaration to refresh the page every 30 seconds?

Using the <meta>, how would you define the author of a page?

Using the <meta>, how would you describe your web page? HINT: use content="value"

True or False: Using HTHML tables is a good way to layout a multicolumn layout.

False

True or False: Lists cannot be nested (list inside of lists).

False CODE: <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>

True or False An iframe cannot be used as the target frame for a link

False target attribute of the link must refer to the name attribute of the iframe CODE: <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

True or False: Browsers automatically add padding to a heading.

False- Browsers automatically add some white space (a margin) before and after a heading.

True or false: HTML tags are case sensitive.

False- html5 standard does not require lowercase tags but W3C recommends it

True or false: Browsers will display any content in the head section of the html.

False- only content in the <body> will be displayed on the users screen

HTML tags are element names surrounded by:

angle brackets normally come in pairs with an opening and closing tag content is inserted in between CODE: <p> This will display on the screen. </p>

bold text without any extra importance

HTML elements are the:

building blocks of HTML pages

How can colors be specified in HTML?

color name RGB value (red, green, blue) (255, 0, 0)- RED HEX value #RRGGBB #FF0000- RED

How does JavaScript select an HTML element?

document.getElementById(id) EXAMPLE: <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script> **id="demo" RESULT: "Hello JavaScript!"

Inline elements

does not start on a new line only takes up as much width as necessary EXAMPLES: <span>...</span> <a>...</a> <img>

element defines a paragraph browsers automatically add some white space (a margin) before and after a paragraph.

element that contains meta information about the document nothing to do with HTML headings not displayed in the browser placed between the <html> tag and the <body> tag

element that contains the visible page content

element that defines a large heading

element that defines preformatted text text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks CODE: <pre> My Bonnie lies over the ocean. My Bonnie lies over the sea. </pre> RESULT: My Bonnie lies over the ocean. My Bonnie lies over the sea.

element that is the root element of an HTML page- follows the doctype

element that specifies a title for the document required in all HTML documents defines a title in the browser tab provides a title for the page when it is added to favorites displays a title for the page in search engine results CODE: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> The content of the document...... </body> </html>

What is a nested element?

elements that can contain other elements the body element can also have an h1, and p inside of the opening and closing body tag

emphasized text added semantic importance font will be italicized

HTML elements with no content are called?

empty elements do not have an end tag

What is an html element?

everything from the start tag to the end tag: CODE: <p>My first paragraph.</p>

groups the body content in a table

groups the footer content in a table CODE: <style> thead {color:green;} tbody {color:blue;} tfoot {color:red;} table, th, td { border: 1px solid black; } </style> </head> <body> <table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> </style>

groups the header content in a table

What does a CSS framework do?

helps to create your layout faster... W3.css or Bootstrap

What attribute would you use to add a special style for a special table?

id attribute- then add CSS styling on the external styling sheet

When should you use POST?

if the form data contains sensitive or personal information does not display the submitted form data in the page address field no size limitations, and can be used to send large amounts of data

What are the common uses for JavaScript?

image manipulation form validation dynamic changes of content change HTML styles change HTML attributes

<img>

images are defined with the <img> tag empty tag that contains attributes only src="source file of the image" alt="alternative text" width="100" height="100" SYNTAX: <img src="url" alt="some_text" style="width:width;height:height;"> CODE: <img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

What CSS property will add white space around the content in a table cell?

padding property

HTML tags label what?

pieces of content such as "heading", "paragraph", "table", and so on

What is a relative file path?

points to a file relative to the current page CODE: <img src="/images/picture.jpg" alt="Picture">

Setting the style of an HTML element, can be done with what attribute?

style attribute SYNTAX: <tagname style="property:value;"> property and value are CSS styling properties CODE: <body style="background-color: powderblue;"> RESULT: A light blue background will be applied to the body element and will be behind any content in nested tags inside the body.

HTML elements are represented by:

tags

What does <meta charset="UTF-8> define?

the character set used

What is an absolute file path?

the full URL to an internet file CODE: <img src="https://www.w3schools.com/images/picture.jpg" alt="Picture">

<input> element

the most important form element can be displayed in several ways, depending on the type attribute.

Using the rows attribute on the <textarea> tag will specify what?

the visible number of lines in a text area

unordered list each list item must have the <li>...</li> tag marked with bullets, by default CODE: <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

used for input fields that should contain a URL address

used for input fields that should contain a color depending on browser support, a color picker can show up in the input field.

used for input fields that should contain a date

used for input fields that should contain a telephone number.

used for input fields that should contain an e-mail address the e-mail address can be automatically validated when submitted CODE: <form> E-mail: <input type="email" name="email"> </form>

used for search fields (a search field behaves like a regular text field)

used to define a client-side script (JavaScript) either contains scripting statements, or points to an external script file through the src attribute.

used to define style information for a single HTML page placed in the <head> section of HTML CODE: <style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style>

<iframe>...</iframe

used to display a web page within a web page SYNTAX: <iframe src="URL"></iframe> **can set width and height of the iframe <iframe src="demo_iframe.htm" height="200" width="300"></iframe> has border by default- can be styled or removed with the style attribute on the opening iframe tag and style="border:none;"

<canvas> element

used to draw graphics, on the fly, via JavaScript only a container for graphics must use JavaScript to actually draw the graphics has several methods for drawing paths, boxes, circles, text, and adding images

used to group related data in a form

Using the <meta> tag how can you take control over the viewport?

Every HTML element has a default display value depending on what type of element it is. What are they?

Block and inline

What does CSS stand for?

Cascading Style Sheets

HTML stands for:

Hyper Text Markup Language

What 3 ways can CSS be added to HTML elements?

Inline, Internal, External

Websites often display content in multiple columns (like a magazine or newspaper) What new semantic elements define the different parts of a web page?

Layout elements

What does the Metadata in the <head> section define?

Metadata typically define the document title, character set, styles, links, scripts, and other meta information.

target="framename"

Opens the linked document in a named frame

What is SVG?

Scalable Vector Graphics used to define graphics for the Web a W3C recommendation has several methods for drawing paths, boxes, circles, text, and graphic images

Specifies a group of one or more columns in a table for formatting

Specifies column properties for each column within a <colgroup> element

True or False: List items can contain new list, and other HTML elements, like images and links, etc.

True

True or False: Use HTML headings for headings only. Don't use headings to make text BIG or bold.

True

True or False: Browsers do not display the HTML tags, but use them to render the content of the page

True

True or False: Floating elements are tied to the document flow, which may harm the flexibility.

True

True or false: With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove any extra spaces and extra lines when the page is displayed.

True

True or false: The browser will not display the html tags, but uses the to determine how to display the document.

True

True or False: The browser expects to find the image in the same folder as the web page.

True if image is in a separate images folder add /images/ before the image file name in the src of the imm element

True or False: The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

True CODE: <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>

True or False: Reserved characters in HTML must be replaced with character entities. (Characters that are not present on your keyboard can also be replaced by entities.)

True case sensitive they can look like this: &entity_name; - easier to remember OR &#entity_number;

True or False: According to the HTML5 standard; the <html>, the <body>, and the <head> tag can be omitted.

True- but not recommended

What does URL stand for?

Universal Resource Locator (or web address)

Is it best to use double quotes or single quotes around an attribute value?

You can use both, even in the same attribute value if there are already quotes

Why is it best practice to use relative file paths (if possible)?

Your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.

What is a diacritical mark?

a "glyph" added to a letter for more info: W3Schools.com

What is an absolute url?

a full web address (includes http://www....)

CSS background-image property

add a background image on an HTML element to add behind an html element, specify the background-image property on the element using the style attribute on the opening tag. CODE: <body style="background-image:url('skies.jpg')"> <h2>There is a background image behind this text. </h2> </body>

adds a caption to a table displays a caption or title above the table must be inserted immediately after the <table> tag CODE: <table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>

CSS border-collapse

allows borders on a table to collapse into one border CODE: table, th, td { border: 1px solid black; border-collapse: collapse; }

allows the user to select a month and year a date picker can show up in the input field

allows the user to select a week and year a date picker can show up in the input field.

Block-level elements

always starts on a new line takes up the full width available (stretches out to the left and right as far as it can) EXAMPLES: <div> <h1> - <h6> <p>...</p> <form>...</form>

defined an ordered list each list item must include the <li>...</li> tag marked with numbers, by default CODE: <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

defines a caption for the <fieldset> element CODE: <form action="/action_page.php"> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"><br><br> <input type="submit" value="Submit"> </fieldset> </form>

defines a clickable button CODE: <button type="button" onclick="alert('Hello World!')">Click Me!</button>

defines a container for navigation links

defines a control for entering a number whose exact value is not important (like a slider control)

defines a drop-down list EXAMPLE: <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>

defines a footer for a document or a section

defines a form that is used to collect user input

defines a fragment of computer code text surrounded by <code> tags is typically displayed in the browser's default monospace font CODE: <code> x = 5; y = 6; z = x + y; </code> RESULT: x = 5; y = 6; z = x + y; **does not preserve extra whitespace and line-breaks...put inside a <pre> element to fix this...

defines a header for a document or a section

defines a heading for the <details> element

defines a multi-line input field (a text area) CODE: <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>

defines a numeric input field -can also set restrictions on what numbers are accepted CODE: <form> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> </form>

<input type="text"> will do what?

defines a one-line text input field CODE: <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form>

defines a password field CODE: <form> User name:<br> <input type="text" name="username"><br> User password:<br> <input type="password" name="psw"> </form> **characters in a password field are masked (shown as asterisks or circles)

defines a reset button that will reset all form values to their default values

defines a section in a document

<input type="submit"> will do what?

defines a submit button (for submitting the form to a form handler) form handler is typically a server page with a script fro processing input data form handler is specified in the form's action attribute CODE: <form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"><br><br> <input type="submit" value="Submit"> </form>

defines a table heading bold and centered by default

defines a variable CODE: Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup> RESULT: Einstein wrote: E = mc2

defines additional details

defines an alternate content for users that do not support client-side scripts

defines an independent self-contained article

defines an option that can be selected by default, the first item in the drop-down list is selected CODE: <option value="fiat" selected>Fiat</option>

defines content aside from the content (like a sidebar)

formmethod attribute

defines the HTTP method for sending form-data to the action URL overrides the method attribute of the <form> element

action attribute

defines the action to be performed when the form is submitted CODE: <form action="/action_page.php">

type attribute of the <ol>tag...5 types

defines the type of the list item marker type="1" items will be numbered (default) type="A" uppercase letters type="a" lowercase letters type="I" uppercase roman numbers type="i" lowercase roman numbers EXAMPLE: <ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> RESULT: A. Coffee B. Tea C. Milk

describes each term

What is a file path?

describes the location of a file in a web site's folder structure used when linking to external files like: Web pages Images Style sheets JavaScripts

description list is a list of terms, with a description of each term EXAMPLE: <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> RESULT: A Description List Coffee - black hot drink Milk - white cold drink

description tag- defines the term (name)

What are the 4 different values for the property list-style type for an unordered list?

disc- bullet circle square none- displays no marker HTML styling: <ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> OR can be styled in CSS

important text font will be bolded added semantic "strong" importance

For stricter validation, how can you close an empty element?

in the opening tag, add a forward slash after the tag name CODE: < br />

name attribute

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 CODE: <form action="/action_page.php"> First name:<br> <input type="text" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"><br><br> <input type="submit" value="Submit"> </form>

inserted (added) text content is underlined

novalidate attribute

is a <form> attribute specifies that the form data should not be validated when submitted

What does <meta name="keywords" content="HTML, CSS, XML, JavaScript"> define?

keywords for search engines

What CSS property is used to define the style of the list item marker?

list-style-type property

rowspan attribute

make a cell span more than one row CODE: <table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table> **makes the column Telephone stretch the height of "2" rows

Class attribute

makes it possible to define equal styles for elements with the same class name

What is Responsive Web Design?

makes your web page look good on all devices (desktops, tablets, and phones) uses CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen -or use responsive style sheet like W3.css

What are symbol entities?

mathematical, technical, and currency symbols, are not present on a normal keyboard for more info: W3Schools.com

What is CSS flex box?

new layout mode in CSS3 ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices **will not work in IE10 and earlier

often used as a container for other HTML elements no required attributes, but both style and class are common when used together with CSS, the <div> element can be used to style blocks of content CODE: <div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. </p> </div> **Paragraph has a black background with white text and 20px of padding around the content.

often used as a container for some text no required attributes, but both style and class are common when used together with CSS, the <span> element can be used to style parts of the text CODE: <h1>My <span style="color:red">Important</span> Heading</h1> **Important is is red text

formnovalidate attribute

overrides the novalidate attribute of the <form> element

provide a secure way to authenticate users specifies a key-pair generator field in a form when the form is submitted, two keys are generated, one private (stored locally) and one public (sent to server-could be used to generate a client certificate to authenticate the user in the future) CODE: <form action="/action_page.php"> Username: <input type="text" name="user"> Encryption: <keygen name="security"> <input type="submit"> </form> <output> ...

represents output from a program or computing system text surrounded by <samp> tags is typically displayed in the browser's default monospace font

represents the result of a calculation (like one performed by a script)

represents user input, like keyboard input or voice commands text surrounded by <kbd> tags is typically displayed in the browser's default monospace font CODE: <p>Save the document by pressing <kbd>Ctrl + S</kbd></p> RESULT: Save the document by pressing Ctrl + S

How do you define a pre-selected option in a drop down list?

selected attribute CODE: <option value="fiat" selected>Fiat</option>

How would you code an image that is also a link?

simply nest the <img> tag inside the <a> tag CODE: <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> </a>

specifies a date and time input field, with no time zone a date picker can show up in the input field CODE: <form> Birthday (date and time): <input type="datetime-local" name="bdaytime"> </form>

placeholder attribute

specifies a hint that describes the expected value of an input field (a sample value or a short description of the format) the hint is displayed in the input field before the user enters a value

specifies a list of pre-defined options for an <input> element -users will see a drop-down list of the pre-defined options as they input data.

formtarget attribute

specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

pattern attribute

specifies a regular expression that the <input> element's value is checked against.

formenctype attribute

specifies how the form data should be encoded when submitted (only for forms with method="post")

form attribute

specifies one or more forms an <input> element belongs to

required attribute

specifies that an input field must be filled out before submitting the form

disabled attribute

specifies that the input field is disabled unusable and unclickable value will not be sent when submitting the form

readonly attribute

specifies that the input field is read only (cannot be changed)

autofocus attribute

specifies that the input field should automatically get focus when the page loads

multiple attribute

specifies that the user is allowed to enter more than one value in the <input> element.

method attribute

specifies the HTTP method (GET or POST) to be used when submitting the form data CODE: <form action="/action_page.php" method="get"> OR <form action="/action_page.php" method="post">

formaction attribute

specifies the URL of a file that will process the input control when the form is submitted overrides the action attribute of the <form> element used with type="submit" and type="image"

<base> element

specifies the base URL and base target for all relative URLs in a page CODE: <base href="https://www.w3schools.com/images/" target="_blank">

step attribute

specifies the legal number intervals for an <input> element

maxlength attribute

specifies the maximum allowed length for the input field

size attribute

specifies the size (in characters) for the input field CODE: <form action=""> First name:<br> <input type="text" name="firstname" value="John" size="40"> </form>

Using the cols attribute on the <textarea> tag will specify what?

specifies the visible width of a text area.

autocomplete attribute

specifies whether a form or input field should have autocomplete on or off. when autocomplete is on, the browser automatically completes the input values based on values that the user has entered before.

height and width attributes

specify the height and width of an <input type="image"> element.

min and max attributes

specify the minimum and maximum values for an <input> element

used to link to external style sheets CODE: <link rel="stylesheet" href="mystyle.css">

<meta>

used to specify which character set is used, page description, keywords, author, and other metadata used by browsers (how to display content) used by search engines (keywords), and other web services.

When should you use GET?

when the submitted form data will be visible in the page address field: /action_page.php?firstname=Mickey&lastname=Mouse -do not use when sending sensitive information, best for short, non-sensitive amounts of data...has size limitations

True or False: Images cannot be a link.

False CODE: <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> </a>

What does GIF stand for?

Graphics Interchange Format allows animated images use same syntax for an animated image as you would a non-animated image

True or False: Some web sites store their images on image servers.

True add absolute url/images/img.jpg to your img element EXAMPLE: <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

True or False: Some HTML elements will display correctly, even if you forget the end tag.

True- but never rely on this, it could produce unexpected results or errors

True or false: HTML also defines special elements for defining text with a special meaning.

True- formatting elements

defines the title of a work browser displays in italic CODE: <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

deleted (removed) text content has a strikethrough

What does CSS do?

describes how HTML elements are to be displayed on screen controls the layout of multiple web pages at once

italic text without any extra importance

add more flexibility when specifying image resources contains a number of <source> elements, each referring to different image sources. This way the browser can choose the image that best fit the current view and/or device each <source> element have attributes describing when their image is the most suitable. browser will use the first <source> element with matching attribute values, and ignore any following <source> elements. shows one picture if the browser window (viewport) is a minimum of 650 pixels, and another image if not, but larger than 465 pixels. CODE: <picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture> **Always specify an <img> element as the last child element of the <picture> element.**

What is a hyperlink?

an HTML link that allows users to click their way from page to page move the mouse over a link, the mouse arrow will turn into a little hand does not have to be text. It can be an image or any other HTML element

<br>

an empty element that indicates a line break in the document CODE: <p>This is<br>a paragraph<br>with line breaks</p> RESULT: This is a paragraph with line breaks.

What CSS property will specify the space between the cells of a table?

border-spacing property no effect if table has collapsed borders

<!DOCTYPE html>

declaration defines this document to be HTML5 not case sensitive must appear only once and at the top of the html

Id attribute

define a specific style for one special element must add an id attribute to the opening tag of the element should be unique within the page HTML CODE: <p id="p01">I am different.</p> CSS CODE: #p01 { color: blue; }

How does internal CSS work?

define a style for a single HTML page defined in the <head> section of an HTML page, within a <style> element CODE: <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head>

How does an external style sheet work?

define the style for many HTML pages change the look of an entire web site, by changing one file add a link to it in the <head> section of the HTML page CODE: <link rel="stylesheet" href="styles.css"> must be saved with a .css file extension must not contain any html code written in any text editor CODE: body { background-color: powderblue; } h1 { color: blue; } p { color: red; }

defines a section that is quoted from another source browser will indent the blockquote element cite="sourcewebsite.com" CODE: <p>Browsers usually indent blockquote elements.</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. </blockquote> RESULT: Browsers usually indent blockquote elements. For 50 years, WWF has been protecting the future of nature.

defines a short quotation browser will insert quotation marks around the <q> element CODE: <p><q>This sentence will have quotation marks.</q></p> RESULT: "This sentence will have quotation marks."

defines a table row

<hr>

defines a thematic break in an HTML page used to separate content (or define a change) will display a thin horizontal line, with a little margin on top and bottom CODE: <h1>This is heading 1</h1> <p>This is some text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> <hr>

defines an abbreviation or an acronym useful for browsers and search-engines will use a tooltip to define the abbreviation

defines an html link CODE: <a href="url">link text</a> EXAMPLE: <a href="https://www.site.com/html/">Visit our HTML tutorial</a>

defines an html table no borders unless specified

defines an image-map (image with clickable areas) the name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map. <map> tag contains a number of <area> tags, that defines the clickable areas in the image-map: CODE: <img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>

defines bi-directional override used to override the current text directio

defines contact information (author/owner) of a document or an article usually displayed in italic browsers will add a line break before and after CODE: <address> Written by John Doe.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>

Conditional Comments

defines some HTML tags to be executed by Internet Explorer only. CODE:

defines subscripted text

defines superscripted text

defines table data data containers of the table can contain text, images, lists, other tables no border unless specified

font-family property

defines the font to be used for an HTML element CODE: <h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p>

text-align property

defines the horizontal text alignment for an HTML element CODE: <h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p>

color property

defines the text color for an HTML element CODE: <h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>

font-size property

defines the text size for an HTML element CODE: <h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p>

HTML bookmarks

used to allow readers to jump to specific parts of a Web page useful if your webpage is very long must first create the bookmark, and then add a link to it CODE: (first, create with an id) <h2 id="C4">Chapter 4</h2> (second, add a link to the bookmark from within the same page) <a href="#C4">Jump to Chapter 4</a> OR (add a link to the bookmark from another page) <a href="html_demo.html#C4">Jump to Chapter 4</a>

How does inline CSS work?

used to apply a unique style to a single HTML element uses the style attribute on the opening tag of the element CODE: <h1 style="color:blue;">This is a Blue Heading</h1>

Comment tags

used to insert comments in the HTML source code SYNTAX:  -not displayed in browser -can help document you html code -place notifications or reminders CODE:  <p>This is a paragraph.</p>  debug by commenting out lines of code, one at a time, to search for errors CODE:

What are attributes?

used to provide additional information about HTML elements all elements have attributes always specified in the start tag usually come in name/value pairs CODE: name="value"

How would you add a tooltip to an element?

using the title attribute lister after the element name in the opening tag CODE: <p title="I'm a tooltip.">

HTML5

Set pelajaran terkait

Ch 31 Hw

Chapter 1 SB

Week 11 Assignment - Structural Abnormalities of the Face, & Head

Chapter 1 What is Science Quiz

abnormal psychology final exam

Chapter 2: Prenatal Development

Art history Chapter 14

Marketing Ch 5

hurst q 1

Business Law - Chapter 9

macro econ exam 1

Craven Ch. 31: Cardiac Function

chemistry final

Psych ch 12 smart book:

Orchestra

Biology Exam 4 Leasi

Microeconomics Chapter 3-5

Chapter 6 homework biology

NSG - 252: Burns

MGMT 333 - Chapter 16