| HTML <!DOCTYPE> Declaration | |||
| <!DOCTYPE html> | HTML 5 declaration | ||
| The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. | |||
| The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. | |||
| Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect. | |||
| HTML <head> Tag | <head> | The <head> element is a container for all the head elements. Tip: Put the <base> tag as the first element inside the <head> element, so that other elements in the head section uses the information from the <base> element. | |
| <base> | The <base> tag specifies the base URL/target for all relative URLs in a document. | ||
| <title>Title of the document</title> | The <head> element can include a title for the document, scripts, styles, meta information, and more. | ||
| <style> | The <style> tag is used to define style information for an HTML document. Each HTML document can contain multiple <style> tags. | ||
| <link> | The <link> tag defines a link between a document and an external resource. The <link> tag is used to link to external style sheets. | ||
| <meta> | |||
| <script> | The <script> tag is used to define a client-side script (JavaScript). | ||
| <noscript> | |||
| </head> | |||
| HTML <meta> Tag | <meta> | Metadata is data (information) about data. | |
| The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. | |||
| Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. | |||
| The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. | |||
| Note: <meta> tags always go inside the <head> element. | |||
| Note: Metadata is always passed as name/value pairs. | |||
| Note: The content attribute MUST be defined if the name or the http-equiv attribute is defined. If none of these are defined, the content attribute CANNOT be defined. | |||
| HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |||
| HTML5: <meta charset="UTF-8"> | |||
| <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> | Define keywords for search engines | ||
| <meta name="description" content="Free Web tutorials on HTML and CSS"> | Define a description of your web page | ||
| <meta name="author" content="Hege Refsnes"> | Define the author of a page | ||
| <meta http-equiv="refresh" content="30" | Refresh document every 30 seconds | ||
| <meta charset="GB18030"> | |||
| HTML <link> Tag | <link> | The <link> tag defines a link between a document and an external resource. | |
| <head> | The <link> tag is used to link to external style sheets. | ||
| <link rel="stylesheet" type="text/css" href="theme.css"> | The <link> element is an empty element, it contains attributes only. | ||
| </head> | This element goes only in the head section, but it can appear any number of times. | ||
| <script> | |||
| <p id="demo"></p> | The <script> tag is used to define a client-side script (JavaScript). | ||
| <script> | The <script> element either contains scripting statements, or it points to an external script file through the src attribute. | ||
| document.getElementById("demo").innerHTML = "Hello JavaScript!"; | Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. | ||
| </script> | his JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo" | ||
| <p>JavaScript can change the content of an HTML element:</p> | |||
| <button type="button" onclick="myFunction()">Click Me!</button> | JavaScript can change HTML content | ||
| <p id="demo">This is a demonstration.</p> | |||
| <script> | |||
| function myFunction() { | |||
| document.getElementById("demo").innerHTML = "Hello JavaScript!"; | |||
| } | |||
| </script> | |||
| <p id="demo">JavaScript can change the style of an HTML element.</p> | |||
| <script> | JavaScript can change HTML styles | ||
| function myFunction() { | |||
| document.getElementById("demo").style.fontSize = "25px"; | |||
| document.getElementById("demo").style.color = "red"; | |||
| } | |||
| </script> | |||
| <script> | |||
| function light(sw) { | JavaScript can change HTML attributes | ||
| 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> | |||
| <noscript> Tag | <script> | ||
| document.getElementById("demo").innerHTML = "Hello JavaScript!"; | |||
| </script> | |||
| <noscript>Sorry, your browser does not support JavaScript!</noscript> | |||
| <p>A browser without support for JavaScript will show the text written inside the noscript element.</p> | The <noscript> 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 | ||