Jump to content

Exam 98-383: Introduction to Programming using HTML and CSS/Understand HTML Fundamentals

Add links
From Wikiversity
HTML and CSS
  1. Understand HTML Fundamentals
  2. Understand CSS Fundamentals
  3. Structure Documents Using HTML
  4. Present Multimedia Using HTML
  5. Style Web Pages Using CSS

This lesson covers HTML fundamentals, including markup, metadata, and industry best practices.[1]

Readings

[edit | edit source]
  1. Mozilla: HTML Basics

Activities

[edit | edit source]
  1. W3Schools: HTML Exercises

Construct markup that uses metadata elements

[edit | edit source]

Includes script; noscript; style; link; meta tags, including encoding, keywords, viewport, and translate.

script

[edit | edit source]

The HTML <script> element is used to embed or refer to an executable code; this is typically used to embed or refer to JavaScript code.[2]

Examples: 

<script src="javascript.js"></script>

<script>
  document.write("Hello Wikiversity!");
</script>

noscript

[edit | edit source]

The HTML <noscript> element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.[3][4]

Example: 

<noscript>Your browser does not support JavaScript!</noscript>

style

[edit | edit source]

The HTML <style> element contains style information for a document, or part of a document.[5]

Example: 

<style>
body {
  color: blue;
}
</style>
[edit | edit source]

The HTML <link> element specifies relationships between the current document and an external resource.[6]

Example: 

<head>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

meta tags

[edit | edit source]

The HTML <meta> element represents metadata that cannot be represented by other HTML meta-related elements.[7][8][9][10]

Examples: 

<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="HTML,CSS">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="google" content="notranslate">
  <meta http-equiv="refresh" content="60">
</head>

Construct well-formed markup that conforms to industry best practices

[edit | edit source]

Includes DOCTYPE declaration; HTML; head; body; proper syntax, including closing tags and commonly used symbols; comments

DOCTYPE

[edit | edit source]

In HTML, the doctype is the required <!DOCTYPE html> preamble found at the top of all documents.[11]

Example: 

<!DOCTYPE html>

html

[edit | edit source]

The HTML <html> element represents the root (top-level element) of an HTML document.[12]

Example: 

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
[edit | edit source]

The HTML <head> element provides general information (metadata) about the document, including its title and links to its scripts and style sheets.[13]

Example: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <link href="style.css" rel="stylesheet">
    <script src="javascript.js"></script>
  </head>
  <body>
  </body>
</html>

body

[edit | edit source]

The HTML <body> Element represents the content of an HTML document.[14]

Example: 

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Heading</h1>
    <p>Content</p>
  </body>
</html>

Common Symbols

[edit | edit source]

An HTML entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (;). Entities are frequently used to display reserved characters (which would otherwise be interpreted as HTML code), and invisible characters (like non-breaking spaces).[15][16]

Example: 

&nbsp;  <!-- non-breaking space -->
&lt;    <!-- less than -->
&gt;    <!-- greater than -->
&amp;   <!-- ampersand -->
&quot;  <!-- double quote -->
&apos;  <!-- single quote -->

Comments

[edit | edit source]

Comments are represented in HTML and XML as content between <!-- and -->.[17][18]

Example: 

<!-- This is a comment. -->

See Also

[edit | edit source]

References

[edit | edit source]
  1. ↑ Microsoft: Exam 98-383 Introduction to Programming using HTML and CSS
  2. ↑ Mozilla: script
  3. ↑ Mozilla: noscript
  4. ↑ W3Schools: noscript
  5. ↑ Mozilla: style
  6. ↑ Mozilla: link
  7. ↑ Mozilla meta
  8. ↑ W3Schools: meta
  9. ↑ Google: Meta tags that Google understands
  10. ↑ Mozilla: meta
  11. ↑ Mozilla: DOCTYPE
  12. ↑ Mozilla: html
  13. ↑ Mozilla: head
  14. ↑ Mozilla: body
  15. ↑ Mozilla: Entity
  16. ↑ W3Schools: HTML Entities
  17. ↑ Mozilla: Comment
  18. ↑ W3Schools: HTML Comments
Retrieved from "https://en.wikiversity.org/w/index.php?title=Exam_98-383:_Introduction_to_Programming_using_HTML_and_CSS/Understand_HTML_Fundamentals&oldid=2210138"