Introduction to HTML, CSS, & JavaScript Flashcards
(103 cards)
Discuss the history and objectives of HTML (4)
1 HTML stands for HyperText Markup Language;
2 enables documents to be displayed as web pages on the Internet.
3 Tags represent the elements of an HMTL page like paragraphs, lists, and tables.
4 HTML5, the latest version, supports:
a pages written in HTML or XML syntaxand markup
b APIs for web storage, video, and audio content
c also works across devices and with earlier HTML versions
explain HTML (2) vs XHTML (3)
XHTML:
1 needs all lowercase tags
2 must be well-formed or the parser will stop processing
3 advantage = more strict syntax rules so easier to maintain/less room for error
HTML:
1 case-insensitive
2 unmatched quotations and non-terminated/uncontained elements are allowed
define the HTML DOM Tree
and explain its purpose
“Document Object Model” = data representation of the objects that comprise the structure and content of a document on the web.
serves as an interface between HTML and scripting languages like JavaScript, enabling dynamic interactions with the document
Describe how HTML uses APIs. (4)
When a webpage loads in the browser, it becomes a Document object.
The Document object lets you access and control everything on the webpage using JavaScript.
The DOM (Document Object Model) is like a tree that shows all the elements on the webpage. JavaScript can use this to find and work with parts of the page.
To get or change something on the page with JavaScript, you start by using the document object. For example: document.getElementById(“header”) finds the element with the ID “header.”
explain html5
- syntax compatible with…?
- new and refined…?
- HTML web apps have…?
1 syntax compatible with HTML4 and XHTML1
2 new and refined APIs for video and audio elements, offline web apps, and drag and drop
3 HTML5 Web Applications have:
a Improved search indexing with meta tags,
b better page load times,
c enhanced user experience,
define scripting (1)
explain how browsers enable scripting (4)
1 scripting refers to writing code, typically in JavaScript, that interacts with the elements of an HTML document to make the webpage dynamic and interactive.
2 can be done directly within your HTML code within the script tag, or within a separate file which is called in your HTML code.
3 It can be used for various tasks, such as form validation, dynamically changing the content of a website, and manipulating images.
4 Since scripting can be turned off, the recommendation is to use scripting but not to rely on it.
5 Scripting is enabled when certain browser conditions are met.
what is html5 sandboxing and how does it work? (2)
1 Sandboxing an iframe is a way to limit the permissions that an iframe can run with. HTML5 isolates the iframe’s content from the parent document
3 This sandboxed browsing context can be set at the
page level or specified as an attribute for embedded objects.
Outline how HTML is supported by common browsers.
- old versions of certin browsers do not support certain features
- caniuse.com
- you can use JavaScript to check whether a certain HTML5 element is supported by a browser.
LIist some of the features of HTML5,
HTML5
includes features for categorizing sections of web pages, and managing data, video and
audio tools.
Enables you to develop a single, cross-browser application for the web and portable devices.
and helps you to create a more engaging user experience.
Define parsing vs processing
Parsing
Parsing is the act of analyzing and breaking down input data (like text, code, or a file) into smaller, understandable components. For example, when a browser reads HTML, it parses the text to identify tags, attributes, and content, forming a structured representation (the DOM tree).
Processing
Processing is the step that follows parsing, where the program takes the structured data and performs actions or computations with it. For instance, after parsing the HTML, the browser processes it to render the webpage, apply styles, execute scripts, and respond to user interactions.
describe the Document Object Model or DOM tree,
The DOM tree is an in-memory representation of a document.
DOM trees contain nodes, which define the type
of document and its structure, such as
headers and paragraphs, text nodes, and comment nodes.
list some HTML document API properties
and methods, describe how scripting is enabled in browsers,
describe browser support for HTML5 features.
- Use titles and headings to label information
- Insert text using the paragraph element
- Insert line breaks on a page
- Add links to different sections of a page and other pages
- Create a list of items
- Add a table of data
- Insert an image
how do you always have to start an html document?
must always start by specifying the DOCTYPE. The entire content is then enclosed within an <html> tag
eg <!DOCTYPE html>
what does the head tag do?
The <head> tag contains all the metadata about the page: This information may include the document title, character set, styles to be used, scripts, etc.
Contents of <head> section are not displayed to the user.
what is the purpose of the body tag?
<body> tag contains the content that is displayed to the end user.
</body>
what is the title of a page, where is it displayed, and how do you format it?
The title of the page appears on the browser tab when you open a webpage in the browser.
using the <title> tag, which is placed within the <head> section of your HTML markup:</title>
<head>
<title>Sample Page Title</title>
</head>
explain headers
HTML defines six different font sizes for headings. Each heading represents a different level of importance and text size
<h1> through <h6>
should be placed in <body> as follows:
<body>
<h1>Most Important (and Largest) Heading</h1>
<h6>Least Important (and Smallest) Heading</h6>
<body>
NOTE: cannot be placed within <address>, <footer>, or other <header> elements.
</header></footer></address></body></body></body></h6></h1>
explain <p> tag
<p> tag should be used to insert text into your HTML document. stands for paragraph and includes any text content, whether it is a single word or a 10-page essay.
<body>
<h1>Most Important (and Largest) Heading</h1>
<p>This is some text. The content within this paragraph element can be as short or as long as needed.</p>
<h6>Least Important (and Smallest) Heading</h6>
<p>This is another paragraph of text.</p>
<body>
</body></body></p>
explain <br></br> tag
A line break is used to complete one line and continue the remaining text
at the start of a new line,
explain how to hyperlink text
<a> tag defines a hyperlink in HTML, followed by the href attribute to define the destination address of the hyperlink.</a>
<a href="https://www.ibm.com">IBM</a>
how do you get a link to open in a new tab?
target=”_blank” before the hyperlink text
<a>IBM</a>
how do you link to a different section in the same page?
either of the following two ways:
1 2 <a href="#">Top of Page</a> <a href="#top">Top of Page</a>
explain linking to a diff section within a page and how you label them
o link to a different section of the page, you can use the id of the section you want to link to, as follows:
1 2 3 4 5 <a href="#section">Link to section</a> ... <h1 id="section">Section</h1>
- (ordered list) tag for numbered lists and the
- (unordered list) tag for bulleted lists.
| Heading 1 | Heading 2 | Heading 3 |
|---|---|---|
| H1 - Data Item 1 | H2 - Data Item 1 | H3 - Data Item 1 |
| H1 - Data Item 2 | H2 - Data Item 2 | H3 - Data Item 2 |
| H1 - Data Item 3 | H2 - Data Item 3 | H3 - Data Item 3 |