HTML

HTML Links - Hyperlinks

1, an absolute URL (a full web address). 2, a relative URL (without https://www....). A local link (link to the same web site)

HTML Comment Tags

<!-- Write your comments here -->

Iframe - Remove the Border

<iframe src="demo_iframe.htm" style="border:none;"></iframe>

WHAT IS FORM-HANDLER?

<input type="submit"> 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: EG. <form action="/action_page.php"> /action_page.php". This page contains a server-side script that handles the form data:

The HTML <meta> Element

<meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe"> Refresh document every 30 seconds: <meta http-equiv="refresh" content="30">

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

<tagname style="property:value;">

Setting The Viewport <meta name="viewport" content="width=device-width, initial-scale=1.0">

A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

HTML Uniform Resource Locators

A URL is another word for a web address. A URL can be composed of words (w3schools.com), or an Internet Protocol (IP) address (192.68.20.50).

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). Block level elements in HTML: <address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><output><p><pre><section><table><tfoot><ul><video>

What is HTML Screen Readers?

A screen reader is a software program that reads the HTML code, converts the text, and allows the user to "listen" to the content. Screen readers are useful for people who are visually impaired or learning disabled.

what is HTML attribute?

All HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes usually come in name/value pairs like: name="value"

Absolute File Paths

An absolute file path is the full URL to an internet file:

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary. Block level elements in HTML: <address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><output><p><pre><section><table><tfoot><ul><video>

And 2 data types that cannot contain values

And 2 data types that cannot contain values: null undefined

Automatic String Conversion

Automatic String Conversion JavaScript automatically calls the variable's toString() function when you try to "output" an object or a variable: document.getElementById("demo").innerHTML = myVar; // if myVar = {name:"Fjohn"} // toString converts to "[object Object]" // if myVar = [1,2,3,4] // toString converts to "1,2,3,4" // if myVar = new Date() // toString converts to "Fri Jul 18 2014 09:08:55 GMT+0200"

Converting Numbers to Strings

Converting Numbers to Strings The global method String() can convert numbers to strings. It can be used on any type of numbers, literals, variables, or expressions: eg. String(100 + 23) // returns a string from a number from an expression The Number method toString() does the same. toExponential() toFixed() toPrecision() Converting Booleans to Strings String(false) // returns "false" false.toString() // returns "false" The global method String() can convert dates to strings. String(Date()) Date().toString()

Converting Strings to Numbers

Converting Strings to Numbers The global method Number() can convert strings to numbers. Strings containing numbers (like "3.14") convert to numbers (like 3.14). Empty strings convert to 0. Anything else converts to NaN (Not a number). eg. Number("99 88") // returns NaN parseFloat() parseInt() only whole numbers bring back The unary + operator can be used to convert a variable to a number: eg. var y = "5"; // y is a string var x = + y; // x is a number booleans to a number Number(false) // returns 0 Number(true) // returns 1 The date method getTime() does the same. d = new Date(); d.getTime() // returns 1404568027739

<head>

Defines information about the document

<meta>

Defines metadata about an HTML document

scheme://prefix.domain:port/path/filename

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

HTML Formatting Elements

Formatting elements were designed to display special types of text: <b> - Bold text <strong> - Important text <i> - Italic text <em> - Emphasized text <mark> - Marked text <small> - Small text <del> - Deleted text <ins> - Inserted text <sub> - Subscript text <sup> - Superscript text

What is HTML

HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements are the building blocks of HTML pages HTML elements are represented by tags HTML tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page

HTML Layout Techniques There are five different ways to create multicolumn layouts. Each way has its pros and cons:

HTML tables (not recommended) CSS float property CSS flexbox CSS framework CSS grid

Media Queries eg. @media screen and (max-width: 800px) { .left, .main, .right { width: 100%; /* The width is 100%, when the viewport is 800px or smaller */ } }

In addition to resize text and images, it is also common to use media queries in responsive web pages. With media queries you can define completely different styles for different browser sizes.

Explicit Function Binding The call() and apply() methods are predefined JavaScript methods. They can both be used to call an object method with another object as argument. You can read more about call() and apply() later in this tutorial.

In this example, when calling person1.fullName with person2 as argument, this will refer to person2, even if it is a method of person1: Example var person1 = { fullName: function() { return this.firstName + " " + this.lastName; } } var person2 = { firstName:"John", lastName: "Doe", } person1.fullName.call(person2); // Will return "John Doe"

JavaScript Data Types

JavaScript Data Types In JavaScript there are 5 different data types that can contain values: string number boolean object function

JavaScript Type Conversion

JavaScript Type Conversion JavaScript variables can be converted to a new variable and another data type: By the use of a JavaScript function Automatically by JavaScript itself

JavaScript Type Conversion

JavaScript Type Conversion Number() converts to a Number, String() converts to a String, Boolean() converts to a Boolean.

HTML File Paths A file path describes the location of a file in a web site's folder structure.

Path Description <img src="picture.jpg"> picture.jpg is located in the same folder as the current page <img src="images/picture.jpg"> picture.jpg is located in the images folder in the current folder <img src="/images/picture.jpg"> picture.jpg is located in the images folder at the root of the current web <img src="../picture.jpg"> picture.jpg is located in the folder one level up from the current folde

What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):

HTML Quotation and Citation Elements

Tag Description <abbr> Defines an abbreviation or acronym <address> Defines contact information for the author/owner of a document <bdo> Defines the text direction <blockquote> Defines a section that is quoted from another source <cite> Defines the title of a work <q> Defines a short inline quotation

What does a doctype do

The <!DOCTYPE html> declaration defines this document to be HTML5 The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly. The <html> element is the root element of an HTML page The <head> element contains meta information about the document The <title> element specifies a title for the document The <body> element contains the visible page content The <h1> element defines a large heading The <p> element defines a paragraph

The HTML <base> Element

The <base> element specifies the base URL and base target for all relative URLs in a page:

Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form. The <legend> element defines a caption for the <fieldset> element.

The Data Type of typeof

The Data Type of typeof The typeof operator is not a variable. It is an operator. Operators ( + - * / ) do not have any data type. But, the typeof operator always returns a string (containing the type of the operand).

The <form> Element

The HTML <form> element defines a form that is used to collect user input:

Show Different Images Depending on Browser Width

The HTML <picture> element allows you to define different images for different browser window sizes. <picture> <source srcset="img_smallflower.jpg" media="(max-width: 600px)"> <source srcset="img_flowers.jpg" media="(max-width: 1500px)"> <source srcset="flowers.jpg"> <img src="img_smallflower.jpg" alt="Flowers"> </picture>

The JavaScript this Keyword

The JavaScript this keyword refers to the object it belongs to. This has different values depending on where it is used.

The constructor Property

The constructor Property The constructor property returns the constructor function for all JavaScript variables. Example "John".constructor // Returns function String() {[native code]} (3.14).constructor // Returns function Number() {[native code]} false.constructor // Returns function Boolean() {[native code]} [1,2,3,4].constructor // Returns function Array() {[native code]} {name:'John',age:34}.constructor // Returns function Object() {[native code]} new Date().constructor // Returns function Date() {[native code]} function () {}.constructor // Returns function Function(){[native code]}

The data type

The data type of NaN is number The data type of an array is object The data type of a date is object The data type of null is object The data type of an undefined variable is undefined * The data type of a variable that has not been assigned a value is also undefined *

WHAT is The Method Attribute for?

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data: when GET is used, the submitted form data will be visible in the page address field:

What is The purpose of a web browser

The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them. The browser does not display the HTML tags, but uses them to determine how to display the document:

Automatic Type Conversion When JavaScript tries to operate on a "wrong" data type, it will try to convert the value to a "right" type.

The result is not always what you expect: 5 + null // returns 5 because null is converted to 0 "5" + null // returns "5null" because null is converted to "null" "5" + 2 // returns "52" because 2 is converted to "2" "5" - 2 // returns 3 because "5" is converted to 5 "5" * "2" // returns 10 because "5" and "2" are converted to 5 and 2

Responsive Text Size

The text size can be set with a "vw" unit, which means the "viewport width".

the specific purpose if these attributes .

The title attribute provides additional "tool-tip" information The href attribute provides address information for links The width and height attributes provide size information for images The alt attribute provides text for screen readers

There are 3 types of objects:

There are 3 types of objects: Object Date Array

URL Encoding

URLs can only be sent over the Internet using the ASCII character-set. If a URL contains characters outside the ASCII set, the URL has to be converted. URL encoding converts non-ASCII characters into a format that can be transmitted over the Internet.

summary link

Use the <a> element to define a link Use the href attribute to define the link address Use the target attribute to define where to open the linked document Use the <img> element (inside <a>) to use an image as a link Use the id attribute (id="value") to define bookmarks in a page Use the href attribute (href="#value") to link to the bookmark

summary

Use the HTML <img> element to define an image Use the HTML src attribute to define the URL of the image Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed Use the HTML width and height attributes to define the size of the image Use the CSS width and height properties to define the size of the image (alternatively) Use the CSS float property to let the image float Use the HTML <map> element to define an image-map Use the HTML <area> element to define the clickable areas in the image-map Use the HTML <img>'s element usemap attribute to point to an image-map Use the HTML <picture> element to show different images for different devices

table summary

Use the HTML <table> element to define a table Use the HTML <tr> element to define a table row Use the HTML <td> element to define a table data Use the HTML <th> element to define a table heading Use the HTML <caption> element to define a table caption Use the CSS border property to define a border Use the CSS border-collapse property to collapse cell borders Use the CSS padding property to add padding to cells Use the CSS text-align property to align cell text Use the CSS border-spacing property to set the spacing between cells Use the colspan attribute to make a cell span many columns Use the rowspan attribute to make a cell span many rows Use the id attribute to uniquely define one table <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table

list summary

Use the HTML <ul> element to define an unordered list Use the CSS list-style-type property to define the list item marker: <ul style="list-style-type:disc"> Use the HTML <ol> element to define an ordered list Use the HTML type attribute to define the numbering type : <ol type="A"> Use the HTML <li> element to define a list item Use the HTML <dl> element to define a description list Use the HTML <dt> element to define the description term Use the HTML <dd> 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 Control List Counting :<ol start="50">

Responsive Web Design - Frameworks

Using W3.CSS Bootstrap

Responsive Images Responsive images are images that scale nicely to fit any browser size.

Using the width Property If the CSS width property is set to 100%, the image will be responsive and scale up and down Using the max-width Property If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

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 eg. <ul style="list-style-type:disc">

where can be created web page?

Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).

Setting The Viewport

When making responsive web pages, add the following <meta> element in all your web pages: <meta name="viewport" content="width=device-width, initial-scale=1.0">

The target attribute specifies where to open the linked document.

_blank - Opens the linked document in a new window or tab _self - Opens the linked document in the same window/tab as it was clicked (this is default) _parent - Opens the linked document in the parent frame _top - Opens the linked document in the full body of the window framename - Opens the linked document in a named frame

check if the object is an Array function OR a date function

check if the object is an Array function: Example function isArray(myArray) { return myArray.constructor === Array; }

What is Character Encoding?

define different alphanumeric characters that could be used on the internet: numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( ) @ < > . UTF-8 (Unicode) covers almost all of the characters and symbols in the world.

this Alone

this Alone When used alone, the owner is the Global object, so this refers to the Global object. In a browser window the Global object is [object Window]: Example var x = this; In strict mode, when used alone, this also refers to the Global object [object Window]: Example "use strict"; var x = this;

[object Object]

this can be accessed using object.name eg. this.firstName + " " + this.lastName;

this in Event Handlers

this in Event Handlers In HTML event handlers, this refers to the HTML element that received the event: Example <button onclick="this.style.display='none'"> Click to Remove Me! </button>

this in a Function (Default)

this in a Function (Default) In a JavaScript function, the owner of the function is the default binding for this. So, in a function, this refers to the Global object [object Window]. Example function myFunction() { return this; }

this in a Function (Strict)

this in a Function (Strict) JavaScript strict mode does not allow default binding. So, when used in a function, in strict mode, this is undefined. Example "use strict"; function myFunction() { return this; }

this in a Method

this in a Method In an object method, this refers to the "owner" of the method.

The typeof Operator You can use the typeof operator to find the data type of a JavaScript variable.

typeof myCar // Returns "undefined" * typeof null // Returns "object" typeof NaN // Returns "number" typeof false // Returns "boolean" typeof [1,2,3,4] // Returns "object"

A Uniform Resource Locator (URL) is used to address a document (or other data) on the web.

web address like https://www.w3schools.com/html/default.asp follows these syntax rules: scheme://prefix.domain:port/path/filename