HTML

Ace your homework & exams now with Quizwiz!

The title Attribute (what does it do?)

<p title="I'm a tooltip"> This is a paragraph. </p> Try it Yourself » (has a little sign that pops up whenever you hover over it)

Double quotes around attribute values are the most common in HTML, but single quotes can also be used. In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

HTML paragraphs are defined with the <p> tag:

HTML <cite>

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HSL Value ( show an example)

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, 0% is black, 50% is neither light or dark, 100% is white hsl(0, 100%, 50%)

What does HTML stand for?

Hyper Text Markup Language

The Name Attribute for forms. (html)

If the name attribute is omitted, the data of that input field will not be sent at all

<bdo> for Bi-Directional Override

<bdo dir="rtl">This text will be written from right to left</bdo> Try it Yourself »

The font-size property defines the text size for an HTML element:

<h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p>

In HTML 5 you can omit head

but your shit may crash in older browsers

Create a table with a solid black border that collapses

(CSS) table, th, td { border: 1px solid black; border-collapse: collapse; }

UTF-8 (html)

(Unicode) covers almost all of the characters and symbols in the world.

alpha parameter Is applicable to HSL and RGB values where

0 is full transparency and 1 is all solid

Show an html comment

Conditional Comments

IE, has been programmed to recognize the special <!--[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.

Mandatory XHTML structure (html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title of document</title> </head> <body> some content </body> </html>

The lang Attribute (The language is declared with the lang attribute. Declaring a language is important for accessibility applications (screen readers) and search engines:)

<!DOCTYPE html> <html lang="en-US"> <body>

Add New Elements to HTML (show an example how and apply it)

<!DOCTYPE html> <html> <head> <script>document.createElement("myHero") // for IE 9 and earlier</script> <style> myHero { display: block; background-color: #dddddd; padding: 50px; font-size: 30px; } </style> </head> <body> <h1>A Heading</h1> <myHero>My Hero Element</myHero> </body> </html>

Create A Simple HTML Document

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> Try it Yourself »

To make an image responsive using html only

Relative File Paths (what is it?)

A relative file path points to a file relative to the current page. In this example the file path points to a file in the images folder located at the root of the current web: <img src="/images/picture.jpg" alt="Mountain">

<code> tag

Changes the font to look like you're writing in code

HTML Links - Image as Link (play around with some styling experiment)

Done

CSS can be added to HTML elements in 3 ways:

Inline - by using the style attribute in HTML elements Internal - by using a <style> element in the External - by using an external CSS file

HTML Description Lists (an example of a description list)

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

When all RGB values are equal, you will get

a shade of gray

Server-Sent Events

allow a web page to get updates from a server.

Helper applications (plug-ins)

are computer programs that extend the standard functionality of a web browser.

<body> element

contains the visible page content

Before using web storage, check browser support for localStorage and sessionStorage: (show how you would check)

if (typeof(Storage) !== "undefined") { // Code for localStorage/sessionStorage. } else { // Sorry! No Web Storage support.. }

Common default filenames are

index.html, index.htm, default.html, and default.htm. but just use index.html

A URL (html)

is another word for a web address.

is used to draw graphics on a web page.

In css if you put a tag like p before a #

it will only specify to <p>

A react component cannot change

it's own props

How to you remove a local storage item? (html)

localStorage.removeItem("lastname");

nest code tag in pre elements so that you can

Learn more about image mapping coordinates

okay broski

How to View HTML Source?

right click and click view source

Show a different way of putting a local storage.

// Store localStorage.lastname = "Smith"; // Retrieve document.getElementById("result").innerHTML = localStorage.lastname;

Syntax For HTML5Shiv for IE8 and earlier

//IT must be placed in between head elements <head> <meta charset="UTF-8">  </head>

When to Use GET? The default method when submitting form data is GET (html)

1. Appends form-data into the URL in name/value pairs 2. The length of a URL is limited (about 3000 characters) 3. Never use GET to send sensitive data! (will be visible in the URL) 4. Useful for form submissions where a user want to bookmark the result 5. GET is better for non-secure data, like query strings in Google

The HTML <meta> Element The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata. Metadata is used by browsers (how to display content), by search engines (keywords), and other web services. (name and show all the uses you can use with a meta tag>

1. Define the character set used <meta charset="UTF-8"> 2. Define a description of your web page <meta name="description" content="Free Web tutorials"> 3. Define keywords for search engines <meta name="keywords" content="HTML, CSS, XML, JavaScript"> 4. Define the author of a page: <meta name="author" content="John Doe"> 5. Refresh document every 30 seconds: <meta http-equiv="refresh" content="30">

When to Use POST? (html)

1. POST has no size limitations, and can be used to send large amounts of data. 2. Form submissions with POST cannot be bookmarked

Text Input show an example of a first name last name text input. (html)

<form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form>

input type number (html)

<form> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> </form>

Input Type Week

<form> Select a week: <input type="week" name="week_year"> </form>

Input Type Color (html)

<form> Select your favorite color: <input type="color" name="favcolor"> </form>

<input type="password"> (html)

<form> User name:<br> <input type="text" name="username"><br> User password:<br> <input type="password" name="psw"> </form>

<form> Element (html)

<form> ....form stuff </form>

The color property defines the text color for an HTML element

<h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>

The height and width Attributes (html)

input reset

The placeholder Attribute (html)

The <input> Element (html)

<input type="text"> Defines a one-line text input field <input type="radio"> Defines a radio button (for selecting one of many choices) <input type="submit"> Defines a submit button (for submitting the form)

<textarea> is used for providing multiple line input.

<label for="textArea">Textarea</label> <textarea id="textArea" rows="2" cols="15"> </textarea>

How to define a pre-selected option in a select list? (html)

You add selected in the option <option value="fiat" selected>Fiat</option>

HTML5 added the following attributes for <input>:

autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step and the following attributes for <form>: autocomplete novalidate

What kind of element is <div> block or inline

block!

Good CSS example

body { background-color: lightgrey; font-family: "Arial Black", Helvetica, sans-serif; font-size: 16em; color: black; }

The <div> Element

The <div> element is often used as a container for other HTML elements. The <div> element has 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:

The list Attribute for input (html)

The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.

The multiple Attribute

The multiple attribute specifies that the user is allowed to enter more than one value in the <input> element. The multiple attribute works with the following input types: email, and file. <form action="/action_page.php"> Select images: <input type="file" name="img" multiple> <input type="submit"> </form>

Playing a YouTube Video in HTML (steps)

To play your video on a web page, do the following: Upload the video to YouTube Take a note of the video id Define an <iframe> element in your web page Let the src attribute point to the video URL Use the width and height attributes to specify the dimension of the player Add any other parameters to the URL (see below)

The Submit Button (html)

defines a button for submitting the 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:

<br>

defines a line break.

Basic syntax of a domain name (html)

scheme://prefix.domain:port/path/filename Where: scheme - defines the type of Internet service (most common is http or https) prefix - defines a domain prefix (default for http is www) domain - defines the Internet domain name (like w3schools.com) port - defines the port number at the host (default for http is 80) path - defines a path at the server (If omitted: the root directory of the site) filename - defines the name of a document or resource

The difference between <article> <div> <section> are semantics

screen readers know how to deal with section and article whereas div is more arbitrary

Create a table with the heading text left-align

th { text-align: left}

For image attributes always add

the alt attribute

The Method Attribute (html)

the method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data: where get shows the data input int he URL bar and POST does not

The <html> element is

the root element of an HTML page

HTML Web Storage Objects HTML web storage provides two objects for storing data on the client (what are they)?

window.localStorage - stores data with no expiration date window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

Tim Berners-Lee invented

www and html

The HTML charset Attribute. How do display? (html)

For HTML 4 : <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> For HTML 5: <meta charset="UTF-8">

10vw means

10% of the view port width

<input> type text (html)

<form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form>

collection_select (what does it do and show an example in forms)

<%= form_for @post do |f| %> <%= f.collection_select :category_id, Category.all, :id, :name %> <%= f.text_field :content %> <%= f.submit %> <% end %>

E-mail links Create an email prompt link

<a href="mailto:[email protected]">Send email to nowhere</a>

Show an email link that includes a cc, bcc, subject and body:

<a href="mailto:[email protected][email protected]&[email protected]&subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email"> Send mail with cc, bcc, subject and body </a>

In HTML, links are defined with the <a> tag

Create and example of an html <audio>

<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

An iframe can be used as the target frame for a link. The target attribute of the link must refer to the name attribute of the iframe:

<body> <iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p> <p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p> </body>

<button> element (html)

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

You can use onclick in (html)?

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

create a basic <canvas> circle

<canvas id="circ" height="100" width="200" style="border: solid"> </canvas> var c = document.getElementById("circ"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();

Create a blank slate canvas

Create text "Hello World" in <canvas>

Show an example of local storage with a last name input

<div id="result"></div> <script> // Check browser support if (typeof(Storage) !== "undefined") { // Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname"); } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage..."; } </script> Note: Name/value pairs are always stored as strings. Remember to convert them to another format when needed!

Create an html video with play/pause buttons sm medium and lg videos

<div style="text-align:center"> <button onclick="playPause()">Play/Pause</button> <button onclick="makeBig()">Big</button> <button onclick="makeSmall()">Small</button> <button onclick="makeNormal()">Normal</button> <br><br> <video id="video1" width="420"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> </div> <script> var myVideo = document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width = 560; } function makeSmall() { myVideo.width = 320; } function makeNormal() { myVideo.width = 420; } </script>

You can use <embed> for html or images

<embed> Element

The disabled Attribute for input (html)

<form action=""> First name:<br> <input type="text" name="firstname" value="John" disabled> </form>

<output> create an example (html) basically some programming shit

The autocomplete Attribute (html)

<form action="/action_page.php" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form>

You can group from data using field set and legend show how (html)

<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>

<datalist> (html5) show that example

Create a selected list with a visible size of 3 (html)

<form action="/action_page.php"> <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> <br><br> <input type="submit"> </form>

create an example of a <select> form (with a submit) (html)

<form action="/action_page.php"> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit"> </form>

<input type="reset"> (html)

<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"> <input type="reset"> </form>

<input type="submit"> (html)

Input Type Checkbox (html)

Input Type Radio (html)

<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>

Radio Button Input (create a gender one) (html)

<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>

Input Type Range (html)

Input Type Url

<form> Add your homepage: <input type="url" name="homepage"> </form>

Input Type Datetime-local (html)

<form> Birthday (date and time): <input type="datetime-local" name="bdaytime"> </form>

input type month (html)

<form> Birthday (month and year): <input type="month" name="bdaymonth"> </form>

Input Type Date (html)

<form> Birthday: <input type="date" name="bday"> </form>

Input Type Email (html)

Input Type Date with restriction (html)

<form> Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br> </form>

The <span> Element The <span> element is often used as a container for some text. The <span> element has 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:

<h1>My <span style="color:red">Important</span> Heading</h1>

Java Script can change HTMl styles (create a red 25px and yellow background with a button to activate it.)

<h1>My First JavaScript</h1> <p id="demo">JavaScript can change the style of an HTML element.</p> <script> function myFunction() { document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow"; } </script> <button type="button" onclick="myFunction()">Click Me!</button>

Show an example of a document fragment.

<h2 id="Mailing_address">Mailing address</h2> <p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>

The HTML <head> Element (name a few tags placed in the html head)

<head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, links, scripts, and other meta information. The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>

Use these tags to set up your layout

<header> - Defines a header for a document or a section <nav> - Defines a container for navigation links <section> - Defines a section in a document <article> - Defines an independent self-contained article <aside> - Defines content aside from the content (like a sidebar) <footer> - Defines a footer for a document or a section <details> - Defines additional details <summary> - Defines a heading for the <details> element

An iframe is used to display a web page within a web page

You can set a height and width to your iframe

With CSS, you can also change the size, style and color of the iframe's border:

Create an iframe withoutbthe default border (html)

img tag

Setting The Viewport (to make content display properly no matter what viewport)

Create a basic ordered list

<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

Create a <p> with Hello World using Javascript

<p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script>

Geolocation Do an example with longitude and latitude

<p>Click the button to get your coordinates.</p> <button onclick="getLocation()">Try It</button> <p id="demo"></p> <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>

Geolocation Object - Other interesting Methods The Geolocation object also has other interesting methods: watchPosition() - Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car). clearWatch() - Stops the watchPosition() method.

<p>Click the button to get your coordinates.</p> <button onclick="getLocation()">Try It</button> <p id="demo"></p> <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>

Fill a <canvas> with an image already on page

<p>Image to use:</p> <img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"> <p>Canvas to fill:</p> <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <p><button onclick="myCanvas()">Try it</button></p> <script> function myCanvas() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img,10,10); } </script>

create and svg logo

The sessionStorage Object The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab. The following example counts the number of times a user has clicked a button, in the current session (SHOW IT)

You can also access classes using JavaScript

Show a full code example of a web worker

How do you allow multiple selection in a select form? (html)

<select name="cars" size="4" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>

Create a drag an drop event with a picture.

create an svg circle with a yellow fill and green border

Create a svg pentagram

create an svg rectangle with a blur filling and black border.

SVG Rounded Rectangle with pink fill grey border

HTML Table - Cells that Span Many Rows

<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>

<textarea> show an example ad define the size using css (html)

<textarea name="message" style="width:200px; height:600px"> The cat was playing in the garden. </textarea> Try it Yourself »

HTML <video> Element create an example of one

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads. The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format. The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

Show an example of and HTML video

<video width="400" controls> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video>

HTML File Paths

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

Close Empty HTML Elements In HTML5, it is optional to close empty elements.

Allowed: <meta charset="utf-8"> Also Allowed: <meta charset="utf-8" />

Using the max-width Property

Allows an image to scale down but not be larger than it's original size. ie <img src="img_girl.jpg" style="max-width:100%;height:auto;">

Absolute File Paths (what is it?)

An absolute file path is the full URL to an internet file: <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

Playing Videos in HTML before HTML 5

Before HTML5, a video could only be played in a browser with a plug-in (like flash). The HTML5 <video> element specifies a standard way to embed a video in a web page.

What is the difference between block elements and inline element

Block elements usually start on a new line. 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 Inline usually takes the necessary space.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. To select an HTML element, JavaScript very often use the document.getElementById(id) method. This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":

<b>

Defines bold text

<del>

Defines deleted text

<em>

Defines emphasized text

Defines important text

<track> element describe and use

Defines text tracks in media players

Blank Lines and Indentation

Do not add blank lines without a reason. For readability, add blank lines to separate large or logical code blocks. For readability, add two spaces of indentation. Do not use the tab key. Do not use unnecessary blank lines and indentation. It is not necessary to indent every element:

Nested HTML Lists List can be nested (lists inside lists)

Done

A Special Style for One Table To define a special style for a special table, add an id attribute to the table Create 2 tables one with an id atribute

Done table#t01 { width: 100%; background-color: #f1f1c1; }

The min and max Attributes for input (html)

Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">

Empty HTML Elements (Show exception to when one should be closed)

HTML elements with no content are called empty elements. <br> is an empty element without a closing tag (the <br> tag defines a line break). Empty elements can be "closed" in the opening tag like this: <br />. HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.

File Extensions

HTML files should have a .html or .htm extension. CSS files should have a .css extension. JavaScript files should have a .js extension.

URLs can only be sent over the Internet using the ASCII character-set. That means (html)

If your are using UTF-8 it will be converted to ASCII

<hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

It's a damn line break

XHTML (html)

Is strict html. With good practices. everything must be quotes. You must have a header.

Best Practice? Is it better to use relative files paths or absolute?

It is a best practice to use relative file paths (if possible). When using relative file paths, 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.

The novalidate Attribute

Means you form wont force yuo to put the correct type of attribute <form action="/action_page.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>

HTML Symbols

More symbols that use & but I can't memorize https://www.w3schools.com/html/html_symbols.asp

In HTML, colors can also be specified using (what are they?)

RGB values, HEX values, HSL values, RGBA values, and HSLA values: (where A standts for alpha)

Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML. Canvas draws 2D graphics, on the fly (with a JavaScript). SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element. In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape. Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

The readonly Attribute for input (html)

Specifies a read only situation where it cannot be edited. the readonly attribute makes a input value frozen so you cant edit it <form action=""> First name:<br> <input type="text" name="firstname" value="John" readonly> </form>

The HTML <head> element has nothing to do with HTML headings.

The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed. The <head> element is placed between the <html> tag and the <body> tag: <!DOCTYPE html> <html> <head> <title>My First HTML</title> <meta charset="UTF-8"> </head> <body>

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text field). <form> Search Google: <input type="search" name="googlesearch"> </form>

Input Type Tel (html)

The <input type="tel"> is used for input fields that should contain a telephone number. The tel type is currently supported only in Safari 8 <form> Telephone: <input type="tel" name="usrtel"> </form>

Input Type Time

The <input type="time"> allows the user to select a time (no time zone). Depending on browser support, a time picker can show up in the input field <form> Select a time: <input type="time" name="usr_time"> </form>

<input> (html)

The <input> element can be displayed in several ways, depending on the type attribute. ie <input name="firstname" type="text" >

<textarea> show an example with size (html)

The <textarea> element defines a multi-line input field ie. <textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>

CSS Border (Create one around a <p>)

The CSS border property defines a border around an HTML element p { border: 1px solid powderblue; }

CSS Fonts (show three properties and examples)

The CSS color property defines the text color to be used. The CSS font-family property defines the font to be used. The CSS font-size property defines the text size to be used.

<var>

The HTML <var> element defines a variable. The variable could be a variable in a mathematical expression or a variable in programming context Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.

The Action Attribute (html)

The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web 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">

The autofocus Attribute

The autofocus attribute specifies that the input field should automatically get focus when the page loads <input type="text" name="fname" autofocus>

The form Attribute fro input (html)

The form attribute specifies one or more forms an <input> element belongs to. Tip: To refer to more than one form, use a space-separated list of form ids. <form action="/action_page.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

The formaction Attribute (html)

The formaction attribute specifies the URL of a file that will process the input control when the form is submitted. The formaction attribute overrides the action attribute of the <form> element. The formaction attribute is used with type="submit" and type="image" <form action="/action_page.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"><br> <input type="submit" formaction="/action_page2.php" value="Submit as admin"> </form>

The formenctype Attribute (html)

The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with method="post"). The formenctype attribute overrides the enctype attribute of the <form> element. The formenctype attribute is used with type="submit" and type="image". <form action="/action_page_binary.asp" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"> </form>

The formmethod Attribute

The formmethod attribute defines the HTTP method for sending form-data to the action URL. The formmethod attribute overrides the method attribute of the <form> element. The formmethod attribute can be used with type="submit" and type="image". <form action="/action_page.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> <input type="submit" formmethod="post" value="Submit using POST"> </form>

The formnovalidate Attribute

The formnovalidate attribute overrides the novalidate attribute of the <form> element. The formnovalidate attribute can be used with type="submit". <form action="/action_page.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Submit"><br> <input type="submit" formnovalidate value="Submit without validation"> </form>

The formtarget Attribute

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. The formtarget attribute overrides the target attribute of the <form> element. The formtarget attribute can be used with type="submit" and type="image". <form action="/action_page.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit as normal"> <input type="submit" formtarget="_blank" value="Submit to a new window"> </form>

<kbd> element

The kbd element represents user input: Save the document by pressing Ctrl + S It just changes the font to MonoSpace

The pattern Attribute

The pattern attribute specifies a regular expression that the <input> element's value is checked against. The pattern attribute works with the following input types: text, search, url, tel, email, and password Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

The step Attribute

The step attribute specifies the legal number intervals for an <input> element. <input type="number" name="points" step="3">

style attribute

The style attribute is used to specify the styling of an element, like color, font, size etc.

The Target Attribute (html)

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": ie: <form action="/action_page.php" target="_blank"> Other legal values are "_parent", "_top", or a name representing the name of an iframe.

The value Attribute for input

The value attribute specifies the initial value for an input field: <form action=""> First name:<br> <input type="text" name="firstname" value="John"> </form>

What is the caveat about height and width attributes

The width and height attributes always defines the width and height of the image in pixels.

The getCurrentPosition() Method - Return Data

This will return data based on what you are looking for

HTML Encoding Charset (Character Sets)

To display an HTML page correctly, a web browser must know which character set (character encoding) to use.

Non-breaking Space (HTML?

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 &nbsp

The default character encoding in HTML5 is

UTF-8

URL means (html)

Uniform Resource Locators

The required Attribute (html)

Username: <input type="text" name="usrname" required>

WHATWG

Web Hypertext Application Technology Working Group

What is a web worker? And name the steps

When executing scripts in an HTML page, the page becomes unresponsive until the script is finished. A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background. 1. Check if it is browser supported 2. Create a web worker file (basically an iteration) (Named file) 3. Create a web worker object 4.Terminate the web worker

What is HTML Web Storage?

With web storage, web applications can store data locally within the user's browser. Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server. Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

<samp> tag (html)

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

YouTube Video Id

YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video. You can use this id, and refer to your video in the HTML code.

element defines an embedded object within an HTML document. It is used to embed plug-ins (like Java applets, PDF readers, Flash Players) in web pages <object width="400" height="50" data="bookmark.swf"></object>

Which attribute of an input element can be used to skip the validation of form?

formnovalidate

With JS create a bulb on bulb of picture function

function light(sw) { var pic; if (sw == 0) { pic = "pic_bulboff.gif" } else { pic = "pic_bulbon.gif" } document.getElementById('myImage').src = pic; } </script> <img id="myImage" src="pic_bulboff.gif" width="100" height="180"> <p> <button type="button" onclick="light(1)">Light On</button> <button type="button" onclick="light(0)">Light Off</button> </p>

Create your geolocation add your handlers

function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML = "User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred." break; } }

Create a server sent event that tell time using php

https://www.w3schools.com/html/html5_serversentevents.asp var source = new EventSource("demo_sse.php"); source.onmessage = function(event) { document.getElementById("result").innerHTML += event.data + "<br>"; }; //php <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?>

Common Video Formats and Audio

https://www.w3schools.com/html/html_media.asp

The HTML <base> Element. (sets a url location where all subsequent anchor tags will refer to.)

he <base> element specifies the base URL and base target for all relative URLs in a page: <html> <head> <title>Page Title</title> <base href="https://www.w3schools.com/images/" target="_blank"> </head> <body> <img src="html5.gif"> <p>Since we have specified a base URL, the browser will look for the image "html5.gif" at "https://www.w3schools.com/images/html5.gif"</p> <p><a href="https://www.w3schools.com">W3Schools</a></p> <p>The link above opens in a new window. This is because the base target is set to "_blank".</p> </body> </html>

HTML5 defines eight new semantic elements. All these are block-level elements (name them and display them as though in an old browser using CSS)

header, section, footer, aside, nav, main, article, figure { display: block; }

<title> element

specifies a title for the document

The maxlength Attribute for input (html)

specifies the allowed length for the input field <form action=""> First name:<br> <input type="text" name="firstname" maxlength="10"> </form>

The size Attribute for input (html)

specifies the amount of characters <form action=""> <input type="text" name="firstname" value="John" size="40"> </form>

tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support client-side scripts

this example can be used when you use notepad

There are type for ordered lists. Name all of them. (code examples)

type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers

HTML entities

uses & and an entity name for characters that will be confused for code in HTML reference (https://www.w3schools.com/html/html_entities.asp)

Create a "Hello World" text using <canvas> stroke text

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World",10,50);

create a <canvas> line from top left to bottom right

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke();

Create a color linear gradient using <canvas> red

var c = document.getElementById("text"); var ctx = c.getContext("2d"); //Create Gradient var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); //Fill Gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80);

Create a color radial gradient using <canvas> red

var c = document.getElementById("text"); var ctx = c.getContext("2d"); //Create Gradient var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); //Fill with Gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80);

Google geolocation API only works

when the site is under HTTPS

The id Attribute (How can it be used?)

<p id="p01">I am different</p> #p01 { color: blue; }

Create a table with a solid black border

(CSS) table, th, td { border: 1px solid black; }

Local Links "What does that mean?"

<a href="html_images.asp">HTML Images</a> it uses a folder in the same website.

HTML links are defined with the <a> tag:

The HTML <address> element defines contact information (author/owner) of a document or an article.

<address> Written by John Doe.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>

You can set the background color for HTML elements: such as <p> and <h1> tags

<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>

Border Color You can set the color of borders of tags (show an example with a couple of tags)

<h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>

Inline CSS

<h1 style="color:blue;">This is a Blue Heading</h1>

The font-family property defines the font to be used for an HTML element

<h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p>

The text-align property defines the horizontal text alignment for an HTML element

<h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p>

HTML bookmarks (You've done this shit)

<h2 id="C4">Chapter 4</h2> <a href="#C4">Jump to Chapter 4</a> Or you can jump from another page in the same website <a href="html_demo.html#C4">Jump to Chapter 4</a>

Internal CSS An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element:

<head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head>

Html background image (how do you do it?) (also try it on a p element)

<html> <body style="background-image:url('clouds.jpg')"> <h2>Background Image</h2> <p>By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the BODY element.</p> </body> </html> (note that it is added in the body tag)

External CSS An external style sheet is used to define the style for many HTML pages. With an external style sheet, you can change the look of an entire web site, by changing one file! To use an external style sheet, add a link to it in the <head> section of the HTML page:

Images in Another Folder If not specified, the browser expects to find the image in the same folder as the web page. However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:

You can use the style attribute to specify the width and height of an image or Alternatively, you can use the width and height attributes (Show both examples)

HTML images are defined with the <img> tag.

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> Try it Yourself »

Image Maps Use the <map> tag to define an image-map. An image-map is an image with clickable areas. (Find a damn picture create some image map)

External References External style sheets can be referenced with a full URL or with a path relative to the current web page. This example uses a full URL to link to a style sheet:

Image Floating Use the CSS float property to let the image float to the right or to the left of a text: (float and image with a p element)

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> The image will float to the right of the text.</p> <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> The image will float to the left of the text.</p> *Please use the CSS float property. The align attribute is deprecated in HTML 4, and not supported in HTML5.*

The HTML <blockquote> element (create one and also cite it)

<p>Here is a quote from WWF's website:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>

The HTML <abbr>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

The HTML <q> element defines

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

<picture> Element (add multiple pictures with width restrictions to see what happens)

The HTML <pre> element defines preformatted text

<pre> 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. </pre>

You can style anchor tags

The class Attribute To define a style for a special type of elements, add a class attribute to the element

Do some advance styling for with the table

Create a table with some extra padding (HTML)

A caption tag is like a title for a table

Create an HTML table with extra-border spacing

HTML Table - Cells that Span Many Columns (do a heading that spans 2)

<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> Try it Yourself »

The HTML style attribute has the following syntax

Create a basic ordered list.

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

<ins>

Defines inserted text (underlines it)

<i>

Defines italic text

<mark>

Defines marked/highlighted text

<small>

Defines smaller text

<sub>

Defines subscripted text

<sup>

Defines superscripted text

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>

External Paths (wtf is this??)

External pages can be referenced with a full URL or with a path relative to the current web page. This example uses a full URL to link to a web page: <a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

In HTML, a color can be specified using a hexadecimal value in the form

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00)

CSS Margin

The CSS margin property defines a margin (space) outside the border

CSS Padding (what is it and show an example)

The CSS padding property defines a padding (space) between the text and the border p { border: 1px solid powderblue; padding: 30px; }

HTML Links - The target Attribute (show all of them)

The target attribute specifies where to open the linked document. The target attribute can have one of the following values: 1 _blank - Opens the linked document in a new window or tab 2 _self - Opens the linked document in the same window/tab as it was clicked (this is default) 3 _parent - Opens the linked document in the parent frame 3 _top - Opens the linked document in the full body of the window 4 framename - Opens the linked document in a named frame

<!DOCTYPE html>

declaration defines this document to be HTML5

Unordered lists have style types What are they and use examples of them all?

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 <ul style="list-style-type:disc"> <ul style="list-style-type:circle"> <ul style="list-style-type:square"> <ul style="list-style-type:none">

HTML headings are defined with the <h1> to <h6> tags.

done

create a navigation bar without bootstrap

done

Explain the difference between padding and margin

padding is on the inside and border is on the outside

RGB Value In HTML, a color can be specified as an RGB value, using this formula: (code out some random colors) RGB

rgb(red, green, blue) Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255. For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0. To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0). To display the color white, all color parameters must be set to 255, like this: rgb(255, 255, 255).

HTML

Related study sets

American Government 120 critical Exercise #1

Reconstruction Review Questions

Chapter 5 Exam (Earthquakes Throughout the U.S and Canada)

Math - Two-Step Equations

Chapter 12

CISSP All-in-One Exam Guide Part 7

Organizational Behavior

PSYCH 3420 Final Questions

MGT - 4385 - Chapter 9 Concepts

Global Business Final T&F

Social Studies Section 1 Chapter 4

Prep-U for Chapter 27 - Safety, Security, and Emergency Preparedness

Z370 Final - Practice Questions

Man3240 test 2

ACC2070 Test 2

ASTD 284 Final Set 1 of 3

OPERATORS CLASS 4

CH43 Pediatric Emergencies (started)

OPS 1

NEWM-N 115